单元五网页格式化—css样式的应用.ppt

网页设计与制作教程 网页设计与制作教程 单元五 网页格式化—CSS样式的应用 清华大学出版社 单元五 网页格式化—CSS样式的应用 教学目标 了解CSS样式的基本概念，认识其面板的组成和定义的方式。 掌握CSS样式常用属性设置，会使用它对网页进行格式化。 掌握使用CSS设置页面超链接文字格式和格式化表格的方法。 了解目前常用的DIV标签和CSS代码结合进行网页布局的设计方法。 单元五 网页格式化—CSS样式的应用 返回教材总目录 单元五 网页格式化—CSS样式的应用 任务5.1 使用CSS样式美化页面文本 任务5.2 DIV+CSS页面布局 上机实训 返回教材总目录 任务5.1 使用CSS样式美化页面文本： 任务描述 使用CSS样式表可以将与外观样式有关的代码内容从网页文档中脱离出来，实现内容与样式的分离，使文档清晰简洁，便于修改； 可以使用一个样式表控制多个文档，在进行修改后一次更新，提高工作效率； 可以实现一些仅靠设置属性实现不了的特殊效果，因此具有很好的易用性和扩展性。 返回目录 单元五 网页格式化—CSS样式的应用 任务5.1 使用CSS样式美化页面文本： 工作过程 5.1.1 认识“CSS样式” 类样式 —— 也称自定义CSS样式，可应用于任何标签，以小圆点（.）开头。如：.table1，.STYLE1 标签样式 —— 重新定义特定标签的格式。在创建或更改一个HTML标签的CSS样式时，所有使用该标签的元素都将得到更新。如：body，td，a 高级样式 —— 也称CSS选择器样式，这是一种高级样式，可重定义特定元素组合的格式，或其它 CSS 允许的选择器形式的格式，包括 （1）ID选择符 如：#box，#nav （2）包含选择符 如：.STYLE1 A，#nav li，#nav a （3）伪类选择器 如：控制超链接4种显示效果的a:link，a:hover，a:active和a:visited。 （4）通用选择符 如：*。 返回目录 单元五 网页格式化—CSS样式的应用 任务5.1 使用CSS样式美化页面文本： 工作过程 5.1.2 创建及编辑CSS样式 “深圳可盈”网站的CSS样式 表格布局 DIV布局 5.1.3 链接外部CSS样式表 返回目录 单元五 网页格式化—CSS样式的应用 body { margin-left: 0px; margin-top: 0px; font-size: 12px; } A { COLOR: #000; TEXT-DECORATION: none } .table1 { border: 1px solid #e5e5e5; } .STYLE1 A{ color: #FFFFFF;font-weight: bold; } 任务5.1 使用CSS样式美化页面文本： 任务回顾 从本项目的学习中，我们了解到层叠样式表 (CSS) 是一组格式设置规则，用于控制 Web 页内容的外观。CSS样式表是当前网页制作领域中非常重要的一项技术，它实现了将网页中内容与样式的分离。掌握CSS样式表对于精通网页制作是非常重要和非常必要的。 返回目录 单元五 网页格式化—CSS样式的应用 任务5.2 DIV+CSS网页布局 ： 任务描述 DIV+CSS是网站标准（也称“WEB标准”）中常用的术语之一。基于DIV+CSS布局的页面通常采用div 标签,而不是采用table标签来布局。Div标签是用来定义 Web页面的内容中的逻辑区域的标签。CSS是一种用来表现HTML或XML等文件样式的计算机语言。简单地说，Div 用于搭建网站结构，CSS用于创建网站表现（样式/美化），实质即使用XHTML对网站进行标准化重构，使用CSS将表现与内容分离，便于网站维护，简化html页面代码，可以获得一个较优秀的网站结构以便于日后维护、协同工作和搜索引擎等 。 返回目录 单元五 网页格式化—CSS样式的应用 任务5.2 DIV+CSS网页布局 ： 工作过程 网页效果如图所示： 返回目录 单元五 网页格式化—CSS样式的应用 任务5.2 DIV+CSS网页布局 ： 任务回顾 随着WEB2.0标准化设计理念的普及，国内很多大型门户网站已经纷纷采用DIV+CSS制作方法，它相比表格布局更有亲和力的、更灵活，而且功能更强大，具备更多的优势： 由于将大部分页面代码写在了CSS当中，使得页面体积容量变得更小，页面载入速度更快。 在修改页面的时候更加容易省时。根据区域内容标记，到CSS里找到相应的ID，使得修改页面的时候更加方便，也不会破坏页面其他部分的布局样式。 将所有页面，或所有区域统一用CSS文件控制，就避免了不同区域或不同页面体现出的效果偏差，页面整体视