实战Dreamweaver CC 网页制作教程 第4版 课件 第10章 常见动态特效的制作_第1页
实战Dreamweaver CC 网页制作教程 第4版 课件 第10章 常见动态特效的制作_第2页
实战Dreamweaver CC 网页制作教程 第4版 课件 第10章 常见动态特效的制作_第3页
实战Dreamweaver CC 网页制作教程 第4版 课件 第10章 常见动态特效的制作_第4页
实战Dreamweaver CC 网页制作教程 第4版 课件 第10章 常见动态特效的制作_第5页
已阅读5页，还剩15页未读， 继续免费阅读

下载本文档

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

文档简介

学习目标

能够在标题栏设置动态效果能够在状态栏设置动态效果能够制作出“添加到收藏夹”的功能能够在网页中显示获取的系统时间和日期10.1.1案例制作：为网页“诗词新苑”制作动态效果最终效果如图所示。10.1.1案例制作：为网页“诗词新苑”制作动态效果1）定义站点。新建文件夹“ShiciXinyuan”，将素材中所有的文件和文件夹拷贝到“ShiciXinyuan”文件夹。在DreamweaverCC2015中新建站点，站点名称为“诗词新苑”，站点文件夹定义为文件夹“ShiciXinyuan”。2）设置添加到收藏夹。假如本网站的网址为http://www.SCXY.com，打开index.html文件，选择文本“添加收藏”，切换到代码视图，将“添加收藏”前后输入如下代码。<ahref="javascript:window.external.AddFavorite('http://www.SCXY.com','诗词新苑')">加入收藏</a>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）设置标题栏动态效果。切换到代码视图，将光标定位在<head></head>标签之间，输入如下代码：<scriptlanguage="javascript">a="::::::::诗词新苑欢迎您!::::::::"

functiontitle(){a=a+a.substring(0,1)a=a.substring(1,a.length)document.title=asetTimeout("title()",500)}title()</script>10.1.1案例制作：为网页“诗词新苑”制作动态效果7）设置背景音乐。将光标定位在<head></head>标签之间，输入如下代码：<bgsoundloop="-1"src="other/bgmusic.mp3"/>8）预览，观察效果，同时，可以听到背景音乐的声音。到此本实例制作完毕。

1.什么是脚本脚本语言是一种在互联网上广为传播、使用的特效程序语言，是一种不需要编译的语言。网页中常用的有JavaScript和VBScript两种。JavaScript自身具有高效代码和开放性，基于客户端浏览器，具有简单性、动态性、跨平台性、节省CGI的交互时间等特点，得到了广泛应用。

2.Script脚本的插入与应用在<head>与</head>之间插入JavaScript脚本，JavaScript脚本要放在<scriptlanguage="jscript"></script>标签中间。例如案例制作中设置动态状态栏和背景音乐的脚本代码的插入。10.1.2新知解析

3.常见的Script脚本脚本特效（１）添加到收藏夹代码如下。

<a

href="javascript:window.external.addfavorite('','天鹅大观')"class="STYLE1">添加到收藏夹</a>该代码是将网址为“”、网页的标题为“天鹅大观”的网站的首页添加到收藏夹中。其中，STYLE1是网页中创建的样式。只要替换网址和标题名称即可。（2）标题栏与状态栏走马灯效果将光标定位在<head></head>标签之间，输入代码即可。标题栏走马灯效果的代码如下：

<SCRIPTlanguage=JavaScript>

a="::::::::欢迎来到天鹅大观网站!::::::::"

//为变量a赋值.。

functionbb()//定义函数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()。

</script>（4）获取显示当前系统时间和日期为了方便用户查看当前日期与时间，在状态栏显示当前日期与时间，可以在网页中<head></head>标签内输入如下代码。

<SCRIPTlanguage=JavaScript>

<!--

functionshijian()//定义shijian()函数

{

today=newDate();//创建当前日期对象today

varweek_day;//定义星期几的变量

vardate;

//定义日期变量

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"+hif(m<=9)//如果分小于9，则分前补0；

m="0"+m

if(s<=9)//如果秒小于9，则秒前补0；

s="0"+s

time=h+":"+m+":"+s

//将变量h（时）的值、变量m（分）的值、s变量（秒）的值赋

//给变量time；

window.status="当前时间："+date+week_day+""+time

//输出日期与时间；

setTimeout("shijian()",1000)

}

shijian()//调用shijian()函数；

//-->

</SCRIPT>如果要在网页中显示时间可以将window.status="当前时间："+date+week_day+""+time和setTimeout("shijian()",1000)这两行代码换为document.write("<spanclass='style1'>"+"当前时间"+date+week_day+""+time+"</span>")，在相应的位置输入上述代码即可。其中style1为网页中创建的样式。10.1.3实战演练：为“玫瑰文化”网页添加动态效果最终效果如图所示。10.1.3实战演练：为“玫瑰文化”网页添加动态效果1）定义站点。新建文件夹“MeiGui”，将素材中所有的文件和文件夹拷贝到“MeiGui”文件夹。在DreamweaverCC2015中新建站点，站点名称为“玫瑰文化”，站点文件夹定义为文件夹“MeiGui”。2）设置标题栏动态效果。将光标定位在<head></head>标签之间，输入如下代码，保存，预览。10.1.3实战演练：为“玫瑰文化”网页添加动态效果<scriptlanguage="jscript">a="::::::::欢迎来到玫瑰文化网站首页!::::::::"

functionbb(){a=a+a.substring(0,1)a=a.substring(1,a.length)docu

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

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

最新文档

评论

0/150

提交评论