网页制作工具 Dreamweaver

网页制作工具网页制作工具 DreamweaverDreamweaver

““ ”所见即所得网页编辑器”所见即所得网页编辑器 : : 优点就是直观、使用方便、容优点就是直观、使用方便、容易上手，但也存在难以精确达到与浏览器完全一致的显示效易上手，但也存在难以精确达到与浏览器完全一致的显示效果的缺点果的缺点

““ ”非所见即所得网页编辑器（即源代码编辑器）”非所见即所得网页编辑器（即源代码编辑器） ::所有的所有的HTMLHTML代码都是在用户的监控下产生的，但是，工作效率太代码都是在用户的监控下产生的，但是，工作效率太低。低。

网页制作工具网页制作工具

MicrosoftMicrosoft 公司专门开发的网页制作专业工具。目前最高公司专门开发的网页制作专业工具。目前最高版本是版本是 FrontPage 2003FrontPage 2003 。。

网页编辑功能非常强大。网页编辑功能非常强大。强大的网页管理功能强大的网页管理功能

网页制作工具网页制作工具 FrontPageFrontPage

DreamweaverDreamweaver MacromediaMacromedia 公司推出的主页编辑工具。公司推出的主页编辑工具。所见即所得网页编辑器，支持最新的所见即所得网页编辑器，支持最新的 XHTMLXHTML和和 CSSCSS 标标准。准。最新版本是最新版本是 Dreamweaver 8Dreamweaver 8 ，用于对，用于对 WebWeb 站点、站点、 WebWeb 页页和和WebWeb 应用程序进行设计、编码和开发。应用程序进行设计、编码和开发。借助借助 DreamweaverDreamweaver 还可以使用服务器语言（例如还可以使用服务器语言（例如ASPASP、、 ASP.NETASP.NET、、 ColdFusionColdFusion 标记语言、标记语言、 JSPJSP和和 PHPPHP ））生成支持动态数据库的生成支持动态数据库的 WebWeb 应用程序。应用程序。


Adobe PagemillAdobe Pagemill 适合初学者制作较为美观，但不是非常复杂的主页。适合初学者制作较为美观，但不是非常复杂的主页。


HomeSiteHomeSite 更适合进行比较复杂和精美页面的设计。如果用户希望能更适合进行比较复杂和精美页面的设计。如果用户希望能完全控制页面制作的进程，那么完全控制页面制作的进程，那么 HomeSiteHomeSite 是最佳选择。是最佳选择。

Visual Studio.NetVisual Studio.Net 支持相应程序的自动语法检查，还支持程序的调试与编支持相应程序的自动语法检查，还支持程序的调试与编译。内置有译。内置有 VB.NetVB.Net、、 VC++.NetVC++.Net、、 C#C# 等程序开发工具，集等程序开发工具，集程序的调试、编译等功能于一身程序的调试、编译等功能于一身EditPlusEditPlus 目前非常流行的一款功能强大的文本编辑器，该软件功能目前非常流行的一款功能强大的文本编辑器，该软件功能强大、易于使用、兼容性强，支持几乎所有程序语言的代码强大、易于使用、兼容性强，支持几乎所有程序语言的代码色彩显示。它的缺点就是不支持程序的调试。色彩显示。它的缺点就是不支持程序的调试。

8.1 Dreamweaver8.1 Dreamweaver 简介简介8.2 8.2 站点管理站点管理8.3 8.3 制作第一个网页制作第一个网页8.4 8.4 超链接超链接8.5 8.5 使用图像使用图像8.6 8.6 使用多媒体对象使用多媒体对象8.7 8.7 使用表格使用表格

第第 88 章网页制作工具章网页制作工具 Dreamweaver 8Dreamweaver 8

8.1.1 Dreamweaver 88.1.1 Dreamweaver 8的启动和主工作区的启动和主工作区 “ ”一系列初始化过程后，首先显示工作区设置对话框。接下来显示起始“ ”一系列初始化过程后，首先显示工作区设置对话框。接下来显示起始

“ ” “ ” “ ”页对话框，可以选择打开最近项目、创建新项目或从范例创建。“ ” “ ” “ ”页对话框，可以选择打开最近项目、创建新项目或从范例创建。

8.1 Dreamweaver8.1 Dreamweaver 简介简介

图 8-1 “ 工作区设置”对话框图 8-2 起始页

22．． Dreamweaver 8Dreamweaver 8 的主工作区的主工作区主工作区由插入工具栏、文档工具栏、文档窗口、属性面板等主工作区由插入工具栏、文档工具栏、文档窗口、属性面板等部分组成部分组成


图 8-3 Dreamweaver 8 的主工作区

（（ 11）插入工具栏）插入工具栏• “ ”默认显示的是常用类的主要功能按钮。“ ”默认显示的是常用类的主要功能按钮。• “ ”单击常用按钮会弹出一个下拉菜单，其中包含了插入工具栏“ ”单击常用按钮会弹出一个下拉菜单，其中包含了插入工具栏中的其他功能菜单。中的其他功能菜单。•选择不同的分类，插入工具栏中包含的功能按钮也随之改变。选择不同的分类，插入工具栏中包含的功能按钮也随之改变。


图 8-4 插入工具栏及其功能分类菜单

插入面板包含用于将各种类型的“对象”（如图像、

表格和层）插入到文档中的按钮。每个对象都是一段 HTML 代码，允许插入

时设置不同的属性。 “ 常用“项面板、布局（标准视图、布局项

