网页制作技术教程 - 万水书苑-出版资源网

全文

(1)第 2 章网页制作【教学目的】（1）掌握页面的整体控制和头部内容设置的方法。（2）熟练掌握在网页中输入、设置标题和正文文字的方法。（3）掌握在网页中嵌入图像、声音、多媒体信息的方法。（4）掌握建立各种形式超级链接的方法。（5）熟练掌握网页页面布局的各种方法。（6）掌握制作表单的方法。（7）掌握在网页中添加 CSS 的方法。（8）掌握网页特效的制作方法。（9）掌握模板和库的使用方法。（10）掌握行为的使用方法。【基本技能】（1）培养学生设计网页、网页布局的技能。（2）培养学生设计静态网页的基本技能。（3）训练和培养学生获取信息和处理信息的技能。【教学导航】本章共有 12 大基本知识点，分别是：文档操作、文本操作、图像操作、超级链接、媒体、表格、框架、图层、表单、模板和库、CSS 样式、行为。本章根据教学内容，设置了 12 个任务，并将每个任务分解成几个小任务，与相关知识点紧密结合。在实战训练部分，给出一个实战训练，并有详细操作步骤；另有一个拓展实战，供学生强化训练。本章建议理论教学 14 课时，实践教学 14 课时。本章学习完后，可以根据学生实际情况安排学生自己学习第 7 章内容。【基本知识点】. 2.1. 文档操作. Dreamweaver 8 中为处理各种 Web 设计和开发文档提供了环境，除了 HTML 文档以外，还可以创建和打开各种基于文本的文档，如 ASP、CSS 等类型的文件。.

(2) 第 2 章网页制作. 21. 2.1.1 新建空白文档网页新建一个文档有两种方法：  如果您的 Dreamweaver 运行后显示起始页，则在起始页中直接选择“创建新项目” 下的 HTML 选项。  如果您的 Dreamweaver 运行后不显示起始页，则选择“文件”→“新建”命令，弹出“新建文档”对话框，通过该对话框完成新建。下面我们以方法 2 为例介绍新建文档的具体过程。（1）选择“文件”→“新建”命令，弹出“新建文档”对话框，如图 2-1 所示。. 图 2-1. “新建文档”对话框. “类别”列表框中显示出九大选项， “基本页”列表框中也显示出九大选项，普通网页都是 HTML 文档。（2）在“类别”列表框中选择“基本页”选项，在“基本页”列表框中选择 HTML 选项，单击“创建”按钮，创建一个新的文档。窗口底部状态栏上有一组相成的数字，单击此处会弹出一个菜单，如图 2-2 所示。这些数字是用来定制文档窗口的大小的，该数字对应用户窗口的分辨率。目前网络用户使用最多的屏幕分辨率为 800×600 和 1024×768，因此在设计网页时应当兼顾浏览的用户，不仅使自己的网页布局美观合理，也方便用户浏览。. 图 2-2. 选择编辑窗口大小.

(3) 22. 网页制作技术教程. 单击分辨率数字，选择“编辑大小”，弹出“首选参数”对话框，如图 2-3 所示，选择您面向的用户的分辨率，然后单击“确定”按钮，一般测试是以 56Kb/s 的连接速度为标准，因此请在“连接速度”下拉列表框中选择 56，该速度值取整数显示，并不精确，用途是给设计者一个参考值，避免网页浏览时下载时间过长。. 图 2-3. “首选参数”对话框. 下面通过任务讲解如何新建空白文档网页。【任务 2-1】文档操作【任务 2-1-1】新建空白文档网页【操作要求】在站点根目录（D:\root）下建立一个名为 index.html 的网页【操作步骤】（1）启动 Dreamweaver 后，在文件面板中选择“站点－我的站点” ，如图 2-4 所示。单击文件面板中的按钮，在“文件”的级联菜单中选择“新建文件”选项，如图 2-5 所示。. 图 2-4. “文件”面板.

(4) 第 2 章网页制作. 图 2-5. 23. “文件”的级联菜单. （2）在文件面板的“站点－我的站点（D:\root）”文件夹中出现了一个新文件，名称为 untitled.html，如图 2-6 所示。将其重命名为 index.html，如图 2-7 所示。. 图 2-6. 新建文件. 图 2-7. 文件重命名. （3）在文件面板中，双击 index.html 即可在 Dreamweaver 的文档窗口中打开该网页，对其进行编辑修改。 2.1.2 设置页面属性在制作网页时，还需要对影响整个页面的参数进行必要的设置。 1．设置外观选择“修改”→“页面属性”命令，弹出“页面属性”对话框，如图 2-8 所示。在“分类”列表框中选择“外观”选项，设置外观的属性。（1）页面字体：设置网页中文本的字体。（2）大小：设置网页中文本的大小。（3）文本颜色：设置网页中文本的颜色。（4）背景颜色：设置网页中背景的颜色。（5）背景图像：设置网页的背景图像，若在网页中同时设置背景颜色和背景图像，则在浏览网页时只显示网页的背景图像。.

(5) 24. 网页制作技术教程. 图 2-8. “页面属性”对话框. （6）重复：设置背景图像的显示效果（不重复、重复、横向重复、纵向重复）。（7）左边距、右边距、上边距、下边距：设置页面四周边距的大小。 2．设置链接在“页面属性”对话框的“分类”列表框中选择“链接”选项，如图 2-9 所示，设置链接点的属性。. 图 2-9. 设置链接属性. （1）链接字体：设置页面超级链接文本的字体。（2）大小：设置页面超级链接文本的大小。（3）链接颜色：设置超级链接文本的颜色。（4）变换图像链接：设置变换图像后超级链接文本的颜色。（5）已访问链接：设置已访问的超级链接文本的颜色。（6）活动链接：设置单击超级链接时文本的颜色。.

(6) 第 2 章网页制作. 25. （7）下划线样式：自定义超级链接文本采用下划线情况。 3．设置标题在“页面属性”对话框的“分类”列表框中选择“标题”选项，如图 2-10 所示，设置标题的属性。. 图 2-10. 设置标题属性. 在“标题”区域中可以设置标题的字体以及重新定义 6 组标题的大小和颜色。 4．设置标题和编码在“页面属性”对话框的“分类”列表框中选择“标题/编码”选项，设置标题/编码的属性，如图 2-11 所示。. 图 2-11 设置标题/编码属性. （1）标题：设置网页的标题。（2）编码：设置网页中的文本的编码。.

(7) 网页制作技术教程. 26. 5．设置跟踪图像在“页面属性”对话框的“分类”列表框中选择“跟踪图像”选项，设置跟踪图像的属性，如图 2-12 所示。. 图 2-12. 设置跟踪图像属性. （1）跟踪图像：单击“跟踪图像”文本框右侧的“浏览”按钮，在弹出的对话框中可以选择图像作为跟踪图像。（2）透明度：拖动“透明度”右边的滑块设置图像的透明度。下面通过任务讲解如何页面属性设置。【任务 2-1-2】页面属性设置【操作要求】在文档窗口中打开 D:\root\index.html 网页，将网页标题设为“我的主页”，文本字体为“仿宋”，大小为 12 像素，颜色为#00FF00。【操作步骤】（1）在文档窗口中打开 D:\root\index.html 网页，右击窗口空白处，弹出一个快捷菜单如图 2-13 所示，从中选择“页面属性”命令，弹出“页面属性”对话框，如图 2-14 所示。. 图 2-13. 右键快捷菜单. 图 2-14. “页面属性”对话框. （2）在该对话框的“分类”列表框中选择“外观”选项，单击“页面字体”下拉列表框查找所需字体，在字体列表中无所需字体则选择“编辑字体列表” ，弹出“编辑字体列表”对话框，如图 2-15 所示。.

(8) 第 2 章网页制作. 图 2-15. “编辑字体列表”对话框. （3）在该对话框中的“可用字体”列表框中找到“仿宋”，单击按钮体添加到了“选择的字体”列表框中，如图 2-16 所示。. 图 2-16. 27. ，则“仿宋”字. “编辑字体列表”对话框. （4）在“外观”选项中，在“大小”下拉列表框中选择 12，在“文本颜色”文本框中输入#00FF00，如图 2-17 所示，操作完成。. 图 2-17. 设置文本属性.

