HTML和中文Dreamweaver MX2004实用教程 第3章

1、 本章要点本章要点l3.1 “图书导读图书导读”网页网页 l3.2 再做再做“动画放映室动画放映室”网页网页 l3.3 “豆豆的收藏豆豆的收藏”网页网页 l3.4 “FLASH简介简介”网页网页 l3.5 “日落奇山日落奇山”网页网页 l3.6 “风景幻灯风景幻灯”网页网页 l3.7 “旋转的地球旋转的地球”网页网页 l3.8 “考试安排考试安排”网页网页 l3.9 调整调整“考试安排考试安排”网页网页 l3.10 “照相馆照相馆”网页网页l习题习题 3 “图书导读图书导读”网页的显示效果如图网页的显示效果如图3-1-1所示。在该网页中插入了一个导航所示。在该网页中插入了一个导航条，在导航条中

2、包含了条，在导航条中包含了7幅图像，当鼠标移到其中任意一幅图像上时，该图幅图像，当鼠标移到其中任意一幅图像上时，该图像变为像变为“单击进入单击进入”文字，如图文字，如图3-1-1所示。单击该图像按钮即可链接到相所示。单击该图像按钮即可链接到相应的网页。应的网页。 图3-1-1 “图书导读”网页的显示效果 3.1.1 “插入导航条插入导航条”对话框中各选项的含义对话框中各选项的含义导航条实际上是一组动态图像按钮，单击它后，可在浏览器中调出导航条实际上是一组动态图像按钮，单击它后，可在浏览器中调出HTML文件和其他文件（如图像）。单击文件和其他文件（如图像）。单击“插入插入”（常用）栏（常用）栏“

3、图像图像”快捷菜单快捷菜单中的中的“导航条导航条”按钮，调出按钮，调出“插入导航条插入导航条”对话框，如图对话框，如图3-1-2所示，其中所示，其中各选项的作用如下。各选项的作用如下。（1）“导航条元件导航条元件”列表框：给出导航条中各个动态图像按钮的名称（默列表框：给出导航条中各个动态图像按钮的名称（默认为图像的名称）。单击按钮，可以增加动态图像按钮；选中动态图像按认为图像的名称）。单击按钮，可以增加动态图像按钮；选中动态图像按钮名称，再单击按钮，可删除该按钮；选中动态图像按钮名称，再单击按钮名称，再单击按钮，可删除该按钮；选中动态图像按钮名称，再单击按钮或按钮，可改变动态图像按钮在导航条中

4、的位置。钮或按钮，可改变动态图像按钮在导航条中的位置。（2）“项目名称项目名称”文本框：用来输入各动态图像按钮的名称。文本框：用来输入各动态图像按钮的名称。（3）4个文本框与个文本框与“浏览浏览”按钮：用于定义鼠标按钮：用于定义鼠标4种状态时的图像。种状态时的图像。“状态状态图像图像”是鼠标左键抬起状态时的图像，是鼠标左键抬起状态时的图像，“鼠标经过图像鼠标经过图像”是光标移到图像是光标移到图像之上时的图像，之上时的图像，“按下图像按下图像”是鼠标按下时的图像，是鼠标按下时的图像，“按下时鼠标经过图按下时鼠标经过图像像”是鼠标按下并经过图像时的图像。是鼠标按下并经过图像时的图像。 图3-1-2

5、 “插入导航条”对话框 （4）“按下时，前往的按下时，前往的URL”栏：用于输入与动态按钮链接的文件目录栏：用于输入与动态按钮链接的文件目录和名字，单击和名字，单击“浏览浏览”按钮后可选择链接的文件。在其右边的列表框内可按钮后可选择链接的文件。在其右边的列表框内可选择显示链接的页面的框架名称。选择显示链接的页面的框架名称。（5）“选项选项”栏：栏：“预先载入图像预先载入图像”复选框用于确定是否要预先载入各个复选框用于确定是否要预先载入各个图像；页面载入时就显示图像；页面载入时就显示“鼠标按下图像鼠标按下图像”复选框用于确定是否要在页面复选框用于确定是否要在页面载入的初始状态时显示鼠标按下状态的

6、图像。载入的初始状态时显示鼠标按下状态的图像。（6）“插入插入”下拉列表框：用于选择按钮放置的方式。选择下拉列表框：用于选择按钮放置的方式。选择“水平水平”列表列表项，表示水平放置；选择项，表示水平放置；选择“垂直垂直”列表项，表示垂直放置。列表项，表示垂直放置。（7）“使用表格使用表格”复选框：选中该复选框后，表示使用表格将动态按钮框复选框：选中该复选框后，表示使用表格将动态按钮框起来。起来。3.1.2 插入水平线插入水平线在页面内可以利用水平分割线将标题与文字或图像等对象分割，使页面的在页面内可以利用水平分割线将标题与文字或图像等对象分割，使页面的信息分布清晰。当然用线条图像来分割，效果会