视图）、“文本“、“表单“、“模板“、“字符“、“媒体“、“文件头“、“脚本“、“应用程序“项面板

插入面板常用：创建和插入最常用的对象，如图像和表格；布局：插入表格、 div 标签、层和框架。可从表格视图

（标准、扩展表格、布局）中选择。选择“布局”模式后，可使用布局工具：“绘制布局单元格”和“绘制布局表格”。

表单：用于创建表单和插入表单元素文本：插入文本格式设置标签和列表格式设置标签 HTML ：插入用于水平线、头内容、表格、框架和脚本

的 HTML 标签。服务器代码：适用于使用特定服务器语言（ ASP 、 ASP.

NET 、 JSP 和 PHP ）等的页面。应用程序：插入动态元素，例如记录集、重复区域以及记

录插入和更新表单。 Flash 元素：插入 Flash 元素。收藏：将“插入”栏中常用按钮分组和组织到常用位置。

（（ 22 ）文档工具栏）文档工具栏使用户可以在文档的不同视图间快速切换：代码视图、设计使用户可以在文档的不同视图间快速切换：代码视图、设计视图、和拆分视图。视图、和拆分视图。还包含与查看文档、在本地和远程站点间传输文档有关的常还包含与查看文档、在本地和远程站点间传输文档有关的常用命令和选项。用命令和选项。


图 8-5 文档工具栏的常用命令和选项

选择“编辑”选择“编辑”→“→“首选参数”命令首选参数”命令 ,,打开“首选参数”对话框。打开“首选参数”对话框。选择“分类”列表中的“常规”选项。选择“分类”列表中的“常规”选项。通常设置的属性有文档选项和一些编辑选项。通常设置的属性有文档选项和一些编辑选项。

8.1.2 Dreamweaver 88.1.2 Dreamweaver 8 的参数设置的参数设置

图 8-12 常规参数设置中更改工作区

22．新建文档参数设置．新建文档参数设置建立默认的新文档类型和首选参数。建立默认的新文档类型和首选参数。 “ ” “ ”选择分类列表中的新建文档选项，对话框右侧显示出相“ ” “ ”选择分类列表中的新建文档选项，对话框右侧显示出相关的属性。关的属性。


图 8-13 新建文档参数设置

33．站点参数设置．站点参数设置选择“分类”列表中的“站点”选项选择“分类”列表中的“站点”选项 ,, 用于为“文件”面用于为“文件”面板设置站点首选参数。板设置站点首选参数。


图 8-14 站点参数设置

站点站点 :: 一系列文档的组合，这些文档之间通过各种链接关联一系列文档的组合，这些文档之间通过各种链接关联起来，可能拥有相似的属性，也可能只是毫无意义的链接。起来，可能拥有相似的属性，也可能只是毫无意义的链接。 8.2.1 8.2.1 本地站点和远端站点本地站点和远端站点站点也是一种文档的磁盘组织形式，它同样是由文档和文站点也是一种文档的磁盘组织形式，它同样是由文档和文档所在的文件夹组成的。档所在的文件夹组成的。利用不同的文件夹，将不同的网页内容分门别类地保存，利用不同的文件夹，将不同的网页内容分门别类地保存，这是设计网站的必要前提。这是设计网站的必要前提。结构良好的网站，不仅便于管理，也便于更新。结构良好的网站，不仅便于管理，也便于更新。

8.2 8.2 站点管理站点管理

8.2.2 8.2.2 建立本地站点建立本地站点规划好站点结构后，规划好站点结构后，先在先在 DreamweaverDreamweaver中定义站点，然后才中定义站点，然后才能进行开发。能进行开发。


图 8-15 站点设置

图 8-16 站点结构

8.2.3 8.2.3 管理本地站点管理本地站点11．编辑站点．编辑站点① ① 在“文件”面板中的“站在“文件”面板中的“站点名称”下拉列表中选择点名称”下拉列表中选择“管理站点”项，打开“管“管理站点”项，打开“管理站点”对话框。理站点”对话框。② ② 在“管理站点”的对话框在“管理站点”的对话框左侧列表中选择需要编辑的左侧列表中选择需要编辑的站点，然后单击右侧按钮，站点，然后单击右侧按钮，则可以进行相应的操作。则可以进行相应的操作。


图 8-20 选择要编辑的站点

8.2.3 8.2.3 管理本地站点管理本地站点22．文件的基本操作．文件的基本操作使用“文件”菜单对单独的文件进行管理，例如，执行“新使用“文件”菜单对单独的文件进行管理，例如，执行“新建”、“打开”、“保存”、“另存为”等命令。建”、“打开”、“保存”、“另存为”等命令。也可以在“文件”面板中，在文件或文件夹上单击鼠标右键，也可以在“文件”面板中，在文件或文件夹上单击鼠标右键，在弹出快捷菜单的“编辑”命令子菜单中，执行“新建”、在弹出快捷菜单的“编辑”命令子菜单中，执行“新建”、“打开”、“删除”、“移动”、“复制”、“重命名”等“打开”、“删除”、“移动”、“复制”、“重命名”等命令。命令。33．指定站点首页．指定站点首页首页就是网站的门面，通常首页文件中总包含有若干指首页就是网站的门面，通常首页文件中总包含有若干指向其他主要网页的超链接，用户可以先为网站创建一个空白向其他主要网页的超链接，用户可以先为网站创建一个空白首页，然后进行编辑，并可以利用站点地图查看网站中超链首页，然后进行编辑，并可以利用站点地图查看网站中超链接的情况。接的情况。


