ASPNET程序设计教程第7章-网站设计课件.ppt

1、第第7章章 网站设计网站设计7.1 母版页母版页7.2 样式样式表表7.3 主题和皮肤主题和皮肤7.4 网站导航网站导航7.1 母版页母版页v7.1.1 母版页和内容页概述母版页和内容页概述母版页代码和普通的.aspx文件代码格式很相近，最关键的不同是母版页由特殊的 Master指令识别，该指令替换了用于普通.aspx页的 Page指令，格式如下：可以看出，其实母版页和普通的.aspx页面非常类似，第一行指定了母版页的以下几个属性。(1)Master Language：使用的编程语言。(2)CodeFile：母版页的后台代码。(3)Inherits：母版页对应的一个类。7.1.1 母版页和内容

2、页概述母版页和内容页概述每个网页的共同部分都可以在母版页设计中体现出来。常见的母版页代码结构如下：Master page title 7.1.1 母版页和内容页概述母版页和内容页概述在内容页中，需要创建两个Content控件，一个映射到Main，另一个则映射到Footer。当客户端请求内容页时，它的内容Content与母版页的一个副本合并，把定义在Content中的特定内容放到Master页面的指定占位符处，然后把整个包传递给浏览器，如图7.1所示。7.1.2 创建母版页创建母版页母版页具有下面的优点：(1)使用母版页可以集中处理页的通用功能，以便可以只在一个位置上进行更新。(2)使用母版页可

3、以方便地创建一组控件和代码，并将结果应用于一组页。例如，可以在母版页上使用控件来创建一个应用于所有页的菜单。(3)通过允许控制占位符控件的呈现方式，母版页可以在细节上控制最终页的布局。(4)母版页提供一个对象模型，使用该对象模型可以从各个内容页自定义母版页。7.1.2 创建母版页创建母版页创建母版页的方法是，在VS2008的“解决方案资源管理器”中右键单击网站，选择“添加新项”，在对话框中选择“母版页”模板。默认情况下，新建的Master页面的默认名称是MasterPage.master，它位于站点的根目录，如图7.2所示。7.1.2 创建母版页创建母版页以.master为后缀的文件都是母版页

4、，Master页面包括3部分：(1)第一部分是任何提交的页面都需要的一些基本页面标记（例如，Master的DOCTYPE、xmlns、html和head标记）。这些内容在Mater页面中只输入一次以减少重复。服务器能在DOCTYPE和xmlns引用的位置查找页面上使用的标记定义。这些标记将不在Content页面中出现。母版页代码的文件代码头声明是，而不是普通.aspx文件头声明的。母版页 7.1.2 创建母版页创建母版页(2)Master页面的第二部分是在所有页面上放置的要运行的脚本代码。例如：Protected Sub Page_Load(ByVal sender As Object,ByV

5、al e As System.EventArgs)End Sub7.1.2 创建母版页创建母版页(3)Master页面包含一些用于布局的HTML及多个ContentPlaceHolder控件，用于在母版中占位，控件本身不包含具体内容，具体的内容放置在内容页中。两者通过ContentPlaceHolder控件的ID属性绑定。例如：.版权所有copyright©2008.7.1.2 创建母版页创建母版页【例例7.1】创建母版页。(1)打开VS2008，新建网站WebSite7。(2)在“解决方案资源管理器”中，右击站点，选择“添加新项”，在“添加新项”对话框中选择“母版页”模板，命名为“

6、MyMaster1.master”。(3)打开MyMaster1.master，可以看到里面默认的已经有一个ContentPlaceHolder控件，默认ID为ContentPlaceHolder1。像编辑普通网页那样，在“设计”视图下，拖放控件设计网页，如图7.3所示。7.1.3 创建内容页创建内容页创建内容页有两种方法：(1)在所要继承的母版页任意位置单击右键，选择“添加内容页”，如图7.4所示。就会出现默认的以“Default+序号”命名的内容页的.aspx文件。7.1.3 创建内容页创建内容页(2)在“解决方案资源管理器”中，右击站点名称，新建“添加新项”选项，在弹出的“添加新项”对话