7、更好些，但会使文件变大。信息分布清晰。当然用线条图像来分割，效果会更好些，但会使文件变大。加入水平线的方法如下所述。加入水平线的方法如下所述。（1）单击）单击“插入插入”（HTML）栏中的）栏中的“水平线水平线”按钮，即可在光标所在的按钮，即可在光标所在的行插入一条水平线，并调出水平线行插入一条水平线，并调出水平线“属性属性”面板，如图面板，如图3-1-3所示。所示。 图3-1-3 水平线的“属性”栏 （2）在水平线）在水平线“属性属性”面板中的面板中的“宽宽”文本框内输入水平线的水平长度文本框内输入水平线的水平长度数值，在数值，在“高高”文本框内输入水平线的垂直宽度数值，单位有像素和百分文本

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

9、单，此处不再赘述。 在在Dreamweaver中制作的中制作的“动画放映室动画放映室”网页的显示效果和在网页的显示效果和在HTML文件文件中输入中输入HTML代码的方法制作的代码的方法制作的“动画放映室动画放映室”网页基本相同。在网页基本相同。在Dreamweaver的可视化界面中插入的可视化界面中插入Flash动画后即可查看动画的显示效果。动画后即可查看动画的显示效果。在在Dreamweaver中制作的中制作的“动画放映室动画放映室”网页的显示效果如图网页的显示效果如图3-2-1所示。所示。 图3-2-1 “动画放映室”网页的显示效果 Flash是是Macromedia公司开发的另一个著名产

10、品，它是一个优秀的矢量绘公司开发的另一个著名产品，它是一个优秀的矢量绘图和动画制作软件。图和动画制作软件。Flash可以制作出一种扩展名为可以制作出一种扩展名为.swf的动画文件，这种的动画文件，这种文件可以插到文件可以插到HTML里，也可以单独成为网页。里，也可以单独成为网页。Flash不但可以制作出一般不但可以制作出一般的动画，还可以制作出带有背景声音，具有较强的交互性能的动画。的动画，还可以制作出带有背景声音，具有较强的交互性能的动画。Flash制作的这种动画可以在所有安装了制作的这种动画可以在所有安装了Shockwave Flash插件的浏览器中播插件的浏览器中播放，这也是它之所以快速

11、广泛流行的一个重要原因。另外，放，这也是它之所以快速广泛流行的一个重要原因。另外，1998年年Macromedia公司公布了公司公布了Flash动画格式文件的全部代码，方便了众多软件开动画格式文件的全部代码，方便了众多软件开发公司和其设计人员用它开发相关产品，从而加快了发公司和其设计人员用它开发相关产品，从而加快了Flash的推广与应用。的推广与应用。各个公司和个人推出的可以制作各个公司和个人推出的可以制作.swf文件的软件越来越多。文件的软件越来越多。3.2.1 Flash对象对象“属性属性”栏中各选项的含义栏中各选项的含义图图3-2-2所示为所示为Flash对象对象“属性属性”栏的显示效果

12、。栏的显示效果。“属性属性”栏中各选项的作栏中各选项的作用如下。用如下。 （1）“Flash”文本框：用于输入文本框：用于输入Flash影片对象的名字。该名字可以在脚影片对象的名字。该名字可以在脚本语言中使用。本语言中使用。（2）“宽宽”与与“高高”文本框：用于输入文本框：用于输入Flash影片对象的宽与高。影片对象的宽与高。（3）“文件文件”文本框与文件夹按钮：用于选择文本框与文件夹按钮：用于选择SWF格式的格式的Flash影片文件。影片文件。（4）“编辑编辑”按钮：单击该按钮，可调出按钮：单击该按钮，可调出Flash MX 2004，并对，并对Flash文件文件进行编辑。进行编辑。（5）“

13、重设大小重设大小”按钮：单击该按钮，可使按钮：单击该按钮，可使Flash电影恢复原大小。电影恢复原大小。（6）“循环循环”复选框：选中该复选框后，可循环播放。复选框：选中该复选框后，可循环播放。 图3-2-2 Flash对象的“属性”栏 （7）“自动播放自动播放”复选框：选中该复选框后，加载网页时，动画可以自复选框：选中该复选框后，加载网页时，动画可以自动播放。动播放。（8）“垂直边距垂直边距”文本框：用于设置文本框：用于设置Flash影片与边框间垂直方向的空白量。影片与边框间垂直方向的空白量。（9）“水平边距水平边距”文本框：用于设置文本框：用于设置Flash影片与边框间水平方向的空白量。影

14、片与边框间水平方向的空白量。（10）“品质品质”下拉列表框：用于设置动画的质量。下拉列表框：用于设置动画的质量。（11）“比例比例”下拉列表框：用于选择缩放参数。下拉列表框：用于选择缩放参数。（12）“对齐对齐”下拉列表框：用于设置下拉列表框：用于设置Flash影片的对齐方式。影片的对齐方式。（13）“背景颜色背景颜色”文本框与按钮：用于设置文本框与按钮：用于设置Flash影片的背景颜色。影片的背景颜色。（14）“播放播放”按钮：单击该按钮，可播放按钮：单击该按钮，可播放Flash影片。影片。（15）“参数参数”按钮：单击该按钮，可调出一个对话框，在该对话框中可按钮：单击该按钮，可调出一个对话