(9) 网页制作技术教程. 28. 2.1.3 保存文档新建一个文件后，选择“文件”→“保存”命令，弹出“另存为”对话框，如图 2-18 所示。. 图 2-18. “另存为”对话框. 选中保存路径，给文件命名，选择保存类型，然后单击“保存”按钮即可完成文件保存。. 2.2. 文本操作. 文本是网页中不可或缺的元素，网页中的文本用来传达网页包含的各种信息与提示。文本的信息量大且生成的文件小，容易被浏览器下载，不会让浏览者用过多的时间等待，因此，不论网页内容如何丰富，文本始终都是网页中的基本元素。同时，掌握好文本的使用也是网页制作的基本功。 2.2.1 在网页中输入文本在网页中输入文本的方法很简单，单击网页中要插入文本的空白区域，窗口随即出现闪动的光标，选择输入法，输入文字即可。也可以用复制方法将其他文本内容粘贴过来。 2.2.2 设置文本属性文本的属性主要通过文本的“属性”面板来完成，如图 2-19 所示。. 图 2-19. 文本的属性面板.

(10) 第 2 章网页制作. 29. （1）格式：网页中的文本分为段落和标题两种格式，标题分为“标题 1”、“标题 2”、“标题 3”、“标题 4”、“标题 5”、“标题 6”6 种标题格式。选中需要设置格式的文本，从“格式” 下拉列表框中选择相应的选项可对所选文字设置相应的格式。（2）样式：显示当前应用于所选文本的样式。若所选内容没有用过任何样式，则“样式” 列表框中显示“无”，否则显示相应的样式名称。使用“样式”列表框可以执行以下操作：  选择要应用于内容的样式。  选择“无”删除当前所选样式。  选择“附加样式表”打开一个允许用户附加外部样式表的对话框。（3）“打开 CSS 面板”按钮：如果 CSS 面板未打开，单击此按钮可以打开 CSS 面板，同时该按钮变为灰色。（4）“加粗倾斜”按钮。（5）“文字段落对齐”按钮：分别为左对齐、居中对齐、右对齐和两端对齐。（6）字体：设置字体属性。（7）字体大小和单位选项。（8）设置选中文本颜色选项。（9）项目列表、编号列表按钮：创建所选文本的项目列表、编号列表。（10）缩进：左右缩进按钮。（11）按钮：用来设置文本的链接地址。  直接输入 URL（可以是网站网址、文件名等）。  通过单击“浏览文件”按钮选择要链接的文件。  通过单击“指向文件”按钮拖动指向文件面板中的站点的某个文件。（12）按钮，指的是要链接的文档的打开方式，有 4 个选项：  _blank：在新的浏览器窗口中打开超链接。  _parent：在包含该链接的父框集或窗口中打开链接。  _self：在链接所在的窗口中打开新窗口，此参数为默认值。  _top：在当前整个浏览器窗口中打开链接并删除该页面中的所有框架。 2.2.3 文本换行（1）按 Enter 键可以换行，同时也就结束了一个段落，且可以使两段之间多出一空行。（2）按 Shift+Enter 键，文档在同一个段落中换行，两行之间不产生空行。 2.2.4 插入特殊字符和在字符之间添加空格 1．插入特殊字符在 Dreamweaver 中可以插入的特殊字符包括版权符号、注册商标符号、商标符号、英镑符号、日元符号、左引号、右引号、破折号等。插入特殊字符可以通过“插入”菜单或“插入”面板来完成。（1）选择“插入”→HTML→“特殊字符”命令，选择相应的字符。（2）在“插入”面板中选择“文本”子面板，在其中单击按钮，打开特殊字符面板，.

(11) 网页制作技术教程. 30. 选择相应的字符，如图 2-20 所示。. 图 2-20. 打开“特殊字符”面板. 2．在字符之间添加空格在 Dreamweaver 中只允许字符之间包含一个空格，若要在文档中添加连续多个空格时，必须插入不换行空格，也可以设置一个在文档中自动添加不换行空格的参数选择。插入不换行空格，可执行如下操作之一：（1）在“插入”面板中选择“文本”子面板，在其中单击按钮，打开特殊字符面板，选择“插入不换行空格”选项。（2）选择“插入”→HTML→“特殊字符”→“不换行空格”命令。（3）按 Ctrl+Shift+空格键输入。（4）将输入法切换到全角状态再按空格键。设置添加不换行空格的参数：（1）选择“编辑”→“首选参数”命令。（2）在“分类”列表框的“常规”选项中选中“允许多个连接的空格”复选项。（3）单击“确定”按钮保存。 2.2.5 使用列表在 Dreamweaver 中常用的列表分为有序列表（编号列表）、无序列表（项目列表）和自定义列表 3 种形式。 1．插入项目列表在文档窗口中插入列表时，可以利用现有文本或新文本创建列表和定义列表。设置列表可以通过“文本”菜单或“属性”面板来完成。将现有文本设置成项目列表：（1）选择要定义列表的文本，选择“文本”→“列表”→“项目列表”命令。（2）选择要定义列表的文本，在“属性”面板中单击按钮。将新文本设置成项目列表，则在输入文本之前，先选择项目列表。.

(12) 第 2 章网页制作. 31. 2．插入编号列表将现有文本设置成编号列表：（1）选择要定义列表的文本，选择“文本”→“列表”→“编号列表”命令。（2）选择要定义列表的文本，在“属性”面板中单击按钮。将新文本设置成编号列表，则在输入文本之前，先选择编号列表。 3．插入自定义列表自定义列表不使用项目符号或数字这样的前导字符，通常用在词汇表或说明书中。创建定义列表的具体操作如下：（1）在 Dreamweaver 文档中，将插入点放在要添加自定义列表的位置。（2）选择“文本”→“列表”→“定义列表”命令。（3）输入列表项文本，然后按 Enter 键。（4）重复第 3 步操作直到完成整个自定义列表的创建。（5）按两次 Enter 键完成整个列表的创建。 2.2.6 在网页中插入文件头部内容一个网页文档由头部和正文两个部分组成。文档的标题信息就存储在头部位置，在浏览网页时，它会显示在浏览器的标题栏中，当该网页被放入到浏览器的收藏夹时，文档的标题又会作为收藏夹中项目的名称。 1．插入 Meta 属性 Meta 标签是记录有关当前页面的信息（如字符编码、作者、版权信息或关键字）的 Head 元素。这些标签也可以用来向服务器提供信息，如页面的失效日期、刷新间隔和 PICS 等级。插入 Meta 属性的步骤如下：（1）打开要设置 Meta 属性的网页，选择“插入”→HTML→“文件头标签”命令或在 “插入”面板中选择 HTML 子面板，分别如图 2-21 和图 2-22 所示。. 图 2-21. 通过菜单插入“文件头标签”.

(13) 网页制作技术教程. 32. 图 2-22. 通过“属性”面板插入“文件头标签”. （2）在打开的面板中选择 Meta，则打开 META 对话框，如图 2-23 所示. 图 2-23 META 对话框. 对话框中的参数说明如下：属性：指定 Meta 标签是否包含有关页面的描述性信息（name）或 HTTP 标题信息（http-equiv）。值：指定你在该标签中提供的信息类型。有些值（如 description、keywords 和 refresh）是已经定义好的，而且在 Dreamweaver 中有它们各自的属性检查器，但是你可以根据实际情况指定任何值，如 creationdate、documentID 或 level 等。内容：是实际的信息。例如，如果为“值”指定了等级，则可以为“内容”指定 beginner、 intermediate 或 advanced。 2．插入关键字许多搜索引擎装置（自动浏览 Web 页为搜索引擎收集信息以编入索引的程序）读取关键字 Meta 标签的内容，并使用该信息在它们的数据库中将你的页面编入索引。因为有些搜索引擎限制索引的关键字或字符的数目，或者当超过了限制的数目时，它将忽略所有的关键字，所以最好只使用几个精选的关键字。打开要插入关键字的网页，选择“插入”→HTML→“文件头标签”命令或在“插入”面板中选择 HTML 子面板，从中选择“关键字” ，则打开“关键字”对话框，如图 2-24 所示。.