7、框中选择“Web窗体”模板，并选中“选择母版页”复选框，如图7.5所示。然后在“选择母版页”对话框中选择相应的母版页，如图7.6所示。7.1.3 创建内容页创建内容页【例例7.2】创建例7.1中所创建的MyMaster1.master的内容页。(1)按照前面介绍的具体方法在网站WebSite7中添加一个内容页。选择母版MyMaster1.master，给新的Web窗体命名为“Ex7-2.aspx”。(2)打开Ex7-2.aspx，如图7.7所示，页面中灰色不可编辑。打开Ex7-2.aspx文件“源”视图，代码如下：7.1.3 创建内容页创建内容页7.1.3 创建内容页创建内容页(3)在控件Co

8、ntent1中放置三个LinkButton控件，Text属性分别为：母版页、主题和皮肤、网站导航。(4)在控件Content2中放置Label控件，设置Text属性为：母版页和内容页。添加一个，在上面放置一段文字。(5)设置颜色、字体等格式，根据需要适当美观。(6)调试运行，结果如图7.8所示。7.1.4 母版页和内容页的运行机制母版页和内容页的运行机制1代码结构代码结构从代码结构方面来说，母版页内容以页面公共部分为主，包括代码头、ContentPlaceHolder控件及其他常见Web元素。内容页则主要包含页面非公共部分，包括代码头和Content控件。Content控件中包含着页面非公共内

9、容。2运行过程运行过程母版页和内容页的运行过程可以概括为以下5个步骤：（1）用户通过键入内容页的URL来请求某页。（2）获取内容页后，读取 Page指令。如果该指令引用一个母版页，则也读取该母版页。如果是第一次请求这两个页，则两个页都要进行编译。（3）母版页合并到内容页的控件树中。（4）各个Content控件的内容合并到母版页相应的ContentPlaceHolder控件中。（5）呈现得到结果页。7.1.4 母版页和内容页的运行机制母版页和内容页的运行机制3事件顺序事件顺序当访问结果页时，实际访问的是内容页和母版页。作为有着密切关系的两个页面，二者都要执行各自的初始化和加载等事件。具体过程如图

10、7.9所示。7.1.4 母版页和内容页的运行机制母版页和内容页的运行机制以上8个过程对应着11个具体事件：（1）母版页中控件Init事件；（2）内容页中Content控件Init事件；（3）母版页Init事件；（4）内容页Init事件；（5）内容页Load事件；（6）母版页Load事件；（7）内容页中Content控件Load事件；（8）内容页PreRender事件；（9）母版页PreRender事件；（10）母版页控件PreRender事件；（11）内容页中Content控件PreRender事件。7.1.5 访问母版页控件和属性访问母版页控件和属性1使用使用FindControl方法方法例

11、如，在母版页面上有一个ID为Label1的标签控件，在内容页中有一个ID为LabelTitle的标签控件，在页面加载事件中，让内容页的控件LabelTitle获取母版页控件Label1的Text，代码如下：Protected Sub Page_Load(ByVal sender As Object,ByVal e As System.EventArgs)Handles Me.Load LabelTitle.Text=CType(Master.FindControl(Label1),Label).Text End Sub2使用使用MasterType指令指令下面是添加了MasterType指令的

12、某个内容页的前两行代码：7.1.5 访问母版页控件和属性访问母版页控件和属性【例例7.3】访问母版页。(1)添加一个母版页，命名为“MyMaster2.master”，再添加一个Web窗体文件，命名为“Ex7-3.aspx”。(2)选择母版MyMaster2.master，在页面首部添加一个ID为LabelM的Label控件，其Text属性为“我是母版的！”。创建属性MasterPageLabel，并通过母版页类的此属性对该控件进行访问，代码如下：Public Property MasterPageLabel()As Label Get Return LabelM End Get Set(By

13、Val value As Label)LabelM=value End Set End Property 7.1.5 访问母版页控件和属性访问母版页控件和属性(3)打开内容页Ex7-3.aspx，在内容页中添加一个Label控件，ID为“LabelGetMaster”，访问母版页中ID为LabelM的Label控件的Text属性，添加Page的Load事件处理代码，代码如下：Protected Sub Page_Load(ByVal sender As Object,ByVal e As System.EventArgs)Handles Me.Load LabelGetMaster.Text=

