资源简介

第十七课 编辑网页代码 任务单
任务一：查看网页代码，修改网页标题
将“缺失标题”修改成“我的个人网页”,浏览查看效果
任务二：添加鼠标特效

任务三：用网页代码修改网页
课件14张PPT。浙教版信息技术八上第十七课 编辑网页代码作品欣赏思考：作品中的哪些内容比较吸引你？思考：如何查看网页代码呢？HTML与标签HTML（ HyperText Markup Language ）超文本标记语言，
是用于描述网页文档的一种标记语言，它是万维网上的通用语言。
HTML语言HTML文件结构HTML标签是由尖括号包围的关键词，通常成对出现。HTML标签开始结束在线网页编辑器所见即所得的软件网页代码试试手任务一：查看网页代码，并修改网页的标题，浏览查看效果。
提示：设置标题 将“缺失标题”修改成“我的个人网页”,浏览查看效果
Add Your Title网页特效指网页上的特殊效果，主要是通过将JavaScript程序代码加入到网页中，使网页页面更加生动、活泼。添加代码的方法：
１、要在代码窗口中添加。
２、有很多代码只加在与之间，
有些代码要分别在不同区域添加，按说明添加。
请你结合“参考代码”给网页添加一种你喜欢的鼠标特效,浏览查看效果。
以任务12+姓名保存上交。
任务二：添加鼠标特效任务三：酷炫网页特效打开任务三，选择一种你最想修改的部分，将相应特效添加到网页中，
并查看修改效果。以任务3+姓名命名，保存上交。选择1：修改导航选择2：修改图片选择3：修改背景代码特效的定位：要让有些代码特效出现在指定位置的话，
先在 “设计”视图窗口的指定位置点击鼠标，再打开代码窗口，
不要随意点击鼠标，找到光标，在光标处添加代码即可。
温馨提示课堂测试打开”课堂测验.xls”,开始测试。
课堂总结编辑网页代码使用者分享编写应用 下载修改应用开发交流分享 学习改进编写开发者第十七课 编辑网页代码 配套教学设计
1教学目标
1、通过查看网页代码,了解HTML语言的概念、结构及其在网页制作中的作用。2、通过鼠标特效的添加,初步掌握网页特效的添加方法,体验用超文本标记语言修改网页的方法。
3、通过多种网页特效的添加,学会网页特效代码的合理运用与修改。
2学情分析
八年级的学生通过第三单元网站制作的学习,已经基本掌握了网站制作的方法,也基本完成了个人网站的制作。运用特效代码是目前制作网站过程中常用的技巧,通过在网页中插入一段代码产生一些特殊的变化,效果是非常明显,学生也是非常感兴趣的。但是说到代码,学生之前从未接触过,所以对学生来说又感觉非常神秘。
本课的学习旨在通过教学,让学生简单认识HTML语言,并能将对应的语言代码正确插入到网页中,使得网页拥有灵动的效果,更加美观、更具特色。
本课内容的编排,意在打破学生对程序代码的神秘感,让学生从未知到知之,了解程序的本质,拉近与代码之间的距离。
3重点难点
重点:了解HTML语言,添加网页特效代码。
难点:网页特效代码的合理运用与修改。
4教学过程
活动1【导入】欣赏作品，导入课堂
前面我们已经学习了网页制作的基本知识和技能,今天我们将继续学习第十七课《编辑网页代码》。
下面我们一起来欣赏1位同学的作品,想一想作品中的哪些内容比较吸引你?
展示作品(加了特效的作品)
活动2【活动】分析作品，引出课题
刚才同学们欣赏的这个作品比我们之前做的作品明显生动了许多,其实是这个网页中加了一些特殊的网页代码。下面就让我们一起来探讨什么是网页代码,要怎么添加到网页中,形成生动活泼的效果呢?
活动3【讲授】讲授新知、网页代码
下面我们将通过以下几个问题来认识网页代码
1、网页代码长什么样呢
我们从最简单的空白页面开始。
2、怎么查看它的网页代码呢?
学生思考回答
(1)、演示网页的查看:页面——查看源文件(IE8),不同的浏览器有不同的查看步骤,但都可以查看。
(2)打开方式,
老师介绍sharePointdesinger2007的拆分视图和代码视图。
3、在空白页面中添加内容,观察代码的变化
4、网页代码的特点
HTML代码概念介绍
老师总结:这里所说的语言是指HTML(超文本标记语言。它是用于描述网页文档的一种标记语言,是万维网上的通用语言。
它有自己的标签和结构特点,
老师打比方说明。
HTML文件结构了解。
网页本身是一种文本文件。所谓的网页代码,就是指在网页制作过程中需要用到的一些特殊的“语言”,设计人员通过对这些"语言"进行组织编排制作出网页,然后由浏览器对代码进行"翻译"后才是我们最终看到的效果。
活动4【活动】网页代码试试手
任务一:查看网页代码,找到标签,并修改网页的标题
提示:设置标题
活动5【讲授】活动总结，引入新知
刚才同学们已经对网页代码的编辑做了尝试,那么
1、网页代码在哪编写
除了sharePoint desinger2007还有记事本、DW、在线网页代码编辑器等等。
再讲讲网页代码的应用
2、特效代码的概念
简单介绍网页特效。(P67知识链接)
展示多种网页特效的图片,示范实例
网页代码爱好者编写了很多的特效代码共享到网络中,我们可以下载,并代码添加到我们自己的网页中,使页面更加生动形象。
活动6【活动】学生活动，添加鼠标特效
任务二:给网页添加一个你喜欢的鼠标特效
1、添加鼠标特效代码。
老师演示操作 (鼠标特效)
注意:代码粘贴的位置。.
2、修改代码,特效个性化。
点评学生的作品。
活动7【活动】任务提升，酷炫网页特效
请你打开任务三,参考任务说明,选择一种你喜欢的特效,添加到网页中,并查看修改效果。
点评讲解
尝试在不同的位置添加效果,修改网页页面。
活动8【测试】课堂测试，自我总结
打开”课堂测验.xls”,开始测试。
活动9【作业】作品点评，课堂总结提升
刚才同学们都非常努力尝试了利用网页代码来修改页面,现在我们一下来欣赏一下。
欣赏了这些同学的作品,以及老师刚才的观察,同学们都做得不错,而且都有一些收获。现在我们总结一下今天所学的内容
1、如何查看并编辑网页代码
2、HTML和标签
3、网页特效
4、给网页添加特效
总结语:今天我们通过网页代码的编辑,让网页页面效果锦上添花;同时初步接触了html超文本标记语言,以及它的标签。其实编写代码是一个训练思维的过程,同学们现在是处于网页代码的使用阶段,在今后的时间里,我希望同学们能利用自己的聪明才智,学习更多关于网页代码的知识,编写出更多应用实际的程序,分享到网络当中,那么大家就成为了网页代码的开发者。
活动10【作业】网站链接和课后作业
网站链接:
网页特效代码 http://21世纪教育网jscode.cn/javascript/
网页特效集锦 http://21世纪教育网helpor.net/
网页特效 http://21世纪教育网qpsh.com/
课后作业:上网搜索更多的网页代码,尝试添加到自己的网页中。

展开更多......

收起↑