Transcript 幻灯片1

Dreamweaver 网页制作
Dreamweaver
第8章 用CSS美化页面
和DIV布局设计
8.1
学习目标
掌握使用CSS层叠式样表
掌握使用DIV布局页面
Dreamweaver 网页制作
8.2
8.1 CSS层叠式样表

CSS的定义和使用方法

认识CSS样式面板

CSS规则的设置

CSS打印支持的应用

CSS的光标效果设置

CSS的滤镜效果设置
Dreamweaver 网页制作
8.3
CSS的定义和使用方法

CSS( Cascading Style Sheet)是层叠样式表文件
的英文缩写，是依附于HTML技术的一种网页
样式工具，目前为业界的设计标准之一。

CSS样式规则有4种类型：类、ID、标签和复合
内容。

CSS的使用：定义在当前文档和定义在独立的外
部CSS文件。
Dreamweaver 网页制作
实例演示
8.4
认识CSS样式面板

选择“窗口|CSS样式”命令或按[shift+F11]组合
键，可打开CSS样式面板。
当前文档的
CSS样式
从左到右分别是附加样
式表、新建CSS规则、
编辑样式、禁用CSS属
性和删除CSS规则。
Dreamweaver 网页制作
8.5
CSS规则的设置

在“新建CSS规则”对话框中设置“选择器类型”
为“标签”、“选择器名称”为“body”，单击
“确定”按钮。
Dreamweaver 网页制作
8.6
CSS打印支持的应用

打印功能是HTML网页文档的弱项，而CSS样式
表在一定程度上解决了例如长文档分页这类问
题。
Dreamweaver 网页制作
8.7
CSS的光标效果设置

主要为了实现更多、更丰富的光标显示效果。
选中目标文件，新建CSS规则，如下图所示：
Dreamweaver 网页制作
8.8
CSS的滤镜效果设置

在CSS层叠样式表中有一种专门用于实现网页中
图像元素特效修饰的规则定义，使图像变得非
常丰富、炫目，如半透明、阴影和模糊效果，
这就是CSS滤镜。
Dreamweaver 网页制作
8.9
8.2 DIV网页布局

DIV对象的插入和设置

用DIV+CSS布局网页

AP DIV对象的绘制和设置

AP DIV 的管理

AP DIV与表格的相互转换
Dreamweaver 网页制作
8.10
DIV对象的插入和设置

DIV是HTML中最重要的一类标签元素，可以装
载几乎任何网页元素。选择“插入|DIV标签”命
令，或单击插入面板常用/布局分类中的“插入标
签”，可插入一个DIV标签元素。
Dreamweaver 网页制作
8.11
用DIV+CSS布局网页

目前网页设计通行的设计方式就是DIV+CSS网
页布局。其优点主要体现在：代码精简；表现和
内容分离；页面布局控制力强；结构清晰，有利
于搜索。
实例演示
Dreamweaver 网页制作
8.12
AP DIV对象的绘制和设置

AP DIV的Dreamweaver中一种特殊的DIV标签
元素，利用AP DIV可以实现各种灵活而复杂的
布局。
 切换到“布局”插入栏后，单击“绘制AP Div”按钮，
当鼠标光标变为十字形状时，在编辑窗口中按住鼠标
左键进行拖动即可创建AP Div。
Dreamweaver 网页制作
8.13
AP DIV对象的绘制和设置
 嵌套的AP DIV，将光标插入点定位到所需的AP Div
中，选择“插入/布局对象/AP Div”命令即可在现有AP
Div中创建一个嵌套AP Div。
Dreamweaver 网页制作
8.14
AP DIV对象的绘制和设置
 嵌套的AP DIV，将光标插入点定位到所需的AP Div
中，选择“插入/布局对象/AP Div”命令即可在现有AP
Div中创建一个嵌套AP Div。
 选中AP DIV，在属性面板可以进行相应的属性设置。
Dreamweaver 网页制作
8.15
AP DIV的管理

AP DIV的管理主要包括选择AP Div、更改AP
Div的层叠顺序、更改AP Div的可见性操作和调
整AP DIV的大小等。 选择“窗口|AP元素”或按
[F2]键打开AP元素面板。
主控
制区
Dreamweaver 网页制作
8.16
AP DIV的管理
 选择AP Div元素，选一个按[ctrl]键可同时选择多个。
 更改AP DIV元素的层叠顺序。
双击可
以修改
 调整AP DIV的大小，拖动AP DIV控制边框即可，或
者通过属性面板修改参数也可调整。
Dreamweaver 网页制作
8.17
AP DIV的管理
 移动AP Div元素，将鼠标移至AP Div边框，当光标变
为4个向外的箭头时，按住左键可以移动，或者通过属
性面板修改参数也可移动。
 对齐方式，选择“修改|排列顺序”如下图设置上对齐：
上对齐
Dreamweaver 网页制作
8.18
AP DIV与表格的转换

表格和AP DIV都可用于布局，在dreamweaver
CS5中，表格和AP DIV可以互相转换。
 选择“修改|转换|将AP DIV转换为表格”命令，可将
文档中所有AP DIV转换为表格。
Dreamweaver 网页制作
8.19
练习

打开素材文档，在图像top中插入导航图像文件
navibar.jpg；分别设置导航图像中的4段文本设置
矩形热点区域。

将图像img2.jpg的大小调整为宽278、高185，并
对其进行重新取样设置。
Dreamweaver 网页制作
8.20