8.3.1 8.3.1 制作网页一般过程制作网页一般过程【例【例 8-28-2】制作一个浅黄色】制作一个浅黄色背景的网页，在页面上添背景的网页，在页面上添加文字和水平线，展示一加文字和水平线，展示一个娱乐网页的宣传内容，个娱乐网页的宣传内容，并且在页面的右下方显示并且在页面的右下方显示感谢信息和当前日期，效感谢信息和当前日期，效果如图果如图 8-228-22 所示。所示。

8.3 8.3 制作第一个网页制作第一个网页

图 8-22 实例效果

【例8-2】

8.3.2 8.3.2 设置页面属性设置页面属性页面属性是指网页的一般属性信息，例如，网页标题、网页面属性是指网页的一般属性信息，例如，网页标题、网页的背景颜色、背景图像、超链接颜色、跟踪图像等。页的背景颜色、背景图像、超链接颜色、跟踪图像等。11．设置网页标题．设置网页标题网页标题是用来说明网页内容的文字，显示在浏览器窗口网页标题是用来说明网页内容的文字，显示在浏览器窗口的标题栏中。通常，每个网页都应该有一个标题，而网页标题的标题栏中。通常，每个网页都应该有一个标题，而网页标题文字最好能够恰如其分地描述网页的内容。文字最好能够恰如其分地描述网页的内容。22．设置网页其他属性．设置网页其他属性如果需要设置网页的其他属性，可以打开“页面属性”对如果需要设置网页的其他属性，可以打开“页面属性”对话框进行设置。话框进行设置。


页面属性

8.3.3 8.3.3 网页基本元素网页基本元素在通常情况下，网页上一般都包含文本、日期、特殊符号在通常情况下，网页上一般都包含文本、日期、特殊符号及水平线等基本元素。及水平线等基本元素。11．文本和特殊符号．文本和特殊符号文本的操作主要包括：输入文字、设置文字大小、设置字文本的操作主要包括：输入文字、设置文字大小、设置字体、设置文本颜色、设置文本对齐方式等。体、设置文本颜色、设置文本对齐方式等。22．日期．日期 DreamweaverDreamweaver 提供了一个方便的日期对象，该对象使用户提供了一个方便的日期对象，该对象使用户可以用任何喜欢的格式插入当前日期，还可以选择在每次保存可以用任何喜欢的格式插入当前日期，还可以选择在每次保存文件时自动更新该日期。文件时自动更新该日期。33．水平线．水平线水平线对于组织信息很有用。在页面上，可以使用一条或水平线对于组织信息很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。多条水平线以可视方式分隔文本和对象。


设置文本格式

段落的格式、字体、字号、字的颜色、字体加粗／倾斜、对齐方式（左对齐／居中／右对齐）、文字所链接的路径或 URL 等。

文本属性面板

1. 格式设置所选文本的段落样式。2. 样式显示当前应用于所选文本的类样式。如果没有对选

定内容应用过任何样式，则弹出式菜单显示“无 CSS 样式”。如果已对选定内容应用了多个样式，则弹出式菜单是空的。

3. 粗体根据在“首选参数”对话框的“常规”类别中设置的样式参数选择，将 或 应用于选定的文本。

4. 斜体根据在“首选参数”对话框的“常规”类别中设置的样式参数选择，将 或 应用于选定的文本。

编辑段落段落：格式上统一的一段文本输入一段文本，按 <enter>键就自动构成了段落。 

对齐段落有三种方式：左对齐、居中和右对齐

选定要设置对齐方式的段落，使用 Text菜单中 Align菜单项的 Left 、 Center或 Right 选项，或者在属性面板中，用鼠标单击右上角的对齐按钮

格式中的标题格式中的预格式化：处理空格

文本属性面板改变字体： 1. 选定要改变字体的文本，选择“文

本”菜单中“字体”菜单项中的相应选项；

2. 从属性面板上字体列表中选择相应的选项

如果没有选定任何文本，则改变的字体将应用于以后输入的文字；

如果字体列表中没有需要的字体，可以单击”编辑字体列表“选项，在随后出现的对话框中可以添加需要的字体到字体列表中。

文本的字体属性

改变字号：选定要改变字号的文本，从属性面板上”大小“的下拉列表中选择相应的选项。

如果没有选定任何文本，将会改变以后输入文字的字号；

尽量不要使用自己安装的字体，用户机器上可能没有安装。

改变颜色

文本属性面板

此处为粗体显示文本此处为大字体显示文本此处为小字体显示文本此处为斜体文本此处为等宽字体文本此处为下划线文本此处为带删除线的文本

缩进缩进段落是针对网页边距而言的，有增加缩进

和减小缩进两种。增加缩进是将当前的段落向文档窗口的右侧移

动；减小缩进则是将当前的段落向文档窗口的左侧移动，

选定要缩进的一个或多个段落，在“文本”菜单中选择增加缩进或减小缩进；或者使用属性面板中的增加缩进按钮或减小缩进按钮进行段落缩进。

文本属性编辑－项目列表

无序列表 <ul> </ul> 有序列表 <ol> </ol> 目录列表 <dl></dl> 列表属性

