08_设计Web应用程序布局与导航.ppt

1、设计Web应用程序的布局和导航,学习目标,Web应用程序布局概述。 使用母版页创建Web应用程序布局。 导航服务器控件概述。 使用导航控件创建站点导航层次结构。 CSS样式的概念。 将样式应用于控件。 ASP.NET主题和外观概述。 使用ASP.NET主题和外观自定义Web站点。,Web应用程序布局概述,复杂的Web应用程序需要一致的页面布局 传统的解决方案一般包括下列几种： 使用框架：缺点是需要浏览器支持。 使用包含文件：缺点是影响性能。 使用用户自定义控件：缺点是增加了程序开发的复杂性。,母版页概述,使用ASP.NET 2.0的母版页，可以为Web站点创建统一的布局。 母版页定义Web页面

2、的外观和标准行为；各内容页定义Web页面要显示的特殊内容。 当用户请求内容页时，这些内容页与母版页合并一起输出。 母版页功能可以为站点定义公用的结构和界面元素，如页眉、页脚或导航栏。,定义母版页,母版页为具有扩展名.master的ASP.NET文件。 母版页由特殊的 Master指令识别。例如： 母版页可以包含静态文本、HTML元素、服务器控件以及代码。 母版页还可以包含一种特殊类型的控件：ContentPlaceHolder控件。ContentPlaceHolder定义了一个母版页呈现区域，可由与母版页关联的页的内容来替换。ContentPlaceHolder还可以包含默认内容。 例1，定义

3、ContentPlaceHolder控件FlowerText： ,定义使用母版页的内容页,通过创建各个内容页来定义母版页的占位符控件的内容。 在内容页的Page指令中建立绑定。例如下述Page指令，将该内容页绑定到Master1.master母版页。 内容页可声明Content控件，通过ContentPlaceHolderID属性与特定的 ContentPlaceHolder控件关联。 例如，下列内容页使用母板页Site.master并重写了母版页中的内容占位符部分： With sunshine, water, and careful tending, roses will bloom sev

4、eral times in a season. ,DEMO:创建花鸟网站的母版页Site.master,操作实例8-1：创建花鸟网站的母版页Site.master 开发任务：创建花鸟网站的母版页Site.master。,DEMO:创建花鸟网站的ASP.NET内容页daisy.aspx,操作实例8-2：创建花鸟网站的ASP.NET内容页daisy.aspx 开发任务：创建花鸟网站的内容页daisy.aspx，指定使用的母版页为Site.master。使用指定的母版页后,ASP.NET站点导航概述,每个站点都需要一致的导航解决方案，以帮助用户在不同的页面之间进行跳转。 传统的解决方案一般包括下列几

5、种： 使用超链接标记：缺点是需要大量的手工编码和维护。 使用服务器控件（如HyperLink、LinkButton）：缺点是需要手工编码。 使用编程方法：缺点是增加了程序开发的复杂性。,ASP.NET站点导航,ASP.NET 2.0站点导航功能为用户导航站点提供一致的方法。 ASP.NET站点导航将页面的链接存储在一个中央位置（站点地图），并使用特定Web服务器导航控件在每页上显示导航菜单。,站点地图文件,站点地图文件Web.sitemap必须位于应用程序的根目录。 在Web.sitemap文件中，为网站中的每一页添加一个siteMapNode元素，也可以嵌套siteMapNode元素创建层次

6、结构。 Web.sitemap文件包含单个顶级元素。元素中至少嵌套一个 元素。 每一个元素通常包含Url、Title和Description属性,站点地图文件,例1：ASP.NET快速入门的站点地图如下所示： ,站点导航服务器控,使用站点导航服务器控件，通过绑定控件到站点地图数据源，可以动态读取站点地图中的导航信息，在Web页面上生成导航超链接。 ASP.NET提供的站点导航服务器控件包括： TreeView：提供树状结构导航超链接。允许用户展开或折叠选定节点。 Menu：提供菜单式导航超链接。将光标悬停在菜单上时，将展开包含子节点的节点。 SiteMapPath：显示一些链接的列表，这些链接

7、表示用户的当前页以及返回至网站根目录的层次路径。,TreeView控件,ASP.NET TreeView控件用于以树状结构图形界面显示分层数据，如文件目录、站点导航地图等。 通过自定义TreeView控件，允许其具有多种外观。 TreeView支持回发样式的事件以及简单的超链接导航。,Menu控件,ASP.NET Menu控件用于在ASP.NET网页中显示静态和动态菜单。 无需编写任何代码，便可控制Menu控件的外观、方向和内容。 菜单控件由一个或多个MenuItem组成，这些MenuItem一般组织在层次结构的不同级别中。 每个MenuItem包含一些属性，这些属性确定MenuItem的外观