(14) 第 2 章网页制作. 图 2-24. 33. “关键字”对话框. 在“关键字”文本框中输入关键字，关键字之间以逗号隔开。 3．插入说明文字许多搜索引擎装置（自动浏览 Web 页为搜索引擎收集信息以编入索引的程序）读取说明 Meta 标签的内容。有些使用该信息在它们的数据库中将你的页面编入索引，而有些还在搜索结果页面中显示该信息（而不只是显示文档的前几行）。有些搜索引擎限制索引字符的数目，所以最好将说明限制在几个字（例如 Pork barbecue catering in Albany, Georgia，或者 web design at reasonable rates for clients worldwide）。在“说明”文本框中输入描述性文本，如图 2-25 所示。. 图 2-25. “说明”对话框. 4．设置网页的刷新使用刷新元素可以指定浏览器在一定的时间后应该自动刷新页面，方法是重新载入当前页面或转到不同的页面。该元素通常用于在显示了说明 URL 已改变的文本消息后，将用户从一个 URL 重定向到另一个 URL。“刷新”对话框如图 2-26 所示。. 图 2-26. “刷新”对话框. 延迟：是在浏览器刷新页面之前需要等待的时间（以秒为单位）。若要使浏览器在完成载入后立即刷新页面，请在该文本框中输入 0。操作：在指定的延迟后，浏览器是转到另一个 URL 还是刷新当前页面。若要打开另一个 URL 而不是刷新当前页面，请单击“浏览”按钮，然后浏览到并选择要载入的页面。.

(15) 34. 网页制作技术教程. 5．设置基础属性使用 Base 元素可以设置页面中所有文档相对路径相对的基础 URL，如图 2-27 所示。. 图 2-27. “基础”对话框. Href：是基础 URL。单击“浏览”按钮浏览并选择一个文件，或者在文本框中输入路径。目标：指定所有链接的文档都应该在其中打开的框架或窗口。在当前的框架页中选择一个框架或选择下列保留名称之一：  _blank：将链接的文档载入一个新的、未命名的浏览器窗口。  _parent：将链接的文档载入包含该链接的框架的父框架集或窗口。如果包含链接的框架没有嵌套，则相当于_top（链接的文档载入整个浏览器窗口）。  _self：将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。  _top：将链接的文档载入整个浏览器窗口，从而删除所有框架。 6．设置链接标签的属性使用“链接”标签可以定义当前文档与其他文件之间的关系。温馨提示：head 部分中的 link 标签与 body 部分中的文档之间 HTML 链接是不一样的。 “链接”对话框如图 2-28 所示。. 图 2-28. “链接”对话框. Href：是您正在为其定义关系的文件的 URL。单击“浏览”按钮浏览并选择一个文件，或者在文本框中输入路径。注意，该属性并不表示通常的 HTML 意义上的链接文件；链接元素中指定的关系更复杂。 ID：为链接指定一个唯一标识符。标题：描述关系。该属性与链接的样式表有特别的关系。 Rel：指定当前文档与 Href 文本框中的文档之间的关系，若要指定多个关系，请用空格将各个值隔开。.

(16) 第 2 章网页制作. 35. Rev：指定当前文档与 Href 文本框中的文档之间的相反关系（与 Rel 相对）。可能的值与 Rel 的可能值相同。 2.2.7 插入水平线和时间 1．插入水平线水平线对于信息的组织很有用。在页面上，可以使用一条或多条水平线以可视方式分隔文本和对象。（1）创建水平线。在“文档”窗口中，将插入点放在要插入水平线的位置，执行以下操作之一：  选择“插入”→HTML→“水平线”命令。  在“插入”面板中选择 HTML 子面板，单击按钮。（2）修改水平线。在“文档”窗口中，选择要修改的水平线，选择“窗口”→“属性”命令，打开如图 2-29 所示的属性面板，然后根据需要对属性进行设置。. 图 2-29. 水平线的“属性”面板. 修改水平线的颜色要在代码中去设置，红色的水平线的代码为<hr color=red>。也可以在图形软件中制作一些矩形条后用插入图形的方法插入到 Web 页面中，用这种方法做成的水平线更加丰富多彩。 2．插入时间 Dreamweaver 提供了一个方便的日期对象，该对象使可以以任何喜欢的格式插入当前日期（包含或不包含时间都可以），并在每次保存文件时都自动更新该日期。下面通过任务讲解如何插入日期。【任务 2-2】文本操作【任务 2-2-1】插入日期【操作要求】将当前日期插入到文档中【操作步骤】（1）在“文档”窗口中将插入点放在要插入日期的位置。（2）执行下列操作之一：  选择“插入”→“日期”命令，打开如图 2-30 所示的“插入日期”对话框。  在“插入”面板中选择“常用”子面板，单击按钮，也会打开“插入日期” 对话框。（3）在该对话框中选择星期格式、日期格式和时间格式。（4）单击“确定”按钮即可插入日期。如果选中了“储存时自动更新”复选项，则在日期格式插入到文档中后可以对其进行编辑，方法是单击已设置格式的日期文本，然后在“属性”面板中单击“编辑日期格式”按钮，接着在打开的“插入日期”对话框中重新进行设定。.

(17) 网页制作技术教程. 36. 图 2-30. 2.3. “插入日期”对话框. 图像操作. 由于受网络速度等方面的影响，因此在网页制作中图像的格式有一定的要求，一般用于网页的图像要求是 GIF、JPEG 或 PNG 三种格式中的一种。目前大部分的浏览器都支持 GIF 和 JPEG 文件格式，只有 Microsoft Internet Explorer（4.0 及更高版本）和 NetScape Navigator （4.0 及更高版本）部分支持 PNG 格式。 GIF（Graphics Interchange Format）意为图像交换格式。GIF 是第一个支持网页的图像文件，它最多支持 256 种颜色，可以使图像变得相当小。GIF 图像可以在网页中以透明方式显示，还包含动态信息，也就是网页上大量使用的 GIF 动画。 GIF 在网页中大量用于站点图标 LOGO、广告条 BANNER 及网页背景图像，但由于 GIF 受颜色数目的限制，GIF 不适合用作照片级的网页图像。 JPEG（Join Photograph Graphics）意为联合照片专家组，通常称为 JPG。JPEG 图像格式可以高效地压缩，丢失人眼不易察觉的部分图像，使得图像文件在变小的同时基本不丢失颜色，通常用来显示照片等颜色丰富的图像。 PNG（Portable Network Graphics）意为便携网络图像，是逐渐流行的网络图像格式。PNG 格式可以说是 GIF 格式和 JPEG 格式的综合应用，既融合了 GIF 格式透明显示的特点，又具有 JPEG 处理精美图像的优势，因此 PNG 图像很可能取代 GIF 图像和 JPE 图像格式。图像的来源有多种方式，可以自己利用图像处理软件（如 Photoshop、CorelDRAW、 Fireworks 等软件）制作，也可以到网上下载或购买一些网页素材光盘，进行加工后用到自己的网页中，下面给出提供网页素材的一些网站。（1）网页制作大宝库：一个专业的网页制作网站，提供各种网页制作技术、素材等，网址为 http://www.dabaoku.com。（2）素材：网页素材提供网站，提供背景图片、按钮、文本框、水平线、人物头像等，网址为 http://www.sucai.com。 2.3.1 插入图像图像既可插入到网页内容中也可作为网页背景，这里介绍将图像插入到网页中作为网页内容的方法。网页中一般是图文混排结构，除了添加文本内容、设置文本格式外，还需要插入有说服.

(18) 第 2 章网页制作. 37. 力的资料图片。下面介绍图片的插入与属性设置的方法。插入图像的具体操作如下：（1）将光标定位到要插入图像的位置（文本、层或表格中）。（2）执行如下方法之一：  选择“插入”→“图像”命令，打开“选择图像源文件”对话框，如图 2-31 所示。. 图 2-31. “选择图像源”文件对话框. 单击“插入”面板“常用”子面板中的按钮，打开“选择图像源文件”对话框。  按 Ctrl+Alt+I 键打开“选择图像源文件”对话框。（3）在“选取文件名自”栏中选择“文件系统”单选项，在“查找范围”下拉列表框中指定要插入图像的路径并在文件列表中选择需要的文件名称。（4）在“相对于”下拉列表框中选择“站点根目录”选项。（5）单击“确定”按钮，若所选择的图像文件不在定义的本地站点中，系统会弹出如图 2-32 所示的询问对话框，询问是否保存到本地站点目录下。 . 图 2-32. 选择的图像文件不在本地站点. （6）在提示对话框中单击“是”按钮，弹出“复制文件为”对话框，在该对话框中选择保存路径，并在“文件名”文本框中更改图像的名称，如图 2-33 所示。（7）单击“是”按钮即可将所选的图像插入到网页中指定的位置。.

