HTML网页特效制作
HTML网页特效制作
东风一中刘丽梅
【教学任务】跟随鼠标的莹火虫特效
【教学目标】
知识目标
掌握网页三种编辑模式;
认识HTML文件结构;
熟悉运用HTML特效代码为网页添加效果;
了解和运用JAVA Script语言等代码。
能力目标
领悟FrontPage 中HTML语言编辑模式强大功能;
破除程序代码神秘感, 获得勇于探索效果调整的能力;
增强网页主题发表观点、探索创新的表现力。
情感目标
发挥学生探索积极性，自觉探索网页深层次功能与应用，丰富主题网页制作表现方法；建立同组交流与互助，共同提高、增进友谊，不断了解现代网页制作技术的新动态，提升网页特效鉴赏能力。
教学重点:HTML代码编程方法及特效运用于网页
教学难点:HTML代码正确复制、粘贴、排错。
教学方法：演示启示法、上机实践法、发现法教学准备:E:\共享\HTML特效；主页制作百宝箱;xingxing.Gif;star.jpg;  时间特效.txt; 跟随鼠标的莹火虫.txt。
教学过程
情景导入黑板提示，同学们用打开 Frontpage，新建一个空白网页，命名存盘。D:\webXX\2.htm，观
察网页的三种编辑模式:
普通/HTML/预览
HTML文件结构;
, , , ,
HTML 文件的正文写在这里……
网页三种编辑模式：普通、预览，居它们中间的就是HTML模式，请同学们点击该HTML标签，观察编辑工作区的变化。
二、讲授新课
html制作一个网页HTML全称是Hypertext Markup Language 超文本标识语言，它是上的通用语言。了解并学会一些HTML语言知识，对于提高网页制作水平帮助将会很大。
在FRONTPAGE视图栏多个选项中，选HTML可在编辑区显示正在编辑的网页的HTML代码。
1、HTML 文件结构Document Structures.,,
, , , ,
HTML 文件的正文写在这里
先让同学们看第一行和最后一行，是与,
看第二行，并对应的, 其中title指网页标题。
再看倒数第二行和倒数第三行, 空网页，故代码为空。
2、HTML文档的组成
HTML文档的组成。HTML主要由头部head和主体body组成。
3、引导学生观察的发现教师演示插入一个两行三列的表格后，再进入HTML 模式查看，观察HTML代码中……是指表格;……是一行；其中的……是单元格;
教师演示……复制/粘贴三次，先让同学们思考，会出现什么变化，再预览给同学们，在浏览器中证实的确添加了三行。
师生互动：想一想，若在……中加入文字“小小的我”，预览e会出现什么效果?根据先推测猜想，再实
践验证之。
背景彩和文字彩
body bgcolor# text# link# alink# vlink#
bgcolor --- 背景彩
text --- 非可链接文字的彩
link --- 可链接文字的彩
alink --- 正被点击的可链接文字的彩
vlink --- 已经点击访问过的可链接文字的彩
#rrggbb
彩是用 16 进制的红-绿-蓝red-green-blue, RGB 值来表示。
16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f背景图象body
background"image-URL"
Non Scrolling Background body bgpropertiesFIXED
图象和文字的对齐
img align# #top, middle, bottom
img srcURL aligntop My face!
My Face!
img srcURL alignmiddle My face!
My Face!
链接Link
基本语法 a href"URL"这是一个
a href"link.html"链接的例子。
点一下带下划线的文字!
三、经典实例
例1、当前时间
将Frontpage最小化，打开主页制作百宝箱，打开文件“时间特效.txt”，从第三行复制，粘贴到Frontpage空白网页的之间，保存后预览网页，会出现网页中的当前时间。
*例2、跟随鼠标的莹火虫
打开“跟随鼠标的莹火虫.txt”，让同学们根据网页制作百宝箱提示，完成该特效代码粘贴到空网页的和之间。
说明：有些是一步完成，有些是两步乃至多步才能完成。
例3、跟随鼠标旋转的星星
打开“跟随鼠标旋转的星星.txt”，让同学们根据网页制作提示，完成两步粘贴，即该特效代码分别粘贴到、空网页的和之间。
预览，观察效果，图像处显示的是“XX”，再将“显示的图片XINGXING.GIF”换成与某图片文件名相符，网页保存后浏览，即可见到“旋转的图片”!
说明：有些是一步完成，有些是两步乃至多步才能完成。
跟随鼠标旋转的星星[共2步][特别推荐]
1、将以下代码加入HTML的之间:
!-- Beginning of JavaScript -
…  var imgsrc"xingxing.gif" //显示的图片
2、将以下代码加入HTML的之间:
!-- Beginning of JavaScript -
把鼠标指向这个连接看一下是不是很棒的效果!换成你自己的图片就行了。更换图片方法:JPG或GIF图片复制到G0X学号文件夹中，再修改文件名。
四、操作实践交流
教师巡视，鼓励完成了跟随鼠标的莹火虫的同学们进行小组交流，指导个别操作困难的同学完成该特效。
同组的同学相互检查和帮助，再对主页特效中的其它特效如“跟随鼠标的星星”，共两步，试完成该特效,C0x同学，指出文件Xingxing.GIF不存在, 并进行操作讨论和交流。
五、归纳总结

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。