8.4.1 8.4.1 超链接的基本概念超链接的基本概念网页中的超链接就是以文字或图像等作为链接对象，然后网页中的超链接就是以文字或图像等作为链接对象，然后指定一个要跳转的网页地址。当浏览者单击文字或其他对象时，指定一个要跳转的网页地址。当浏览者单击文字或其他对象时，浏览器将跳转到指定的目标网页。浏览器将跳转到指定的目标网页。11．超链接的分类．超链接的分类根据超链接目标文件的不同，超链接可分为页面超链接、根据超链接目标文件的不同，超链接可分为页面超链接、锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，锚点超链接、电子邮件超接链等；根据超链接单击对象的不同，超链接可分为文字超链接、图像超链接、图像映射等。超链接可分为文字超链接、图像超链接、图像映射等。22．路径．路径创建超级链接时必须了解链接与被链接文本的路径。在一创建超级链接时必须了解链接与被链接文本的路径。在一个网站中，路径通常有个网站中，路径通常有 33 种表示方式：绝对路径、根目录相对种表示方式：绝对路径、根目录相对路径和文档目录相对路径。路径和文档目录相对路径。

8.4 8.4 超链接超链接

8.4.2 8.4.2 设置超链接设置超链接【例【例 8-38-3】制作一个“金庸名】制作一个“金庸名著赏析”网页，使用锚记链接、著赏析”网页，使用锚记链接、页面间链接和电子邮件链接等页面间链接和电子邮件链接等技术。当用户单击主页面栏目技术。当用户单击主页面栏目中某个名著的链接时，首先链中某个名著的链接时，首先链接到本页面内该作品的简介位接到本页面内该作品的简介位置，如果用户需要查看详细内置，如果用户需要查看详细内容，单击“详细内容”链接，容，单击“详细内容”链接，进入相应的页面显示详细的作进入相应的页面显示详细的作品内容。使用锚点链接实现页品内容。使用锚点链接实现页内链接，页面之间可以通过内链接，页面之间可以通过“返回”链接返回到主页面，“返回”链接返回到主页面，实例效果如图实例效果如图 8-388-38 所示。所示。

8.4 8.4 超链接超链接

【例8-3】

超链接分类内部链接：在同一个站点内的不同页面之

间相互联系的超链接。锚点链接：可以链接到网页中某个特定位

置的链接。外部链接：把网页与 Internet 中的目标相联系的链接。

普通文本超级链接文本的 Properties 面板上有 Link 和 Targe

t两项，这就与超级链接有关。选中所需的文本，有四种方法可使它链接到其它页面。

1. 直接在 Link 后填入要链接到的页面的地址。最好用相对地址，而不用绝对地址。

2. 点击后面的图标，然后选取要链接到的页面。3. 使用图标。用快捷键 F5 可打开你定义的本地站点的文件列表，用鼠标点击，不要松开，拖动至你要链接到的页面即可。

4. 用鼠标把本地站点文件列表中的文件直接拖到 Properties 面板上 Link 后即可

文本属性面板－链接在链接栏输入链接网页的地址，单击链接文字

可以直接跳到被链接的页面。 _blank: 空白视窗，保留原来的窗口，新开启

一个窗口浏览所链接的文件内容； _parent: 上一层页框视窗，若网页使用框架，

则所链接的网页回到上一层的框架所在窗口； _self: 本身视窗，默认链接显示方式，所链接

的内容取代原来窗口的内容； _top: 全视窗，以全窗口的方式出现所链接的

网页，取代所有窗口内容。

设置文本链接的状态

一个未被访问过的链接与一个被激活的链接在形式上肯定会有所区别，链接被访问过了也会发生变化，提示用户这是一个已经点击过的链接，所有这些都是链接的状态。通过设置不同的文本颜色可以使各个状态区别开来。

设置不同的文本颜色的具体步骤如下：打开包含文本链接的文档“园丁乐园”，选择主菜单中的“ Modify修改）” |“Page Properties （页面属性）”命令，打开“ Page Properties （页面属性）”对话框；

单击“ Links （链接）”项右边的图标，打开调色板，选取一种颜色；

同样为“ Visited Links （访问过的链接）”、“ Active （活动链接）”项设置不同的颜色；

单击“ Ok” 按钮，完成设置。

删除文本超链接

先用鼠标选定文本对象，将光标定位于属性面板的“ Link”文本框中，用“ BackSpace”键或“ Delete”键，将其显示的超链接对象文件名删除，再回车，或选择“ Modify”|“Remove Link”命令，都可以删除超链接而保留原文本对象。

插入 E － mail 及其链接单击“常用”对象面板上的“电子邮件”按钮；设置邮件地址，单击确定按钮。

内部超链接

1．为文字添加超链接 2．为图片添加超链接

创建锚点

（ 1 ）将光标移到需要加入锚点的地方，一般是将光标放置在一行或是一段文字的开头部分；

（ 2 ）单击对象面板“ Invisibles” 类上的“插入锚点” 按钮，将弹出 “ Insert Named Anchor （插入命名锚点）”对话框；

（ 3 ）在对话框的“ Anchor Name” 文本框输入锚点的名称；

（ 4 ）单击“ OK” 按钮。

命名锚点

① 只能使用字母和数字，锚点命名不支持中文。虽然在插入锚点对话框中能输入中文，但在属性面板上显示的则是一堆乱码，且在为锚点添加链接的时候，也无法工作。

② 锚点名称的第 1 个字符最好是英文字母，一般不要以数字做为锚点名称的开头。

③ 锚点名称区别英文字母的大小写。 ④ 锚点名称间不能含有空格，也不能含有特殊字符。

链接锚点创建锚点后，还必须链接锚点。选择想要链接到锚点

的文字或图片，然后按如下方法中的任意一种进行操作。

在属性面板上的“ Link” 文本框中输入符号 # 和锚点名称。

选择文字或图片后，按住 Shift键，然后拖动鼠标指向锚点。在属性面板上的“ Link” 文本框中将自动出现符号 # 和该锚点的名称。