15、框，在该对话框中可以输入附加参数，用于传递给以输入附加参数，用于传递给Flash或或Shockwave影片。影片。 3.2.2 设置Flash影片的属性执行执行“窗口窗口”“标签检查器标签检查器”菜单命令，可以调出菜单命令，可以调出“标签标签”面板，如图面板，如图3-2-3所示。所示。图3-2-3 “标签”面板在该面板中可以设置在该面板中可以设置Flash影片的属性。该对话框中将影片的属性。该对话框中将Flash影片的属性分为影片的属性分为了了“常规常规”、“内容内容”、“外观外观”、“CSS/辅助功能辅助功能”、“语言语言”和和“未未分类分类”6大类。在各个类别中又包含了一些具体的属性内容。

16、大类。在各个类别中又包含了一些具体的属性内容。单击任意一个属性的名称，即可设置或改变该属性。单击任意一个属性的名称，即可设置或改变该属性。 图3-2-3 “标签”面板 “豆豆的收藏豆豆的收藏”网页的显示效果如图网页的显示效果如图3-3-1所示。在该网页中插入了一个图所示。在该网页中插入了一个图像查看器，网页加载时，页面中显示像查看器，网页加载时，页面中显示“图像查看器图像查看器”中的第一幅图像，单中的第一幅图像，单击按钮或按钮，即可显示上一幅或下一幅图像。单击按钮，即可自动播放击按钮或按钮，即可显示上一幅或下一幅图像。单击按钮，即可自动播放所有图像。所有图像。“图像查看器图像查看器”是是Dre

17、amweaver MX 2004新增加的一个功能。利用新增加的一个功能。利用“图像图像查看器查看器”，可以导入图像，创建一个，可以导入图像，创建一个Flash格式的图像浏览器。在浏览器中格式的图像浏览器。在浏览器中可以依次浏览导入的图像，在图像切换时使用随机的动态切换效果，如图可以依次浏览导入的图像，在图像切换时使用随机的动态切换效果，如图3-3-2所示。所示。 图图3-3-1 “豆豆的收藏豆豆的收藏”网页的显示效果网页的显示效果 图图3-3-2 图像的动态切换效果图像的动态切换效果 3.3.1 在网页中插入图像查看器在网页中插入图像查看器（1）将光标移到要插入）将光标移到要插入“图像查看器图

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

19、框，如图对话框，如图3-3-4所示。所示。 图3-3-3 “标签”面板 图3-3-4 “编辑imageURLs数组”对话框 （3）选中）选中img1.jpg项目，单击后面的按钮，调出项目，单击后面的按钮，调出“选择文件选择文件”对话框，对话框，选择要插入的图像后单击选择要插入的图像后单击“确定确定”按钮，插入图像。利用同样方法插入其按钮，插入图像。利用同样方法插入其他图像。他图像。（4）单击按钮可插入一个新项目，单击按钮可删除选中的项目。单击）单击按钮可插入一个新项目，单击按钮可删除选中的项目。单击“确确定定”按钮，完成按钮，完成“图像查看器图像查看器”的设置。的设置。3.3.2 “标签标签”

20、面板中各选项的含义面板中各选项的含义“标签标签”面板，如图面板，如图3-3-3所示，所示，“标签标签”面板中各选项的含义如下所述。面板中各选项的含义如下所述。（1）Bgcolor属性：用于设置属性：用于设置“图像检查器图像检查器”的背景颜色。的背景颜色。（2）Captioncolor属性：用于设置属性：用于设置“图像检查器图像检查器”说明文字的颜色。说明文字的颜色。（3）CaptionFont属性：用于设置属性：用于设置“图像检查器图像检查器”说明文字的字体。说明文字的字体。（4）CaptionSize属性：用于设置属性：用于设置“图像检查器图像检查器”说明文字的大小。说明文字的大小。（5）F

21、rameColor属性：用于设置属性：用于设置“图像检查器图像检查器”边框的颜色。边框的颜色。（6）FrameShow属性：该属性取值为属性：该属性取值为“是是”或者或者“否否”，设置是否显示边，设置是否显示边框。框。（7）FrameThickness属性：用于设置属性：用于设置“图像检查器图像检查器”边框的宽度。边框的宽度。（8）ImageCaptions属性：用于设置图像的标题。属性：用于设置图像的标题。 （9）ImageLinks属性：用于设置图像的连接。属性：用于设置图像的连接。（10）ImageLinkTarget属性：打开连接的窗口。属性：打开连接的窗口。（11）ImageURLs

22、属性：在属性：在“图像检查器图像检查器”检查器内插入图像。检查器内插入图像。（12）ShowConteols属性：是否显示控制器，取决于该属性的取值为属性：是否显示控制器，取决于该属性的取值为“是是”或者或者“否否”。（13）FlideAutoPlay属性：初始状态时是否自动播放图像，该属性的取值属性：初始状态时是否自动播放图像，该属性的取值范围为范围为“是是”或者或者“否否”。（14）SlideLDelay属性：切换图像间隔的时间。属性：切换图像间隔的时间。（15）SlideLoop属性：播放图像时是否循环。图属性：播放图像时是否循环。图3-3-5 “编辑编辑ImageLinks数数组组”对

23、话框对话框（16）Title属性：用于设置属性：用于设置“图像检查器图像检查器”的标题名称。的标题名称。（17）TitleColor属性：用于设置属性：用于设置“图像检查器图像检查器”标题名称的颜色。标题名称的颜色。（18）TitleFont属性：用于设置属性：用于设置“图像检查器图像检查器”标题名称的字体。标题名称的字体。（19）TitleSize属性：用于设置属性：用于设置“图像检查器图像检查器”标题名称的字体大小。标题名称的字体大小。（20）TransitionsType属性：用于设置图像切换时的效果。此处可以设置属性：用于设置图像切换时的效果。此处可以设置包含包含None（无切换效果）

