ASPNET中的CSS、主题和母版页

3.3 从内容页访问母板页的内容
3.3.2 在内容页中响应母版页控件的事件 在母版页中常包含类似用户登录、 在母版页中常包含类似用户登录、站内搜索等需要与用户交 互操作的界面， 互操作的界面，这就需要能够在内容页中处理发生在母版页中的 系统事件或用户事件。 系统事件或用户事件。 在内容页中响应母版页中的事件，需要用到“委托”技术， 在内容页中响应母版页中的事件，需要用到“委托”技术， 也就是说将母版页中发生的事件“委托” 也就是说将母版页中发生的事件“委托”给内容页中编写的某个 方法”程序来处理。 “方法”程序来处理。 EventHandler委托的语法格式如下所示： EventHandler委托的语法格式如下所示： 委托的语法格式如下所示 事件名称 += new EventHandler(处理事件的方法名称); EventHandler(处理事件的方法名称 处理事件的方法名称);
3.1 使用主题与外观文件
3.1.2 3.1.2 使用外观文件 2. .sink文件与.css文件的区别 .sink文件与 css文件的区别 文件与. 外观文件（.skin）和级联样式表文件（.css）的主要区别有以 外观文件（.skin）和级联样式表文件（ css） 下几个方面。 下几个方面。 1) 外观文件可以使页面中多个同类控件具有相同的外观 外观文件可以使页面中多个同类 控件具有相同的外观 样式，而级联样式表只能通过设置“CssClass” 样式，而级联样式表只能通过设置“CssClass”属性实现单个 控件的外观样式控制 控件的外观样式控制。 控件的外观样式控制。 2) 外观文件可以实现对所有控件的外观设置，而级联样 外观文件可以实现对所有控件的外观设置， 控件的外观设置 式表文件并不是对所有控件都有效， 控件都有效 式表文件并不是对所有控件都有效，其主要应用领域是 XHTML元素 元素。 XHTML元素。 3) 在控制外观属性较多的控件时，需要在样式表文件中 在控制外观属性较多的控件时， 控件时 定义大量的类名选择符，使文件变得十分臃肿。而且若各CSS CSS类 定义大量的类名选择符，使文件变得十分臃肿。而且若各CSS类 之间的关系处理不好，还可能造成页面布局的混乱。 之间的关系处理不好，还可能造成页面布局的混乱

8.1.1 什么是主题
主题由一组元素组成：外观、级联样式表(CSS)、图像和其他资源。主题将至少包 含外观。主题是在网站或Web服务器上的特殊目录中定义的。
1.外观 外观文件具有文件扩展名.skin，它包含各个控件（例如，Button、Label、TextBox 或 Calendar 控件）的属性设置。 控件外观设置类似于控件标记本身，但只包含要作为 主题的一部分来设置的属性。 通常，一个.skin文件可以包含一个或多个控件类型的一个或多个控件外观。可以为 每个控件在单独的文件中定义外观，也可以在一个文件中定义所有主题的外观。 有两种类型的控件外观：“默认外观”和“已命名外观”： 当向页应用主题时，默认外观自动应用于同一类型的所有控件。如果控件外观没有 SkinID特性，则是默认外观。例如，如果为Calendar控件创建一个默认外观，则该控件 外观适用于使用本主题的页面上的所有Calendar控件。（默认外观严格按控件类型来匹 配，因此Button控件外观适用于所有Button控件，但不适用于LinkButton控件或从Button 对象派生的控件。）
switch (Request.QueryString["theme"]) {
case "Red": Page.Theme = "RedTheme"; break;
case "Black": Page.Theme = " BlackTheme"; break;
} }
/webnew/
/webnew/
8.1.2 主题的应用范围
可以定义单个Web应用程序的主题，也可以定义供Web服务器上的所有应用程序使 用的全局主题。定义主题之后，可以使用@Page指令的Theme或StyleSheetTheme属性将 该主题放置在个别页上；或者通过设置应用程序配置文件中的pages元素（设置 架构）元素，将其应用于应用程序中的所有页。如果在Machine.config文件中定义了 pages元素（设置架构）元素，主题将应用于服务器上的Web应用程序中的所有 页。