按住属性面板上的“ Point to File （指向文件）”按钮，并拖动鼠标指向锚点，属性面板上的“ Link”文本框中自动出现符号 # 和该锚点的名称。

链接锚点时，应注意以下事项：

① 在 # 和锚点名之间不要留有空格，否则链接会失败。 ② 在不同文件夹中为锚点创建链按时，其文件名后缀必定

是“． htm” ，而不能写成“． html” ，否则链接也会失败。

③ 符号 #必须是半角符号，而不能为全角符号。

外部超链接

将本站点的某个对象与 Internet上的目标建立一种相互的关系。

例如选中某个对象，在属性面板的 Link 文本框中填上 http://www.swjtu.edu.cn再回车，就可以了。

添加下载文件超链接• 网站提供文件下载功能的方法 • 首先选择主窗口的菜单站点→站点文件命令• 打开站点窗口，找到需要链接的目标文件 ;

• 选择网页中需建立超链接的文字，按下 Shift键拖动鼠标到站点窗口中的目标文件。

创建空链接

空链接是一个未指定目标的链接， Dreamweaver 的行为面板中列出了许多行为，这些行为相当于使用 JavaScript 编写的程序或函数，要想对文本设置行为，首先为文本建立空链接，这样行为才有效。

为文本建立超链接时，只要先在文档窗口选定文本，然后在属性面板中的“链接”栏中输入一个数值符“ #” 即可。建立空链接的目的就是为了应用行为，其他情况下不必建立空链接。

8.5.1 8.5.1 插入图像插入图像

【例【例 8-48-4】制作一个学】制作一个学校建筑的展示网页，通校建筑的展示网页，通过学校校风图像和循环过学校校风图像和循环滚动图像的展示，突出滚动图像的展示，突出学校的建筑风格和特色。学校的建筑风格和特色。循环的图像支持超链接，循环的图像支持超链接，并且鼠标移动到图像上并且鼠标移动到图像上时，画面静止；鼠标移时，画面静止；鼠标移出图像后，图像继续滚出图像后，图像继续滚动，效果如图动，效果如图 8-508-50 所示。所示。

8.5 8.5 使用图像使用图像

【例8-4】


制作特色的滚动效果将光标定位到第一副画面之前，添加如下代码<marquee behavior="scroll" scrolldelay="200" width="500" height="85"

onmouseover='this.stop()' onmouseout='this.start()'> <a href="＃"><img src="image/001.gif" width="144" height="85" border="0"/></a> 　 <a href="＃"><img src="image/002.gif" width="149" height="85" border="0"/></a> 　 <a href="＃"><img src="image/003.gif" width="153" height="85" border="0"/></a> 　 <a href="#"><img src="image/004.gif" width="132" height="85" border="0"/></a>

</marquee>

8.5.2 8.5.2 图像映射图像映射

【例【例 8-58-5】制作一个认】制作一个认识世界地图的网页，当识世界地图的网页，当用户将鼠标移至地图的用户将鼠标移至地图的不同位置时，显示出相不同位置时，显示出相应的说明文字，例如，应的说明文字，例如，鼠标移到南美洲区域上鼠标移到南美洲区域上时，便会显示“南美时，便会显示“南美洲”的字样。单击地图洲”的字样。单击地图的不同位置，打开相应的不同位置，打开相应的链接页面显示相应的的链接页面显示相应的简介，效果如图简介，效果如图 8-578-57 所所示。示。


【例8-5】


8.5.3 8.5.3 鼠标经过图像鼠标经过图像

【例【例 8-68-6】制作一个翻】制作一个翻转图像的效果，原始图转图像的效果，原始图像是一幅像是一幅Windows XPWindows XP操作系统的缩略图像。操作系统的缩略图像。当鼠标经过图像时，图当鼠标经过图像时，图像变为像变为 Windows XPWindows XP操操作系统的放大画面；而作系统的放大画面；而鼠标离开时，图像又恢鼠标离开时，图像又恢复为原始图像；当单击复为原始图像；当单击图像时，链接到另外一图像时，链接到另外一个介绍个介绍Windows XPWindows XP操操作系统的页面，效果如作系统的页面，效果如图图 8-628-62 所示。所示。


【例8-6】


简单首页设计例子－插入图片将光标移到要插入图片文件的位置，单击

“对象面板”上的“图像”按钮；在弹出的“选择图像源”窗口里选择需要

插入的图像文件。

添加图像插入静态图片使用 Insert菜单、 Object 面板或者直接从资源管理器中将图象文件拖动到文档窗口中的合适位置。　 1 ） Insert菜单：选定 Insert菜单中的 Image 选项，将会出现 Select Image Source 对话框，在该对话框中选定要插入的图片文件名及其所在的文件夹、文件类型，然后单击 Select 按钮，该图片就会被插入到插入点光标所在的位置。

　 2 ） Objects 面板：单击 Object 面板中的 Insert Image 按钮，也会出现 Select Image Source 对话框。

在网页中插入图像1 。插入图像在 Dreamweaver 中插入图像非常简单，具体操作步骤见课本。2 ．图像属性参数在文档中插入图像后，用鼠标单击图像，图像四周出现可编辑的缩放手柄，说明该图像被选定。这时属性面板中显示出关于图像的属性信息。

3 ．改变图像的尺寸改变图像的尺寸大小可以通过在属性面板中的“Ｗ”和“Ｈ”直接输入数值来改变图像的尺寸大小。此外，还可以通过拖放图像边框来改变图像的尺寸。

