项目五：复杂网页设计与制作

项目五：复杂网页设计与制作

项目五：复杂网页设计与制作 任务一：网页中行为的应用任务二：网页中多媒体对象的引用任务三：网页中框架的使用

任务一：网页中行为的使用 任务实施很多页面通过使用JavaScript客户端脚本语言来实现多种页面动态效果，Dreamweaver为我们提供了一个不用用户书写文本代码也可以实现交互性很强的动态网页的工具——行为，行为实际上是JavaScript脚本程序的可视化开发工具。在使用行为时，Dreamweaver自动生成相应的JavaScript代码。每一个行为，都包括事件和行为两部分。

任务一：网页中行为的使用 • 制作一个以介绍奥运福娃为主题的单张网页fuwa.html，要求打开和关闭网页时弹出消息框，打开网页确认完消息后，将弹出新的浏览器窗口。在网页fuwa.html中鼠标滑过和单击标题文本“奥运福娃”时，将有不同的行为状态出现。网页左侧写入福娃名字，当单击不同的名字，右侧显示相应的图片。单击页上的元素也能关闭当前浏览器。

任务一：网页中行为的使用 • 操作步骤： • 打开一个新的HTML文件,为页面打开时弹出消息框“欢迎光临”行为。单击“行为”面板中的+号按钮，选择“弹出消息”命令，设置事件为onunload； • 在HTML文件中插入层，并写入文本“福娃展示”； • 设置状态栏文本。选中刚才输入的文本，选择“行为”面板中的+号按钮，在弹出式菜单中选择“设置文本”中的“设置状态栏文本”，并将事件设置为onMouseOver； • 再次点击行为面板中的“+”按钮，从弹出式菜单中选择【设置文本】|【设置状态栏文本】命令，调出【设置状态栏文本】面板。在【消息】栏中不要输入任何内容。点击【确定】按钮之后，将默认的onMouseOver事件变为onMouseOut（鼠标指针离开对象范围时）事件；

任务一：网页中行为的使用 • 利用图层在fuwa.html文档的左上角插入一五环福娃图片logo.gif，同时在其下方插入一图层，并在层中插入一福娃运动图片yd.gif； • 选中五环福娃图片，点击行为面板上的“+”按钮，选择【显示隐藏元素】命令； • 将运动福娃图片yd.gif所在图层apDiv3设为显示，单击【确定】后，将默认的onClick（鼠标单击对象事件）事件更改为onMouseOver事件； • 再新建一个HTML文档，并输入一些欢迎词文本，我们输入“这是我的第一个家，欢迎志同道合的朋友常来坐坐。”，保存为huanyingci.html； • 在打开fuwa.html文档，查看一下是否是在<body>标签，如果是点击行为面板上的“+”按钮，选择【打开浏览器窗口】命令。弹出打开浏览器窗口的设置面板。如图所示，

任务一：网页中行为的使用 按F12到浏览器上测试行为指令。在文件窗口左边分别输入“贝贝”、“晶晶”、“换换”、“盈盈”、“妮妮”五组文字并设置空超链接；在四个字的旁边，绘制一个AP图层；保持超链接文本“贝贝”的选取状态，点击行为面板中的“+”按钮，从弹出式菜单中选择【设置文本】|【设置容器的文本】命令 ,在新建HTML文本框中写入HTML代码<img src="image/beibei.gif"> ;

任务一：网页中行为的使用 同样的方法，分别给“晶晶”、“换换”、“盈盈”、“妮妮”四组文字添加【设置容器的文本】行为; 在fuwa.html文档的右下方写入“关闭”文本，选中该文本，点击行为面板中的“+”按钮，从弹出式菜单中选择【调用JavaScript】命令，在文本框中输入关闭当前浏览器窗口的函数close() ，默认onClick事件 ; 保存文件，按F12预览效果

任务一：网页中行为的使用 • 浮动广告的操作步骤： • 在Dreamwear中打开一个网页文件； • 在网页中绘制一个APDiv层，在层中插入广告图像； • 选中图像并为图像设置链接地址； • 选择“窗口”|“时间轴”命令； • 将层拖放到时间轴上，弹出“Dreamweaver 8”提示系统，如下图所示。

任务一：网页中行为的使用 • 点击“确定”按钮。在两个关键帧之间单击鼠标右键，在弹出的快捷菜单中选择“录制层路径”，如下图所示。 • 拖动层，随意的在设计窗口中移动，出现路径点。把层移动到需要的位置，释放鼠标，路径就会变成细线； • 时间轴中用点来显示运动轨迹的关键点，将时间轴上的选中自动播放和循环选项； • 保存文件，并按下F12键在浏览器中浏览效果。

