1
第 2章 Dream weaver网页设计技术
学习目标
? 面板组、插入菜单、属性面板的使用
? 文本的格式化类型
? 超链接的使用
? 用表格组织网页
? 框架、表单及层的使用
? 动态网页技术
2
第 2章 Dream weaver网页设计技术
教学内容
2.1 Dreamweaver基础知识
2.2 创建及设计页面
2.3 链接与导航
2.4 用表格和表格布局模式布局页面
2.5 用框架布局页面
2.6 表单的使用
2.7 层的使用
2.8动态网页技术
本章小结
返回总目录
3
2.1 Dreamweaver基础知识
返回目录
Dreamweaver MX 2004工作界面
Dreamweaver 由
Micromedia公司
出品，是当今最
流行的专业网页
设计、网站管理、
网页可视化编程
应用软件。主要
用于制作网站的
静态网页，具有
跨平台、跨浏览
器的特点。左图
为 Dreamweaver
MX 2004工作界
面 。
4
2.1 Dreamweaver基础知识 — 菜单栏
返回目录
菜单栏
“文件”菜单,包含“文件”菜单的标准菜单项。
“编辑”菜单,包含“编辑”菜单的标准菜单项。
“查看”菜单,可以设置文档的各种视图。
“插入”菜单,与“插入”栏功能相似，用于向文档插入对象。
“修改”菜单,可以更改选定项目的属性。
“文本”菜单,用于设置文本的格式。
“命令”菜单,提供对各种命令的访问。
“站点”菜单,提供用于管理站点、上传站点和下载文件的菜单项。
“窗口”菜单,提供对 Dreamweaver 中的所有面板、检查器和窗口
的访问。在窗口菜单中可以设置面板的打开或关闭。
“帮助”菜单,提供对 Dreamweaver 文档访问的帮助信息，在
Dreamweaver中遇到的大部分问题都可以从“帮助”菜
单
中找到答 案。
5
2.1 Dreamweaver基础知识 — 插入栏
单击“插入”栏的下拉按钮，
出现菜单方式的选项卡。
可以根据 插入对象的不同 选
择不同类别的选项卡，不同选项
卡 包含创建不同类型对象的按
钮 。单击“显示为制表符”可转
为
常规样式的“插入”栏。图为插
入”
栏的两种显示方式：
返回目录
“插入”栏的两种显示方式
6
2.1 Dreamweaver基础知识 — 文档工具栏
文档工具栏如右图所示,
包含按钮和弹出式菜单,
提供各种, 文档, 常用视图, 各种查
看选项和一些普通操作 。 文档工
具栏内容从左到右依次为：
代码视图,以代码的形式显示页面，方便文档代码编写。
拆分视图,同时显示代码和设计视图，可同时看到两种效
果。
设计视图,以设计形式显示视图，可看到所见即所得的网页
效果。
标题,可在标题文本框中为文档输入或修改标题。
服务器调试, 显示一个调试现行浏览器的报告。
文件管理,显示“文件管理”弹出式菜单。
在浏览器中预览 /调试,随时预览网页在浏览器中的效果。
文档工具栏
返回目录
7
2.1 Dreamweaver基础知识 — 文档窗口
文档窗口用于显示文档, 有, 设计视图,,, 代码视
图,,, 拆分试图, 三种显示方式 。
设计视图,用于可视化页面布局, 可视化编辑和应用
程序开发的设计环境, 此视图类似在浏览器中查看页面 。
代码视图,用于编写或编辑 html,JavaScript,服务
器语言代码, 其他类型代码的编码环境 。
拆分视图,可以在单个窗口中同时看到同一文档的
,代码, 视图和, 设计, 视图 。
返回目录
8
2.1 Dreamweaver基础知识 — 属性面板
属性面板
属性面板用于
显示和修改已选定
对象的属性，可以
对文本、图像、表
格、层等进行属性
设置。不同的对像
对应不同的属性面
板。
打开“窗口”
菜单 → 选“属性”，
可以显示或隐藏属
性面板
返回目录
9
2.1 Dreamweaver基础知识 — 面板组
面板组
面板组在工作界面的
右边，如图 所示。单击面
板窗口左边的按钮，可展
开或折叠整个面板窗口。
单击每一个面板组左上方
的按钮，可展开或折叠该
面板组窗口。
返回目录
10
2.2 创建及设计页面 — 创建文档
1．创建网页文件
创建空白网页可以用两种方法：
方法 1：在起始页“创建新项目”列表中单击,HTML”，建立一个
空白
页。
方法 2：在工作窗口打开“文件”菜单 → 选“新建” →,类别”列
表中选
“基本页” →,基本页”列表中选,HTML” → 单击“创建”，建立一
个空白
页。
2．利用 Dreamweaver提供的示例文件创建网页
“文件”菜单 →,新建” → 在“类别”列表中选一种实例文档（如
页面设计
CSS） → 在“页面设计 CSS”列表中选一种网页样式 → 单击“创建”，
网页
中将显示文字和页面布局，修改其中的文字及图像，快速创建所需网
返回目录
11
2.2 创建及设计页面 — 创建文档
3．保存新建立的网页
“文件”菜单 →,保
存” →
指定保存位置、文件名及
保存类型 → 单击“保存”。
4．设置文档属性
“修改”菜单 →,页面
属
性”，打开“页面属性”
对话
框，如图所示。通过“页
面
属性”对话框可以对页面
页面属性对话框
返回目录
12
2.2 创建及设计页面 — 设置文本
文本是网页元素中主要部分 。
1．输入文本
在文档窗口单击，将插入点置于文档中所需位
置，输入文本或插入其他网页元素。
2．设置文本格式
文本格式的设置利用属性面板完成，属性面板
可以对文字标题、字体字号、颜色、对齐方式、
列表等作设置。
返回目录
13
2.2 创建及设计页面 — 插入水平线
水平线能将网页中不同
功能的区域分割开来 。
插入水平线练习
1.在页面单击鼠标确定水平线位
置 →,插入”菜单 →,水平
线”。
2.选中水平线 → 在属性面板为水
平线起名,line-1”。
3.宽度设为 200像素，高度为 10
像素，若用“百分比”作宽度
单位，表示宽度占浏览器窗口
的百分比。设置水平线在页面
中的对齐方式为“居中对齐”。
如图所示。
插入水平线
返回目录
14
2.2 创建及设计页面 — 使用 CSS样式
样式是一系列预制的排版命令 。 CSS（ Cascading Style Sheet
层叠式样式表 ） 是一系列格式规则, 包括对文字及段落的修饰, 用
于控制网页的外观, 使整个站点中的网页格式保持统一, 快速实现
网页格式化 。 同一网页中样式按不同等级应用, 手动 html格式覆盖
css样式所应用的格式 。
样式表文件扩展名为,CSS,是纯文本格式, 可使用任何纯文本
编辑器创建或打开样式表文件 。 建立样式表文件要依据 CSS规则,
它由两部分组成,选择器和声明 。 选择器为样式名称, 声明用于定
义样式元素 。 Dreamweaver提供创建样式表的模板, 可轻松创建出
用户所需的样式表 。
返回目录
15
2.2 创建及设计页面 — 使用 CSS样式
1,创建 CSS样式表
（ 1）“文件”菜单 →,新建”（打开“新建文档”对话框） → 在
“类别”列表框中选择,CSS样式表” → 在右侧的列表框中选
择一种样式表，通过预览框查看其效果。
（ 2）单击“创建”按钮打开样式表编辑页面，扩展名为,.css”。
（ 3）“文件”菜单 →,保存” → 下拉框中选择“样式表
（ *.css）” → 输入样式表名称 → 单击“保存”按钮。
2．新建 CSS样式
若对创建的模板样式不满意，还可以新建样式，步骤如下：
（ 1）确定插入点，执行下面操作之一打开“新建 CSS样式”对话框。
·在,CSS样式”面板中单击“新建 CSS样式”按钮；
·在文本属性面板中选择“样式” →,管理样式” → 新建；
·“文本”菜单 →, CSS样式” →,新建 CSS样式”,对话框如图
（新建
CSS样式）所示；
返回目录
16
2.2 创建及设计页面 — 使用 CSS样式
（ 2）在“名称”文本框中输
入
新样式名。
（ 3）“类型”区中提供 3种
类型
选择其中一项。
（ 4）单击“确定”按钮，出
现
“新样式的 CSS样式定
义”
对话框，在其中定义样
式的属性。
（ 5）创建样式后，单击“确
定”按钮，该样式会出
现
在样式表文本中。
（ 6）单击“文件” →,保存”
命
令，保存当前样式表文
件。“新样式的 CSS样
新建 CSS样式
CSS样式定义
返回目录
17
2.2 创建及设计页面 — 使用 CSS样式
3．样式表在网页中的应用
（ 1）打开需要应用样式表的网页 →,文本”菜单
→ CSS
样式 → 编辑样式表 → 在弹出的对话框中单击“链
接” → 单击“浏览” → 选择刚创建的样式表 → 单
击“确
定”回到“编辑样式表”对话框 → 在列表中显示
刚添
加的样式表文件 → 单击“完成”。
（ 2）如果给标题套用刚创建的样式，方法为：将插入
点置于,类,所在的段落 →,窗口”菜单
→ CSS样式
→ 在显示的,CSS样式”面板中单击“应用样式”
返回目录
18
2.2 创建及设计页面 — 使用 CSS样式
4．修改样式
若对已设置的样式中某些属性设置不满意，可以修改该样式。
单击,CSS样式”面板中的“编辑样式”按钮 → 在列表中右击需
要修改
的样式名 → 快捷菜单中选择“编辑”命令 → 在弹出的属性对话框中改
动
“样式”及“大小”。
5．删除样式表
“文本”菜单 → CSS样式表 → 弹出“编辑样式表”对话框 → 在列
表框中
选中要删除的样式名 → 单击“删除”按钮。
6．更改样式表
单击“编辑”按钮 → 完成用户对样式表更改 → 单击“完成”按钮。
返回目录
19
2.2 创建及设计页面 — 插入图像
Web页图像的格式通常有三种,GIF, JPEG,PNG。
1,插入图像
在网页中插入图像可按以下操作进行：
在文档窗口中单击以确定图像要插入的位置 →,插入”
菜
单 →,常用”类别中单击“图像”图标旁的向下箭头 → 在
弹出的
菜单中选择“图像” → 弹出“选择图像源文件”对话框
（“文件
系统”用来选择图形文件，“数据源”用来选择动态图像
源文
件） → 指定图像文件所在位置 → 从列表框选取所需的图像
文件 → 单击“确定” 。
返回目录
20
2.2 创建及设计页面 — 插入图像
2．编辑页面图像
在 Dreamweaver 中可以直接编辑页面图像，包括改变
大小、对齐方式、调整亮度和对比度、锐化图像等。
1）调整大小
单击页面中的图像 → 鼠标移至调节柄处拖动（按 shift
键保持图像比例不变），也可通过“属性”面板输入“高”
和
“宽”的具体数值来调整图像大小。
2）设置图像的对齐方式
选定图像 → 单击“属性”面板中对齐按钮组中的一个
使图
像移至页面的左侧、右侧或居中。若既有文字又有图像，
返回目录
21
2.2 创建及设计页面 — 插入图像
用“属性”面板中“对齐”下拉列表框来改变图像与文字
的相互
对齐方式。
3）调整亮度 /对比度或锐化图像
选择图像 → 单击图像属性面板中的“亮度 /对比
度” → 拖动滑块进行调节 → 单击“锐化” → 改变图像
锐度。
返回目录
22
2.3 链接与导航 — 文档位置和路径
每个网页都有一个惟一的地址，称为统一资源
定位器（ URL）。当创建本地链接时，通常指定一个起自
当前文档或站点根文件夹的相对路径。
连接路径有三种类型：
1．绝对路径,提供所链接文档的完整 URL。
2．文档相对路径,省略当前文档和所链接文档都相
同的绝对 URL部分，只提供不同的路径部分。
3．站点根目录相对路径,提供从站点文件夹到文档的
路径。
返回目录
23
2.3 链接与导航 — 链接到文档的常用方法
超链接源通常采用文本和图像，链接目标通常为
网页或文件，一般用 URL定义。一个文本超级链接只
分配一个目标 URL地址。图像上的超级链接不能直接
在浏览器中显示，访问时可利用鼠标指针判断包含超
级链接的图像。
图像超级链接可以用两种方式分配目标 RUL：
1．整个图像作为一个超级链接。
2．图像分为多个热点，用热点作为图像上的超级
链接区域。
返回目录
24
2.3 链接与导航 — 创建文本超链接
使用属性面板的文件夹图标、链接文本框或“点到文
件”
图标链接文档。方法如下：
1．文档窗口的“设计视图”中选择文本或图像 。
2．属性面板的“链接”框中填入要链接到的页面地址，
最好用相对路径地址，也可以单击“点到文件”图标，选
取
要链接到的文件，或用鼠标把本地站点文件列表中的文件
直接拖到属性面板的“链接”框中。
3．对“目标”进行设置。“目标”用来定义超链接被
点击
时链接到的页面视窗打开方式。目标后的下拉选框可不
选，这时页面在原窗口中打开。
返回目录
25
2.3 链接与导航 — 命名锚记链接
命名锚记 用于在文档中设置标记，这些标记通常放在
文档的特定主题处或顶部，然后创建到这些命名锚记的链
接。
创建到命名锚记的连接过程分两步,创建命名锚记 和
创建到命名锚记的链接 。
1．创建命名锚记：将插入点置于要放置锚记的位置
→,插入”菜单 →,命名锚记” → 在“锚记名称”框中输
入锚记名
字 → 单击“确定”。在插入点即出现一个锚记。
2．创建锚记链接：选定要添加链接的文字 → 属性面板
的“链接”框中输入,#”和锚记名字 → 回车确认。
返回目录
26
2.3 链接与导航 — 图像地图
用一个图形的不同部位制作热点分别链接到不同页
面，称为图像地图。分两步如下：
1．创建图像地图热点
图形属性面板左下方有一项为地图，用它完成制作图
像地图。在其后可填入映象名称，若不填,Dreamweaver
会 自动加上一个名字。“地图”下面有三个图标，从左到
右
依次为：截取矩形、截取圆形和截取不规则图形。用鼠标
选中图形的某个区域，当鼠标拖出的选框与目标不重合
时，可使用键盘上的方向箭头来调节。
2．为热点指定链接
选定要添加链接的热点，在热点属性面板中输入链接目
标，在“替代”框中输入提示性文字。
返回目录
27
2.4 用表格和表格布局模式布局页面 — 创建表格
1,将插入点置于网页中要插入
表格的位置 →,插入”菜单 →,表
格”，
出现如图所示的“插入表格”对话
框。
“行数”框 指定表格行数。
“列数”框 指定表格列数，
“宽度”框 指定表格宽度。
“边框”框 指定表格边框线宽度。
“单元格填充”框 指定表格中各
单
元格的内容与其边框之间的距离。
“单元格间距”框 中指定表格的
各
单元格之间的距离。
2,设置完成后单击“确定”按
钮，
插入表格对话框
返回目录
28
2.4 用表格和表格布局模式布局页面 — 编辑表格
1．添加行或列：
单击某单元格 →,修改”菜单 →,表格” →,插入行”（或“插
入列”）。
2．删除行或列
选定完整的行或列 →,编辑”菜单 →,清除”（或按 delete键）。
3．合并单元格或拆分单元格
选取连续单元格 →,修改”菜单 →,表格” →,合并单元格”
（或拆分单
元格）。也可单击属性面板中,合并单元格” 或“拆分单元格”按
钮。
4．改变单元格所跨的行或列的数目
选定单元格 →,修改”菜单 →,表格” →,增加行宽”（或“增
加列宽”）。
选定单元格 →,修改”菜单 →,表格” →,减少行宽”（或“减
少列宽”）。
5．使用剪切、复制、粘贴命令 对单个单元格或多个单元格进行操
作，能保留单元格的格式设置。
返回目录
29
2.4 用表格和表格布局模式布局页面 — 表格属性面板
选定表格后，表格属性面板如图所示。可对表格
属性面板中各选项进行设置。
表格属性面板
返回目录
30
2.4 用表格和表格布局模式布局页面 — 用布局模式布局页面
1．绘制布局单元格
绘制布局单元格步骤,
1）“插入”栏中“布
局”选
项卡当前 → 选“布局视
图”。
2）单击“绘制布局单
元
格”按钮。
3）将鼠标指针移到页
面上拖动创建布局单元
格。如图绘制的单元格为
蓝色的轮廓、白色的背
景。
布局单元格
返回目录
31
2.4 用表格和表格布局模式布局页面 — 用布局模式布局页面
2．绘制布局表格
绘制布局表格的步骤：
1）布局视图当前 → 单击“插
入”栏。
2）“布局”选项卡当前 → 选
“绘
制布局表格”按钮。
3）将鼠标指针在页面拖动以
创建布局表格。
如图绘制的表格具有绿色轮
廓线。在绘制的每个表格顶部有
一个“布局表格”标签，能帮助
用
户识别并选定表格。
布局表格
返回目录
32
2.4 用表格和表格布局模式布局页面 — 用布局模式布局页面
3．绘制嵌套布局表格
步骤如下：
1）在布局视图中单击“插入”栏 →,布局”
页 →,绘
制布局表格”按钮。
2）将鼠标指针定位到已有布局表格的灰色空
间中 → 单击并拖动鼠标创建嵌套布局表格。嵌套布
局表格不能大于包含它的布局表格。
4．向布局单元格中添加内容
单击需要插入内容的布局单元格，输入文本或
者插入其他对象。 要想让布局单元格自动适应文
本内容，应选择“清除单元格高度”命令。
返回目录
33
2.4 用表格和表格布局模式布局页面 — 用布局模式布局页面
5,移动或调整大小
（ 1）调整布局单元格或表格大小：
单击布局单元格的边框或单击
布局表格上方的“布局表格”
标签 → 将鼠标指针指向某个句
柄 → 按住鼠标左键拖动。
（ 2）移动布局单元格或表格：
单击布局单元格的边框或单击
布局表格标签 → 拖动布局单元
格或表格到目标地。
6,格式化布局单元格和布局表
格
通过属性面板可以改变布局单
元格或表格的外观，设置单元
格内容的对齐方式、宽度、高
度和背景颜色等。如右两图所
示。
布局单元格属性面板
布局表格属性面板
7．设置列宽度
布局视图可以使用两种类型宽度：固
定宽度和自动伸展。固定宽度以像素
值指定宽度，自动伸展则使得宽度根
据窗口大小自动调整。
返回目录
34
2.5 用框架布局页面 — 创建框架和框架集
Dreamweaver 提供两种创建框架集的方法,选择预定义框架集
或用户自己设计 。
1．插入预定义框架集
单击“布局”卡的,框架”按钮,弹出菜单如下图所示 。可从中选
择预
定义框架 。 若对预定义框架集不满意，可进
行手工改动。方法是：先用预定
义框架集产生一个框架，用鼠标
上下拖边框可以水平划分窗口，
左右拖边框可以垂直划分窗口，
从四角拖，可以划分四个框架。
拖动框架之间的分割线可调整框
架大小。若想继续拆分，按 ALT键
拖动框架。如果要删除某框架，
将框架边框拖离页面即可。
预定义框架集样式
返回目录
35
2.5 用框架布局页面 — 设置框架集与框架属性
1．设置框架集属性。
单击框架边框线选定框架集，下图
为“顶部和嵌套的左部框架”属性面板。
“顶部和嵌套的左部框架”属性面板
2．设置框架属性
按住 ALT键单击框架内部，
此时属性面板为框架属性面板，
如下图所示。
框架属性面板
返回目录
36
2.5 用框架布局页面 — 在框架中插入文本和图像
可以加载已经创建的网页，也可直接在每个框架区域中插入
文本和图像。
1）在框架中单击 →,插入”菜单 →,图像”，可在当前位
置插入
图像。
2）在框架中单击 → 输入文字，可在当前位置插入文本。如
图所示。
在框架中插入文本和图像
返回目录
37
2.5 用框架布局页面 — 保存框架和框架集
框架结构完成后，首先选定框架集，“文件”菜单
→,保存框架”，在“另存为”对话框中选择要放置网页
的文件夹，为框架文件命名，最后单击“保存”按钮。要
保存框架集中的所有的文件，单击“文件”菜单 →,保存
全部”，在“保存为”对话框中，使用框架线辨别正保存
的是哪个框架或框架集，为每个框架文件指定文件名，逐
一保存。
如果某页面选定的框架为“顶部和嵌套的左部框架”，
页面被划分为 3个框架，存储时要存储 4个独立文件：一个
是框架集文件，通常起名为,index.htm”，另外三个是框架
内容文件。框架集文件除了存储页面框架大小和位置信息，
还存储每个框架载入文档的文件名。框架内容文件则存储
页面框架中的内容。
返回目录
38
2.6 表单的使用 — 表单概述
表单是由文本和表单域组成的集合，用于在因特网上
收集指定类型的信息，如登录注册、图书订购等。 表单的
工作原理 很简单，访问者在被称为“表单域”的特定网页
元
素中键入或选择相关的信息，单击“提交”按钮将信息提
交
给服务器。服务器根据表单结果进行处理，并将这些信息
保存到特定文件中以便站点管理员查看。
一个完整的表单应该包含两个组件,一个是表单对象,
它在网页中进行描述,另一个是表单处理程序,它是 Web
服务器上的一个程序，当站点访问者向服务器提交一个表
单时程序开始执行。只有将网页中的表单与某个表单结果
处理程序关联之后才能实现该表单功能。表单中包含多种
被称作“控件”的对象 。
返回目录
39
2.6 表单的使用 — 创建表单
1．插入表单
插入表单可采用两种方法：
（ 1）将插入点置于要插入表单的位置 →,插入”菜单
→,表单”，可看到表单被插入到当前位置。
（ 2）将插入点置于要插入表单的位置 → 单击“插入”栏
内“表单”页 → 单击“表单”按钮，表单将被插入到当前
位置。
2．各表单对象图标
表单卡如图所示，上面有各表单对象的按钮图标，单击
其中的某个按钮，将在表单中生成该对象。
表单卡
返回目录
40
2.6 表单的使用 — 创建表单
3．设置表单域属性
将插入点置于表单内部，显示表单的属性面板，如图所示。
表单名称,在文本框中为表单设一个名称，命名后的表单可以用
JavaScript或 VBScript之类的脚本语言进行控制。
动作,指定表单被客户端提交后在服务器端对其信息和数据做出响应
和处理的程序或脚本的 URL地址，在此项中输入程序的路径名称，或者单
击右边的文件夹图标，在弹出的对话框中选择要运行的程序或带有脚本程
序的网页。
目标,指定一个窗口，显示调用程序所返回的数据。
MIME类型,指定对提交给服务器进行处理的数据使用 MIME编码类型。
表单属性面板
返回目录
41
2.6 表单的使用 — 添加表单对象
1.添加表单对象
在表单中要插入对象的位置单击 → 单击表单页中对
象图标。
2.添加文本域对象
文本域是用来输入信息的表单对象。文本域类型有 3
种：
1）单行文本域：用来填写单个字符或者简短回答。
如地址等。
2）多行文本域：用于填写较长内容。该文本域行数
和字数都可由用户自己确定。
3）密码域：一种特殊的文本域。当输入文本时，文
本显示为星号或其他符号。
返回目录
42
2.6 表单的使用 — 添加表单对象
3．添加单选按钮组
单选按钮组提供彼此排斥的选项值，在单选按钮组内只
能选择一个选项。
4．添加复选框
复选框允许从一组选项内同时选择多个选项。
5．添加列表
列表提供一个滚动条供用户浏览项目，能在有限的空间
内为用户提供许多选项，并进行多重选择。
6．添加按钮对象
使用表单按钮能将输入表单的数据提交到服务器，还可
将其他已经在脚本中定义的处理任务分配给按钮，例如，
表单按钮可以根据指定的值计算出所选商品的总价。
返回目录
43
2.6 表单的使用 — 检查表单
表单通常有确定的填写规范，在网页中应提醒访
问者避免简单的填写错误。
“检查表单”动作能检查指定文本域的内容以确
保用户输入的正确性。使用 onBulr事件 可将此动作附
加到单个文本域，在用户填写表单时对域进行检查。
使用 onSubmit事件 可将动作附加到表单，在用户单
击“提交”按钮时对多个文本域进行检查。
返回目录
44
2.7 层的使用 — 创建层
层是网页制作的新技术，特点是使用方
便，可以使用“层”来布局网页，比表格更
灵活。在 Dreamweaver中，层可以放置在网
页内任何位置，不但可以包含文本、图像、
表格、插件，还可以在层中嵌套另外的层。
1．在网页中插入层
在网页中插入层的操作步骤为：将插入
点置于要插入新层的位置 → 单击“插入”栏
“布局”页中的“层”按钮。拖动可以改变
层大小。
2．创建嵌套层
嵌套层是包含在其他层中的层，嵌套可
以将若干层组织在一起。嵌套层随父层一起
移动，并且可以设置为继承其父层的可见性。
要创建嵌套层，只需将插入点置于已经创建
的层中，单击“插入”菜单，选“层”命令
即可。嵌套层如右图所示。
嵌套层
返回目录
45
2.7 层的使用 — 创建层
3．通过层属性面板定义属性
选定层后，其属性面板如图所示。
层的属性面板
各选项的意义说明如下：
（ 1）层编号：指定层的名称。
（ 2）宽、高：指定层的宽度和高度。
（ 3）左、上：指定层相对于页面或被嵌
套层的左上角的位置。
（ 4） Z轴：指定层的叠放次序。编号大
的层在编号小的层上面。
（ 5）可见性：参数有 default、
visible,hidden和 inherit，对应的含
义为：默认、可见、隐藏、继承父
层的可见性。
（ 6）背景颜色,指定层的背景颜
色。
（ 7）背景图像,指定层的背景图
像。
（ 8）溢出：选择 visible则扩展层的
大小使其所有内容均可见。选择
hidden则保持层的大小裁掉所有超
出层大小的内容。选择 scroll则不管
内容是否超过层的大小都提供滚动
条。选择 auto则只有在内容超出层
的大小时才出现滚动条。
返回目录
46
2.7 层的使用 — 编辑层
1．选定层
对层编辑前应先选定层，选定一个层可以使用下列
方法之一：
（ 1）单击层的边框，即可选定该层。
（ 2）单击层内部的任意位置，层矩形的左上角将显
示句柄图标，然后单击句柄图标，即可选定该层。
（ 3）在层面板中单击该层的名称。
2．移动层
选定层后按住鼠标左键拖动层左上角的句柄图标，
或者直接按键盘上的方向键进行移动，每按一次方向键
可将选定的层沿相应的方向移动一个像素。
返回目录
47
2.7 层的使用 — 编辑层
3．改变层的大小
可以调整单个层大小, 也可以同时调整多个层大小使
它们具有同样的高度和宽度 。
方法为：先选定层 → 用鼠标拖曳层周围的任意一个句
柄 。
4,对齐多个层
使用层的对齐命令, 可以对齐两个或者多个层, 在对
齐多个层时将使用最后一个被选定的层作为基准 。
对齐层的操作步骤为：选定需要对齐的多个层 →, 修
改, 菜单 →, 对齐, → 从级联菜单中选择一种对齐方
式 。
返回目录
48
2.7 层的使用 — 在层中插入对象
层是一种容器，可以向其中插入任何对象。具体操
作步骤如下：
（ 1）将插入点置于层中，使该层处于激活状态。
（ 2）在层中输入文本或者插入图像，方法与在空白
页面中的操作相同。
返回目录
49
2.8 动态网页技术 — 实用行为
１．行为概述
行为是在网页中进行的一系列动作，通过这些动作实现用户同
网页的交互，也可以通过动作使某个任务被执行。通常，一个行为
由一个事件和一个动作组成。事件是浏览器为每个网页元素做的定
义，以响应用户的动作。动作包含了预先写好的用来执行任务的
JavaScript代码。网页中的每个元素都可以看作是一个对象，在
Dreamweaver MX 2004中可以给任何对象附加一个行为。
２．行为面板
“窗口”菜单 →,行为”，打开“行为”面板，行为列表中显
示已经附加在当前元素上的动作，如果同一事件对应几个动作，对
应的动作将按被执行顺序出现。面板的加号和减号按钮用于添加和
删除动作，上下箭头按钮用于调整针对同一对象动作的执行顺序。
返回目录
50
2.8 动态网页技术 — 实用行为
３．附加行为
可以对整个页面附加行为，也可以对链接、图像、表单中的元
素附加行为。
４．编辑行为
步骤如下：
1）选定一个附加了行为的对象。
2）打开“行为”面板，该对象附加的行为出现在行为列表中。
3）选定行为后，单击上箭头或下箭头按钮可以改变给定事件
的顺序，。
4）双击行为或选定行为后回车，可以在出现的对话框中改变
参数，如将上例中“你好，欢迊访问本网站！” 改为“你好，欢
迊进入本网站！”。
5）选定行为后单击“－”按钮可删除某个行为。
返回目录
51
2.8 动态网页技术 — 创建图像交换效果
图像交换效果是指在浏览器中当鼠标指针移到一幅图像上时，图像会
变成另一幅图像，当鼠标移出图像范围时，又换回原来的图像。
创建图像交换效果之前先准备两张图像，一张是初始图像，另一张是
鼠标移到图像上时更换的图像，两张图像最好有相同尺寸，否则在替换时
会打乱页面上其他内容的编排 。
图像交换练习
1）将插入点置于要添加图像的位置。
2）“插入”菜单 →,交互式图像” →,鼠标经过图像”，出现,插
入鼠标经过图像”对话框。如图所示。
3）在该对话框中设置参数，
设置完毕后单击“确定”按钮 。
4）按 F12键在浏览器中预
览。鼠标在图像外时是原始图
像，将鼠标指向图像时，图像
就变为交换图像了。,插入鼠标经过图像”对话框
返回目录
52
2.8 动态网页技术 — 插入 Flash对象
Flash对象为 SWF文件，在 Dreamweaver MX 2004中可以直接插入
Flash影片。下面，我们用几个例子来说明操作方法。
插入 Flash影片练习
1）将插入点置于想插入 Flash影片的位置。
2）“插入”菜单 →,媒体” →, Flash”命令，出现“选择文件”对
话框。
3）选择要插入的 Flash文件 → 单击“确认”，将影片插入到网页中。
4）单击属性面板中的“播放”按钮可在文档窗口中预览 Flash影片，
单击“停止”按钮可停止播放 Flash影片。属性面板如图所示。
插入 Flash电影
返回目录
53
2.8 动态网页技术 — 插入 Flash对象
使用 Flash按钮练习
1）“设计视图”编辑状态下 → 在文档窗口中单击以确定插入按钮的
位置 →,插入”菜单 → 选“交互式图像” → 再选,Flash按钮”，出现如
图所示的“插入 Flash按钮”对话框。
2）“样式”列表框中选择需要
的按钮样式 →,按钮文本”框中输入
的文本将是按钮上的显示文本 →,字
体”下拉列表框中选择使用的字体。
3）“链接”文本框中为按钮指
定要链接的地址 →,背景色”框中为
Flash动画设置背景颜色，也可以单
击背景色按钮直接选。
4）在“另存为”文本框中输入
文件名称并保存新的 SWF文件。
5）单击“确定”按钮，在文档
窗口中插入了 Flash按钮。
“
插
入Fl
ash
按
钮
”
对
话
框
返回目录
54
2.8 动态网页技术 — 插入 Flash对象
使用 Flash文本对象练习
1）新建文档 → 选择“设计视图”。
2）“插入”菜单 →,交互式图
像” →, Flash文本”，出现,插入 Flash
文本”对话框。
3）在“文本”框中输入“联系我们”。
4）设置字体 → 设置文字的大小 →,颜
色”框中设置文本的颜色 →,转滚颜色”
框中设置鼠标指针经过 Flash文本对象上方
时文本显示颜色 →,背景色”框中设置文
本的背景颜色。
5）在“另存为”框中输入文件名称。
6）如果输入了链接，要在“目标”框
中指定打开链接文档的目标框架或目标窗
口。
7）设置完毕后单击“确定”按钮，将
Flash文本插入到文档窗口中 。
插入 Flash文本对话框
返回目录
55
本 章 小 结
? Dreamweaver基础知识
Dreamweaver MX 2004默认工作界面包括菜单栏,
,插入, 栏, 文档工具栏, 文档窗口, 面板组, 标签, 属性面板 。
? 创建及设计页面
– 可以创建空白网页, 也可用实例文件创建网页 。
– 文本是网页元素中主要部分, 可创建和编辑网页 。
– 水平线能将网页中不同功能的区域分割开来 。
– CSS是一系列格式规则, 包括对文字及段落的修饰, 用于控
制网页的外观, 使整个站点中的网页格式保持统一, 快速实
现网页格式化 。
– Dreamweaver允许在, 设计, 视图或, 代码, 视图中将图
像插入文档 。
返回目录
56
本 章 小 结
? 链接与导航
– 连接路径有三种类型：绝对路径, 文档相对路径和站点根目录相
对路径 。
– 超链接源通常采用文本和图像 。
– 创建到命名锚记的连接过程分两步：首先创建命名锚记, 然后创建
到命名锚记的链接 。
– 用一个图形的不同部位制作热点分别链接到不同页面, 称为图像地
图 。
? 用表格和表格布局模式布局页面
– 使用, 插入, 栏的, 常用, 选项卡或, 插入, 菜单都能创建一个新
表格 。
– 选择, 修改, 菜单 →, 表格,, 通过级联子菜单选择对表格进行编
辑 。
– 在布局视图中, 用表格作为基础结构来设计页面, 可以在页面中方
便的绘制单元格, 然后将这些单元格移动到所需的位置 。
返回目录
57
本 章 小 结
? 用框架布局页面
– 创建框架和框架集
– 设置框架集与框架属性
– 在框架中插入文本和图像
– 保存框架和框架集
? 表单的使用
– 表单为网页提供交互功能, 表单可以按照统一模式从用户处
收集信息, 然后将信息提交给服务器进行处理 。
– 创建表单
– 添加表单对象
– 检查表单动作能检查指定文本域的内容以确保用户输入的正
确性 。
返回目录
58
本 章 小 结
? 层的使用
– 创建层
– 当处理页面布局时, 还可以对层进行选择, 移动, 大小调整
和对齐等操作 。
– 层是一种容器, 可以向其中插入任何对象 。
? 动态网页技术
– 行为是在网页中进行的一系列动作, 通过这些动作实现用户
同网页的交互, 也可以通过动作使某个任务被执行 。
– 图像交换效果是指在浏览器中当鼠标指针移到一幅图像上时,
图像会变成另一幅图像, 当鼠标移出图像范围时, 又换回原
来的图像 。
– 在 Dreamweaver MX 2004中可以直接插入 Flash影片 。
返回目录
第 2章 Dream weaver网页设计技术
学习目标
? 面板组、插入菜单、属性面板的使用
? 文本的格式化类型
? 超链接的使用
? 用表格组织网页
? 框架、表单及层的使用
? 动态网页技术
2
第 2章 Dream weaver网页设计技术
教学内容
2.1 Dreamweaver基础知识
2.2 创建及设计页面
2.3 链接与导航
2.4 用表格和表格布局模式布局页面
2.5 用框架布局页面
2.6 表单的使用
2.7 层的使用
2.8动态网页技术
本章小结
返回总目录
3
2.1 Dreamweaver基础知识
返回目录
Dreamweaver MX 2004工作界面
Dreamweaver 由
Micromedia公司
出品，是当今最
流行的专业网页
设计、网站管理、
网页可视化编程
应用软件。主要
用于制作网站的
静态网页，具有
跨平台、跨浏览
器的特点。左图
为 Dreamweaver
MX 2004工作界
面 。
4
2.1 Dreamweaver基础知识 — 菜单栏
返回目录
菜单栏
“文件”菜单,包含“文件”菜单的标准菜单项。
“编辑”菜单,包含“编辑”菜单的标准菜单项。
“查看”菜单,可以设置文档的各种视图。
“插入”菜单,与“插入”栏功能相似，用于向文档插入对象。
“修改”菜单,可以更改选定项目的属性。
“文本”菜单,用于设置文本的格式。
“命令”菜单,提供对各种命令的访问。
“站点”菜单,提供用于管理站点、上传站点和下载文件的菜单项。
“窗口”菜单,提供对 Dreamweaver 中的所有面板、检查器和窗口
的访问。在窗口菜单中可以设置面板的打开或关闭。
“帮助”菜单,提供对 Dreamweaver 文档访问的帮助信息，在
Dreamweaver中遇到的大部分问题都可以从“帮助”菜
单
中找到答 案。
5
2.1 Dreamweaver基础知识 — 插入栏
单击“插入”栏的下拉按钮，
出现菜单方式的选项卡。
可以根据 插入对象的不同 选
择不同类别的选项卡，不同选项
卡 包含创建不同类型对象的按
钮 。单击“显示为制表符”可转
为
常规样式的“插入”栏。图为插
入”
栏的两种显示方式：
返回目录
“插入”栏的两种显示方式
6
2.1 Dreamweaver基础知识 — 文档工具栏
文档工具栏如右图所示,
包含按钮和弹出式菜单,
提供各种, 文档, 常用视图, 各种查
看选项和一些普通操作 。 文档工
具栏内容从左到右依次为：
代码视图,以代码的形式显示页面，方便文档代码编写。
拆分视图,同时显示代码和设计视图，可同时看到两种效
果。
设计视图,以设计形式显示视图，可看到所见即所得的网页
效果。
标题,可在标题文本框中为文档输入或修改标题。
服务器调试, 显示一个调试现行浏览器的报告。
文件管理,显示“文件管理”弹出式菜单。
在浏览器中预览 /调试,随时预览网页在浏览器中的效果。
文档工具栏
返回目录
7
2.1 Dreamweaver基础知识 — 文档窗口
文档窗口用于显示文档, 有, 设计视图,,, 代码视
图,,, 拆分试图, 三种显示方式 。
设计视图,用于可视化页面布局, 可视化编辑和应用
程序开发的设计环境, 此视图类似在浏览器中查看页面 。
代码视图,用于编写或编辑 html,JavaScript,服务
器语言代码, 其他类型代码的编码环境 。
拆分视图,可以在单个窗口中同时看到同一文档的
,代码, 视图和, 设计, 视图 。
返回目录
8
2.1 Dreamweaver基础知识 — 属性面板
属性面板
属性面板用于
显示和修改已选定
对象的属性，可以
对文本、图像、表
格、层等进行属性
设置。不同的对像
对应不同的属性面
板。
打开“窗口”
菜单 → 选“属性”，
可以显示或隐藏属
性面板
返回目录
9
2.1 Dreamweaver基础知识 — 面板组
面板组
面板组在工作界面的
右边，如图 所示。单击面
板窗口左边的按钮，可展
开或折叠整个面板窗口。
单击每一个面板组左上方
的按钮，可展开或折叠该
面板组窗口。
返回目录
10
2.2 创建及设计页面 — 创建文档
1．创建网页文件
创建空白网页可以用两种方法：
方法 1：在起始页“创建新项目”列表中单击,HTML”，建立一个
空白
页。
方法 2：在工作窗口打开“文件”菜单 → 选“新建” →,类别”列
表中选
“基本页” →,基本页”列表中选,HTML” → 单击“创建”，建立一
个空白
页。
2．利用 Dreamweaver提供的示例文件创建网页
“文件”菜单 →,新建” → 在“类别”列表中选一种实例文档（如
页面设计
CSS） → 在“页面设计 CSS”列表中选一种网页样式 → 单击“创建”，
网页
中将显示文字和页面布局，修改其中的文字及图像，快速创建所需网
返回目录
11
2.2 创建及设计页面 — 创建文档
3．保存新建立的网页
“文件”菜单 →,保
存” →
指定保存位置、文件名及
保存类型 → 单击“保存”。
4．设置文档属性
“修改”菜单 →,页面
属
性”，打开“页面属性”
对话
框，如图所示。通过“页
面
属性”对话框可以对页面
页面属性对话框
返回目录
12
2.2 创建及设计页面 — 设置文本
文本是网页元素中主要部分 。
1．输入文本
在文档窗口单击，将插入点置于文档中所需位
置，输入文本或插入其他网页元素。
2．设置文本格式
文本格式的设置利用属性面板完成，属性面板
可以对文字标题、字体字号、颜色、对齐方式、
列表等作设置。
返回目录
13
2.2 创建及设计页面 — 插入水平线
水平线能将网页中不同
功能的区域分割开来 。
插入水平线练习
1.在页面单击鼠标确定水平线位
置 →,插入”菜单 →,水平
线”。
2.选中水平线 → 在属性面板为水
平线起名,line-1”。
3.宽度设为 200像素，高度为 10
像素，若用“百分比”作宽度
单位，表示宽度占浏览器窗口
的百分比。设置水平线在页面
中的对齐方式为“居中对齐”。
如图所示。
插入水平线
返回目录
14
2.2 创建及设计页面 — 使用 CSS样式
样式是一系列预制的排版命令 。 CSS（ Cascading Style Sheet
层叠式样式表 ） 是一系列格式规则, 包括对文字及段落的修饰, 用
于控制网页的外观, 使整个站点中的网页格式保持统一, 快速实现
网页格式化 。 同一网页中样式按不同等级应用, 手动 html格式覆盖
css样式所应用的格式 。
样式表文件扩展名为,CSS,是纯文本格式, 可使用任何纯文本
编辑器创建或打开样式表文件 。 建立样式表文件要依据 CSS规则,
它由两部分组成,选择器和声明 。 选择器为样式名称, 声明用于定
义样式元素 。 Dreamweaver提供创建样式表的模板, 可轻松创建出
用户所需的样式表 。
返回目录
15
2.2 创建及设计页面 — 使用 CSS样式
1,创建 CSS样式表
（ 1）“文件”菜单 →,新建”（打开“新建文档”对话框） → 在
“类别”列表框中选择,CSS样式表” → 在右侧的列表框中选
择一种样式表，通过预览框查看其效果。
（ 2）单击“创建”按钮打开样式表编辑页面，扩展名为,.css”。
（ 3）“文件”菜单 →,保存” → 下拉框中选择“样式表
（ *.css）” → 输入样式表名称 → 单击“保存”按钮。
2．新建 CSS样式
若对创建的模板样式不满意，还可以新建样式，步骤如下：
（ 1）确定插入点，执行下面操作之一打开“新建 CSS样式”对话框。
·在,CSS样式”面板中单击“新建 CSS样式”按钮；
·在文本属性面板中选择“样式” →,管理样式” → 新建；
·“文本”菜单 →, CSS样式” →,新建 CSS样式”,对话框如图
（新建
CSS样式）所示；
返回目录
16
2.2 创建及设计页面 — 使用 CSS样式
（ 2）在“名称”文本框中输
入
新样式名。
（ 3）“类型”区中提供 3种
类型
选择其中一项。
（ 4）单击“确定”按钮，出
现
“新样式的 CSS样式定
义”
对话框，在其中定义样
式的属性。
（ 5）创建样式后，单击“确
定”按钮，该样式会出
现
在样式表文本中。
（ 6）单击“文件” →,保存”
命
令，保存当前样式表文
件。“新样式的 CSS样
新建 CSS样式
CSS样式定义
返回目录
17
2.2 创建及设计页面 — 使用 CSS样式
3．样式表在网页中的应用
（ 1）打开需要应用样式表的网页 →,文本”菜单
→ CSS
样式 → 编辑样式表 → 在弹出的对话框中单击“链
接” → 单击“浏览” → 选择刚创建的样式表 → 单
击“确
定”回到“编辑样式表”对话框 → 在列表中显示
刚添
加的样式表文件 → 单击“完成”。
（ 2）如果给标题套用刚创建的样式，方法为：将插入
点置于,类,所在的段落 →,窗口”菜单
→ CSS样式
→ 在显示的,CSS样式”面板中单击“应用样式”
返回目录
18
2.2 创建及设计页面 — 使用 CSS样式
4．修改样式
若对已设置的样式中某些属性设置不满意，可以修改该样式。
单击,CSS样式”面板中的“编辑样式”按钮 → 在列表中右击需
要修改
的样式名 → 快捷菜单中选择“编辑”命令 → 在弹出的属性对话框中改
动
“样式”及“大小”。
5．删除样式表
“文本”菜单 → CSS样式表 → 弹出“编辑样式表”对话框 → 在列
表框中
选中要删除的样式名 → 单击“删除”按钮。
6．更改样式表
单击“编辑”按钮 → 完成用户对样式表更改 → 单击“完成”按钮。
返回目录
19
2.2 创建及设计页面 — 插入图像
Web页图像的格式通常有三种,GIF, JPEG,PNG。
1,插入图像
在网页中插入图像可按以下操作进行：
在文档窗口中单击以确定图像要插入的位置 →,插入”
菜
单 →,常用”类别中单击“图像”图标旁的向下箭头 → 在
弹出的
菜单中选择“图像” → 弹出“选择图像源文件”对话框
（“文件
系统”用来选择图形文件，“数据源”用来选择动态图像
源文
件） → 指定图像文件所在位置 → 从列表框选取所需的图像
文件 → 单击“确定” 。
返回目录
20
2.2 创建及设计页面 — 插入图像
2．编辑页面图像
在 Dreamweaver 中可以直接编辑页面图像，包括改变
大小、对齐方式、调整亮度和对比度、锐化图像等。
1）调整大小
单击页面中的图像 → 鼠标移至调节柄处拖动（按 shift
键保持图像比例不变），也可通过“属性”面板输入“高”
和
“宽”的具体数值来调整图像大小。
2）设置图像的对齐方式
选定图像 → 单击“属性”面板中对齐按钮组中的一个
使图
像移至页面的左侧、右侧或居中。若既有文字又有图像，
返回目录
21
2.2 创建及设计页面 — 插入图像
用“属性”面板中“对齐”下拉列表框来改变图像与文字
的相互
对齐方式。
3）调整亮度 /对比度或锐化图像
选择图像 → 单击图像属性面板中的“亮度 /对比
度” → 拖动滑块进行调节 → 单击“锐化” → 改变图像
锐度。
返回目录
22
2.3 链接与导航 — 文档位置和路径
每个网页都有一个惟一的地址，称为统一资源
定位器（ URL）。当创建本地链接时，通常指定一个起自
当前文档或站点根文件夹的相对路径。
连接路径有三种类型：
1．绝对路径,提供所链接文档的完整 URL。
2．文档相对路径,省略当前文档和所链接文档都相
同的绝对 URL部分，只提供不同的路径部分。
3．站点根目录相对路径,提供从站点文件夹到文档的
路径。
返回目录
23
2.3 链接与导航 — 链接到文档的常用方法
超链接源通常采用文本和图像，链接目标通常为
网页或文件，一般用 URL定义。一个文本超级链接只
分配一个目标 URL地址。图像上的超级链接不能直接
在浏览器中显示，访问时可利用鼠标指针判断包含超
级链接的图像。
图像超级链接可以用两种方式分配目标 RUL：
1．整个图像作为一个超级链接。
2．图像分为多个热点，用热点作为图像上的超级
链接区域。
返回目录
24
2.3 链接与导航 — 创建文本超链接
使用属性面板的文件夹图标、链接文本框或“点到文
件”
图标链接文档。方法如下：
1．文档窗口的“设计视图”中选择文本或图像 。
2．属性面板的“链接”框中填入要链接到的页面地址，
最好用相对路径地址，也可以单击“点到文件”图标，选
取
要链接到的文件，或用鼠标把本地站点文件列表中的文件
直接拖到属性面板的“链接”框中。
3．对“目标”进行设置。“目标”用来定义超链接被
点击
时链接到的页面视窗打开方式。目标后的下拉选框可不
选，这时页面在原窗口中打开。
返回目录
25
2.3 链接与导航 — 命名锚记链接
命名锚记 用于在文档中设置标记，这些标记通常放在
文档的特定主题处或顶部，然后创建到这些命名锚记的链
接。
创建到命名锚记的连接过程分两步,创建命名锚记 和
创建到命名锚记的链接 。
1．创建命名锚记：将插入点置于要放置锚记的位置
→,插入”菜单 →,命名锚记” → 在“锚记名称”框中输
入锚记名
字 → 单击“确定”。在插入点即出现一个锚记。
2．创建锚记链接：选定要添加链接的文字 → 属性面板
的“链接”框中输入,#”和锚记名字 → 回车确认。
返回目录
26
2.3 链接与导航 — 图像地图
用一个图形的不同部位制作热点分别链接到不同页
面，称为图像地图。分两步如下：
1．创建图像地图热点
图形属性面板左下方有一项为地图，用它完成制作图
像地图。在其后可填入映象名称，若不填,Dreamweaver
会 自动加上一个名字。“地图”下面有三个图标，从左到
右
依次为：截取矩形、截取圆形和截取不规则图形。用鼠标
选中图形的某个区域，当鼠标拖出的选框与目标不重合
时，可使用键盘上的方向箭头来调节。
2．为热点指定链接
选定要添加链接的热点，在热点属性面板中输入链接目
标，在“替代”框中输入提示性文字。
返回目录
27
2.4 用表格和表格布局模式布局页面 — 创建表格
1,将插入点置于网页中要插入
表格的位置 →,插入”菜单 →,表
格”，
出现如图所示的“插入表格”对话
框。
“行数”框 指定表格行数。
“列数”框 指定表格列数，
“宽度”框 指定表格宽度。
“边框”框 指定表格边框线宽度。
“单元格填充”框 指定表格中各
单
元格的内容与其边框之间的距离。
“单元格间距”框 中指定表格的
各
单元格之间的距离。
2,设置完成后单击“确定”按
钮，
插入表格对话框
返回目录
28
2.4 用表格和表格布局模式布局页面 — 编辑表格
1．添加行或列：
单击某单元格 →,修改”菜单 →,表格” →,插入行”（或“插
入列”）。
2．删除行或列
选定完整的行或列 →,编辑”菜单 →,清除”（或按 delete键）。
3．合并单元格或拆分单元格
选取连续单元格 →,修改”菜单 →,表格” →,合并单元格”
（或拆分单
元格）。也可单击属性面板中,合并单元格” 或“拆分单元格”按
钮。
4．改变单元格所跨的行或列的数目
选定单元格 →,修改”菜单 →,表格” →,增加行宽”（或“增
加列宽”）。
选定单元格 →,修改”菜单 →,表格” →,减少行宽”（或“减
少列宽”）。
5．使用剪切、复制、粘贴命令 对单个单元格或多个单元格进行操
作，能保留单元格的格式设置。
返回目录
29
2.4 用表格和表格布局模式布局页面 — 表格属性面板
选定表格后，表格属性面板如图所示。可对表格
属性面板中各选项进行设置。
表格属性面板
返回目录
30
2.4 用表格和表格布局模式布局页面 — 用布局模式布局页面
1．绘制布局单元格
绘制布局单元格步骤,
1）“插入”栏中“布
局”选
项卡当前 → 选“布局视
图”。
2）单击“绘制布局单
元
格”按钮。
3）将鼠标指针移到页
面上拖动创建布局单元
格。如图绘制的单元格为
蓝色的轮廓、白色的背
景。
布局单元格
返回目录
31
2.4 用表格和表格布局模式布局页面 — 用布局模式布局页面
2．绘制布局表格
绘制布局表格的步骤：
1）布局视图当前 → 单击“插
入”栏。
2）“布局”选项卡当前 → 选
“绘
制布局表格”按钮。
3）将鼠标指针在页面拖动以
创建布局表格。
如图绘制的表格具有绿色轮
廓线。在绘制的每个表格顶部有
一个“布局表格”标签，能帮助
用
户识别并选定表格。
布局表格
返回目录
32
2.4 用表格和表格布局模式布局页面 — 用布局模式布局页面
3．绘制嵌套布局表格
步骤如下：
1）在布局视图中单击“插入”栏 →,布局”
页 →,绘
制布局表格”按钮。
2）将鼠标指针定位到已有布局表格的灰色空
间中 → 单击并拖动鼠标创建嵌套布局表格。嵌套布
局表格不能大于包含它的布局表格。
4．向布局单元格中添加内容
单击需要插入内容的布局单元格，输入文本或
者插入其他对象。 要想让布局单元格自动适应文
本内容，应选择“清除单元格高度”命令。
返回目录
33
2.4 用表格和表格布局模式布局页面 — 用布局模式布局页面
5,移动或调整大小
（ 1）调整布局单元格或表格大小：
单击布局单元格的边框或单击
布局表格上方的“布局表格”
标签 → 将鼠标指针指向某个句
柄 → 按住鼠标左键拖动。
（ 2）移动布局单元格或表格：
单击布局单元格的边框或单击
布局表格标签 → 拖动布局单元
格或表格到目标地。
6,格式化布局单元格和布局表
格
通过属性面板可以改变布局单
元格或表格的外观，设置单元
格内容的对齐方式、宽度、高
度和背景颜色等。如右两图所
示。
布局单元格属性面板
布局表格属性面板
7．设置列宽度
布局视图可以使用两种类型宽度：固
定宽度和自动伸展。固定宽度以像素
值指定宽度，自动伸展则使得宽度根
据窗口大小自动调整。
返回目录
34
2.5 用框架布局页面 — 创建框架和框架集
Dreamweaver 提供两种创建框架集的方法,选择预定义框架集
或用户自己设计 。
1．插入预定义框架集
单击“布局”卡的,框架”按钮,弹出菜单如下图所示 。可从中选
择预
定义框架 。 若对预定义框架集不满意，可进
行手工改动。方法是：先用预定
义框架集产生一个框架，用鼠标
上下拖边框可以水平划分窗口，
左右拖边框可以垂直划分窗口，
从四角拖，可以划分四个框架。
拖动框架之间的分割线可调整框
架大小。若想继续拆分，按 ALT键
拖动框架。如果要删除某框架，
将框架边框拖离页面即可。
预定义框架集样式
返回目录
35
2.5 用框架布局页面 — 设置框架集与框架属性
1．设置框架集属性。
单击框架边框线选定框架集，下图
为“顶部和嵌套的左部框架”属性面板。
“顶部和嵌套的左部框架”属性面板
2．设置框架属性
按住 ALT键单击框架内部，
此时属性面板为框架属性面板，
如下图所示。
框架属性面板
返回目录
36
2.5 用框架布局页面 — 在框架中插入文本和图像
可以加载已经创建的网页，也可直接在每个框架区域中插入
文本和图像。
1）在框架中单击 →,插入”菜单 →,图像”，可在当前位
置插入
图像。
2）在框架中单击 → 输入文字，可在当前位置插入文本。如
图所示。
在框架中插入文本和图像
返回目录
37
2.5 用框架布局页面 — 保存框架和框架集
框架结构完成后，首先选定框架集，“文件”菜单
→,保存框架”，在“另存为”对话框中选择要放置网页
的文件夹，为框架文件命名，最后单击“保存”按钮。要
保存框架集中的所有的文件，单击“文件”菜单 →,保存
全部”，在“保存为”对话框中，使用框架线辨别正保存
的是哪个框架或框架集，为每个框架文件指定文件名，逐
一保存。
如果某页面选定的框架为“顶部和嵌套的左部框架”，
页面被划分为 3个框架，存储时要存储 4个独立文件：一个
是框架集文件，通常起名为,index.htm”，另外三个是框架
内容文件。框架集文件除了存储页面框架大小和位置信息，
还存储每个框架载入文档的文件名。框架内容文件则存储
页面框架中的内容。
返回目录
38
2.6 表单的使用 — 表单概述
表单是由文本和表单域组成的集合，用于在因特网上
收集指定类型的信息，如登录注册、图书订购等。 表单的
工作原理 很简单，访问者在被称为“表单域”的特定网页
元
素中键入或选择相关的信息，单击“提交”按钮将信息提
交
给服务器。服务器根据表单结果进行处理，并将这些信息
保存到特定文件中以便站点管理员查看。
一个完整的表单应该包含两个组件,一个是表单对象,
它在网页中进行描述,另一个是表单处理程序,它是 Web
服务器上的一个程序，当站点访问者向服务器提交一个表
单时程序开始执行。只有将网页中的表单与某个表单结果
处理程序关联之后才能实现该表单功能。表单中包含多种
被称作“控件”的对象 。
返回目录
39
2.6 表单的使用 — 创建表单
1．插入表单
插入表单可采用两种方法：
（ 1）将插入点置于要插入表单的位置 →,插入”菜单
→,表单”，可看到表单被插入到当前位置。
（ 2）将插入点置于要插入表单的位置 → 单击“插入”栏
内“表单”页 → 单击“表单”按钮，表单将被插入到当前
位置。
2．各表单对象图标
表单卡如图所示，上面有各表单对象的按钮图标，单击
其中的某个按钮，将在表单中生成该对象。
表单卡
返回目录
40
2.6 表单的使用 — 创建表单
3．设置表单域属性
将插入点置于表单内部，显示表单的属性面板，如图所示。
表单名称,在文本框中为表单设一个名称，命名后的表单可以用
JavaScript或 VBScript之类的脚本语言进行控制。
动作,指定表单被客户端提交后在服务器端对其信息和数据做出响应
和处理的程序或脚本的 URL地址，在此项中输入程序的路径名称，或者单
击右边的文件夹图标，在弹出的对话框中选择要运行的程序或带有脚本程
序的网页。
目标,指定一个窗口，显示调用程序所返回的数据。
MIME类型,指定对提交给服务器进行处理的数据使用 MIME编码类型。
表单属性面板
返回目录
41
2.6 表单的使用 — 添加表单对象
1.添加表单对象
在表单中要插入对象的位置单击 → 单击表单页中对
象图标。
2.添加文本域对象
文本域是用来输入信息的表单对象。文本域类型有 3
种：
1）单行文本域：用来填写单个字符或者简短回答。
如地址等。
2）多行文本域：用于填写较长内容。该文本域行数
和字数都可由用户自己确定。
3）密码域：一种特殊的文本域。当输入文本时，文
本显示为星号或其他符号。
返回目录
42
2.6 表单的使用 — 添加表单对象
3．添加单选按钮组
单选按钮组提供彼此排斥的选项值，在单选按钮组内只
能选择一个选项。
4．添加复选框
复选框允许从一组选项内同时选择多个选项。
5．添加列表
列表提供一个滚动条供用户浏览项目，能在有限的空间
内为用户提供许多选项，并进行多重选择。
6．添加按钮对象
使用表单按钮能将输入表单的数据提交到服务器，还可
将其他已经在脚本中定义的处理任务分配给按钮，例如，
表单按钮可以根据指定的值计算出所选商品的总价。
返回目录
43
2.6 表单的使用 — 检查表单
表单通常有确定的填写规范，在网页中应提醒访
问者避免简单的填写错误。
“检查表单”动作能检查指定文本域的内容以确
保用户输入的正确性。使用 onBulr事件 可将此动作附
加到单个文本域，在用户填写表单时对域进行检查。
使用 onSubmit事件 可将动作附加到表单，在用户单
击“提交”按钮时对多个文本域进行检查。
返回目录
44
2.7 层的使用 — 创建层
层是网页制作的新技术，特点是使用方
便，可以使用“层”来布局网页，比表格更
灵活。在 Dreamweaver中，层可以放置在网
页内任何位置，不但可以包含文本、图像、
表格、插件，还可以在层中嵌套另外的层。
1．在网页中插入层
在网页中插入层的操作步骤为：将插入
点置于要插入新层的位置 → 单击“插入”栏
“布局”页中的“层”按钮。拖动可以改变
层大小。
2．创建嵌套层
嵌套层是包含在其他层中的层，嵌套可
以将若干层组织在一起。嵌套层随父层一起
移动，并且可以设置为继承其父层的可见性。
要创建嵌套层，只需将插入点置于已经创建
的层中，单击“插入”菜单，选“层”命令
即可。嵌套层如右图所示。
嵌套层
返回目录
45
2.7 层的使用 — 创建层
3．通过层属性面板定义属性
选定层后，其属性面板如图所示。
层的属性面板
各选项的意义说明如下：
（ 1）层编号：指定层的名称。
（ 2）宽、高：指定层的宽度和高度。
（ 3）左、上：指定层相对于页面或被嵌
套层的左上角的位置。
（ 4） Z轴：指定层的叠放次序。编号大
的层在编号小的层上面。
（ 5）可见性：参数有 default、
visible,hidden和 inherit，对应的含
义为：默认、可见、隐藏、继承父
层的可见性。
（ 6）背景颜色,指定层的背景颜
色。
（ 7）背景图像,指定层的背景图
像。
（ 8）溢出：选择 visible则扩展层的
大小使其所有内容均可见。选择
hidden则保持层的大小裁掉所有超
出层大小的内容。选择 scroll则不管
内容是否超过层的大小都提供滚动
条。选择 auto则只有在内容超出层
的大小时才出现滚动条。
返回目录
46
2.7 层的使用 — 编辑层
1．选定层
对层编辑前应先选定层，选定一个层可以使用下列
方法之一：
（ 1）单击层的边框，即可选定该层。
（ 2）单击层内部的任意位置，层矩形的左上角将显
示句柄图标，然后单击句柄图标，即可选定该层。
（ 3）在层面板中单击该层的名称。
2．移动层
选定层后按住鼠标左键拖动层左上角的句柄图标，
或者直接按键盘上的方向键进行移动，每按一次方向键
可将选定的层沿相应的方向移动一个像素。
返回目录
47
2.7 层的使用 — 编辑层
3．改变层的大小
可以调整单个层大小, 也可以同时调整多个层大小使
它们具有同样的高度和宽度 。
方法为：先选定层 → 用鼠标拖曳层周围的任意一个句
柄 。
4,对齐多个层
使用层的对齐命令, 可以对齐两个或者多个层, 在对
齐多个层时将使用最后一个被选定的层作为基准 。
对齐层的操作步骤为：选定需要对齐的多个层 →, 修
改, 菜单 →, 对齐, → 从级联菜单中选择一种对齐方
式 。
返回目录
48
2.7 层的使用 — 在层中插入对象
层是一种容器，可以向其中插入任何对象。具体操
作步骤如下：
（ 1）将插入点置于层中，使该层处于激活状态。
（ 2）在层中输入文本或者插入图像，方法与在空白
页面中的操作相同。
返回目录
49
2.8 动态网页技术 — 实用行为
１．行为概述
行为是在网页中进行的一系列动作，通过这些动作实现用户同
网页的交互，也可以通过动作使某个任务被执行。通常，一个行为
由一个事件和一个动作组成。事件是浏览器为每个网页元素做的定
义，以响应用户的动作。动作包含了预先写好的用来执行任务的
JavaScript代码。网页中的每个元素都可以看作是一个对象，在
Dreamweaver MX 2004中可以给任何对象附加一个行为。
２．行为面板
“窗口”菜单 →,行为”，打开“行为”面板，行为列表中显
示已经附加在当前元素上的动作，如果同一事件对应几个动作，对
应的动作将按被执行顺序出现。面板的加号和减号按钮用于添加和
删除动作，上下箭头按钮用于调整针对同一对象动作的执行顺序。
返回目录
50
2.8 动态网页技术 — 实用行为
３．附加行为
可以对整个页面附加行为，也可以对链接、图像、表单中的元
素附加行为。
４．编辑行为
步骤如下：
1）选定一个附加了行为的对象。
2）打开“行为”面板，该对象附加的行为出现在行为列表中。
3）选定行为后，单击上箭头或下箭头按钮可以改变给定事件
的顺序，。
4）双击行为或选定行为后回车，可以在出现的对话框中改变
参数，如将上例中“你好，欢迊访问本网站！” 改为“你好，欢
迊进入本网站！”。
5）选定行为后单击“－”按钮可删除某个行为。
返回目录
51
2.8 动态网页技术 — 创建图像交换效果
图像交换效果是指在浏览器中当鼠标指针移到一幅图像上时，图像会
变成另一幅图像，当鼠标移出图像范围时，又换回原来的图像。
创建图像交换效果之前先准备两张图像，一张是初始图像，另一张是
鼠标移到图像上时更换的图像，两张图像最好有相同尺寸，否则在替换时
会打乱页面上其他内容的编排 。
图像交换练习
1）将插入点置于要添加图像的位置。
2）“插入”菜单 →,交互式图像” →,鼠标经过图像”，出现,插
入鼠标经过图像”对话框。如图所示。
3）在该对话框中设置参数，
设置完毕后单击“确定”按钮 。
4）按 F12键在浏览器中预
览。鼠标在图像外时是原始图
像，将鼠标指向图像时，图像
就变为交换图像了。,插入鼠标经过图像”对话框
返回目录
52
2.8 动态网页技术 — 插入 Flash对象
Flash对象为 SWF文件，在 Dreamweaver MX 2004中可以直接插入
Flash影片。下面，我们用几个例子来说明操作方法。
插入 Flash影片练习
1）将插入点置于想插入 Flash影片的位置。
2）“插入”菜单 →,媒体” →, Flash”命令，出现“选择文件”对
话框。
3）选择要插入的 Flash文件 → 单击“确认”，将影片插入到网页中。
4）单击属性面板中的“播放”按钮可在文档窗口中预览 Flash影片，
单击“停止”按钮可停止播放 Flash影片。属性面板如图所示。
插入 Flash电影
返回目录
53
2.8 动态网页技术 — 插入 Flash对象
使用 Flash按钮练习
1）“设计视图”编辑状态下 → 在文档窗口中单击以确定插入按钮的
位置 →,插入”菜单 → 选“交互式图像” → 再选,Flash按钮”，出现如
图所示的“插入 Flash按钮”对话框。
2）“样式”列表框中选择需要
的按钮样式 →,按钮文本”框中输入
的文本将是按钮上的显示文本 →,字
体”下拉列表框中选择使用的字体。
3）“链接”文本框中为按钮指
定要链接的地址 →,背景色”框中为
Flash动画设置背景颜色，也可以单
击背景色按钮直接选。
4）在“另存为”文本框中输入
文件名称并保存新的 SWF文件。
5）单击“确定”按钮，在文档
窗口中插入了 Flash按钮。
“
插
入Fl
ash
按
钮
”
对
话
框
返回目录
54
2.8 动态网页技术 — 插入 Flash对象
使用 Flash文本对象练习
1）新建文档 → 选择“设计视图”。
2）“插入”菜单 →,交互式图
像” →, Flash文本”，出现,插入 Flash
文本”对话框。
3）在“文本”框中输入“联系我们”。
4）设置字体 → 设置文字的大小 →,颜
色”框中设置文本的颜色 →,转滚颜色”
框中设置鼠标指针经过 Flash文本对象上方
时文本显示颜色 →,背景色”框中设置文
本的背景颜色。
5）在“另存为”框中输入文件名称。
6）如果输入了链接，要在“目标”框
中指定打开链接文档的目标框架或目标窗
口。
7）设置完毕后单击“确定”按钮，将
Flash文本插入到文档窗口中 。
插入 Flash文本对话框
返回目录
55
本 章 小 结
? Dreamweaver基础知识
Dreamweaver MX 2004默认工作界面包括菜单栏,
,插入, 栏, 文档工具栏, 文档窗口, 面板组, 标签, 属性面板 。
? 创建及设计页面
– 可以创建空白网页, 也可用实例文件创建网页 。
– 文本是网页元素中主要部分, 可创建和编辑网页 。
– 水平线能将网页中不同功能的区域分割开来 。
– CSS是一系列格式规则, 包括对文字及段落的修饰, 用于控
制网页的外观, 使整个站点中的网页格式保持统一, 快速实
现网页格式化 。
– Dreamweaver允许在, 设计, 视图或, 代码, 视图中将图
像插入文档 。
返回目录
56
本 章 小 结
? 链接与导航
– 连接路径有三种类型：绝对路径, 文档相对路径和站点根目录相
对路径 。
– 超链接源通常采用文本和图像 。
– 创建到命名锚记的连接过程分两步：首先创建命名锚记, 然后创建
到命名锚记的链接 。
– 用一个图形的不同部位制作热点分别链接到不同页面, 称为图像地
图 。
? 用表格和表格布局模式布局页面
– 使用, 插入, 栏的, 常用, 选项卡或, 插入, 菜单都能创建一个新
表格 。
– 选择, 修改, 菜单 →, 表格,, 通过级联子菜单选择对表格进行编
辑 。
– 在布局视图中, 用表格作为基础结构来设计页面, 可以在页面中方
便的绘制单元格, 然后将这些单元格移动到所需的位置 。
返回目录
57
本 章 小 结
? 用框架布局页面
– 创建框架和框架集
– 设置框架集与框架属性
– 在框架中插入文本和图像
– 保存框架和框架集
? 表单的使用
– 表单为网页提供交互功能, 表单可以按照统一模式从用户处
收集信息, 然后将信息提交给服务器进行处理 。
– 创建表单
– 添加表单对象
– 检查表单动作能检查指定文本域的内容以确保用户输入的正
确性 。
返回目录
58
本 章 小 结
? 层的使用
– 创建层
– 当处理页面布局时, 还可以对层进行选择, 移动, 大小调整
和对齐等操作 。
– 层是一种容器, 可以向其中插入任何对象 。
? 动态网页技术
– 行为是在网页中进行的一系列动作, 通过这些动作实现用户
同网页的交互, 也可以通过动作使某个任务被执行 。
– 图像交换效果是指在浏览器中当鼠标指针移到一幅图像上时,
图像会变成另一幅图像, 当鼠标移出图像范围时, 又换回原
来的图像 。
– 在 Dreamweaver MX 2004中可以直接插入 Flash影片 。
返回目录