(19) 网页制作技术教程. 38. 图 2-33. 选择的图像文件拷贝到本地站点. 2.3.2 设置图像的一般属性插入图像后可根据网页页面的需要在“属性”面板中编辑图像的属性，具体操作如下：（1）选取要编辑的图像，展开图像的“属性”面板，如图 2-34 所示。其左上角显示了选取图像的缩略图，“源文件”文本框中显示了插入图像的源位置。. 图 2-34. 图像的“属性”面板. （2）在“图像”文本框中可设置图像的标签名称，以便在使用 Dreamweaver 行为（例如 “交换图像” ）或脚本撰写语言（例如 JavaScript 或 VBScript）时可以引用该图像，如图 2-35 所示。. 图 2-35. 设置图像的标签名称. （3）在“宽”和“高”数值框中输入数值可以修改图像的大小。（4）在“源文件”文本框中可以修改图像的路径，也可单击其右侧的“浏览文件”按钮，在打开的“选择图像源文件”对话框中选择新的图像文件。（5）在“垂直边距”数值框中设置图像距顶部和底部的边距；在“水平边距”数值框中设置图像距左侧和右侧的边距。（6）单击“编辑”栏中的“裁剪”按钮可以修剪图像的大小，从所选图像中删除不需要的区域。单击按钮后，打开一个警告窗口，提示该操作不能撤消，单击“确定”按钮后图片上出现裁剪选取框，其中中间亮的部分为需要的图片内容，四周较暗的为要裁剪的部分。.

(20) 第 2 章网页制作. 39. （7）用鼠标指针拖动裁剪选取框四周的控制点调整裁剪范围。（8）调整好裁剪范围后，在图片上双击即可完成裁剪。（9）单击“编辑”栏中的按钮可以调整图片的明暗度。（10）单击“编辑”栏中的“锐化”按钮可以对图片进行锐化处理。（11）在图像的“属性”面板的“边框”文本框中设置图像的边框粗细，值越大边框越粗。（12）在图像的“属性”面板的“对齐”下拉列表框中设置图像与周围文字的对齐方式。（13）在“低解析度源”文本框中指定在载入主图像之前应该载入的图像。低解析度源中使用的是主图像的 2 位（黑和白）图，这样可以迅速载入并使访问者对其等待看到的内容有所了解。 2.3.3 插入占位符如果目前还不确定该插入哪幅图像，但可以确定图像的大小，则可以使用占位符的方式插入图像，当确定好要插入的图像时再进行插入即可。（1）将光标定位到要插入图像的位置（文本、层或表格中）。（2）执行以下方法之一：  选择“插入”→“图像对象”→“图像占位符”命令，打开“图像占位符”对话框，如图 2-36 所示。. 图 2-36. “图像占位符”对话框. 单击“插入”面板的“常用”子面板中按钮后的下拉按钮，在打开的列表中选择“图像占位符”选项，弹出“图像占位符”对话框。（3）在“图像占位符”对话框中进行具体设置。 1）在“名称”文本框中输入要作为图像占位符标签显示的文本。这是可选步骤，如果不想显示标签文字，可将此文本框留空。输入的名称必须以字母开头，并且只能包含字母和数字，不允许使用空格和高位 ASCII 字符。 2）在“宽度”和“高度”数值框中，以像素为单位输入数值设置图像大小。这是必需的。 3）对于“颜色”（可选），可以在颜色选择器中选择一种颜色，也可以在“颜色”文本框中输入颜色的十六进制值（如#FF0000）或输入网页安全色名称（如 Red）。 4）在“替换文本”（可选）文本框中输入描述该图像的文本。在浏览器中预览图片效果时，当鼠标移到用占位符添加的图像上时替代文本就会出现。（4）参数设置完成后，单击“确定”按钮，文档中即会出现图像占位符。 .

(21) 网页制作技术教程. 40. （5）双击占位符打开“图像占位符”对话框，再按照图片的插入方法插入创建好的图像即可。插好图像后用“属性”面板重新对该图像进行设置。 2.3.4 鼠标经过图像设置鼠标经过图像是一种在浏览器中查看并使用鼠标指针移过它时发生变化的图像。鼠标经过图像由两个图像组成：主图像（首次载入页时显示的图像）和次图像（当鼠标指针移过主图像时显示的图像）。鼠标经过图像中的两个图像其大小应相等，如果两个图像大小不同， Dreamweaver 将自动调整第二个图像的大小以匹配第一个图像的大小。鼠标经过图像自动设置为响应 onMouseOver 事件。插入鼠标经过图像的具体操作如下：（1）在“文档”窗口中，将插入点放置在要显示鼠标经过图像的位置。（2）使用以下方法之一插入鼠标经过图像：  单击“插入”面板“常用”子面板中按钮后的下拉按钮，单击“鼠标经过图像” 按钮；  选择“插入”→“图像对象”→“鼠标经过图像”命令。弹出的“插入鼠标经过图像”对话框如图 2-37 所示。. 图 2-37. “插入鼠标经过图像”对话框. （3）在“插入鼠标经过图像”对话框中完成各项参数的设置操作。 1）在“图像名称”文本框中输入图像的名称。 2）单击“原始图像”文本框后的“浏览”按钮并选择载入页面时显示的图像，或直接在文本框中输入图像文件的路径。 3）单击“鼠标经过图像”文本框后的“浏览”按钮并选择鼠标指针移过原始图像时显示的图像，或在文本框中输入图像文件的路径。 4）如果希望图像预先载入浏览器的缓存中，以便鼠标指针移过图像时不发生延迟，可以选中“预载鼠标经过图像”复选项。 5）在“替换文本”（可选）文本框中输入描述该图像的文本。 6）单击“按下时，前往的 URL”文本框后的“浏览”按钮并选择要链接的文件，或者直接在文本框中输入文件的路径。.

(22) 第 2 章网页制作. 41. （4）设置完成后，单击“确定”按钮关闭“插入鼠标经过图像”对话框。（5）按 F12 键在 IE 浏览器中预览。当鼠标指针移过原始图像时将显示鼠标经过图像。 2.3.5 导航条的创建导航条由图像或图像组组成，这些图像的显示内容随操作不同而不同。导航条通常为在站点上的页面和文件之间移动提供一条简捷的途径。导航条可以进行复制，可以对导航条附加行为以应用于不同的网页。一个网页中只允许有一个导航条。导航条项目有如下 4 种状态：  一般：尚未单击或尚未与此项目交互时所显示的图像。  滑过：指鼠标指针滑过“一般”图像时所显示的图像。项目的外观发生变化（例如变得更亮），以便让用户知道可与这个项目进行交互。  按下：指项目被单击后所显示的图像。  按下时鼠标经过：指在项目被单击后，鼠标指针滑过“按下”图像时所显示的图像。插入导航条的具体操作如下：（1）将光标定位到要插入导航条的位置。（2）执行下列操作之一打开“插入导航条”对话框，如图 2-38 所示。. 图 2-38. “插入导航条”对话框. 选择“插入”面板“常用”子面板中按钮后的下拉按钮，并单击“插入导航条” 按钮。  选择“插入”→“图像对象”→“导航条”命令。（3）在“插入导航条”对话框中进行具体的设置，方法如下： 1）在“项目名称”文本框中，输入导航条项目的名称（如 index）。该名称只能包含字母和数字，且不能以数字开头。 .

(23) 42. 网页制作技术教程. 2）单击“状态图像” （必需）文本框后的“浏览”按钮选择最初将显示的图像。 3）单击“鼠标经过图像”文本框后的“浏览”按钮选择当一般图像显示时如果鼠标指针滑过项目所显示的图像。 4）单击“按下图像”文本框后的“浏览”按钮选择单击项目后显示的图像。 5）单击“按下时鼠标经过图像”文本框后的“浏览”按钮选择当鼠标指针滑过按下图像时所显示的图像。 6）在“替换文本”文本框中，输入项目的描述性名称。 7）单击“按下时，前往的 URL”文本框后的“浏览”按钮选择要打开的链接文件，然后从右侧的下拉列表框中选择打开文件的位置。 8）选中“预先载入图像”复选项，可在载入页面时下载图像。如果未选择此选项，在鼠标指针滑过鼠标经过图像时可能会出现延迟。 9）选中“页面载入时就显示‘鼠标按下图像’”复选项，可在显示页面时以“按下”状态显示所选项目，而不是以默认的“一般”状态显示。选择此选项时，在“导航条项目”列表中该项目后面出现一个星号。 10）单击按钮可向导航条添加另一个项目，然后重复上述步骤定义该新项目。若要减少导航元件，可先在“导航元件”列表框中选择要删除的项，再单击按钮删除。单击按钮或按钮，可以改变导航条元件的出现顺序。（4）完成导航条项目的添加及定义后，单击“确定”按钮。下面通过任务讲解如何创建网站相册。【任务 2-3】建立网站相册。【操作要求】在 Dreamweaver 中内置了创建网站相册的命令，但此命令实际是调用了 Fireworks 的图片处理功能，因此，如果要创建网站相册，必须先安装 Fireworks 软件。另外，为了创建网站相册，还需要收集建立相册的图片。在开始创建相册之前，将相册的所有图像放置在一个文件夹中。另外，制作相册的原始图像文件类型是以 gif、jpg、jpeg、png、psd、tif 或 tiff 为扩展名。【操作步骤】首先创建一个名为“电子相册”的站点，设置本地文件夹为 F:\photo，并在该文件夹下新建两个文件夹，分别取名为 Source 和 Object，然后在 Source 文件夹中放入收藏的图片。做好上述的准备工作之后，接下来开始创建网站相册，具体操作如下：（1）选择“命令”→“创建网站相册”命令，弹出“创建网站相册”对话框，如图 2-39 所示。（2）在“创建网站相册”对话框中对各种参数进行设置。（3）单击“确定”按钮，Fireworks 自动启动并创建缩略图和大尺寸图像。当处理完成后， Dreamweaver 将再次处于活动状态并创建包含缩略图的 Web 页。（4）当出现提示“相册已经建立”的对话框时，单击“确定”按钮。（5）等待几秒钟，相册页即可出现，各缩略图根据文件名按字母顺序显示。（6）按 F12 键在浏览器中预览效果。.

