第6章 主题、母版、用户控件和Web部件
第09讲 主题、用户控件和母版页
动态网站设计与开发( C#版)
9.3 “网站版权”案例
本案例由一个首页和一个用户控件组成，用 户控件内容是“版权所有 2008~2010 ，建 议使用800*600分辨率观看(换行)本站技术支 持 微软学生中心”，单击链接可转到相应网 站。首页原只有文字“我是首页中的内容”， 经调用用户控件，首页最终显示效果如图所 示。
动态网站设计与开发( C#版)
9.4 “学习资源网页”案例
本案例制作的网页是由两个网页合成而成， 一个是共用的母板页(名为 MasterPage.master，包含上方的草原图片 和左侧登录框)，另一个是具体的内容页(名 为article.aspx，包含中间的工具图片和超链 接文字)，浏览时输入的是内容页的网址 (article.aspx)，显示则为合成页的效果 (MasterPage.master + article.aspx)。
动态网站设计与开发( C#版)
知 识 点
2.
同一控件多种定义的方法
有时需要对同一种控件定义多种显示风格，此时可以在皮肤文件中， 在控件显示的定义中用SkinID属性来区别。例如，若在主题Theme1 里的皮肤文件TextBox.skin中，对TextBox的显示定义了三种显示风 格： <asp:TextBox BackColor="Green" Runat="Server"/> <asp:TextBox SkinID="B1ueTextBox" BackColor="Blue" Runat="Server"/> <asp:TextBox SkinID="RedTextBox" BackColor="Red" Runat="Server"/> 其中第一个定义为默认的定义，中间不包括SkinID。该定义将作用于 所有不注明SkinID的TextBox控件。第二和第三个定义中都包括 SkinID属性，这些定义只能作用于SkinID相同的TextBox控件。
第五章 主题和母页
第五章 母版页
2．内容页 内容页与母版页关系紧密，内容页主要包
含页面中的非公共内容。通过创建各个内容页 来定义母版页的占位符控件的内容，这些内容 页为绑定到特定母版页的页（.aspx 文件以及可选的代码隐藏文件）。
第五章 母版页
主题功能：为网站提供统一的风格，将CSS、服 务器控件的外观以及各种网站资源的管理有机 地组织在一起，为开发者控制统一的页面样式 提供了更方便的手段。
第五章 主题
皮肤文件（.Skin） ：
皮肤文件也称为外观文件，是主题的核心内 容，用于定义网页中各种服务器控件（如Button、 TextBox或Lable控件等）的外观属性。由一组控 件的特定主题标记组成，其扩展名为.skin文件。
第五章 主题
在Web应用程序中，主题文件必须存储 在根目录的App_Themes文件夹下（除 全局主题之外），开发人员可以手动或 者使用Visual Studio 2010在网站的根 目录下创建该文件夹。
第五章 主题
在App_Themes文件夹中包括“主题1”和“主 题2”两个文件夹。每个主题文件夹中都可以包含 外观文件、CSS文件和图像文件等。通常 APP_Themes文件夹中只存储主题文件及与主题 有关的文件，尽量不存储其他类型文件。
第五章 母版页
<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MainMaster.master.cs" Inherits="MainMaster" %>
AutoEventWireup 属性被设置为 true（或者如果缺 少此属性，因为它默认为 true），该页框架将自动调 用页事件，即 Page_Init 和 Page_Load 方法
用户控件和母版页- 福建江夏学院精品课程建设网站.
2.4 母版页工作原理
2.5 母版页的优点
使用母版页可以集中处理页的通用功能，以便可以只 在一个位置上进行更新。 使用母版页可以方便地创建一组控件和代码，并将结 果应用于一组页。例如，可以在母版页上使用控件来 创建一个应用于所有页的菜单。 通过允许控制占位符控件的呈现方式，母版页使您可 以在细节上控制最终页的布局。 母版页提供一个对象模型，使用该对象模型可以从各 个内容页自定义母版页。
WEB项目开发
用户控件和母版页
1.用户控件
除 HTML 和 Web 服务器控件之外，您还可以轻松创 建自己的自定义的可重用控件，所采用的方法与您学 习的用来开发 网页的方法相同。这些控件 称作用户控件。 用户控件。用户控件是能够在其中放置标记和 Web 服务器控件的容器。然后，可以将用户控件作为一个 单元对待，为其定义属性和方法。 自定义控件。自定义控件是编写的一个类，此类从 Control 或 WebControl 派生。
除会在所有页上显示的静态文本和控件外，母 版页还包括一个或多个 ContentPlaceHolder 控件。这些占位符控件定义可替换内容出现的 区域。接着在内容页中定义可替换内容。定义 ContentPlaceHolder 控件后，母版页可能看起 来类似于下面这样。
2.3内容页
通过创建各个内容页来定义母版页的占位符控 件的内容，这些内容页为绑定到特定母版页的 页（.aspx 文件以及可选的代码隐 藏文件）。通过包含指向要使用的母版页的 MasterPageFile 属性，在内容页的 @ Page 指令中建立绑定。
1.3 用户控件演练
创建用户控件，并将 服务器控件添 加到此用户控件。 在用户控件中创建属性和方法。 将用户控件添加到主页面。 向主页面添加代码以处理用户控件。
《.Net Web开发》考查方案A
《.Net Web开发》能力测试实施方案A2013——2014学年第二学期系别：电子与信息工程系课程名称：《.Net Web开发》考查对象：2012级计算机应用技术专业学时：64（其中，理论学时：32 实践学时：32）学分：4分考查方案：一、考查目的：通过本课程的学习，掌握IIS网站配置、Visual Studio 2010开发环境、与 结合的C#基础、常用服务器控件、用户控件、验证控件、状态管理、数据源控件和LINQ访问数据库、数据绑定控件、用户和角色管理、主题、母版、Web部件、网站导航、 AJAX、Web服务、WCF服务、文件处理等内容。
学完本课程后，学生能运用编写Web 应用程序，例如信息发布系统、论坛、留言板、聊天室、博客等。
通过本课程的学习，使学生掌握基于的Web应用程序开发所需要的知识、技能和素质要求。
掌握利用与SQL Server建立动态网站的技术，达到能独立或合作完成中小型网站的建设与开发目的，为学生在未来网络化信息化社会里更好地从事Web应用程序开发打下良好的基础。
技能目标：1.了解动态网站的基本概念。
2.掌握站点的创建与管理方法。
3.掌握插入HTML服务器控件和Web标准控件的方法。
4.掌握验证控件的用法。
5.掌握主题、CSS、母板的应用。
5.掌握服务器对象的使用。
6.掌握的应用。
7．掌握网站地图的使用。
8．掌握图片和文件上传的操作。
9．掌握网站的配置与发布。
素质目标：1.培养学生认真负责的工作态度和严谨细致的工作作风；2.培养学生的自学能力及提出问题、分析问题和解决问题的能力；3.培养学生团队合作开发Web应用程序的能力。
4.注重学生协调能力、人际沟通能力的培养。
5.注重学生自律性、客户服务意识、团队协作能力的培养。
二、考查的内容和方案：考查内容：网站运行环境与开发环境的搭建；2.HTML控制和WEB服务标准控制的使用；内置对象的使用；4.主题、CSS和母版的使用；5.网站地图和导航控件的使用；数据库访问；7.图片和文件的操作；8.网站配置和发布三、考查方案及评分标准：按理论够用，重在实践的要求，特制定如下能力考核实施方案。
主题和母版页
ForeColor="Red" />
• 同一类型控件的外观分为默认外观和命名外观两种： • （1）默认外观：不设置控件的SkinID属性，它自 动应用于同一类型的所有控件。 • （2）命名外观：通过设置控件的SkinID属性，将 命名外观应用于服务器控件，解决同一控件有多种 属性设置的问题。在皮肤文件中: • <asp:Button runat="server" SkinID="buttonskin1" BackColor="gray" ForeColor="Red" /> • <asp:Button runat="server" SkinID="buttonskin2" BackColor="white" ForeColor="Red" />
1. CSS( Cascading Style Sheet层叠样式表单 )文件 将CSS文件放到主题文件夹中便作为主题的一部分。 主题中的CSS文件和非主题中的CSS文件没有本质的区别， 只是主题CSS文件自动作为主题的一部分，在网页中只引用
主题即可，不必再单独引用CSS文件。
(单独引用CSS文件:<head>
Font-Bold="True" Font-Size="Small" ForeColor="Fuchsia" />
<asp:Button runat="server" Font-Size="Small" FontBold="True"
ForeColor="Red" />
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编程技术-布局与导航
制作人：潘冰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被选中项的索引号被臵于（）属性中。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
16
可以设置属性EnableTheming值为false来禁 用主题实现。例如：
页面禁用主题：
<%@ Page EnableTheming="false" %>
控件禁用主题：
<asp:Calendar id="Calendar1" runat="server" EnableTheming="false" />
› 使用母版页可以集中处理网页的通用功能，若要修改所有网页的
通用功能，只需要修改母版页即可。 › 使用母版页可以方便地创建一组控件和代码，并应用于一组网页。 › 通过允许控制占位符控件的呈现方式，母版页可以在细节上控制 最终页的布局。
20
母版页由特殊的@ Master指令识别，该指令替 换了用于普通.aspx页的@ Page指令。 母版页包含网页的所有顶级XHTML元素，如 <html>、<head>和<form>。
14
修改应用程序的web.config文件，可将主题 应用于整个网站。例： <configuration> <system.web> <pages theme="ThemeName(主题名)" /> </system.web> </configuration>
15
1.
可以将这些页与它们自己的web.config文件放在一个 文件夹中。 2. 在根web.config文件中创建一个<location>元素以指 定文件夹。为子文件夹sub1设置了主题： <configuration> <location path="sub1"> <system.web> <pages theme="ThemeName(主题名)" /> </system.web> </location> </configuration>
9
当为同种类型控件定义多种外观后，在网页中使 用主题时应通过控件的属性SkinID进行区分。如 代码：
› <asp:Label ID="Lable1" SkinID="LabelBlue"
Runat="Server" /> › <asp:Label ID="Lable2" Runat="Server" />
5
自定义主题就是建立主题文件夹，然后添加 外观文件（.skin）、样式文件（.css）、图片 文件到主题文件夹中。
› 主题和外观文件 › 添加CSS到主题 › 添加图片文件到主题
注意：主题文件夹包含在App_Themes中
6
一个主题必须包含外观文件。 创建主题：右击项目，“添加文件 夹”→“主题”，在网站根文件下自动添加 文件夹App_Themes，并在该文件夹下建立 主题文件夹（可重命名如Red） 添加外观文件：右击主题文件夹Red→“添加 新项”→“外观文件”（可重命名如 Red.skin ）
25
内容页仅包含要与母版页合并的内容，可 以在其中添加用户请求该页面时要显示的 文本和控件。
26
本实例将创建基于母版页 MasterPage.master的内容页。 源程序：ContentPage.aspx 程序说明：页面包含一个@ Page指令，此 指令的属性MasterPageFile表示当前页将 与根文件夹下的“MasterPage.master” 母版页合并。
› › › ›
通常可以在母版页上建立一个HTML表用于布局。 将一个<img>元素用于公司徽标。 使用服务器控件创建站点的标准导航。 将静态文本用于版权声明。
母版页可以包含一个或多个可替换内容的占位符 控件ContentPlaceHolder。 注意：母版页文件的扩展名是.master
21
母版页：MasterPageSample.master 内容页：MasterPageSample.aspx
27
创建用பைடு நூலகம்控件的原因：
› 实现内置 Web服务器控件未提供的功能。 › 提取多个网页中相同的用户界面来统一网页显示风格。
创建用户控件的方法：
› 一种方法是创建用户控件，然后将用户控件作为一个单元对待，
为其定义属性和方法。 › 另一种方法是自定义控件，就是编写一个类，此类从Control或 WebControl派生。
3
主题是CSS的扩展。 主题包含外观文件、CSS文件、图片文件及其 它资源（至少应包含外观文件）。 主题在存储时与一个主题文件夹对应。
4
主题分为全局主题和应用程序主题 全局主题：应用于服务器中的所有Web应用程序， 存储于 C:\WINDOWS\\Framework\v 2.0.50727\ClientFiles\Themes文件夹 下（假设操作系统安装于C盘）。 应用程序主题：应用于单个Web应用程序。存储 于Web应用程序的App_Themes文件夹中。每 个App_Themes文件夹中的子文件夹都对应一个 应用程序主题。
（2）在网页的<form>元素内部声明用户控件元 素。如：
<uc1:SearchUserControl ID="SearchUserControl1" runat="server" />
注意：在网页的设计模式下，可以直接将用户 控件文件从解决方案资源管理器窗口中拖到页面上， 即在页面上添加了该用户控件。
33
（1）将其包含在网页中。
› 实现方法：在包含用户控件的网页中，创建
一个@ Register指令，如：
<%@ Register Src="SearchUserControl.ascx" TagName="SearchUserControl" TagPrefix="uc1" %>
8
利用属性SkinID可以为同种类型控件定义多种 外观。
› 默认外观：没有SkinID的外观。 <asp:Label runat="server" ForeColor="#FF0000" Font-Size="X-Small"/> › 已命名外观：有SkinID的外观。 <asp:Label runat="server" ForeColor="#00FF00" Font-Size="X-Small" SkinID="LabelGreen"/> <asp:Label runat="server" ForeColor="#0000FF" Font-Size="X-Small" SkinID="LabelBlue"/>
32
将代码隐藏网页转换为用户控件
（1）重命名.aspx文件扩展名为.ascx。 （2）重命名代码隐藏文件使其文件扩展名为.ascx.cs。 （3）打开代码隐藏文件并将该文件继承的类从Page更改为 UserControl。 （4）在.aspx文件中，移除<html>、<body>和<form>元素；将 @ Page指令更改为@ Control指令；移除@ Control指令中 除Language、AutoEventWireup（如果存在）、CodeFile 和Inherits之外的所有属性；在@ Control指令中，将 CodeFile属性值更改为指向重命名后的代码隐藏文件名。
22
23
创建母版页的方式和创建Web窗体类似。 操作步骤： 在解决方案资源管理器中，右击网站的名称 →“添加新项”，选择“母版页”，重命名 母版页名称。 注意：“选择母版页”复选框表示可以将其它 母版页嵌入到当前的母版页中。
24
本实例将创建一个母版页 MasterPage.master，该母版页采用常见 的“上中下”网页布局。 源程序：MasterPage.master
表示Label1控件使用LabelBlue外观 Label2控件使用默认外观。
10
通过在主题中添加CSS文件来设置HTML或HTML 服务器控件的样式。 操作方式：
右击主题文件夹Red→“添加新项”→“样式 表”，重命名为Red.css。然后在Red.css中添加 HTML元素样式。
11
通常在App_Themes文件夹中创建Images文 件夹，再添加合适的图片文件到Images文件 夹中。 要使用Images文件夹中的图片文件，可以通 Images 过控件的相关链接图片文件的Url属性进行访 问。
7
<%-默认的外观模板。以下外观仅作为示例提供。 1. 命名的控件外观。SkinId 的定义应唯一，因为在同一主题中不允许 一个控件类型有重复的 SkinId。 <asp:GridView runat="server" SkinId="gridviewSkin" BackColor="White" > <AlternatingRowStyle BackColor="Blue" /> </asp:GridView> 2. 默认外观。未定义 SkinId。在同一主题中每个控件类型只允许有一 个默认的控件外观。 <asp:Image runat="server" ImageUrl="~/images/image1.jpg" /> --%> 注意：控件外观样式只能对外貌属性进行定义 。