5.1 使用XHTML结构语言

• XHTML结构语言是一种由HTML 4.01发展而来的标记语言，是XML的一个重要子集，其广泛应用于网页设计中，是当前W3C规定的网页设计标准语言之一。

5.1.1 XHTML语法规范

•  XHTML的作用是使用XML的规范来定义网页中各种数据内容之间的数据结构关系，因此其继承了几乎所有XML的语法规范和特色。典型的XHTML文档结构包括文档类型声明和根元素。

5.1.2 使用XHTML标签

• XHTML标签是XHTML文档的核心，是实现某项功能或展示某项内容的最小单位。XHTML有接近90种标签，其涵盖了网页设计的绝大多数需求。在使用这些标签时，应先了解其作用，再了解其使用的特点。

• 根据XHTML标签在网页中的功能和特点，可将其划分为布局标签、内容标签和复合标签等三大类。

5.2 使用HTML 5结构语言

•  在Dreamweaver CS5中，新增了对HTML 5结构语言的支持。作为未来的网页设计标准，HTML 5已经逐渐走入网页设计师的视野。目前，微软、苹果等巨头都开始投入巨资开发基于HTML 5的Web浏览器及硬件设备，并建立了多个应用HTML 5技术的网站。

5.2.1 HTML 5基本标签

•  HTML 5相对于HTML 4.01和XHTML 1.0而言，在标签和语法上都有一定的差异。在学习HTML 5时，用户需要了解HTML 5的新增结构标签、内容标签等基础，同时还应掌握HTML 5的语法特色。

5.2.2 HTML 语法变更

•  在HTML 5中，标签的使用方法与XHTML有很大的不同，同时，一些XHTML的语法规范也将不适用于HTML 5。大体上，HTML 5的语法与HTML 4.01和XHTML 1.0有以下几种区别。

5.2.3 HTML 5富媒体应用

• 在HTML 5标准的制订过程中，特别添加了对富媒体应用的支持，要求所有支持HTML 5标准的Web浏览器必须预置对多媒体数据的编码解码能力，并允许开发者以简单的标签调用富媒体文档。目前，各种主流的Web浏览器最新版本均已预置了对ogg和MPEG-4等解码技术的支持，分别允许播放音频和视频数据。

5.3 使用CSS样式表

• CSS样式表的作用是描述和定义各种网页结构语言标签的属性，为其赋予众多的样式和交互特效，是网页标准化体系中重要的组成部分。本节将介绍CSS样式表的语法规则、选择器及使用选择器的方法。

5.3.1 CSS语法规则

• 作为一种应用于网页的重要描述语言，CSS样式表具有严格的语法规范。其本身是由若干条属性及属性值组成的表格，并通过选择器与网页结构标签建立关联。Web浏览器通过选择器判断哪些样式表属于哪个网页结构标签，然后再将这些样式表应用于网页标签上。

5.3.2 CSS选择器

•  选择器是联接CSS样式表与网页结构标签的标识，是CSS样式表对外的接口。在Web浏览器解析CSS样式表时，将通过选择器判断每一段样式表代码应用的网页标签范围。在CSS 2.1规范中，允许使用以下5种CSS选择器。

  1．标签选择器

  2．类选择器

  3．ID选择器

  4．伪类选择器

  5．伪对象选择器

5.3.3 CSS选择方法

•  CSS选择方法是应用CSS选择器的方法和技巧。使用CSS选择方法，可以对各种CSS选择器进行嵌套、包含和组合，从而对复杂的网页标签进行定义。常用的CSS选择方法包括通用选择、包含选择和分组选择等。

5.4 应用CSS样式

•  Dreamweaver提供了强大的CSS编辑功能。使用Dreamweaver，用户可以方便地创建各种类型的CSS样式表，并通过可视化的方式编辑样式表的属性，将这些CSS样式应用到网页文档中。

5.4.1 附加样式表

•  附加样式表功能可以自动根据用户选择的属性，加载外部的CSS文件，将CSS文件关联到网页文档中，或直接将外部CSS文件的内容复制到网页文档中。

5.4.2 创建CSS规则

• 使用【CSS样式】面板，用户不仅可将外部的CSS样式导入或链接到当前网页文档中，还可以为选定的网页标签创建CSS规则。

5.4.3 查看与编辑CSS规则

•  在创建CSS规则后，Dreamweaver还提供了可视化的工具，允许用户查看该规则下的各种CSS样式属性，并对其进行修改。在【CSS样式】面板中选择已创建的CSS规则，然后即可单击【编辑样式】按钮。

5.5 CSS布局应用

• 传统的网页制作是基于表格技术的，设计师通过对表格单元格的合并和拆分实现分列和分行，再将网页的切片图像插入到表格中。在Web 2.0时代，设计师们逐渐改进了网页设计的方法，使用XHTML的各种布局标签和CSS样式表，定义网页元素的位置，实现了灵活而简便的布局。

5.5.1 盒模型理论

•  盒模型理论是CSS布局的基本理论。在盒模型理论中，将网页的每一个结构元素看作是一个“盒子”，通过CSS的代码控制各结构元素之间的距离、边框以及内容，从而定义网页元素之间的关系。

5.5.2 浮动布局方式

• 浮动布局方式可以通过CSS样式表为网页元素添加左右浮动的效果，使网页元素脱离默认的流动布局体系，从而实现行内多栏内容的显示。浮动布局方式的应用十分广泛，之前介绍的“国”字型、拐角型、左右框架等类型的布局都可以通过浮动布局实现。

5.6 课堂练习：制作景点介绍页

•  本练习制作了一个简单的景点介绍页面。在编写该网页时，需要使用到XHTML的列表技术制作导航条，并使用定义列表和标题标签实现文本的排版。在编写CSS样式时，应用了浮动布局等技术。

5.7 课堂练习：制作软件简介页

•  本练习了一个软件产品的简介页。在编写该页面时，使用到了XHTML结构语言为网页布局，通过div标签将网页分为3个结构模块，然后依次编写各模块的内容。除此之外，还使用CSS样式表的伪类选择器等技术，制作了鼠标滑过的特效。