添加网页特效_第1页
添加网页特效_第2页
添加网页特效_第3页
添加网页特效_第4页
添加网页特效_第5页
已阅读5页，还剩22页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

添加网页特效本章内容在网站设计中的地位本章主要讲述如何在网页中添加网页特效，增加网页观赏性和互动性。使用网页特效，其目的在于使网站更加新颖、美观，提高网站友好度，增加网站访问量。DreamweaverCS3为用户提供了方便的特效插入方法——行为，使用户不必学习枯燥的代码就可以创建丰富多彩的网页特效。本章要点滚动图文的制作；多媒体元素的插入；行为的三要素；行为面板的使用；弹出窗口的设计；使用交换图像美化导航栏。教学目标通过本章的案例学习，要求用户掌握滚动文本的制作方法；掌握多媒体元素的插入方法；了解行为的作用原理，掌握行为的添加方法；在网页中灵活使用行为，创建符合页面特点的特效。8.1.1<marquee>标签的使用1．<marquee>标签<marquee>标签通常用于设置单元格中文本或图像的滚动效果，以达到醒目、个性的显示效果，同时，使用<marquee>标签创建滚动字幕公告，可以提高网页显示区域的利用率，即用较小的空间显示尽可能多的信息。

2．标签属性属性名含义direction表示滚动的方向，值可以是left、right、up、down，默认为leftbehavior表示滚动的方式，值可以是scroll(连续滚动)、slide(滑动一次)、alternate(来回滚动)loop表示循环的次数，值是正整数，默认为无限循环scrollamount表示运动速度，值是正整数，默认为6scrolldelay表示停顿时间，值是正整数，默认为0，单位是msalign表示元素的垂直对齐方式，值可以是top、middle、bottom，默认为middlebgcolor表示运动区域的背景色，值是十六进制的RGB颜色，默认为白色height、width表示运动区域的高度和宽度，值是正整数(单位是像素)或百分数，默认width=100%；height为标签内元素的高度hspace、vspace表示元素到区域边界的水平距离和垂直距离，值是正整数，单位是像素onmouseover=this.stop()onmouseout=this.start()表示当鼠标以上区域的时候滚动停止，当鼠标移开的时候又继续滚动3．语法<marquee>是一个双标签，在使用时，需要指定其实用的区块。如：<marquee>这是一段滚动文本。</marquee>但在实际应用中，<marquee>标签通常需要搭配其属性使用，以调整滚动速度、频率、滚动范围大小，否则，预览后的滚动效果既快又不连贯。

“滚动公告”网页案例在本案例中，我们实现公告的步骤如下。(1)切换工作区到“拆分视图”，将光标定位到“公告栏”下方单元格。(2)写入公告文本，调整文本字号为12px。(3)在上方代码视图中，在公告文本两端写入如下代码：<marqueedirection="up"scrollamount="1"width="90%"height="150"onmouseover="this.stop()"onmouseout="this.start()">公告栏中的文本内容：</marquee>(4)按F12键预览页面。通常使用scrollamount和scrolldelay两个属性调整文本的滚动效果。默认情况下，scrollamount值为6，scrolldelay值为0。本案例中为了使滚动文本更平滑，调整scrollamount属性值为1，使滚动速度变慢。8.2.1常用的音频格式声音能极好地烘托网页页面的氛围，网页中常见的声音格式有WAV、MP3、MIDI、WMA、RM等。