任务二：插入多媒体对象 任务实施在网页中多媒体技术是经常应用的，就目前而言，可以插入网页的多媒体元素包括Flash电影、Java小程序、音频或者视频对象等。插入这些对象可以实现更多的网页效果。

任务二：插入多媒体对象 操作步骤插入Flash对象插入FLV视频文件插入音乐

任务二：插入多媒体对象 选择菜单【插入】|【媒体】|【SWF】，或者在【插入】工具栏上【常用】标签下的【媒体】按钮组中的swf按钮按F12预览效果。注意：Flash的原始文件扩展名为.fla，将影片运用在网页之前，必须通过Flash软件将影片导出成.swf格式。

任务二：插入多媒体对象 FLV是一种新兴的网络视频格式，这种视频文件体积小巧，清晰的FLV视频是普通视频文件体积的1/3。再加上CPU占有率低、视频质量良好等特点使其在网络上盛行。在【插入】工具栏上【常用】标签下的【媒体】按钮组中点击flw按钮; 按F12预览 .

任务二：插入多媒体对象 • 比较FLA、SWF和 FLV文件 • 此类型的文件只能在 Flash 中打开，而无法在 Dreamweaver 或浏览器中打开。可以在 Flash 中打开 FLA 文件，然后将它发布为 SWF 或 SWT 文件以在浏览器中使用。 • FLA (.fla) 文件的编译版本，已进行优化，可以在 Web 上查看。但不能在 Flash 中编辑此文件。 • FLV(.flv)流媒体格式是一种新的视频格式，全称为Flash Video。文件极小、加载速度极快，它的出现有效地解决了视频文件导入Flash后，使导出的SWF文件体积庞大，不能在网络上很好的使用等缺点。

任务二：插入多媒体对象 • 比较Director与Flash • Director与Flash有许多相同的特性：流式音效、视频、支持矢量图形和位图，以及互动程序。Director中的程序语言称为Lingo。 Director还具备操控3D模型、控制视频和音效的功能，而且处理位图的能力也比Flash优异，它甚至可以包含和控制Flash电影文件。 • Flash较容易学习，而且文件体积和跨平台能力比Director还要好。由于Flash项目开发比较容易，而且几乎所有的个人电脑都有安装Flash播放程序（外挂元件），因此成了制作网页互动界面的不二选择。

任务二：插入多媒体对象 使用添加，插入的音乐可以与声音播放器一同直接添加到网页中，浏览时直接看到的是播放器，按一下播放按钮就可以开始欣赏音乐。注：浏览器不同，处理声音文件的方式也会有很大差异和不一致的地方。您最好将声音文件添加到 SWF 文件中，然后嵌入该 SWF 文件以改善一致性。在【插入】工具栏上【常用】标签下的【媒体】按钮组中按钮按F12预览

任务二：插入多媒体对象 在网上浏览的页面通常会听到一些背景音乐，或者是在页面中链接一些音乐文件。网页添加的声音有多种不同类型和格式，例如 .wav、.midi 和 .mp3 。注：浏览器不同，处理声音文件的方式也会有很大差异和不一致的地方。您最好将声音文件添加到 SWF 文件中，然后嵌入该 SWF 文件以改善一致性。

任务二：插入多媒体对象 • Web页面中可以使用多种不同的方法添加声音，我们使用添加。插入的音乐可以与声音播放器一同直接添加到网页中，浏览时直接看到的是播放器，按一下【播放】按钮就可以开始欣赏音乐。想一想：在页面中插入音频文件的方法，在页面中，我们可以看到播放器，那如果想插入背景音乐，隐藏播放器，该如何操作呢？

任务二：插入多媒体对象 • 比较声音文件类型 • MIDI或MID • 乐器声音的MIDI文件，能够被大多数浏览器所支持，不需要插件，但会受到用户声卡的影响 • WAV • 具有较高的声音质量，能够被大多数浏览器所支持，不需要插件。用户可以使用CD、磁带、麦克风来录制声音，但文件通常较大，会受到网页存储空间的限制。 • AIF • 具有较高质量，和WAV声音相似 • MP3 • 一种压缩格式的声音，文件尺寸很小，且具有较高的质量。播放MP3文件，观众必须安装相应的帮助程序或插件

任务二：插入多媒体对象 • RA、RAM、RPM、和Real Audio • 经过高度压缩后的声音文件，可以快速被下载，但质量却较低，因此需要使用新的播放器或编码器来提高质量。为了播放这些文件，用户必须下载和安装RealPlayer帮助程序或插件。

任务二：插入多媒体对象 知识扩展如applet、ActiveX 控件等其他多媒体控件的插入方法和上述多媒体对象的方法基本一致。