24、和（无切换效果）和Randam（随机切换效果）在内的（随机切换效果）在内的12种切换效果。种切换效果。 在在“FLASH简介简介”网页中介绍了网页中介绍了Flash MX Professional 2004的基本功能。的基本功能。在该网页中使用了在该网页中使用了Flash按钮和按钮和Flash文字对象。在浏览器中打开该网页后，文字对象。在浏览器中打开该网页后，当鼠标移到当鼠标移到“插入插入FLASH动画动画”按钮上时的显示效果如图按钮上时的显示效果如图3-4-1所示，当鼠所示，当鼠标移到介绍文字上面时的显示效果如图标移到介绍文字上面时的显示效果如图3-4-2所示。所示。 图图3-4-1 “FL

25、ASH简介简介”网页的显示效果网页的显示效果 图图3-4-2 当鼠标移到当鼠标移到Flash文字上面时的显示效果文字上面时的显示效果 3.4.1 “插入插入Flash按钮按钮”对话框对话框单击单击“插入插入”（常用）栏（常用）栏“媒体媒体”快捷菜单中的快捷菜单中的“Flash按钮按钮”按钮，调出按钮，调出“插入插入Flash按钮按钮”对话框，如图对话框，如图3-4-3所示，其中各选项的含义如下。所示，其中各选项的含义如下。 图3-4-3 “插入Flash按钮”对话框 （1）“范例范例”显示框：用于显示所选的显示框：用于显示所选的“Flsah按钮按钮”的效果，该显示效果的效果，该显示效果和在浏览

26、器中的显示效果相同，并且可以用鼠标测试和在浏览器中的显示效果相同，并且可以用鼠标测试“单击单击”时的显示效时的显示效果。果。（2）“样式样式”列表框：在该列表框中列出所有可以使用的列表框：在该列表框中列出所有可以使用的Flash按钮的样式，按钮的样式，可以从中选择相应的样式进行编辑。可以从中选择相应的样式进行编辑。（3）“字体字体”下拉列表框：用于选择要显示文字的字体。下拉列表框：用于选择要显示文字的字体。（4）“大小大小”文本框：用于设置显示文本的大小。文本框：用于设置显示文本的大小。（5）“链接链接”文本框：在该文本框中输入需要链接的文件的目录和文件名，文本框：在该文本框中输入需要链接的文

27、件的目录和文件名，也可以单击也可以单击“浏览浏览”按钮，在调出的按钮，在调出的“选择文件选择文件”对话框中选择需要链接对话框中选择需要链接的文件，设置链接。的文件，设置链接。（6）“目标目标”下拉列表框：用于设置链接的网页的打开方式，其中各选项下拉列表框：用于设置链接的网页的打开方式，其中各选项作用如下。作用如下。_blank：在一个新的浏览器窗口中打开链接的文档。：在一个新的浏览器窗口中打开链接的文档。_parent：在框架的父框架或父窗口打开链接的文档。：在框架的父框架或父窗口打开链接的文档。_self：默认打开方式，将链接的文档载入链接所在的同一框架或窗口。：默认打开方式，将链接的文档载

28、入链接所在的同一框架或窗口。_top：将链接的文档载入整个浏览器窗口，从而删除所有框架。：将链接的文档载入整个浏览器窗口，从而删除所有框架。 （7）“背景色背景色”按钮：用于设置按钮：用于设置Flash按钮的背景颜色。按钮的背景颜色。（8）“另存为另存为”文本框：用于输入要保存的目录及文件名，或者单击文本框：用于输入要保存的目录及文件名，或者单击“浏览浏览”按按钮，调出钮，调出“选择文件选择文件”对话框，利用该对话框选择要保存的目录和文件名，默认目对话框，利用该对话框选择要保存的目录和文件名，默认目录为网页文档所在的目录。图录为网页文档所在的目录。图3-4-4 “插入插入Flash文本文本”对

29、话框对话框3.4.2 “插入插入Flash文本文本”对话框对话框单击单击“插入插入”（常用）栏（常用）栏“媒体媒体”快捷菜单中的快捷菜单中的“Flash文本文本”按钮，调出按钮，调出“插入插入Flash文本文本”对话框，如图对话框，如图3-4-4所示，其中各选项的含义如下所示。所示，其中各选项的含义如下所示。（1）“字体字体”下拉列表框：用于选择要显示文字的字体。下拉列表框：用于选择要显示文字的字体。（2）“大小大小”文本框：用于设置显示文本的大小。文本框：用于设置显示文本的大小。（3）“样式样式”按钮栏：用于设置文字的样式及对齐方式。按钮栏：用于设置文字的样式及对齐方式。（4）“颜色颜色”栏

