第09讲 主题、用户控件和母版页
合集下载
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
动态网站设计与开发( 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控件。
动态网站设计与开发( C#版)
知 识 点
1. 使用用户控件
用户控件只能在同一应用程序的网页中共享。就是说，应用项目的多个网页中可以使用 相同的用户控件，而每一个网页可以使用多种不同的用户控件。如果一个网页中需要使 用多个用户控件时，最好先进行布局，然后再将用户控件分别拖到相应的位置。 在设计阶段，有的用户控件并不会充分展开，而是被压缩成小长方形，此时它只起占位 的作用。程序运行时才会自动展开。 用户控件与标准aspx网页非常类似，查看用户控件copyright.ascx的【源】视图，代码 如下： <%@ Control Language="C#" AutoEventWireup="true" CodeFile="copyright.ascx.cs" Inherits="copyright" %> <asp:Label ID="Label1" runat="server" Text="版权所有 2008~2010 ，建议使用 800*600分辨率观看本站" Width="500px"></asp:Label><br /> <asp:HyperLink ID="HyperLink1" runat="server" Width="300px">HyperLink</asp:HyperLink> 可以看到，代码中没有标准aspx网页那么多的结构标签，如<html>、<head>、<body>、 <form>等，内容直接就放在<%@ Control Language="C#" AutoEventWireup="true" CodeFile="copyright.ascx.cs" Inherits="copyright" %>的下面就可以了。 另外，用户控件也支持各种事件程序的编写。
动态网站设计与开发( C#版)
9.1.3 母版页
母版页(Master Page)的作用类似Dreamweaver中的 “模板”。都是为网站中的各网页创建一个通用的外观。 它是一个以“.master”作为扩展名的文件。在母版页中 可以放入多个标准控件并编写相应的代码，同时还给各 窗体页留出一处或多处的“自由空间”。 一个网站可以设置多种类型的母版页，以满足不同显示 风格的需要。 母版页与用户控件之间的最大区别在于，用户控件是基 于局部的界面设计，而母版页是基于全局性的界面设计。 用户控件只能在某些局部上使各网页的显示取得一致， 而母版页却可以在整体的外观上取得一致。用户控件通 常被嵌入到母版页中一起使用。 下面，通过三个案例，分别对主题、用户控件和母版页 进行讲解。
1.
主题使用中的几个注意事项
1. (1) 不是所有的控件都支持使用主题和皮肤定义外貌，有的控件(如 LoginView, User Control等)不能用skin文件定义。 (2) 能够定义的控件也只能定义它们的外貌属性，其他行为属性(如 AutoPostBack属性等)不能在这里定义。 (3) 在同一个主题目录下，不管定义了多少个皮肤文件，系统都会自 动将它们合并成为一个文件。 (4) 项目中凡需要使用主题的网页，有两种设置方式： 一种是通过在程序中对Page.Theme进行赋值进行动态更改主题，需 要注意的是，只能在Page_PreInit事件中对Page.Theme进行赋值。 另一种是在设计中，单击网页空白处，选择DOCUMENT对应的【属 性】窗口，为Theme属性下拉选择对应的主题。对应的源代码是在网 页首行定义语句中增加“Theme="主题目录"”的属性。例如：<%@ Page Theme="Themes1"%>。 (5) 在设计阶段，看不出皮肤文件中定义的作用，只有当程序运行时， 在浏览器中才能够看到控件外貌的变化。
动态网站设计与开发( C#版)
9.2.1 操作步骤 (1)发( C#版)
第09讲 主题、用户控件和母版页
1
9.1.1主题
主题(Theme)，是2.0提供的一种新技术，利用 主题可以为一批服务器控件定义外貌。例如，可以定义一 批TextBox或者Button服务器控件的底色、前景色，或者， 定义GridView控件的头模板、尾模板样式等。 系统为创建主题制定了一些规则，但没有提供什么特殊的 工具。这些规则是：对控件显示属性的定义必须放在以 “.skin”为扩展名的皮肤文件中，而皮肤文件必须放在 “主题目录”下，而主题目录又必须放在专用目录 “App_Themes”的下面。 每个专用目录下可以放多个主题目录；每个主题目录下面 可以放多个皮肤文件。只有遵守这些规定，在皮肤文件中 定义的显示属性才能够起作用。
动态网站设计与开发( C#版)
知 识 点 <%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs"
2. 代码分析
Inherits="_Default" %> <%@ Register Src="copyright.ascx" TagName="copyright" TagPrefix="uc1" %> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="/1999/xhtml" > <head runat="server"> <title>无标题页</title> </head> <body> <form id="form1" runat="server"> <div> 我是首页中的内容<br /> <br /> <uc1:copyright ID="Copyright1" runat="server" /> </div> </form> </body> </html>
动态网站设计与开发( C#版)
9.1.2用户控件
用户控件(User Control)是一种自定义的组合控件，通常由系统提供的可 视化控件组合而成。在用户控件中不仅可以定义显示界面，还可以编写事 件处理代码。当多个网页中包括有相同部分的用户界面时，可以将这些相 同的部分提取出来，做成用户控件。这一点与Dreamweaver中“库”的概 念类似。 一个网页中可以放置多个用户控件。通过使用用户控件不仅可以减少编写 代码的重复劳动，还可以使得多个网页的显示风格一致．更为更要的 是．一旦需要改变这些网页的显示界面时，只需要修改用户控件本身，经 过编译后，所有网页中的用户控件都会自动跟随变化。 用户控件本身就相当于一个小型的网页，同样可以为它选择单文件模式或 者代码分离模式。然而用户控件与网页之间还是存在着一些区别，这些区 别包括： · 用户控件文件的扩展名为ascx而不是aspx；. · 在用户控件中不能包含<HTML>、<BODY>和<FORM>等定义整体页面属 性的HTML标签； · 用户控件可以单独编译．但不能单独运行。只有将用户控件嵌入到.aspx 文件中时，才能随网页一起运行。 除此以外，用户控件与网页非常相似。
动态网站设计与开发( C#版)
9.2 “多变网页”案例
本案例通过主题技术，使得同一个网页能够 轮换显示两种不同的外观效果。
动态网站设计与开发( C#版)
9.2.1 操作步骤
1. 创建主题目录结构
2. 编写代码
动态网站设计与开发( C#版)
知 识 点
动态网站设计与开发( C#版)
知 识 点
3. 将主题文件应用于整个网站
为了将主题文件应用于整个网站，可以在根目录下的 web.config中进行定义。例如，要将Theme1主题目录应 用于网站所有页面，在web.config文件中定义如下： <configuration> <system.web> <pages Theme=" Theme1" /> </system.web> </configuration> 这样就不必在每个网页中分别定义了。
动态网站设计与开发( C#版)
9.2.1 操作步骤
(1) 创建一个网站。 (2) 右击网站中目录，选择【添加新项】，在打开的对话框中选择 【Web用户控件】，将默认名称WebUserControl.ascx修改为 copyright.ascx，再单击【添加】按钮。 (3) 系统自动创建用户控件copyright.ascx，并在主工作区打开。 (4) 切换到用户控件copyright.ascxr的设计视图，从【工具箱】拖入一 个Label控件。通过【属性】窗口设置Label控件的Text属性为“版权所 有 2008~2010 ，建议使用800*600分辨率观看本站”，并设置Width属 性为500px；再从【工具箱】拖入一个HyperLink控件，设置Width属性 为300px。 (5) 双击该页面空白处，在代码视图的页载入事件protected void Page_Load(object sender, EventArgs e)一对儿{}之间输入下面的程序 代码： HyperLink1.Text = "技术支持 微软学生中心"; HyperLink1.NavigateUrl = "/"; (6) 打开Default.aspx页，切换到设计视图，输入文字“我是首页中的内 容”，再从【解决方案资源管理器】中将用户控件文件拖到下一行的位 置。