第19课 让网页有声有色
一、教学目标
知识目标：为已现雏形的网站再加修饰,使网站更加活泼精美；
技能目标：1．添加网页背景图片及背景音乐；
2．什么是网页特效，给网站加入特效代码；
情感目标：培养学生尊重知识产权的观念。
情感目标：培养学生尊重知识产权的观念。
二、重点难点
教学重点：1．熟练掌握添加网页背景图片及背景音乐；
2．如何下载复复制特效代码及将其加入网页中。
教学难点：本课难点应该是如何理解“特效代码”。运用特效代码是目前制作网站过程中较常用的技巧。通过网页中发布运行一段语言代码产生一些特殊的效果，如跟随鼠标的文字、变化滚动字幕、自动更新的日期、访客停留时间统计等等。目前，英特网流行的一些特效代码都可通过下载的方式得到，教师可以帮助学生学会怎样修改原代码后使用。对于部分自主意识强烈的学生可以鼓励自己探索如何修改。
三、环境与素材
1．教学环境：多媒体网络教室，学生计算机中安装IE5.0以上版本及Frontpage2000以上中文版，要求能上因特网。
2．教学素材：准备背景图片素材，准备相关的背景音乐,准备一些有代表性的特效代码素材。
四、教学建议
建议课时：1至2课时。
教师在进行本课教学导入时可以采用提问的方式“如何让访问者对你的网站留下一个深刻的印象？”，由学生讨论或是引导过渡至本课的主题--如何给网站润色。课文例举示范了给网站添加背景图片以及背景音乐。这二项技能操作难度不大，课文中还附有了详细的步骤。教师可以让学生对照课本的步骤来完成设置。“教你一招”中分别补充以“审美的角度来看待如何选取作为背景的图片”和“从容量的角度考虑选取背景音乐素材”，教师有必要在课堂中说明，让学生真正掌握制作的网站的细节技巧。
课文的第二部分内容是让学生个性化网站—加入特效代码装饰网站。教师可以事先收录一些简单的特效代码程序。课文中以加入鼠标特效作示范，几乎没有涉及到进一步修改代码的方法，教师可以多增加一些稍有难度的示例，如添加漂浮图片的代码，也可以给有疑问的同学进行个别解答，或提醒学生参考代码修改说明完成。
五、练习实施建议
课后练习1．2是为巩固课本知识点所设计的。练习1要求学生为自己进行润色，其中网页背景和背景音乐由学生自己挑选加入，而练习2中则要求学生自己挑选一个范例以外的特效代码，学会自我变通地修改代码。
练习3中安排了思考题“如何将flash动画作品加入网页页面上？”，能在网页中放置流畅的flash动画是大部分学生所希望的。综合以前几课中从未探讨过这个问题，本身就是留作学生思考探索所设计。教师这里可以给予适当的提示，但不要指明操作，同时鼓励学生可以自己到网上搜索相关的技巧文章，培养学生自学的意识。
六．教学过程（一）添加背景音乐
选择“插入”菜单的高级命令，单击“插件”选项，
在打开的“插件”属性对话框中单击“数据源浏览”按钮，选择要播放的音频文件，我们可以选择扩展名为WAV、MID、SND、AU的音频文件，
（二）添加网页背景(学生课后操作)
上课点拨，修改代码完成：
<BODY BACKGROUND="images/back001.gif" BGCOLOR="#FFFFFF">
</BODY>
（三）给网页加点个性化
淡入淡出的文字效果
将以下代码加入到HEML的<head></head>之间
[根据下面的说明进行共3步]
====1、以下代码放在HTML的<head></head>之间：
<script language="javaScript">
<!--
function checkBrowserForVersion4(){
var x=navigator.appVersion;
y=x.substring(0,4);
if(y>=4) Effect();}
var isNav=(navigator.appName.indexOf("Netscape")!=-1);
var colors=new Array
("FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","FFFFFF","F9F9F9","F1F1F1","E9E9E9","E1E1E1","D9D9D9","D1D1D1","C9C9C9","C1C1C1","B9B9B9","B1B1B1","A9A9A9","A1A1A1","999999","919191","898989","818181","797979","717171","696969","616161","595959","515151","494949","414141","393939","313131","292929","212121","191919","111111","090909","000000")
a=0,b=1
function Effect(){
color=colors[a];
//*改改下面的文字内容即可,可使用HTML语法，但是注意引号不要混用。双引号内是单引号。*//
aa="<font size='5'><font Helvetica, sans-serif'><font color=" color ">Save page and Get Code !<p>Enjoy All These Free Javascripts ......</font></font></font>"
if(isNav) {document.object1.document.write(aa);document.object1.document.close();}
else object1.innerHTML=aa
a =b;if (a==38) b-=2;if (a==0) b =2;xx=setTimeout("Effect()",10);}
//-->
</script>
====2、以下代码放在HTML的<body></body>之间[适当的位置]：
<body onload="checkBrowserForVersion4()" >
<div id="object1" style="position:absolute; visibility:show; left:181px; top:113px; z-index:2"></div>
====3、特别说明：只要改变上面的TOP值和LEFT值即可确定文字显示的绝对位置。TOP表示文字距离屏幕顶部的距离（象素），LEFT是离屏幕左侧的距离。上面有一大堆乱七八糟的字符是确定渐变的颜色数组。
七、教学资料
殷都图霸http://photo.ayinfo.ha.cn/sucai/
素材精www.sucaiw.com
网页特效梦工厂http://mrdys.myrice.com/indextx.htm
网页特效集锦http://www.helpor.net/
- 相关信息
- 没有关键字相关信息!
上一篇：)第十六课 充实网页[ 12-28 ]
下一篇： 第二十课 发布我的网站[ 12-28 ]