13
内容目录
样式： CSS
主题：Skin
母板：Master 站点导航：SiteMap
主题
在Web应用程序中，通常所有的页面都有统一的外 观和操作方式。 3.5通过应用主题，来提供统 一的外观。
主题包括外观文件、CSS文件和图片文件等。
15
主题概述
主题是CSS的扩展。 主题包含外观文件、CSS文件、图片文件及其它资源
注意：控件外观样式只能对外貌属性进行定义 。
20
默认外观和已命名外观
利用属性SkinID可以为同种类型控件定义多种外观。
默认外观：没有SkinID的外观。
<asp:Label runat="server" ForeColor="#FF0000" Font-Size="XSmall"/>
23
添加图片文件到主题
通常在App_Themes文件夹中创建Images文件夹，再添 加合适的图片文件到Images文件夹中。 要使用Images文件夹中的图片文件，可以通过控件的 相关链接图片文件的Url属性进行访问。
24
使用主题
自己定义或从网上下载主题后，就可以在Web应用程 序中使用主题了。
<body> <p> 基于元素的样式</p> <p class="classTest"> 基于类的样式 </p> <div id="divTest"> 基于ID的样式</div>
</body> </html>
பைடு நூலகம்12
创建外部样式表
外部样式表中的样式规则常应用于整个网站，这些 规则包含于独立的.css文件中。
（至少应包含外观文件）。 主题在存储时与一个主题文件夹对应。
16
主题概述（续）
主题分为全局主题和应用程序主题 全局主题：应用于服务器中的所有Web应用程序，
存储于 C:\WINDOWS\\Framework\v2.0.50727 \ClientFiles\Themes文件夹下（假设操作系 统安装于C盘,仅对该版本）。 应用程序主题：应用于单个Web应用程序。存储 于Web应用程序的App_Themes文件夹中。每个 App_Themes文件夹中的子文件夹都对应一个应用 程序主题。
样式 主题 母板和站点导航
内容目录
样式： CSS 主题：Skin 母板：Master 站点导航：SiteMap
内容目录
样式： CSS
主题：Skin 母板：Master 站点导航：SiteMap
CSS文件和CSS常识
XHTML能限定浏览器中网页元素的显示格式，但可 控性不强，如统一网站风格需要逐个网页去修改。 CSS（Cascading Style Sheet）级联样式表是应用于 网页中元素的样式规则，现已为各类浏览器所接受。 在XHTML基础上，CSS提供了精确定位和重新定义 XHTML元素属性的功能。一个CSS样式文件可以作 用到多个XHTML文件，这样，当要同时改变多个 XHTML网页风格时，只要修改CSS样式文件即可。
</configuration>
28
禁用主题
可以设置属性EnableTheming值为false来禁用主题实现。 例如：
页面禁用主题：
<%@ Page EnableTheming="false" %>
控件禁用主题：
<asp:Calendar id="Calendar1" runat="server" EnableTheming="false" />
页面布局技术
页面布局 技术
Table DIV + CSS
简单实用、条理分明、格局清晰严谨、适合信息量大的页 面
区域结构
页面精美、适合信息量较少的页面
1.Main Navigation 导航条， 具有按钮特效。 Width: 760px
Height: 50px 2.Header 网站头部图标，包 含网站的logo和站名。 Width:
760px Height: 150px 3.Content 网站的主要内容。
17
自定义主题
自定义主题就是建立主题文件夹，然后添加外观文件 （.skin）、样式文件（.css）、图片文件到主题文件夹 中。
主题和外观文件 添加CSS到主题 添加图片文件到主题
注意：主题文件夹包含在App_Themes中
18
主题和外观文件
一个主题必须包含外观文件。 创建主题：右击项目，“添加文件夹”→“主 题”，在网站根文件下自动添加文件夹App_Themes， 并在该文件夹下建立主题文件夹（可重命名如Red） 添加外观文件：右击主题文件夹Red→“添加新 项”→“外观文件”（可重命名如Red.skin ）
<html xmlns="/1999/xhtml"> <head>
<title>创建特定页的CSS样式</title> <style type="text/css">
p { color: #FF0000; } .classTest { color: #0000FF; } #divTest { color: #808080; } </style> </head>
表示Label1控件使用LabelBlue外观 Label2控件使用默认外观。
22
添加CSS到主题
通过在主题中添加CSS文件来设置HTML或HTML服 务器控件的样式。 操作方式：
右击主题文件夹Red→“添加新项”→“样式表”，重命名 为Red.css。然后在Red.css中添加HTML元素样式。
4
定义CSS样式
每个CSS样式有两个主要部分：选择器（如h1）和 声明（如color:blue）。声明由一个属性（color）及 其值（blue）组成。
根据定义的不同用途，CSS样式包括基于元素的样 式、基于类的样式和基于ID的样式。
5
基于元素的样式
基于元素的样式将重新定义指定XHTML元素的属性， 其选择器即为XHTML元素名，如对所有段落（p标 记中的内容）创建左右均为25象素的边距，其样式 规则为： p { margin-left: 25px; margin-right: 25px; }
</configuration>
27
网站部分页应用主题
1. 可以将这些页与它们自己的web.config文件放在一个文 件夹中。
2. 在根web.config文件中创建一个<location>元素以指定文 件夹。为子文件夹sub1设置了主题：
<configuration> <location path="sub1"> <system.web> <pages theme="ThemeName(主题名)" /> </system.web> </location>
6
基于类的样式
同一个基于类的样式可以应用于不同的XHTML元素 或某个XHTML元素的子集（如应用于部分段落而不 是全部段落）。定义时，要在选择器名前加“.”， 如对类名intro定义为红色的样式规则为： .intro { color: #ff0000; }
在页面中，用class="类名"的方法调用，如： <p class="intro">
21
使用外观
当为同种类型控件定义多种外观后，在网页中使 用主题时应通过控件的属性SkinID进行区分。如代 码：
<asp:Label ID="Lable1" SkinID="LabelBlue" Runat="Server" />
<asp:Label ID="Lable2" Runat="Server" />
19
Skin定义的例子（ Green.skin）
<asp:Label runat="server" ForeColor="Green" /> <asp:TextBox runat="server" ForeColor="Green" /> <asp:Button runat="server" ForeColor="Green" />
可以在单个网页中应用主题。 可以在网站中应用主题。 可以在网站部分网页中应用主题。 可以部分禁用主题 。
25
单个网页应用主题
<%@ Page Theme="ThemeName" %> <%@ Page StylesheetTheme="ThemeName" %> 注意： （1）属性StylesheetTheme表示主题为本地控件的从
Width: 480px Height:
Changes depending on
content 4.Sidebar 边框，一些附加信 息。 Width: 280px Height:
Changes depending on 5.Footer 网站底栏，包含版权 信息等。 Width: 760px
Height: 66px
属设置。也就是说，如果在页面上为某个控件设 置了本地属性，则主题中与控件本地属性相同的 属性将不起作用。 （2）属性Theme本地属性会被覆盖（主题起作用， 本地属性不起作用）。