6
默认的样式模板（ RED.SKIN）
<%-默认的外观模板。以下外观仅作为示例提供。 1.一主题中不允许一
个控件类型有重复的 SkinId。 <asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" >
10
添加图片文件到主题
通常在App_Themes文件夹中创建Images文件夹，再 添加合适的图片文件到Images文件夹中。 要使用Images文件夹中的图片文件，可以通过控件的 相关链接图片文件的Url属性进行访问。
11
10.1.3 使用主题
自己定义或从网上下载主题后，就可以在Web应用程 序中使用主题了。
</configuration>
14
网站部分页应用主题
1. 可以将这些页与它们自己的web.config文件放在一 个文件夹中。
2. 在根web.config文件中创建一个<location>元素以指 定文件夹。为子文件夹sub1设置了主题：
<configuration> <location path="sub1"> <system.web> <pages theme="ThemeName(主题名)" /> </system.web> </location>
<AlternatingRowStyle BackColor="Blue" /> </asp:GridView> 2. 默认外观。未定义 SkinId。在同一主题中每个控件类型只允许有一个

</configuration>
19
（4）设臵网页的StyleSheetTheme属性指定样式表主题 将网页StyleSheetTheme属性设臵为指定的主题，这样 指定的主题称为样式表主题。其操作是在“属性”窗口中 指定DOCUMENT的StyleSheetTheme属性为指定的主题， 如下图所示。这样网页的页指令自动变为：
<%@ Page Theme="Blue"…%>
也可以直接在页指令中添加上述粗体 属性。 这种方式指定主题的作用在设计时 不会显现，只有在网页运行时外观文件 的作用来显现出来。
14
【例6.1】
设计一个应用Blue主题的网页WebForm6-1。
其设计步骤如下： （1）在Myaspnet网站的ch6文件夹中添加一个名称为 WebForm6-1的空网页。 （2）其设计界面中包含两个文本框TextBox1、 TextBox2，一个按钮Button1和一个标签Label1。在视图 代码中将页指令修改为：
Label1.Text = Label1.Text + " 年龄：" + TextBox2.Text ;
}
16
WebForm6-1网页设计界面
WebForm6-1网页运行界面
17
（2）在代码中指定主题
可以在代码中为本网页指定主题，但需要放在
Page_PreInit事件处理过程中才会生效，其一般格式如下：
（3）最后应用Theme 属性（重写控件属性和StyleSheetTheme）。
21
【例6.2】 设计一个说明控件属性应用顺序的网页WebForm6-2。
其设计步骤如下： （1）在Myaspnet网站的ch6文件夹中添加一个名称为WebForm6-2的 空网页。 （2）设计界面和后臵代码与WebForm6-1网页完全相同。 （3）在Myaspnet网站中添加一个White主题，其中包含一个外观文 件SkinFile.skin,其输入的代码如下页所示： （4）将本网页的Theme属性设为Blue，StyleSheetTheme属性设为 White,将网页中TextBox2控件的SkinId属性设为textbox2。

主题和母版页（层叠样式表、主题）整合网站的第一步是采用一组一致的可视化样式。

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 属性。

px，在新建对话框中勾选“选择 母版页”，并选择相应的母版页文件 引用外部分 4.在内容页中引用样式文件 样式表
<asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"> <link rel="stylesheet" type="text/css" href="style/MasterPage.css" /> </asp:Content> <asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
一、任务2
任务描述：为网上书店系统的前台设计母版页，如下图所示，
页首和页尾统一设计在母版中，中间的部分是变化的设计在内
容页中。
二、基本知识与技能—母版页概述
包含除母版页 之外的其他非 公共内容
封装页面中 的公共元素
在运行过程中，引擎将 两种页面内容文件合并执行，最后 将结果发给客户端浏览器
注意(1)内容页中没有<html><body>等标签 (2)内容页中所有内容必须包含在Content控件中 (3)内容页必须绑定母版页。
实例2:母版页的使用
1.新建一个母版页MasterPage.master，并设计母版页
<head runat="server"> <title></title> <asp:ContentPlaceHolder id="head" runat="server"> </asp:ContentPlaceHolder> </head> <body> <form id="form1" runat="server"> <div id="container"> <div id="header">页首 </div> <div id="content"> <asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"> </asp:ContentPlaceHolder> </div> <div id="footer">版权所有</div> </div> </form> </body></html>

第7页
2016年10月10日
内联式样式

