第10章-常见动态特效的制作.ppt

Click to edit Master text styles,Second level,Third level,Fourth level,Fifth level,10.,*,第,10,章常见动态特效的制作,学习目标,能够在标题栏设置动态效果,能够在状态栏设置动态效果,能够制作出“添加到收藏夹”的功能,能够在网页中显示获取的系统时间和日期,10.1.1,案例,制作：为网页,“,诗词新苑,”,制作动态效果,最终效果如图所示。,10.1.1,案例,制作：为网页,“,诗词新苑,”,制作动态效果,1,）定义站点。新建文件夹,“,ShiciXinyuan,”,，将素材中所有的文件和文件夹拷贝到,“,ShiciXinyuan,”,文件夹。在,Dreamweaver CC 2015,中新建站点，站点名称为,“,诗词新苑,”,，站点文件夹定义为文件夹,“,ShiciXinyuan,”,。,2,）设置添加到收藏夹。假如本网站的网址为,www.SCXY.com,，打开,index.html,文件，选择文本,“,添加收藏,”,，切换到代码视图，将,“,添加收藏,”,前后输入如下代码。,加入收藏,3,）切换到设计视图，,“,添加收藏,”,如图所所示，,“,添加收藏,”,是一个超链接，可以使用伪锚记,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,）设置标题栏动态效果。切换到代码视图，将光标定位在,标签之间，输入如下代码：,a=:,诗词新苑欢迎您,!:,function title(),a=a+a.substring(0,1),a=a.substring(1,a.length),document.title=a,setTimeout(title(),500),title(),10.1.1,案例,制作：为网页,“,诗词新苑,”,制作动态效果,7,）设置背景音乐。将光标定位在,标签之间，输入如下代码：,8,）预览，观察效果，同时，可以听到背景音乐的声音。到此本实例制作完毕。,1.,什么是脚本,脚本语言是一种在互联网上广为传播、使用的特效程序语言，是一种不需要编译的语言。网页中常用的有,JavaScript,和,VBScript,两种。,JavaScript,自身具有高效代码和开放性，基于客户端浏览器，具有简单性、动态性、跨平台性、节省,CGI,的交互时间等特点，得到了广泛应用。,2.Script,脚本的插入与应用,在,与,之间插入,JavaScript,脚本，,JavaScript,脚本要放在,标签中间。例如案例制作中设置动态状态栏和背景音乐的脚本代码的插入。,10.1.2,新知解析,3.,常见的,Script,脚本脚本特效,（）添加到收藏夹,代码如下。,添加到收藏夹,该代码是将网址为,“,”,、网页的标题为,“,天鹅大观,”,的网站的首页添加到收藏夹中。其中，,STYLE1,是网页中创建的样式。只要替换网址和标题名称即可。,（,2,）标题栏与状态栏走马灯效果,将光标定位在,标签之间，输入代码即可。标题栏走马灯效果的代码如下：,a=:,欢迎来到天鹅大观网站,!:,/,为变量,a,赋值,.,。,function bb()/,定义函数,bb,（）,a=a+a.substring(0,1),/,将变量,a,与从变量,a,中取出的字符串相连，并赋给变量,a,，,/,其中，,a.substring(0,1),表示从变量,a,中取字符串，从第,0,个,/,字符开始取,1,个字符。,a=a.substring(1,a.length)/,从字符串变量,a,中取字符串，从第,1,开始取，共取,a.length,个，,/,其中，,a.length,表示字符变量,a,的长度。,document.title=a /,将变量,a,赋给标题栏变量。,setTimeout(bb(),500),/,每隔,500,毫秒刷新一次函数,bb(),。,bb()/,调用函数,bb(),。,（,4,）获取显示当前系统时间和日期,为了方便用户查看当前日期与时间，在状态栏显示当前日期与时间，可以在网页中,标签内输入如下代码。,!-,function shijian(),/,定义,shijian(),函数,today=new Date();,/,创建当前日期对象,today,var week_day;,/,定义星期几的变量,var date;,/,定义日期变量,if(today.getDay()=0),/,判断获取星期的值，如果为,0,，则为,week_day,赋值“星期日”。,week_day=,星期日,if(today.getDay()=1),/,如果为,1,，则为,week_day,赋值“星期一”。,week_day=,星期一,if(today.getDay()=2),/,如果为,2,，则为,week_day,赋值“星期二”。,week_day=,星期二,if(today.getDay()=3),/,如果为,3,，则为,week_day,赋值“星期三”。,week_day=,星期三,if(today.getDay()=4),/,如果为,4,，则为,week_day,赋值“星期四”。,week_day=,星期四,if(today.getDay()=5),/,如果为,5,，则为,week_day,赋值“星期五”。,week_day=,星期五,if(today.getDay()=6),/,如果为,6,，则为,week_day,赋值“星期六”。,week_day=,星期六,date=(today.getYear()+,年,+(today.getMonth()+1)+,月,+today.getDate()+,日,;,/getYear(),获取年份，,getMonth(),获取月份，,getDate(),获取日期,h=today.getHours(),/getHours(),获取时；,m=today.getMinutes(),/getMinutes(),获取分；,s=today.getSeconds(),/getSeconds(),获取秒；,if(h=9),/,如果时小于,9,，则小时前补,0,；,h=0+h,if(m=9),/,如果分小于,9,，则分前补,0,；,m=0+m,if(s,如果要在网页中显示时间可以将,window.status=,当前时间：,+date+week_day+time,和,setTimeout(shijian(),1000),这两行代码换为,document.write(+,当前时间,+date+week_day+time+),，在相应的位置输入上述代码即可。其中,style1,为网页中创建的样式。,10.1.3,实战演练：为,“,玫瑰文化,”,网页添加动态效果,最终效果如图所示。,10.1.3,实战演练,：,为,“,玫瑰文化,”,网页添加动态效果,1,）定义站点。新建文件夹,“,MeiGui,”,，将素材中所有的文件和文件夹拷贝到,“,MeiGui,”,文件夹。在,Dreamweaver CC 2015,中新建站点，站点名称为,“,玫瑰文化,”,，站点文件夹定义为文件夹,“,MeiGui,”,。,2,）设置标题栏动态效果。将光标定位在,标签之间，输入如下代码，保存，预览。,10.1.3,实战演练,：,为,“,玫瑰文化,”,网页添加动态效果,a=:,欢迎来到玫瑰文化网站首页,!:,function bb(),a=a+a.substring(0,1),a=a.substring(1,a.length),document.title=a,setTimeout(bb(),500),bb(),10.1.3,实战演练,：,为,“,玫瑰文化,”,网页添加动态效果,3,）设置状态栏动态时间效果。将光标定位在,标签之间，,输入代码,。保存，预览,。,4,）设置背景音乐。将光标定位在,标签之间，输入以下代码，保存，预览。,5,）预,览效果,，到此本实例制作完毕。,