HTML和中文DreamweaverMX2004实用教程第3章

第3章在网页中插入对象

本章要点3.1“图书导读”网页3.2再做“动画放映室”网页3.3“豆豆的收藏”网页3.4“FLASH简介”网页3.5“日落奇山”网页3.6“风景幻灯”网页3.7“旋转的地球”网页3.8“考试安排”网页3.9调整“考试安排”网页3.10“照相馆”网页习题33.1“图书导读”网页

“图书导读”网页的显示效果如图3-1-1所示。在该网页中插入了一个导航条，在导航条中包含了7幅图像，当鼠标移到其中任意一幅图像上时，该图像变为“单击进入”文字，如图3-1-1所示。单击该图像按钮即可链接到相应的网页。

图3-1-1“图书导读”网页的显示效果3.1“图书导读”网页

3.1.1“插入导航条”对话框中各选项的含义导航条实际上是一组动态图像按钮，单击它后，可在浏览器中调出HTML文件和其他文件（如图像）。单击“插入”（常用）栏“图像”快捷菜单中的“导航条”按钮，调出“插入导航条”对话框，如图3-1-2所示，其中各选项的作用如下。（1）“导航条元件”列表框：给出导航条中各个动态图像按钮的名称（默认为图像的名称）。单击按钮，可以增加动态图像按钮；选中动态图像按钮名称，再单击按钮，可删除该按钮；选中动态图像按钮名称，再单击按钮或按钮，可改变动态图像按钮在导航条中的位置。（2）“项目名称”文本框：用来输入各动态图像按钮的名称。（3）4个文本框与“浏览”按钮：用于定义鼠标4种状态时的图像。“状态图像”是鼠标左键抬起状态时的图像，“鼠标经过图像”是光标移到图像之上时的图像，“按下图像”是鼠标按下时的图像，“按下时鼠标经过图像”是鼠标按下并经过图像时的图像。

3.1“图书导读”网页

图3-1-2“插入导航条”对话框3.1“图书导读”网页

（4）“按下时，前往的URL”栏：用于输入与动态按钮链接的文件目录和名字，单击“浏览”按钮后可选择链接的文件。在其右边的列表框内可选择显示链接的页面的框架名称。（5）“选项”栏：“预先载入图像”复选框用于确定是否要预先载入各个图像；页面载入时就显示“鼠标按下图像”复选框用于确定是否要在页面载入的初始状态时显示鼠标按下状态的图像。（6）“插入”下拉列表框：用于选择按钮放置的方式。选择“水平”列表项，表示水平放置；选择“垂直”列表项，表示垂直放置。（7）“使用表格”复选框：选中该复选框后，表示使用表格将动态按钮框起来。3.1.2插入水平线在页面内可以利用水平分割线将标题与文字或图像等对象分割，使页面的信息分布清晰。当然用线条图像来分割，效果会更好些，但会使文件变大。加入水平线的方法如下所述。（1）单击“插入”（HTML）栏中的“水平线”按钮，即可在光标所在的行插入一条水平线，并调出水平线“属性”面板，如图3-1-3所示。

3.1“图书导读”网页

图3-1-3水平线的“属性”栏3.1“图书导读”网页

（2）在水平线“属性”面板中的“宽”文本框内输入水平线的水平长度数值，在“高”文本框内输入水平线的垂直宽度数值，单位有像素和百分数（%）两种选择。在“对齐”下拉列表框内选择“默认”、“左对齐”、“居中”对齐或“右对齐”选项。选中“阴影”复选框，则水平线是中空的；不选中“阴影”复选框，则水平线是亮实心的线。在“插入”（HTML）栏中还有一些按钮，利用它们还可以在网页中插入日期、换行符和电子邮件地址等。因为使用方法比较简单，此处不再赘述。

3.2再做“动画放映室”网页在Dreamweaver中制作的“动画放映室”网页的显示效果和在HTML文件中输入HTML代码的方法制作的“动画放映室”网页基本相同。在Dreamweaver的可视化界面中插入Flash动画后即可查看动画的显示效果。在Dreamweaver中制作的“动画放映室”网页的显示效果如图3-2-1所示。