任务三：网页中框架的应用 任务实施以“奥运福娃”为主体制作一个主页，要求是【上方固定，左侧嵌套】的框架结构，在上方页面显示标题文本，左侧页面做导航链接，点击不同的链接文本，右侧显示对应的页面。

任务三：网页中框架的应用 操作步骤制作网页“top.html”,其中输入文字“奥运福娃”，并设置为粉红色，华文新魏字体，48号，居中；制作网页“left.html”,其中输入“Flash”、“FLV视频”、“音频”三组文字，并设置为粉红色，华文新魏字体，24号，居中；新建网页“kjfw.htm”,添加框架集为【上方固定，左侧嵌套】；为三个框架重新命名分别为：top,left,main。将文件top.htm、left.htm和fuwa.htm分别在三个框架中打开；

任务三：网页中框架的应用 为left框架中的文字分别作链接，具体如下表；保存框架及框架集，选择菜单中的【文件】|【保存全部】命令。

任务三：网页中框架的应用 框架是用来在浏览器窗口中装载多个HTML文件，每个HTML文件占据一个框架。多个框架可以同时显示在同一个浏览器窗口中，这时它们就组成了一个一个包含多个HTML文档的HTML文件也称为主文档。在一个浏览器窗口中显示不止一个HTML文档。这样的HTML文档被称为框架页面，它们是相互独立的。框架的作用是拆分浏览器窗口画面，让同一个浏览器窗口能够呈现数个不同的网页画面。

任务三：网页中框架的应用 • 使用框架的优缺点 • 优点：浏览者的浏览器不必每次重新加载每个页面浏览相关图片，可以节省等待画面的时间。 • 缺点：并非所有浏览器都可以完全地支持框架，它们可以造成部分浏览者无法浏览框架；

任务三：网页中框架的应用 删除框架只需选中框架边框，将框线拖拽到编辑区以外，框线若是消失，就代表删除完成。

知识扩展 • 拼图游戏制作操作步骤： • 使用fireworks制作网页素材 • 使用Fireworks制作网页标题“拼图游戏”； • 使用Fireworks制作拼图切片，借助于网格线； • 使用Fireworks制作游戏背景，使图片透明化； • 使用Fireworks制作游戏功能按钮，开始游戏和重置游戏按钮。

使用Dreamweaver制作网页主界面 • 在Dreamwear中新建文件，插入层，并将标题图片插入该层中； • 在Dreamweaver中插入3行4列的表格，表格大小和背景图片大小一样； • 在表格内将切片依次插入表格中； • 选中表格，选择“修改”|“转换”|“表格到层”命令，在弹出的对话框中，选中“防止层重叠”，取消“靠齐到网格”选项，将表格转换为层，； • 在层面板中，取消“防止重叠”选项，在空白处新建层，插入背景图片； • 移动背景图片层到切片图像表格相同的位置； • 将背景图层置于最底层。

使用Dreamweaver制作动画效果 • 选择“窗口”|“时间轴”，将原表格第1个单元格中的层拖拽到时间轴的第1个通道的第10帧的位置； • 单击时间轴第1个通道的24帧，将切片对象层移动到要飞离的位置； • 选中第2个单元格中的图层拖拽到第2个通道的第20帧的位置，在第34帧的位置移动切片对象层到要飞离的位置； • 使用同样的方法依次设置其他切片层； • 利用层插入“开始游戏” 按钮，移动该层到背景图片中间的位置，拖拽该层到时间轴第13通道第1帧位置，调整结束帧为第9帧； • 单击结束帧，将按钮层移动到标题图像的右侧位置； • 利用层插入“重置按钮”，并将该层放置在“开始游戏”按钮的位置；

将“重置按钮”层和切片层隐藏，选中时间轴上的“自动播放”选项，保存预览效果。将“重置按钮”层和切片层隐藏，选中时间轴上的“自动播放”选项，保存预览效果。 • 使用Dreamweaver添加行为 • 单击B通道的第10帧位置，使用“行为”面板设置“开始按钮”层为隐藏，“重置按钮”层为显示； • 使用同样方法将所有切片层显示； • 单击第1帧，选中开始按钮图像的层，使用行为面板添加“时间轴”|“播放时间轴”，设置事件为onclick； • 在层面板中，单击重置按钮层，选中其中的图像，添加行为“时间轴”|“转到时间轴帧”，设置前往帧为“10”,设置事件为onclick ； • 选中“自动播放”和“循环”选项； • 保存和预览效果

用Dreamweaver制作可移动层 • 选中body标签，添加拖动层行为； • 在层对话框中选中第一个切片层，设置如下图： • 其他切片层的设置同第一个切片层； • 保存并预览效果。

项目 五 ： 复杂 网页设计与制作