《网页制作》教学设计.docx
《《网页制作》教学设计.docx》由会员分享，可在线阅读，更多相关《《网页制作》教学设计.docx（21页珍藏版）》请在冰豆网上搜索。
《网页制作》教学设计
魔术揭密
──《网页制作》教学设计
一、教材依据
义务教育中小学教科书（实验）初中信息技术第四册，第二单元《制作七彩的网页》，活动1“初识HTML语言”以及活动2中的关于部分FrontPage2000的内容。
二、设计思想
【教学指导思想】
信息技术课是一门实践性很强、极富创造性、具有明显时代发展性特点的课程。
而现代教育理论提倡以学生为中心，强调学生“学”的主动性，学生是信息加工的主体，教师的作用体现在组织、指导、帮助和促进学生的学习、充分发挥学生的主动性、积极性和创造性，从而使学生最有效地进行学习，达到最优的教学效果。
因此本课题遵循“教师主导，学生主体”的设计理念，让学生在教师的引导下，对所学的内容进行探索、分析、研究，在实践操作中培养学生科学的态度和价值观，同时培养学生的学习兴趣。
【教学对象分析】
·学生的知识能力
教学对象是初二年级的学生，这一阶段的学生正处在抽象逻辑思维逐步形成的过程中，但形象思维仍是获取知识的重要思维方式。
而本节课中涉及到的HTML语言有其枯燥难懂的一面，学生在理解上存在着一定的难度，所以教师在教学设计中希望能通过学生自己的双眼、双手以及思考来发现新知识，从而减轻他们对新知识的畏惧、降低理解的难度。
·学生心理特点分析
初中学生活泼好动、好奇心强、求知欲旺、视野广泛，对信息技术充满兴趣，大部分学生都能熟练使用浏览器浏览网页，他们对上网和网页有着极大的兴趣。
所以在本课题中教师利用学生的这种心理设计了一个趣味导入，从趣味“小魔术”引入学生感兴趣的网页，使学生在课堂中保持着较高的学习积极性。
【教学内容分析】
本节课是新授课且是第二单元制作七彩的网页的第一节课，教师将这节课的重心放在了“启下”上，目的是激发学生的学习兴趣和他们的求知欲，为顺利开展以后的教学活动打好基础、做好铺垫。
本节课的教学内容有两个方面，一是初识HTML语言，二是初识FrontPage2000的窗口组成。
教师设计的重点并不是让学生充分理解HTML语言的结构，而是通过HTML语言能够有效地引出制作网页的软件FrontPage2000，继而使学生能顺其自然产生使用FrontPage2000制作网页的兴趣。
教学内容的整合：
课本上将初识HTML语言和FrontPage2000的窗口组成分在了两个活动中，考虑到信息技术课一星期一个班只有一节课，如果第一节课只讲HTML语言，不涉及制作网页的软件FrontPage2000，会令学生感到枯燥，同时这种枯燥感很可能会维持一个星期直到下节课，这样学生对制作网页的兴趣就远不如将两个教学内容结合起来的高，也不利于今后的教学活动开展。
所以教师将本节课的重心放在让学生理解HTML语言与FrontPage2000之间的联系上。
三、教学目标
【知识与技能】
（1）区分文本文档、网页的图标和文件格式；
（2）了解HTML标识性语言的功能及结构；
（3）了解HTML语言常用的标识符；
（4）了解常用的制作网页的软件；
（5）学会启动、退出FrontPage2000；
（6）了解网站设计软件FrontPage2000的窗口组成；
（7）理解FrontPage2000编辑区的3种工作模式的作用：
即普通、HTML和预览。
【过程与方法】
（1）趣味导入新课的内容，极大地发挥学生主体、教师主导的作用；
（2）适时引导学生产生新的问题，再通过教师的讲解与演示、对比和学生的自主学习来解决问题。
【情感态度与价值观】
（1）强烈的求知欲激发学生的学习兴趣和学习积极性；
（2）了解信息技术的前沿知识后，学生会对信息技术课保持新鲜感和兴趣感；
（3）学生在不断实现自己主体地位的同时，也获得了新知识，更从中体会到了学习的快乐。
四、教学重点和难点
重点：
区分文本文档、网页的图标和文件格式；
了解HTML标识性语言的功能及结构；
学会启动FrontPage2000，了解网站设计软件FrontPage2000的窗口组成；
理解FrontPage2000编辑区的3种工作模式的作用：
即普通、HTML和预览。
难点：
理解HTML标识性语言的结构。
五、教学准备
①搜集常用的网页制作软件的相关信息；
②打开多媒体电脑教室的教师机和学生机，保证电脑教室的广播系统工作正常；
③在教师机上新建“魔术”文件夹，并将其设为共享文件夹，在该文件夹中建立10个文本文档文件，分别用“0、1、2、3、4、5、6、7、8、9”命名并写入不同内容的HTML代码；
④共享班级文件夹；
⑤示例的班级网站及网页。
六、教学模式选择
“学生主体，教师主导”的教学模式。
七、教学过程
在本节课中“导入”是作为课堂教学的一个必需环节，课堂的导入是学生主体地位的依托，也是教师主导作用的体现。
引人入胜的课堂导入，既能吸引学生的注意力，又能激发起学生的求知欲，为整堂课的和谐自然发展定下基调。
因此在课堂导入中教师设计了“小魔术”这个导入环节，每位学生都可以动手完成“小魔术”，然后教师通过“小魔术”的揭密活动引入本节课的学习内容──HTML语言。
在初步了解“小魔术”的秘诀后，学生了解了HTML语言的功能，接着教师引导学生进一步研究“小魔术”中的细节问题，通过学生的仔细观察、积极动脑、共同讨论、在理论的基础上动手实践这四个小环节，使学生对HTML文件的基本结构和HTML语言常用的标识符都有了一定的了解。
考虑到HTML语言和网页制作软件FrontPage2000的内容衔接问题，教师设计了一个网页制作比赛的情境假设导入，引导学生认识到直接用HTML语言制作比较美观的网页不仅不方便，而且难度很大，从而使学生产生寻求新方法的积极动力和学习新方法的求知欲。
随后介绍FrontPage2000的窗口组成，展示示例网站，使学生从实例中理解FrontPage2000的优点，产生学习的动力。
最后小结时，激励学生尝试操作，教师肯定学生的积极努力，鼓励学生多动手，使学生在本节课中获得一定的满足感，同时对今后的课堂教学活动产生极大的兴趣。
教学安排
教师活动
学生活动
设计思想
趣味导入
聊一聊魔术表演
与学生聊一聊魔术表演
提问：
同学们喜不喜欢魔术表演？
引起共鸣
激励学生来当一回小小魔术家
边讲解边演示操作“小魔术”的内容和操作方法。
教师开始表演：
打开网上邻居的共享文件夹“魔术”，文件夹内有若干文本文档文件，打开其中一个文档（如1．txt），另存为“1王二．htm”或“1王二．html”（存入网上邻居的个人文件夹中）
表演结束
为学生解惑，讲清楚“小魔术”的结果需要同学们自己去观察。
学生注意力集中
与老师交流
学生很感兴趣
积极回答
有疑惑，也有兴趣
仔细观察
摩拳擦掌，跃跃欲试
了解操作过程
观察文本文档中的内容，看不懂，有点奇怪
观察、熟悉操作环境
记忆操作步骤
困惑，不明白这个魔术表演到底是什么意思？
导入设计时，围绕学生感兴趣的事物提出问题，充分吸引学生的注意力，与学生积极交流，首先创建良好的师生关系，营造轻松的课堂氛围。
通过观察教师的操作，学生能够模仿操作，目的不是让学生学习操作的方法，而是使学生能够经过自己的双手操作发现“小魔术”的结果，继而导入学习内容。
教学安排
教师活动
学生活动
设计思想
学生模仿操作
魔术结果展示
魔术揭秘
讲解（不演示操作）观察“小魔术”结果的方法：
打开网上邻居的个人文件夹，打开“1王二．htm”或“1王二．html”。
教师巡视，个别帮助。
为避免文件重名，提醒学生将另存的文件用文本文档的文件名+自己的姓名命名。
个别学生演示他们的“小魔术”的结果。
激发学生思考“小魔术”的秘诀。
揭密过程。
引导学生区分两个。
文件的图标，并理解它们的含义。
引入HTML语言。
仔细观察
迫不及待的动手操作，很好奇，想象到底是什么结果。
观察到了魔术表演的最终结果，很兴奋，觉得不可思议
互相观察
发现和别人的不同之处，与周围同学积极交流
产生好奇心，有学习动力
感兴趣
积极思考
只讲解观察“小魔术”结果的方法，而不演示操作，目的是为了能将神秘感保留到学生操作时，这样不仅能够吸引学生的注意力，而且也能提高学生动手操作的积极性，体现学生的主体性。
学生只有在与其他同学交流时才能发现新问题，教师才能继续新的
教学安排
教师活动
学生活动
设计思想
引入HTML语言，了解它的功能
了解HTML文件的基本结构和HTML语言常用的标识符
具体步骤：
对比“另存为”操作前后的两个文件的图标（例如：
“1．txt”与“王二．htm”两个文件的图标），
讲解“小魔术”的秘诀：
文本文档中的符号其实是一种制作网页的语言，叫HTML语言。
将HTML代码输入文本文件中，然后保存到以“．htm”或“．html”为文件扩展名的文件中，就可以制作网页文件。
了解HTML文件的基本结构。
展示“1．txt”。
讲解HTML文件的基本结构：
开始标记、内容主体、结束标记。
展示1王二．Htm。
仔细观察
发现不同之处
共同讨论
积极回答
理解
初步了解“小魔术”的秘诀
注意力集中
观察
了解
观察网页中的文字颜色，图片内容，水平线粗细等
教学活动，但有的学生的主动性较差，不与周围同学交流，所以设计了这样的环节──展示魔术结果。
希望能通过教师的主导作用，提高学习效率。
先满足一下学生的好奇心，以免弄巧成拙，降低学生的学习兴趣。
教学安排
教师活动
学生活动
设计思想
展示“1．txt”。
结合观察网页的结果，引导学生了解HTML语言常用的标识符。
想一想、试一试：
能不能改变文字颜色，图片内容，水平线粗细？
结合学生的回答演示操作。
修改“1．txt”另存为新的网页文件。
展示新网页文件。
拓展延伸介绍其他标识符
如：
换行
设置背景颜色
等等
仔细观察“1．txt”
发现与网页中“文字颜色，图片内容，水平线粗细”有关的内容
例如：
color=green
ziran．jpg
size=3
学习氛围浓厚
动脑思考
共同讨论，回答
观察
与旧网页文件比较。
获得成功的喜悦
了解
学生首先通过观察网页，获得直接的影像信息。
紧接着选择学生较熟悉的英文单词color、green、size等引导学生学习，这样容易吸引学生的注意力，而不会因为看不懂便不注意听了。
在修改网页时又一次体现了选择较熟悉的英文单词color、green、size的优势，学生会联想到用别的颜色如：
yellow、red等等。
同样体现了教师主导、学生主体的一个设计思想。
教学安排
教师活动
学生活动
设计思想
情境假设导入
FrontPage2000
激励学生学以致用
动动手：
模仿老师的操作，修改网页中的相关内容。
教师巡视，个别帮助
展示个别学生修改的网页
肯定所有学生的努力，表扬他们真棒！
鼓励学生积极动手操作。
情境假设：
现在学校准备举行一次网页制作比赛，哪些同学想参加呢？
引导学生提出疑问：
难道没有更好的方法制作网页吗？
在理论的基础上，动手实践，加深理解
观察
兴奋
有学习兴趣
积极性高，但缺乏自信心
认为难度较大
产生疑惑
想寻求其他办法
虽然又是模仿教师的操作，但并不是机械的模仿，学生将自己的想法付之于行动。
并从自己的成果中获得乐趣和满足。
设计这个情境假设的导入，目的是为了能够很好地衔接HTML语言和FrontPage2000。
教师适时地引导学生，让学生从自身的困难考虑学习问题，而不是因为老师要我们学而学习，突出了学生的主体地位。
教学安排
教师活动
学生活动
设计思想
介绍常用的制作网页的软件
学会启动、
退出
FrontPage2000
Dreamweaver：
这是网页三剑客之一，专门制作网页的工具，实用功能比较强大
Frontpage：
office自带的一个工具，操作简单，实用，学起来比较轻松
展示示例的班级网站
说明今后的学习任务：
用FrontPage2000制作一个以班级为主题的网站
激励学生的学习热情
边讲解边演示操作
启动、退出FrontPage2000的方法（与WORD类似）
了解信息技术前沿知识
了解今后学习的新软件
观察
了解任务的整体要求
学习热情高涨
仔细观察
联系启动WORD的方法记忆
教学安排
教师活动
学生活动
设计思想
简单介绍FrontPage2000的窗口组成
培养学生学习兴趣
简单介绍FrontPage2000的窗口组成。
展示示例的班级网页。
重点讲解FrontPage编辑区的3种工作模式的作用。
①普通模式：
一般用来编辑、修改网页。
演示操作插入图片、插入水平线。
引导学生对比两种方法（直接修改HTML代码和在FrontPage2000操作），比较它们的优缺点。
②HTML模式：
一般用来查看、修改HTML代码。
③预览模式：
一般用来观看网页的显示效果。
小结：
FrontPage2000无论是编辑网页还是观看网页效果都很方便。
大致了解
从实例中理解FrontPage2000的优点，产生学习的兴趣
对比文本文档和FrontPage中的代码，发现类似的很多
观察网页效果
枯燥的概念学生很难理解，也不想主动去理解。
因此将这三个概念溶入实例中讲解，有事半功倍之效。
教学安排
教师活动
学生活动
设计思想
小结
鼓励学生动手试一试，启动FrontPage2000，一方面熟悉窗口，一方面尝试制作简单的网页。
教师巡视，观察学生的操作，纠正个别错误的操作。
肯定学生的积极努力
鼓励学生多动手
激励学生在今后的课中更进一步
在老师没有讲解新课前，尝试操作，有新鲜感，产生积极的学习兴趣
期待下节课的到来，有满足感
紧密联系前面的学习内容，反复讲解，对学生的学习也能起到一定的帮助作用。
适时小结是为了突出本节课的重点，为今后的教学活动开展打好基础，做好铺垫。
八、教学反思
在信息技术教学中，必须以新的教学理念和教学理论为指导，根据新的课程标准，探索适合信息技术课堂教学的教与学的新策略和新模式来挖掘学生潜能，提高学生素质。
以前我总认为信息技术课就是教会学生如何操作，课堂中总是采用“教师讲，学生听”的传统模式，是“学”跟着“教”走，只要“我说你做”就可以了。
现在我尝试着做一些改进，在本课题中围绕“学生主体、教师主导”的设计理念去设计每个教学环节，积极体现学生的主体作用，努力提高学生的学习效果。
实践证明我的想法是好的，但是在实践中难免有疏忽和做的不够细的地方。
比如：
由于我的观察不全面，忽略了个别学生学习中的心理障碍，有些学生的畏难情绪影响到他的整个学习效果；课堂学习气氛热烈但不够和谐。
这些都说明了一个问题：
我仅仅注重了学生整体主体的体现，而忽略了个体。
经过思考，我认为在这节课的教学设计中可以多增加个体展示的机会，特别是那些学习有困难的学生，我应该多关注他们的动态，多帮助他们。
《网页制作工具》参考教案
教学主题
网页制作工具
（1）（Frontpage和Dreamweaver的使用）
教案设计
赵志
教案编号
13
适用年级
高二年级
教学课时
1课时
教材分析
概述：
通过网页设计，了解并熟悉网页设计软件的基本使用方法，掌握常用工具的使用方法
重点：
初步了解网页设计软件Dreamweaver中层和时间轴的设置，体会动态网页设计
难点：
层和时间轴的设置
学习目标
1、掌握网页制作软件Dreamweaver的基本使用方法
2、学会设计和制作简单的动态网页
所需资源和环境
网络资源
使用搜索引擎查找网页设计相关的信息（包括图片、文字、视频等）
常规资源
1、浙江教育出版社2004版《信息技术基础》第五章节配套光盘
2、教材配套教师用书
3、小组合作学习任务单
教学支撑环境
计算机网络教室、所有计算机能够上网、多媒体网络教室软件或者投影仪
教学设计
教学引导问题设计
问题
目的
你知道网页上面文字的滚动效果是怎么制作出来的吗？
激发学生的好奇心
你知道如何让网页中的一幅图片动起来？
引导学生设计动态网页中图片运动的效果
你知道有哪些网页动态效果？
为学生的课后探究学习做铺垫
你知道用Dreamweaver软件如何预览你设计的动态网页？
体会动态网页的效果，进一步完善网页设计
教学过程设计
教师活动
学生活动
1、新课导入
展示全国中小学电脑制作活动中的优秀的网页制作《母亲河》，激发学生制作网页的兴趣。
“工欲善其事，必先利其器”从而引出制作网页需要掌握必要的制作工具。
只有掌握了必要的网页制作工具软件才能做出动感十足、耳目一新、独具体色的网页。
2、教学内容
随着因特网技术的不断发展，网页制作工具越来越多，选择一种得心应手的工具软件，能够收到事半功倍的效果。
⑴设问：
面对那么诱人的网页，要想学习网页制作，我们应该选择什么样的网页制作工具，首先同学们需要先了解有哪些软件，它们各有什么样的特点？
布置任务：
请同学们完成任务单中的第一个任务。
教师点拨：
网页工具软件大体上分为两类：
一种着眼于网页、网站整体规划使用的基本工具；另一类是着眼于网页上面的某些元素（如：
漂亮的按钮、栩栩如生的动画、逼真的三维图像），使用到的辅助工具。
通常网页设计需要考虑整体思想。
先全局规划网页的思想或整体风格，然后对局部的图像处理、颜色搭配、动画图片设置的优化工作。
先大后小的思想。
本节课先来学习基本工具Frontpage和Dreamweaver。
⑵网页设计工具Frontpage：
Frontpage是微软公司开发的一款网页设计软件，其软件界面和文字编辑功能与Word软件相似，熟悉Word的人很容易学会。
同时提供的模板可以令初学者很容易的制作相当美观的网页。
布置任务：
请同学们完成任务单中的第二个任务：
利用教师提供的素材（图片，文字内容），制作一个网页。
（教师提供一个已设计的简单网页）
教师评价：
⑶网页制作Dreamweaver
Dreamweaver是Macromedia公司的一款专业的网页设计软件，提供了很多方便操作和使用的工具栏，如：
对象工具栏、站点管理窗口、快速工具栏。
并且该公司还有一系列的配套产品可用，比如图形编辑软件Fireworks、动画制作软件Flash。
运用他特有的“行为”、“层”等功能可以容易的生成网页的动态效果。
下面让我们来体验Dreamweaver软件的动态网页制作
布置任务：
请同学们完成任务单中的第三个任务：
运用Dreamweaver中的层、时间轴制作动态网页——图像移动
设问1、为什么要调整“层”与“背景图像”的大小，使其等大？
设问2、时间轴上面的“关键帧”有什么特点？
设问3、操作过程中感到最难的一个环节是什么？
设问4、对自己设计的作品的评价是什么？
结尾：
同学们观察到，我们设计的作品和本节课一开始展示的作品有很大的差距，原因在于，仅仅使用我们学习的Frontpage和Dreamweaver是不能制作出那么美丽的网页的，我们还需要掌握一些制作网页的辅助工具。
也就是我们下节课需要讲解的“辅助工具”
最后给同学们留下了一个课后任务。
借助我们的因特网完成任务一
各小组总结不同的网页制作工具软件的特点、主要功能。
学生回忆必修教材使用Frontpage设计“故宫”主题网页的过程
学生小组合作完成任务二
填写“任务二”评价表格
小组合作完成任务三
并填写“任务三”评价表格
网页工具学习任务单
一、借助因特网，组内成员分工查询制作网页常用到的工具软件，最后汇总完成下面的表格。
常用工具
主要功能（总结每个软件的主要功能）
完成人员
二、打开网页制作软件FrontPage，利用老师提供的一些素材（素材放在D盘的“网页素材”文件夹内），制作一个网页，并保存。
评价表
评价指标
组长评价
合作精神
主动合作
4
较为合作
3
能够合作
2
需要鼓励
1
组员评价
用Frontpage制作网页，熟练有创意
4
用Frontpage制作网页，比较熟练
3
用Frontpage制作网页，制作成功
2
用Frontpage制作网页，还需多加练习
1
三、打开网页制作软件Dreamweaver，利用老师提供的素材（素材位置），制作一个动态网页，并仔细观察、琢磨其动态效果。
步骤提示：
（提醒：
每一步都需要注意观察有没有多种方法实现同一个操作）
1、打开软件，新建一个“基本页”。
（可参考课本具体步骤）
2、修改网页的标题为“我的第一个动态网页”；
3、插入“图层”，选择“描绘层”插入，找到并观察“层属性面板”，修改“背景图像”；
4、调整层的大小，使其与图像等大；
5、找到“时间轴”，将层拖入“时间轴”的第一帧内；
6、按住第15帧上的空心圆点，向右拖动到第60帧；
7、在30帧处右键点击，弹出菜单，选择“增加关键帧”；
8、对“时
升级会员 