图3-2-1“动画放映室”网页的显示效果3.2再做“动画放映室”网页

Flash是Macromedia公司开发的另一个著名产品，它是一个优秀的矢量绘图和动画制作软件。Flash可以制作出一种扩展名为.swf的动画文件，这种文件可以插到HTML里，也可以单独成为网页。Flash不但可以制作出一般的动画，还可以制作出带有背景声音，具有较强的交互性能的动画。Flash制作的这种动画可以在所有安装了ShockwaveFlash插件的浏览器中播放，这也是它之所以快速广泛流行的一个重要原因。另外，1998年Macromedia公司公布了Flash动画格式文件的全部代码，方便了众多软件开发公司和其设计人员用它开发相关产品，从而加快了Flash的推广与应用。各个公司和个人推出的可以制作.swf文件的软件越来越多。3.2.1Flash对象“属性”栏中各选项的含义图3-2-2所示为Flash对象“属性”栏的显示效果。“属性”栏中各选项的作用如下。

3.2再做“动画放映室”网页（1）“Flash”文本框：用于输入Flash影片对象的名字。该名字可以在脚本语言中使用。（2）“宽”与“高”文本框：用于输入Flash影片对象的宽与高。（3）“文件”文本框与文件夹按钮：用于选择SWF格式的Flash影片文件。（4）“编辑”按钮：单击该按钮，可调出FlashMX2004，并对Flash文件进行编辑。（5）“重设大小”按钮：单击该按钮，可使Flash电影恢复原大小。（6）“循环”复选框：选中该复选框后，可循环播放。

图3-2-2Flash对象的“属性”栏3.2再做“动画放映室”网页

（7）“自动播放”复选框：选中该复选框后，加载网页时，动画可以自动播放。（8）“垂直边距”文本框：用于设置Flash影片与边框间垂直方向的空白量。（9）“水平边距”文本框：用于设置Flash影片与边框间水平方向的空白量。（10）“品质”下拉列表框：用于设置动画的质量。（11）“比例”下拉列表框：用于选择缩放参数。（12）“对齐”下拉列表框：用于设置Flash影片的对齐方式。（13）“背景颜色”文本框与按钮：用于设置Flash影片的背景颜色。（14）“播放”按钮：单击该按钮，可播放Flash影片。（15）“参数”按钮：单击该按钮，可调出一个对话框，在该对话框中可以输入附加参数，用于传递给Flash或Shockwave影片。

3.2再做“动画放映室”网页

3.2.2设置Flash影片的属性执行“窗口”→“标签检查器”菜单命令，可以调出“标签”面板，如图3-2-3所示。图3-2-3“标签”面板在该面板中可以设置Flash影片的属性。该对话框中将Flash影片的属性分为了“常规”、“内容”、“外观”、“CSS/辅助功能”、“语言”和“未分类”6大类。在各个类别中又包含了一些具体的属性内容。单击任意一个属性的名称，即可设置或改变该属性。

3.2再做“动画放映室”网页

图3-2-3“标签”面板3.3“豆豆的收藏”网页

“豆豆的收藏”网页的显示效果如图3-3-1所示。在该网页中插入了一个图像查看器，网页加载时，页面中显示“图像查看器”中的第一幅图像，单击按钮或按钮，即可显示上一幅或下一幅图像。单击按钮，即可自动播放所有图像。“图像查看器”是DreamweaverMX2004新增加的一个功能。利用“图像查看器”，可以导入图像，创建一个Flash格式的图像浏览器。在浏览器中可以依次浏览导入的图像，在图像切换时使用随机的动态切换效果，如图3-3-2所示。

3.3“豆豆的收藏”网页

图3-3-1

“豆豆的收藏”网页的显示效果

图3-3-2

图像的动态切换效果

3.3“豆豆的收藏”网页

3.3.1在网页中插入图像查看器（1）将光标移到要插入“图像查看器”的位置，再单击“插入”（Flash元素）面板中的“图像查看器”按钮，调出“保存Flash元素”对话框。输入SWF格式的文件名后，单击“确定”按钮，即可在网页中插入图像查看器对象。（2）执行“窗口”→“标签检查器”菜单命令，调出“标签”面板，如图3-3-3所示。选中其中的“imageURLs”项目，然后单击右边的按钮，调出“编辑imageURLs数组”对话框，如图3-3-4所示。