直接将样式控制放在单个HTML元素内，称 为内联式或行内样式。该样式通过style属 性来控制每个元素的外观，直观但是很繁 琐。除非具有相同样式的元素较少，否则 很少采用。
2016年10月10日
第8页
级联式样式
在网页的head部分定义或导入的样式，称 为级联式样式。该样式可以实现将网页结 构和表现分离，这样，当修改某些元素的 样式时，只需要修改head部分定义或引入 的样式，该网页内所有具有相同样式的元 素都会自动应用新的样式。 级联式样式又可以分为两种方式：内嵌式 和链接式。
2016年10月10日
第18页
新建内嵌式样式

在页面的设计视图下，在【格式设置】工具栏的 【目标规则】列表中，选择【应用新样式】选项 此时将打开【新建样式】对话框，该对话框与【 修改样式】对话框相似，所不同的是【新建样式 】对话框中包含了【选择器】，用于选择对哪一 个标记进行定义，以及通过【定义位置】将当前 定义存放到哪里
– 标记选择符.类名{样式属性1:值1; 样式属性2: 值2; ……}

在代码中引用类选择符的方法是通过元素 的class属性来实现的。代码如下：
– <p class="one">类别选择器1</p> – <p class="two">类别选择器2</p>
2016年10月10日
第24页
ID选择符

第21页
2016年10月10日
添加样式规则

一个样式表由若干个样式规则组成。样式 规则是指网页元素的样式定义，包括元素 的显示方式以及元素在页中的位置等。打 开前面添加的样式表文件StyleSheet.css， 此时的样式表是一个只包含body元素的空 规则，在大括号内右击鼠标，从弹出的快 捷菜单中选择【生成样式】命令，即可打 开【修改样式】对话框，通过该对话框即 可定义该元素的样式规则

8.2.1 创建主题
为了在中创建主题，需要先创建一个名为 App_Themes的主题文件夹用来存放主题，该文件夹必 须位于应用程序的根目录中。在该文件夹中可以存放多个 主题设置。每个主题必须用一个单独的子文件夹进行存放 。
8.2.2 创建命名皮肤
在上一节中为TextBox控件创建了一个皮肤，当在页 面上应用主题后，会发现所有的TextBox控件的呈现外观 都发生了改变，这种皮肤称为默认皮肤。开发人员可能想 为某个指定的TextBox控件应用一种不同的皮肤，此时可 以考虑使用命名皮肤。
8.2.6 动态应用主题
一些网站提供了让用户选择主题的功能，用户根据主 题外观缩略图选择一个主题，将呈现相应的外观效果。在 中可以编程的方式动态的应用主题，只需要在 PreInit事件中动态的指定Theme属性，就可以实现主题的 动态切换效果。
8.3 母版页
母版页类似于Word中的模板，允许在多个页面中共 享相同的内容。比如网站的LOGO，可能需要在多个页面 中重用，则可以将其放在母版页中。在Dreamweaver中 可以使用模板页，的母版页与此类似。使用母 版页可以简化维护、扩展和修改网站的过程。并能提供一 致、统一的外观。
•
母版页
本章内容有：
• 如何在中应用CSS样式
• 如何创建和使用主题
• 如何创建和使用母版页
8.1 在中应用CSS样式
随着Web的越来越盛行，Web设计也越来越趋向于 整体与结构化。在早期，比如在1999年以前，Web站点 的设计者们使用HTML语法来格式化显示样式，这种方式 具有多种限制，比如在不同的浏览器中的显示效果不一致 、缺乏标准的支持、HTML代码结构混乱等等。
8.3.1 创建母版页
母版页的使用与普通页面类似，可以在其中放置文 件或者图形，任何的HTML控件和Web控件，后置代码等 等。母版页的扩展名以.master结尾，不能被浏览器直接 查看。母版页必须在被其他页面使用后才能进行显示。