8、（如文本和navigateURL等）。,SiteMapPath控件,SiteMapPath控件用于指示当前显示的页在站点中位置的引用点。 通过读取站点地图所提供的数据，显示一些链接的列表，这些链接表示用户的当前页以及返回至网站根目录的层次路径。,DEMO:创建花鸟网站ASP.NET导航菜单,操作实例8-3：创建花鸟网站ASP.NET导航菜单 开发任务：创建花鸟网站导航地图，并修改Site.master母版页，使用TreeView导航控件显示网站导航菜单。,DEMO:使用ASP.NET导航控件Menu和SiteMapPath,操作实例8-4：使用ASP.NET导航控件Menu和SiteMapPa

9、th 开发任务：修改Site.master，使用导航控件Menu和SiteMapPath实现站点导,样式概述,ASP.NET 提供了一些可在应用程序中对页和控件的外观或样式进行自定义的功能。 控件支持 Style 对象模型，用于设置字体、边框、背景色和前景色、宽度、高度等样式属性。 控件还完全支持可将样式设置与控件属性分离的级联样式表（CSS）。,CSS 结构和规则,一个样式表由样式规则组成，浏览器使用样式表规则去呈现一个文档。每个规则的组成包括一个选择符和该选择符所接受的样式。样式规则组成如下： 选择符 属性1: 值1; 属性2: 值2 在样式表中样式规则中可定义的类选择符包括： （1）选择

10、符 （2）类选择符 （3）ID 选择符 （4）关联选择符,将样式表加入到HTML中,将样式表加入到HTML中的一般有下列几种方法： （1）使用LINK链接 （2）在HTML文件嵌入STYLE元素 （3）使用import导入样式表文件 （4）内联样式,ASP.NET主题和外观,使用ASP.NET 2.0的“主题和外观”功能，可以将样式和布局信息分解为单独的文件组，统称为“主题”。 主题可应用于任何站点，影响站点中页和控件的外观。 通过更改主题即可轻松地维护对站点的样式更改，而无需对站点各页进行编辑。还可与其他开发人员共享主题。,定义主题,主题位于应用程序根目录下的App_Themes文件夹中。

11、主题由此文件夹下的命名子目录组成，该子目录包含一个或多个具有.skin扩展名的外观文件的集合。 主题还可以包含一个级联样式表文件（.CSS）和/或图像等静态文件的子目录。,定义外观,一般一个外观文件对应于一个控件，常用的命名规范为控件名.skin（例如：Label.skin）。 一个外观文件也可以包含多个控件定义。在外观文件中，定义的控件的形式和页面中定义的形式一致，但不需要指定控件的ID的属性。 在主题中定义的控件属性将自动重写使用该主题的Web目标页中同一类型的控件的本地属性值。 例如，如果外观文件Label.skin中有如下控件定义： ,在页面中使用主题,通过将指令设置为全局主题或应用程

12、序级主题的名称,可为单个页指定主题。 通过在Web.config中指定节，也可以为应用程序中的所有页定义应用的主题。,指定控件使用不同的外观,通过创建不同的控件定义，可以在外观文件中为同一类型的控件定义不同的样式。 如果定义了默认外观和SkinID=Blue的外观： 则： 使用默认外观 使用外观Blue,控件属性的应用顺序,在Web页面呈现时，如果对应用程序既应用 Theme 又应用 StyleSheetTheme，则按以下顺序应用控件的属性： （1）首先应用StyleSheetTheme属性。 （2）然后应用页中的控件属性（重写StyleSheetTheme）。 （3）最后应用Theme 属

13、性（重写控件属性和StyleSheetTheme）。,DEMO:使用ASP.NET主题样式自定义Web站点,操作实例8-5：使用ASP.NET主题样式自定义Web站点 开发任务：创建主题classic，创建样式classic.css。并仅使花鸟网站的daisy.aspx Web页面使用classic主题样,DEMO:创建并使用ASP.NET主题外观,操作实例8-6：创建并使用ASP.NET主题外观 开发任务：创建主题Modern，创建外观Modern.skin。并配置Web.config，使花鸟网站的所有Web页面使用Modern主题外,学习小结,使用ASP.NET 2.0的母版页，可以为Web站点创建统一的布局。 母版页为具有扩展名.master（如MySite