用户界面设计

4.2.1 母版页的基础知识
2. 母版的执行原理
母版页仅仅是一个页面模板，单独的母版页是不能被 用户所访问的。单独的内容页也不能够使用。母版页 和内容页有着严格对应关系。
母版页中包含多少个ContentPlaceHolder控件，那么 内容页中也必须设置多少个与其相对应的Content控 件。
在页面的代码中，重写 StyleSheetTheme 属性，然后在 get 访问器中返回样式表主题的名称。 public override string StyleSheetTheme {
get { return "BlueTheme"; } }
4.1.4 案例4-1书城网站的主题设计
书城网站的主界面 如图4-2所示，界 面的结构分5个区： 题头区、主菜单区、 分类菜单区，左区、 导航区、内容区和 页脚区。如图4-3 所示。设计主题使 书城网站的页面具 有统一的风格。
通过改变主题的内容，而不用改变站点的单个 页面，就可以轻易地改变站点的样式。
4.1.1 概述
主题是定义网站中页面和控件的外观 的属性集合。
主题可以包括外观文件（定义 Web服 务器控件的属性设置），还可以包括级联样式 表文件（.css 文件）和图形资源等。
通过应用主题，可以为网站中概述
2. 级联样式表
将css文件放在主题文件夹中，样式表自动作为主题的 一部分加以应用。
尽管样式表可以作为主题的一部分，但由于主题中还 包含着外观文件及其他资源，因此，主题与样式表是 不同的：
主题可以定义控件或页的许多属性，而不仅仅是样式属 性。
主题可以包括图形。 每页只能应用一个主题，但可以应用多个样式表。
4.1.1 概述
1．外观文件
外观文件具有文件扩展名.skin，它包含各类控件的外 观属性设置。例如，下面是Button控件的控件外观： <asp:Button runat="server" BackColor="lightblue" ForeColor="black" />
一个.skin文件可以包含一个或多个控件类型的一个或 多个控件外观。有两种类型的控件外观：默认外观和 已命名外观。如果控件外观没有SkinID属性，则是默 认外观。默认外观自动应用于同一类型的所有控件。
令引用一个母版页，则也读取该母版页。如果是第 一次请求这两个页，则两个页都要进行编译。
（3）母版页合并到内容页的控件树中。 （4）各个Content控件的内容合并到母版页中相应
的ContentPlaceHolder控件中。 （5）呈现得到结果页。
4.2.2 创建母版页和内容页
1. 创建母版
母版页中包含的是页面公共部分，即网页模板，因此， 在创建应用之前，必须判断哪些内容是页面公共部分， 这就需要从分析页面结构开始。
4.1.1 概述
3. 主题中的图形和其他资源
主题还可以包含图形和其他资源。例如，若页面主题 中包含TreeView控件的外观，可以在主题中包括用于 表示展开按钮和折叠按钮的图形。
通常，主题的资源文件与该主题的外观文件位于同一 个文件夹中，但它们也可以位于Web 应用程序中的其 他地方，如主题文件夹的某个子文件夹中。如果主题 的资源放在应用程序的其他文件夹中，则可以使用格 式为“~/子文件夹/文件名”的路径来引用这些资源文 件。
（4）按照说明格式编写控件的外观 。
4.1.3 应用主题
1. 将主题应用到个别网页
定义主题之后，可以使用@Page指令的Theme或 StyleSheetTheme属性将该主题应用到个别 网页上。
例如，将主题MyTheme应用到Index.aspx上，可以按 如下设置： <%@ Page Language="C#" Theme="MyTheme" … %>
如果主题是通过设置@Page指令或配置的<pages/>节 的StyleSheetTheme属性应用的，可以将主题定义作 为服务器端样式来应用。主题中的外观属性可被页面 中的控件属性重写。
如果既有Theme又有StyleSheetTheme，则按以下顺 序应用控件的属性：首先应用StyleSheetTheme属性， 然后应用页中的控件属性，最后应用Theme属性。
（2）右键单击上一步添加的主题，在弹出的菜单中选择 【添加新项】命令，打开【添加新项】对话框。在该对话 框选择【外观文件】模板，并为外观文件命名，这里命名 为MySkinFile.skin，如图4-1所示，单击【添加】按钮，就 会创建外观文件。
（3）建好的外观文件，有一段注释代码，是外观文件编写 的说明性文字，告诉程序员以何种格式来编写控件的外观 属性定义。
<asp:Button runat="server" ID="Button1" SkinID="greenBtn" />
如果页面主题中没有包括与SkinID属性相匹配的控件 外观，控件就会使用为该类型控件所定义的默认外观。
4.1.3 应用主题
4. 主题应用的优先级
如果主题是通过设置@Page指令或配置的<pages/>节 的Theme属性应用的，则主题中的外观属性将重写页 面中目标控件的同名属性。
4.2.2 创建母版页和内容页
2. 创建内容页
母版页要通过内容页来使用。创建内容页的方法有两种。 第一种:基于母版页建立内容页的步骤如下: （1）打开母版页。 （2）右键单击ContentPlaceHolder控件，在弹出的快捷菜单 中选择【添加内容页】。 （3）右键单击新网页视图，在弹出的快捷菜单中选择【编辑 主表】，即可以编辑该网页。 第二种:在建立新网页时选择母版页的步骤如下： （1）新建网页时，在【添加新项】对话框中选中【选择母版 页】复选框。 （2）单击【添加】按钮，在弹出的对话框中选择项目中存在 的母版页。 （3）单击【确定】按钮后，新网页即为内容页。
4.2 母版页
母版页是用来使同一系列的网页具有一致外 观的工具，使用母版页可以为应用程序中的网页 创建一致的布局，可以很好地实现界面设计的模 块化和重用。
4.2.1 母版页的基础知识
1. 什么是母版页
母版页是提供的一种重用技术，可帮助整 个网站进行统一的布局。在这种技术中，网页被分成两 类，描述一致外观的网页称为母版页(Master Page)，引 用母版页的网页称为内容页(Content Page)。单个母版页 可以为应用程序中的所有页（或一组页）定义所需的外 观和标准行为。当用户请求内容页时，这些内容页与母 版页合并以将母版页的布局与内容页的内容组合在一起 输出。
在内容页的@Page指令中通过使用MasterPageFile属 性来指向要使用的母版页，从而建立内容页和母版页 的绑定。例如，一个内容页可能包含下面的@Page指 令，该指令将该内容页绑定到Master1.master页，在内 容页中，通过添加Content控件并将这些控件映射到母 版页上的ContentPlaceHolder控件来创建内容。
第4章
用户界面设计
本章要点
主题及其在书城网站中的应用 母版页的创建和使用方法 书城网站的母版页设计 用户控件的原理及书城网站的用户控件设计 网站地图与页面导航及其在书城网站中的应用
4.1 主题
的主题和外观特性，使开发者能够 把样式和布局信息存放到一组独立的文件中， 统称为主题(Theme)。
以一个简单的新闻网站为例，页面的结构如图4-6所示。 页面由3个部分组成：页头、内容、页脚。其中页头和 页脚是公共部分，网站中许多页面都包含相同的页头 和页脚。内容是页面的非公共部分。可以按照以下步 骤创建一个母版页MasterPage.master
4.2.2 创建母版页和内容页
图4-6 页面结构图
4.1.4 案例4-1书城网站的主题设计
4.1.4 案例4-1书城网站的主题设计
〖技术要点〗
界面布局通过div实现，按图4-4所示命名各部分 div的名字。
建立网站的主题，将网站的界面素材拷贝到主 题目录下。
在主题中添加外观文件SkinFile.skin，定义按钮 的外观。
在主题中添加样式表文件All.css，定义各div的 样式。
4.2.1 母版页的基础知识
母版页是具有扩展名为.master的文件，它具 有可以包括静态文本、HTML元素和服务器控件的预定 义布局。母版页由特殊的@Master指令识别。该指令 看起来类似于以下代码：
<%@ Master Language="C#" CodeFile="Master1.master.cs" Inherits="Master1"%>
当客户端浏览器向服务器发出请求，要求浏览某个内 容页面时，引擎将同时执行内容页和母版 页的代码，并将组合后的最终结果发送给客户端浏览 器。
4.2.1 母版页的基础知识
母版页和内容页的运行过程可以概括为以下5个步骤：
（1）用户通过键入内容页的URL来请求该页。 （2）获取内容页后，读取@Page指令。如果该指
4.1.3 应用主题
2. 将主题应用到网站中的所有页
设置配置文件（Web.config）中的pages节，可将主题应 用到网站中的所有页。例如： <configuration> <system.web> <pages theme="MyTheme" /> </system.web> </configuration>
switch(Request.QueryString["theme"]) {
case "Blue": Page.Theme = "BlueTheme"; break;