- 14天学通Dreamweaver+Photoshop+Flash网站建设与网页设计
- 孙东梅编著
- 214字
- 2024-12-22 13:30:52
第3天上午 巧用绚丽的图像和多媒体让网页动起来
本章学习流程图
知识导读
今天上午我们将学习使用图像和多媒体制作出华丽而且动感十足的网页。图像有着丰富的色彩和表现形式，恰当地利用图像可以加深浏览者对网站的印象。这些图像是文本的说明及解释，可以使文本清晰易读更加具有吸引力，随着网络技术的不断发展，人们已经不再满足于静态网页，而目前的网页也不再是单一的文本，图像、声音、视频和动画等多媒体技术更多地应用到了网页之中。
完成今天上午内容后，您将能够
◎ 在网页中插入图像
◎ 插入其他网页图像
◎ 添加声音
◎ 添加Flash影片
◎ 插入视频文件
◎ 插入其他媒体对象
实例展示
插入网页图像
插入导航条
在Dreamweaver中插入Flash影片
创建图文混排网页
5.1 在网页中插入图像
网页中图像的格式通常有3种，即GIF、JPEG和PNG。目前GIF和JPEG文件格式的支持情况最好，大多数浏览器都可以查看它们。由于PNG文件具有较大的灵活性并且文件较小，所以它对于几乎任何类型的网页图像都是适合的。但是Microsoft Internet Explorer和Netscape Navigator只能部分支持PNG图像的显示，建议使用GIF或JPEG格式以满足更多人的需求。
知识要点
一般来说，图片显示效果越清晰、质量越好，其本身容量也会越大，插入这样的图片将会影响整个网页的运行效率。在设计网页时应保证在图像质量和图像大小之间找到一个合适的比例，从而做到既保证图片的清晰度，又保证图像的下载速度。
要在网页中使用图像，需要学会插入图像并设置图像的一些属性，同时也应学会使用一些软件对图像进行处理，然后才能按照实际需要制作出较好的图像效果。
5.1.1 插入网页图像
图像是网页构成中最重要的元素之一，美观的图像会为网站增添生命力，同时也将加深浏览者对网站风格的印象。下面通过如图5-1所示的实例讲述在网页中插入图像的方法，具体操作步骤如下。
图5-1 插入网页图像效果
指点迷津
为什么我做的网页传到网上后不显示图片？
出现这种情况，一般有下面两种可能，第一是图片使用的是绝对路径，第二是大小写的问题。
第一种情况是使用了绝对路径，并且使用了本地盘符，则上传后就找不到此图片文件。
第二种情况是图像文件名或图像文件所在的目录中有大写字母，或含有中文，因为服务器一般使用的是UNIX或Linux平台，而UNIX系统是区分大小写的。
起始文件：CD-ROM/起始文件/第3天上午/5.1.1/index.htm
完成文件：CD-ROM/完成文件/第3天上午/5.1.1/index1.htm
1 打开网页文档，如图5-2所示。
图5-2 打开网页文档
2 将光标置于插入图像的位置，执行“插入”|“图像”命令，弹出“选择图像源文件”对话框，在对话框中选择图像images/2048flower_1012.jpg，如图5-3所示。
图5-3 “选择图像源文件”对话框
3 单击“确定”按钮，插入图像，如图5-4所示。
图5-4 插入图像
提示
如果选中的文件不在本地网站的根文件夹下，则弹出如图5-5所示的提示框，系统要求用户复制图像文件到本地网站的根文件夹，单击“是”按钮，弹出“复制文件为”对话框，如图5-6所示，让用户选择文件的存放位置，可选择根目录或根目录下的任何文件夹，这里建议读者新建一个名为images的文件夹，今后可以把网站中的所有图像都放到该文件夹中。
图5-5 提示框
图5-6 “复制文件为”对话框
4 保存文档，按F12键在浏览器中预览，效果如图5-1所示。
5.1.2 设置图像属性
选中插入的图像，打开“属性”面板，在面板中可以设置图像的属性，如图5-7所示。
图5-7 图像的属性面板
下面通过实例讲述图像属性的设置，如图5-8所示，具体操作步骤如下。
图5-8 设置图像属性后的效果
指点迷津
如何加快页面图片下载速度？
有时，首页图片过少，而其他页面图片过多，为了提高效率，当访问者浏览首页时，后台就开始进行其他页面的图片下载。方法是在首页加入<img src="1.jpg" width=0 height=0>，其中width及height要设置为0，1.jpg为提前下载的图片名。
起始文件：CD-ROM/起始文件/第3天上午/5.1.2/index.htm
完成文件：CD-ROM/完成文件/第3天上午/5.1.2/index1.htm
1 打开网页文档，选中图像，如图5-9所示。
图5-9 打开网页文档
2 执行“窗口”|“属性”命令，打开“属性”面板，在面板中将“对齐”设置为“右对齐”，如图5-10所示。
图5-10 设置图像对齐方式
知识要点
在图像属性面板中可以进行如下设置。
◎ 宽和高：以像素为单位设定图像的宽度和高度。当在网页中插入图像时， Dreamweaver自动使用图像的原始尺寸。可以使用以下单位指定图像大小：点、英寸、毫米和厘米。在HTML源代码中，Dreamweaver将这些值转换为以像素为单位。
◎ 源文件：指定图像的具体路径。
◎ 链接：为图像设置超级链接。可以单击
按钮浏览选择要链接的文件，或直接输入URL路径。
◎ 目标：链接时的目标窗口或框架。在其下拉列表中包括4个选项：
_blank：将链接的对象在一个未命名的新浏览器窗口中打开。
_parent：将链接的对象在含有该链接框架的父框架集或父窗口中打开。
_self：将链接的对象在该链接所在的同一框架或窗口中打开。_self是默认选项，通常不需要指定它。
_top：将链接的对象在整个浏览器窗口中打开，因而会替代所有框架。
◎ 替换：图片的注释。当浏览器不能正常显示图像时，便在图像的位置用这个注释代替图像。
◎ 编辑：启动“外部编辑器”首选参数中指定的图像编辑器并使用该图像编辑器打开选定的图像。
编辑
：启动外部图像编辑器编辑选中的图像。
编辑图像设置
：弹出“图像预览”对话框，在对话框中可以对图像进行设置。
重新取样
：将“宽”和“高”的值重新设置为图像的原始大小。调整所选图像大小后，此按钮显示在“宽”和“高”文本框的右侧。如果没有调整过图像的大小，该按钮不会显示出来。
裁剪
：修剪图像的大小，从所选图像中删除不需要的区域。
亮度和对比度
：调整图像的亮度和对比度。
锐化
：调整图像的清晰度。
◎ 地图：创建客户端图像地图。
◎ 垂直边距：图像在垂直方向与文本域或其他页面元素的间距。
◎ 水平边距：图像在水平方向与文本域或其他页面元素的间距。
◎ 边框：以像素为单位的图像边框宽度，默认为无边框。
◎ 对齐：设置图像和文字的对齐方式。
3 还可以根据需要设置图像的其他属性。保存文档，按F12键在浏览器中预览，效果如图5-6所示。
5.1.3 裁剪图像
在Dreamweaver中可以裁剪图像，具体操作步骤如下。
1 单击并选中图像，在图像属性面板中单击“边框”文本框右边的“裁剪”按钮
，如图5-11所示。
图5-11 单击“裁剪”按钮
2 弹出“Dreamweaver”提示对话框，如图5-12所示。
图5-12 “Dreamweaver”提示对话框
3 单击“确定”按钮，裁剪后如图5-13所示。
图5-13 裁剪后
提示
使用Dreamweaver裁剪图像时，会直接更改磁盘上的源图像文件，因此，可能需要备份图像文件，以便在需要恢复到原始图像时使用。
在退出Dreamweaver或在外部应用程序编辑该文件之前，可以撤销“裁剪”命令的效果。
5.1.4 优化图像
单击并选中图像，在图像“属性”面板中单击“编辑”右边的
按钮，弹出“Photoshop”对话框，如图5-14所示，在对话框中进行相应的设置，单击“确定”按钮即可。
图5-14“Photoshop”对话框
5.1.5 调整图像的亮度和对比度
图像属性面板中的“亮度和对比度”按钮
用于调整图像的亮度和对比度，具体操作步骤如下。
1 单击并选中图像，在图像属性面板中单击“边框”文本框右边的“亮度和对比度”按钮
，如图5-15所示。
图5-15 单击“亮度和对比度”按钮
2 弹出“亮度/对比度”对话框，在对话框中拖动“亮度”和“对比度”滑块到合适的位置，如图5-16所示。
图5-16 “亮度/对比度”对话框
3 调整完“亮度”和“对比度”后，单击“确定”按钮，效果如图5-17所示。
图5-17 调整后的效果
5.1.6 锐化图像
锐化将增加对象边缘像素的对比度，从而增加图像的清晰度或锐度，在Dreamweaver中锐化图像的具体操作步骤如下。
1 选中要锐化的图像，单击“属性”面板中的“锐化”按钮
，如图5-18所示。
图5-18 单击“锐化”按钮
2 弹出“锐化”对话框，在对话框中将“锐化”值设置为2，如图5-19所示。
图5-19 “锐化”对话框
3 单击“确定”按钮，即可锐化图像，如图5-20所示。
图5-20 锐化图像
5.2 插入其他网页图像
除了可以在网页中插入基本图像外，还可以插入背景图像、跟踪图像、鼠标经过图像和导航条等，下面就具体讲述这些图像的插入方法。
5.2.1 背景图像
改变网页的背景颜色可以得到不同颜色的背景，但是背景颜色始终是单一的颜色，要使背景颜色发生更多的变化可以设置网页的背景图像，其效果如图5-21所示，具体操作步骤如下。
图5-21 设置网页背景图像的效果
起始文件：CD-ROM/起始文件/第3天上午/5.2.1/index.htm
完成文件：CD-ROM/完成文件/第3天上午/5.2.1/index1.htm
1 打开网页文档，如图5-22所示。
图5-22 打开网页文档
2 将光标置于表格的第1行单元格中，执行“修改”|“页面属性”命令，弹出“页面属性”对话框，在对话框的“分类”选项中选择“外观”，单击“背景图像”文本框右边的“浏览”按钮，弹出“选择图像源文件”对话框，如图5-23所示。
图5-23 “选择图像源文件”对话框
3 在对话框中选择图像images/bg.jpg，单击“确定”按钮，将该图像添加到文本框中，如图5-24所示。
图5-24 “页面属性”对话框
4 单击“确定”按钮，插入背景图像，如图5-25所示。
图5-25 插入背景图像
指点迷津
为什么没有显示我设置的表格背景图像？
在单元格中单击鼠标左键，从“属性”面板中可以看到设置的背景图文件，而且在Dreamweaver中显示也是正常的，启动IE浏览这个页面，背景图却看不到。这时返回到Dreamweaver中，查看光标处的代码，会发现background设置在<tr>标签中。在IE中表格的背景不能设置在<tr>中，只能放在<td>中。将背景代码移到<td>中，保存文档后，再进行浏览，背景图就能正常显示了。
5.2.2 使用跟踪图像
将跟踪图像用作向导，重新创建在图形应用程序中模拟的页面设计。跟踪图像是放在“文档”窗口背景中的JPEG、GIF或PNG图像。可以隐藏图像、设置图像的不透明度和更改图像的位置，具体操作步骤如下。
1 执行“文件”|“新建”命令，新建文档，如图5-26所示。
图5-26 新建文档
2 执行“查看”|“跟踪图像”|“载入”命令，弹出“选择图像源文件”对话框。在对话框中选择图像文件作为跟踪图像，如图5-27所示。
图5-27 “选择图像源文件”对话框
3 单击“确定”按钮，弹出“页面属性”对话框，将跟踪图像添加到文本框中，并将“透明度”的滑块滑至相应的位置，设置跟踪图像的透明度，如图5-28所示。
图5-28 设置“跟踪图像”
4 单击“确定”按钮，插入跟踪图像，如图5-29所示。
图5-29 插入跟踪图像
5.2.3 鼠标经过图像
在浏览器中查看网页，当鼠标指针经过图像时，该图像就会变成另外一幅图像；当鼠标移开时，该图像又会变回原来的图像。这种效果在Dreamweaver中可以非常方便地做出来。
将光标置于要插入鼠标经过图像的位置，执行“插入”|“图像对象”|“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，如图5-30所示。
图5-30 “插入鼠标经过图像”对话框
知识要点
“插入鼠标经过图像”对话框中可以进行如下设置。
◎ 图像名称：设置这个滚动图像的名称。
◎ 原始图像：设置滚动图像的原始图像，在其后的文本框中输入此原始图像的路径，或单击“浏览”按钮，打开“原始图像”对话框，选择图像。
◎ 鼠标经过图像：用来设置鼠标经过图像时，原始图像替换成的图像。
◎ 预载鼠标经过图像：选中该复选框，网页打开就预下载替换图像到本地。当鼠标经过图像时，能迅速切换到替换图像；如果取消该选项，当鼠标经过该图像时才下载替换图像，替换可能会出现不连贯的现象。
◎ 替换文本：用来设置图像的替换文本，当图像不显示时，则显示这个替换文本。
◎ 按下时，前往的URL：用来设置滚动图像上应用的超链接。
鼠标未经过图像时的效果如图5-31所示，当鼠标经过图像时的效果如图5-32所示，具体操作步骤如下。
图5-31 鼠标未经过图像时的效果
图5-32 鼠标经过图像时的效果
起始文件：CD-ROM/起始文件/第3天上午/5.2.3/index.htm
完成文件：CD-ROM/完成文件/第3天上午/5.2.3/index1.htm
1 打开网页文档，如图5-33所示。
图5-33 打开网页文档
2 将光标置于插入鼠标经过图像的位置，执行“插入”|“图像对象”|“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，如图5-34所示。
图5-34 “插入鼠标经过图像”对话框
提示
在“常用”插入栏中单击
按钮右边的小三角，在弹出的菜单中选择“鼠标经过图像”
，弹出“插入鼠标经过图像”对话框，也可以插入鼠标经过图像。
3 单击“原始图像”文本框右边的“浏览”按钮，在弹出的如图5-35所示的对话框中选择相应的图像文件，单击“确定”按钮，将原始图像添加到对话框中。
图5-35 “原始图像”对话框
4 单击“鼠标经过图像”文本框右边的“浏览”按钮，在弹出的如图5-36所示的对话框中选择相应的图像文件。
图5-36 “鼠标经过图像”对话框
5 单击“确定”按钮，将鼠标经过图像添加到对话框中，如图5-37所示。
图5-37 添加到对话框
6 单击“确定”按钮，在“属性”面板中将“对齐”设置为“右对齐”，如图5-38所示。
图5-38 设置图像对齐方式
提示
在插入鼠标经过图像时，如果不为该图像设置链接，Dreamweaver将在HTML源代码中插入一个空链接#，该链接上将附加鼠标经过的图像行为，如果将该链接删除，鼠标经过图像将不起作用。
7 保存文档，按F12键在浏览器中预览，鼠标未经过图像时的效果如图5-31所示，鼠标经过图像时的效果如图5-32所示。
5.2.4 插入导航条
导航条实际上是一组动态图像按钮，单击一个导航条按钮，可以在浏览器中弹出HTML文件和其他文件。执行“插入”|“图像对象”|“导航条”命令，弹出“插入导航条”对话框，如图5-39所示。
图5-39 “插入导航条”对话框
原始状态图像的效果如图5-40所示，当鼠标经过图像时的效果如图5-41所示，具体操作步骤如下。
图5-40 原始状态时的效果
图5-41 鼠标经过图像时的效果
起始文件：CD-ROM/起始文件/第3天上午/5.2.4/index.htm
完成文件：CD-ROM/完成文件/第3天上午/5.2.4/index1.htm
1 打开网页文档，如图5-42所示。
图5-42 打开网页文档
2 将光标置于插入导航条的位置，执行“插入”|“图像对象”|“导航条”命令，弹出“插入导航条”对话框，如图5-43所示。
图5-43 “插入导航条”对话框
3 单击“状态图像”文本框右边的“浏览”按钮，弹出“选择图像源文件”对话框，选择图像文件images/main_02_01a.gif，如图5-44所示。
图5-44 “选择图像源文件”对话框
4 单击“确定”按钮，添加图像文件，分别在“状态图像”和“鼠标经过图像”中输入相应的图像文件images/main_02_01a-a.gif和images/main_02_01a-b.gif，如图5-45所示。
图5-45 添加图像文件
5 单击“确定”按钮，插入导航条，如图5-46所示。
图5-46 插入导航条
6 同以上步骤，在其他的单元格中插入导航条，如图5-47所示。
图5-47 在其他的单元格中插入导航条
7 保存文档，按F12键在浏览器中预览，原始状态图像的效果如图5-40所示，当鼠标经过图像时的效果如图5-41所示。
5.3 添加声音
为网页加入背景音乐，使访问者一进入网站就能听到优美的音乐，可以大大增强网站的娱乐性。为网页添加背景音乐的方法很简单，既可以通过内置行为添加，也可以通过代码提示添加，下面分别进行讲述。
5.3.1 在文档中插入背景音乐
可以利用内置行为为网页添加音乐，效果如图5-48所示，具体操作步骤如下。
图5-48 插入背景音乐
起始文件：CD-ROM/起始文件/第3天上午/5.3.1/index.htm
完成文件：CD-ROM/完成文件/第3天上午/5.3.1/index1.htm
1 打开网页文档，如图5-49所示。
图5-49 打开网页文档
2 执行“窗口”|“行为”命令，打开“行为”面板，在面板中单击“添加行为”按钮，在弹出的下拉菜单中选择“建议不再使用”|“播放声音”选项，如图5-50所示。
图5-50 选择“播放声音”选项
3 在弹出的“播放声音”对话框中单击“播放声音”文本框后面的“浏览”按钮，并在弹出的“选择文件”对话框中选择音乐文件，如图5-51所示。
图5-51 “选择文件”对话框
4 单击“确定”按钮，将文件添加到文本框中，如图5-52所示。
图5-52 添加文件
5 单击“确定”按钮，添加播放声音行为，保存文档，按F12键在浏览器中预览，效果如图5-48所示。
5.3.2 使用代码提示添加背景音乐
使用代码提示添加背景音乐，即在代码视图中插入代码。在输入某些字符时，将显示一个列表，列出完成条目所需要的选项。下面通过代码提示讲述背景音乐的插入方法，效果如图5-53所示，具体操作步骤如下。
图5-53 插入背景音乐效果
起始文件：CD-ROM/起始文件/第3天上午/5.3.2/index.htm
完成文件：CD-ROM/完成文件/第3天上午/5.3.2/index1.htm
1 打开网页文档，如图5-54所示。
图5-54 打开网页文档
2 切换到代码视图，并找到标签<body>，在其后面输入“<”以显示标签列表，向下滚动该列表并选中标签bgsound，如图5-55所示。
图5-55 选中标签bgsound
指点迷津
bgsound标签共有5个属性，其中balance用于设置音乐的左右均衡；delay用于设置进行播放过程中的延时；loop用于控制循环次数；src用于存放音乐文件的路径；volume用于调节音量。
3 双击插入该标签，如果该标签支持属性，则按空格键以显示该标签允许的属性列表，从中选择属性src，如图5-56所示。这个属性用来设置背景音乐文件的路径。
图5-56 选择属性src
4 按Enter键后，出现“浏览”字样，单击该字样弹出“选择文件”对话框，在对话框中选择音乐文件，如图5-57所示。
图5-57 “选择文件”对话框
指点迷津
背景音乐文件的容量不要太大，否则很可能整个网页都浏览完了，声音还没有下载完。在背景音乐格式方面，mid格式是最好的选择，它不仅拥有较好的音质，最关键的是它的容量非常小，一般只有几十KB。
5 选择音乐文件后，单击“确定”按钮。在新插入的代码后按空格键，在属性列表中选择loop，如图5-58所示。
图5-58 选择loop
6 出现“-1”并选中，在最后的属性值后，为该标签输入“>”，如图5-59所示。
图5-59 输入“>”
7 保存文档，按F12键在浏览器中预览，效果如图5-53所示。
提示
浏览器可能需要某种附加的音频支持来播放声音，因此，具有不同插件的不同浏览器所播放声音的效果通常会有所不同。
5.4 添加Flash影片
在网页中插入Flash影片可以增加网页的动感程度，使网页更具吸引力，因此多媒体元素在网页中的应用越来越广泛。
Flash影片是在专门的Flash软件中完成的，在Dreamweaver CS4中能将现有的Flash动画插入到文档中。选择插入的Flash影片，打开“属性”面板，如图5-60所示。
图5-60 Flash的属性面板
知识要点
◎ Flash文本框：输入Flash动画的名称。
◎ 宽、高：设置文档中Flash动画的尺寸，可以输入数值改变其大小，也可以在文档中拖动缩放手柄来改变其大小。
◎ 文件：指定Flash文件的路径。
◎ 源文件：指定Flash源文档.fla的路径。
◎ 循环：勾选此复选框可以重复播放Flash动画。
◎ 自动播放：勾选此复选框，当在浏览器中载入网页文档时，将自动播放Flash动画。
◎ 垂直边距、水平边距：指定动画边框与网页上边界和左边界的距离。
◎ 品质：设置Flash动画在浏览器中的播放质量，包括“低品质”、“自动低品质”、“自动高品质”和“高品质”4个选项。
◎ 比例：设置显示比例，包括“全部显示”、“无边框”和“严格匹配”3个选项。
◎ 对齐：设置Flash在页面中的对齐方式。
◎ 背景颜色：为当前Flash动画设置背景颜色。
◎
：用于自动打开Flash软件对源文件进行处理。
◎
：用于在设计视图中播放Flash动画。
◎
：用来弹出一个对话框，在其中输入能使该Flash顺利运行的附加参数。
下面通过如图5-61所示的效果讲述在网页中插入Flash影片的方法，具体操作步骤如下。
图5-61 插入Flash影片的效果
指点迷津
为什么浏览网页时不能显示插入的Flash动画？
出现这种情况可能有以下一些原因：
◎ 确认Flash动画的名称是否是中文，如果是中文要改为英文。
◎ 确认插入的Flash是否为swf格式的文件。
◎ 确认网页文档中指定的Flash动画的路径是否与实际Flash动画的路径相同。
起始文件：CD-ROM/起始文件/第3天上午/5.4/index.htm
完成文件：CD-ROM/完成文件/第3天上午/5.4/index1.htm
1 打开网页文档，如图5-62所示。
图5-62 打开网页文档
2 将光标置于要插入Flash影片的位置，执行“插入”|“媒体”|“Flash”命令，弹出“选择文件”对话框，如图5-63所示。
图5-63 “选择文件”对话框
3 在对话框中选择flash.swf，单击“确定”按钮，插入Flash影片，如图5-64所示。
图5-64 插入Flash影片
高手支招
插入Flash动画还有以下两种方法：
◎ 单击“常用”插入栏中的Flash按钮
，弹出“选择文件”对话框，也可以插入Flash影片。
◎ 拖曳“常用”插入栏中的
按钮至所需要的位置，弹出“选择文件”对话框，也可以插入Flash影片。
4 保存文档，按F12键在浏览器中预览，效果如图5-61所示。
5.5 插入视频文件
随着宽带技术的发展和推广，出现了许多视频网站。越来越多的人选择观看在线视频，同时也有很多的网站提供在线视频服务。执行“插入”|“媒体”|“Flash视频”命令，弹出“插入Flash视频”对话框，如图5-65所示。
图5-65 “插入Flash视频”对话框
提示
使用Dreamweaver能够轻松地在网页中插入Flash视频内容，而无须使用Flash创作工具。在浏览器中查看Dreamweaver插入的Flash视频组件时，将显示选择的Flash视频内容以及一组播放控件。
下面通过如图5-66所示的效果讲述在网页中插入Flash视频的方法，具体操作步骤如下。
图5-66 插入Flash视频的效果
起始文件：CD-ROM/起始文件/第5天上午/5.5/index.htm
完成文件：CD-ROM/完成文件/第5天上午/5.5/index1.htm
1 打开网页文档，将光标置于要插入视频的位置，如图5-67所示。
图5-67 打开网页文档
2 执行“插入”|“媒体”|“Flash视频”命令，弹出“插入Flash视频”对话框，如图5-68所示。
图5-68 “插入Flash视频”对话框
3 在对话框中单击URL文本框后面的“浏览”按钮，在弹出的“选择FLV”对话框中选择视频文件，如图5-69所示。
图5-69 “选择FLV”对话框
4 单击“确定”按钮，返回到“插入Flash视频”对话框，并进行相应的设置，如图5-70所示。
图5-70 “插入Flash视频”对话框
5 单击“确定”按钮，插入视频，如图5-71所示。
图5-71 插入视频
6 保存文档，按F12键在浏览器中预览，效果如图5-66所示。
5.6 插入其他媒体对象
在网页中不仅可以插入声音、Flash影片、Flash文本、Flash按钮和视频文件，还可以插入Shockwave影片、Java小程序和ActiveX控件，下面分别进行讲述。
5.6.1 插入Shockwave影片
Shockwave是网页中交互式多媒体的业界标准，其真正的含义就是插件。可以通过Director来创建Shockwave动画，它生成的压缩格式可以被浏览器快速下载，并且可以被目前的主流服务器所支持。插入Shockwave动画效果如图5-72所示，具体操作步骤如下。
图5-72 插入Shockwave动画效果
起始文件：CD-ROM/起始文件/第3天上午/5.6.1/index.htm
完成文件：CD-ROM/完成文件/第3天上午/5.6.1/index1.htm
1 打开网页文档，将光标置于要插入Shockwave动画的位置，如图5-73所示。
图5-73 打开网页文档
2 执行“插入”|“媒体”|“Shockwave”命令，弹出“选择文件”对话框，选择index(1).swf，如图5-74所示。
图5-74 “选择文件”对话框
3 单击“确定”按钮，插入Shockwave动画，如图5-75所示。
图5-75 插入Shockwave动画
4 保存文档，按F12键在浏览器中预览，效果如图5-72所示。
5.6.2 插入Java小程序
Java是一种允许开发、可以嵌入Web页面的轻量级应用程序（小程序）的编程语言。在创建Java小程序后，可以使用Dreamweaver将该程序插入到HTML文档中，Dreamweaver使用<applet>标签来标识对小程序的引用。插入Applet后的“属性”面板如图5-76所示。
图5-76 Java Applet的属性面板
知识要点
Java Applet属性面板中可以进行如下设置。
◎ 宽、高：设置Java Applet的宽度和高度，可以输入数值，单位是像素。
◎ 代码：设置程序的Java Applet路径。
◎ 基址：指定包含这个程序的文件夹。
◎ 对齐：设置程序的对齐方式。
◎ 替换：设置当程序无法显示时，将显示的替换图像。
◎ 垂直边距：以像素为单位指定Applet上、下的空白量。
◎ 水平边距：以像素为单位指定Applet左、右的空白量。
下面通过实例讲述使用Java小程序制作如图5-77所示的水中倒影效果，具体操作步骤如下。
图5-77 水中倒影效果
起始文件：CD-ROM/起始文件/第3天上午/5.6.2/index.htm
完成文件：CD-ROM/完成文件/第3天上午/5.6.2/index1.htm
1 打开网页文档，将光标置于要插入Applet的位置，如图5-78所示。
图5-78 打开网页文档
提示
单击“常用”插入栏中
按钮右边的小三角，在弹出的菜单中选择“Applet”
，弹出“选择文件”对话框，也可以插入Applet。
2 执行“插入”|“媒体”|“Applet”命令，弹出“选择文件”对话框，选择Lake.class，如图5-79所示。
图5-79 “选择文件”对话框
3 单击“确定”按钮，插入Applet，如图5-80所示。
图5-80 插入Applet
4 选中Applet，在“属性”面板中将“宽”设置为254，“高”设置为173，如图5-81所示。
图5-81 设置Applet属性
5 选中Applet，切换到代码视图，在相应的位置输入<PARAM NAME="image"VALUE="compay_01_7.gif">，如图5-82所示。
图5-82 输入代码
6 保存文档，按F12键在浏览器中预览，效果如图5-77所示。
提示
Lake.class文件、图像和网页必须放在同一个文件夹下。另外Java Applet的效果非常丰富，在互联网上有很多下载，有兴趣的读者可以浏览相关网站。
5.6.3 插入ActiveX控件
可以在页面中插入ActiveX控件（如微型的应用程序），ActiveX控件是对浏览器能力的扩展，它仅在Windows系统上的Internet Explorer中运行，ActiveX控件的作用和插件是相同的，它可以在不发布浏览器新版本的情况下扩展浏览器的能力。
1 将光标置于要插入ActiveX控件的位置。
2 执行“插入”|“媒体”|“ActiveX”命令，插入ActiveX，打开“属性”面板，如图5-83所示。在ActiveX控件的属性面板中设置相关的参数即可。
图5-83 ActiveX控件的属性面板
5.7 综合练习
可以使用Dreamweaver中的可视化工具向页面添加各种内容，包括文本、图像、影片、声音和其他媒体形式等。本章我们学习了图像和多媒体的添加方法，本节将通过实例来讲述具体的应用。
练习1——制作多彩的图文混排网页
文字和图像是网页中最基本的元素，在网页中插入图像就使得网页更加生动形象，创建图文混排网页的方法非常简单，如图5-84所示的是图文混排的效果，具体操作步骤如下。
图5-84 创建图文混排的效果
指点迷津
如何使文字和图片内容共处？
在Dreamweaver中，图片对象是需要独占一行的，那么文字内容只能在与其平行的一行的位置上，怎样才可以让文字围绕着图片显示呢？需要选中图片，在“属性”面板的“对齐”下拉列表中选择“右对齐”，这时会发现文字已均匀地排列在图片的右边了。
起始文件：CD-ROM/起始文件/第3天上午/综合练习1/index.htm
完成文件：CD-ROM/完成文件/第3天上午/综合练习1/index1.htm
1 打开网页文档，如图5-85所示。
图5-85 打开网页文档
2 将光标置于要输入文字的位置并输入文字，如图5-86所示。
图5-86 输入文字
3 选中输入的文字，打开属性面板，选择“CSS”选项，单击“背景规则”按钮，弹出“新建CSS规则”对话框，在对话框中的“选择器名称”中输入名称，如图5-87所示。
图5-87 “新建CSS规则”对话框
4 单击“确定”按钮，弹出“.wenben的CSS规则定义”对话框，在对话框中将“字体”设置为宋体，“大小”设置为12像素，“行高”设置为200%，“颜色”设置为#666，如图5-88所示。
图5-88 “.wenben的CSS规则定义”对话框
5 单击“确定”按钮，设置文本属性，如图5-89所示。
图5-89 设置文本属性
6 将光标置于要插入图像的位置，执行“插入”|“图像”命令，弹出“选择图像源文件”对话框，选择图像images/tp02.jpg，如图5-90所示。
图5-90 “选择图像源文件”对话框
7 单击“确定”按钮，插入图像，如图5-91所示。
图5-91 插入图像
8 选中插入的图像，在“属性”面板中将“对齐”设置为“右对齐”，如图5-92所示。
图5-92 设置图像的属性
9 保存文档，按F12键在浏览器中预览，效果如图5-84所示。
练习2——在网页中插入媒体实例
下面通过实例讲述在网页中插入背景音乐和Flash动画的方法，效果如图5-93所示，具体操作步骤如下。
图5-93 在网页中插入媒体效果
起始文件：CD-ROM/起始文件/第3天上午/综合练习2/index.htm
完成文件：CD-ROM/完成文件/第3天上午/综合练习2/index1.htm
1 打开网页文档，如图5-94所示。
图5-94 打开网页文档
2 将光标置于要插入Flash文本的位置，执行“插入”|“媒体”|“Flash文本”命令，弹出“选择文件”对话框，选择相应的文件，如图5-95所示。
图5-95 “选择文件”对话框
3 单击“确定”按钮，插入Flash文本，如图5-96所示。
图5-96 插入Flash文本
4 将光标置于要插入Flash视频的位置，执行“插入”|“媒体”|“Flash视频”命令，弹出“插入FLV”对话框，单击“URL”文本框右边的“浏览”按钮，弹出“选择FLV”对话框，在对话框中选择视频文件11819327.flv，如图5-97所示。
图5-97 “选择FLV”对话框
5 单击“确定”按钮，添加视频文件，在对话框中将“宽度”设置为260，“高度”设置为150，如图5-98所示。
图5-98 添加视频文件
6 单击“确定”按钮，插入视频，如图5-99所示。保存文档，按F12键在浏览器中预览，效果如图5-93所示。
图5-99 插入视频
5.8 本章小结
在网页的适当位置放置一些图像和多媒体，不仅使内容清晰易懂，而且更具吸引力。本章主要学习了网页中图像的基本操作、特殊图像效果的插入、网页背景音乐的添加、Flash影片的使用、在网页中插入视频文件和其他媒体对象等相关知识。本章的重点是图像的插入和使用、Flash的插入和使用以及Java Applet的使用。图像和多媒体作为网页的重要元素，可以使页面的效果更加生动，也可以使网站的内容更加丰富，读者一定要好好掌握其要领。
5.9 课后习题
1.填空题
（1）____图像是网页中使用的最广泛，最普遍的一种图像格式，它最多只能支持256种颜色，因此一般来说文件体积较小，适合在网络上使用。
（2）为网页添加背景音乐的方法很简单，既可以通过____添加，也可以通过____添加。
2.操作题
给如图5-100所示的网页创建鼠标经过图像效果，鼠标经过时如图5-101所示。
图5-100 起始文件
图5-101 鼠标经过时的效果
起始文件：CD-ROM/起始文件/第3天上午/操作题1/index.htm
完成文件：CD-ROM/完成文件/第3天上午/操作题1/index1.htm
1 将光标置于要插入鼠标经过图像的位置，执行“插入”|“图像对象”|“鼠标经过图像”命令，弹出“插入鼠标经过图像”对话框，如图5-102所示。
图5-102 “插入鼠标经过图像”对话框
2 在对话框中单击“原始图像”文本框右边的“浏览”按钮，在弹出的“原始图像”对话框中选择图像images/tu1.jpg，如图5-103所示。
图5-103 “原始图像”对话框
3 单击“确定”按钮，在对话框中单击“鼠标经过图像”文本框右边的“浏览”按钮，在弹出的“鼠标经过图像”对话框中选择图像images/tu2.jpg，如图5-104所示。
图5-104 “鼠标经过图像：”对话框
4 单击“确定”按钮，返回到“插入鼠标经过图像”对话框，单击“确定”按钮，即可插入鼠标经过图像。