项目3页面导航与视图切换

2020-02-27 137浏览

  • 1.项项目目 33 页页面面导导航航与与视视图图切切换换 《 ASP.NET 动态网页设计项目教程》 主编：郭建东
  • 2.教学目标 知识教学目标  使用 CSS+DIV 设置一级横向导航和竖向导航  使用 Menu 控件建立一级横向导航和竖向导航  使用 Menu 控件建立二级横向导航  使用 TreeView 控件建立树状导航  使用 MultiView 控件实现视图切换 技能培养目标：  根据页面设计需求，使用多种方式制作横向一级和多级导航。  根据页面设计需求，使用多种方式制作竖向一级和多级导航。  根据页面设计需要，制作多视图切换模块
  • 3.• 导航是网页中不可缺少的元素，按导航的层次 结构可分为一级导航、二级导航和多级导航； 按导航的排列方式可分为横向导航和竖向导航 ；按导航创建方式可分为使用控件制作的导航 和使用 CSS ＋ DIV 制作的导航；横向导航在页 面中的位置一般在网页的头部页眉处；竖向导 航在网页中的位置一般在网页的左侧栏处，实 际摆放位置可根据页面视图效果设置。本项目 介绍导航的多种创建方式。
  • 4.任务 1 使用 CSS+DIV 创建导航 关键知识： 使用 CSS ＋ DIV 制作导航需要掌握下列知识： • 浮动设置：采用 ul-li 列表项的形式制作横向导航时，关键点是 需要设置每一个 li 列表项由默认的竖向排列转成横向排名，通 过 CSS 样式控制这种转向，需要设置 li 样式向左或向右浮动。 • 复合链接样式的设置：文字链接有默认的链接样式、鼠标经过 样式和访问过后的样式，如果需要改变默认的样式，则需要对 链接样式进行复合样式定义，二个样式如果一样，可用逗号隔 开。 • 外部样式的应用：本节项目所有样式均保存在 CSS 文件夹下的 样式文件中，需要在网页文件源代码视图的标签内添 加对外部样式文件的引用。
  • 5.1.2.1 横向导航的制作
  • 6.1.2.1 横向导航的制作 步骤见教材任务，效果图如下：
  • 7.1.2.2 竖向导航的制作
  • 8.1.2.2 竖向导航的制作 • 样式的设计
  • 9.1.2.2 竖向导航的制作 • 步骤见教材任务
  • 10.任务 2 使用 Menu 控件建立网站导航 任务描述： • 本任务了解 menu 控件的基本属性， 并使用 menu 控件建立一级横向导航、 二级横向导航、一级竖向导航和二级竖 向导航。
  • 11.2.1 关键知识：认识 menu 控件 • 1 、认识 Menu 控件 • 2 ．静态的方式添加 Menu 控件的菜单
  • 12.3 ． Menu 控件的常用属性 1 ） Orientation 属性：用于设置控件的呈现方向（ Vertical 、 Hori zontal 。 2 ） StaticDisplayLevels 属性：用于设置静态菜单显示级别数。默认 值是 1 。 3 ） MaximumDynamicDisplayLevels 属性：指定在静态显示层后应 显示的动态显示菜单节点层数。 4 ） DisappearAfter 属性：设置菜单动态显示部分从显示到消失所 需的时间长度。默认值为 500 毫秒。 5 ） CssClass 属性：可引用类样式。添加静态菜单项后可通过引用 链接类样式实现导航的效果。 6 ） StaticEnableDefaultPopOutImage 属性，该属性默认为 True ， 有多级导航菜单时，菜单项之间会出现的间隔符号。设为 False ，则不出现间隔符号。 7 ） StaticMenuStyle 样式：可设置一级静态菜单项的样式 8 ） DynamicMenuStyle 样式：可设置除一级静态菜单项外的其它 动态菜单的样式。
  • 13.2.2.1 使用 Menu 控件建立一级横向导航 步骤见教材任务
  • 14.2.2.2 使用 Menu 控件建立二级横向导航 步骤见教材任务
  • 15.2.2.3 使用 Menu 控件建立一级竖向导航 步骤见教材任务
  • 16.2.2.4 使用 Menu 控件建立二级竖向导航 • 步骤见教材任务
  • 17.任务 3 使用 TreeView 导航控件建立树状 导航 任务描述： • 网站的后台管理主页面通常需要设置 一个导航，通过该导航，使得管理员可 链接到各个页面，从而实现数据库的插 入、删除、更新和修改用户信息等任务 ，本任务使用 TreeView 控件建立一个 管理员后台主页面的树状导航。
  • 18.3.1 关键知识： TreeView 控件 • TreeView 控件由一个或多个节点构成，通过 树状视图形式展示。可以将控件绑定到 SiteM apDataSource 控件上、绑定到 XMLDataSour ce 控件上和绑定到数据库上，树中的每个项 都被称为一个节点，由 TreeNode 对象表示。 每个节点都具有一个 Text 属性和一个 Value 属性。 Text 属性的值显示在 TreeView 控件中 ，而 Value 属性则用于存储有关该节点的任何 附加数据。
  • 19.关键知识： TreeView 控件 常用结点属性值如下： • 1 ） Expanded 属性：指定默认情况下节点是否打开。 • 2 ） NavigateUrl 属性：菜单被选中是被定位到的页面的 U rl 。 • 3 ） SelectAcion 属性：指定节点被选中时执行的操作，例 如展开和折叠。 • 4 ） Text 属性：结点项显示的文本。 • 5 ） Value 属性：结点项的值。 • 6 ） Target 属性：设置为 _blank ，从空白页打开跳转的页 面。 • 7) CssClass 属性：引用 CSS 类样式。 • 8) NodeIndent 属性：设置结点的缩进量。 • 9 ） NodeStyle 样式：设置结点的样式，包括类样式的引 用、水平间距、字体等样式的设置。图 3-12 TreeView 导 航 • 10) HoverNodeStyle 样式：鼠标经过结点样式的设置。
  • 20.3.2 使用 TreeView 控件创建导航 步骤见教材任务
  • 21.任务 4 使用 multiview 控件实现多视图切 换 • 任务描述： • 在各类门户网站中通常会设计一个多 视图切换层，如在一个布局位置，用户 可通过点击切换按钮实现同一位置查看 新闻或通知或公告等信息，如图 3-14 所 示效果。本任务使用 MultiView 和 View 控件结合，实现多视图的切换。
  • 22.4.1 关键知识：多视图控件 • 1 、 MultiView 和 View 控件
  • 23.• 2 、与 MultiView 控件配合使用的按钮 控件的参数设置
  • 24.4.2 使用多视图控件实现界面切换 步骤如下： • 新建网页和样式文件 • 容器层设计 • 定位并设置链接按钮 • 设置链接样式 • 添加 MultiView 和 View 控件 • 设计链接标题样式 • 编写事件代码 • 效果图如下：
  • 25.任务 5 站点地图应用 任务描述： • 根据网站的文件结构创建站点地图， 并依据站点地图与 SiteMapPath 控件结 合，实现站点路径导航，与 menu 控件 和 TreeView 控件结合，实现页面导航。
  • 26.5.1 关键知识：站点地图控件 • 站点地图文件按站点的分层形式组织页面 ，用于描述站点的逻辑结构，根结点是 sit eMap 。可以为网站中的每个页面添加一 个 SiteMapNode 元素，并通过嵌入 siteM apNode 元素来创建层次结构。每一个 Sit eMapNode 元素都有一些常用属性
  • 27.站点地图与站点地图路径控件 站点地图与 SiteMapPath 控件 ：站点地图控件可自动从站点地 图文件获取文件路径并显示在页面上，如图 3-18 所示
  • 28.站点地图与 Menu 控件 建立横向导航， 步骤见教材任务
  • 29.站点地图与 TreeView 控件 • 建立树状视图导航，步骤见教材项目