14、Master.MasterPageLabel.Text End Sub切换到Ex7-3.aspx的“源”视图，添加如下代码：(4)运行网页，如图7.10所示。7.1.6 动态加载母版页动态加载母版页例如，在Session中存储用户是否登录的值login，根据用户是否登录自动选择母版页的代码片段如下：Protected Sub Page_PreInit(ByVal sender As Object,ByVal e As System.EventArgs)Handles Me.PreInit If CBool(Session(login)Then Page.MasterPageFile=/Mast

15、erPage_LoginUser.master Else Page.MasterPageFile=/MasterPage_GuestUser.master End If End Sub7.1.7 母版页应用范围母版页应用范围1页面级页面级页面级母版页是最为常见的。只要通过属性设置，在内容页中正确绑定母版页即可，而内容页可以是应用程序中任意的.aspx页面。示例代码如下：2应用程序级应用程序级如果应用程序中有很多页面需要绑定同一个母版页，分别绑定，就会显得特别麻烦。可以在Web.config中添加一个配置节，并设置其中的MasterPageFile的属性值为母版页URL地址。示例代码如下：7.1

16、.7 母版页应用范围母版页应用范围3文件夹级文件夹级应用程序级的绑定母版虽然方便，但这种方式缺乏灵活性。任何违背了规则（例如，含有根标签或者定义了一个不对应ContentPlaceHolder的内容区域）的Web页面都会自动中断。如果一定要使用这一功能，建议不要对整个网站应用该功能；可以为内容页面创建一个子文件夹，并只在这个文件夹里创建一个应用母版页的web.config文件。7.1.8 缓存母版页缓存母版页许多开发人员使用高速缓存来提高ASP.NET页面的性能，它也可以用于包含更新频率不高的数据页面。在处理一般的.aspx页面时，可以使用如下代码给页面应用输出高速缓存：这行代码表示在服务器的

17、内存中把页面缓存10秒。VaryByParam表示根据什么参数来结束缓存，Duration表示缓存时长。7.2 样式表样式表v7.2.1 样式选择符样式选择符内联式内联式适用于单独控制某个元素样式的情况。这种方式的优点是设置样式直观、方便；缺点是修改某些元素的样式时，需要打开网页文件才能修改。下边的代码采用内联式控制各个元素的样式：学生成绩管理系统7.2.1 样式选择符样式选择符嵌入式嵌入式适合控制一个网页内具有相同样式的多个元素。如果把上例中的样式改成嵌入式定义，在head内定义样式，可以将代码改成如下的形式：一个Hello网页#div0text-align:center;imgwidth:

18、300px;height:60px;#div1font-size:40px;color:red;学生成绩管理系统7.2.1 样式选择符样式选择符外部链接式外部链接式则适用于控制多个网页内具有相同样式的元素。.css文件内的内容和嵌入式方式下head标记内的style标记内的内容相同，只是单独保存在一个文件中，例如：#div0text-align:center;imgwidth:300px;height:60px;#div1font-size:40px;color:red;在XHTML中引用样式文件后，文件内的元素才会应用样式文件内的样式规则。引用样式文件的方法如下，在head标记块内添加下面的

19、代码：7.2.1 样式选择符样式选择符1.标签选择符标签选择符标签选择符常见格式如下：标签名 样式属性1:值1;样式属性2:值2;样式属性3:值3;例如：divbackground-color:white;/背景颜色text-align:center;/文本水平布局7.2.1 样式选择符样式选择符2.类选择符类选择符类选择符常见形式如下：.类名 样式属性1:值1;样式属性2:值2;样式属性3:值3;例如：.centerbackground-color:white;/背景颜色text-align:center;/文本水平布局7.2.1 样式选择符样式选择符3.ID选择符选择符ID选择符常见格式如

20、下：ID名称 样式属性1:值1;样式属性2:值2;样式属性3:值3;例如：#headerbackground-color:white;text-align:center;7.2.1 样式选择符样式选择符4.伪类伪类“伪类”是专门针对超链接标签的选择符，使用伪类可以为访问过的、未访问过的、激活的以及鼠标指针悬停于其上的4种状态超链接定义不同的显示样式。即：A:link代表未访问过的超链接A:visited代表访问过的超链接A:active当超链接处于选中状态A:hover当鼠标指针移动到超链接上例如：A:activecolor:blue;background-color:buttonface;7

21、.2.1 样式选择符样式选择符5.包含选择符包含选择符包含选择符一般格式如下：选择符1 选择符2 样式属性1:值1;样式属性2:值2;样式属性3:值3;各选择符之间用空格分割。例如：DIV P H1font-weight:bold;color:red;7.2.2 样式生成器样式生成器样式生成器可以帮助设计者快速的设置元素的样式，在Web窗体的“设计”视图下，选中某个元素，鼠标右击，选择“属性”，在“属性”窗口中，点击“style”，即可出现如图7.11所示“修改样式”窗口。7.2.2 样式生成器样式生成器1.字体字体(1)font-family：设置元素内字体所采用的字体名称，例如“宋体”，“

22、黑体”等。(2)font-size：设置元素内字体的大小，字体的大小采用CSS中统一的长度单位。7.2.2 样式生成器样式生成器值值描描 述述值值描描 述述值值描描 述述px像素pt点（=1/72in）pc派卡（1pc=）cm厘米mm毫米in英寸ex当前浏览器默认字体中小写字母“x”的高度em当前浏览器字体中大写字母“M”的宽度字体大小的取值很多，可能取值如表7.1、7.2所示。值值描描 述述xx-small、x-small、small medium large、x-large、xx-large把字体的尺寸设置为不同的尺寸，从 xx-small 到 xx-large。默认值：medium。me

23、dium和浏览器的基准字号相同（基准字号默认是16px）smaller把 font-size 设置为比父元素更小的尺寸larger把 font-size 设置为比父元素更大的尺寸inherit把 font-size 设置为父元素的尺寸%把 font-size 设置为基于父元素的一个百分比。值把 font-size 设置为某个确定的值7.2.2 样式生成器样式生成器(3)font-weight：设置元素内字体的粗细，可能取值如表7.3所示。值值描描 述述normal默认。定义标准的字符bold定义粗体字符。bolder定义更粗的字符。lighter定义更细的字符。100 200 300 400

24、500 600 700 800 900定义由细到粗的字符。400 等同于 normal，而 700 等同于 bold。7.2.2 样式生成器样式生成器(4)font-style：设置元素内字体的方格，可能的取值如表7.4所示。(5)font-variant：设置元素内小型大写字母的显示方式，可能的取值如表7.5所示。值值描描 述述normal默认。浏览器显示一个标准的字体。italic浏览器会显示一个斜体的字体。oblique浏览器会显示一个倾斜的字体。值值描描 述述normal默认。浏览器会显示一个标准的字体。small-caps浏览器会显示小型大写字母的字体，这意味着所有的小写字母均会被转

25、换为大写，但是所有使用小型大写字体的字母与其余文本相比，其字体尺寸更小。7.2.2 样式生成器样式生成器(6)font-transform：设置元素内单词的字母转换，可能的取值如表7.6所示。值值描描 述述none 默认，无转换发生capitalize将每个单词的第一个字母转换成大写，其余无转换发生uppercase转换成大写lowercase转换成小写7.2.2 样式生成器样式生成器(7)color：设置元素内字体的颜色。通过可视化的颜色选择器进行选择即可。(8)text-decoration：设置字体的装饰，可能的取值如表7.7所示。值值描描 述述值值描描 述述none 默认，无装饰lin

26、e-through贯穿线blink闪烁overline上划线underline下划线7.2.2 样式生成器样式生成器2.块块7.2.2 样式生成器样式生成器(1)line-height：设置元素内字体的行高，字体最底端与字体内部顶端之间的距离，取值为“由浮点数字和单位标识符组成的长度值|百分数”。(2)vertical-align：设置元素内字体的垂直对其方式，可能的取值如表7.8所示。值值描描 述述Sub垂直对齐文本的下标super垂直对齐文本的上标值由浮点数字和单位标识符组成的长度值|百分数。可为负数。定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是0%7.2.2 样式生成

27、器样式生成器(3)text-align：设置元素内文本水平对其方式，可能取值如表7.9所示。值值描描 述述left默认值。左对齐right右对齐center居中对齐justify两端对齐(4)text-indent：设置元素内字体的缩进，取值为“由浮点数字和单位标识符组成的长度值|百分数”。(5)white-space：设置元素内空格字符处理方式，可能取值如表7.10所示。值值描描 述述normal默认处理方式。文本自动处理换行。假如抵达容器边界内容会转到下一行pre用等宽字体显示预先格式化的文本。不合并字间的空白距离和进行两端对齐。nowrap强制在同一行内显示所有文本，直到文本结束或者遭遇

28、 br 元素7.2.2 样式生成器样式生成器(6)word-spacing：设置元素内单词间的间距，取值为“由浮点数字和单位标识符组成的长度值|百分数”。(7)letter-spacing：设置元素内文字之间的间距，取值为“由浮点数字和单位标识符组成的长度值|百分数”。7.2.2 样式生成器样式生成器3.背景背景7.2.2 样式生成器样式生成器(1)background-color：设置元素背景颜色，通过颜色选择窗口选择。(2)background-image：设置元素背景图片，通过“浏览”定位到某张图片。(3)background-repeat：设置元素背景图片的平铺方式，常用于背景图片大小

29、小于元素的大小的情况，可能取值如表7.11所示。值值描描 述述repeat默认值。背景图像在纵向和横向上平铺no-repeat背景图像不平铺两端对齐。repeat-x背景图像仅在横向上平铺repeat-y背景图像仅在纵向上平铺7.2.2 样式生成器样式生成器(4)background-attachment：设置元素背景图片是否随元素内容滚动，对于那些带滚动条的元素需要设置，可能取值如表7.12所示。值值描描 述述scroll默认值。背景图像是随元素内容的滚动而滚动。Fixed背景图像固定。(5)background-position：设置背景图片在元素内的位置。分为X轴上的位置和Y轴上的位置，

30、元素的左上角为坐标原点，顶部边缘往右的方向为X轴方向，左部边缘向下的方向为Y轴方向。他们可能的取值如表7.13所示。值值描描 述述left居左center居中right居右值百分数|由浮点数字和单位标识符组成的长度值7.2.2 样式生成器样式生成器4.边框边框7.2.2 样式生成器样式生成器(1)border-style：设置元素边框的样式，可能取值如表7.14所示。值值描描 述述none默认值。无边框。不受任何指定的 border-width 值影响hidden隐藏边框。IE不支持dotted在MAC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为点线。否则为实线dashed在M

31、AC平台上IE4+与WINDOWS和UNIX平台上IE5.5+为虚线。否则为实线solid实线边框double双线边框。两条单线与其间隔的和等于指定的 border-width 值groove根据 border-color 的值画3D凹槽ridge根据 border-color 的值画3D凸槽inset根据 border-color 的值画3D凹边outset根据 border-color 的值画3D凸边7.2.2 样式生成器样式生成器(2)border-width：设置元素边框的宽度，可能取值如表7.15所示。(3)border-color：设置元素边框的颜色，通过颜色选择窗口选择。值值描描

32、 述述medium默认值。默认宽度。thin小于默认宽度。thick大于默认宽度。值由浮点数字和单位标识符组成的长度值，不可为负值。7.2.2 样式生成器样式生成器5.方框方框7.2.2 样式生成器样式生成器要理解元素的“边距”和“空白”的概念，需要理解CSS中元素的“盒模型”。网页内的每一个元素在网页上都是可以看成一个盒子，盒子结构如图7.17所示。左边距左边框左空白右边距右边框右空白内容7.2.2 样式生成器样式生成器6.定位定位7.2.2 样式生成器样式生成器position：用来设置元素在网页内的位置模式，可能取值如表7.16所示。值值描描 述述static默认值。无特殊定位，元素遵循

33、HTML定位规则，正常流中的位置。absolute将元素从文档流中拖出，使用top，right，bottom，left等属性相对于其最接近的一个最有定位设置的父元素进行绝对定位。如果不存在这样的父元素，则依据 body 元素。允许元素重叠，而其层叠通过 z-index 属性定义。relative元素不可层叠，但将依据top，right，bottom，left等属性在正常文档流中偏移位置fixed未支持。元素定位遵从绝对(absolute)方式。但是要遵守一些规范。7.2.2 样式生成器样式生成器7.布局布局7.2.2 样式生成器样式生成器(1)visibility：设置元素的可视属性，可能取值

34、如表7.17所示。(2)display：设置元素是否显示以及如何显示，可能取值如表7.18所示。值值描描 述述visible元素可视hidden元素隐藏collapse主要用来隐藏表格的行或列。隐藏的行或列能够被其他内容使用。值值描描 述述block默认值。将元素强制作为块元素呈递，为元素之后添加新行none隐藏元素。与visibility属性的hidden值不同，其不为被隐藏的元素保留其物理空间inline内联元素的默认值。将元素强制作为内联元素呈递7.2.2 样式生成器样式生成器(3)float：设置元素相对与父元素的浮动，可能取值如表7.19所示。(4)clear：设置元素两边是否允许有

35、浮动元素，可能取值如表7.20所示。值值描描 述述Left元素浮动到父元素的左边Right元素浮动到父元素的右边值值描描 述述Both父元素内，本元素的两面都不允许有元素。Left父元素内，本元素的左边不允许有元素right父元素内，本元素的右边不允许有元素7.2.2 样式生成器样式生成器(5)cursor：设置光标停留到元素内的形状。(6)overflow：设置元素内容溢出情况下的显示方式，可能取值如表7.21所示。(7)clip：rect：设置元素的可视区域，通过一个矩形区域来指定。值值描描 述述visible默认值。不剪切内容也不添加滚动条。auto在必需时对象内容才会被裁切或显示滚动条

36、scroll总是显示滚动条hidden不显示超过对象尺寸的内容7.2.2 样式生成器样式生成器8.列表列表7.2.2 样式生成器样式生成器(1)list-style-type：设置元素内列表项所使用的预设标记。可能取值如表7.22所示。(2)list-style-image：设置元素内列表项所使用的图片值值描描 述述Disc默认值。实心圆circle空心圆square实心方块decimal阿拉伯数字decimal-leading-zero以一个0开头的数字e.g.,01,02,03,.,98,99lower-roman小写罗马文字i,ii,iii,iv,v,etc.upper-roman大写罗

37、马文字I,II,III,IV,V,etc.lower-latin小写拉丁文a,b,c,.zupper-latin大写拉丁文A,B,C,.Z7.3 主题和皮肤主题和皮肤v7.3.1 主题概述主题概述1主题与主题与CSSCSS规则只限于一组固定的样式特性。它们允许重用特定的格式化细节（字体、边框、前景和背景色等），但它们显然不能控制ASP.NET控件的其他方面。主题弥补了中间的鸿沟。和CSS相似，主题允许定义一组作用于多个页面中的控件的样式特性。不过，和CSS不同的是，主题不是由浏览器实现。以下是它们的主要区别：(1)主题基于控件而不是HTML。(2)主题应用在服务器上。(3)可以通过配置文件来应

38、用主题。(4)主题不会像CSS那样级联。7.3.1 主题概述主题概述2文件存储和组织方式文件存储和组织方式常见的外观文件组织方式如下：（1）根据SkinID组织。每个外观文件都包含具有相同SkinID的多个控件外观定义，如图7.24所示。（2）根据控件类型组织。每个外观文件都包含特定控件的一组外观定义，如图7.25所示。（3）根据网页文件名组织。每个外观文件定义某一个网页文件页面中控件的外观，站点中有多少个网页文件，就有对应数目的外观文件，如图7.26所示。7.3.1 主题概述主题概述3皮肤文件皮肤文件下面是一个外观文件中一个文本框服务器控件的外观设置代码：7.3.1 主题概述主题概述4主题的

39、类型主题的类型每个主题都是App_Themes文件夹的一个不同的子文件夹。图7.27展示的是一个典型的页面主题，它定义了5个主题MyTheme、Theme1、Theme2、ThemeA、ThemeB，不同的主题下有着不同的组成。7.3.2 创建主题创建主题1创建主题文件夹创建主题文件夹为了给应用程序创建自己的主题，首先需要在应用程序中创建正确的文件夹结构。2创建外观文件创建外观文件一个定义好的包含多个Skin选项的外观文件代码片段如下：7.3.2 创建主题创建主题3添加添加CSS文件文件在主题中添加CSS文件的方法：右击主题文件夹，选择“添加新项”选项，在弹出的“添加新项”对话框中选择“样式表

40、”模板，修改名称，单击“添加”按钮即可。4给主题添加图像给主题添加图像使用Images文件夹中的文件有两个简单的方法：(1)把图像直接合并到.skin文件中，示例代码片段如下。.7.3.2 创建主题创建主题(2)如果服务器控件并没有image属性，那么就必须使用.skin文件和CSS文件。此时可以将基于主题的图像放在任意元素上。下面的代码是在CSS文件中的CSS类上给元素定义使用背景图像：.theme_header background-image:url(images/smokeandglass_brownfadetop.gif);.theme_highlighted background-

41、image:url(images/smokeandglass_blueandwhitef.gif);.theme_fadeblue background-image:url(images/smokeandglass_fadeblue.gif);在CSS文件中定义过这些CSS类之后，就可以在定义服务器控件时，在.skin文件中使用它们，代码如下：7.3.3 应用主题应用主题1给单个页面应用主题给单个页面应用主题定义页面主题后，可以使用 Page 指令的Theme属性将该主题放置在单个页上。例如：2给全局应用主题给全局应用主题要创建全局主题，则一般存放于以下位置：iisdefaultrootasp

42、net_clientsystem_webversionThemes例如，默认Web根文件夹位于 Web 服务器上的 C:Inetpubwwwroot 中，则新的全局主题Themes文件夹可能为：C:Inetpubwwwrootaspnet_clientsystem_webversionThemes7.3.3 应用主题应用主题3应用主题的优先级应用主题的优先级把某个主题应用到页面后，ASP.NET会考虑Web页面上的每个控件并检查外观文件中是否为控件定义了属性，如果ASP.NET在外观文件里发现了匹配的标签，从外观文件获得的信息就会覆盖控件的当前属性。4禁用主题禁用主题默认情况下，主题将重写页和

43、控件外观的本地设置。当控件或页已经有预定义的外观，而又不希望主题重写它时，可以禁用此行为。对于页面，禁用主题的方法为：对于控件，禁用主题的方法为：7.3.3 应用主题应用主题【例例7.5】创建和应用主题示例。(1)在网站WebSite7中创建App_Themes目录，并在其下创建“主题1”目录。(2)在“主题1”内添加一个样式表文件“StyleSheet.css”和一个外观文件“SkinFile.skin”，并把一个图片复制到“主题1”目录下。目录结构如图7.28所示。(3)添加一个临时Web窗体文件“Temp.aspx”，切换到设计视图，在页面上拖放两个Label控件，ID分别为“Label

44、1”和“Label2”。按照图7.29和图7.30所示分别设置两个标签控件的外观属性。7.3.3 应用主题应用主题(4)切换到“Temp.aspx”的“源”视图，把控件的代码复制到“SkinFile.skin”文件中，并去掉相关控件的ID属性，修改成如下的代码：(5)在“StyleSheet.css”的文件中加入如下的样式规则：bodybackground-image:url(bg.png);text-align:center;background-repeat:no-repeat;7.3.3 应用主题应用主题(6)添加一个Web窗体文件，命名为“Ex7-5.aspx”，切换到“设计”视图，在

45、属性窗口顶部下拉列表中，选中“Document”，在列表中定位到“StyleSheetTheme”，设置其值为“主题1”。(7)向“Ex7-5.aspx”文件中拖放两个Label控件，会发现两个控件显示效果如图7.31所示。7.3.3 应用主题应用主题(8)修改Label2的SkinID属性为“other”，则Label2会自动换成如图7.32所示的外观。7.3.4 动态加载主题动态加载主题与动态切换母版类似，可以在页面的PreInit方法的处理程序中，设置页面的Theme属性。例如：Protected Sub Page_PreInit(ByVal sender As Object,ByVal

46、 e As System.EventArgs)Handles Me.PreInit Select Case CStr(Request.QueryString(theme)Case Blue Page.Theme=BlueTheme Case Pink Page.Theme=Pinktheme End Select End Sub7.4 网站导航网站导航v7.4.1 站点地图站点地图创建站点地图的方法与添加Web窗体文件方法相同，只是在“添加新项”对话框中选择“网站地图”模板。下面是一个Web.sitemap文件的示例：7.4.1 站点地图站点地图表7.23描述了元素中最常见的一些属性。属属 性

47、性说说 明明titletitle属性提供链接的文本描述。这里使用的String值是用于链接的文本descriptiondescription属性不仅说明该链接的作用，还用于链接上的ToolTip属性。ToolTip属性是终端用户把光标停留在链接上几秒后显示出来的黄框urlurl属性描述了文件在解决方案中的位置。如果文件在根目录下，就使用文件名，例如“Default.aspx”。如果文件位于子文件夹下，就在这个属性的String值中包含该文件夹，例如，“MySubFolder/Markets.aspx”7.4.2 用用SiteMapPath控件导航控件导航声明SiteMapPath控件的语法是：

48、常见的属性如表7.24所示。属性属性描述描述选项（粗体为默认值）选项（粗体为默认值）RenderCurrentNodeAsLink指定活动节点是否是可单击的，或者指定当前节点是否显示为纯文本True/FalsePathDirection设置路径导航是否以从根链接到当前链接的顺序显示（从左到右）或者反之RootToCurrent/CurrentToRootPathSeparator设置用做节点间分隔标记的字符“”等任意ASCII字符7.4.2 用用SiteMapPath控件导航控件导航【例例7.6】用SiteMapPath控件导航。(1)在网站WebSite7中添加5个Web窗体文件，分别命名为

49、“Ex7-6.aspx”、“WebControls.aspx”、“textbox.aspx”、“label.aspx”和“HtmlControls.aspx”。(2)新建一个站点地图，取默认名称“Web.sitemap”。编辑站点地图的内容，代码如上节中的示例代码。(3)打开Ex7-6.aspx的“设计”视图，从工具箱下的“导航”选项卡中拖放一个SiteMapPath控件至设计页面，SiteMapPath控件默认已经显示站点地图中的内容。(4)运行程序，运行结果如图7.33所示。7.4.2 用用SiteMapPath控件导航控件导航Root链接是显示中的第一个链接，它通常是主页。Current

50、链接是当前显示的页面的链接。这个属性默认设置为RootToCurrent。把上例改为CurrentToRoot，就会生成如图7.34所示的结果。7.4.3用用Menu控件导航控件导航声明Menu控件的语法是：Menu控件适合让终端用户在较大的选项层次结构中导航，在这个过程中很少利用浏览器的资源。7.4.3用用Menu控件导航控件导航【例例7.7】使用Menu控件绑定到SiteMapDataSource进行导航。(1)在网站WebSite7中添加一个Web窗体文件，命名为“Ex7-7.aspx”。(2)打开Ex7-7.aspx页面的“设计”视图，从工具箱中的“数据”选项卡中拖放一个SiteMap