3.3“豆豆的收藏”网页

图3-3-3“标签”面板图3-3-4“编辑imageURLs数组”对话框3.3“豆豆的收藏”网页

（3）选中‘img1.jpg’项目，单击后面的按钮，调出“选择文件”对话框，选择要插入的图像后单击“确定”按钮，插入图像。利用同样方法插入其他图像。（4）单击按钮可插入一个新项目，单击按钮可删除选中的项目。单击“确定”按钮，完成“图像查看器”的设置。3.3.2“标签”面板中各选项的含义“标签”面板，如图3-3-3所示，“标签”面板中各选项的含义如下所述。（1）Bgcolor属性：用于设置“图像检查器”的背景颜色。（2）Captioncolor属性：用于设置“图像检查器”说明文字的颜色。（3）CaptionFont属性：用于设置“图像检查器”说明文字的字体。（4）CaptionSize属性：用于设置“图像检查器”说明文字的大小。（5）FrameColor属性：用于设置“图像检查器”边框的颜色。（6）FrameShow属性：该属性取值为“是”或者“否”，设置是否显示边框。（7）FrameThickness属性：用于设置“图像检查器”边框的宽度。（8）ImageCaptions属性：用于设置图像的标题。

3.3“豆豆的收藏”网页

（9）ImageLinks属性：用于设置图像的连接。（10）ImageLinkTarget属性：打开连接的窗口。（11）ImageURLs属性：在“图像检查器”检查器内插入图像。（12）ShowConteols属性：是否显示控制器，取决于该属性的取值为“是”或者“否”。（13）FlideAutoPlay属性：初始状态时是否自动播放图像，该属性的取值范围为“是”或者“否”。（14）SlideLDelay属性：切换图像间隔的时间。（15）SlideLoop属性：播放图像时是否循环。图3-3-5“编辑ImageLinks数组”对话框（16）Title属性：用于设置“图像检查器”的标题名称。（17）TitleColor属性：用于设置“图像检查器”标题名称的颜色。（18）TitleFont属性：用于设置“图像检查器”标题名称的字体。（19）TitleSize属性：用于设置“图像检查器”标题名称的字体大小。（20）TransitionsType属性：用于设置图像切换时的效果。此处可以设置包含None（无切换效果）和Randam（随机切换效果）在内的12种切换效果。

3.4“FLASH简介”网页

在“FLASH简介”网页中介绍了FlashMXProfessional2004的基本功能。在该网页中使用了Flash按钮和Flash文字对象。在浏览器中打开该网页后，当鼠标移到“插入FLASH动画”按钮上时的显示效果如图3-4-1所示，当鼠标移到介绍文字上面时的显示效果如图3-4-2所示。

图3-4-1

“FLASH简介”网页的显示效果

图3-4-2

当鼠标移到Flash文字上面时的显示效果

3.4“FLASH简介”网页

3.4.1“插入Flash按钮”对话框单击“插入”（常用）栏“媒体”快捷菜单中的“Flash按钮”按钮，调出“插入Flash按钮”对话框，如图3-4-3所示，其中各选项的含义如下。

图3-4-3“插入Flash按钮”对话框3.4“FLASH简介”网页

（1）“范例”显示框：用于显示所选的“Flsah按钮”的效果，该显示效果和在浏览器中的显示效果相同，并且可以用鼠标测试“单击”时的显示效果。（2）“样式”列表框：在该列表框中列出所有可以使用的Flash按钮的样式，可以从中选择相应的样式进行编辑。（3）“字体”下拉列表框：用于选择要显示文字的字体。（4）“大小”文本框：用于设置显示文本的大小。（5）“链接”文本框：在该文本框中输入需要链接的文件的目录和文件名，也可以单击“浏览”按钮，在调出的“选择文件”对话框中选择需要链接的文件，设置链接。（6）“目标”下拉列表框：用于设置链接的网页的打开方式，其中各选项作用如下。_blank：在一个新的浏览器窗口中打开链接的文档。_parent：在框架的父框架或父窗口打开链接的文档。_self：默认打开方式，将链接的文档载入链接所在的同一框架或窗口。_top：将链接的文档载入整个浏览器窗口，从而删除所有框架。

