Download
1 / 33
330 likes | 465 Views
项目 五 ： 复杂 网页设计与制作. 项目 五 ： 复杂 网页设计与制作. 任务一： 滑 动折叠菜单的制作 任务二：树型目录的制作 任务三： 网页中框架的使用. 任务一： 滑动折叠菜单的制作. 任务实施 在网页中经常会碰到弹出式菜单的动态效果，本任务主要是制作动态的折叠菜单，希望同学们能够灵活的运用。. 任务一： 滑动折叠菜单的制作. 制作的步骤 首先绘制图层 layer1 ，在其中插入单线表格，并在单元格中输入折叠菜单的菜单项； 绘制图层 layer2 ，在其中插入单线表格，并在单元格中输入子菜单项； 为子菜单项设置链接
E N D
项目五：复杂网页设计与制作 任务一：滑动折叠菜单的制作 任务二：树型目录的制作 任务三：网页中框架的使用
任务一：滑动折叠菜单的制作 任务实施 在网页中经常会碰到弹出式菜单的动态效果，本任务主要是制作动态的折叠菜单，希望同学们能够灵活的运用。
任务一：滑动折叠菜单的制作 制作的步骤 • 首先绘制图层layer1，在其中插入单线表格，并在单元格中输入折叠菜单的菜单项； • 绘制图层layer2，在其中插入单线表格，并在单元格中输入子菜单项； • 为子菜单项设置链接 • 选中layer2层，并将其添加到时间轴1的第一帧的位置； • 新建时间轴2，同样添加layer2到第1帧的位置； • 设置时间轴1上第1帧layer2的高度为0，设置时间轴2上第15帧layer2的高度为0； • 为layer1中的第一个菜单项添加行为。选中表格的第一列，在行为面板中添加播放时间轴1，事件为OnMouseOver;
任务一：滑动折叠菜单的制作 • 按照同样方法依次添加行为如下： • 选中layer2,添加行为如下表：
任务二：树型目录的制作 • 新建CSS样式表类名为.tree，背景为“close.gif”,不重复，方框分类设置如下图： • 新建CSS规则类名为.back，设置方框分类左侧为18像素； • 新建CSS规则类名为.file，设置背景为“file.gif”,不重复，方框分类左侧18px;
任务二：树型目录的制作 添加一个6行1列单线表格table1，在第1行、第3行、第5行中分别应用样式.tree； 在第2行、第4行、第6行中分别插入一个3行1列的单线表格a1，a2，a3; 在a1的第1行中应用样式.tree，在第2行中插入2行1列的单线表格a11; 应用样式.file分别到表格a11的2个行； 在表格a1的第3行中应用样式.file； 表格a2、a3中的各行分别应用样式.file； 选择【窗口】|【代码片段】菜单，在其中找到【javascript】|【可读取的MM函数】|【查找对象】；
任务二：树型目录的制作 切换到代码视图，拖动【查找对象】到</style>和</head>之间； 单击空白处，为页面添加行为，具体如下： 将鼠标定位在table1的第1行，在行为面板中添加onClick事件，对应的代码为：“with(findObj(‘a1’).style){display=display==‘’?‘none’:‘’}”，
任务一：网页中行为的使用 再添加onClick事件，对应的代码为：“with(findObj(‘a1’).style){this.style.backgroundImage=display!=‘none’?‘url(open.gif)’:‘url(close.gif)’}”； 为a11,a2,a3处均添加类似的代码； 保存文件，浏览效果。
任务一：网页中行为的使用 • 点击“确定”按钮。在两个关键帧之间单击鼠标右键，在弹出的快捷菜单中选择“录制层路径”，如下图所示。 • 拖动层，随意的在设计窗口中移动，出现路径点。把层移动到需要的位置，释放鼠标，路径就会变成细线； • 时间轴中用点来显示运动轨迹的关键点，将时间轴上的选中自动播放和循环选项； • 保存文件，并按下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标签，添加拖动层行为； • 在层对话框中选中第一个切片层，设置如下图： • 其他切片层的设置同第一个切片层； • 保存并预览效果。