8.5
常见面试题分析
8.5.1 如何让一个网站默认一个母版页？ 凡是全局的配置，必须得使用web.config来完成，本题可 以在其中如下设置： <configuration> <system.web> <pages masterPageFile=”~/MasterPage/MasterPage.master” /> </system.web> </configuration>
8.2.1
创建主题
为了在中创建主题，需要先创建一个名为 App_Themes的主题文件夹用来存放主题，该文件夹必 须位于应用程序的根目录中。在该文件夹中可以存放多 个主题设置。每个主题必须用一个单独的子文件夹进行 存放。
8.2.2
创建命名皮肤
在上一节中为TextBox控件创建了一个皮肤，当在页 面上应用主题后，会发现所有的TextBox控件的呈现外观 都发生了改变，这种皮肤称为默认皮肤。开发人员可能想 为某个指定的TextBox控件应用一种不同的皮肤，此时可 以考虑使用命名皮肤。
为整个网站应用主题
除了为单个页面使用Theme或者是 StyleSheetTheme属性设置主题之外，还可以为应用程 序中的所有页面同时应用主题。可以在web.config配置 文件中配置Web应用程序的所有页面都可用的主题。
8.2.5
添加CSS样式
也可以在主题中添加样式表文件来控制页面中的 HTML元素和控件的外观，如果向主题文件夹 中添加一个CSS文件，则CSS样式将被应用到应用了主 题的任何页面。
8.1
在中应用CSS样式
随着Web的越来越盛行，Web设计也越来越趋向于 整体与结构化。在早期，比如在1999年以前，Web站点 的设计者们使用HTML语法来格式化显示样式，这种方式 具有多种限制，比如在不同的浏览器中的显示效果不一 致、缺乏标准的支持、HTML代码结构混乱等等。

母版页

母版页为具有扩展名.master的文件，它具有可以 包括静态文本、HTML元素和服务器控件的预定义布局。母 版页由特殊的@Master指令识别，该指令替换了用于普通 .aspx页的@Page指令。
母版页


除在所有页上显示的静态文本和控件外，母 版页还包括一个或多个 ContentPlaceHolder控件。 ContentPlaceHolder控件称为占位符控件 ，这些占位符控件定义可替换内容出现的区 域。 可替换内容是在是在内容页中定义的，所谓 内容页就是绑定到特定母版页的 页（.aspx文件以及可选的代码隐藏文件） ，通过创建各个内容页来定义母版页的占位 符控件的内容，从而实现页面的内容设计。
TreeView控件以树型结构来对网站进行导航，它支持以下功能： 数据绑定，它允许控件的节点绑定到XML、表格或关系数据。 站点导航，通过与SiteMapDataSource控件集成实现。 节点文本既可以显示为纯文本也可以显示为超链接。 借助编程方式访问TreeView对象模型以动态地创建树、填充节点、设 置属性等。 客户端节点填充。 在每个节点旁显示复选框的功能。 通过主题、用户定义的图象和样式可实现自定义外观。
网站导航

</siteMap>
使用VS2010创建的站点地图文件可以自动生成组成网站地 图的基本结构，示例代码如下： <?xml version="1.0" encoding="utf-8" ?> <siteMapxmlns="/As pNet/SiteMap-File-1.0" > <siteMapNode url="" title="" description="" <siteMapNode url="" title="" description="" /> <siteMapNode url="" title="" description="" /> </siteMapNode>

8.3.3 母版页和相对路径
笔者将母版页和相对路径划为一小节来进行讨论, 是有来由的中母版页处理相对路径有一 些奇怪,不小心可就会让开发人员摸不着北.假 如在母版页中只添加一些文本信息,这可能并不 是任何问题.但是一个真正的网站或应用程序, 通常都需要在母版页中添加很多图片,或者是其 他的HTML标签来指向其他的资源,那么将会产生 问题.
8.2.2 创建命名皮肤
在上一节中为TextBox控件创建了一个皮肤,当在页面上应用主题 后,会发现所有的TextBox控件的呈现外观都发生了改变,这种皮 肤称为默认皮肤.开发人员可能想为某个指定的TextBox控件应用 一种不同的皮肤,此时可以考虑使用命名皮肤. 创建命名皮肤与创建默认皮肤类似,唯一不同点是需要为命名皮 肤指定一个SkinID属性,用于命名一个皮肤. 注意:在一个皮肤文件中,可以有多个命名的皮肤文件,但是只 能具有一个默认的皮肤文件. 下面在TextBox.skin文件中添加一个命名皮肤文件,代码如下所 示. <asp:TextBox BackColor="Yellow" BorderStyle="Dotted" Runat="Server" /> <asp:TextBox SkinID="NamedSkin" BorderStyle="Dashed" BorderWidth="2px" Runat="Server" />
8.3.5 修改母版页
使用母版页将会在多个内容页上显示相同的内容,一些页面可能想覆盖某 些母模页中定义的显示,来提供自定义的显示.比如如果想修改内容页的 标题,可以在Page区中修改Title属性.也可以通过编程的方式改变Title 属性,除此之外还可以修改CSS中的样式规格,这是因为母版页中的 HTML<head>标签具有runat="server"声明,表示己经被设置为服务器端 Head标签,因此开发人员可以使用Page.Header属性来访问Header中的属 性.

