黄龙溪古镇-汉字的笑话

网页制作基础（Dreamwaver 8 教程）
第一章 Dreamweaver8.0的操作环境
第一天的内容可能让你觉得枯燥乏味，不过，“工欲善其事 ，必先利其器”，
让我们一起来了解Dreamweaver8的操作环境，完成站点的创建。
一、Dreamweaver8 的操作环境
在首次启动Dreamweaver8时会出现 一个“工作区设置”对话框，在对话框
左侧是Dreamweaver8的设计视图，右侧是Dream weave 8的代码视图。
Dreamweaver8设计视图布局提供了一个将全部元素置于一个窗 口中的集成布
局。我们选择面向设计者的设计视图布局。
在Dreamweave 8 中首 先将显示一个起始页，可以勾选这个窗口下面的“不
在显示此对话框”来隐藏它。在这个页面中包括“打 开最近项目”、“创建新项目”
“从范例创建”3个方便实用的项目，建议大家保留。
新建或 打开一个文档，进入Dreamweaver8的标准工作界面。Dreamweaver8
的标准工作 界面包括：标题显示、菜单栏、插入面板组、文档工具栏、标准工具
栏、文档窗口、状态栏、属性面板和 浮动面板组。

1、标题显示栏
启动Macromedia Dreamweave 8后，标题栏将显示文字Macromedia
Dreamweave 8.0，新建或打开一个文档后，在后面还会显示该文档所在的位置和
文件名称。

2、菜单栏
Dreamweave 8的菜单共有10个，即文件、编辑、视图、插入、修改 、文本、
命令、站点、窗口和帮助。其中，编辑菜单里提供了对Dreamweaver菜单中[首选参数]的访问。

1 30

文件：用来管理文件。例如新建，打开，保存，另存为，导入，输出打印等。
编辑：用来编辑文本。例如剪切，复制，粘贴，查找，替换和参数设置等。
查看：用来切换视图模式以及显示、隐藏标尺、网格线等辅助视图功能。
插入：用来插入各种元素，例如图片、多媒体组件，表格、框架及超级链接
等。
修改：具有对页面元素修改的功能，例如在表格中插入表格，拆分、合并单
元格，对其对象等。
文本：用来对文本操作，例如设置文本格式等。
命令：所有的附加命令项
站点：用来创建和管理站点
窗口：用来显示和隐藏控制面板以及切换文档窗口
帮助：联机帮助功能。例如按下F1键，就会打开电子帮助文本
3、插入面板组
插 入面板集成了所有可以在网页应用的对象包括“插入”菜单中的选项。插
入面板组其实就是图像化了的插 入指令，通过一个个的按钮，可以很容易的加入
图像、声音、多媒体动画、表格。图层、框架、表单、F lash和ActiveX等网页
元素。

4、文档工具栏
“文档”工具 栏包含各种按钮，它们提供各种“文档”窗口视图（如“设计”
视图和“代码”视图）的选项、各种查看 选项和一些常用操作（如在浏览器中预
览）。

5、标准工具栏
“标准” 工具栏包含来自“文件”和“编辑”菜单中的一般操作的按钮：“新
建”、“打开”、“保存”、“保存 全部”、“剪切”、“复制”、“粘贴”、“撤消”和“重
做”。

6、文档窗口
当我们打开或创建一个项目，进入文档窗口，我们可以在文档区域中进行输
入文字、插入表格和 编辑图片等操作。
“文档”窗口显示当前文档。可以选择下列任一视图：“设计”视图是一个
用于可视化页面布局、可视化编辑和快速应用程序开发的设计环境。在该视图中，
Dreamweave r 显示文档的完全可编辑的可视化表示形式，类似于在浏览器中查看
页面时看到的内容。“代码”视图 是一个用于编写和编辑 HTML、JavaScript、服
务器语言代码以及任何其他类型代码的手 工编码环境。“代码和设计”视图使您
可以在单个窗口中同时看到同一文档的“代码”视图和“设计”视 图。
7、状态栏
“文档”窗口底部的状态栏提供与你正创建的文档有关的其它信息。标签选
择器显示环绕当前选定内容的标签的层次结构。单击该层次结构中的任何标签以
2 30

选择该标签及其全部内容。单击 可以选择文档的整个正文。
8、属性面板
属性面板并不是将所有的属性加载在面板上，而是根据我们选择的对象来动态显示对象的属性属性面板的状态完全是随当前在文档中选择的对象来确定的。
例如，当前选择了一 幅图像，那么属性面板上就出现该图像的相关属性；如果选
择了表格，那么属性面板会相应的变化成表格 的相关属性。