3.4“FLASH简介”网页

（7）“背景色”按钮：用于设置Flash按钮的背景颜色。（8）“另存为”文本框：用于输入要保存的目录及文件名，或者单击“浏览”按钮，调出“选择文件”对话框，利用该对话框选择要保存的目录和文件名，默认目录为网页文档所在的目录。图3-4-4“插入Flash文本”对话框3.4.2“插入Flash文本”对话框单击“插入”（常用）栏“媒体”快捷菜单中的“Flash文本”按钮，调出“插入Flash文本”对话框，如图3-4-4所示，其中各选项的含义如下所示。（1）“字体”下拉列表框：用于选择要显示文字的字体。（2）“大小”文本框：用于设置显示文本的大小。（3）“样式”按钮栏：用于设置文字的样式及对齐方式。（4）“颜色”栏：用于设置Flash文字的颜色。（5）“转滚颜色”栏：用于设置当鼠标经过FLASH文本时的颜色。（6）“文本”文本框：输入需要显示的文本。（7）“显示字体”复选框：在“文本”文本框中显示文本使用的字体样式。（8）“链接”栏：在文本框中输入需要链接的文件地址或者单击“浏览”按钮，在“选择文件”对话框中选择需要链接的文件地址，设置文字链接。（9）“目标”下拉列表框：用于设置链接网页的打开方式。（10）“背景色”栏：用于设置Flash文字区域的背景颜色。

3.4“FLASH简介”网页

（11）“另存为”文本框：在该文本框中输入要保存到的目录及文件名，或者单击“浏览”按钮，在“选择文件”对话框中设置要保存的路径和文件名，默认位置为网页文档所在的目录下。

图3-4-4“插入Flash文本”对话框3.5“日落奇山”网页

“日落奇山”网页在浏览器中的显示效果如图3-5-1所示。网页中包含了一个使用Fireworks制作的图像：茫茫的沙漠，在与天交际的地方出现一轮红日，一副夕阳美景。

Fireworks是Macromedia公司的专业图像软件，它是网络图形设计和处理的最好选择之一，使用Fireworks来创建、编辑、处理网页图片与网页动画，为网页中增加互动性，可以在专业环境中优化图像。Fireworks是编辑矢量和位图的综合工具，使用该软件可以轻松地输出带有HTML和JavaScript并适应使用要求的HTML文件。

3.5“日落奇山”网页

图3-5-1“日落奇山”网页的显示效果3.5“日落奇山”网页

3.5.1插入Shockwave影片Shockwave影片是Macromedia公司的Director软件创建的，插入它的方法如下。（1）单击“插入”（常用）栏中“媒体”快捷菜单中的“Shockwave”按钮，调出“选择文件”对话框。利用该对话框可以调入Shockwave影片文件（扩展名为“.dcr”）（2）插入Shockwave影片文件后，网页文档窗口内会显示一个Shockwave影片图标。用鼠标拖曳Shockwave影片图标右下角的黑色控制柄，可调整它的大小。（3）图3-5-2给出了Shockwave影片对象的“属性”栏，其中各选项的作用与前面所述基本一样。单击“播放”按钮可播放Shockwave影片。单击“参数”按钮可调出“参数”对话框，利用该对话框可以定义Shockwave影片的参数，用于传递给Shockwave影片。

3.5“日落奇山”网页

图3-5-2Shockwave影片对象的“属性”栏3.5“日落奇山”网页

3.5.2插入FireworksHTML（1）单击“插入”（常用）栏“图像”快捷菜单中的“FireworksHTML”按钮，调出“插入FireworksHTML”对话框，如图3-5-3所示。

图3-5-3“插入FireworksHTML”对话框3.5“日落奇山”网页