4 ．调整图像在网页中的相对位置

添加图像占位符创建占位符来代替稍后添加的图像；在要添加图像的位置创建一个空行。单击这个空行。

选择“插入” >“ 图像对象” >“ 图像占位符”。

在“图像占位符”对话框中，输入该占位符的名称、输入宽度和高度。

单击“确定”。

图像属性

图像名称宽和高：所选定图片的宽度和高度，单位为像素。源文件：图片的路径及文件名

链接对齐：图片的对齐方式，进行图文混排时可以使用此项

替代：可以在后面的文本框中输入文字，当图片在浏览器中不能显示时，将显示文本框中的文字

图像属性

地图垂直边距和水平边距：图片在垂直和水

平方向的位置。目标低品质源边框：为图片指定边框的宽度编辑重设大小

8.6.1 8.6.1 添加背景音乐添加背景音乐

背景音乐是体现网页个性和风格的一种常用手段，但由背景音乐是体现网页个性和风格的一种常用手段，但由于背景音乐并不是一种标准的网页属性，所以需要通过修改于背景音乐并不是一种标准的网页属性，所以需要通过修改源代码的方式为网页添加背景音乐。源代码的方式为网页添加背景音乐。【例【例 8-78-7】为前面章节中制作的学校建筑展示网页制作背景】为前面章节中制作的学校建筑展示网页制作背景音乐。打开页面时，自动播放一首温馨的音乐。打开页面时，自动播放一首温馨的 MIDIMIDI背景音乐。背景音乐。

8.6 8.6 使用多媒体对象使用多媒体对象

【例8-7】

添加背景音乐添加背景音乐在 <head>….</head> 添加如下代码 <bgsound src="../music/axs.MID" loop="1"

/>

8.6.2 8.6.2 声音与视频声音与视频【例【例 8-88-8】制作一个影音】制作一个影音播放的娱乐页面。当页面播放的娱乐页面。当页面打开时，页面内左上角嵌打开时，页面内左上角嵌入浏览器自动播放一段标入浏览器自动播放一段标志视频；当用户单击“音志视频；当用户单击“音乐欣赏”中的歌曲链接时，乐欣赏”中的歌曲链接时，在新的窗口打开在新的窗口打开 Windows Windows Media PlayerMedia Player 播放器播放播放器播放该歌曲；当用户单击“该歌曲；当用户单击“ MMVV电影欣赏”中的视频链电影欣赏”中的视频链接时，在新的窗口打开接时，在新的窗口打开 WiWindows Media Playerndows Media Player 播放播放器播放视频动画。实例效器播放视频动画。实例效果如图果如图 8-648-64 所示。所示。

8.6 8.6 使用多媒体对象使用多媒体对象

【例8-8】


声音与视频声音与视频制作嵌入型标志视频：插入 - 媒体 - 插件，

选择要播放的文件设置标志大小设置音频视频链接，目标为 _blank

8.7.1 8.7.1 插入表格插入表格表格是页面布局极为有用的设计工具。在设计页面时，往表格是页面布局极为有用的设计工具。在设计页面时，往往要利用表格来定位页面元素。使用表格可以导入表格化数据，往要利用表格来定位页面元素。使用表格可以导入表格化数据，设计页面分栏，定位页面上的文本和图像等。设计页面分栏，定位页面上的文本和图像等。在在 DreamweaverDreamweaver 中插入表格的方法如下。中插入表格的方法如下。① ① 将光标放到要插入表格的位置。将光标放到要插入表格的位置。② ② 执行下列操作之一：执行下列操作之一：执行“插入”→“表格”命令；执行“插入”→“表格”命令；单击插入工具栏“常用”分类中的“表格”按钮；单击插入工具栏“常用”分类中的“表格”按钮；按〈按〈 CtrlCtrl 〉〉 ++〈〈 AltAlt〉〉 ++〈〈 TT〉组合键。〉组合键。

8.7 8.7 使用表格使用表格

8.7.2 8.7.2 添加内容添加内容建立表格以后，建立表格以后，可以在表格单元格中可以在表格单元格中添加文本、图像及任添加文本、图像及任意可以内嵌在网页中意可以内嵌在网页中的元素。的元素。【例【例 8-98-9】制作一个】制作一个QQQQ 商城电器产品销售商城电器产品销售统计表格，统计电脑、统计表格，统计电脑、电视机和电冰箱电视机和电冰箱 44 个个季度的销售情况，如季度的销售情况，如图图 8-708-70 所示。所示。

8.7 8.7 使用表格使用表格


【例8-9】

表格分类

边框值是否为 0 分为：有形表格：预览时能看见、可以填写数据、

按升序或降序排列和无形表格：预览时不可见、主要用于排

版

网页结构分析

标题栏

装饰栏导航栏

信息区

创建新表格

利用 Dreamweaver 创建新表格时，首先选中对象面板上“ View” 栏目下“ Standard View” （标准视图）按钮，然后可以通过下列四种方式中的任意一种：

① 将对象面板调整到“ Common” 类上，单击“ Insert Table” （插入表格）按钮。

② 通过主窗口的菜单“ Insert”|“Table”命令。③ 使用快捷组合键“ Ctrl+Alt+T” 。④ 将对象面板调整到“ Common” 类上，拖动“ Insert Table” 按钮到

主窗口的工作区中。插入表格： Insert菜单 -Table 选项嵌套表格：在表格的单元格中再插入表格。操作：选定单元格、 Insert 菜单、 Table 选项

