Dreamweaver.CS4.完全自学教程14.ppt

1、第23章 Web标准,Web标准的出现，改变了先前用嵌套表格和HTML代码设计页面的方式，而改用XHTML+CSS来实现。Web标准的主要目的是：提供最多利益给最多的网站用户；确保任何网站文挡都能够长期有效；简化代码、降低建设成本；让网站更容易使用，能适应更多不同用户和更多网络设备；当浏览器版本更新，或者出现新的网络交互设备时，确保所有应用能够继续正确执行。 本章将从什么是Web标准、如何制作符合标准的网站、如何进行校验等几个方面进行详细介绍，使读者对Web标准有一个全面认识，并且能够设计简单的符合标准的网页。,23.1 关于Web标准,在W3C（W3C.org）的组织下，以1998年2月10

2、日发布XML1.0为标志，网站标准开始被建立，并在网站标准组织的督促下推广执行。本节就来学习什么是Web标准，遵循标准的网站与传统网站有哪些区别。,23.1.1 什么是Web标准,Web标准不是某一个标准，而是一系列标准的集合。这些标准大部分由W3C起草和发布，也有一些是其他标准组织制订的标准，比如ECMA（European Computer Manufacturers Association）的ECMAScript标准。网页主要由三部分组成：结构（Structure）、表现（Presentation）和行为（Behavior）。 对应的标准也分三方面：结构化标准语言主要包括XHTML和XML

3、，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。 W3C的网站（）就是完全符合Web标准的网站，如图23.1所示。网站没有利用表格进行布局，而是利用Div和CSS，实现了表现与结构相分离。,23.1.2 遵循标准的网站与传统网站的区别,要弄清楚遵循标准的网站与传统网站有什么区别，首先要明白什么是内容、结构和表现。下面举例来说明。 1内容 内容就是页面实际要传达的真正信息，包含数据、文档或者图片等，不包含辅助的信息，如装饰性图像等。 2结构 上面的文字内容完整，但是没有分段，层次不清，难以阅读和理解。标题、章、节、段落和列

4、表，我们就把它称做结构。结构使内容更加具有逻辑性，易用性。 3表现 虽然定义了结构，但是内容还是原样式没有改变，例如字体、颜色没有变化，没有背景，没有修饰。所有这些用来改变内容外观的东西，我们称之为“表现”。下面是对上面文本用表现处理过后的效果。,23.2 采用Web标准的优点,对网站浏览者的好处： 文件下载与页面显示速度更快； 内容能被更多的用户所访问（包括失明、视弱、色盲等残障人士）； 内容能被更广泛的设备所访问（包括手持设备、打印机等）； 用户能够通过样式选择定制自己的表现界面； 所有页面都能提供适于打印的版本。 对网站所有者的好处： 更少的代码和组件，容易维护； 带宽要求降低（代码更简

5、洁），成本降低； 更容易被搜寻引擎搜索到； 改版方便，不需要变动页面内容； 提供打印版本而不需要复制内容 ； 提高网站易用性。,23.3 制作符合标准的网站,本节以构建一个简单的网页为例来学习如何利用Div+CSS进行布局，制作符合标准的网站。布局结构由顶部标题区域、中部三列内容区域组成，网页预览效果如图23.5所示。,23.3.1 新建规范的XHTML文档,要制作符合标准的网站，第一步需要新建一个规范的XHTML文档。具体操作步骤如下：,23.3.2 创建层,制作符合标准的网站，第二步是要创建层结构，并给层命名。具体操作步骤如下：,23.3.3 设置CSS样式表,制作符合标准的网站，第三步是为页面的文字和层设置CSS样式。具体操作步骤如下：,23.4 W3C校验,W3C校验只是帮助网页设计者检查XHTML代码书写是否规范，CSS的属性是否都在CSS2的规范内。代码的标准化仅仅是第一步，让网页具有良好的结构、更快的浏览速度、更友好的界面以及对更多设备的支持才是最终目的。,23.4.1 XHTML,XHTML校验网址是/。W3C提供了三种校验方式，分别是网址校验、上传文件校验、直接输入代码校验，如图23.28所示。,23.4.2 CSS