8.3.1  Dreamweaver CS5概述 

Adobe Dreamweaver CS5 属于全球最大的图像编辑软件供应商Adobe 设计软件系列，它的前身Macromedia 是著名的网页设计软件Dreamweaver 及Flash 的供应商。

Adobe Dreamweaver CS5 是一款集网页制作和网站管理于一身的所见即所得网页编辑器， 利用它可以轻而易举地制作出跨越平台限制和跨越浏览器限制的充满动感的网页。

8.3.2 创建与管理站点 

1. 使用“管理站点”向导搭建站点

（1） 启动Dreamweaver CS5 程序，在菜单栏中选择“站点”→“管理站点”，打开“管理站点” 对话框，在对话框中单击“新建”按钮，打开“站点设置对象效果”对话框，在对话框中选择“站点”选项卡，在“站点名称”文本框中输入准备使用的名称，单击“本地站点文件夹”右侧的“浏览文件夹”按钮 ，选择准备使用的站点文件夹，单击“选择”按钮。

（2） 在“管理站点”对话框中，显示了刚刚新建的站点，单击“完成”按钮。

此时，在“文件”面板中即能看到创建的站点文件，通过以上步骤即可完成使用“管理站点” 向导搭建站点的操作。

2. 使用“高级设置”面板创建站点

选择“高级设置”选项卡可以不使用向导，直接创建站点信息，如图8-5 所示。

3. 打开站点

在Dreamweaver CS5 启动后，要打开已有站点，可以单击文档窗口右边的“文件”面板中左边的下拉列表，在下拉列表中选择准备打开的站点单击即可。

4. 编辑站点

（1） 在菜单栏中选择“站点”→“管理站点”，在弹出的“管理站点”对话框中选中要编辑的站点名称，单击“编辑”按钮。

（2） 在弹出的“站点设置对象”对话框中，单击展开“高级设置”下拉按钮，其中包括编辑站点的相关信息，在其中可以进行相应的编辑。

（3） 单击“保存”按钮，返回“管理站点”对话框，单击“完成” 按钮，即可完成站点的编辑，如图8-6 所示。

5. 删除站点

在菜单栏中选择“站点”→“管理站点”，在弹出的“管理站点”对话框中，选中要删除的站点名称，单击“删除”按钮，然后在弹出的提示框中单击“是”按钮，即可删除站点。

6. 复制站点

在菜单栏中选择“站点”→“管理站点”，在弹出的“管理站点”对话框中，选中要复制的站点名称，单击“复制”按钮，在“管理站点”列表框中显示新建的站点，单击“完成”按钮，即可完成对站点的复制。

7. 创建站点结构

1） 创建文件夹

在“文件”面板中，右击准备创建文件夹的父级文件夹， 在弹出的快捷菜单中选择“新建文件夹”选项，即可完成创建文件夹的操作，如图8-7 所示。

2） 创建文件

在“文件”面板中，右击准备创建文件夹的父级文件夹， 在弹出的快捷菜单中选择“新建文件”选项，即可完成创建文件的操作。

3） 移动或复制文件

在“文件”面板中，右击准备移动或复制的文件，在弹出的快捷菜单中选择“编辑”选项，在子菜单中选择相应的菜单项即可。

8.3.3  插入对象 

1. 插入文本

文本是网页中不可缺少的内容之一，是网页中最基本的对象。由于其占用的存储空间非常小，所以在一些大型网站中，文字占有不可替代的主导地位。而网页中的文本一般以普通文字、段落或者各种项目符号等形式显示。

在网页中输入文本有以下三种方法： 

（1） 直接输入法： 

在页面需要插入文本的地方单击，出现光标，直接输入文本即可。

（2） 复制粘贴法： 

在Dreamweaver 的“编辑”菜单中有两个粘贴命令：“粘贴”和“选择性粘贴”。当选择“选择性粘贴”时，将出现一个包含几个粘贴格式设置选项的对话框。●“ 仅文本”可以插入无格式文本。如果原始文本带格式，则所有格式将被删除。 ●“ 带结构的文本”可以插入文本并保留结构，但不保留基本格式设置。例如，可以粘贴文 本并保留段落、列表和表格的结构，但不保留粗体、斜体和其他格式设置。

 ●“ 带结构的文本以及基本格式”可以插入结构化并带简单 HTML 格式的文本（例如，段落 和表格以及带有b、i、u、strong、em、hr、abbr 或acronym 标签的格式化文本）。

●“ 带结构的文本以及全部格式”可以插入文本并保留所有结构、HTML格式设置和CSS样 式。

（3） 导入已有的Word 或者Excel 文档，将其做成网页。

8.3.3   插入对象 

2. 格式化文本

无论是输入文本还是导入文本，或者是新建的空白文档，可以使用菜单或者文本属性查看器改变选定文本的字体属性，包括字体、大小、颜色、样式和对齐方式等，如图8-10 所示。

8.3.3  插入对象

3. 插入图像