30、：用于设置栏：用于设置Flash文字的颜色。文字的颜色。（5）“转滚颜色转滚颜色”栏：用于设置当鼠标经过栏：用于设置当鼠标经过FLASH文本时的颜色。文本时的颜色。（6）“文本文本”文本框：输入需要显示的文本。文本框：输入需要显示的文本。（7）“显示字体显示字体”复选框：在复选框：在“文本文本”文本框中显示文本使用的字体样式。文本框中显示文本使用的字体样式。（8）“链接链接”栏：在文本框中输入需要链接的文件地址或者单击栏：在文本框中输入需要链接的文件地址或者单击“浏览浏览”按钮，按钮，在在“选择文件选择文件”对话框中选择需要链接的文件地址，设置文字链接。对话框中选择需要链接的文件地址，设置文字

31、链接。（9）“目标目标”下拉列表框：用于设置链接网页的打开方式。下拉列表框：用于设置链接网页的打开方式。（10）“背景色背景色”栏：用于设置栏：用于设置Flash文字区域的背景颜色。文字区域的背景颜色。 （11）“另存为另存为”文本框：在该文本框中输入要保存到的目录及文件名，文本框：在该文本框中输入要保存到的目录及文件名，或者单击或者单击“浏览浏览”按钮，在按钮，在“选择文件选择文件”对话框中设置要保存的路径和文对话框中设置要保存的路径和文件名，默认位置为网页文档所在的目录下。件名，默认位置为网页文档所在的目录下。 图3-4-4 “插入Flash文本”对话框 “日落奇山日落奇山”网页在浏览器中

32、的显示效果如图网页在浏览器中的显示效果如图3-5-1所示。网页中包含了一所示。网页中包含了一个使用个使用Fireworks制作的图像：茫茫的沙漠，在与天交际的地方出现一轮红制作的图像：茫茫的沙漠，在与天交际的地方出现一轮红日，一副夕阳美景。日，一副夕阳美景。 Fireworks是是Macromedia公司的专业图像软件，它是网络图形设计和处理的公司的专业图像软件，它是网络图形设计和处理的最好选择之一，使用最好选择之一，使用Fireworks来创建、编辑、处理网页图片与网页动画，来创建、编辑、处理网页图片与网页动画，为网页中增加互动性，可以在专业环境中优化图像。为网页中增加互动性，可以在专业环境

33、中优化图像。Fireworks是编辑矢量是编辑矢量和位图的综合工具，使用该软件可以轻松地输出带有和位图的综合工具，使用该软件可以轻松地输出带有HTML和和JavaScript并并适应使用要求的适应使用要求的HTML文件。文件。 图3-5-1 “日落奇山”网页的显示效果 3.5.1 插入插入Shockwave影片影片Shockwave影片是影片是Macromedia公司的公司的Director软件创建的，插入它的方法如软件创建的，插入它的方法如下。下。（1）单击）单击“插入插入”（常用）栏中（常用）栏中“媒体媒体”快捷菜单中的快捷菜单中的“Shockwave”按钮，按钮，调出调出“选择文件选择文

34、件”对话框。利用该对话框可以调入对话框。利用该对话框可以调入Shockwave影片文件（扩影片文件（扩展名为展名为“.dcr”）（2）插入）插入Shockwave影片文件后，网页文档窗口内会显示一个影片文件后，网页文档窗口内会显示一个Shockwave影片图标。用鼠标拖曳影片图标。用鼠标拖曳Shockwave影片图标右下角的黑色控制柄，可调整它影片图标右下角的黑色控制柄，可调整它的大小。的大小。（3）图）图3-5-2给出了给出了Shockwave影片对象的影片对象的“属性属性”栏，其中各选项的作用栏，其中各选项的作用与前面所述基本一样。单击与前面所述基本一样。单击“播放播放”按钮可播放按钮可播

35、放Shockwave影片。单击影片。单击“参参数数”按钮可调出按钮可调出“参数参数”对话框，利用该对话框可以定义对话框，利用该对话框可以定义Shockwave影片的影片的参数，用于传递给参数，用于传递给Shockwave影片。影片。 图3-5-2 Shockwave影片对象的 “属性”栏 3.5.2 插入插入Fireworks HTML（1）单击）单击“插入插入”（常用）栏（常用）栏“图像图像”快捷菜单中的快捷菜单中的“Fireworks HTML”按钮，调出按钮，调出“插入插入Fireworks HTML”对话框，如图对话框，如图3-5-3所示。所示。 图3-5-3 “插入Fireworks

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

37、一样。栏基本一样。 图3-5-4 Fireworks HTML对象的“属性”栏 “风景幻灯风景幻灯”网页的显示效果如图网页的显示效果如图3-6-1所示。网页中包含一个所示。网页中包含一个Java程序，程序，每隔一段时间网页中的图像进行一次切换，所有图像显示完后进行循环显每隔一段时间网页中的图像进行一次切换，所有图像显示完后进行循环显示。图像切换时网页的显示效果如图示。图像切换时网页的显示效果如图3-6-2所示。所示。 图3-6-1 “风景幻灯”网页的显示效果 图3-6-2 “风景图像”网页中图像的切换效果 3.6.1 Java Applet概述概述Java是一个由是一个由Sun公司开发而成的新