9、浮动面板
其它面板可以同称为浮动面板，这些面板都浮动于编 辑窗口之外。在初次使
用Dreamweave 8的时候，这些面板根据功能被分成了若干组。在窗口 菜单中，
选择不同的命令可以打开基本面板组、设计面板组、代码面板组、应用程序面板
组、资 源面板组和其它面板组。
终于把Dreamweave 8的基本工作界面介绍完了，你是否已经了解它？从现
在开始，让我们一起来建造一座小房子。

第二章 Dreamweaver8.0本地站点的搭建与管理
要制作一个能够被 大家浏览的网站，首先需要在本地磁盘上制作这个网站，
然后把这个网站传到互联网的web服务器上。 放置在本地磁盘上的网站被称为
本地站点，位于互联网web服务器里的网站被称为远程站点。Drea mweaver 8提
供了对本地站点和远程站点强大的管理功能。
1、规划站点结构 网站是多个网页的集合，其包括一个首页和若干个分页，这种集合不是简单
的集合。为了达到最佳效 果，在创建任何 Web 站点页面之前，要对站点的结构
进行设计和规划。决定要创建多少页，每页上 显示什么内容，页面布局的外观以
及各页是如何互相连接起来的。
我们可以通过把文件分门别 类的放置在各自的文件夹里，使网站的结构清晰
明了，便于管理和查找。
2、创建站点
在Dreamweave 8中可以有效的建立并管理多个站点。搭建站点可以有两种
方法，一 是利用向导完成，二是利用高级设定来完成。
在搭建站点前，我们先在自己的电脑硬盘上建一个以英文或数字命名的空文
件夹。
（1）选择菜单栏——站点——管理站点，出现“管 理站点”对话框。点击
“新建”按钮，选择弹出菜单中的“站点”项。
3 30

在打开的窗口上方有“基本”和“高级”两个标签，可以在站点向导和高级< br>设置之间切换。下面选择“基本”标签。

在文本框中，输入一个站点名字以在 Dr eamweaver8.0中标识该站点。这个
名字可以是任何你需要的名字。单击“下一步”。出现向 导的下一个界面，询问
是否要使用服务器技术。

我们现在建立的是一个静态页面，所以选择“否”。

4 30

点下一步，在文档框设置本地站点文件夹的地址。

点下一步，进入站点定义，我们将在站点建设完成后在与FTP链接，这里
选择“无”。

单击“完成”按钮，结束“站点定义“对话框的设置。

单击“完成”按钮，文件面板显示出刚才建立的站点。
5 30

到此，我们完成了站点的创建。
3、搭建站点结构
站点是文件与文件夹的集合，下 面我们根据前面对xmweb网站的设计，来
新建xmweb站点要设置的文件夹和文件。
新 建文件夹，在文件面板的站点跟目录下单击鼠标右键，从弹出菜单中选择
“新建文件夹”项，然后给文件 夹命名。这里我们创建新建8个文件夹，分别命
名为：img、med、swf、txt、css、js 、moan和fy。

创建页面，在文件面板的站点跟目录下单击鼠标右键，从弹出菜单中选 择“新
建文件”项，然后给文件命名。首先要添加首页，我们把首页命名为，
再分别新建、、、 和。
6 30

4、文件与文件夹的管理
对建立的文 件和文件夹，可以进行移动、复制、重命名和删除等基本的管理
操作。单击鼠标左键选中需要管理的文件 或文件夹，然后单击鼠标右键，再弹出
菜单中选“编辑”项，即可进行相关操作。
第三章 Dreamweaver8.0页面的总体设置
我们已经描绘了小屋的蓝图，从现在开始，为我们的小 屋添砖加瓦吧。打开
，制作一个图文混排的简单页面。
一、页面的总体设置
1、设置页面的头内容
头内容再浏览器中是不可见的，但是却携带着网页的重要信息，如关键字、描述文字等，还可以实现一些非常重要的功能，如自动刷新功能。
鼠标左键单击插入工具栏最左边 按钮旁的下拉小三角，在弹出菜单中选择
“HTML”项，出现“文件头”按钮，点开下拉菜单，就可以 进行头内容的设置
了。

设置标题，网页标题可以是中文、英文或符号，显示在浏览 器的标题栏中。
我们直接在设计窗口上方的标题栏内输入或更改，就可以完成网页标题的编辑
7 30

