Embed Size (px)
DESCRIPTION
项目 五 ： 复杂 网页设计与制作. 项目 五 ： 复杂 网页设计与制作. 任务一： 网页中行为的应用 任务二：网页中 多媒体对象的引用 任务三： 网页中框架的使用. 任务一： 网页中行为 的使用. 任务实施 很多页面通过使用 JavaScript 客户端脚本语言来实现多种页面动态效果， Dreamweaver 为我们提供了一个不用用户书写文本代码也可以实现交互性很强的动态网页的工具 —— 行为，行为实际上是 JavaScript 脚本程序的可视化开发工具。在使用行为时， Dreamweaver 自动生成相应的 JavaScript 代码。每一个行为，都包括事件和行为两部分。. - PowerPoint PPT Presentation
Citation preview
项目五：复杂网页设计与制作项目五：复杂网页设计与制作
项目五：复杂网页设计与制作项目五：复杂网页设计与制作任务一：网页中行为的应用任务二：网页中多媒体对象的引用任务三：网页中框架的使用
任务一：网页中行为的使用任务实施 很多页面通过使用 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 框架中的文字分别作链接，具体如下表；
保存框架及框架集，选择菜单中的【文件】 |【保存全部】命令 。
文本 flash flv music
链接文件 flash.htm flv.htm music.htm
任务三：网页中框架的应用框架 是用来在浏览器窗口中装载多个 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 标签，添加拖动层行为；在层对话框中选中第一个切片层，设置如下图：
其他切片层的设置同第一个切片层；保存并预览效果。
