第6章页面外观设计与布局.ppt

第6章 页面外观设计与布局,内容,CSS样式控制 主题 母版页,6.1 CSS样式控制,页面中使用CSS的三种方法 样式规则,6.1.1 页面中使用CSS的三种方法,CSS被设计用来与HTML联合建立网页，它不能独立运行，需要依附到页面上才能发挥作用。通常在网页中CSS规定了3种定义样式的方法： 直接将样式控制放置在单个HTML元素内，称为内联式。 在网页的head部分定义样式，称为嵌入式。 以扩展名.css的文件保存样式定义，称为外部链接式，被链接的文件称为CSS文件。,1.内联式样式 内联样式直接将CSS放在某个HTML标签中，通过使用style属性设置，一般形式为： style=“属性名1: 值1; 属性名2: 值2;“ 属性名与属性值之间用“:”分隔，如果一个样式中有多个属性，各属性之间用分号“;”隔开。,在Visual Studio 2008中，有两种设置样式的方法: 在源视图下直接设置样式。 在设计视图下，利用可视化界面设置样式。 【例6-1】内联式样式设置示例。,参见示例第06章StyleDemo6-1.aspx,2. 嵌入式样式 在网页的head部分直接实现CSS样式, 即在与标签内，以开始，结束。 CSS规则由两部分组成：选择符和声明。声明由属性名和属性值组成。所以简单的CSS规则如下： 选择符属性名1: 值1; 属性名2: 值2; 例如： p color : Green; p（段落标签）为选择符，color（颜色）是p的属性名，green（绿色）是color的属性值。该规则声明所有段落标签的内容应该将color属性设置为绿色，即所有中文本将变成绿色。,下面讲述CSS规则中主要的4个要素。 选择符：表明CSS规则应用到页面的哪个部分。选择符最简单的类型是元素选择符，它指出明确的标签元素，例如HTML中的标签。 声明：声明包含在大括号内。大括号内应首先给出属性名，接着是冒号，然后是属性值。结尾分号是可选项，推荐使用结尾分号，以便于规则的扩展。 属性：属性按官方CSS规范定义。用户可以定义特有的样式效果，与CSS兼容的浏览器可能会支持这些效果，如果不支持的浏览器会忽略这些属性。 值：声明的值放置在属性名和冒号之后。它确切定义应该如何设置属性。每个属性值的范围也在CSS规范中定义。,在Visual Studio 2008中，也有两种设置嵌入式样式的方法： 在源视图下直接设置样式 利用可视化窗口设置样式。 【例6-2】嵌入式样式设置示例。,参见示例第06章StyleDemo6-2.aspx,3. 链接式样式 在页面中使用CSS最常用的方法是链接式样式。利用这种方法可以在网页中调用已经定义好的样式表文件（css文件）。 与嵌入式相比，链接式可以将定义好的样式在网站的多个页面上重复使用，提高了开发效率，降低了维护成本，同时也实现了将页面结构和表现彻底分离，最适合大型网站的外观设计。,在Visual Studio 2008中，通过可视化界面创建外部链接式样式。具体步骤如下。 在“解决方案资源管理器”中，右击网站的名称，选择“添加新项”。在“Visual Studio已安装的模板”下选择“样式表”，如图所示。,在“名称”文本框中，输入StyleSheet1.css，然后单击“添加”按钮。编辑器将打开，其中显示一个包含空body样式规则的新样式表，如图所示。 在样式表编辑器中大括号的外边单击鼠标右键，在快捷菜单中选择“添加样式规则”命令，或者在菜单“样式”中选择“添加样式规则”命令，都会弹出“添加样式规则”对话框，如图所示。,最后，为Web页面指定该样式表。最简单的方法是在Web页面的源视图中将样式表文件直接从“解决方案资源管理器”拖到页面的head元素中或者直接拖到Web页面的设计视图中。,【例6-3】链接式样式设置示例。,参见示例第06章StyleDemo6-3.aspx,6.1.2 样式规则,无论是定义内嵌式样式还是链接式样式，每个样式的定义格式相同： 选择符 属性名1: 值1; 属性名2: 值2; 其中，选择符是指样式定义的对象，可以是HTML标记元素、用户自定义的类、用户自定义的id、伪类、具有层次关系的样式规则及并列的样式选择符等。,1元素选择符 任何HTML元素都可以是一个CSS的元素选择符，例如，divcolor : red，该样式规则中的元素选择符是div，div块内的所有文字颜色为红色。 2类选择符 类选择符用于定义页面上的相关HTML元素组，使它们具有合适的相同样式规则。创建类时，用户需要给它命名，命名时最好使用字母和数字。 定义了类之后，用户可以使用它作为CSS的选择符。类选择符以“.”为起始标记，一般格式为： .类选择符 属性名1: 值1; 属性名2: 值2; ,例如： .c1 color : Red; .c2 font-size : large; 上面定义了两个类，类“c1”定义了颜色属性，类“c2”定义了字体大小属性。 在HTML文档中可以按下列方式引用： 通知 将与今天下午2点召开各部门会议。 标签中的文本颜色为红色，标签中的字体大小为“large”。因为它们各自的class属性值为类“c1”和类“c2”。 【例6-4】类选择符示例程序。,参见示例第06章StyleDemo6-4.aspx,3id选择符 只有在页面上的标签才能具有给定的id，它必须是唯一的，并只用于指示该元素。 下面的例子中标签定义了一个id属性，值是“next”。 下一步 在CSS中，id选择符由id值前面的“#”（井号）符号指示，例如： #next font-size : large; ,在实际应用中，用户应如何选取类选择或id选择符设置样式呢？ 类选择符更灵活，id选择符能完成的它都能完成，甚至比id选择符能完成的还要多。如果想重用样式，用户也可以使用类选择符来完成。但是用id选择符就完成不了，因为id值在页面文档中必须是唯一的，即只有一个元素具有该值。 注意：如果在一个元素的样式定义中，既引用了元素选择符，又引用了类选择符和id选择符，则id选择符的优先级最高，其次是类选择符，元素选择符的优先级最低。,4伪类 伪类可以看做是一种特殊的类选择符，是能被支持CSS的浏览器自动所识别的特殊选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。 在CSS中用4个伪类来定义链接样式，分别是a:link、a:visited、a:hover和a:active，,例如： a:link color: #FF0000 /* 未被访问的链接 红色 */ a:visited color: #00FF00 /* 已被访问过的链接 绿色 */ a:hover color: #FFCC00 /* 鼠标悬浮在上的链接 橙色 */ a:active color: #0000FF /* 鼠标点中激活链接 蓝色 */ 以上语句分别定义了链接、已访问过的链接、鼠标停在上方时、点击鼠标时的样式。注意，必须按以上顺序书写，否则不能按预期效果显示。,5包含选择符 包含选择符用于定义具有层次关系的样式规则，它由多个样式选择符组成，选择符之间用空格隔开。一般格式为： 选择符1 选择符2 属性名1: 值1; 属性名2: 值2; 例如，div h1 color : red ，这种方式只对div中包含的h1起作用，对单独的div或h1均无效。,6并列选择符 如果有多个不同的样式选择符的样式相同，则可以使用并列选择符简化定义，每个样式选择符之间用逗号隔开。一般格式为： 选择符1, 选择符2, 属性名1: 值1; 属性名2: 值2; 例如：.classone, #bb, h1color : red,6.2 主题,主题的创建与应用 主题中的外观文件 主题中的CSS样式文件 主题的动态应用,6.2.1 主题的创建与应用,使用主题的一般步骤如下： 步骤1：定义一个或多个主题。在App_Themes文件夹下创建一个或多个主题，然后将主题包含的文件（包括.css文件、.skin文件、图片文件、Flash动画文件及其他资源文件等）保存到相应主题文件夹下。 步骤2：将主题应用到网页中，用以控制页面和控件外观。,创建完主题后，既可以在Web站点中局部应用，也可以全局应用。,（1）主题的局部应用 局部应用是指将主题应用于一张页面上，通过在Page指令中添加Theme属性实现，代码如下： 也可以在属性窗口中通过可视化的方式指定主题，如图所示，效果是一样的。,除了可以将主题应用在一张页面之外，也可以将主题应用在某一个单一的服务器控件上，具体做法与设置页面主题相似，即通过设置Theme属性来实现。 应用一个主题到页面上时，ASP.NET会检查Web页面上控件的属性与主题中外观文件中定义的属性是否冲突。如果有冲突，将以外观文件中定义的属性为准。也就是说，如果页面上应用了外观，那么在外观文件中定义的属性将具有优先权。,当需要让控件的属性设置不被外观文件中的设置覆盖。此时可以使用StyleSheetTheme属性来代替Theme属性，那么在页面中所有控件自定义的属性将不会再被外观文件覆盖。 为页面添加样式表主题的示例代码如下所示。 如果页面内同时定义StyleSheetTheme和Theme属性指定主题，那么优先级是Theme 内容页内定义的属性 StyleSheetTheme。,（2）主题的全局应用 全局应用是指将主题应用于整个站点，一般是通过配置文件实现的。在网站根目录下的web.config文件中为站点设置主题的部分代码如下： 当配置了全局主题后，所有页面将具有相同的主题，如果希望某个页面例外，可在该页面中的Page指令里使用EnableTheming属性禁用主题，代码如下：,6.2.2 主题中的外观文件,外观文件专门用于定义服务器控件的外观。在一个主题中可以包含一个或多个外观文件，其扩展名为.skin。 【例6-5】演示外观文件的定义方法。,参见示例第06章ThemeDemoTheme1Skin1.skin,6.2.3 主题中的CSS样式文件,主题中也可以添加CSS样式文件来控制页面中的HTML元素和Web服务器控件的外观，主题中的CSS样式将被应用到所有应用了主题的页面上。 【例6-6】演示如何在主题中添加样式文件。,参见示例第06章ThemeDemoTheme1Stylesheet1.css,6.2.4 主题的动态应用,在ASP.NET中可以让用户动态地选择主题，以达到换肤的效果。 对于一个Web页面来说，只需要在PreInit事件中动态地指定Theme属性即可，示例代码如下： protected void Page_PreInit(object sender, EventArgs e) Theme= “Theme1“; 这种方式适合于为单一页面动态应用主题，如果想要在整个网站范围内动态应用主题可以通过修改web.config文件来实现。,【例6-7】演示如何动态应用主题实现换肤功能。,参见示例第06章ThemeDemo6-7.aspx,6.3 母版页,创建母版页 创建内容页 母版页的工作原理 母版页和内容页中的事件 从内容页访问母版页的内容 母版页的嵌套,6.3.1 创建母版页,母版页的主要特点是：为开发人员提供了在已有页面上进行统一布局的功能。 这样做的好处是：开发人员不必花时间考虑如何将统一的布局嵌套到各个页面。在没有母版页技术的时候，这项工作需要编程来实现，比较复杂。 在母版页中可以包括静态文本、HTML元素和ASP.NET服务器控件等各种内容。通常情况下，母版页中包括各个页面的通用部分，如导航条、页眉、页脚以及版权信息等,右图所示为微软公司MSDN网站的一张页面，圈起的部分即为母版页内容，当用户从左边的目录树选择相应条目进行浏览时，会发现页面框架并未发生变化。,【例6-8】设计母版页效果如图所示。,参见示例第06章MasterDemoMasterPage.master,6.3.2 创建内容页,应用母版页的.aspx页面称为内容页，它实际上是通过内容占位符控件与母版页建立起关系。 母版页中定义的占位符，最终需要由内容页来代替，内容页中的内容在运行时将自动绑定到特定的母版页中。 在内容页中，母版页的ContentPlaceHolder控件预留的可编辑区会被自动替换为Content控件，开发人员只需要在Content控件区域中填充内容即可，在母版页中定义的其它标记将自动出现在使用了该母版页的.aspx页面中。,【例6-9】设计2个引用了例6-8中MasterPage.master母版页的内容页Default.aspx和Study_Resource.aspx，运行效果如图所示。,参见示例第06章MasterDemoDefault.aspx和Study_Resource.aspx,6.3.3 母版页的工作原理,母版页的工作原理如下： （1）用户在浏览器中通过内容页的URL来请求访问Web页面。 （2）获取该页后，读取页面的Page指令。如果该指令引用一个母版页，则读取相应的母版页。如果是第一次请求这两个页，则两个页都要进行编译。 （3）将内容页中各个Content控件的内容合并到母版页中相应的ContentPlaceHolder控件中，生成结果页。 （4）用户浏览器中呈现服务器返回的由母版页与内容页合并的结果页。,步骤（2）、（3）、（4）对用户来说是透明的，由服务器自动完成，用户只需提供内容页的URL即可。下图对上述过程进行了阐释。,6.3.4 母版页和内容页中的事件,母版页和内容页都可以包含控件的事件处理程序。 对于控件而言，事件是在本地处理的，即内容页中的控件在内容页中触发事件，母版页中的控件在母版页中触发事件。 也就是说，控件事件不会从内容页发送到母版页，同样，也不能在内容中处理来自母版页控件的事件。,母版页与内容页合并后事件的发生顺序如下： 母版页控件Init事件。 内容页控件Init事件。 母版页Init事件。 内容页Init事件。 内容页Load事件。 母版页Load事件。 内容控件Load事件。 内容页PreRender事件。 母版页PreRender事件。 母版页控件PreRender事件。 内容控件PreRender事件。,6.3.5 从内容页访问母版页的内容,有时需要在内容页中访问母版页的内容，可以使用弱类型引用和强类型引用两种类型。 弱类型引用（调用FindControl方法进行访问） 显式地给FindControl方法传递一个控件的ID值 将返回值转换成已知类型的控件 访问控件属性,string strSearch = (TextBox) Master.FindControl (“txtSearch“).Text;,强类型引用（访问母版页中公开属性和方法）,/母版页中公开属性 public string SearchText get return txtSearch.Text; set txtSearch.Text = value; /在内容页中对母版页中属性访问 string strSearch = Master.SearchText;,【例6-10】演示如何从内容页访问母版页的内容。,参见示例第06章MasterDemoMasterPage.master和6-10.aspx,6.3.6母版页的嵌套,有时一个母版页需要引用另一个页作为其母版页，可以采用母版页的嵌套技术实现。 【例6-11】嵌套母版页示例程序。,参见示例第06章MasterDemo6-11-father.master、6-11-child.master 和6-11.aspx,6.4 小结,CSS样式控制 主题 母版页,上机实训,详见本书第6章后实训6，请学生独立完成。,习题,详见本书第6章后习题部分，请学生独立完成。,本 章 结 束！,