第10章 主题、母版、用户控件和Web部件.ppt

第10章 主题、母版、用户控件和Web部件 本章要点： 了解主题并掌握建立和使用主题的方法理解母版页并能建立母版页 掌握利用母版页创建一致网页布局的方法 掌握建立和使用用户控件的方法 熟悉利用Web部件实现个性化用户界面的方法 目录 10.1 主题 10.1.1 主题概述 10.1.2 自定义主题 10.1.3 使用主题 10.2 母版页 10.2.1 母版页概述 10.2.2 创建母版页 10.2.3 创建内容页 10.3 用户控件 10.3.1 用户控件概述 10.3.2 创建用户控件 10.3.3 使用用户控件 10.4 Web部件 10.4.1 Web部件概述 10.4.2 使用Web部件 10.4.3 显示模式 10.5 小结 10.1 主题 在Web应用程序中，通常所有的页面都有统一的外观和操作方式。ASP.NET 3.5通过应用主题，来提供统一的外观。 主题包括外观文件、CSS文件和图片文件等。 10.1.1 主题概述 主题是CSS的扩展。 主题包含外观文件、CSS文件、图片文件及其它资源（至少应包含外观文件）。 主题在存储时与一个主题文件夹对应。 10.1.1 主题概述（续） 主题分为全局主题和应用程序主题 全局主题：应用于服务器中的所有Web应用程序，存储于C:\WINDOWS\Microsoft.NET\Framework\v2.0.50727\ASP.NETClientFiles\Themes文件夹下（假设操作系统安装于C盘）。 应用程序主题：应用于单个Web应用程序。存储于Web应用程序的App_Themes文件夹中。每个App_Themes文件夹中的子文件夹都对应一个应用程序主题。 10.1.2 自定义主题 自定义主题就是建立主题文件夹，然后添加外观文件（.skin）、样式文件（.css）、图片文件到主题文件夹中。 主题和外观文件 添加CSS到主题 添加图片文件到主题 注意：主题文件夹包含在App_Themes中 主题和外观文件 一个主题必须包含外观文件。 创建主题：右击项目，“添加ASP.NET文件夹”→“主题”，在网站根文件下自动添加文件夹App_Themes，并在该文件夹下建立主题文件夹（可重命名如Red） 添加外观文件：右击主题文件夹Red→“添加新项”→“外观文件”（可重命名如Red.skin ） 默认的样式模板（ Red.skin） %-- 默认的外观模板。以下外观仅作为示例提供。 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 / --% 注意：控件外观样式只能对外貌属性进行定义 。 默认外观和已命名外观 利用属性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/ 使用外观 当为同种类型控件定义多种外观后，在网页中使用主题时应通过控件的属性SkinID进行区分。如代码： asp:Label ID=Lable1 SkinID=LabelBlue Runat=Server / asp:Label ID=Lable2 Runat=Server / 表示Label1控件使用LabelBlue外观 Label2控件使用默认外观。 添加CSS到主题 通过在主题中添加CSS文件来设置HTML或HTML服务器控件的样式。 操作方式： 右击主题文件夹Red→“添加新项”→“样式表”，重命名为Red.css。然后在Red.css中添加HTML元素样式。 添加图片文件到主题 通常在App_Themes文件夹中创建Images文件夹，再添加合适的图片文件到Images文件