样式、主题和母版页.ppt

1、第10章 样式、主题和母版页,本章重点,主题的创建 样式的属性 母版页和内容页,10.1 主题,10.1.1 概述 主题机制使得开发人员可以很轻松地对页面的设置实现更多的选择。它在处理主题的设置时提供了清晰的目录结构，资源文件的层级关系非常清晰。在易于查找和管理的同时，提供了良好的扩展性。因此使用主题可以提高设计和维护网站的效率。 主题是有关页面和控件的外观属性设置的集合，由一组元素组成，包括外观文件、级联样式表（CSS）、图像和其他资源。,10.1 主题,10.1.1 概述 主题至少包含外观文件（.skin文件），主题是在网站或Web服务器上的特殊目录中定义的，一般把这个特殊目录称为专用目录

2、，这个专用目录的名字为App_Themes。 App_Themes目录下可以包含多个主题目录，主题目录的命名由程序员自己决定。而外观文件等资源则是放在主题目录下的。,10.1 主题,10.1.1 概述 主题的组成元素 ： 1. 外观文件 外观文件又称皮肤文件，是具有文件扩展名.skin的文件，在皮肤文件里，可以定义控件的外观属性。 外观文件形式一般具有下面形式： 上面定义了Label控件的一个皮肤，可以在网页引用该皮肤去设置Label控件的外观。,10.1 主题,10.1.1 概述 2. 级联样式表 级联样式表就是CSS文件，是具有文件扩展名.css的 文件，也是用来存放定义控件外观属性的代码

3、的文件。 3. 图像和其他资源 图像就是图形文件，其他资源可能是声音文件、脚本文件等。有时候为了控件美观，只是靠颜色、大小和轮廓来定义并不能满足要求，这时候就会考虑把一些图片、声音等加到控件外观属性定义中去。,10.1 主题,10.1.2 主题的创建 1. 右键单击要为之创建主题的网站项目，在弹出的菜单中选择“添加ASP.NET文件夹”|“主题”命令。此时就会在该网站项目下添加一个名为App_Themes文件夹，并在该文件夹中自动添加一个默认名为Themes1的文件夹。,10.1 主题,10.1.2 主题的创建 2. 右键单击Themes1文件夹，在弹出的菜单里选择“添加新项”命令，此时会弹出

4、“添加新项”对话框，该对话框提供了在Themes1文件夹里可以添加的文件的模板。,10.1 主题,10.1.2 主题的创建 3. 在“添加新项”对话框里选择“外观文件”，在“名称”文本框里会出现该文件默认命名Skin1.skin，单击“添加”按钮，Skin1.skin就会添加在Themes1目录下。,10.1 主题,10.1.3 主题的应用 在网页中使用某个主题都会在网页定义中加上“Theme=主题目录”的属性，示例代码如下： 为了将主题应用于整个项目，可以项目的根目录下的Web.config文件里进行配置，示例代码如下： 上面通过把属性Themes设置为Themes1来把该主题应用于整个项目

5、。,10.1 主题,10.1.4 SkinID的应用 SkinID是ASP.NET为Web控件提供的一个联系到皮肤的属性，用来标识控件使用哪种皮肤。有时需要同时为一种控件定义不同的显示风格，这时可以在皮肤文件中定义SkinID属性来区别不同的显示风格，例如，在LabelSkinFile.skin文件中对Label控件定义了三种显示风格的皮肤，代码如下： ,10.1 主题,10.1.5 主题的禁用 主题将重写页和控件外观的本地设置，而当控件或页已经有预定义的外观，且又不希望主题重写它时，就可以利用禁用方法来忽略主题的作用。 禁用页的主题通过设置Page指令的EnableTheming属性为fal

6、se来实现，例如： 禁用控件的主题通过将控件的EnableTheming属性设置为false来实现，例如：,10.2 样式,CSS是Cascading Stytle Sheet的简称，简称样式表。它是一种用户增强控制页面样式并允许将样式信息与页面内容分离的标记性语言。 CSS可以很容易地控制页面中的HTML元素的背景与颜色、元素框的样式、定位、文字字体等属性的设置。,10.2 样式,10.2.1 样式的作用 内容与表现分离。 可以使网页的表现非常统一，并且容易修改。 减少重复代码的编写。 增加网页的浏览速度。 减少硬盘容量。,10.2 样式,10.2.2 样式的种类 CSS按其在HTML文档中

7、的位置可以分为三种： 1. 内嵌样式表 内嵌样式表的CSS是写在HTML标签里的，只对当前的标签起作用。 2. 内部样式表 内部样式表是写在HTML的和里的，由和标记，内部样式表只对所在的网页有效。,10.2 样式,10.2.2 样式的种类 3. 外部样式表 为了能够让很多页面共享同样的样式表，可以把样式表的定义写在一个扩展名为.css的文件里，然后在每个需要使用该样式表的页面中添加对该样式表文件的引用。,10.2 样式,10.2.3 样式的语法 最基本的CSS是由三个部分构成：选择符（selector）、属性（properties）和属性的取值（value）： 选择符属性：值，即：selec

8、torproperty: value 一般情况下，选择符是要为之定义样式的HTML标记，可以通过此方法定义相应标记的属性和值，属性和值之间用冒号隔开。 例如： body color: black 选择符body是指页面主体部分，color是控制文字颜色的属性，black是颜色的值，该代码的效果是使页面中的文字为黑色。,10.2 样式,10.2.3样式的语法 如果属性的值是多个单词组成，必须在值上加引号。 例如：p font-family: sans serif 上面定义段落的字体为sans serif。 如果需要对一个选择符指定多个属性时，则要使用分号将所有的属性和值分开。 例如：p text