（2）在“FireworksHTML文件”文本框内输入Fireworks文件目录与文件名或单击“浏览”按钮，在弹出的“选择FireworksHTML文件”对话框中选择Fireworks生成的HTML格式的文件，再单击“确定”按钮，即可插入Fireworks图像或动画。（3）FireworksHTML对象的“属性”栏如图3-5-4所示。由该图可以看出，该属性栏与图像的“属性”栏基本一样。

图3-5-4FireworksHTML对象的“属性”栏3.6“风景幻灯”网页

“风景幻灯”网页的显示效果如图3-6-1所示。网页中包含一个Java程序，每隔一段时间网页中的图像进行一次切换，所有图像显示完后进行循环显示。图像切换时网页的显示效果如图3-6-2所示。

图3-6-1

“风景幻灯”网页的显示效果

图3-6-2

“风景图像”网页中图像的切换效果

3.6“风景幻灯”网页

3.6.1JavaApplet概述Java是一个由Sun公司开发而成的新一代编程语言。使用该程序可在各式各样不同种机器、不同种操作平台的网络环境中开发软件。无论使用的是什么浏览器，什么计算机，什么操作系统，只要浏览器能够支持Java，就可以看到生动的主页。Java正在逐步成为Internet应用的主要开发语言。它彻底改变了应用软件的开发模式，带来了一次新的技术革命，为迅速发展的信息世界增添了新的活力。随着Internet的普及和Java的诞生，大型的应用软件开始向小型化发展，由众多在Internet上的小应用程序JavaApplet来完成信息的处理与传递。JavaApplet可以加速应用软件的小型化、网络化趋势。

3.6“风景幻灯”网页

JavaApplet程序分为两类：Java小型程序（Applet）和Java应用程序（Application），它们是有区别的。JavaApplet嵌入在网页内，作为网页的组成部分被下载，并能运行在有Java虚机器的浏览器中。而另一个Java应用程序运行于Web浏览器之外，没有Applet运行时的诸多限制。另外，两者在程序设计上的最大区别在于：JavaApplet没有主程序，而Java应用程序一定要有主程序。在Java中每个程序都是由Applet的子类来实现。开发人员自定义的Applet通过重载Applet的几个主要成员函数完成小应用程序的初始化、绘制和运行。3.6.2JavaApplet对象的“属性”栏JavaApplet对象的“属性”栏如图3-6-3所示，其中主要选项的作用如下。

3.6“风景幻灯”网页

图3-6-3JavaApplet对象的“属性”栏3.6“风景幻灯”网页

（1）“宽”和“高”文本框：用于设置JavaApplet程序在网页中的宽和高。（2）“代码”文本框与文件夹按钮：文本框用于输入JavaApplet程序文件的路径和名字；单击其后的文件夹按钮可选择JavaApplet文件。（3）“对齐”下拉列表框：用于设置JavaApplet程序的水平和垂直对齐方式。（4）“基址”文本框：用于输入JavaApplet程序文件的名称。（5）“替代”文本框与文件夹按钮：文本框用于输入JavaApplet替代的图像的目录和文件名；单击其后的文件夹按钮可选择图像文件。当网页中的JavaApplet程序不能显示时，该网页JavaApplet程序处的替代图像。（6）“垂直边距”和“水平边距”文本框：用于设置JavaApplet程序显示时的垂直和水平边距。

3.7“旋转的地球”网页

“旋转的地球”网页的显示效果如图3-7-1所示。在该网页中显示了一个不断旋转的透明地球，通过远处太阳光的照射，形成了一个个光晕。在“旋转的地球”网页中插入了ActiveX控件，如图3-7-2所示。ActiveX控件是Microsoft对浏览器的功能扩展，其作用与插件基本一样。所不同的是：如果浏览器不支持网页中的ActiveX控件，浏览器会自动安装所需的软件。如果浏览器不支持网页中的插件，则需要用户自己安装所需的软件。

图3-7-1

“旋转的地球”网页的显示效果

图3-7-2ActiveX控件图标的显示效果

3.7“旋转的地球”网页

3.7.1ActiveX控件“属性”栏中各选项的作用ActiveX控件“属性”栏的显示效果如图3-7-3所示，其中各选项的作用如下。