38、一代编程语言。使用该程序可在各式各公司开发而成的新一代编程语言。使用该程序可在各式各样不同种机器、不同种操作平台的网络环境中开发软件。无论使用的是什样不同种机器、不同种操作平台的网络环境中开发软件。无论使用的是什么浏览器，什么计算机，什么操作系统，只要浏览器能够支持么浏览器，什么计算机，什么操作系统，只要浏览器能够支持Java，就可，就可以看到生动的主页。以看到生动的主页。Java正在逐步成为正在逐步成为Internet应用的主要开发语言。它彻应用的主要开发语言。它彻底改变了应用软件的开发模式，带来了一次新的技术革命，为迅速发展的底改变了应用软件的开发模式，带来了一次新的技术革命，为迅速发展的

39、信息世界增添了新的活力。信息世界增添了新的活力。随着随着Internet的普及和的普及和Java的诞生，大型的应用软件开始向小型化发展，由的诞生，大型的应用软件开始向小型化发展，由众多在众多在Internet上的小应用程序上的小应用程序Java Applet来完成信息的处理与传递。来完成信息的处理与传递。Java Applet可以加速应用软件的小型化、网络化趋势。可以加速应用软件的小型化、网络化趋势。 Java Applet程序分为两类：程序分为两类：Java小型程序（小型程序（Applet）和）和Java应用程序应用程序（Application），它们是有区别的。），它们是有区别的。Java

40、 Applet嵌入在网页内，作为网页嵌入在网页内，作为网页的组成部分被下载，并能运行在有的组成部分被下载，并能运行在有Java虚机器的浏览器中。而另一个虚机器的浏览器中。而另一个Java应用程序运行于应用程序运行于Web浏览器之外，没有浏览器之外，没有Applet运行时的诸多限制。另外，两运行时的诸多限制。另外，两者在程序设计上的最大区别在于：者在程序设计上的最大区别在于：Java Applet没有主程序，而没有主程序，而Java应用程应用程序一定要有主程序。在序一定要有主程序。在Java中每个程序都是由中每个程序都是由Applet的子类来实现。开发的子类来实现。开发人员自定义的人员自定义的A

41、pplet通过重载通过重载Applet的几个主要成员函数完成小应用程序的的几个主要成员函数完成小应用程序的初始化、绘制和运行。初始化、绘制和运行。3.6.2 Java Applet对象的对象的“属性属性”栏栏Java Applet对象的对象的“属性属性”栏如图栏如图3-6-3所示，其中主要选项的作用如下。所示，其中主要选项的作用如下。 图3-6-3 Java Applet对象的“属性”栏（1）“宽”和“高”文本框：用于设置Java Applet程序在网页中的宽和高。（2）“代码”文本框与文件夹按钮：文本框用于输入Java Applet程序文件的路径和名字；单击其后的文件夹按钮可选择Java A

42、pplet文件。（3）“对齐”下拉列表框：用于设置Java Applet程序的水平和垂直对齐方式。（4）“基址”文本框：用于输入Java Applet程序文件的名称。（5）“替代”文本框与文件夹按钮：文本框用于输入Java Applet替代的图像的目录和文件名；单击其后的文件夹按钮可选择图像文件。当网页中的Java Applet程序不能显示时，该网页Java Applet程序处的替代图像。（6）“垂直边距”和“水平边距”文本框：用于设置Java Applet程序显示时的垂直和水平边距。 “旋转的地球旋转的地球”网页的显示效果如图网页的显示效果如图3-7-1所示。在该网页中显示了一个不所示。在该

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

44、网页中的插件，则需要用户自己安装所需的软件。 图图3-7-1 “旋转的地球旋转的地球”网页的显示效果网页的显示效果 图图3-7-2 ActiveX控件图标的显示效果控件图标的显示效果 3.7.1 ActiveX控件控件“属性属性”栏中各选项的作用栏中各选项的作用ActiveX控件“属性”栏的显示效果如图3-7-3所示，其中各选项的作用如下。 图3-7-3 ActiveX控件“属性”栏的显示效果 （1）“ActiveX”文本框：用于设置该控件的名称。文本框：用于设置该控件的名称。（2）“宽宽”和和“高高”文本框：用于设置文本框：用于设置ActiveX控件在网页中显示的宽和控件在网页中显示的宽和高

45、。高。（3）“ClassID”下拉列表框：它给出了下拉列表框：它给出了3个类型代码，标明了个类型代码，标明了ActiveX类型，类型，其中一个用于其中一个用于Shockwave影片、一个用于影片、一个用于Flash电影以及一个用于电影以及一个用于Real Audio。如果要使用其他控件，则需要自己输入相应的代码。选择不同类型代码后，如果要使用其他控件，则需要自己输入相应的代码。选择不同类型代码后，“属性属性”栏会产生相应的变化。栏会产生相应的变化。（4）“源文件源文件”复选框：单击文件夹按钮，即可调出复选框：单击文件夹按钮，即可调出“选择选择Netscape的插的插入文件入文件”对话框。利用该

46、对话框可以选择要加载的文件。对话框。利用该对话框可以选择要加载的文件。（5）“对齐对齐”下拉列表框：用于设置下拉列表框：用于设置ActiveX控件在网页中的对齐方式。控件在网页中的对齐方式。（6）“水平边距水平边距”和和“垂直边距垂直边距”文本框：用于设置该控件与网页中其他文本框：用于设置该控件与网页中其他对象的距离。对象的距离。（7）“基址基址”文本框：用于输入加载的文本框：用于输入加载的ActiveX控件的控件的URL。（8）“编号编号”文本框：用于输入文本框：用于输入ActiveX的的ID参数。参数。（9）“数据数据”文本框：用于输入加载的数据值。文本框：用于输入加载的数据值。（10）“