母版页使用详解收藏母版页是VS2005中新引入的一个概念，它很好地实现界面设计的模块化，并且实现实现了代码的重用。

它就像婚纱影楼中的婚纱模板，同一个婚纱模板可以给不同的新人用，只要把他们的照片贴在已有的婚纱模板就可以形成一张漂亮的婚纱照片，这样可以大大简化婚纱艺术照的设计复杂度。

这里的母版页就像婚纱模板，而内容页面就像两位新人的照片。

在VS2003中没有母版页，要实现这种设计重用的效果，我们只能用“用户控件”来实现，但用户控件没有一种可视化的组合外观，使用起来不太方便。

母版页（扩展名是.master）它的使用跟普通的页面一样，可以可视化的设计，也可以编写后置代码。

与普通页面不一样的是，它可以包含ContentPlaceHolder控件，ContentPlaceHolder控件就是可以显示内容页面的区域。

代码如下：<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>......<form id="form1" runat="server"><div><asp:contentplaceholder id="ContentPlaceHolder1" runat="server"></asp:contentplaceholder></div></form>......注意：1、这里的声明指示符是“<%@ Master...%>”2、其内部包含<asp:contentplaceholder......>控件内容页（扩展名是.aspx）在建立内容页面的时候，在“添加新项”对话框中要选中“选择母版页”复选框。