图3-7-3ActiveX控件“属性”栏的显示效果3.7“旋转的地球”网页

（1）“ActiveX”文本框：用于设置该控件的名称。（2）“宽”和“高”文本框：用于设置ActiveX控件在网页中显示的宽和高。（3）“ClassID”下拉列表框：它给出了3个类型代码，标明了ActiveX类型，其中一个用于Shockwave影片、一个用于Flash电影以及一个用于RealAudio。如果要使用其他控件，则需要自己输入相应的代码。选择不同类型代码后，“属性”栏会产生相应的变化。（4）“源文件”复选框：单击文件夹按钮，即可调出“选择Netscape的插入文件”对话框。利用该对话框可以选择要加载的文件。（5）“对齐”下拉列表框：用于设置ActiveX控件在网页中的对齐方式。（6）“水平边距”和“垂直边距”文本框：用于设置该控件与网页中其他对象的距离。（7）“基址”文本框：用于输入加载的ActiveX控件的URL。（8）“编号”文本框：用于输入ActiveX的ID参数。（9）“数据”文本框：用于输入加载的数据值。（10）“替代图像”文本框：当ActiveX控件不能正常显示时，该控件处替代的图像。

3.7“旋转的地球”网页

3.7.2插入插件插件可以是各种格式的音乐（MP3、MDID、WAV、AIF、ra、ram或RealAudio等）、Director的Shockwave影片、Authorware的Shockwave和Flash电影等。插入插件的方法如下。（1）单击“插入”（常用）栏“媒体”快捷菜单中的“插件”按钮，调出“选择文件”对话框。利用该对话框选择一个要插入的文件。（2）插入文件后，网页文档窗口内会显示一个插件图标。单击该插件图标后，可用鼠标拖曳插件图标的黑色控制柄来调整它的大小。其大小决定了浏览器窗口中显示的大小。（3）如果插入声音，可在浏览器中播放。同时，浏览器内会显示出一个播放器。如果要取消播放器，可将插件图标调至很小。

3.8“考试安排”网页

“考试安排”网页的显示效果如图3-8-1所示，在该网页中以表格的形式列出了各班的考试安排。在网页中插入表格，使网页的结构合理，内容清晰。

表格比较适合显示结构性比较强的内容，如值班表或课程表或考试安排表等。表格也是网页中经常使用的一个元件。图3-8-1“考试安排”网页的显示效果3.8“考试安排”网页

3.8.1在网页内插入表格将光标移到需要插入表格的位置，单击“插入”（常用）栏内的“表格”按钮，调出“表格”对话框，如图3-8-2所示。

图3-8-2“表格”对话框

图3-8-3制作的第一个表格3.8“考试安排”网页

1．“表格”对话框内各选项的作用（1）“行数”和“列数”文本框：用于输入表格的行数和列数。（2）“表格宽度”文本框：用于输入表格宽度值，其单位为像素或百分数。如果选择“百分比”，则表示表格占页面或它的母体容量宽度的百分比。（3）“边框粗细”文本框：用于输入表格边框的宽度数值，其单位为像素。当它的值为0时，表示没有表格线。（4）“单元格边距”文本框：输入的数值表示单元格之间两个相邻边框线（左与右、上和下边框线）间的距离。（5）“单元格间距”文本框：用于输入单元格内的内容与单元格边框间的空白数值，其单位为像素。这种空白存在于单元格内容的四周。（6）“页眉”栏：用于设置表格的页眉单元格。被设置为页眉的单元格，其中的字体将被设置成“居中”和“黑体”格式。

3.8“考试安排”网页

（7）“辅助功能”栏：“辅助功能”栏中各选项的作用如下。①“标题”文本框：用于输入表格的标题。②“对齐标题”列表框：用于设置标题与表格的位置关系，默认为表格的顶部。③“摘要”文本框：用于输入表格的摘要。在网页中插入的表格如图3-8-3所示。

