网页设计第6章教案.ppt

第6章 Web标准与CSS基础 Teaching Objectives 通过本章学习，应该掌握以下内容： 理解Web标准的含义 掌握CSS的基本概念 什么是XHTML 理解表现和内容的分离 掌握CSS选择符的声明方法 CSS使用方式 Web2.0 自2005年以来，Web 2.0的提出和应用给IT界带来了新的技术革新，越来越多的主流网站开始抛弃传统的基于Table的表格布局方法，转而采用基于Web标准的DIV+CSS的设计方法对网站进行重构 6.1 Web标准 6.1.1 Web标准 6.1.2 内容与表现的分离 6.1.3 布局思考方式 Web标准 什么是标准？ Web标准，即网站标准 目前所说的Web标准一般指网站建设采用基于XHTML语言的网站设计语言，Web标准中典型的应用模式是DIV+CSS Web标准并不是某一个标准，而是由W3C和其他标准化组织制定的一套规范集合 Web标准（续） 内容与表现的分离 内容、结构和表现是一个网页必不可少的组成部分 内容是页面传达信息的基础 表现使得内容的传达变得更加明晰和方便 结构是内容和表现之间的纽带 标准布局优势 文件下载与页面显示速度更快； 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）； 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等） 用户能够通过样式选择定制自己的表现界面 6.2 如何向标准过渡 6.2.1 什么是XHTML 6.2.2 利用XHTML改善现有网站 XHTML Extensible HyperText Markup Language的缩写 XHTML是扮演着类似HTML角色的XML 是一种过渡技术 与HTML相比有以下特点 解决了因HTML语言缺点所导致的严重制约 XML是Web发展趋势 ，XHTML只要遵守一些简单规则，就可以设计出既适合XML系统，又适合当前大部分HTML浏览器的页面 XHTML非常严密，有助于读者改掉表现与数据混杂的习惯 Web标准设计规则 为页面添加正确的DOCTYPE 浏览器根据DOCTYPE定义的DTD（文档类型定义）来解释页面代码 初学者推荐使用XHTML 1.0过渡式的DTD !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN /TR/xhtml1/DTD/xhtml1-transitional.dtd 设定一个名字空间 html XMLns=/1999/xhtml 声明编码语言 meta http-equiv=Content-Type content=text/html; charset=GB2312 / Web标准设计规则（续） 用小写字母书写所有的标签 所有XHTML元素和属性的名字都必须使用小写 为图片添加alt属性 alt属性指定了当图片不能显示的时候就显示供替换文本 给所有属性值加引号 在XHTML中，属性值必须被加引号 关闭所有的标签 每一个打开的标签都必须关闭 空标签也要关闭，在标签尾部使用一个正斜杠/来关闭它们自己 用id属性代替name属性 在ＸHTML里name属性不能被使用，应该用id来替换 6.3 CSS及其选择符 CSS英文全称为Cascading Style Sheets，即层叠样式表 CSS和HTML一样也是以代码的形式存在的 本书将结合Dreamweaver辅助设计CSS，这也是作者推荐初学者学习CSS的方法 6.3.1 CSS样式面板 6.3.2 选择器 6.3.3 属性设置 CSS选择器 每个样式表都是由一系列规则组成，每条规则有两部分：选择器和声明 每条声明又是属性和值的组合 标签选择器 标签选择器也称标记选择器 HTML中所有标签都可以作为标签选择符 标签选择器可以将HTML标签例如body、p、div等重新定义 【6_4.html】 标签选择器 标签选择器也称标记选择器 HTML中所有标签都可以作为标签选择符 标签选择器可以将HTML标签例如body、p、div等重新定义 【6_4.html】 类选择器 标签选择器一旦声明，页面中所有的相同标签都会相应地产生变化 类选择器能够把相同的元素分类定义成不同的样式 类选择器的名称可以由用户自定义，在定义类选择器时，名称前面需要加一个 “ . ”点号 如定义两个不同的类.right和.center ，对实例中前2个p标签设置不同的class选择器 【6_4.html】 类选择器 标签选择器一旦声明，页面中所有的相同标签都会相应地产生变化 类选择器能够把相同的元素分类定义成不同的样式 类选择器的名称可以由用