淮海工学院计算机科学系实验报告书课程名：《计算机新技术（二）》题目：主题和母版页班级：*******学号：201*******姓名：***一.实验目的(1)通过实验,进一步理解主题的概念,并能够正确地定义皮肤文件(.skin)和层叠样式单文件(.css);(2)通过实验,能够在Web页面中正确地引用主题中所定义的外观设置(Theme=….)和样式单格式(StyleSheetTheme=…..);(3)通过实验,进一步理解母版页的特点,母版页的格式和在WEB项目中创建母版页的方法;(4)通过实验,进一步理解内容页的特点,内容页和母版页的关系以及在WEB项目中创建内容页的方法.二.实验内容和要求(1)定义主题,其下包含外观文件和样式单文件;(2)创建WEB页面,在其中引用主题中的外观和样式单信息;(3)创建一个母版页;(4)创建至少两个内容页来引用母版页.三.实验步骤(1)在项目的App_Themes文件夹下面,创建一个主题,命名为Theme1,在其下创建一个皮肤文件,Skin1.skin,在皮肤文件中定义Label,TextBox,Button,ListBox,DropDownList等服务器控件的外观信息.(2)在主题Theme1下面再创建一个样式单文件,Css1.css.样式单文件中要分别定义三种类型即元素、类别、ID的样式信息(3)在项目中添加一个Web窗体文件,命名为 Page1.aspx,在该页面中引用主题Theme1中的外观和样式信息.(4)运行页面,查看外观和样式信息的浏览效果.(5)定义一个母版页,命名为Master1.master.在此母版页中定义公共区和可编辑区.(6) 在项目中添加一个Web窗体文件,命名为 Page2.aspx,让其引用母版页,定义其可编辑区,在浏览器观察其运行效果.(7) 在项目中添加一个Web窗体文件,命名为 Page3.aspx,让其引用母版页,定义其可编辑区,在浏四.实验结果图 1.Page1.aspx图 2.Page2.aspx图 3.Page3.aspx部分源码：Skin1.skin：<asp:Label runat="server" Font-Names="微¡é软¨¨ª雅?黑¨²" Font-Size="Medium" /> <asp:TextBox runat="server" BackColor="#CCFFCC" BorderColor="#CCCCCC" /><asp:Button runat="server" BackColor="#00CC66" /><asp:ListBox runat="server" BackColor="DDDDDD" /><asp:DropDownList runat="server" BackColor="CCFFCC" />Css1.css：#top{padding: inherit;margin: auto;border: thin double #999999;background-position: center;background-color: #99FF99;}Master1.master:<body><form id="form1" runat="server"><div style="font-size: x-large; font-family: 微¡é软¨¨ª雅?黑¨²">个?人¨?中D心? ：êo<br /><br /></div><div style="font-size: large; font-family: 微¡é软¨¨ª雅?黑¨²">用®?户¡ë名?：êo<br /><asp:ContentPlaceHolder id="ContentPlaceHolder0" runat="server"></asp:ContentPlaceHolder>手º?机¨²：êo<br /><asp:ContentPlaceHolder id="ContentPlaceHolder1" runat="server"></asp:ContentPlaceHolder>邮®¨º箱?：êo<br /><asp:ContentPlaceHolder id="ContentPlaceHolder2" runat="server"></asp:ContentPlaceHolder>所¨´在¨²地Ì?：êo<br /><asp:ContentPlaceHolder id="ContentPlaceHolder3" runat="server"></asp:ContentPlaceHolder></div></form><p class="style1"><hr width=95% / ><div class="style1"><span style="color: rgb(0, 0, 0); font-family: Arial, simsun; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22px; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); display: inline !important; float: none; "> 淮¡ä海¡ê工¡è学¡ë院o&nbsp; 版ã?权¨¡§所¨´有®D<spanclass="Apple-converted-space">&nbsp;</span></span><brstyle="color: rgb(0, 0, 0); font-family: Arial, simsun; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22px; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); " /><span style="color: rgb(0, 0, 0); font-family: Arial, simsun; font-size: 12px; font-style: normal; font-variant: normal; font-weight: normal; letter-spacing: normal; line-height: 22px; orphans: 2; text-align: center; text-indent: 0px; text-transform: none; white-space: normal; widows: 2; word-spacing: 0px; -webkit-text-size-adjust: none; -webkit-text-stroke-width: 0px; background-color: rgb(255, 255, 255); display: inline !important; float: none; "> Copyright © 2011 Phoenix New Media Limited All Rights Reserved.</span></div></p></body>Page1.aspx<asp:Label ID="Label1" runat="server" Text="用®?户¡ë名?：êo"></asp:Label><asp:TextBox ID="TextBox1" runat="server" ></asp:TextBox><br /><br /><asp:Label ID="Label2" runat="server" Text="密¨¹ 码?：êo"></asp:Label>&nbsp;<asp:TextBox ID="TextBox2" runat="server" ></asp:TextBox><br /><br />&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<asp:Button ID="Button1" runat="server" Text="登Ì?录?"Width="74px" Font-Names="微¡é软¨¨ª雅?黑¨²" Font-Size="Medium" BorderColor="Lime" /><br /></div>Page2.aspx<%@ Page Title="" Language="C#" MasterPageFile="~/Master1.master" AutoEventWireup="true" CodeFile="Page2.aspx.cs" Inherits="Page2" %><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder0" Runat="Server"><p>名?字Á?随?便À?起e</p></asp:Content><asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><p>1835888****</p></asp:Content><asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"><p>3478299**@</p></asp:Content><asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server"><p>江-苏?连¢?云?港?</p></asp:Content>Page3.aspx<%@ Page Title="" Language="C#" MasterPageFile="~/Master1.master" AutoEventWireup="true" CodeFile="Page3.aspx.cs" Inherits="Page3" %><asp:Content ID="Content1" ContentPlaceHolderID="head" Runat="Server"></asp:Content><asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder0" Runat="Server">取¨?名?要©a慎¦¡Â重?</p></asp:Content><asp:Content ID="Content3" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server"><p>1835280****</p></asp:Content><asp:Content ID="Content4" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server"><p>784338**@</p></asp:Content><asp:Content ID="Content5" ContentPlaceHolderID="ContentPlaceHolder3" Runat="Server"><p>江-苏?连¢?云?港?</p></asp:Content>五．实验体会*********************************************************************** *************************************************************************** *************************************************************************** **。

