HTML网页特效制作.docVIP

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 HEAD title, base, link, isindex, meta /HEAD BODY HTML 文件的正文写在这里... ... table tr td ……/td /tr /table /BODY /HTML 网页三种编辑模式：普通、预览，居它们中间的就是HTML模式，请同学们点击该HTML标签，观察编辑工作区的变化。 二、讲授新课 HTML全称是Hypertext Markup Language 超文本标识语言，它是WWW上的通用语言。了解并学会一些HTML语言知识，对于提高网页制作水平帮助将会很大。 在FRONTPAGE视图栏多个选项中，选HTML可在编辑区显示正在编辑的网页的HTML代码。 1、HTML 文件结构(Document Structures) html.../html，head.../head，body.../body HTML HEAD title, base, link, isindex, meta /HEAD BODY HTML 文件的正文写在这里... ... /BODY /HTML 先让同学们看第一行和最后一行，是html 与/html， 看第二行head，并找对应的/head, 其中title指网页标题。 再看倒数第二行和倒数第三行Body/body, 空网页，故代码为空。 2、HTML文档的组成 HTML文档的组成。HTML主要由头部(head)和主体(body)组成。 3、引导学生观察的发现 教师演示插入一个两行三列的表格后，再进入HTML模式查看，观察HTML代码中table……/table 是指表格；tr……/tr是一行；其中的td……/td是单元格； 教师演示tr……/tr复制/粘贴三次，先让同学们思考，会出现什么变化，再预览给同学们，在浏览器中证实的确添加了三行。 师生互动：想一想，若在td……/td中加入文字“小小的我”，预览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-URLNon Scrolling Background body bgproperties=FIXED 图象和文字的对齐 img align=# #=top, middle, bottom img src=URL align=top My face! My Face! img src=URL align=middle My face! My Face! 链接(Link) 基本语法 a href=URL ... /a 这是一个a href=link.html链接的例子/a。 点一下带下划线的文字! 三、经典实例