(24) 第 2 章网页制作. 图 2-39. 43. “创建网站相册”对话框. 2.4. 超级链接. 链接是一个网站的灵魂，一个网站是由多个页面组成的，而这些页面之间依据链接确定相互之间的导航关系。超级链接是指站点内不同网页之间、站点与 Web 之间的链接关系，它可以使站点内的网页成为有机的整体，还能使不同站点之间建立联系。超级链接由两部分组成：链接点和链接目标。许多页面元素可以作为链接点，如文本、图像、图像热区、动画等。而链接目标可以是任意网络资源，如页面、图像、声音、程序、其他网站、E-mail，甚至是页面中的某个位置 —锚点。如果按链接目标分类，可以将超级链接分为以下几种类型：（1）内部链接：同一网站文档之间的链接。（2）外部链接：不同网站文档之间的链接。（3）锚点链接：同一网页或不同网页中指定位置的链接。（4）E-mail 链接：发送电子邮件的链接。（5）脚本链接：JavaScript 代码的链接。（6）空链接：未设计的链接。 2.4.1 关于链接路径（1）绝对路径：为文件提供完全的路径，包括适用的协议（如 http、ftp、rtsp 等），例如： http://www.163.com ftp://202.136.254.1/ （2）相对路径：相对路径最适合网站的内部链接。如果链接到同一目录下，则只需输入要链接文件的名称。要链接到下一级目录中的文件，只需要输入目录名，然后输入“/” ，再输入文件名；如果链接到上一级目录中的文件，则先输入“../”再输入目录名、文件名。（3）根路径：是指从站点根文件夹到被链接文档经由的路径，以前斜杠开头，例如.

(25) 网页制作技术教程. 44. /fy/maodian.html 就是站点根文件夹下 fy 子文件夹中的一个文件（maodian.html）的根路径。 2.4.2 创建外部链接不论是文字还是图像，都可以创建链接到绝对地址的外部链接。创建链接的方法有两个：一个是直接输入地址，另一个是使用“超级链接”对话框。下面通过任务讲解如何创建外部链接。【任务 2-4】超级链接【任务 2-4-1】外部链接【操作要求】在 Root 网站的主页（index.html）中创建链接到“怀化职业技术学院”网站，且在原浏览器窗口中打开的链接。【操作步骤】方法 1：直接输入地址（1）打开主页 index.html，在文本窗口中输入并选中文字“怀化职业技术学院”。在“属性”面板中，“链接”组合框用来设置图像或文字的超链接，“目标”下拉列表框用来设置打开方式。（2）在“链接”组合框中直接输入外部绝对地址 http://www.hhptc.com.cn，在“目标”下拉列表框中选择_self，如图 2-40 所示。. 图 2-40. 在“属性”面板中设置链接. 方法 2：使用“超级链接”对话框（1）在主页 index.html 的文档窗口中，单击“常用”子面板中的“超级链接”按钮，如图 2-41 所示。. 图 2-41. “常用”子面板. 弹出“超级链接”对话框，如图 2-42 所示。. 图 2-42. “超级链接”对话框.

(26) 第 2 章网页制作. 45. （2）进行以下各项设置：“文本”文本框用来设置超级链接显示的文本“怀化职业技术学院”；“链接”组合框用来输入超链接连接到的路径 http://www.hhptc.com.cn； “目标”下拉列表框用来设置超链接的打开方式，有 4 个选项，选择_self；“标题”文本框用来设置超链接的标题。（3）设置好后，单击“确定”按钮，即向网页中插入了“怀化职业技术学院”超链接。 2.4.3 创建内部链接在文档窗口中选中文字或图像，单击“属性”面板“链接”组合框后的按钮，弹出“选择文件”对话框（如图 2-43 所示），选择要链接到的网页文件，即可链接到这个网页。. 图 2-43. 选择链接文件. 也可以拖动“链接”组合框后的按钮到站点面板上的相应网页文件，则链接将指向这个网页文件。此外，还可以直接将相对地址输入到“链接”组合框中来链接一个页面，如图 2-44 所示。. 图 2-44. 直接输入链接地址. 2.4.4 创建 E-mail 链接创建邮件链接后，当浏览者单击邮件链接时，系统会自动启动浏览器默认的邮件处理程序，且其中程序的收件人地址会自动更新为链接邮件的地址。下面通过任务讲解如何创建 E-mail 链接。【任务 2-4-2】E-mail 链接【操作要求】在 Root 网站的主页（index.html）中创建以文本“与我联系”为链接点的邮件链接（邮箱地址为 tmbbje@163.com），且在新窗口中打开链接。.

(27) 网页制作技术教程. 46. 【操作步骤】方法 1：（1）打开主页 index.html，单击“常用”子面板（如图 2-45 所示）中的“电子邮件链接” 按钮，弹出“电子邮件链接”对话框，如图 2-46 所示。. 图 2-45. 图 2-46. “常用”子面板. “电子邮件链接”对话框. （2）在“文本”文本框中输入要链接的文本“与我联系”，然后在 E-Mail 文本框中输入邮箱地址 tmbbje@163.com，单击“确定”按钮，然后在“属性”面板的“目标”下拉列表框中选择_Blank 选项。方法 2：（1）选择“插入”→“电子邮件链接”命令，弹出“电子邮件链接”对话框。（2）在“文本”文本框中输入“与我联系”，在 E-Mail 文本框中输入 tmbbje@163.com，单击“确定”按钮，然后在“属性”面板的“目标”下拉列表框中选择_Blank 选项。方法 3：（ 1 ）选择要创建邮件链接的文本，在 “属性 ”面板中的 “ 链接 ” 组合框中输入 mailto:tmbbje@163.com，如图 2-47 所示。. 图 2-47. 直接输入 E-mail 地址. （2）在“目标”下拉列表框中选择_Blank 选项。 2.4.5 创建锚点链接所谓锚点链接，是指在同一个页面中的不同位置的链接或链接到另一页面的某一具体位置。常用的建立方法有两种：（1）打开一个页面较长的网页，将光标放置于要插入锚点的地方，单击“常用”子面板中的“命名锚记”按钮，弹出“命名锚记”对话框，在对话框中命名锚点（锚点名称可用字母或数字表示）。再选中需要链接锚点的文字或图像，在“属性”面板的“链接”组合框中输入“#”加锚点名。如果是不同文件的链接，则在“属性”面板的“链接”组合框中输入要链接的文件名加“#”再加锚点名。分别如图 2-48 至图 2-50 所示。.