控件的样式，然后在某个Web应用程序中应用到所有的页面， 以及页面上的控件，以简化样式控制。
主题和皮肤 (Theme and Skin) 是所提供的一种确保UI风格一
致性的技术, 提供了统一Css与Web控件外观属性的解决方案。
(1) 皮肤: 一种特殊的文件, 用于统一保存各种服务器控件的
外观属性的公共设置. 能让控件的外观属性的设置从零星的页 面中分离出来, 统一放到一处。
9
任务陈述
任务构思与目标：根据需求新建SelectOKShop网站的母板，并
创建网站的首页，应用该母板，结果如下图所示：
程序设计》
10
任务陈述
任务设计： 页面由4个部分组成： 页头、页尾、内容1和内容2。其中页头 和页尾是所在网站中页面的公共部分：如图所示： 网站中许多页面都包含相同的页头和页尾。页头显示的是Logo
为其命名为，同时选中"将代码放在单独的文件中"和"选择 母版页"复选框，单击【添加】按钮，弹出"选择母版页"对 话框。在该对话框中，选择一个母版页，单击【添加】按钮 ，就可以创建一个新的内容页。
程序设计》
17
创建并使用SelectOKShop电子商 务网站母版
(3)编辑内容页。打开页面，切换的设计视图，在
后用户友好网站的一个共同特征是其具有一致的站点级页面 布局，版页，此模板可应用到网站中的 页面上。
母版页为具有扩展名.master（如）的文件，它具有可以包
括静态文本、HTML元素和服务器控件的预定义布局。母版页 由特殊的@Master指令识别，该指令替换了用于普通.aspx页 的@ Page指令。
2.利用DIV+CSS进行网页布局。 (1)新建CSS文件。参照步骤1，在网站的解决方案下，右击

外观文件（.skin文件）和样式表文件（.css文件）的主 要区别和联系有： 1、可以通过外观文件使页面中的多个服务器控件具有相 同的外观，而如果用样式表来实现，则必须设置每个控 件的【CssClass】属性，才能将样式表中定义的CSS类应 用于这些控件，非常烦琐。 2、使用样式表文件虽然能够控制页面中各种元素的样式， 但是有些服务器控件的属性却无法用样式表控制，而外 观文件则可以轻松完成这些功能。 3、当控制属性比较多的服务器控件外观时，可能需要在. css文件中定义很多CSS类，如果这些CSS类之间定义不好 就有可能产生不希望的效果。而用外观文件则不会出现 这些问题。
20
7.3 从内容页中访问母版页中的内容
访问母版页中的控件的方法： 在内容页后台代码中调用FindControl方法获取对母版页 中控件的引用。 FindControl方法的原型为： public override Control FindControl (string id) 其中id表示母版页中控件的ID名称。 如何从内容页中访问母版页中的属性和控件的具体实现 方法参看例7－5。
12
7.1.6 利用主题实现页面换肤
实现换肤功能的思路： 1、定义多个主题，在不同的主题下分别定义页面外观和 样式。 2、在后台代码中，重写页面的【StyleSheetTheme】属性。 3、在主页中添加一个下拉列表，让用户选择使用哪种皮 肤。 具体实现方法参看例7－3。
13
7.2 母版页和内容页
19
7.3 从内容页中访问母版页中的内容
从内容页中访问母版页中的属性的例子： 有一个名为MasterPage1.master的母版页，其对应的类名 是MasterPage1。 在该类中声明一个TrueName属性，则可在内容页中添加代 码：<%@ MasterType virtualPath=“~/MasterPage1.m aster”%>。 然后就可以通过Master.TrueName读取或设置母版页中Tru eName属性的值。

6.1.4 CSS常用属性
CSS背景属性 CSS边框属性 CSS边距和间隙属性
清华大学出版社
2019年11月20日
第7页
3.5动态网站开发基础教程
6.2 页面布局
网页的基本布局方式 页面元素定位 表格布局 DIV和CSS布局
清华大学出版社
2019年11月20日
1. 流布局static
– 如果采用该布局，则页面中的元素将按照从左 到右、从上到下的顺序显示，各元素之间不能 重叠
– 如果不设置元素的定位方式，则默认是流式布 局
2019年11月20日
第10页
3.5动态网站开发基础教程
清华大学出版社
页面元素定位 （2/2）
2. 坐标绝对定位absolute
属性名 Border
Cellspacing
含义
表示边框宽度，如果设置为0，表示无边框，此时默认frame=void， rules=none；可以设置为大于0的值来显示边框，此时默认frame=border， rules=all
表示单元格间距（表格和tr之间的间隔）
Cellpadding 表示单元格衬距（td和单元格内容之间的间隔）
第3页
3.5动态网站开发基础教程
6.1.1 CSS的简介
清华大学出版社
CSS发展于1994年10月，是为了补救 HTML 3.2语法中的不足，但是由于当时网
络的发展的不足和浏览器的支持率较低， 直到1996年底，才正式发表了CSS 1.0规 格，也正是1996年之后，浏览器才开始正 式的支持CSS。简单的说CSS的引入就是 为了使得HTML能够更好的适应页面的美工 设计。
2019年11月20日
第15页