页面外观设计与布局.ppt

第6章页面外观设计与布局 内容 CSS样式控制主题母版页 6 1CSS样式控制 页面中使用CSS的三种方法样式规则 6 1 1页面中使用CSS的三种方法 CSS被设计用来与HTML联合建立网页 它不能独立运行 需要依附到页面上才能发挥作用 通常在网页中CSS规定了3种定义样式的方法 直接将样式控制放置在单个HTML元素内 称为内联式 在网页的head部分定义样式 称为嵌入式 以扩展名 css的文件保存样式定义 称为外部链接式 被链接的文件称为CSS文件 1 内联式样式内联样式直接将CSS放在某个HTML标签中 通过使用style属性设置 一般形式为 style 属性名1 值1 属性名2 值2 属性名与属性值之间用 分隔 如果一个样式中有多个属性 各属性之间用分号 隔开 在VisualStudio2008中 有两种设置样式的方法 在源视图下直接设置样式 在设计视图下 利用可视化界面设置样式 例6 1 内联式样式设置示例 参见示例 第06章 StyleDemo 6 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规范中定义 在VisualStudio2008中 也有两种设置嵌入式样式的方法 在源视图下直接设置样式利用可视化窗口设置样式 例6 2 嵌入式样式设置示例 参见示例 第06章 StyleDemo 6 2 aspx 3 链接式样式在页面中使用CSS最常用的方法是链接式样式 利用这种方法可以在网页中调用已经定义好的样式表文件 css文件 与嵌入式相比 链接式可以将定义好的样式在网站的多个页面上重复使用 提高了开发效率 降低了维护成本 同时也实现了将页面结构和表现彻底分离 最适合大型网站的外观设计 在VisualStudio2008中 通过可视化界面创建外部链接式样式 具体步骤如下 在 解决方案资源管理器 中 右击网站的名称 选择 添加新项 在 VisualStudio已安装的模板 下选择 样式表 如图所示 在 名称 文本框中 输入StyleSheet1 css 然后单击 添加 按钮 编辑器将打开 其中显示一个包含空body样式规则的新样式表 如图所示 在样式表编辑器中大括号的外边单击鼠标右键 在快捷菜单中选择 添加样式规则 命令 或者在菜单 样式 中选择 添加样式规则 命令 都会弹出 添加样式规则 对话框 如图所示 最后 为Web页面指定该样式表 最简单的方法是在Web页面的源视图中将样式表文件直接从 解决方案资源管理器 拖到页面的head元素中或者直接拖到Web页面的设计视图中 例6 3 链接式样式设置示例 参见示例 第06章 StyleDemo 6 3 aspx 6 1 2样式规则 无论是定义内嵌式样式还是链接式样式 每个样式的定义格式相同 选择符 属性名1 值1 属性名2 值2 其中 选择符是指样式定义的对象 可以是HTML标记元素 用户自定义的类 用户自定义的id 伪类 具有层次关系的样式规则及并列的样式选择符等 1 元素选择符任何HTML元素都可以是一个CSS的元素选择符 例如 div color 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章 StyleDemo 6 4 aspx 3 id选择符只有在页面上的标签才能具有给定的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 例如 divh1 color red 这种方式只对div中包含的h1起作用 对单独的div或h1均无效 6 并列选择符如果有多个不同的样式选择符的样式相同 则可以使用并列选择符简化定义 每个样式选择符之间用逗号隔开 一般格式为 选择符1 选择符2 属性名1 值1 属性名2 值2 例如 classone bb h1 color 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章 ThemeDemo Theme1 Skin1 skin 6 2 3主题中的CSS样式文件 主题中也可以添加CSS样式文件来控制页面中的HTML元素和Web服务器控件的外观 主题中的CSS样式将被应用到所有应用了主题的页面上 例6 6 演示如何在主题中添加样式文件 参见示例 第06章 ThemeDemo Theme1 Stylesheet1 css 6 2 4主题的动态应用 在ASP NET中可以让用户动态地选择主题 以达到换肤的效果 对于一个Web页面来说 只需要在PreInit事件中动态地指定Theme属性即可 示例代码如下 protectedvoidPage PreInit objectsender EventArgse Theme Theme1 这种方式适合于为单一页面动态应用主题 如果想要在整个网站范围内动态应用主题可以通过修改web config文件来实现 例6 7 演示如何动态应用主题实现换肤功能 参见示例 第06章 ThemeDemo 6 7 aspx 6 3母版页 创建母版页创建内容页母版页的工作原理母版页和内容页中的事件从内容页访问母版页的内容母版页的嵌套 6 3 1创建母版页 母版页的主要特点是 为开发人员提供了在已有页面上进行统一布局的功能 这样做的好处是 开发人员不必花时间考虑如何将统一的布局嵌套到各个页面 在没有母版页技术的时候 这项工作需要编程来实现 比较复杂 在母版页中可以包括静态文本 HTML元素和ASP NET服务器控件等各种内容 通常情况下 母版页中包括各个页面的通用部分 如导航条 页眉 页脚以及版权信息等 右图所示为微软公司MSDN网站的一张页面 圈起的部分即为母版页内容 当用户从左边的目录树选择相应条目进行浏览时 会发现页面框架并未发生变化 例6 8 设计母版页效果如图所示 参见示例 第06章 MasterDemo MasterPage master 6 3 2创建内容页 应用母版页的 aspx页面称为内容页 它实际上是通过内容占位符控件与母版页建立起关系 母版页中定义的占位符 最终需要由内容页来代替 内容页中的内容在运行时将自动绑定到特定的母版页中 在内容页中 母版页的ContentPlaceHolder控件预留的可编辑区会被自动替换为Content控件 开发人员只需要在Content控件区域中填充内容即可 在母版页中定义的其它标记将自动出现在使用了该母版页的 aspx页面中 例6 9 设计2个引用了例6 8中MasterPage master母版页的内容页Default aspx和Study Resource aspx 运行效果如图所示 参见示例 第06章 MasterDemo Default 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值将返回值转换成已知类型的控件访问控件属性 stringstrSearch TextBox Master FindControl txtSearch Text 强类型引用 访问母版页中公开属性和方法 母版页中公开属性publicstringSearchText get returntxtSearch Text set txtSearch Text value 在内容页中对母版页中属性访问stringstrSearch Master SearchText 例6 10 演示如何从内容页访问母版页的内容 参见示例 第06章 MasterDemo MasterPage master和6 10 aspx 6 3 6母版页的嵌套 有时一个母版页需要引用另一个页作为其母版页 可以采用母版页的嵌套技术实现 例6 11 嵌套母版页示例程序 参见示例 第06章 MasterDemo 6 11 father master 6 11 child master和6 11 aspx 6 4小结 CSS样式控制主题母版页 上机实训 详见本书第6章后实训6 请学生独立完成 习题 详见本书第6章后习题部分 请学生独立完成 本章结束