(28) 第 2 章网页制作. 图 2-48. 图 2-49. 47. 命名锚点. 同一文件中的锚点链接. 图 2-50. 不同文件中的锚点链接. （2）打开一个页面较长的网页，将光标放置于要插入锚点的地方，选择“插入”→“命名锚记”命令，弹出“命名锚记”对话框，在对话框中命名锚点（锚点名称可用字母或数字表示）。再选中需要链接锚点的文字或图像，在“属性”面板的“链接”组合框中输入“#”加锚点名。如果是不同文件的链接，则在“属性”面板的“链接”组合框中输入要链接的文件名加 “#”再加锚点名。 2.4.6 创建脚本链接所谓脚本链接是指选择 JavaScript 代码或调用 JavaScript 函数，能够在不离开当前网页的情况下，了解关于某个项目的一些附加信息，此外该方式用于计算、表单验证或其他任务。下面利用脚本链接创建关闭网页效果，操作步骤如下：（1）在文档编辑窗口中输入文字“关闭窗口”。（2）选中文本“关闭窗口”，在“属性”面板的“链接”组合框中输入 javascript: window.close()，如图 2-51 所示，该脚本链接可以关闭窗口。. 图 2-51. 脚本链接. 2.4.7 创建空链接所谓空链接实际上是一个未设计的链接，利用该链接可激活页面上的文本和对象。例如有些 JavaScript 事件需要链接，但并不是链接到文本、图像或其他对象，这时就需要用无地址来实现。创建空链接的方法是：在文档编辑窗口中，选中要创建空链接的文本，在“属性”面板的“链接”组合框中输入“#”，如图 2-52 所示。. 图 2-52. 空链接.

(29) 网页制作技术教程. 48. 2.4.8 图像热点链接一个对象只能创建一个链接，但在网页设计时有可能要在一个图像上添加多个链接，若使用前面所讲的链接方法则只能链接到一个目标。为了解决这一矛盾，在 Dreamweaver 中巧妙地使用了热点进行链接。利用热点工具可以将一个图像划分为多个热区作为链接点，再单独对每个热区添加相应的图像热点链接。（1）选取要添加热区的图片，此时“属性”面板中出现 4 个热点工具。 4 个热点工具的作用如下：：指针热点工具，用于移动、放大或缩小热区。：矩形热点工具，用于绘制矩形热区。：椭圆形热点工具，用于绘制圆形热区。：多边形热点工具，用于绘制多边形热区。（2）选择一个热点绘制工具，在图像上绘制热区后，自动打开“热区”属性面板。（3）在“属性”面板中进行具体的设置。 1）在“链接”组合框中输入要链接的文件名称或相应的锚点名称。 2）在“目标”下拉列表框中选择打开链接页的方式。 3）在“替代”文本框中输入鼠标移动到链接热点上时显示的别名。（4）用同样的方法绘制其他热点，并设置相应的链接。（5）在图片中绘制完成所有的热点后在文档的空白区域单击，以便应用属性的设置。（6）热点链接完成后按 F12 键预览页面，当鼠标移至热区上时即可看到手形图标下面有一个提示文本，单击该链接就会打开对应的页面。. 2.5. 媒体. 一个优秀的网站应该不仅仅是由文字和图片组成的，而应该在网页中加入声音、动画、影片等内容。为了增强网页的表现力，丰富文档的显示效果，我们可以向其插入 Flash 动画、 Java 小程序、音频播放插件等多媒体内容。 2.5.1 在网页中插入 Flash 对象目前，Flash 动画是网页上最流行的动画格式，被大量用于网页中。Flash 动画是一种高品质的矢量动画，它由 Macromedia 公司的 Flash 动画制作软件创建，目前已经成为 Internet 上矢量动画的标准，是制作网上矢量图形和动画的首选软件。两款主流浏览器 Internet Explorer 和 Netscape Navigator 对 Flash 动画都提供了较好的支持。 1．插入 Flash 影片（1）在文档窗口中将光标移动到要插入 Flash 文件的位置。（2）选择“插入”→“媒体”→Flash 命令，打开插入 Flash 文件的对话框，如图 2-53 所示。.

(30) 第 2 章网页制作. 图 2-53. 49. 插入 Flash 文件的对话框. （3）在“选择文件”对话框中，选择扩展名为 swf 的 Flash 文件。单击“确定”按钮后，插入的 Flash 动画并不会在文档窗口中显示内容，而是以一个带有字母 F 的灰色框来表示，如图 2-54 所示。只有在保存文档之后，在浏览器中才能正常显示 Flash。. 图 2-54. Flash 动画在文档窗口中的显示. 2．插入 Flash 按钮插入 Flash 按钮是指 Dreamweaver 集成的动态按钮。除此之外，在 Dreamweaver 中也可以插入自己制作的 Flash 按钮（Flash 文件），方法与插入 Flash 影片类似。插入 Flash 按钮的具体操作如下：（1）将光标定位到页面中要插入 Flash 按钮的位置上。（2）选择“插入”→“媒体”→“Flash 按钮”命令，打开“插入 Flash 按钮”对话框，如图 2-55 所示。（3）在“样式”列表框中选择需要的按钮样式，在“范例”栏中将显示出所选样式的效果。（4）在“按钮文本”文本框中输入要在按钮上显示的文本。（5）在“字体”下拉列表框中选择按钮文本的字体，在“大小”数值框中输入字号。（6）在“链接”文本框中指定按钮所要链接文档的 URL 地址。（7）在“目标”下拉列表框中选择所链接文件的打开方式。（8）在“背景色”文本框中设置 Flash 按钮的背景色。.

(31) 网页制作技术教程. 50. 图 2-55. “插入 Flash 按钮”对话框. （9）在“另存为”文本框中输入保存的路径，最好保存到当前页面站点的图像文件夹中。至此设置就完成了。（10）单击“确定”按钮将设置的 Flash 按钮插入到当前位置。（11）单击插入的 Flash 按钮，在其属性面板中编辑相关的属性，如图 2-56 所示。如果要修改 Flash 按钮的名称、外观等参数时，可双击插入的 Flash 按钮或单击其属性面板中的“编辑”按钮打开“插入 Flash 按钮”对话框，更改其设置即可。. 图 2-56 Flash 按钮的属性面板. （12）如果在页面中调整了 Flash 按钮的大小，又想恢复原大小时，可单击属性面板中的 “重设大小”按钮。（13）单击“播放”按钮播放，当鼠标移到按钮上时就会看到按钮的动态效果。 3．插入 Flash 文本插入 Flash 文本与插入 Flash 按钮一样，是指 Dreamweaver 中集成的文本动画。插入 Flash 文本的具体操作如下：（1）将光标定位到页面中要插入 Flash 文本的位置上。.

(32) 第 2 章网页制作. 51. （2）选择“插入”→“媒体”→“Flash 文本”命令，打开如图 2-57 所示的“插入 Flash 文本”对话框。. 图 2-57. “插入 Flash 文本”对话框. （3）在“文本”文本框中输入要显示的文本。（4）选中“显示字体”复选项，在文本框中将显示所设置文本字体的效果。（5）在“字体”下拉列表框中选择文本的字体，在“大小”文本框中输入文本的大小。例如设置字体为“隶书”，字号为 30。（6）单击、按钮设置字体为粗体或斜体样式。（7）单击按钮设置文本段落的对齐方式。（8）在“颜色”文本框中选择文本的正常显示颜色，如设置颜色代码为#330099。在“转滚颜色”文本框中设置文本的效果颜色，如设置颜色代码为#990000。（9）在“链接”文本框中设置与 Flash 文本相链接的文件，也可以不设置。（10）在“目标”下拉列表框中指定所链接文件的打开方式。（11）在“背景色”中设置 Flash 文本的背景颜色。（12）在“另存为”文本框中指定 Flash 文本的保存路径，如输入 text1.swf。（13）单击“确定”按钮将设置的 Flash 文本插入到页面中。（14）在页面中单击插入的 Flash 文本，在其属性面板中可进行相应的设置，如图 2-58 所示。. 图 2-58 Flash 文本的属性面板.

(33) 网页制作技术教程. 52. （15）单击“播放”按钮播放，当鼠标移到文本上时就会看到文本的动画效果。 2.5.2 插入其他动态元素 Dreamweaver 不仅支持 Flash 动画，还支持如 Shockwave 影片、Applet 等媒体。 1．插入 Shockwave 影片 Shockwave 是 Macromedia 公司制定的一种网上媒体交互压缩格式的标准，其生成的压缩格式可以被快速下载，并且被目前的主流浏览器所支持。在 Dreamweaver 中插入 Shockwave 影片的具体操作如下：（1）将光标置于页面中要插入 Shockwave 影片的位置上。（2）选择“插入”→“媒体”→Shockwave 命令，也可以在“插入”面板的“常用”子面板中单击“媒体”右侧的按钮，在弹出的列表框中选择 Shockwave 选项，打开“选择文件”对话框，如图 2-59 所示。. 图 2-59. 选择 Shockwave 影片文件对话框. （3）选择要插入的 Shockwave 影片文件，同时在对话框中可以设置 URL 的类型。（4）单击“确定”按钮，即可将影片插入到页面中，Shockwave 影片插入到页面中将以一个图标（如图 2-60 所示）的形式显示。. 图 2-60 Shockwave 影片在文档窗口中的显示. （5）单击 Shockwave 影片的图标，在属性面板中设置其属性。其属性参数与 Flash 的属性参数基本相同，只是少了源文件、品质、比例和自动播放等内容，也无法启动编辑器对其进行编辑。.

