第9章：皮肤、主题和母版页
第9章：CSS、主题和母版页
回顾上一章所讲述的站点地图、导航控件：树形控件、菜单控件和面包屑控件。
在Web应用程序开发中，一个良好的Web应用程序界面能够让网站的访问者耳目一新，当用户访问Web
应用时，网站的界面和布局能够提升访问者对网站的兴趣和继续浏览的耐心。https://www.360docs.net/doc/2c6503645.html,提供了皮肤、主题和母版页的功能增强了网页布局和界面优化的功能，这样即可轻松的实现对网站开发中界面的控制。
通过外观、主题及母版页技术，能够实现对页面元素外观“一次定义多处使用”，从而减轻开发人员的负担，并保证网站外观的和谐统一。
在任何Web应用程序的开发过程中，CSS（Cascading Style Sheets，级联样式表）都是非常重要的页面布局方法，而且CSS也是最高效的页面布局方法。
CSS发展于1994年10月，是为了补救HTML 3.2语法中的不足，但是由于当时网络的发展的不足和浏览器的支持率较低，直到1996年底，才正式发表了CSS 1.0规格，也正是1996年之后，浏览器才开始正式的支持CSS。
在网页布局中，CSS经常被使用于页面样式布局和样式控制。熟练的使用CSS能够让网页布局更加的方便，在页面维护时，也能够减少工作量。
通常CSS能够支持三种定义方式：
直接将样式控制放置于单个HTML元素内，称为内联式；
在网页的head部分定义样式，称为嵌入式；
以扩展名为.css文件保存样式，称为外联式。
这三种样式适用于不同的场合：
内联式：适用于对单个标签进行样式控制，这样的好处就在于开发方便，而在维护时，就需要针对每个页面进行修改，非常的不方便；
嵌入式：可以控制一个网页的多个样式，当需要对网页样式进行修改时，只需要修改head标签中的style标签即可，不过这样仍然没有让布局代码和页面代码完全分离；
外联式：能够将布局代码和页面代码相分离，在维护过程中，能够减少工作量。
（1）示例程序
CSS能够通过编写样式控制代码来进行页面布局，在编写相应的HTML标签时，可以通过Style属性进行CSS 样式控制。
演示示例程序
图1.CSS内联式页面
示例代码如下所示。
（2）Style中常用属性意义
字体名称属性（font-family）：该属性设定字体名称，如Arial,、Tahoma,、Courier等，可以定义字体的名称。
字体大小属性（font-size）：该属性可以设置字体的大小。字体大小的设置可以有多种方式，最常用的就是pt和px。
该属性有三个值可选：normal,、italic、oblique、normal是默认值，italic、oblique都是斜体显示。
字体粗细属性（font-weight）：该属性常用值是normal和bold，normal是默认值，bold是粗体。
字体变量属性（font-variant）：该属性有两个值normal和small-caps，normal是默认值。small-caps 表示字体将被显示成大写。
字体属性（font）：该属性是各种字体属性的一种快捷的综合写法。
用内联式的方法进行样式控制固然简单，但是在维护过程中却是非常的复杂和难以控制。当需要对页面中的布局进行更改时，则需要对每个页面的每个标签的样式进行更改，这样无疑增大的工作量，当需要对页面进行布局时，可以使用嵌入式的方法进行页面布局。
示例代码如下所示
上述代码分别定义了5种字体样式，这些样式都是通过“.”号加样式名称定义的，在定义了字体样式后，就可以在相应的标签中使用class属性来定义样式，示例代码如下所示。
虽然嵌入式能够解决单个页面的样式问题，但是这样只能针对单个页面进行样式控制，而在很多网站的开发应用中，大量的页面样式基本相同，只有少数的页面不尽相同，所以使用嵌入式还是有不足，这里就可以使用外联式。使用外联式，必须创建一个.css文件后缀的文件，并在当前页面中添加引用，
.css页面代码如下所示。
设计页面代码
在.css文件中，只需要定义如head标签中的style标签的内容即可，其编写方法也与内联式和内嵌式相同。在编写完成CSS文件后，需要在使用的页面的head标签中添加引用，示例代码如下所示。
使用外联式的益处
能够很好的将页面布局的代码和HTML代码相分离，这样不仅能够让多个页面同时使用一个CSS样式表进行样式控制，同样在维护的过程中，只需要修改相应的CSS文件中的样式的属性即可实现该样式在所有的页面中都进行更新的操作。这样无疑是减少了工作量，提高的代码的可维护性。
CSS不仅能够用来进行页面布局，同样也可以应用在控件中，使用CSS能够让控件更具美感。在空间上使用CSS基本和在页面上使用CSS的方法相同。在控件界面的编写中，可以使用控件的默认属性，例如BackColor、ForeColor、BorderStyle等，同样也可以通过style属性编写控件的属性。
直接在控件的style属性中进行定义
演示示例页面CssControl.aspx
图2.CSS样式在控件上的应用
实现代码如下：
调用Css文件，在控件的CssClass属性中指定
定义control.Css文件
页面中调用Css文件的实现代码：
控件中设置CssClass属性调用Css文件中的标签
使用皮肤和主题，能够将样式和布局信息分解到单独的文件中，让布局代码和页面代码相分离。主题可以应用到各个站点，当需要更改页面主题时，无需对每个页面进行更改，只需要针对主题代码页进行更改即可。
主题由外观(skin)、级联样式表（CSS）、图像和其他资源组成。主题中至少包含外观，它是在网站或Web服务器上的特殊目录中定义的。
外观
外观文件是主题的核心内容，用于定义页面中服务器控件的外观。外观文件的后缀名称为.skin,它包含各个控件（例如Button、TextBox或Calendar控件）的属性设置。控件外观设置类似于控件标记本身，但只包含要作为主题的一部分来设置的属性。例如，下面定义了TextBox控件的外观代码。
上述代码中设置了TextBox控件的前景色和背景色属性。如果将以上控件外观应用到单个Web页上，那么页面内所有TextBox控件都将显示所设置的控件外观。
级联样式表
主题还可以包含级联样式表（.css文件）。将.css文件放在主题目录中时，样式表自动作为主题的一部分应用。使用文件扩展名.css在主题文件夹中定义样式表。主题中可以包含一个或多个级联样式表
图像和其他资源
主题还可以包含图形和其他资源，例如脚本文件或视频文件等。通常，主题的资源文件与该主题的外观文件位于同一个文件夹中，但也可以在Web应用程序中的其他地方，例如主题目录的某个子文件夹中。
主题文件存储
在Web应用程序中，主题文件必须存储在根目录的App_Themes文件夹下（除全局主题之外），开发人员可以手动或者使用Visual Studio 2008在网站的根目录下创建该文件夹。
图3.主题文件存储方式
在App_Themes文件夹中包括"主题1"和"主题2"两个文件夹。每个主题文件夹中都可以包含外观文件、CSS 文件和图像文件等。
通常APP_Themes方件夹中只存储主题文件及与主题有关的文件，尽量不存储其他类型文件。
主题文件组织方式
外观文件是主题的核心部分，每个主题文件夹下都可以包含一个或者多个外观文件，如果主题较多，页面内容较复杂时，外观文件的组织就会出现问题。这样就需要开发人员在开发过程中，根据实际情况对外观文件进行有效管理。通常根据SkinID、控件类型及文件3种方式进行组织，具体说明如表7.1所示。
表1.3种常见的外观文件的组织方式及其说明
外观文件分为“默认外观”和“已命名外观”两种类型，如果控件没有包含SkinID属性，那么就是默认外观。 向页面应用主题，默认外观自动应用于同一类型的所有控件。
已命名外观是设置了SkinID属性的控件外观，已命名外观不会自动按类型应用于控件，而应当通过设置控件的SkinID属性将已命名外观显式应用于控件上。通过创建已命名外观，可以为应用程序中同一控件的不同实例设置不同的外观。
演示示例程序SkinCalendar.aspx页面
图4.控件设置外观 添加外观文件，在ControlSkin主题下添加外观文件Calendar.Skin
页面中应用主题
在使用主题的页面，必须声明主题，如果不声明主题，则页面无法找到页面中控件需要使用的主题，示例代码如下所示。
在页面声明主题后，控件就能够使用.skin文件中的主题，通过SkinID属性，控件可以选择主题文件中的主题。
主题中的样式表用于设置页面和普通HTML控件的外观样式。
演示示例程序SkinCSS.aspx页面
图5.为主题添加CSS文件
制作步骤
在主题下添加CSS文件
页面中应用主题
可以对网页或网站应用主题，或对全局应用主题。在网站级设置主题会对站点上的所有页和控件应用样式和外观，除非对个别页重写主题。在页面级设置主题会对该页及其所有控件应用样式和外观。
为单个页面指定和禁用主题
为单个页面指定主题可以将@ Page指令的Theme或StyleSheetTheme属性设置为要使用的主题的名称。代码如下：
禁用单个页面的主题
只要将@Page指令的EnableTheming属性设置为false即可。代码如下：
只要将控件的EnableTheming属性设置为false即可。以Button控件为例，代码如下：
为了快速地为整个网站的所有页面设置相同的主题，可以设置Web.config文件中的
禁用整个应用程序的主题设置，只要将
除了在页面声明和配置文件中指定主题和外观首选项之外，还可以通过编程方式动态加载主题。
演示示例程序SelectTheme.aspx
图6.动态加载主题
实现步骤
◆创建两个主题Theme1和Theme2，在主题文件夹下添加相应的CSS样式文件和外观文件
(1)CSS样式文件内容
(2)外观文件代码
◆设置文本框控件选择的外观样式
◆动态选择主题
母版页的主要功能是为https://www.360docs.net/doc/2c6503645.html,应用程序创建统一的用户界面和样式。母版页由两部分构成，即一个母版页和一个(或多个)内容页，这些内容页与母版页合并将母版页的布局与内容页的内容组合在一起输出。
母版页
母版页为具有扩展名.master的https://www.360docs.net/doc/2c6503645.html,文件，它具有可以包含静态文本、HTML元素和服务器控件的预定义布局。母版页由特殊的@master指令识别。
内容页
内容页与母版页关系紧密，内容页主要包含页面中的非公共内容。通过创建各个内容页来定义母版页的占位符控件的内容，这些内容页为绑定到特定母版页的https://www.360docs.net/doc/2c6503645.html,页。
在运行时，母版页是按照下面步骤处理的
用户通过键入内容页的URL来请求某页。
获取内容页后，读取@ Page指令。如果该指令引用一个母版页，则也读取该母版页。如果是第一次请求这两个页，则两个页都要进行编译。
母版页合并到内容页的控件树中。
各个Content控件的内容合并到母版页中相应的ContentPlaceHolder控件中。
呈现得到结果页。
具体过程如图所示：
图7.母版页和内容页的事件过程
加载母版页和内容页共需要经过8个过程。这8个过程显示初始化和加载母版页及内容页是一个相互交叠的过程。基本过程是，初始化母版页和内容页控件树，然后，初始化母版页和内容页页面，接着，加载母版页和内容页，最后，加载母版页和内容页控件树。以上8个过程对应着11个具体事件。这些事件如下所示。
母版页中控件Init事件；
内容页中Content控件Init事件；
母版页Init事件；
内容页Init事件；
内容页Load事件；
母版页Load事件；
内容页中Content控件Load事件；
内容页PreRender事件；
母版页PreRender事件；
母版页控件PreRender事件。
内容页中Content控件PreRender事件。
使用母版页可以集中处理页的通用功能，以便可以只在一个位置上进行更新。
使用母版页可以方便地创建一组控件和代码，并将结果应用于一组页。例如，可以在母版页上使用控件来创建一个应用于所有页的菜单。
通过允许控制占位符控件的呈现方式，母版页使您可以在细节上控制最终页的布局。
母版页提供一个对象模型，使用该对象模型可以从各个内容页自定义母版页。
图8.母版页应用到内容页
创建页面公共部分：页眉和页脚，页眉用于放置导航栏，页脚用于放置版权声明
图1.导航栏图片
图2.版权声明区图片
在ImageMap控件里设置导航功能,划分热点区域并设置导航网址
母版页代码：通过表格布局分成三部分：导航区、内容区和版权区
添加新Web窗体页面时，选择母版页
图3.添加内容页 内容页里添加非公共内容
图4.母版页嵌套
子母版页代码如下所示：
内容页代码如下
调试第9章课堂示例程序