47、替代图像替代图像”文本框：当文本框：当ActiveX控件不能正常显示时，该控件处替控件不能正常显示时，该控件处替代的图像。代的图像。 3.7.2 插入插件插入插件插件可以是各种格式的音乐（插件可以是各种格式的音乐（MP3、MDID、WAV、AIF、ra、ram或或Real Audio等）、等）、Director的的Shockwave影片、影片、Authorware的的Shockwave和和Flash电影等。插入插件的方法如下。电影等。插入插件的方法如下。（1）单击）单击“插入插入”（常用）栏（常用）栏“媒体媒体”快捷菜单中的快捷菜单中的“插件插件”按钮，调出按钮，调出“选择文件选择文件”对话框

48、。利用该对话框选择一个要插入的文件。对话框。利用该对话框选择一个要插入的文件。（2）插入文件后，网页文档窗口内会显示一个插件图标。单击该插件图标）插入文件后，网页文档窗口内会显示一个插件图标。单击该插件图标后，可用鼠标拖曳插件图标的黑色控制柄来调整它的大小。其大小决定了后，可用鼠标拖曳插件图标的黑色控制柄来调整它的大小。其大小决定了浏览器窗口中显示的大小。浏览器窗口中显示的大小。（3）如果插入声音，可在浏览器中播放。同时，浏览器内会显示出一个播）如果插入声音，可在浏览器中播放。同时，浏览器内会显示出一个播放器。如果要取消播放器，可将插件图标调至很小。放器。如果要取消播放器，可将插件图标调至很小

49、。 “考试安排”网页的显示效果如图3-8-1所示，在该网页中以表格的形式列出了各班的考试安排。在网页中插入表格，使网页的结构合理，内容清晰。 表格比较适合显示结构性比较强的内容，如值班表或课程表或考试安排表等。表格也是网页中经常使用的一个元件。 图3-8-1 “考试安排”网页的显示效果 3.8.1 在网页内插入表格在网页内插入表格将光标移到需要插入表格的位置，单击将光标移到需要插入表格的位置，单击“插入插入”（常用）栏内的（常用）栏内的“表格表格”按钮，调出按钮，调出“表格表格”对话框，如图对话框，如图3-8-2所示。所示。 图3-8-2 “表格”对话框 图3-8-3 制作的第一个表格 1“表

50、格”对话框内各选项的作用（1）“行数行数”和和“列数列数”文本框：用于输入表格的行数和列数。文本框：用于输入表格的行数和列数。（2）“表格宽度表格宽度”文本框：用于输入表格宽度值，其单位为像素或百分数。文本框：用于输入表格宽度值，其单位为像素或百分数。如果选择如果选择“百分比百分比”，则表示表格占页面或它的母体容量宽度的百分比。，则表示表格占页面或它的母体容量宽度的百分比。（3）“边框粗细边框粗细”文本框：用于输入表格边框的宽度数值，其单位为像素。文本框：用于输入表格边框的宽度数值，其单位为像素。当它的值为当它的值为0时，表示没有表格线。时，表示没有表格线。（4）“单元格边距单元格边距”文本框

51、：输入的数值表示单元格之间两个相邻边框线文本框：输入的数值表示单元格之间两个相邻边框线（左与右、上和下边框线）间的距离。（左与右、上和下边框线）间的距离。（5）“单元格间距单元格间距”文本框：用于输入单元格内的内容与单元格边框间的文本框：用于输入单元格内的内容与单元格边框间的空白数值，其单位为像素。这种空白存在于单元格内容的四周。空白数值，其单位为像素。这种空白存在于单元格内容的四周。（6）“页眉页眉”栏：用于设置表格的页眉单元格。被设置为页眉的单元格，栏：用于设置表格的页眉单元格。被设置为页眉的单元格，其中的字体将被设置成其中的字体将被设置成“居中居中”和和“黑体黑体”格式。格式。 （7）“

52、辅助功能辅助功能”栏：栏：“辅助功能辅助功能”栏中各选项的作用如下。栏中各选项的作用如下。 “标题标题”文本框：用于输入表格的标题。文本框：用于输入表格的标题。 “对齐标题对齐标题”列表框：用于设置标题与表格的位置关系，默认为表格的顶列表框：用于设置标题与表格的位置关系，默认为表格的顶部。部。 “摘要摘要”文本框：用于输入表格的摘要。文本框：用于输入表格的摘要。在网页中插入的表格如图在网页中插入的表格如图3-8-3所示。所示。 图图3-8-2 “表格表格”对话框对话框 图图3-8-3 制作的第一个表制作的第一个表格格2调整表格大小（1）调整整个表格的大小：单击表格的边框，选中该表格，此时表格右

53、边、）调整整个表格的大小：单击表格的边框，选中该表格，此时表格右边、下边和右下角会出现下边和右下角会出现3个方形的黑色控制柄。用鼠标拖曳控制柄，即可调整个方形的黑色控制柄。用鼠标拖曳控制柄，即可调整整个表格的大小。整个表格的大小。（2）调整表格中行或列的大小：将光标移到表格线处，当光标显示为双箭）调整表格中行或列的大小：将光标移到表格线处，当光标显示为双箭头横线或双箭头竖线时，拖曳鼠标，即可调整表格线的位置，从而调整表头横线或双箭头竖线时，拖曳鼠标，即可调整表格线的位置，从而调整表格行或列的大小。格行或列的大小。 3表格和单元格标签（1）表格标签：选中表格后，在表格的下面用绿色显示出了表格的宽