(34) 第 2 章网页制作. 53. 2．插入 Applet 为了使网页更加引入注目，经常需要制作一些特殊效果，用 Java 语言可以实现这些特殊效果。Applet 是 Java 的小应用程序，它是动态、安全、跨平台的网络应用程序。Java Applet 被嵌入到 HTML 语言中，编写一些 Applet 放在网页中可以实现较为复杂的控制，也可以实现各种各样的效果。插入 Applet 的具体操作如下：（1）将光标定位到页面中要插入 Applet 的位置。（2）选择“插入”→“媒体”→Applet 命令，也可以在“插入”面板的“常用”子面板中单击“媒体”右侧的按钮，在弹出的列表框中选择 Applet 选项，打开“选择文件”对话框。（3）设置完毕后，单击“确定”按钮即可将 Applet 插入到页面中。插入页面中的 Applet 以一个图标的形式显示在页面中。（4）单击页面中的 Applet 图标，可以在如图 2-61 所示的属性面板中设置其相应的属性。. 图 2-61 Applet 属性. 其中代码、基址、替换等属性参数是 Applet 独有的，其具体含义如下：代码：在该文本框中可以指定 Applet 的文件名称，可以通过单击图标打开“选择文件” 对话框来选择想要的源文件。基址：该文本框被自动填充 Applet 文件所在的文件夹路径。此文本框的内容同代码文本框的内容一起构成 Applet 文件的 URL 地址。替换：在该文本框中可以指定 Applet 的替换内容。当浏览器不能运行 Applet 时，则会显示这里设置的内容。可以是一段普通的文本，也可以是一幅图像，文本可直接在文本框中输入，若是图像则需要指定其路径。 3．插入 ActiveX 控件 ActiveX 控件是 Microsoft 公司对浏览器的能力扩展，ActiveX 控件的作用和插件是相同的，但两者也存在着差异，载入网页时，如果浏览器不支持 ActiveX 控件，浏览器会自动安装所需软件，如果是插件，则需要用户找到相关的软件进行安装。插入 ActiveX 控件的具体操作如下：（1）将光标定位到页面中要插入 ActiveX 的位置。（2）选择“插入”→“媒体”→ActiveX 命令，也可以在“插入”面板的“常用”子面板中单击“媒体”右侧的按钮，在弹出的列表框中选择 ActiveX 选项，即可将 ActiveX 插入到页面中。插入页面中的 ActiveX 以一个图标的形式显示在页面中。（3）单击页面中的 ActiveX 图标，可以在属性面板中设置其相应的属性。其中 Class ID、嵌入、替换图像等属性参数是独有的，其具体含义如下：.

(35) 网页制作技术教程. 54. Class ID：用于设置 ActiveX 控件在浏览器中的标识。嵌入：选中“嵌入”复选项，则使 Dreamweaver 会在 ActiveX 控件的<object>标记中添加 <embed>标记。源文件：单击按钮，可选择文件。基址：用于设置包含 ActiveX 控件的 URL 地址。 ID：用于设置可选的 ActiveX 的 ID 参数，主要用于在 ActiveX 控件之间传递信息。数据：该域用于设置 ActiveX 控件所载入的数据文件。替换图像：该域用于设置 ActiveX 控件对象替换图像的 URL 地址，用于当浏览器不能运行该对象时显示这里的替换图像。 4．插入插件如果想在浏览器中访问更多类型的媒体对象，就必须借助于插件，前面所介绍的 Shockwave 就是插件中的一员。插件的类型主要有对象类、命令类、行为类、组件类 4 种，这里讲解的是对象类插件。为了叙述方便，在此简称为插件。插入插件的具体操作如下：（1）将光标定位到页面中要插入插件的位置。（2）选择“插入”→“媒体”→“插件”命令，也可以在“插入”面板的“常用”子面板中单击“媒体”右侧的按钮，在弹出的列表框中选择“插件”选项，则打开“选择文件” 对话框。（3）设置完毕后，单击“确定”按钮即可将插件插入到页面中，插件以一个图标的形式显示在页面中。（4）单击页面中的插件图标，可以在属性面板中设置其相应的属性。其中插件 URL、边框、参数 3 项的含义如下：插件 URL：在该文本框中可以输入下载该插件的完整 URL。如果用户在浏览页面时没有该插件，则 Internet Explorer 将从这里提供的 URL 上下载。边框：用于设置围绕插件的边框的宽度。参数：用于设置其他参数以传递给 Netscape 插件。 2.5.3 为网页加入背景音乐打开一些网站时，优雅的背景音乐伴随着我们的浏览一直萦绕在耳边。但 Dreamweaver 中并没有背景音乐的具体设置，要想达到这种效果，可以通过在源代码中手动添加代码或插入插件的方法来实现。 1．添加背景音乐代码具体操作如下：（1）将要插入背景音乐的网页从设计视图切换至代码视图或拆分视图。（2）在<body>和</body>之间的任何地方加入： <embed src="URL" hidden=true loop=true> 其中 src 指定音乐文件的位置及文件名，hidden=true 表示不显示播放器，loop=true 表示循环播放。.

(36) 第 2 章网页制作. 55. 2．通过插入插件来添加背景音乐具体操作如下：（1）将光标定位到要插入背景音乐的网页的空白处。（2）同插入其他插件的方法一样，打开“选择文件”对话框。（3）在打开的对话框中选择音乐文件。（4）设置完毕后，单击“确定”按钮即可将音乐文件插入到页面中，音乐文件同样以一般插件的图标形式显示在页面中。（5）单击音乐文件图标，在属性面板中将高度和宽度都设置为 0，这样就不会显示播放器。（6）在插件 URL 的文本框中可以输入下载插件的完整 URL。如果在浏览页面时没有该插件，则 Internet Explorer 将从这里提供的 URL 上下载。下面通过任务讲解如何插入 Java 小应用程序。【任务 2-5】制作水中倒影效果【操作要求】在 root\unit2\image 文件夹中有两个文件：一个是 Java Applet 小程序文件 Lake.class（该文件的作用是产生倒影效果），一个是图像文件 Ap49013.jpg。运用这两个文件制作如图 2-62 所示的效果。. 图 2-62. 水中倒影效果. 【操作步骤】（1）将光标定位到页面中要插入 Applet 的位置。（2）选择“插入”→“媒体”→Applet 命令，打开“选择文件”对话框，找到 Lake.class 文件，如图 2-63 所示。.

(37) 56. 网页制作技术教程. 图 2-63. 选择 Lake.class 文件. （3）设置完毕后，单击“确定”按钮即可将 Applet 插入到页面中。插入页面中的 Applet 以一个图标的形式显示在页面中。单击页面中的 Applet 图标，可以在如图 2-64 所示的属性面板中设置其相应的属性。将宽度和高度分别设置为 523 和 680，宽度与图像宽度一致，高度为图像高度的二倍小一点。. 图 2-64. 设置 Applet 属性参数. （4）单击属性面板中的“参数”按钮，打开设置参数对话框，设置相应的参数，如图 2-65 所示。. 图 2-65. 设置参数.

(38) 第 2 章网页制作. 57. （5）参数设置完成后，单击“确定”按钮，操作完成。按 F12 键预览网页效果，如图 2-62 所示。. 2.6. 表格. 表格是网页设计制作不可缺少的元素，它以简洁明了和高效快捷的方式将图片、文本、数据和表单等元素有序地显示在页面上，让我们可以设计出漂亮的页面。使用表格排版的页面在不同平台、不同分辨率的浏览器里都能保持其原有的布局，而在不同的浏览器平台有较好的兼容性，所以表格是网页中最常用的排版方式之一。 2.6.1 插入并编辑表格 1．插入表格在文档窗口中，将光标放在需要创建表格的位置，单击“常用”子面板（如图 2-66 所示）中的“表格”按钮弹出“表格”对话框（如图 2-67 所示），指定表格的属性后在文档窗口中插入设置的表格。. 图 2-66. 图 2-67. “常用”子面板. 设置表格参数. “行数”文本框用来设置表格的行数。 “列数”文本框用来设置表格的列数。 “表格宽度”文本框用来设置表格的宽度，可以填入数值；紧随其后的下拉列表框用来.

