第 8 章用 CSS 美化页面和 DIV 布局设计

第8章用CSS美化页面 和DIV布局设计

掌握使用CSS层叠式样表 掌握使用DIV布局页面学习目标

8.1 CSS层叠式样表 CSS的定义和使用方法认识CSS样式面板 CSS规则的设置 CSS打印支持的应用 CSS的光标效果设置 CSS的滤镜效果设置

CSS的定义和使用方法 CSS( Cascading Style Sheet)是层叠样式表文件的英文缩写，是依附于HTML技术的一种网页样式工具，目前为业界的设计标准之一。 CSS样式规则有4种类型：类、ID、标签和复合内容。 CSS的使用：定义在当前文档和定义在独立的外部CSS文件。实例演示

认识CSS样式面板 选择“窗口|CSS样式”命令或按[shift+F11]组合键，可打开CSS样式面板。当前文档的CSS样式从左到右分别是附加样式表、新建CSS规则、编辑样式、禁用CSS属性和删除CSS规则。

CSS规则的设置 在“新建CSS规则”对话框中设置“选择器类型”为“标签”、“选择器名称”为“body”，单击“确定”按钮。

CSS打印支持的应用 打印功能是HTML网页文档的弱项，而CSS样式表在一定程度上解决了例如长文档分页这类问题。

CSS的光标效果设置 主要为了实现更多、更丰富的光标显示效果。选中目标文件，新建CSS规则，如下图所示：

CSS的滤镜效果设置 在CSS层叠样式表中有一种专门用于实现网页中图像元素特效修饰的规则定义，使图像变得非常丰富、炫目，如半透明、阴影和模糊效果，这就是CSS滤镜。

8.2 DIV网页布局 DIV对象的插入和设置用DIV+CSS布局网页 AP DIV对象的绘制和设置 AP DIV 的管理 AP DIV与表格的相互转换

DIV对象的插入和设置 DIV是HTML中最重要的一类标签元素，可以装载几乎任何网页元素。选择“插入|DIV标签”命令，或单击插入面板常用/布局分类中的“插入标签”，可插入一个DIV标签元素。

用DIV+CSS布局网页 目前网页设计通行的设计方式就是DIV+CSS网页布局。其优点主要体现在：代码精简；表现和内容分离；页面布局控制力强；结构清晰，有利于搜索。实例演示

AP DIV对象的绘制和设置 AP DIV的Dreamweaver中一种特殊的DIV标签元素，利用AP DIV可以实现各种灵活而复杂的布局。切换到“布局”插入栏后，单击“绘制AP Div”按钮，当鼠标光标变为十字形状时，在编辑窗口中按住鼠标左键进行拖动即可创建AP Div。

AP DIV对象的绘制和设置 嵌套的AP DIV，将光标插入点定位到所需的AP Div中，选择“插入/布局对象/AP Div”命令即可在现有AP Div中创建一个嵌套AP Div。

AP DIV对象的绘制和设置 嵌套的AP DIV，将光标插入点定位到所需的AP Div中，选择“插入/布局对象/AP Div”命令即可在现有AP Div中创建一个嵌套AP Div。选中AP DIV，在属性面板可以进行相应的属性设置。

AP DIV的管理 AP DIV的管理主要包括选择AP Div、更改AP Div的层叠顺序、更改AP Div的可见性操作和调整AP DIV的大小等。选择“窗口|AP元素”或按[F2]键打开AP元素面板。主控制区

AP DIV的管理 选择AP Div元素，选一个按[ctrl]键可同时选择多个。更改AP DIV元素的层叠顺序。调整AP DIV的大小，拖动AP DIV控制边框即可，或者通过属性面板修改参数也可调整。双击可以修改

AP DIV的管理 移动AP Div元素，将鼠标移至AP Div边框，当光标变为4个向外的箭头时，按住左键可以移动，或者通过属性面板修改参数也可移动。对齐方式，选择“修改|排列顺序”如下图设置上对齐：上对齐

AP DIV与表格的转换 表格和AP DIV都可用于布局，在dreamweaver CS5中，表格和AP DIV可以互相转换。选择“修改|转换|将AP DIV转换为表格”命令，可将文档中所有AP DIV转换为表格。

练习打开素材文档，在图像top中插入导航图像文件navibar.jpg；分别设置导航图像中的4段文本设置矩形热点区域。将图像img2.jpg的大小调整为宽278、高185，并对其进行重新取样设置。

第 8 章用 CSS 美化页面和 DIV 布局设计