插入表格进行编排在“对象”面板中单击“常用”选项卡上

的“表格”按钮，出现一个插入表格对话框，在对话框内填入相应数据。单击“确定”，一个表格就插入到编辑窗口中。

表格属性和单元格属性

表格属性表格的行数。表格的列数。表格的宽度表格边框的宽度。表单元格间隙设置。表单元格内部空白。

选择表格

选择表格可分为选择整个表格和选择表格中的单元格。① 如果要选择整个表格，则可进行如下的操作之一：将光标置于表格中的某个单元格中，选择“ Modify”|“Table”|“Select Ta

ble”命令。将光标置于表格中的某个单元格中，再按两次组合键“ Ctrl+A” 。将光标置于表格中的某个单元格中，单击鼠标右键，在弹出的快捷菜单中

选择“ Select Table”命令。将光标置于表格的尾部（在表格的同一行，但不在表格之内），向左拖动鼠标。

单击表格的边线。② 的方法有以下几种：

选择表格行或列 1 ）选择某一表格行：在选定行的左侧单击鼠

标或者使用状态栏中的 tr 按钮2 ）选择连续的多个表格行：在要选定的第一行的左侧按住鼠标左键向下拖动3 ）选择不连续的多个表格行： Ctrl键 + 在选定行的左侧单击鼠标左键4 ）选择某一表格列：在选定行的上面单击鼠标5 ）选择连续的多个表格列：在要选定的第一列的上面按住鼠标左键向右拖动6 ）选择不连续的多个表格列： Ctrl键 + 在选定列的上面单击鼠标左键

选择单个单元格

将光标置于所要选择的单元格中，按一次组合键“ Ctrl+A” 。

将光标置于所要选择的单元格中，向右拖动鼠标。将光标置于所要选择的单元格中，选择“ Edit”|“Select

All”命令。按住 Ctrl键，单击所要选择的单元格，再单击一次则取消

对单元格的选择。

选择多个单元格

按住 Ctrl键，单击所要选择的所有单元格。将光标置于单元格中，拖动鼠标，选择多个单元格。如果要选择整行，将光标置于该行的左边缘，当光标变成

图标时单击鼠标左键。如果要选择整列，

选择的全部单元格

将光标置于第 1 个单元格中，并拖动鼠标至最后一个单元格。

将光标置于第 1 个单元格中，按住 Shift键，再单击最后一个单元格。

将光标置于第 1 行的左边缘，当光标变成图标时，向下拖动鼠标至最后一行。

将光标置于第 1 列的上边缘，当光标变成图标时，向右拖动鼠标至最后一列。

取消选择

取消所有选定单元格的选择状态：单击鼠标左键

取消某几个单元格的选择状态： Ctrl键 +鼠标单击需要取消选择的单元格

单元格的复制

选定单元格、 Edit菜单、 Copy 选项说明：要复制的单元格必须构成矩形区域；复制整行的单元格，将被添加到目标单元格的上方；

复制整列的单元格，将被添加到目标单元格的左侧；

将目标定位在文档窗口的空白处，将会创建一个独立的表格。

单元格的删除

在单元格内设置插入点、快捷菜单、 Table-Delete Column或 Delete Row或者选定要删除的表格行或列、 Edit菜单 -Cut或 Clear 选项

注意：在 Dreamweaver 中，不能删除某一个或某几个单元格，只能删除表格的某行或某列。

删除单元格内的文本：选定单元格、 Edit菜单 -Cut或 Clear 选项或者选定单元格、按 Delete键

插入表格行或列

插入某一行或某一列：确定表格内插入点的位置、Modify 菜单、 Table 选项、 Insert Row 或 Insert Column

插入某几个表格行或列：在表格内确定插入点的位置、Modify 菜单、 Table 选项、 Insert Rows or Columns

删除表格行或列：选定要删除的行或列、Modify 菜单、 Table 选项、 Delete Row 或 Delete Column

在现有的表格中插入单元行

将光标移到要插入单元行的下一行，选择“ Modify”|“Table”|“Insert Row”命令。

将光标移到要插入单元行的下一行，按组合键“ Ctrl+M” 。将光标移到要插入单元行的下一行，单击鼠标右键，在弹

出的快捷菜单中选择“ Table”|“Insert Row”命令。

在现有的表格中插入单元列

将光标移到在插入单元列的右边一列，选择“ Modify”|“Table”|“Insert Column”命令。

将光标移到要插入单元列的右边一列，按组合键“ Ctrl+Shift+A” 。

将光标移到要插入单元列的右边一列，单击鼠标右键，在弹出的快捷菜单中选择“ Table”|“Insert Column”命令。

在现有的表格中添加多行或多列

首先将光标移到要插入行或列附近的单元格中，单击鼠标右键，在弹出的下拉菜单中选择“ Table”|“Insert Rows or Columns”命令，弹出 “ Insert Rows or Columns” 对话框。在此对话框中进行相关的设置，然后单击“ OK”按钮，设置的多列或多行将插入到页面中。

删除整行／整列

先选择欲删除的整行或整列，直接按 Del键，即可删除。先将光标移到要删除的行或列中，选择“ Modify”|“Tabl

e”|“Delete Row”或“ Delete Column”命令。将光标移到要删除的行或列中，单击鼠标右键，在弹出的

快捷菜单中选择“ Table”|“Delete Row”或“ Delete Column”命令。

编辑表格

（ 1 ）设置表格高度在创建表格时，可以通过表格对话框来设置表格的宽度，但无法