(39) 58. 网页制作技术教程. 设置宽度的单位，有两个选项：百分比和像素。当宽度的单位选择百分比时，表格的宽度会随浏览器窗口的大小而改变。 “单元格边距”文本框用来设置单元格内部空白的大小。 “单元格间距”文本框用来设置单元格与单元格之间的距离。 “边框粗细”用来设置表格的边框的宽度。 “页眉”定义页眉样式，可以在 4 种样式中选择一种。 “标题”文本框用来定义表格的标题。 “对齐标题”下拉列表框用于定义表格标题的对齐方式。 “摘要”文本框，可以在这里对表格进行注释。 2．选择各表格对象对于表格、行、列、单元格属性的设置是以选择这些对象为前提的。（1）选择整个表格的方法是把鼠标放在表格边框的任意处，当出现标志时单击即可选中整个表格；或在表格内的任意位置单击，然后在状态栏中选中<table>标签；或在单元格任意位置右击，在弹出的快捷菜单中选择“表格”→“选择表格”选项。（2）要选中某一单元格，按住 Ctrl 键的同时在需要选中的单元格单击；或者选中状态栏中的<td>标签。（3）要选中连续的单元格，按住鼠标左键从一个单元格的左上方开始向要连续选择的单元格方向拖动。要选中不连续的几个单元格，可以按住 Ctrl 键，再单击要选择的所有单元格。（4）要选择某一行或某一列，将光标移动到行左侧或列上方，鼠标指针变为向右或向下的箭头图标时单击。 3．设置表格属性选中一个表格后，可以通过属性面板（如图 2-68 所示）更改表格属性。. 图 2-68. 表格属性面板. “填充”文本框用来设置单元格边距。 “间距”文本框用来设置单元格间距。 “对齐”下拉列表框用来设置表格的对齐方式，默认的对齐方式一般为左对齐。 “边框”文本框用来设置表格边框的宽度。 “背景颜色”文本框用来设置表格的背景颜色。 “边框颜色”用来设置表格边框的颜色。在“背景图像”文本框中填入表格背景图像的路径，可以给表格添加背景图像。 4．单元格属性把光标移动到某个单元格内，可以利用单元格属性面板（如图 2-69 所示）对这个单元格的属性进行设置。 “水平”文本框用来设置单元格内元素的水平排版方式，是居左、居右还是居中。.

(40) 第 2 章网页制作. 图 2-69. 59. 单元格属性面板. “垂直”文本框用来设置单元格内的垂直排版方式，是顶端对齐、底端对齐还是居中对齐。 “高”、“宽”文本框用来设置单元格的宽度和高度。 “不换行”复选项可以防止单元格中较长的文本自动换行。 “标题”复选项使选择的单元格成为标题单元格，单元格内的文字自动以标题格式显示出来。 “背景”文本框用来设置表格的背景图像。 “背景颜色”文本框用来设置表格的背景颜色。 “边框”文本框用来设置表格边框的颜色。 5．表格的行和列操作（1）插入行或列。选中要插入行或列的单元格，右击，在弹出的快捷菜单中选择“插入行”、“插入列”或 “插入行或列”命令。如果选择了“插入行”命令，则在选择行的上方插入了一个空白行；如果选择了“插入列”命令，则在选择列的左侧插入了一个空白列；如果选择了“插入行或列” 命令，会弹出“插入行或列”对话框，在其中可以设置插入行还是列、插入的数量，以及是在当前选择的单元格的上方或下方、左侧还是右侧插入行或列。（2）删除行或列。选择要删除的行或列，右击，在弹出的快捷菜单中选择“删除行”或“删除列”命令。 6．拆分与合并单元格拆分单元格时，将光标放在待拆分的单元格内，单击属性面板中的“拆分”按钮，在弹出的对话框中按需要设置。合并单元格时，选中要合并的单元格，再单击属性面板中的“合并”按钮。 2.6.2 嵌套表格表格之中还有表格即嵌套表格。网页的排版有时会很复杂，在外部需要一个表格来控制总体布局，如果内部排版的细节也通过总表格来实现，容易引起行高列宽等的冲突，给表格的制作带来困难。其次，浏览器在解析网页的时候，是将整个网页的结构下载完毕之后才显示表格，如果不使用嵌套，表格非常复杂，浏览者要等待很长时间才能看到网页内容。引入嵌套表格，由总表格负责整体排版，由嵌套的表格负责各个子栏目的排版，并插入到总表格的相应位置中，各司其职，互不冲突。另外，通过嵌套表格，利用表格的背景图像、边框、单元格间距和单元格边距等属性可以得到漂亮的边框效果，制作出精美的音画贴图网页。创建嵌套表格的操作方法是，先插入总表格，然后将光标置于要插入嵌套表格的地方，.

(41) 网页制作技术教程. 60. 继续插入表格即可。下面通过任务讲解如何创建嵌套表格。【任务 2-6】表格操作【任务 2-6-1】嵌套表格【操作要求】在 Root 网站的主页（index.html）中，创建一个表中套表再套表的三层嵌套表格。【操作步骤】（1）打开主页（index.html）文档，将光标放置在文档窗口要插入表格的位置，单击“常用”子面板中的“表格”按钮，插入一个 1 行 1 列的表格 1，宽度为 500 像素，高度为 100％，边框为 0，单元格间距为 0，单元格边距为 12 像素，背景颜色为#333333。（2）将光标放置在表格 1 内，插入表格 2：1 行 1 列，宽度为 100％，高度为 100％，边框为 0，单元格间距为 0，单元格边距为 12 像素，背景颜色为#CCCCCC。（3）将光标放置在表格 2 内，插入表格 3：1 行 1 列，宽度为 100％，高度为 100％，单元格间距和单元格边距都为 8 像素，边框为 10，边框颜色为#FEE4ED，背景颜色为#9966FF。制成的嵌套表格如图 2-70 所示。. 图 2-70. 嵌套表格. 2.6.3 表格的格式化做好的表格可以使用 Dreamweaver 提供的预设外观样式，这样可以提高制作效率，保持表格外观的统一性，同时样式提供的色彩搭配也比较美观。下面通过任务讲解表格如何格式化。【任务 2-6-2】表格的格式化【操作要求】在 Root 网站的主页（index.html）中，插入一个 5 行 6 列的表格，表格的宽为 500 像素，高为 300 像素，边框、单元格间距和边距全为 0，表格样式为 AltRows Basic Gray。【操作步骤】（1）在主页的文档窗口中，将光标放在需要创建表格的位置，单击“常用”子面板中的 “表格”按钮，弹出“表格”对话框，如图 2-67 所示，对下列参数进行设置： “行数”文本框：输入 5。 “列数”文本框：输入 6。 “表格宽度”文本框：输入 500 像素。.

(42) 第 2 章网页制作. 61. “单元格边距”文本框：输入 0。 “单元格间距”文本框：输入 0。 “边框粗细”文本框：输入 0。表格高度在属性面板中设置。（2）选择表格，居中对齐表格后选择“命令”→“格式化表格”命令，弹出“格式化表格”对话框，如图 2-71 所示，在其中选择 AltRows Basic Gray 格式，单击“确定”按钮表格的样式就设定好了，最终效果如图 2-72 所示。. 图 2-71. “格式化表格”对话框. 图 2-72. 格式化后的表格. 2.6.4 布局表格 Dreamweaver 8 的布局视图功能以直观的方式自动生成了网页中的表格，能够使设计者在文档窗口中通过拖曳鼠标来实现复杂表格排版效果。在 Dreamweaver 8 中要使用布局视图，应将窗口从“标准视图”切换到“布局视图”。在“插入”面板中选择“布局”子面板，如图 2-73 所示。单击面板中的“布局视图”按钮，如图 2-74 所示。.

(43) 62. 网页制作技术教程. 图 2-73. “布局”子面板. 图 2-74. 布局模式. 绘制布局表格：像画图一样在页面里面排版表格。绘制布局单元格：在表格中画单元格。如果勾选了“不要再显示此消息”复选项，在以后的切换中将不再出现。单击“确定” 按钮，切换到布局视图后窗口如图 2-75 所示。. 图 2-75. 布局窗口. 1．绘制表格（1）在“布局”子面板中，单击“布局表格”按钮，如图 2-76 所示，这时鼠标变为“+” 形状。（2）将鼠标放置于要绘制表格的区域，然后拖动鼠标绘制表格。.