在网页中插入图像，不但可以将内容表现得更加形象、生动，还能够跨越语言、编码标准、人种、地域和年龄的差异。但是，过多的图像也会影响网页的下载速度，所以在设计网页时要整体考虑图像的数目和大小。

插入图像的常用方法如下： 

（1） 把插入点置于文档窗口中要插入图像的位置，然后选择主菜单中的“插入”→ “图像”，或单击“插入”栏中“常用”类别的“图像”按钮，如图8-11 所示。

（2） 在弹出的对话框中，选择要插入的图像文件，单击“确定”按钮，则选定的图像被插入到页面中。 

8.3.3  插入对象

4. 图文混排

选择要与文字进行混排的图像，在属性查看器的“对齐”下拉列表框中选择“左对齐”，在“水平边距”和“垂直边距”中分别输入图像与周围对象的水平和垂直距离，如图8-12 所示。

8.3.3  插入图像

5. 编辑图像

对于插入页面中的图像，可以使用属性查看器检查和修改图像的各种属性。

图像属性查看器中常用属性的作用和设置方法说明如下： 

（1） 图像名：在缩略图右边的文本框中输入，供使用脚本语言编写脚本时引用。

（2） 宽和高：指定图像被载入浏览器时所占用空间的大小。这些参数默认以像素为单位。

（3） 源文件：用于指定图像的源文件。单击文件夹图标，找到想要的源文件，或者在输入域中直接输入文件的路径。

（4） 链接：用于给图像指定超链接。在站点窗口把“指向文件”图标拖到一个文件上面， 或单击文件夹图标，在当前站点中浏览并选择一个文档；或在输入域中直接输入URL，均为图像创建超链接。

（5） 替换：指定显示在图像位置上的可选文字。当浏览器无法显示图像时显示这些文字。在一些浏览器中，当鼠标移动到图像上方时，该文本也会显示出来。

（6） 地图：使用地图属性下面的热区工具，可以创建矩形、椭圆、多边形热区。当绘制热区后，可以为指定的热区添加相应的超链接。

（7） 垂直边距和水平边距：在图像上下左右添加以像素为单位的间隔。垂直边距在图像顶部和底部添加，水平边距在图像左边和右边添加。

（8） 边框：设置围绕图像的边框的宽度（以像素为单位）。输入0 则为无边框。

（9） 对齐：对齐属性对齐同一行上的图像与文本。可以方便实现图文混排。

8.3.3  插入对象

6. 插入媒体对象

在网页中应用多媒体对象可以增强网页的娱乐性和感染力。

网页中常用的多媒体对象主要分为Flash 类（Flash 影片、Flash 按钮和Flash 文本）、Java Applet、ActiveX 控件类，以及各种音频、视频文件，如图8-14 所示。

8.3.4   创建超链接 

 1. 超链接的概念

超链接是指页面对象之间的链接关系，它是网页的灵魂，能合理、协调地把网站中的各个元素、页面构成一个有机整体，使浏览者能快速地访问到想要访问的页面。 

2. 超链接的分类 

1） 绝对超链接

绝对超链接就是形如http: // www.china / zh_cn 的超链接地址，它给出了超链接目标端点完整的URL 地址，包括使用的协议“http: // ”。一般用于创建站外具有固定地址的超链接。

2） 文档相对路径

使用文档相对路径不需要给出完整的URL 地址，可省去URL 地址的协议，只需保留不同的部分。如pic/logo.gif，这是本地站点超链接中最常用的链接形式。由于相对超链接的文件之间相互关系并没有发生变化，因此使用文档相对路径创建的超链接在上传时可以不用更新各个超链接。

3） 站点根目录相对路径

站点根目录相对路径是形如 / help / help.html 的超链接地址，它基于站点根目录，在同一个站点中网页的超链接也可采用这种方法。 

8.3.4  创建超链接

3. 创建内部链接或外部链接

文本和图像是最常使用的链接对象。要对文本和图像设置链接，只需要选定文本或图像，然后修改属性查看器中链接的地址即可，可以使用三类链接中的任一类。

4. 创建锚链接 

1） 创建命名锚记 

在制作网页时，为了达到跳转到网页固定位置的目的，可以使用锚链接。通过对网页中指定位置的命名，利用超链接打开目标网页时可直接跳转到相应的命名位置上。方法如下： 

将鼠标定位到想要命名锚记的位置，单击“插入”工具栏中的“常用”→“命名锚记”。

2） 链接命名锚记 

创建好命名锚记后，可以为可链接的对象创建指向命名锚记的链接，即在相应的链接域中指向或者填写要跳转到的命名锚记。链接格式为“# 锚记名称”。

5. 创建空链接 

空超链接是一个未指派目标的超链接，建立空超链接时，只要在属性查看器的链接域中输入一个“#”即可。建立空超链接只是为了应用行为，其他情况下不必建立。 

6. 创建电子邮件超链接 

电子邮件在网络应用中十分广泛，在网页中建立电子邮件超链接可方便网页浏览者与设计者之间的联系。

电子邮件链接格式为“mailto: 邮件地址” 。