了。
插入关键字，关键字用来协助网络上的搜索引擎寻找网页。要想让 更多的人
看见你的网站，这项要好好填哦^_^单击上图所示的“关键字”项，弹出“关键
字” 对话框，填入关键字即可。

插入META，META标记用于记录当前网页的相关信息，如 编码，作者，版
权等，也可以用来给服务器提供信息。单击上图所示的“META”项，弹出“META ”
对话框，在“属性”栏选择“名称”属性，在“值”文本框中输入相应的值，可
以定义相应的 信息。
author—作者信息，copyright—版权声明，generator—网页编辑器。

2、设置页面属性
单击“属性栏”中的“页面属性”按钮，打开的“页面属性”对话框。

设置外观， “外观”是设置页面的一些基本属性。我们可以定义页面中的默
认文本字体、文本字号、文本颜色、背景 颜色和背景图像等。我们设置页面的所
有边距为0。
8 30

设置链接，“链接”选项内是一些与页面的链接效果有关的设置。“链接颜色”
定义超链接文本 默认状态下的字体颜色，“变换图像链接”定义鼠标放在链接上
时文本的颜色，“已访问链接”定义访问 过的链接的颜色，“活动链接”定义活动
链接的颜色。“下划线样式”可以定义链接的下划线样式。

设置标题，“标题”用来设置标题字体的一些属性。如下图所示，在左侧“分
类”列 表中选择“标题”，这里的标题指的并不是页面的标题内容，而是可以应
用在具体文章中各级不同标题上 的一种标题字体样式。我们可以定义“标题字体”
及6种预定义的标题字体样式，包括粗体、斜体、大小 和颜色。按自己的喜欢的
风格设置吧。
9 30

第四章 Dreamweaver8.0文本的插入与编辑
1、插入文本
要向 Dreamweaver 文档添加文本，可以直接在Dreamweaver“文档”窗口
中键入文本 ，也可以剪切并粘贴，还可以从word文档导入文本。
用鼠标在文档编辑窗口的空白区域点一下，窗 口中出现闪动的光标，提示文
字的起始位置，将中的文字素材复制粘贴进来。
2、编辑文本格式
网页的文本分为段落和标题两种格式。
在文档编辑窗口中选中一 段文本，在属性面板“格式”后的下拉列表框中选
择“段落”把选中的文本设置成段落格式。
“标题1”到“标题6”分别表示各级标题，应用于网页的标题部分。对应
的字体由大到小，同时文字全 部加粗。
另外，在属性面板中可以定义文字的字号、颜色、加粗、加斜、水平对齐等
内容。
3、设置字体组合
Dreamweaver8预设读的可供选择的字体组合只有6项英文字体 组合，要想
使用中文字体，必须重新编辑新的字体组合，在“字体”后的下拉列表框中选择
“编 辑字体列表”，弹出“编辑字体列表”对话框：

10 30

4、文字的其它设置
文本换行，按Enter键换行的行距较大（在代码区生成

标签），按Enter
＋Shift键换行的行间距较小（在代码区生成
标签）。
文 本空格，我们选择编辑首选参数，在弹出得对话框中左侧的分类列表中
选择“常规”项，然后在右边选“ 允许多个连续的空格”项，我们就可以直接按
“空格”键给文本添加空格了。

特殊 字符，要向网页中插入特殊字符，需要在快捷工具栏选择“文本”，切
换到字符插入栏，单击文本插入栏 的最后一个按钮，可以向网页中插入相应的特
殊符号。
11 30

插入列表，列表分为两种，有序列表和无序列表，无序列表没有顺序，每一< br>项前边都以同样的符号显示，有序列表前边的每一项有序号引导。在文档编辑窗
口中选中需要设置 的文本，在属性面板中单击，则选中的文本被设置成无序
列表，单击则被设置成有序列表。
插 入水平线，水平线起到分隔文本的排版作用，选择快捷工具栏的“HTML”
项，单击HTML栏的第一 个按钮，即可向网页中插入水平线。选中插入的这
条水平线，可以在属性面板对它的属性进行设置。

插入时间，在文档编辑窗口中，将鼠标光标移动到要插入日期的位置，单击
常用插入 栏的“日期”按钮，在弹出的“插入日期”对话框中选择相应的格式即
可。
第五章 Dreamweaver8.0插入图像
目前互联网上支持的图像格式主要有GIF、JPEG和PN G。其中使用最为广
泛的是GIF和JPEG。
1、插入图像

