主题和母版页(母版页)
母板页
母版页概述使用 母版页可以为应用程序中的页创建一致的布局。
单个母版页可以为应用程序中的所有页（或一组页）定义所需的外观和标准行为。
然后可以创建包含要显示的内容的各个内容页。
当用户请求内容页时，这些内容页与母版页合并以将母版页的布局与内容页的内容组合在一起输出。
母版页的工作原理母版页实际由两部分组成，即母版页本身与一个或多个内容页。
演练：在Visual Web Developer 中创建和使用 母版页本演练阐释如何创建一个母版页和几个内容页。
母版页使您可以创建一个页面布局（模板页），然后创建各个页面，这些页面包含的内容在运行时与母版页合并。
创建网站如果已经在Visual Web Developer 中创建一个网站（例如，通过执行演练：在Visual Web Developer 中创建基本网页中的步骤创建），可以使用该网站并跳至下一节“创建母版页”。
否则，按照下面的步骤创建一个新的网站和网页。
创建文件系统网站打开Visual Web Developer。
在“文件”菜单上单击“新建网站”。
出现“新建网站”对话框。
在“Visual Studio 已安装的模板”之下单击“ 网站”。
在“位置”框中输入要保存网站页面的文件夹的名称。
例如，键入文件夹名“C:\WebSites”。
在“语言”列表中，单击您想使用的编程语言。
单击“确定”。
Visual Web Developer 创建该文件夹和一个名为Default.aspx 的新页。
创建母版页母版页是用于设置页面外观的模板。
在本节中，将首先创建一个母版页。
然后，使用表格来对母版页进行布局，此母版页具有一个菜单、一个徽标和一个页脚，这些内容将在站点的每个页面中出现。
还将使用内容占位符，这是母版页中的一个区域，可以使用内容页中的信息来替换此区域。
创建母版页在解决方案资源管理器中，右击网站的名称，然后单击“添加新项”。
在“Visual Studio 已安装的模板”之下单击“母版页”。
ASPNET中的CSS、主题和母版页
主题和母版页（层叠样式表、主题）整合网站的第一步是采用一组一致的可视化样式。
CSS 为格式化Web 页面提供了跨平台的解决方案，它可以和HTML 或则XHTML 一起工作并几乎被所有的现代浏览器支持。
使用CSS 时，可以利用样式表定义一组预定义格式，然后通过CssClass 属性把这些样式表链接到适当的控件。
样式表由规则组成，每个规则定义了Web 页面中的一个元素应该如何被格式化。
每个规则的名字包含两部分：1.点号前面表明规则要作用的HTML 元素，点号前面什么都没有表示这个规则可作用于所有的HTML 元素。
2.点号后面的部分是一个唯一的名称，叫做CSS 类名，类名区分大小写。
.heading1{font-weight:bold;font-size:large;color:Lime;font-family:Verdana, Arial, Sans-Serif;}还可以创建自动应用到HTML 标签的规则，只要把标签名作为规则名即可：h2{color: Red;}这种自动的样式表看起来很有用，但它在 里却不是那么方便。
通常你直接处理的是控件而不是独立的HTML 标签。
有时候你总是不能确定将会用什么标签呈现某个控件，因此，最好通过类名显示指定规则。
如果你不喜欢手工书写CSS 规则，VS 允许使用设计器来构建。
只要添加一个规则的声明，在花括号中点击鼠标右键，选择创建样式即可。
一个典型的样式表会定义大量的规则，样式表常用于正式定义网站用户界面主要的格式，参考下面的样式表：body{font-family: Verdana, Arial, Sans-Serif;font-size: small;}.heading1{font-weight: bold;font-size: large;color: Lime;}.heading2{font-weight: bold;font-size: medium;font-style: italic;color: #C0BA72;}.blockText{padding: 10px;background-color: #FFFFD9;border-style: solid;border-width: thin;}VS 中选择视图，其他窗口，文档大纲，可以清楚的罗列当前样式表中所有的规则，可以迅速定位到某一规则：要在Web 页面里使用某个规则，首先页面要链接到适当的样式表，可在<head> 节中添加如下代码（可在VS中拖动样式表进入head）：<link href="MyStyleSheet.css"rel="stylesheet"type="text/css"/><div><!-- 对于普通控件应用样式,可设置 CssClass 属性.--><asp:Label ID="Label1"runat="server"Text="This Label uses the heading1 style."CssClass="heading1"></asp:Label><!-- 对于一段普通的 HTML,要使用 class 特性 --><div id="paragraph"runat="server"class="blockText"><p>This paragraph uses the blockText style.</p></div></div>也可通过“应用样式”窗口来指定具体的规则应用（视图->应用样式），这个设计可以实现一个预览的效果，不过注意以下几点：∙如果选中的是Web 控件，它添加或修改CssClass 属性。
母版页的使用
母版页的使⽤⼀、母版页简介使⽤母版页可以为应⽤程序中的页创建⼀致的布局。
单个母版页可以为应⽤程序中的所有页（或⼀组页）定义所需的外观和标准⾏为。
母版之所以称为母版，就是将⼤部分⽹页上固定内容，⽐如导航栏，版权声明栏放到⼀个母版⾥，然后编写⽹页时只需要调⽤母版就⾏了，内容页就不需要再写那些内容了。
不需要将相同的部分再写⼀遍。
母版中可以标记多个asp:ContentPlaceHolder。
母版页仅仅是⼀个页⾯模板，单独的母版页是不能被⽤户所访问的。
单独的内容页也不能够使⽤。
母版页和内容页有着严格对应关系。
母版页中包含多少个ContentPlaceHolder控件，那么内容页中也必须设置与其相对应的Content控件。
当客户端浏览器向服务器发出请求，要求浏览某个内容页⾯时，引擎将同时执⾏内容页和母版页的代码，并将最终结果发送给客户端浏览器。
在中母版页有两种作⽤，⼀是提⾼代码的复⽤（把相同的代码抽出来），⼆是使整个⽹站保持⼀致的风格和样式。
母版页⽆法直接启动运⾏，需要套⽤的⼦页⾯启动把它带出来母版页的嵌套，⼀般⽤2层⾜够，最多3层<asp:ContentPlaceHolder ID="id" runat="server"> - 母版页中的位置预留<asp:Content ID="Content2" ContentPlaceHolderID="id" runat="Server"> - 填坑⼆、母版页的建⽴和使⽤1.母版页的建⽴添加新项-母版页在新建的母版页中⾃动⽣成了两个ContentPlaceHolder控件，其中⼀个在head区， ID是“head”；另⼀个在body区，默认ID是“ContentPlaceHolder1”，可以根据需要⾃⼰命名。
在内容页中，两个控件会变成与其相对应的Content控件，⽤户需在content内进⾏开发。
ASP.NET程序设计习题
《程序设计》复习习题基础一、选择题1、.NET Framework是一种( )。
A、编程语言B、程序运行平台C、操作系统D、数据库管理系统2、用Visual 编写的程序被编译成中间语言（MSIL）后，运行时还要再一次被编译，这种编译被称为( )。
A、CLRB、JITC、GCD、GDI3、运行程序的计算机必须安装 ( )。
A、.NET Framework和IISB、C、C#和D、4、要使程序立即运行需要按( )键。
A、F5B、Ctrl+F5C、F 10D、F11二、判断题１、浏览器只能解释HTML和JavaScript代码，不能解释后台代码。
2、页面的<HEAD>标签是可有可无的，而<BODY>标签是必不可少的。
3、JavaScript脚本在发送到客户端之前，需要将其编译成HTML代码。
三、思考题1、静态网页与动态网页的区别是什么？2、现动态交互式网页的技术与方法是什么？3、微软推出的有什么意义？服务器控件一、选择题1、指定Label控件的边框风格，需要设臵其（）属性。
A、BorderColorB、BackColorC、BorderStyleD、BorderWidth2、要将数据源绑定到控件，需要调用控件的（）方法。
A、LoadB、DataBindC、DisposeD、GetType3、要掩盖TextBox控件中文本，需要将控件的TextMode属性设臵为（）。
A、PasswordB、MultiLineC、SingleLineD、Null4、要使文本框最多输入6个字符，需要将该控件的（）属性值设臵为6。
A、MaxLengthB、ColumnsC、RowsD、TabIndex5、要使Button控件不可用，需要将控件的（）属性设臵为false。
A、EnabledB、EnableViewStateC、VisibleD、CausesValidation6、DropDownList被选中项的索引号被臵于（）属性中。
母板页(masterPage)
SiteMapDataSource对象
SiteMapDataSource控件提供了一个数据源控件， Web 服务器控件及其他控件可使用该控件绑定到 分层的站点地图数据
<HTML> <BODY> <FORM runat="server"> <asp:SiteMapDataSource id="SiteMapDataSource1" runat="server" /> <asp:TreeView id="TreeView1" runat="server" DataSourceID="SiteMapDataSource1"> </asp:TreeView> </FORM> </BODY> </HTML>
Site.master
<%@ Master %>
default.aspx
<%@ Page MasterPageFile="Site.master" %> <asp:Content ContentPlaceHolderID= "Main" RunAt="server" />
http://.../default.aspx
效果实现
步骤3：
在“校园在线超市”网站中，创建站点地图文件， 文件名为Web.sitemap。
<?xml version="1.0" encoding="utf-8" ?> <siteMap xmlns="/AspNet/SiteMap-File-1.0" > <siteMapNode url="" title="" description=""> <siteMapNode url="Default.aspx" title="首页" description="" /> <siteMapNode url="login.aspx" title="会员天地" description="" /> <siteMapNode url="find.aspx" title="琳琅满目" description="" /> <siteMapNode url="boardcast.aspx" title="校园广播" description="" /> <siteMapNode url="InfoList.aspx" title="出行指南" description="" ></siteMapNode> </siteMapNode> </siteMap>
Web编程技术-布局与导航
制作人：潘冰1.1主题什么是主题 创建主题和外观 主题文件的应用
1.1.1 1.1.2 1.1.3
制作人：潘冰
1.1.1
什么是主题
主题(Theme)是指控件和页面外观属性设置的集合（文件 组）。 主题是一个目录，允许三种类型文件：外观文件、样式文 件和一些图形文件。
– 外观文件（皮肤文件,后缀为.skin）：用来定义一批服务器控件 的外貌。例如，可以定义一批TextBox或者Button服务器控件的底 色、前景色。 – 样式文件（后缀为.css） ：用来定义HTML的标签。
制作人：潘冰
1.网站布局
网站布局概述 1）站点布局传统解决方案
–使用框架、（表格、层） –使用包含文件 –使用用户自己定义控件
2）2.0提供网站布局技术
–主题 –母版 –用户控件
制作人：潘冰
1.网站布局
1.1 主题 1.2 母版 1.3 用户控件
有关实例在samples/myLayOut
相关代 码
制作人：潘冰
演示效果
制作人：潘冰
1.网站显示风格
1.1 主题 1.2 母版 1.3 用户控件
制作人：潘冰
1.3
用 户 控 件
1.3.1 用户控件概述 1.3.2 用户控件举例 1.3.4 使用用户控件注意事项
制作人：潘冰
1.3.1
用户控件概述
用户控件(User Control)是一种将页面的部分内容 单独保存起来的页面，供多个页面重复使用。
制作人：潘冰
1.1.3
主题文件的应用
有时需要对同一种控件定义多种显示风格，此时可以在外观 文件中，在控件显示的定义中用SkinID属性来区别。 例如，在TextBox.skin文件中对TextBox的显示定义了三种 显示风格：
ASP.NET程序设计习题
《程序设计》复习习题基础一、选择题1、.NET Framework是一种( )。
A、编程语言B、程序运行平台C、操作系统D、数据库管理系统2、用Visual 编写的程序被编译成中间语言（MSIL）后，运行时还要再一次被编译，这种编译被称为( )。
A、CLRB、JITC、GCD、GDI3、运行程序的计算机必须安装 ( )。
A、.NET Framework和IISB、C、C#和D、4、要使程序立即运行需要按( )键。
A、F5B、Ctrl+F5C、F 10D、F11二、判断题１、浏览器只能解释HTML和JavaScript代码，不能解释后台代码。
2、页面的<HEAD>标签是可有可无的，而<BODY>标签是必不可少的。
3、JavaScript脚本在发送到客户端之前，需要将其编译成HTML代码。
三、思考题1、静态网页与动态网页的区别是什么？2、现动态交互式网页的技术与方法是什么？3、微软推出的有什么意义？服务器控件一、选择题1、指定Label控件的边框风格，需要设臵其（）属性。
A、BorderColorB、BackColorC、BorderStyleD、BorderWidth2、要将数据源绑定到控件，需要调用控件的（）方法。
A、LoadB、DataBindC、DisposeD、GetType3、要掩盖TextBox控件中文本，需要将控件的TextMode属性设臵为（）。
A、PasswordB、MultiLineC、SingleLineD、Null4、要使文本框最多输入6个字符，需要将该控件的（）属性值设臵为6。
A、MaxLengthB、ColumnsC、RowsD、TabIndex5、要使Button控件不可用，需要将控件的（）属性设臵为false。
A、EnabledB、EnableViewStateC、VisibleD、CausesValidation6、DropDownList被选中项的索引号被臵于（）属性中。
Web应用设计第4章 主题母版页
5
4.1.1 主题概述
用户界面外观主要与控件和页面的样式有关。几乎所 有的控件都具有Style属性，用于设置前景色、背景色、 边框样式、字体等属性。在网站制作过程中，可以一个 控件一个控件的去设置，这样会做许多重复性的工作， 而且还不容易保持站点中页面外观的一致性。利用 2.0提供的主题功能，可以快速地为服务器控件 定义外观，并且所定义的外观可应用到单个页面、应用 程序的所有页面及所有的应用程序中。
文本框控件，按题目要求进行设置，第二个文本框应用 命名皮肤，第三个文本框禁用皮肤文件。要将定义的 TextBox.skin皮肤文件应用于该页面中的文本框，需要 在@Page指令中添加代码“Theme=”主题目录名称”” 属性，该皮肤文件位于Temes_skin主题目录中，因此 需在@Page指令中添加“Theme=”Temes_skin””属性。
第4章
主题、母版页
本章内容
掌握创建和应用主题的方法 掌握母版页的使用方法
2
本章重点
本章重点
外观文件 CSS样式文件 母版页
本章难点
创建和使用主题及母版页
3
主题、母版页
4.1 主题 4.2 母版页 4.3 本章小结
4
4.1 主题（Theme）
主题（Theme）是 2.0提供的一种新技术，是 指控件和页面外观属性设置的集合。通过为控件和页面 套用主题，可以使用户界面外观达到一致化的显示效果。
6
4.1.1 主题概述
在一个主题中至少要包括一个皮肤文件（或称外观文件， 扩展名为.skin），还可包括级联样式表文件（扩展名 为.css）。外观文件不同于CSS样式， CSS样式只能用来定义页面和HTML标记的外观样式 外观文件用来定义服务器控件的外观样式。 如果将两者结合起来就可以定义不同类型的控件。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
主题和母版页（母版页）标准化网站布局的格式只是整个过程的一部分，你还需要保证通用的元素，如网站的标题、网站的导航控件等在每个页面里都出现在相同的位置。
解决这一问题的关键在于创建一个可以重复应用到整个网站的简单而灵活的布局。
有3 个基本办法可以选择：∙用户控件。
用户控件时标准化通用页面元素的优秀方式，但是，它们自身并不能解决页面布局的问题，因为没有办法保证用户控件在所有页面中都被放到同样的位置。
∙HTML 框架。
框架是在一个浏览器窗口中同时显示多个页面的HTML 基本工具。
它的主要缺点是它里面的每个页面必须通过单独请求服务器进行检索，这些页面的代码不得不完全独立。
这同时意味着一个框架里的页面不能和其他框架中的页面交互，也不能影响其他框架中的页面。
（至少不能通过服务器端代码）∙母版页。
母版页是 的一个特性，它专门设计用于标准化Web 页面布局。
它可定义固定的内容并声明Web 页面里可插入自定义内容的部分。
如果在整个网站中使用同一个母版页，就可以确保获得同样的布局。
最妙的是，如果修改了母版页的定义，应用它的所有页面都会自动变化。
要为页面模版提供一个可操作且灵活的解决方案，必须满足以下几个条件。
∙要能够单独定义页面的某个部分并在多个页面里重用它。
∙要能够创建一个定义了可编辑区域的封闭布局。
重用这个模版的页面只能够在许可的区域内添加或修改内容。
∙页面能够对重用的元素做一些自定义。
∙可以声明性的绑定页面倒页面模版（不使用代码）或者能够在运行时动态绑定到页面。
∙可以用工具（如VS）设计一个使用页面模版的页面。
为了实现这一切， 定义了两种新的页面类型：母版页和内容页。
母版页和普通的Web 页面一样，它可以包含任何HTML、Web 控件甚至代码的组合。
母版页还可以包含内容占位符（定义的可修改区域）。
内容页引用一个母版页并获得它的布局和内容。
此外，内容页可以在任意的占位符里加入页面特定的内容。
换句话说，内容页将母版页没有定义的缺失了的内容填入母版页。
母版页和一般Web窗体的区别是：∙母版页由Master 指令开始，并提供和Page 指令相同的信息。
而所有Web 窗体都由Page 指令开始。
∙只有母版页才可以使用ContentPlaceHolder控件，这个控件是内容页可以插入内容的部分。
创建一个母版页后，会得到一个只包含2 个ContentPlaceHolder控件的空白页。
第一个是在<head>区域定义的，它让内容页面能够增加页面元数据，比如搜索关键字和样式表链接。
第二个也是更重要的ContentPlaceHolder被定义在<body>区域，它代表页面显示的内容。
另外，母版页不能被直接请求，要使用母版页，必须创建一个关联的内容页。
下面是个简单的母版页示例，它有一个静态的横幅，其后跟着一个ContentPlaceHolder控件，然后是一个页脚：<%@ Master Language="C#" AutoEventWireup="true"CodeFile="SiteTemplate.master.cs"Inherits="Chapter16_SiteTemplate" %><html xmlns="/1999/xhtml"><head runat="server"><title></title><asp:ContentPlaceHolder ID="head"runat="server"></asp:ContentPlaceHolder></head><body><form id="form1"runat="server"><div><div style="background: black; height: 87px; font-weight: bold; font-size: 20px;color: white; font-family: Verdana"><img align="left"src="headerleft.jpg"/><img align="right"src="headerright.jpg"/><br/><asp:ContentPlaceHolder ID="TitleContent"runat="server">My Site</asp:ContentPlaceHolder></div><br/><br/><asp:ContentPlaceHolder ID="ContentPlaceHolder1"runat="server"></asp:ContentPlaceHolder><br/><em>Copyright © 2008.</em></div></form></body></html>要在其他页面里使用母版页，必须在Page 指令里加入MasterPageFile特性：<%@ Page Title="" Language="C#"MasterPageFile="~/Chapter16/SiteTemplate.master" ... %>只设置MasterPageFile特性还不足以把普通的页面转变成内容页。
内容页必须定义要插入一个或多个ContentPlaceHolder控件的内容（并编写这些控件需要的代码）。
由于母版页已经提供了外壳，因此，试图在内容页中加入<html>、<head>、<body>之类的元素，则会产生一个错误。
要为ContentPlaceHolder提供内容，要用到另一个叫Content 的特殊控件。
ContentPlaceHolder和Content 控件具有一对一的关系。
对于母版页里的每个ContentPlaceHolder，内容页会提供一个对应的Content 控件（除非不准备为那个区域提供任何内容）。
通过匹配ContentPlaceHolder的ID 和对应的Content 控件的Content.ContentPlaceHolderID属性将它们对应起来。
<%@ Page Title="" Language="C#"MasterPageFile="~/Chapter16/SiteTemplate.master"AutoEventWireup="true" CodeFile="Default.aspx.cs"Inherits="Chapter16_Default" %><asp:Content ID="Content1"ContentPlaceHolderID="ContentPlaceHolder1"ru nat="Server"><p class="Code"style="margin: 0in 0.1in 0pt 0in"><span style="font-size: 10pt; font-family: TheSansMonoConNormal">Far out in the unchartedbackwaters of the unfashionable end of the western spiral arm of the Galaxy liesa small unregarded yellow sun.</span></p></asp:Content><asp:Content ContentPlaceHolderID="TitleContent"ID="Content2"runat="se rver">Custom Title</asp:Content>为了更好的理解母版页是如何工作的，值得通过跟踪（在Page 指令里加入Trace=true）来看看内容页。
借助这种方式可以了解控件的层次。
你会发现 首先为母版页创建控件对象，包括ContentPlaceHolder（它充当一个容器），接着它会把内容页的控件加入ContentPlaceHolder。
如果需要动态配置母版页或内容页，可以响应任意一个类中的Page.Load事件。
有时你可能会同时在母版页和内容页中使用初始化代码。
这种情况下，理解每个事件发生的顺序就很重要。
首先创建母版页控件，然后添加内容页的子控件。
然后它触发母版页的Page.Init事件，随后是内容页的Page.Init事件。
对于Page.Load事件，也是相同的步骤。
（如果有冲突，那么内容页的自定义会覆盖在母版页相同阶段所做的修改）母版页定义ContentPlaceHolder时可以包含默认的内容（内容页没有提供相应的Content 控件时才会使用的内容）。
内容页不能只使用母版页默认内容的一部分或只编辑这一部分。
这是不可能的，因为默认内容是保存在母版页里面而不是内容页中。
所有，要么完全使用，要么就全部替换它。
HTML 使用基于流的布局。
这意味着随着内容的增加，页面会被重新组织，其他一些内容会被挤到一边。
这样的布局会使得难以获得母版页预期的结果。
如果你不小心，就会破坏原本完美的布局，插入到<Content>标签的大量信息会把页面结构弄得乱七八糟。
为了控制这些问题，大部分母版页使用HTML 表格或者CSS 定位来控制布局。
使用表格时，基本原则是把整个页面或页面的部分分解到行和列里。
然后你就可以把ContentPlaceHolder加入到某个单元格里，从而保证其他内容多少会按照预期的那样对齐。