第09 主题、用户控件和母版页.ppt

1、1,第09讲 主题、用户控件和母版页,ASP.NET,动态网站设计与开发(ASP.NET C#版),9.1.1主题,主题(Theme)，是ASP.NET2.0提供的一种新技术，利用主题可以为一批服务器控件定义外貌。例如，可以定义一批TextBox或者Button服务器控件的底色、前景色，或者，定义GridView控件的头模板、尾模板样式等。 系统为创建主题制定了一些规则，但没有提供什么特殊的工具。这些规则是：对控件显示属性的定义必须放在以“.skin”为扩展名的皮肤文件中，而皮肤文件必须放在“主题目录”下，而主题目录又必须放在专用目录“App_Themes”的下面。 每个专用目录下可以放多个主

2、题目录；每个主题目录下面可以放多个皮肤文件。只有遵守这些规定，在皮肤文件中定义的显示属性才能够起作用。,动态网站设计与开发(ASP.NET C#版),9.1.2用户控件,用户控件(User Control)是一种自定义的组合控件，通常由系统提供的可视化控件组合而成。在用户控件中不仅可以定义显示界面，还可以编写事件处理代码。当多个网页中包括有相同部分的用户界面时，可以将这些相同的部分提取出来，做成用户控件。这一点与Dreamweaver中“库”的概念类似。 一个网页中可以放置多个用户控件。通过使用用户控件不仅可以减少编写代码的重复劳动，还可以使得多个网页的显示风格一致更为更要的是一旦需要改变这些

3、网页的显示界面时，只需要修改用户控件本身，经过编译后，所有网页中的用户控件都会自动跟随变化。 用户控件本身就相当于一个小型的网页，同样可以为它选择单文件模式或者代码分离模式。然而用户控件与网页之间还是存在着一些区别，这些区别包括： 用户控件文件的扩展名为ascx而不是aspx；. 在用户控件中不能包含、和等定义整体页面属性的HTML标签； 用户控件可以单独编译但不能单独运行。只有将用户控件嵌入到.aspx文件中时，才能随ASP.NET网页一起运行。 除此以外，用户控件与网页非常相似。,动态网站设计与开发(ASP.NET C#版),9.1.3 母版页,母版页(Master Page)的作用类似D

4、reamweaver中的“模板”。都是为网站中的各网页创建一个通用的外观。它是一个以“.master”作为扩展名的文件。在母版页中可以放入多个标准控件并编写相应的代码，同时还给各窗体页留出一处或多处的“自由空间”。 一个网站可以设置多种类型的母版页，以满足不同显示风格的需要。 母版页与用户控件之间的最大区别在于，用户控件是基于局部的界面设计，而母版页是基于全局性的界面设计。用户控件只能在某些局部上使各网页的显示取得一致，而母版页却可以在整体的外观上取得一致。用户控件通常被嵌入到母版页中一起使用。 下面，通过三个案例，分别对主题、用户控件和母版页进行讲解。,动态网站设计与开发(ASP.NET C

5、#版),9.2 “多变网页”案例,本案例通过主题技术，使得同一个网页能够轮换显示两种不同的外观效果。,动态网站设计与开发(ASP.NET C#版),9.2.1 操作步骤,1. 创建主题目录结构 2. 编写代码,动态网站设计与开发(ASP.NET C#版),1. 主题使用中的几个注意事项,1. (1) 不是所有的控件都支持使用主题和皮肤定义外貌，有的控件(如LoginView, User Control等)不能用skin文件定义。 (2) 能够定义的控件也只能定义它们的外貌属性，其他行为属性(如AutoPostBack属性等)不能在这里定义。 (3) 在同一个主题目录下，不管定义了多少个皮肤文件

6、，系统都会自动将它们合并成为一个文件。 (4) 项目中凡需要使用主题的网页，有两种设置方式： 一种是通过在程序中对Page.Theme进行赋值进行动态更改主题，需要注意的是，只能在Page_PreInit事件中对Page.Theme进行赋值。 另一种是在设计中，单击网页空白处，选择DOCUMENT对应的【属性】窗口，为Theme属性下拉选择对应的主题。对应的源代码是在网页首行定义语句中增加“Theme=主题目录”的属性。例如：。 (5) 在设计阶段，看不出皮肤文件中定义的作用，只有当程序运行时，在浏览器中才能够看到控件外貌的变化。,动态网站设计与开发(ASP.NET C#版),2. 同一控件多

7、种定义的方法,有时需要对同一种控件定义多种显示风格，此时可以在皮肤文件中，在控件显示的定义中用SkinID属性来区别。例如，若在主题Theme1里的皮肤文件TextBox.skin中，对TextBox的显示定义了三种显示风格： 其中第一个定义为默认的定义，中间不包括SkinID。该定义将作用于所有不注明SkinID的TextBox控件。第二和第三个定义中都包括SkinID属性，这些定义只能作用于SkinID相同的TextBox控件。,动态网站设计与开发(ASP.NET C#版),3. 将主题文件应用于整个网站,为了将主题文件应用于整个网站，可以在根目录下的web.config中进行定义。例如，

8、要将Theme1主题目录应用于网站所有页面，在web.config文件中定义如下： 这样就不必在每个网页中分别定义了。,动态网站设计与开发(ASP.NET C#版),9.3 “网站版权”案例,本案例由一个首页和一个用户控件组成，用户控件内容是“版权所有 20082010 ，建议使用800*600分辨率观看(换行)本站技术支持 微软学生中心”，单击链接可转到相应网站。首页原只有文字“我是首页中的内容”，经调用用户控件，首页最终显示效果如图所示。,动态网站设计与开发(ASP.NET C#版),9.2.1 操作步骤,(1) 创建一个ASP.NET网站。 (2) 右击网站中目录，选择【添加新项】，在打

9、开的对话框中选择【Web用户控件】，将默认名称WebUserControl.ascx修改为copyright.ascx，再单击【添加】按钮。 (3) 系统自动创建用户控件copyright.ascx，并在主工作区打开。 (4) 切换到用户控件copyright.ascxr的设计视图，从【工具箱】拖入一个Label控件。通过【属性】窗口设置Label控件的Text属性为“版权所有 20082010 ，建议使用800*600分辨率观看本站”，并设置Width属性为500px；再从【工具箱】拖入一个HyperLink控件，设置Width属性为300px。 (5) 双击该页面空白处，在代码视图的页载入

10、事件protected void Page_Load(object sender, EventArgs e)一对儿之间输入下面的程序代码： HyperLink1.Text = 技术支持 微软学生中心; HyperLink1.NavigateUrl = (6) 打开Default.aspx页，切换到设计视图，输入文字“我是首页中的内容”，再从【解决方案资源管理器】中将用户控件文件拖到下一行的位置。,动态网站设计与开发(ASP.NET C#版),1. 使用用户控件,用户控件只能在同一应用程序的网页中共享。就是说，应用项目的多个网页中可以使用相同的用户控件，而每一个网页可以使用多种不同的用户控件。如

11、果一个网页中需要使用多个用户控件时，最好先进行布局，然后再将用户控件分别拖到相应的位置。 在设计阶段，有的用户控件并不会充分展开，而是被压缩成小长方形，此时它只起占位的作用。程序运行时才会自动展开。 用户控件与标准aspx网页非常类似，查看用户控件copyright.ascx的【源】视图，代码如下： HyperLink 可以看到，代码中没有标准aspx网页那么多的结构标签，如、等，内容直接就放在的下面就可以了。 另外，用户控件也支持各种事件程序的编写。,动态网站设计与开发(ASP.NET C#版),2. 代码分析, 无标题页 我是首页中的内容 ,动态网站设计与开发(ASP.NET C#版),9.4 “学习资源网页”案例,本案例制作的网页是由两个网页合成而成，一个是共用的母板页(名为MasterPage.master，包含上方的草原图片和左侧登录框)，另一个是具体的内容页(名为article.aspx，包含中间的工具图片和超链接文字)，浏览时输入的是内容页的网址(article.aspx)，显示则为合成页的效果(MasterPage.master + article.aspx)。,动态网站设计与开发(ASP.NET