图3-8-2“表格”对话框图3-8-3制作的第一个表格2．调整表格大小（1）调整整个表格的大小：单击表格的边框，选中该表格，此时表格右边、下边和右下角会出现3个方形的黑色控制柄。用鼠标拖曳控制柄，即可调整整个表格的大小。（2）调整表格中行或列的大小：将光标移到表格线处，当光标显示为双箭头横线或双箭头竖线时，拖曳鼠标，即可调整表格线的位置，从而调整表格行或列的大小。

3.8“考试安排”网页

3．表格和单元格标签（1）表格标签：选中表格后，在表格的下面用绿色显示出了表格的宽度，如图3-8-3所示。单击下边的三角按钮，调出“表格”快捷菜单。利用“表格”快捷菜单可以对表格进行选择表格、清除表格列的宽度、左侧插入列和右侧插入列等操作。（2）单元格标签：选中表格后，在表格标签的上面显示出了每一列单元格的标签。单击任意一个三角按钮，可以调出“单元格”快捷菜单，其操作方法与“表格”快捷菜单基本相同此处不再赘述。3.8.2选择表格（1）选择整个表格：单击表格的外边框，可选中整个表格，此时表格右边、下边和右下角会出现3个方形黑色控制柄。（2）选择多个表格单元格：按住Ctrl键的同时依次单击所有要选择的表格单元格即可。（3）选择表格的一行或一列单元格：将鼠标移到一行的最左边或移到一列的最上边，当光标显现为黑色箭头时单击鼠标，即可选中一行或一列。（4）选择表格的多行或多列单元格：按住Ctrl键的同时将鼠标依次移到要选择的各行或各列，当光标呈黑色箭头时单击鼠标，即可选中多行或多列。还可以将鼠标移到要选择的多行或多列的左侧，当光标呈黑色箭头时，拖曳鼠标也可选择多行或多列单元格。

3.8“考试安排”网页

3.8.2选择表格（1）选择整个表格：单击表格的外边框，可选中整个表格，此时表格右边、下边和右下角会出现3个方形黑色控制柄。（2）选择多个表格单元格：按住Ctrl键的同时依次单击所有要选择的表格单元格即可。（3）选择表格的一行或一列单元格：将鼠标移到一行的最左边或移到一列的最上边，当光标显现为黑色箭头时单击鼠标，即可选中一行或一列。（4）选择表格的多行或多列单元格：按住Ctrl键的同时将鼠标依次移到要选择的各行或各列，当光标呈黑色箭头时单击鼠标，即可选中多行或多列。还可以将鼠标移到要选择的多行或多列的左侧，当光标呈黑色箭头时，拖曳鼠标也可选择多行或多列单元格。

3.9调整“考试安排”网页

图3-8-1所示的“考试安排”网页，虽然能够显示相应的数据，但是表格的样式相对比较简单，不足以吸引浏览者，而且按照班级顺序排列的方式不便于查找。所以需对“考试安排”网页进行“排序表格”和“格式化表格”操作，调整后表格的显示效果如图3-9-1所示。

图3-9-1美化后的“考试安排”网页3.9调整“考试安排”网页

制作该网页需使用“排序表格”和“格式化表格”命令。“排序表格”命令可以对表格中的数据进行重新排序，即在不改变表格结构的情况下对表格内的数据进行重新排列。“格式化表格”命令可以对表格使用样式，为表格赋予新的颜色和字体属性。3.9.1“排序表格”对话框在Dreamweaver中执行“命令”→“排序表格”菜单命令，调出“排序表格”对话框，如图3-9-2所示。该对话框中各选项的含义如下。

图3-9-2“排序表格”对话框3.9调整“考试安排”网页

（1）“排序按”下拉列表框：选择对第几列排序。列号为“列1”、“列2”等。（2）“顺序”下拉列表框：在左边的下拉列表框内选择按字母或数字排序；在右边的下拉列表框内选择按升序或降序排序。字母排序不分大小写。（3）“再按”下拉列表框：按照“排序按”下拉列表框中的顺序排序时，如果有相同的数据，则按照该下拉列表框中的选择排序。该列表框的选项也是“列1”、“列2”等。它下边的“顺序”下拉列表框的作用与上边的“顺序”下拉列表框的作用相同。（4）“选项”栏：选中“排序包含第一行”复选框后，表格的第一行也参加排序，否则不参加排序。单击“应用”按钮可以完成排序，再单击该按钮还可以还原，单击“确定”按钮，即可完成排序。