几种音频格式的特点音频格式主要特点.WAVWaveAudioFiles(波形声音文件)是微软公司开发的一种声音文件格式，是最早的数字音频格式。可以从麦克风、CD、磁带等输入设备录制WAV文件。该文件具有较好的声音品质，但文件体积较大(1min约占10MB左右)，不便于网络交流与传播。有时用于网页中较短的声音特效.MP3MPEG-AudioLayer-3是采用国际标准MPEG中的第三层音频压缩模式对声音信号进行压缩的一种声音格式。优点：压缩比高(1minMP3格式文件只有1MB左右)、音质较好.MIDI或.MIDMusicalInstrumentDigitalInterface(数字接口电子乐器)使用电子合成器制作出来的音乐，采用数字方式对乐器的声音进行记录，播放时再对这些记录进行合成。优点：文件非常小，适用于网页背景音乐、游戏软件或手机铃声。网络上各种流行的播放器都支持播放.WMAWindowsMediaAudio是微软开发的音频格式。WMA格式具有比MP3更高的压缩比(生成的文件大小只有相应MP3文件的一半)并支持流媒体技术，可以一边下载一边播放，适合于网络上使用。安装Windowsmediaplayer播放器即可播放.RM或.RAMRealMedia是RealNetworks公司开发的网络流媒体格式，具有比MP3、WMA格式更高的压缩比，支持“流式”播放，可以根据网络传输速率制作出不同的压缩比率，从而实现在低速率的网络上进行音频数据的实时传送和播放。安装RealPlayer播放器可以实现在线播放插入音频1．使用<bgsound>标签嵌入背景音乐在网页中添加背景音乐可以使用<bgsound>标签具体步骤如下。(1)打开需要添加背景音乐的页面，切换到代码视图。(2)在<head>和</head>之间输入“<”，在弹出的代码提示框中选择“bgsound”，插入背景音乐代码。(3)用鼠标右键单击bgsound，在弹出的快捷菜单中选择“编辑标签”，弹出“标签编辑器-bgsound”对话框，如图。其中各参数的含义如下。①“源”：设置音乐文件的路径，单击“浏览”按钮选择背景音乐文件。②“循环”：设置音乐循环的次数，“-1”为无限次循环。③“平衡”：音乐的左右平衡。④“音量”：音乐的音量设置，取值范围0～100。⑤“延迟”：音乐播放时的延迟。(4)设置完毕后单击“确定”按钮，<bgsound>标签嵌入的背景音乐在页面上并不显示。各参数的含义如下。①“源”：设置音乐文件的路径，单击“浏览”按钮选择背景音乐文件。②“循环”：设置音乐循环的次数，“-1”为无限次循环。③“平衡”：音乐的左右平衡。④“音量”：音乐的音量设置，取值范围0～100。⑤“延迟”：音乐播放时的延迟。(4)设置完毕后单击“确定”按钮，<bgsound>标签嵌入的背景音乐在页面上并不显示。2．使用<embed>标签嵌入多媒体文件embed标签可以用来插入各种多媒体文件，可以是音频、视频或.swf格式等，其中的参数因不同的文件格式而异。使用<embed>标签插入声音文件的步骤如下。(1)打开需要插入声音文件的页面，切换到代码视图。(2)输入“<”，在弹出的代码提示框中选择embed。(3)用鼠标右键单击embed，在弹出的快捷菜单中选择“编辑标签”，弹出“标签编辑器-embed”对话框。(4)设置完毕后单击“确定”按钮。3．使用添加插件插入声音文件若对html语言中的标签不是很熟悉的用户，也可以使用添加插件的方法插入多媒体文件。使用添加插件插入声音文件的步骤如下。(1)打开需要插入声音文件的页面，将鼠标置于插入点处。(2)选择“插入记录”→“媒体”→“插件”或者单击“插入”面板“常用”类别中“媒体”按钮旁的小箭头，从弹出的菜单中选择“插件”。(3)在弹出的“选择文件”对话框中选择要插入的声音文件，单击“确定”按钮。(4)选中插入的插件图标，在“属性”面板中进一步设置相关参数。“播放音乐”网页案例以下为案例实现步骤。(1)打开dboen.htm，将光标定位到章节内容下方的单元格。(2)单击“插入”面板“常用”类别中“媒体”按钮旁的小箭头，从弹出的菜单中选择“插件。(3)在“选择文件”对话框中选择要使用的音乐文件“bg1.mp3”，单击“确定”按钮。(4)选中插入的插件图标，在属性中把宽度和高度删除。(5)从代码视图中找到<embed>标签对，并在两端添加<DIV>，使播放器居中对齐，最终代码如下：<divalign="center"><embedsrc="music/bg1.mp3"></embed></div>8.3.1行为概述Dreamweaver提供了一种称为“行为”的机制，帮助用户构建页面中的交互行为。行为，就是在网页中进行一系列动作，通过这些动作实现用户与页面的交互，是一个带有面向对象设计思想的工具。行为有3个重要的组成部分：对象、事件和行为。对象是产生行为的主体，许多网页元素都可以成为对象，如图片、文字、多媒体文件等。事件是触发动态效果的条件，它可以被添加到各种页面元素上，也可以被添加到HTML标记中。8.3.2预定义行为1．交换图像交换图像动作可以实现用户执行某个动作后改变页面上显示的图像的效果，要注意改变的是图像的源路经，而原来设置的图像大小不变，最好交换图像的两张图片大小相同，以免图像变形。创建交换图像行为的操作步骤如下。(1)选中要添加行为的对象，通常是图像对象。(2)在“行为”面板中单击按钮打开“动作”菜单，从中选择“交换图像”。(3)在打开的“交换图像”对话框中设置各选项.“交换图像”对话框中各参数含义如下。①“图像”：在列表中显示了页面中所有的图像对象，选择要添加行为的图像。②“设定原始档为”：设置替换图像的路径，可以单击“浏览”按钮从磁盘上选择。③“预先载入图像”：选择该选项，则无论图像是否显示，都会被下载。④“鼠标滑开时恢复图像”：选择该选项，则鼠标离开设定行为的图像对象时，恢复显示原始图像。(4)设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。2．弹出信息弹出信息动作可以在用户执行某个动作后，显示一个信息对话框，起提示信息的作用。创建弹出信息效果的具体操作步骤如下。(1)选中要添加行为的对象。(2)在“行为”面板中单击按钮打开“动作”菜单，从中选择“弹出信息”。(3)在“弹出信息”对话框中的输入要显示的内容。在消息文本框中可以输入文字，也可以使用JavaScript语句。(4)设置完毕后单击“确定”按钮。回到“行为”面板中选择相应的事件。3．显示-隐藏层显示-隐藏层动作可以控制层在网页中的可见性。例如，网页中可以将对某个对象的说明性文字放在一个层内，通过添加显示-隐藏层动作，实现当鼠标移到对象上时显示文字，而当鼠标移开对象时隐藏文字。显示-隐藏层的操作步骤如下。(1)选中要添加行为的对象。(2)在“行为”面板中单击按钮打开“动作”菜单，从中选择“显示-隐藏元素”。(3)在“显示-隐藏元素”对话框中，列出了页面中所有的层。选择要设置的层，单击“显示”按钮则执行显示层的动作，单击“隐藏”则执行隐藏层的动作，单击“默认”则恢复层默认的可见性状态。(4)设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。4．打开浏览器窗口打开浏览器窗口动作可以在一个新的浏览器窗口中载入指定URL地址的文档。打开浏览器窗口的具体操作步骤如下。(1)选中要添加行为的对象。(2)在“行为”面板中单击按钮打开“动作”菜单，从中选择“打开浏览器窗口”。(3)设置“打开浏览器窗口”对话框中各参数。(4)设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。5．效果在DreamweaverCS3中增加了一项“效果”动作，其中包括7种视觉效果，如图8.24所示。例如，制作图像缩放效果的具体步骤如下。(1)选中要添加行为的图像对象。(2)在“行为”面板中单击按钮打开“动作”菜单，选择“效果”中的“增大/收缩”。(3)设置“增大/收缩”对话框中各参数。“增大/收缩”对话框中各参数含义如下。①“目标元素”：从下拉菜单中选择某个对象的ID。如果已经选择了一个对象，则选择“<当前选定内容>”。②“效果持续时间”：定义出现此效果所需的时间，用ms表示。③“效果”：选择要应用的效果：“增大”或“收缩”。④“收缩自”或“增大自”：定义对象在效果开始时的大小，以百分比或像素为单位。⑤“收缩到”或“增大到”：定义对象在效果结束时的大小，以百分比或像素为单位。若选择以像素为单位，“宽/高”域将被激活。⑥“收缩到”：设置元素增大或收缩到页面的左上角还是页面的中心。⑦“切换效果”：选择此选项则该效果是可逆的(连续单击即可增大或收缩)。(4)设置完毕后单击“确定”按钮，回到“行为”面板中选择相应的事件。网站导航栏制作案例对图片添加“交换图像”行为，使得鼠标移到图片上时文字发光。导航栏的实现方

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论