在制作网 页时，先构想好网页布局，在图像处理软件中将需要插入的图片进
行处理，然后存放在站点根目录下的文 件夹里。
插图图像时，将光标放置在文档窗口需要插入图像的位置，然后鼠标单击常
用插入栏 的“图像”按钮。

弹出的“选择图像源文件”对话框，选择，单击“确定”按钮
就把图像插入到了网页中。
12 30

注意：如果我们在插入图片的时候，没有将图片保存 在站点根目录下，会弹
出下图所示的对话框，提醒我们要把图片保存在站点内部，这时单击“是”按钮，

然后选择本地站点的路径将图片保存，图像也可以被插入到网页中。

2、设置图像属性
选中图像后，在属性面板中显示出了图像的属性，如下如所示。
13 30

在属性面板的左上角，显示当前图像的缩略图，同时 显示图像的大小。在缩
略图右侧有一个文本框，在其中可以输入图像标记的名称。
图像的大小 是可以改变的，但是在DW里更改是极不好的习惯，如果我们
的电脑安装了FW软件，单击属性面板的“ 编辑”旁边的，即可启动FW对
图像进行缩放等处理。当图像的大小改变时，属性栏中“宽”和“高”的 数值会
以粗体显示，并在旁边出现一个弧形箭头，单击它可以恢复图像的原始大小。
“水平边距”和“垂直边距”文本框用来设置图像左右和上下与其它页面元素的
距离。
“边框”文本框时用来设置图像边框的宽度，默认的边框宽度为0。
“替代”文本框用来设置 图像的替代文本，可以输入一段文字，当图像无法显示
时，将显示这段文字。
单击属性面板中的对齐按钮，可以分别将图像设置成浏览器居左对齐、
居中对齐、居右对齐。
在属性面板中，“对齐”下拉列表框时设置图像与文本的相互对齐方式，共有10
个选项。通过 它我们可以将文字对齐到图像的上端、下端、左边和右边等，从而
可以灵活的实现文字与图片的混排效果 。
3、插入其它图像元素
在我们单击常用插入栏的“图像”按钮时，可以看到，除了第1项 “图像”外，
还有“图像占位符”、“鼠标经过图像”、“导航条”等项目。
插入图像占位符 ，在我们布局页面时，如果要在网页中插入一张图片，可以先不
制作图片，而是使用占位符来代替图片位 置。单击下拉列表中的“图像占位符”，
打开“图像占位符”对话框。按设计需要设置图片的宽度和高度 ，输入呆插入图
像的名称，即可。

鼠标经过图像，鼠标经过图像实际上由两个图像 组成，主图像（当首次载入页时
显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。这两张 图片要
14 30

大小相等，如果不相等，DW自动调整次图片的大小跟主图像大小一致。
< br>图片与文本一样，是网页中最常用到的内容，其变化相对较少，要想排出精致美
观的网页，下一节 课的内容可是必不可少的哦，继续努力吧^_^。
第六章 Dreamweaver8.0插入并编辑表格
格是网页设计制作不可缺少的元素，它以简洁明了和高 效快捷的方式将图片、文
本、数据和表单的元素有序的显示在页面上，让我们可以设计出漂亮的页面，使
用表格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局，
而在不同的浏览 器平台有较好的兼容性，所以表格是网页中最常用的排版方式之
一。
一、插入并编辑表格
1、插入表格
在文档窗口中，将光标放在需要创建表格的位置，单击“常用”快捷栏中的表格
按钮弹出的“表格”对话框，指定表格的属性后，在文档窗口中插入设置的表格。

15 30

“行数”文本框用来设置表格的行数。
“列数”文本框用来设置表格的列数。
“表格宽度”文本框用来设置表格的宽度，可以填入数 值，紧随其后的下拉列表
框用来设置宽度的单位，有两个选项——百分比和像素。当宽度的单位选择百分
比时，表格的宽度会随浏览器窗口的大小而改变。
“单元格边距”文本框用来设置单元格的内部空白的大小。
“单元格间距”文本框用来设置单元格与单元格之间的距离。
“边框粗细”用来设置表格的边框的宽度。
“页眉”定义页眉样式，可以在四种样式中选择一种。
“标题” 定义表格的标题。
“对其标题”定义表格标题的对齐方式。
“摘要” 可以在这里对表格进行注释。
16 30

2、选择单元格对象
对于表格、行、列、单元格属性的设置是以选择这些对象为前提的。
选择整个表格的方法是把鼠标放在表格边框的任意处，当出现这样的标志时

单击即可 选中整个表格，或在表格内任意处单击，然后在状态栏选中