3.9调整“考试安排”网页

3.9.2格式化表格Dreamweaver为制作各种表格提供了大量的预定义格式，使操作更方便。这些预定义的格式化表格可在“格式化表格”对话框中选定和修改。利用预定义的格式化表格，制作表格的方法如下。（1）在网页页面内制作一个行、列数目符合要求的一般表格，不用考虑它的颜色等。（2）执行“命令”→“格式化表格”菜单命令，调出“格式化表格”对话框，如图3-9-3所示。图3-9-3“格式化表格”对话框（3）在“格式化表格”对话框左上角的列表框内，选择一种格式化表格样式，同时其右边会显示出该样式的显示效果。（4）在“格式化表格”对话框中选择表格样式、表格背景颜色、文字风格和颜色等。①“行颜色”栏中的“第一种”用于设置首行颜色，“第二种”用于设置第二行颜色。“交错”下拉列表框用于确定各行颜色的变化规律。

3.9调整“考试安排”网页

②“第一行”栏中的“对齐”下拉列表框用于确定首行单元格内文字的排列方式，“文字样式”下拉列表框用于确定文字的风格，“背景色”栏用于设置首行的背景色，“文字颜色”栏用于设置文本的颜色。③“最左列”栏中的“对齐”下拉列表框用于确定左边列单元格内文字的排列方式，“文字样式”下拉列表框用于确定文字的风格。④“边框”文本框用于输入表格边框的宽度。选中“将所有属性套用至TD标注而不是TR标签”复选框后，可将所定义的全部属性赋予TD标记而不赋予TR标记。（5）单击“确定”按钮后，即可将该样式应用到所选的表格。

3.10“照相馆”网页

“照相馆”网页的显示效果如图3-10-1所示。在该网页中显示了一些非常漂亮的汽车照片，其中使用了表格对网页进行布局。使用表格来编排网页可使页面更紧凑、丰富多彩。

图3-10-1“照相馆”网页的显示效果3.10“照相馆”网页

3.10.1表格和单元格的“属性”栏1．表格的“属性”栏单击表格的外边框，选中整个表格，此时表格的“属性”栏如图3-10-2所示。表格的“属性”栏内各选项的作用如下。

图3-10-2“表格”属性栏3.10“照相馆”网页

（1）“表格Id”下拉列表框：用于输入表格的名称。（2）“行”和“列”文本框：用于输入表格的行数与列数。（3）“宽”和“高”文本框：用于输入表格的宽度与高度数。可利用其右边的下拉列表框来选择单位，其中的选项有“%”（百分数）和“像素”两种。（4）“填充”文本框：用于输入单元格内的内容与单元格边框间的空白数，单位为像素。（5）“间距”文本框：用于输入单元格之间两个相邻边框线间的距离。（6）“对齐”下拉列表框：该下拉列表框内有“默认”、“左对齐”、“居中对齐”和“右对齐”4个选项，用于设置对齐方式。（7）“边框”文本框：用于输入表格边框宽度，单位为像素。（8）“背景颜色”按钮与文本框：用于设置表格的背景色。（9）“背景图像”文本框与文件夹按钮：单击文件夹按钮，可调出“选择图像源”对话框，利用它可以给表格加背景图像。（10）“边框颜色”按钮与文本框：用于设置表格的边框线颜色。

（11）6个按钮：按钮用于清除行高，按钮用于清除列宽，按钮用于将表格宽度的单位转换为像素，按钮用于将表格宽度的单位改为百分比，按钮用于将表格高度的单位转换为像素，按钮用于将表格宽度的单位改为百分比。

3.10“照相馆”网页

（12）“类”列表框：用于设置表格的样式。2．单元格的“属性”栏选中单元格后，属性栏变为单元格的“属性”栏，如图3-10-3所示。在单元格的“属性”栏中，上半部分用来设置单元格内文本的属性，它与“文本”属性栏的选项基本相同。下半部分用来设置单元格的属性，各选项的作用如下。