Dreamweaver MX 2004详解

第四章DreamweaverMX2004详解第一节DreamweaverMX2004操作第二节扩展DreamweaverMX2004第三节应用实例习题四　　　　　　　本节将详细讲述如何在DreamweaverMX2004中添加和使用各种对象。　　一、网页基本操作　　DreamweaverMX2004对网页的创建、保存等操作命令大多数与平时使用的软件类似，还有一些功能是其所特有的，熟练地掌握这些操作可以大大提高工作效率。下面具体介绍关于网页的一些基本操作。第一节DreamweaverMX2004操作　　1．创建网页　　利用DreamweaverMX2004创建网页的操作步骤如下：　　（1）选择“文件”→“新建”命令，弹出“新建文档”对话框，如图4.1.1所示。图4.1.1“新建文档”对话框　　（2）打开“常规”选项卡，在左边“类别”列表区中选择其中一种文档类别，然后在其右边对应的“基本页”选项区中选择所要创建的基本页。单击“创建”按钮，即可完成网页创建。　　提示：DreamweaverMX2004会自动记住本次所创建空白网页的类型，在下次创建新的网页时，会自动选择为上次所创建空白网页的类型。　　2．保存网页　　在DreamweaverMX2004中，可以通过以下几种方式保存网页：　　（1）选择“文件”→“保存”命令。　　（2）在“ 标准 excel标准偏差excel标准偏差函数exl标准差函数国标检验抽样标准表免费下载红头文件格式标准下载 ”工具栏中单击“保存”按钮　。　　如果不想将已经编辑好的内容保存为原来的文档，可以选择“文件”→“另存为”命令，弹出“另存为”对话框，如图4.1.2所示。选择存储文件夹并输入文件名后，单击“保存”按钮即可保存为另一个文件，此时DreamweaverMX2004的标题栏“MacromediaDreamweaverMX2004-[无标题文档（Untitled-　　1）]”后面小括号中的文件名将会相应地变成另存为的文件名，例如：将文档另存为文件名“hello.asp”，则Dreamweaver的标题栏将变为“MacromediaDreamweaverMX2004-[无标题文档（Web/hello.asp）]”。图4.1.2“另存为”对话框　　提示：当新创建的文档第一次被保存时，也将会弹出“另存为”对话框。　　3．打开和关闭网页　　通常打开网页文档的方法有以下3种：　　（1）选择“文件”→“打开”命令，弹出“打开”对话框，如图4.1.3所示。选中需要打开的文件后，单击按钮或直接双击需要打开的文件。图4.1.3“打开”对话框　　（2）单击“标准”工具栏中的“打开”按钮　，弹出“打开”对话框（见图4.1.3），在该对话框中的操作同方法（1）。　　（3）在“文件”面板中打开“文件”选项卡，在其文件列表中双击需要打开的文件即可。　　如果要将网页关闭，则有以下两种方法：　　（1）选择“文件”→“关闭”命令。　　（2）单击DreamweaverMX2004中网页窗口右上角的“关闭”按钮　。　　提示：如果在关闭文档时并未将其保存，Dreamweaver将会弹出如图4.1.4所示的提示框。单击“是”按钮，保存并关闭文档；单击“否”按钮，不保存并关闭文档；单击“取消”按钮，取消关闭文档。图4.1.4提示框　　二、文本　　文本是网页中最基本、最重要的一种元素，网站中的信息一般都是通过文本传递给浏览者的。不同的文本格式、大小、布局、颜色等属性，可以展现出不同的网页风格。　　1．输入文本　　新建或打开已有的网页，在编辑区中将光标定位在需要输入文本的位置，即可使用各种输入法输入文本。　　注意：Dreamweaver并不支持类似于Word2000以上版本的鼠标双击进行定位的功能，用户可以使用回车键或使用层、框架等工具进行调整。但是，如果输入一个以上的空格，浏览器会将其识别为一个空格，详细内容在本书第一章中已经有介绍，在此不再赘述。　　2．编辑文本　　在Dreamweaver中，可以对文本进行移动、复制、剪切和粘贴等操作。　　（1）移动文本。按下鼠标左键，选中需要移动的文本，如图4.1.5所示。在选中的文本上按下鼠标左键，拖动鼠标，此时鼠标会变成　形状，如图4.1.6所示。将鼠标拖动到目标位置后松开鼠标左键，即可将文本移动到该处，如图4.1.7所示。图4.1.5选中文本　图4.1.6移动文本图4.1.7移动完成　　（2）复制、剪切和粘贴文本。复制和剪切文本是将所选择的文本复制到剪贴板上，为粘贴文本做准备。粘贴文本是指将已经复制或剪切到剪贴板上的文本粘贴到光标所在位置。复制和剪切的区别是：复制文本不会删除原来的文本，而剪切文本在复制文本的同时会删除原来的文本。　　　1）复制文本：用鼠标选择需要复制的文本，选择“编辑”→“拷贝”命令；或在选中的文本上单击鼠标右键，在弹出的快捷菜单中选择“拷贝”命令；也可以使用Ctrl＋C键复制文本。　　　2）剪切文本：用鼠标选择需要剪切的文本，选择“编辑”→“剪切”命令；或在选中的文本上单击鼠标右键，在弹出的快捷菜单中选择“剪切”命令；也可以使用Ctrl＋X键剪切文本。　　　3）粘贴文本：将光标定位到需粘贴文本的位置，选择“编辑”→“粘贴”命令；或在需要粘贴文本的位置上单击鼠标右键，在弹出的快捷菜单中选择“粘贴”命令；也可以使用Ctrl＋V键粘贴文本。　　3．格式化文本　　在文本属性面板或“文本”下拉菜单中，可以设置文本的各项属性。　　“文本”属性面板是DreamweaverMX2004默认的属性面板，如图4.1.8所示。图4.1.8“文本”属性面板　　其各项功能介绍如下：　　（1）格式：单击其下拉列表框右侧的小三角，可以在弹出的下拉列表中选择文本格式，主要用于标题级别的设置。　　（2）样式：单击其下拉列表框右侧的小三角，可以在弹出的下拉列表中选择CSS样式。　　（3）字体：单击其下拉列表框右侧的小三角，可以在弹出的下拉列表中选择字体。　　（4）大小：单击其下拉列表框右侧的小三角，可以在弹出的下拉列表中选择字号。　　（5）　　：单击“粗体”按钮　可以设置字体加粗，单击“斜体”按钮　可设置字体倾斜。　　（6）　　　：单击“文本颜色”图标　　　　　，在弹出的颜色选择面板中可以设置文本颜色。　　（7）　：分别为“左对齐”按钮　、“居中对齐”按钮　、“右对齐”按钮　和“两端对齐”按钮　，利用这些按钮设置文本的对齐方式。　　（8）　　　　：为文本建立项目符号或编号、设置文本凸出或缩进。　　（9）链接：在该文本框中可以设置文本的超级链接。　　（10）目标：在设置了文本的超级链接后，在该下拉列表框中设置其打开窗口的方式。　　4．插入对象　　在DreamweaverMX2004中，用户可以使用“插入”下拉菜单或“插入”工具栏插入对象。除了本书第三章中所讲到的可以插入图片、表格、媒体等对象外，还可添加日期、水平线、特殊字符等。　　（1）插入日期。　　　1）将光标定位在需要插入日期的位置。　　　2）选择“插入”→“日期”命令，或在“常用”插入工具栏中单击“日期”按钮　，弹出“插入日期”对话框，如图4.1.9所示。图4.1.9“插入日期”对话框　　　3）设置合适的“星期格式”、“日期格式”和“时间格式”。如果选中“储存时自动更新”复选框，则在每一次存储网页时，都会自动更新所插入的日期。　　　4）单击“确定”按钮，完成日期的添加。　　（2）插入水平线。为了使网页结构清晰、层次分明，通常在网页中插入水平线可以取得非常好的效果。其操作步骤如下：　　　1）将光标定位在需要插入水平线的位置。　　　2）选择“插入”→“HTML”→“水平线”命令，或者在“HTML”插入工具栏中单击“水平线”按钮　。　　　3）在光标位置便可以看到一条水平线。选择此水平线，便可以在属性面板中设置其属性，如图4.1.10所示。图4.1.10“水平线”属性面板　　其各选项的功能介绍如下：　　　①水平线：可以在其下面的文本框中输入水平线的名称。　　②　　　：设置水平线的宽度。可以以像素为单位，也可以以相对页面宽度的百分比为单位。　　　③　　　：设置水平线的高度。其值只可以以像素为单位。　　　④　　　　　　　：设置水平线的对齐方式。　　　⑤　　　　：设置水平线的CSS样式。　　　⑥阴影：选中该复选框，可以设置水平线的阴影效果。　　（3）插入特殊字符。像Word一样，DreamweaverMX2004可以方便地插入一些特殊字符，其操作步骤如下：　　　1）将光标定位在需要插入特殊字符的位置。　　　2）选择“插入”→“HTML”→“特殊字符”命令，在其子菜单中选择合适的字符插入，或者在“文本”插入工具栏中单击“字符”按钮　右侧的小三角　。　　除了常用的特殊字符外，还有其他的一些字符可以插入。在弹出的下拉菜单中选择“其他字符”命令，弹出“插入其他字符”对话框，如图4.1.11所示。选中要插入的字符，单击“确定”按钮即可。图4.1.11“插入其他字符”对话框　　5．查看和编辑头部内容　　在第一章中提到：一个HTML文档由在和标记之间的头部，以及在和之间的正文两部分组成，除了包含标题信息外，还可以有文档的类型、函数和变量、语言解码方式等非常重要的信息。　　在编辑区中显示头部内容的操作步骤如下：　　（1）选择“查看”→“文件头内容”命令，或按Ctrl＋Shift＋W键，打开“文件头”面板，如图4.1.12所示。　　（2）单击面板中相应的图标，在属性面板中修改对应的设置。　　（3）再次选择“查看”→“文件头内容”命令，或按Ctrl＋Shift＋W键，“文件头”面板便会隐藏。图4.1.12“文件头”面板　　三、图像　　如果一个网站只有单一的文字，就会显得非常单调，适当地在网页中插入精美的图片，将会给浏览者以更多的新鲜感。　　1．网页图像 基本知识 计算机网络基本知识电脑入门基本知识电脑入门基本知识键盘电脑入门基本知识视频马克思主义原理基本知识点总结 　　计算机中的图像主要分为两大类——矢量图像和位图图像。下面对其概念以及格式做一个简单的介绍：　　（1）矢量图像：它由线条和曲线组成，主要根据图像的几何特性描绘图像。它与分辨率无关，用户可以随便将它缩放到任意尺寸显示或打印，而不会降低其清晰度。它是表现标志图形或插图中线条的最佳选择。但由于其色彩并不丰富，所以在表现图像中真实的事物时相对于位图图像则逊色很多。　　（2）位图图像：又称为栅格图像，它使用像素来表现图像，每个像素都有其特定的位置和颜色值。在处理图像时，用户编辑的是像素，而不是像矢量图像中的线条和曲线，它与分辨率有关，如果对它进行放大显示或打印时，将会丢失其中的细节，并出现锯齿状，使图像显示失真，但由于其色彩丰富，在表现图像的阴影和颜色的细微层次上是最佳的选择。　　（3）常见的网页图像格式：在计算机中虽然有很多图形图像的文件格式，但网页中通常只用其中的3种，即GIF（GraphicInterchangeFormat），JPEG（JointPhotographicExpertsGroup）和PNG（PortableNetworkGroup），对其分别介绍如下：　　　1）GIF：即图表交换格式。它使用LZW算法（由Unisys公司拥有的注册专利无损压缩算法）进行压缩，文件最多使用256种颜色，虽然色彩比较简单，但文件比较小，适合显示色调不连续或单一颜色的图像，是网上常用的图像格式，如图标、按钮、导航条等通常使用这种格式的图像。它可分为87a和89a两种格式，89a即通常所说的GIF动画，将一系列图片以特定的频率、顺序显示，网上的很多Banner和Logo就是使用这种方法制作的。而且GIF图像支持透明背景，在网页中经常被用做项目符号和按钮等不遮挡背景的元素。　　　2）JPEG：即联合图像专家组格式。它是一种有损压缩方式，压缩比很高，压缩效果很显著，其支持全彩色，相对于GIF的256色优异很多，可以使网页上的色彩更加丰富。随着文件品质的提高，文件的大小和下载时间也会相应增加。其他图像转换为JPEG格式时，可以选择其压缩品质，品质越高，相应的文件大小就会越大，所以在图像品质与文件大小之间应该做一个均衡，网页中一般使用中、低质量即可。　　　3）PNG：即可移植网络图形格式。它是一种无专利权限制的格式，由于目前受到W3C组织的大力推荐，已经在网络上逐渐推广。它采用与GIF图像类似的压缩方法，包括对索引色、灰度、真彩色图像及alpha通道透明的支持，真实重现原始图像的信息，更优于GIF图像格式的是它支持真彩色甚至32位更高质量的颜色，而所生成的文件大小与JPEG格式并没有太大差别。　　2．插入图像　　用户可以在网页中插入GIF，JPEG和PNG格式的图像，还可以将图像作为网页的背景，并且可以插入鼠标经过时变化的图像。　　（1）插入普通图像。当用户将图像插入文档时，DreamweaverMX2004会自动在HTML代码中生成对该图像的引用代码，如果所插入的图像不在当前站点中，DreamweaverMX2004会询问用户是否要将此图像文件复制到当前站点中。插入图像的方法如下：　　　1）将光标定位于要插入图像的位置。　　　2）选择“插入”→“图像”命令，或单击“常用”插入工具栏中“图像”按钮　右侧的小三角　，在弹出的下拉菜单中选择“图像”命令，或按Ctrl＋Alt＋I键，弹出“选择图像源文件”对话框，如图4.1.13所示。　　　3）选中所需要插入的图像后，单击“确定”按钮，即可将图像插入到网页中。图4.1.13“选择图像源文件”对话框　　（2）插入网页背景。网页背景有很多种，可以在整个页面（）内插入背景，也可在表格（）或层（）内插入网页背景的方法如下：　　　1）将光标定位在需要插入背景的表格里。　　　2）单击标签选择器中的标签，选中该表格。图4.1.16添加背景后的网页　　　3）在属性面板中单击“背景”文本框右侧的　按钮，弹出“选择图像源文件”对话框（见图4.1.15）。选中需要作为背景的图片后，单击“确定”按钮，完成后如图4.1.17所示，该例在一个3行1列的表格的第2行第1列中插入背景图片。　　在层（内插入网页背景图片的步骤类似，这里不再赘述。图4.1.17添加背景图片的表格　　3．编辑图像　　DreamweaverMX2004与以前版本相比，它提供了更多的图像修改功能。　　（1）命名图像。虽然每个图像都有一个文件名，但当它被置入页面中后，该文件名并不会被带到文档中。为了使该图像在脚本或其他软件中使用惟一的名称，可以对该图像进行命名。为图像命名的操作方法如下：　　　1）单击“常用”插入工具栏中的“图像”按钮　，在文档中插入图像。　　　2）单击标签选择器中的　　标签选中该图像。　　　3）在属性面板的“名称”文本框中输入要命名的图像名称，例如：giraffe，如图4.1.18所示。图4.1.18在“属性”面板中为图像命名　　（2）修改图像尺寸。在DreamweaverMX2004中，可以重新修改图像的显示尺寸，修改图像尺寸的操作步骤介绍如下：　　　1）单击“常用”插入工具栏中的“图像”按钮　，在文档中插入图像。　　　2）单击标签选择器中的　　标签选中该图像。　　　3）通过以下两种方法改变图像尺寸：　　　①在属性面板中的“宽”和“高”两个数值框中输入需要调整尺寸的数值。　　　②将鼠标停放在图像右下角的控制柄上，此时鼠标光标变成形状，拖动鼠标，调整图像的尺寸，如图4.1.19所示。　　注意：如果插入一个比较大的图像，虽然尺寸被缩小，但在浏览时同样会下载源文件，所以最好直接缩小图像源文件。控制柄　　提示：单击　　　左侧的区域“宽”，可以恢复图像的宽度；单击　　　左侧的区域“高”，可以恢复图像的高度；单击“宽”和“高”数值框右侧的“恢复图像到原始大小”按钮　，可以同时恢复图像的宽度与高度。图4.1.19使用鼠标调整图像大小　　（3）裁剪图像。在DreamweaverMX2004中可以直接裁剪文档中的图像，而不需要再打开其他的图像编辑软件进行裁剪，其操作步骤介绍如下：　　　1）单击“常用”插入工具栏中的“图像”按钮　，在文档中插入图像。　　　2）单击标签选择器中的　　标签选中该图像。　　　3）在属性面板中单击“裁剪”按钮　，弹出一个提示框，提示用户可以通过选择“编辑”→“撤消”命令撤消所做的更改，如图4.1.20所示。选中“不再显示这个信息”复选框，则此提示框在以后的操作中将不再显示。图4.1.20提示框　　　4）单击“确定”按钮，此时，在图像中会出现一个裁剪框，如图4.1.21所示。图4.1.21裁剪框　　　5）使用鼠标调整各角的控制柄，将所需图像调整到合适的位置和大小。　　　6）调整完毕后，双击鼠标左键或按回车键，完成裁剪工作，如图4.1.22所示。图4.1.22裁剪后的图像　　（4）重新取样。在DreamweaverMX2004中插入图像后，通过上述方法对图像进行尺寸修改或裁剪等操作时，源图片并没有发生任何改变。当在浏览器中浏览该页面时，虽然尺寸改变了，但并没有减小页面文件的大小。此时，应该执行重新取样的操作，这样会将调整后的图像保存到该图像的源文件中。对图像的重新取样操作步骤如下：　　　1）单击“常用”插入工具栏中的“图像”按钮　，在文档中插入图像。　　　2）单击标签选择器中的标签选中该图像。　　　3）对该图像进行尺寸的调整或裁剪操作。　　　4）在属性面板中单击“重新取样”按钮　，弹出“DreamweaverMX2004”提示框，提示用户可以通过选择“编辑”→“撤消裁剪”命令撤消所做的更改（见图4.1.20）。选中复选框，此提示框在以后的操作中将不再显示。　　　5）单击“确定”按钮，此时，图像的更改将会被保存到文件当中。　　注意：对图像进行重新取样操作，将会直接保存到源文件中，在查看源文件时，图像已经发生了更改，所以用户在进行重新取样操作时，需要备份好源文件。　　（5）调整亮度和对比度。当用户对插入的图像亮度或对比度不是很满意时，可以在DreamweaverMX2004中直接调整图像的亮度和对比度，其操作步骤如下：　　　1）单击“常用”工具栏中的“图像”按钮　，在文档中插入图像。　　　2）单击标签选择器中的　　标签选中该图像。　　　3）在属性面板中单击“亮度和对比度”按钮　，弹出“DreamweaverMX2004”提示框，提示用户可以通过选择“编辑”→“撤消裁剪”命令撤消所做的更改（见图4.1.20）。选中“不再显示这个信息。”复选框，此提示框在以后的操作中将不再显示。　　　4）单击“确定”按钮，弹出“亮度/对比度”对话框，如图4.1.23所示。图4.1.23“亮度/对比度”对话框　　　5）在该对话框中，可以使用鼠标拖动“亮度”和“对比度”滑块进行调整；也可以在其后面对应的数值框中输入精确的数值进行调整，其中输入负数代表降低亮度或对比度，输入正数代表提高亮度或对比度。选中“预览”复选框，可以对调整后的效果进行预览。　　　6）单击“确定”按钮，完成对图像亮度和对比度的调整，如图4.1.24所示。　　注意：对图像进行亮度和对比度的调整后，不需要执行重新取样操作，便可直接保存到源文件，请用户在修改之前做好源文件的备份工作。　　图4.1.24对图像进行亮度和对比度的调整　　4．图像映射　　要在同一个图像上创建不同的超级链接，可以通过使用图像映射和热点来实现。两者的区别是图像映射是一种具有超级链接功能的图像，而热点是在图像中设置的指向不同超级链接的闭合区域。　　创建映射的操作步骤如下：　　（1）单击“常用”工具栏中的“图像”按钮　，在文档中插入图像。　　（2）单击标签选择器中的　　标签选中该图像。　　（3）在属性面板的“地图”文本框中为热点输入一个名称，如图4.1.25所示。如果要在同一个文档中使用多个图像映射，每个热点的名称都必须是惟一的。图4.1.25图像“属性”面板　　（4）单击“矩形热点工具”按钮　、“椭圆形热点工具”按钮　和“多边形热点工具”按钮　3个按钮中的一个，在图像上所要设置热点的位置单击并拖动设置热点。若对创建的热点的形状或大小不满意，可单击“指针热点工具”按钮　，通过拖动各个顶点的控制柄来调整热点的形状或大小。　　（5）选中热点，单击“链接”文本框右侧的　按钮，弹出“选择文件”对话框，选中热点所要转向的文件后，单击“确定”按钮；单击“目标”下拉列表框右侧的小三角，在弹出的下拉列表中选择热点所链接文档的打开方式；在“替代”下拉列表框中输入替代图像显示的文本，当浏览器设置为手动下载图像或当鼠标指针停放在图片上时，将会显示该文本，如图4.1.26所示。图4.1.26“热点”属性面板　　（6）重复步骤（1）～（5），完成其他热点的设置，如图4.1.27所示。图4.1.27插入热点后的图像　　5．设置跟踪图像　　若要以某一个图像为基准，在不同位置放置不同的对象，可以使用跟踪图像。它只作为网页制作的一个辅助工具，只在DreamweaverMX2004的编辑区内显示，而不会显示在浏览器中。设置跟踪图像的方法有两种，分别介绍如下：　　（1）选择“修改”→“页面属性”命令，弹出“页面属性”对话框，选择左侧“分类”列表区域中的“跟踪图像”选项，如图4.1.28所示。单击“跟踪图像”文本框右侧的“浏览”按钮，弹出“选择图像源文件”对话框，选择需要作为跟踪图像的图片文件后，单击“确定”按钮，返回到如图4.1.28所示对话框。通过拖动“透明度”滑块，可以设置跟踪图像的透明度。完成后，单击“确定”按钮，效果如图4.1.29所示。　　（2）选择“查看”→“跟踪图像”→“载入”命令，弹出“选择图像源文件”对话框，选择需要作为跟踪图像的图片文件后，单击“确定”按钮，也可以弹出如图4.1.28所示的对话框。图4.1.28“页面属性”对话框图4.1.29设置跟踪图像后的编辑区　　6．创建鼠标经过图像　　鼠标经过图像是相对于普通图像而言的，又称为翻转图像。当鼠标指针经过该图像时，一幅图像就会切换成另一幅图像；当鼠标指针离开该图像时，又会显示原来的图像，使网页具有了动态性和交互性。这种功能非常适用于创建导航按钮，其操作步骤如下：　　（1）将光标定位在需要插入鼠标经过图像的位置。　　（2）选择“插入”→“图像对象”→“鼠标经过图像”命令，也可通过单击“常用”插入栏中“图像”按钮　右侧的小三角　，在弹出的下拉菜单中选择“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，如图4.1.30所示。图4.1.30“插入鼠标经过图像”对话框　　（3）在“图像名称”文本框中输入鼠标经过图像的名称；分别单击“原始图像”和“鼠标经过图像”文本框右侧的“浏览”按钮，选择鼠标经过前和经过后的图像；选中“预载鼠标经过图像”复选框；在“替换文本”文本框中输入所要替换的文本；单击“按下时，前往的URL：”文本框右侧的“浏览”按钮，选择单击该图片时所转向的文档或直接输入URL地址。　　（4）单击按钮，完成鼠标经过图像的创建。　　7．创建网站相册　　DreamweaverMX2004中的创建网站相册是一个非常实用的功能，使用它可以快速方便地在站点中建立一个电子相册，它可以将站点目录的子目录下的所有图片进行缩小后，在新建的网页列表中显示出来，并可通过超级链接转到对应的相片。　　创建网站相册的方法如下：　　（1）在站点中新建一个文件夹image，用以存放需要创建网站相册的图像。　　（2）再新建一个文件夹album，用以存放生成相册后的图像和网页文档。　　（3）将所有需要创建网站相册的图像复制到image文件夹中。　　（4）选择“命令”→“创建网站相册”命令，弹出“创建网站相册”对话框，如图4.1.31所示。图4.1.31“创建网站相册”对话框　　（5）在“相册标题”文本框中输入相册的标题；在“副标信息”和“其他信息”文本框中根据用户需要分别输入副标题和其他信息；分别单击“源图像文件夹”和“目标文件夹”右侧的“浏览”按钮，分别选择image文件夹和album文件夹；单击“缩略图大小”下拉列表框右侧的小三角，在弹出的下拉列表中选择一种缩略图的大小，选中“显示文件名称”复选框；分别单击“缩略图格式”和“相片格式”下拉列表框右侧的小三角，在弹出的下拉列表中选择一种图像的品质，在“小数位数”数值框中输入100；选中“为每张相片建立导览页面”复选框。　　（6）单击“确定”按钮，Dreamweaver会自动启动Fireworks，并弹出“批处理”对话框将源目录下的图像依次处理。　　（7）处理完毕后，将弹出如图4.1.32所示的提示框，提示用户相册已经建立。图4.1.32提示框　　（8）单击“确定”按钮，其所创建的网站相册如图4.1.33所示。图4.1.33在Dreamweaver中预览网站相册　　四、超级链接　　1．超级链接基础知识　　超级链接简称链接，是指从一个网页指向一个目标的连接，目标可以是本网页中不同的位置，也可以是另一个网页，还可以是图片、文件、媒体、电子邮件地址或一个应用程序等。站点中网页之间的相互切换就是通过超级链接来进行的。　　超级链接有多种显示方式，可以是普通文本，也可以是图片、导航按钮等格式。以文本作为超级链接时，默认状态下未使用的超级链接都以含有下划线的蓝色文本显示，单击打开超级链接以后，其颜色会发生改变。用户也可以通过CSS样式，更改超级链接的显示效果，这将在本章后面的内容中详细介绍。 　　2．创建超级链接　　创建超级链接的步骤如下：　　（1）选中需要创建超级链接的文本或图像，如图4.1.34所示。图4.1.34选中文本　　（2）选择“插入”→“超级链接”命令，弹出“超级链接”对话框，如图4.1.35所示。图4.1.35“超级链接”对话框　　（3）单击“链接”下拉列表框右侧的　按钮，弹出“选择文件”对话框，如图4.1.36所示。图4.1.36“选择文件”对话框　　（4）在站点中选择需要转向的目标文件，单击“确定”按钮，返回到如图4.1.35所示的对话框。　　（5）在“目标”下拉列表中选择一种目标文件弹出窗口的类型，如　　　　　　　。　　提示：_blank将链接的文档载入一个新的、未命名的浏览器窗口。_parent将链接的文档载入该链接所在框架的父框架或父窗口。如果包含链接的框架不是嵌套框架，则所链接的文档载入整个浏览器窗口。_self将链接的文档载入链接所在的同一框架或窗口。此目标是默认的，所以通常不需要指定它。_top将链接的文档载入整个浏览器窗口，从而删除所有框架。　　（6）在“标题”文本框中输入当鼠标停放在该链接上时显示的标题。　　（7）“访问键”文本框与“Tab键索引”文本框与其他超级链接配合使用，可以留空。　　（8）单击“确定”按钮，完成超级链接的建立，如图4.1.37所示。图4.1.37加入超级链接后的网页　　另外，还可以直接在“文本”属性面板中添加超级链接，操作步骤介绍如下：　　（1）选中所需要创建超级链接的文本或图像（见图4.1.32）。　　（2）单击“文本”属性面板中“链接”文本框右侧的　按钮，弹出“选择文件”对话框（见图4.1.35）。　　（3）单击“确定”按钮，完成超级链接的建立。　　这种方法相对于使用“超级链接”对话框建立超级链接更快捷、简便，但其中只包括一些常用的选项可以设置，标题、访问键等选项都不能进行更改。　　3．管理超级链接　　为避免站点中出现断链、错链，可以使用链接管理，使Dreamweaver在用户做出更改后自动更新链接；也可以使用站点的可视化表示形式修改链接；或者可以通过一次更改将所有链接更新到一个特定的文件中。　　每当在本地站点内移动或重命名文档时，Dreamweaver可自动更新指向该文档的链接。自动更新并不更改远程文件夹中的文件，除非将这些本地文件存回到远程服务器上。当将整个站点（或其中完全独立的一个部分）存储在本地磁盘上时，此项功能最适用。　　启用链接管理操作步骤如下：　　（1）选择“编辑”→“首选参数”命令，弹出“首选参数”对话框，如图4.1.38所示。图4.1.38“首选参数”对话框　　（2）在左侧的“分类”列表框中选择“常规”选项，单击右侧的“移动文件时更新链接”下拉列表框右侧的小三角，在弹出的下拉列表中选择“提示”或“总是”选项。如果选择“提示”选项，Dreamweaver将弹出一个对话框，列出此更改影响到的所有文件，如图4.1.39所示，单击“更新”按钮可更新这些文件中的链接，而单击“不更新”按钮将保留原文件不变；如果选择“总是”选项，则每当移动或重命名选定文档时，Dreamweaver将自动更新指向该文档的所有链接。　　（3）单击“确定”按钮，完成设置。图4.1.39“更新文件”对话框　　4．制作导航条　　导航条是用图像或图像组组成的，其项目包含4种状态，分别为：一般、滑过、按下和鼠标经过。用户可以只选择其中部分状态来制作导航条。制作导航条的操作步骤如下：　　（1）为各个导航项目创建一组图像。　　（2）选择“插入”→“图像对象”→“导航条”命令，弹出“插和导航条”对话框，如图4.1.40所示。或单击“常用”插入工具栏中的“图像”按钮　右侧的小三角　，在弹出的下拉菜单中选择“导航条”命令。　　（3）在“项目名称”文本框中输入项目的名称；分别单击“状态图像”、“鼠标经过图像”、“按下图像”和“按下时鼠标经过图像”文本框右侧的“浏览”按钮，选择相应状态下使用的图像；在“替换文本”文本框中输入要替换图像的文字；单击“按下时，前往的URL”文本框右侧的“浏览”按钮，选择所转向的文档后单击“确定”按钮，返回如图4.1.40所示的对话框，或直接输入URL地址；单击“插入”下拉列表框右侧的小三角，在弹出的下拉列表中选择“水平”或“垂直”选项，定义导航条的排列形式。　　（4）单击“导航条元件”列表区上方的　按钮，按相同的方法创建导航条中其他元件；单击　按钮，可以删除元件；单击　和　按钮，调整元件的排列顺序。　　（5）设置完毕后，单击“确定”按钮插入导航条。图4.1.40“插入导航条”对话框　　五、表格　　1．创建表格　　表格为HTML页面带来了结构的概念。它能使原本杂乱无章的内容变得井然有序，是控制Web页面布局最有力的工具。创建表格的操作步骤如下：　　（1）将光标定位在需要插入表格的位置。　　（2）选择“插入”→“表格”命令，或单击“常用”插入栏中的“表格”按钮　，弹出“表格”对话框，如图4.1.41所示。图4.1.41“表格”对话框　　（3）分别在“行数”和“列数”数值框中输入插入表格的行数和列数；在“表格宽度”数值框中输入表格的宽度，可以设置以像素或百分比为单位的数值；根据需要还可以设置“边框精细”、“单元格边距”、“单元格边距”等内容。　　（4）单击“确定”按钮，完成表格的添加。　　2．编辑表格　　在DreamweaverMX2004中，可以插入、删除、拆分或合并表格中的行与列，还可对其属性进行编辑。　　（1）选择表格元素。DreamweaverMX2004为用户提供了多种表格选择方式。分别介绍如下：　　　1）选中整个表格，选择整个表格的方法有以下几种：　　　①选择“修改”→“表格”→“选择表格”命令，或按Ctrl＋A键。　　　②在表格中单击鼠标右键，在弹出的快捷菜单中选择“表格”→“选择表格”命令。　　　③将光标定位在其中一个单元格里，单击标签选择器中的　　　标签。　　　④将鼠标光标定位在所要选择表格左侧的边角处，当鼠标指针变成形状时，单击鼠标左键。　　　2）选择行或列。将鼠标定位在要选择的行或列的左侧或顶部，当鼠标指针变成　或　形状时，单击鼠标左键选中本行或本列中所有单元格。　　　3）选中单元格。要选择一个单元格，可以在所要选择的单元格上三击鼠标左键。在选择单元格的同时按住Shift键，可以选择多个单元格。　　（2）插入行或列。在表格中插入行或列的操作步骤如下：　　　1）将光标定位在需要插入行或列的下一行或列中的任何一个单元格中。　　　2）若插入行选择“修改”→“表格”→“插入行”命令，若插入列选择“修改”→“表格”→“插入列”命令，或使用Ctrl＋M或Ctrl＋Shift＋A键插入行或列。　　（3）删除行或列。删除行或列时，单元格中的内容也将被删除。在表格中删除行或列的操作步骤如下：　　　1）将光标定位在所要删除的行或列中的任意一个单元格中。　　　2）若删除行选择“修改”→“表格”→“删除行”命令，若删除列选择“修改”→“表格”→“删除列”命令，或使用Ctrl＋Shift＋M或Ctrl＋Shift＋－键。　　（4）合并单元格。要合并单元格时，所选的单元格必须在同一行或列中，而且必须相邻。其操作步骤如下：　　　1）使用鼠标选择需要合并的单元格。　　　2）选择“修改”→“表格”→“合并单元格”命令。　　（5）拆分单元格。当需要把单元格拆分为一个或几个单元格时，可使用“拆分单元格”命令。其操作步骤如下：　　　1）使用鼠标选择要拆分的单元格。　　　2）选择“修改”→“表格”→“拆分单元格”命令。 　　3．表格排序　　DreamweaverMX2004有较为全面的表格排序功能，其操作步骤如下：　　（1）将光标定位在所要排序的表格内。　　（2）选择“命令”→“排序表格”命令，弹出“排序表格”对话框，如图4.1.42所示。图4.1.42“排序表格”对话框　　（3）单击“排序按”下拉列表框右侧的小三角，在弹出的下拉列表中选择要进行排序的列；单击“顺序”下拉列表框右侧的小三角，在弹出的下拉列表中选择“按字母顺序”或“按数字顺序”选项，在其右侧的下拉列表中选择“升序”或“降序”选项。　　（4）在第一次排序时，如果该列内容相同，可再进行第二次排序，单击“再按”下拉列表框右侧的小三角，在弹出的下拉列表中选择需要第二次排序的列。　　（5）选中“排序包含行一行”复选框，表示排序时包括第一行，当表格的第一行不是标题时，请选中此复选框；选中“排序标题行”复选框，表示排序包括和标记之间的内容；选中“排序脚注行”复选框，表示排序包括和标记之间的内容；选中“完成排序后所有行颜色保持不变”复选框，表示排序后的行仍然保持标记的属性。　　4．表格式数据的导入与导出　　在DreamweaverMX2004中，可以方便地将一些其他格式的表格导入到文档中，同时也可以将文档中的数据导出，供其他应用程序使用。　　（1）导入表格式数据。导入表格式数据的操作步骤如下：　　　1）将光标定位在要导入表格式数据的位置。　　　2）选择“文件”→“导入”→“表格式数据”命令，弹出“导入表格式数据”对话框，如图4.1.43所示。图4.1.43“导入表格式数据”对话框　　　3）单击“数据文件”文本框右侧的“浏览”按钮，选择数据源文件的路径；单击“定界符”下拉列表框右侧的小三角，在弹出的下拉列表中选择源文件中的定界符类型；根据需要改变其他的设置，完成后单击“确定”按钮即可在文档中建立相应的表格，并自动导入源文件中的数据。　　（2）导出表格式数据。导出表格式数据的操作步骤如下：　　　1）将光标定位在要导出表格式数据的位置。　　　2）选择“文件”→“导出”→“表格”命令，弹出“导出表格”对话框，如图4.1.44所示。图4.1.44“导出表格”对话框　　　3）分别单击“定界符”和“换行符”下拉列表框右侧的小三角，在弹出的下拉列表中选择定界符类型和换行符类型。　　　4）单击“导出”按钮，弹出“表格导出为”对话框，为导出的表格起一个名字，默认文件的扩展名是.csv，单击“保存”按钮，完成表格式数据的导出。　　六、层　　层是Dreamweaver中所特有的功能，是制作精美网页不可缺少的元素。使用层可以精确地定位页面元素。它与Photoshop，Fireworks等图像编辑软件中的层概念并不相同，在Dreamweaver中，它有特殊的含义，是指具有绝对或相对位置的标记之间的内容都立即更新。　　　3）高级（ID、上下文选择器等）：CSS选择器样式重定义特定标记组合的格式，例如：每当鼠标经过超级链接时都应用a:hover；或重定义包含特定id属性的所有标记的格式，例如：#myStyle应用于所有包含属性值对id=“myStyle”的标记。　　（3）如果选择的是“类（可应用于任何标签）”单选按钮，可直接在“名称”下拉列表框中输入所要创建的CSS样式的名称；否则单击“名称”下拉列表框右侧的小三角，在弹出的下拉列表中选择需要定义的CSS样式，例如当选中“标签（重新定义特定标签的外观）”单选按钮时，在“名称”下拉列表中选择“img”选项。　　（4）单击“确定”按钮，弹出“img的CSS样式定义（在css.css中）”对话框，如图4.1.51所示。图4.1.51“img的CSS样式定义（在css.css中）”对话框　　（5）根据需要设置其中的各个选项，单击“确定”按钮，完成CSS样式的创建。　　在“CSS样式”面板中选中所要删除的CSS样式，单击“删除CSS样式”按钮　，即可删除CSS样式；选中所要编辑的CSS样式，单击“编辑样式”按钮　，弹出对应的“CSS样式定义”对话框，便可对CSS样式进行编辑。　　4．管理CSS样式表　　如果在同一文档中添加了多个CSS样式表，可以通过“编辑样式表”对话框管理CSS样式表。选择“文件”→“CSS样式”→“管理样式”命令，弹出“编辑样式表”对话框，如图4.1.52所示。在该对话框中，可以新建、编辑、重命名、删除CSS样式表等。图4.1.52“编辑样式表”对话框　　八、使用多媒体　　多媒体已经非常普遍地应用于网站的建设当中，在网页中插入各种多媒体对象，能使网页显得更加生动。在DreamweaverMX2004中，提供了大量有关多媒体制作方面的功能，可以在网页中插入各种类型的多媒体对象。　　1．插入视频和音频　　在网页中插入一个视频或音频对象的操作步骤如下：　　（1）将光标定位于需要插入视频或音频对象的位置。　　（2）在“常用”插入工具栏中，单击“媒体”按钮　右侧的小三角，在弹出的下拉菜单中选择“插件”命令，弹出“选择文件”对话框。　　（3）选择需要插入视频或音频的文件，单击“确定”按钮便在网页中插入一个“插件”图标，用来提示视频或音频已经插入成功，如图4.1.53所示。图4.1.53插入的“插件”对象　　提示：当插入不同格式的视频或音频时，浏览器会自动选择与之相对应的视频或音频播放器进行播放。　　（4）将鼠标光标定位在所插入的“插件”对象左下角的控制柄上，按下鼠标左键，将“插件”对象调整到合适的尺寸，如图4.1.54所示。图4.1.54调整“插件”对象的尺寸　　（5）单击“标准”工具栏中的“保存”按钮　，保存文档。按F12键，在浏览器中进行预览。　　2．插入Flash对象　　Flash是一种高质量的矢量动画，非常普遍地应用于各种网站中。DreamweaverMX2004可以插入Flash按钮、Flash文本、Flash影片等。　　（1）插入Flash按钮。Dreamweaver中内置了一些已经设计好的Flash按钮，插入这些Flash按钮的操作步骤如下：　　　1）将光标定位于需要插入Flash按钮的位置。　　　2）在“常用”插入工具栏中，单击“媒体”按钮　右侧的小三角，在弹出的下拉菜单中选择“Flash按钮”命令，弹出“插入Flash按钮”对话框，如图4.1.55所示。图4.1.55“插入Flash按钮”对话框　　　3）在“样式”列表区域中选择一种按钮样式；在“按钮文本”文本框中输入创建按钮所要显示的文本；单击“字体”下拉列表框右侧的小三角，在弹出的下拉列表中选择一种文本的字体；在“大小”数值框中输入按钮大小；单击“链接”文本框右侧的“浏览”按钮，选择单击该按钮时所要转向的网页文档或直接输入URL地址；在“目标”下拉列表中选择窗口弹出的种类；单击“背景色”文本框左侧的颜色选择框　，打开颜色选择面板，为按钮选择一种背景色；在“另存为”文本框中输入所要生成的按钮的文件名。　　　4）单击“确定”按钮，即可在网页中插入一个Flash按钮，如图4.1.56所示。图4.1.56在文档中插入Flash按钮　　（2）插入Flash文本。插入Flash文本的操作步骤如下：　　　1）将光标定位于需要插入Flash文本的位置。　　　2）在“常用”插入工具栏中，单击“媒体”按钮　右侧的小三角，在弹出的下拉菜单中选择“Flash文本”命令，弹出“插入Flash文本”对话框，如图4.1.57所示。　　　3）参考插入Flash按钮的设置在该对话框中进行设置。　　　4）单击“确定”按钮即可在网页中插入一个Flash文本。图4.1.57“插入Flash文本”对话框　　（3）插入Flash动画。插入Flash动画的操作步骤如下：　　　1）将光标定位于需要插入Flash动画的位置。　　　2）在“常用”插入工具栏中，单击“媒体”按钮　右侧的小三角，在弹出的下拉菜单中选择“Flash”命令，弹出“选择文件”对话框，选择需要插入的Flash动画。　　　3）单击“确定”按钮完成Flash动画的插入。　　3．插入Shockwave影片　　Shockwave是Macromedia公司所制定的网上交互多媒体的标准。它是一种经过压缩的媒体格式，可使用Macromedia公司的Director创建。插入Shockwave影片的操作步骤介绍如下：　　（1）将光标定位于需要插入Sh

和