9、-align: center; color: red 上面表示段落居中排列，并且段落中的文字为红 色。,10.2 样式,10.2.3样式的语法 选择符有三种类型： 1. 类选择符 用类选择符能够把相同的元素分类定义为不同的样式，定义类选择符时，在类的名称前面加一个点号，点号前加上相应的HTML标记，而HTML标记可以省略。例如： p.right text-align: right center text-align: center 2. 包含选择符 包含选择符可以单独对某种元素包含关系（元素1里包含元素2）进行定义的样式表，这种方式只对在元素1里的元素2定义，对单独的元素1或元素2无定义，例如

10、： table a font-size: 12px ,10.2 样式,10.2.3样式的语法 3. ID选择符 在HTML文档中，ID参数指定了某个单一元素，ID选择符用来对这个单一元素定义单独的样式。定义ID选择符要在ID名称前加上一个“#”号。和类选择符相同，定义ID选择符的属性也有两种方法：第1种是“#”号 + ID，第2种是标记 + “#”号 + ID，第1种方法具有通用性，可用于所有ID，第2种只用于指定的标记。例如： #intro font-size:80%; p#headLine font-size:100%; ,10.2 样式,10.2.4样式的使用 有4种常用的、在页面中插入

11、样式表的方法： 1. 链入外部样式表：把样式表保存为一个样式表文件，然后利用页面 中标记链接到这个样式表文件。标记必须放到页面的 区内，例如： 2. 内部样式表：把样式表放到页面的标记对里，这些定义的样式 就应用到页面中了，样式表是用标记插入的，例如： hr color: sienna p margin-left: 20px body background-image: url(images/back40.gif) ,10.2 样式,10.2.4样式的使用 3. 导入外部样式表：指在内部样式表的标记对里导入一个外部样 式表，导入时利用“import”实现，例如： 4. 内嵌样式是混合在HTML

12、标记里使用的，使用这种方法可以很简单地 对某个元素单独定义样式。内嵌样式的使用是直接在HTML标记里加 入style参数。而style参数的内容就是CSS的属性和值，例如： 这是一个段落 ,10.2 样式,10.2.5 样式创建器 使用样式创建器，只需要根据它提供的“新建”样式对话框进行一些选择就可生成满足需要的样式。,10.2 样式,10.2.6 CSS属性窗口 Visual Studio 2010提供了两种修改样式的方法，而这两种方法都要依赖于“CSS属性”对话框，使用“CSS属性”对话框可以查看任何样式的详细内容。 选择“视图”|“CSS属性”命令，则可以打开 “CSS属性”对话框。,1

13、0.2 样式,10.2.7 创建和应用样式文件 其实，在很多情况下，并不直接在页面中创建样式，而是创建一个或几个存储通用样式的文件，然后在页面中引用这些文件存在的样式。这样将有助于样式的管理和标准化。 同样使用“新建样式”对话框可以创建样式文件，创建样式文件有两种情况：一是新创建一个样式文件，把创建的样式放到该文件中；二是向已经存在的样式文件中添加新的样式。,10.3 母版页,10.3.1 概述 母版页是ASP.NET提供的一种重用技术，使用母版页可以为应用程序中的页面创建一致的布局。 单个母版页可以为应用程序中的所有页（或一组页）定义所需的外观和标准行为。然后可以创建包含要显示内容的各个内容

14、页。当用户请求内容页时，这些内容页与母版页合并，以便将母版页的布局与内容页的内容组合在一起输出。,10.3 母版页,10.3.1 概述 母版页为具有扩展名.master的ASP.NET文件，它具有可以包括静态文本、HTML元素和服务器控件的预定义布局。母版页由特殊的Master指令识别，该指令替换了用于普通.aspx页的Page指令。 除在所有页上显示的静态文本和控件外，母版页还包括一个或多个ContentPlaceHolder控件。ContentPlaceHolder控件称为占位符控件，这些占位符控件定义可替换内容出现的区域。 可替换内容是在内容页中定义的，所谓内容页就是绑定到特定母版页的A

15、SP.NET页（.aspx文件以及可选的代码隐藏文件），通过创建各个内容页来定义母版页的占位符控件的内容，从而实现页面的内容设计。,10.3 母版页,10.3.1 概述 在内容页的Page指令中通过使用MasterPageFile属性来指向要使用的母版页，从而建立内容页和母版页的绑定。 在内容页中，通过添加Content控件并将这些控件映射到母版页上的ContentPlaceHolder控件来创建内容。 例如： 1. 2. 3. 主要内容 4. 第1行代码在Page指令中设置了属性MasterPageFile为Master.master表示该页面母版页为Master.master。 第2行到4行定义内容页。,10.3 母版页,10.3.2 母版页的优点 使用母版页可以集中处理页的通用功能，以便可以只在一个位置上进行更新。 使用母版页可以方便地创建一组控件和代码，并将结果应用于一组页。例如，可以在母版页上使用控件来创建一个应用于所有页的菜单。 通过允许控制占位符控件的呈现方式，母版页可以在细节上控制最终页的布局。 母版页提供一个对象模型，使用该对象模型可以从各个内容页自定义母版页。,10.3 母版页,10.3.3 母版页的处理步骤 1. 用户通过键入内容页的URL来请求某页。 2. 获取该页后，读取Page指令。如果该指令引用一 个母版页，则也读取该母版页。如果