设置表格的高度，如果要设置表格的高度，则必须通过表格属性面板来确定。

（ 2 ）合并／拆分单元格对表格中的单元格进行合并／拆分，既可以通过菜单命令来实现，也可以通过单元格属性面板（单击任意单元格，属性面板将会自动切换）上的快捷按钮来完成。

（ 3 ）设置单元格的宽度及高度在单元格属性面板上可以改变单元格默认的宽度和高度。

分割与合并

分割单元格：选定单元格 --Modify菜单 --Table 选项 --Split Cell

或者在要分割的单元格内单击鼠标右键打开快捷菜单，使用 Table下的 Split Cell 选项

合并单元格：选定需要合并的单元格 --Modify菜单 --Table 选项 --Merge Cells或者单击鼠标右键打开快捷菜单，选择 Table下的Merge Cells 选项

表格属性的设置设置表格的边框颜色设置表格的边框颜色时，必须指定表格的边框线的宽度不为

0 。要为表格的边框指定颜色，首先选择表格，单击属性面板上“ Brdr Color” 的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码，即可为表格的边框添加颜色。

（ 2 ）设置表格的背景表格的背景与网页背景一样，即可以设定为单一的颜色，也可

以用图片作为表格的背景。要将表格背景设为单一的颜色，首先选择整个表格，再单击属性面板上“ Bg Color” 后面的颜色框，在弹出的调色板中选择颜色，或者是在后面的文本框中直接输入颜色的色码；要将图像设为表格的背景，首先选择整个表格，再在属性面板上的“ Bg Image” 文本框中输入图像所在的路径，或是单击其后的文件夹图标，在弹出的对话框中选择图像文件。

表格的嵌套

在表格中嵌套表格将光标置于要嵌套表格的单元格中，选择 Insert→T

able 。• 将光标置于要嵌套表格的单元格中，将 Objects

面板切换到 Common 类下 Insert Table 按钮。• 将 Insert Table 按钮从 Objects 面板的 Common

类上拖动到要嵌入表格的单元格中。

套用表格样式

导入表格数据文件加入外部数据

应用表格使用预置表格：选定表格 -Command菜

单 --Format Table 选项

排序表格内容：选定表格或在表格的任一单元格内容设置插入点、 Command菜单的 Sort Table 选项

修正表格：选定表格、属性调板 1 ）将鼠标移至表格的左上角，当光标变成十字形的箭头时单击鼠标左键。2 ）将鼠标移至表格的右边框，当光标变成水平方向的双向箭头时单击鼠标左键。3 ）将鼠标移至表格的下边框，当光标变成垂直方向的双向箭头时单击鼠标左键。4 ）使用 Modify菜单下 Table 的 Select Table选项。5 ）使用文档窗口中状态栏里的 Table 标签。

用表格进行页面布局

网页排版功能，

导入表格数据

把用 Excel 等软件处理的数据放到网上， Dreamweaver 专门提供了一个转换的功能。

先把 Excel 等软件中将文件另存为文本格式的文件，或在 Excel 中保存为 .csv ，

然后选择 File下的 Import 中的 Import Table Data… ，或者选择 Insert下 Tabular Data ，这时都弹出对话框（只是标题不同，前者是 Import Table Data ，后者是 Inset Tabular Data ）。

填写需导入的数据文件的地址，或者可点击下面的 Browse… 按钮选择这个文件。

用来向 Dreamweaver说明，这个数据文件的各数据间是怎么分隔开的，以供 Dreamweaver正确的区分各数据。

Tab 表示是用空格分隔的； Comma 表示是用逗号分隔的； Colon 表示是用冒号分隔的； Semicolon 表示是用分号分隔的； Other ，则下拉选框后多出一个文本框，

可填入用来分隔数据的符号。

导入数据后，生成的表格的宽。 Fit to Data:则表格宽度尽量适应原数据文件数据的排列方式。

Set:则是自行设置表格的宽度，在后面填入数值，紧跟其后的下拉选框是数值的单位。

可填单元格内空白的大小，单位将是像素单位。可填单元格间的间隙大小，单位将是像素单位。设置生成的表格顶行内容的文本格式，其后的下拉选

框有四个选项—— No Formatting, Bold, Italic, 和 Bold Italic 。 No Formatting 是不设特殊格式， Bold是粗体， Italic 是斜体， Bold Italic 是粗斜体。

可填生成表格的边框宽度。

标准视图中的表格与布局视图中的表格常用选项卡表格选项卡布局选项卡

标准视图模式下表格的应用技巧选定表格的操作表格的缩放操作编辑表格格式化表格

布局视图模式下表格的应用技巧绘制布局单元格绘制布局表格移动布局单元格和布局表格调整布局单元格和布局表格大小布局单元格属性面板布局表格属性面板

1．简答 Dreamweaver文档编辑所包括的 3种视图及特点。2．本地站点和远端站点的区别是什么？举例建立一个本地站点。3．在本地站点中创建一个首页文件 index.htm和一个存放图像的文件夹 image。自己定义首页文件的标题、背景色和页面字体。4．使用网页的基本元素设计一个简单的以美食为主题的网页。5．简答超链接 3种路径的区别和适用场合。6．使用图像和超链接制作一个手机展示的页面，主页面显示手机的缩略图，单击缩略图后打开一个新页面，使用表格和放大的图片介绍选择手机的性能指标，如图 8-76所示。7．设计一个包含内嵌视频、使用超链接的声音和视频的页面。8．使用表格制作一个学生课程表的页面。

习题习题 88

Documents

网页制作工具 Dreamweaver