54、度，）表格标签：选中表格后，在表格的下面用绿色显示出了表格的宽度，如图如图3-8-3所示。单击下边的三角按钮，调出所示。单击下边的三角按钮，调出“表格表格”快捷菜单。利用快捷菜单。利用“表表格格”快捷菜单可以对表格进行选择表格、清除表格列的宽度、左侧插入列快捷菜单可以对表格进行选择表格、清除表格列的宽度、左侧插入列和右侧插入列等操作。和右侧插入列等操作。（2）单元格标签：选中表格后，在表格标签的上面显示出了每一列单元格）单元格标签：选中表格后，在表格标签的上面显示出了每一列单元格的标签。单击任意一个三角按钮，可以调出的标签。单击任意一个三角按钮，可以调出“单元格单元格”快捷菜单，其操作快捷菜单

55、，其操作方法与方法与“表格表格”快捷菜单基本相同此处不再赘述。快捷菜单基本相同此处不再赘述。3.8.2 选择表格选择表格（1）选择整个表格：单击表格的外边框，可选中整个表格，此时表格右边、）选择整个表格：单击表格的外边框，可选中整个表格，此时表格右边、下边和右下角会出现下边和右下角会出现3个方形黑色控制柄。个方形黑色控制柄。（2）选择多个表格单元格：按住）选择多个表格单元格：按住Ctrl键的同时依次单击所有要选择的表格键的同时依次单击所有要选择的表格单元格即可。单元格即可。（3）选择表格的一行或一列单元格：将鼠标移到一行的最左边或移到一列）选择表格的一行或一列单元格：将鼠标移到一行的最左边或移

56、到一列的最上边，当光标显现为黑色箭头时单击鼠标，即可选中一行或一列。的最上边，当光标显现为黑色箭头时单击鼠标，即可选中一行或一列。（4）选择表格的多行或多列单元格：按住）选择表格的多行或多列单元格：按住Ctrl键的同时将鼠标依次移到要键的同时将鼠标依次移到要选择的各行或各列，当光标呈黑色箭头时单击鼠标，即可选中多行或多列。选择的各行或各列，当光标呈黑色箭头时单击鼠标，即可选中多行或多列。还可以将鼠标移到要选择的多行或多列的左侧，当光标呈黑色箭头时，拖还可以将鼠标移到要选择的多行或多列的左侧，当光标呈黑色箭头时，拖曳鼠标也可选择多行或多列单元格。曳鼠标也可选择多行或多列单元格。 3.8.2 选择

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

58、，即可选中一行或一列。（4）选择表格的多行或多列单元格：按住）选择表格的多行或多列单元格：按住Ctrl键的同时将鼠标依次移到要键的同时将鼠标依次移到要选择的各行或各列，当光标呈黑色箭头时单击鼠标，即可选中多行或多列。选择的各行或各列，当光标呈黑色箭头时单击鼠标，即可选中多行或多列。还可以将鼠标移到要选择的多行或多列的左侧，当光标呈黑色箭头时，拖还可以将鼠标移到要选择的多行或多列的左侧，当光标呈黑色箭头时，拖曳鼠标也可选择多行或多列单元格。曳鼠标也可选择多行或多列单元格。 图图3-8-1所示的所示的“考试安排考试安排”网页，虽然能够显示相应的数据，但是表格的网页，虽然能够显示相应的数据，但是表格

59、的样式相对比较简单，不足以吸引浏览者，而且按照班级顺序排列的方式不样式相对比较简单，不足以吸引浏览者，而且按照班级顺序排列的方式不便于查找。所以需对便于查找。所以需对“考试安排考试安排”网页进行网页进行“排序表格排序表格”和和“格式化表格格式化表格”操作，调整后表格的显示效果如图操作，调整后表格的显示效果如图3-9-1所示所示 。 图3-9-1 美化后的“考试安排”网页制作该网页需使用制作该网页需使用“排序表格排序表格”和和“格式化表格格式化表格”命令。命令。“排序表格排序表格”命命令可以对表格中的数据进行重新排序，即在不改变表格结构的情况下对表令可以对表格中的数据进行重新排序，即在不改变表格

60、结构的情况下对表格内的数据进行重新排列。格内的数据进行重新排列。“格式化表格格式化表格”命令可以对表格使用样式，为命令可以对表格使用样式，为表格赋予新的颜色和字体属性。表格赋予新的颜色和字体属性。3.9.1 “排序表格排序表格”对话框对话框在在Dreamweaver中执行中执行“命令命令”“排序表格排序表格”菜单命令，调出菜单命令，调出“排序表格排序表格”对话框，如图对话框，如图3-9-2所示。该对话框中各选项的含义如下。所示。该对话框中各选项的含义如下。 图3-9-2 “排序表格”对话框（1）“排序按排序按”下拉列表框：选择对第几列排序。列号为下拉列表框：选择对第几列排序。列号为“列列1”、