常见动态特效的制作课件.pptx

学习目标 能够在标题栏设置动态效果 能够在状态栏设置动态效果 能够制作出 “添加到收藏夹”的功能 能够在网页中显示获取的系统时间和日期10.1.1 案例制作：为网页“诗词新苑”制作动态效果最终效果如图所示。10.1.1 案例制作：为网页“诗词新苑”制作动态效果1）定义站点。新建文件夹“ShiciXinyuan”，将素材中所有的文件和文件夹拷贝到“ShiciXinyuan”文件夹。在Dreamweaver CC 2015中新建站点，站点名称为“诗词新苑”，站点文件夹定义为文件夹“ShiciXinyuan”。2）设置添加到收藏夹。假如本网站的网址为http://www.SCXY.com，打开index.html文件，选择文本“添加收藏”，切换到代码视图，将“添加收藏”前后输入如下代码。a href=javascript:window.external.AddFavorite(http://www.SCXY.com, 诗词新苑)加入收藏/a3）切换到设计视图，“添加收藏”如图所所示，“添加收藏”是一个超链接，可以使用伪锚记CSS规则美化。10.1.1 案例制作：为网页“诗词新苑”制作动态效果4）创建伪锚记CSS规则①添加a:link选择器。在“属性”窗格中将“Font-size”设置为“13px”；“Color”设置为“#FFFFFF”；“Text-decoration”设置为“none”。③添加a:visited选择器。在“属性”窗格中将“Font-size”设置为“13px”；“Color”设置为“#FFFFFF”；“Text-decoration”设置为“none”。④添加a:hover选择器。在“属性”窗格中将“Font-size”设置为“13px”；“Color”设置为“#F8FF00”；“Text-decoration”设置为“none”。⑤添加a:active选择器。在“属性”窗格中将“Font-size”设置为“13px”；“Color”设置为“#F8FF00”；“Text-decoration”设置为“underline”。“添加收藏”如图所示。10.1.1 案例制作：为网页“诗词新苑”制作动态效果5）保存，预览，点击“添加收藏”，会打开“添加收藏”对话框，点击“确定”按钮，可以将本网站添加到收藏夹。10.1.1 案例制作：为网页“诗词新苑”制作动态效果6）设置标题栏动态效果。切换到代码视图，将光标定位在head/head标签之间，输入如下代码：script language=javascripta=::::::::诗词新苑欢迎您!::::::::　function title(){a=a+a.substring(0,1)a=a.substring(1,a.length)document.title=a setTimeout(title(),500)}title() /script10.1.1 案例制作：为网页“诗词新苑”制作动态效果7）设置背景音乐。将光标定位在head/head标签之间，输入如下代码：bgsound loop=-1 src=other/bgmusic.mp3 /8）预览，观察效果，同时，可以听到背景音乐的声音。到此本实例制作完毕。10.1.2　新知解析　1. 什么是脚本 脚本语言是一种在互联网上广为传播、使用的特效程序语言，是一种不需要编译的语言。网页中常用的有JavaScript和VBScript两种。JavaScript自身具有高效代码和开放性，基于客户端浏览器，具有简单性、动态性、跨平台性、节省CGI的交互时间等特点，得到了广泛应用。　2. Script脚本的插入与应用　在head与/head之间插入JavaScript脚本，JavaScript脚本要放在script language=jscript/script标签中间。例如案例制作中设置动态状态栏和背景音乐的脚本代码的插入。　3. 常见的Script脚本脚本特效　（１）添加到收藏夹　代码如下。 a　href=javascript:window.external.addfavorite(,天鹅大观) class=STYLE1添加到收藏夹/a该代码是将网址为“”、网页的标题为“天鹅大观”的网站的首页添加到收藏夹中。其中，STYLE1是网页中创建的样式。只要替换网址和标题名称即可。　（2）标题栏与状态栏走马灯效果　将光标定位在head/head标签之间，输入代码即可。标题栏走马灯效果的代码如下：　SCRIPT language=JavaScript　a=::::::::欢迎来到天鹅大观网站!::::::::　//为变量a赋值.。　function bb() //定义函数bb（）　{　a=a+a.substring(0,1) //将变量a与