第6章Web标准与CSS基础剖析.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_1.html】 内容好比是人的身体；结构则标明了身体的各个部分；表现好比装扮身体的衣服；行为就是走、跑、跳等动作 布局思考方式 传统布局 【6_2.html】 页面的结构部分和表现部分混杂 主要布局元素是table元素 用table元素的单元格将页面分区，单元格中嵌套其他表格定位网页内容，设置属性控制内容的显示和位置 标准布局 【6_3.html】 结构部分和表现部分各自独立 结构部分是页面的XHTML部分，表现部分是调用的CSS文件 XHTML只用来定义内容的结构，所有表现的部分放到单独的CSS文件中 Dreamweaver8.0开始已经将XHTML过渡型标准作为目前网页设计的标准语言 标准布局优势 文件下载与页面显示速度更快； 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）； 内容能被更广泛的设备所访问（包括屏幕阅读机、手持设备、搜索机器人、打印机、电冰箱等等） 用户能够通过样式选择定制自己的表现界面 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样式面板 CSS选择器 每个样式表都是由一系列规则组成，每条规则有两部分：选择器 和 声明 每条声明又是 属性 和 值 的组合 标签选择器 标签选择器也称标记选择器 HTML中所有标签都可以作为标签选择符 标签选择器可以将HTML标签例如body、p、div等重新定义 【6_4.html