课题：
《设计网站首页》
执讲人：王云霞
单位：高密市古城中学
第二课  设计网站首页
执讲人：王云霞          单位：高密市古城中学
课型：新授课          课时：1课时
教学准备：多媒体网络教室
教学目标：
认知目标：认识网页的工作原理；了解网页编辑的一般步骤。
技能目标：学会在网页中输入文字、插入图片和水平线；学会新建、预览和保存网页。
情感目标：善于从身边的广告、书刊中学习版面设计知识，并学以致用。
教学重点：网页中的文字的输入，图片及水平线的插入。
教学难点：网页的保存与预览。
教学方法：本节课主要运用的是任务驱动式教学方式，采用“问题——探究”式教学，以教师置疑为主线，学生主动探究学习为副线，全面展开教学活动。
教学设计思想：
本节课采用“问题——探究”式教学方法，学生可以利用学案，将学习活动与问题相结合，让学生在真实的教学情景中带着任务学习，以探究问题的方式，驱动和维持学生学习的兴趣和动机，拓展思维，张扬个性，促进学生的自主学习，倡导创新精神和实践能力的培养。
教学过程：
一、师生共赏网站，创设问题情景，提出学习任务。
二、指导分析任务，促进创新思维，通过观察探究、讨论分析，运用实践等方法完成问题探究，过关学习新知识，解决任务培养新技能。
第一关：在网页中输入文字，第二关：在网页中插入图片；第三关：在网页中插入水平线；
第四关：网页的保存；第五关：网页的预览。
任务一：启动Frontpage窗口，并新建网站进行首页制作。任务二；修饰文字；任务三：改变图片大小，对其属性进行设置，任务四：对水平线属性进行设置，任务五：保存网页的注意事项，任务六：网页预览完毕如何再继续网页的编辑。
课堂实录：
（一） 展示网页，创设情境，引出问题，初步探讨
教师活动
学生活动
教学意图
教师与学生一起欣赏《我的情感小屋》网站并提出问题让学生思考：这个网站上你看到了什么？（漂亮的文字和引人喜爱的图片  ）大家都知道在网络这个海洋中网页精彩纷呈，那么你想不想在网络这个海洋中占有一席之地呢？如何操作呢？)今天我们就来探讨如何设计网站首页。师展示课题、学习目标；并探索任务一：打开Frontpage，新建只有一个网页的站点。让学生利用学案引导、探索完成。那怎么在网页中输入文字呢？
教师巡回查看，并鼓励学生运用多种方法进行操作，及时发现和纠正学生操作中出现的问题；并分层次给予评价；师请操作成功的同学介绍操作方法，师做总结概括并让学生输入的文字进行美观设计，从而引出任务二，进一步的文字修饰[课件展示]
师提出探索任务2：如何将文字设置的更漂亮、美观些呢？
教师先给学生独立思考的空间，让学生自己思考解决的方法。（师可以用屏幕对操作进行演示分析）
对学生学习情况进行评价。可以通过举手反馈信息，有困难的同学提出疑问。
学生欣赏网站并思考教师提出的问题。
针对学生回答给予评价并导入新课。
学生运用以前所学方法探索在Frontpage中进行文字修饰。
学生反复练习，探索如何在Frontpage中进行文字修饰，并进行多种方法探索学习。
生根据所运用的操作介绍自己用了哪种方法进行文字修饰。
学生继续自主学习。
学生思考，并实践练习。生在师的指导下对文字进行修饰。
激发学生的学习兴趣，提高学生的求知欲，促进学生的主动学习。
运用教师指导，学生自主学习的教学方法，最后由教师总结评价学习效果达成教学目标。
。
（二）继续探讨在网页中插入图片、水平线
教师活动
学生活动
教学意图
引导学生再欣赏“我的情感小屋”网页，转入第二关的研究，在网页中插入图片。师提示与在Word中插入图片的方法类似。让学生根据学案完成图片的插入。插入图片之后，根据出现的图片的大小状况很自然的引出改变图片大小的方法，从而提出任务三，让同学们根据学案的提示来完成。
师查看学生操作，针对学生对插入的图片进行评价，提出网页图片调整要按比例，搭配合理，给人以美的感受。学生操作完之后教师可以让学生上台演示，并对每组学习的情况进行总结评价。
师继续启发引导学生改变图片大小的方法，观察学生的达成度，并分层次进行指导。
师针对练习情况做出评价，可做示范性指导。
为了让网页内容的层次更清楚，我们往往在标题与正文之间插入水平线，很自然提出第三关的探究，如何插入水平线？学生根据学案提示完成，水平线的颜、长度、粗细等如何改变呢，提出任务三，让学生自主探索出结果，学生演示操作方法，教师进一步总结。
生欣赏、观察并讨论回答。
学生根据学案和老师的提示进行操作练习。
教师渗透多种方法解决同一问题的思想，以便开阔学生的思维。
学生尝试改变图片属性的设置，注意张扬学生个性和充分发挥学生的美术创意。
让学生在不知不觉中很容易的就插入了水平线，从而体现到了成功的喜悦。
教师提示水平线的属性设置与图片属性设置方法类似。
采用启发引导式教学。
进行审美能力的渗透教育，发挥学生的创造思维，提高其审美能力。
利用同一问题多种方法解决，从而开阔学生的思维，多探求解决问题的方法。
采用对比式教学方法，让学生探究问题、解决问题。
（三）巩固成果 ：引出网页的保存、预览
教师活动
学生活动
教学意图
教师提出如何把我们刚才的成果巩固一下呢？那就需要对网页进行保存。师让学生回顾Word文档的保存方法，学生操作，然后对照学案，对网页进行保存。保存完之后，教师强调网页保存与Word保存的异同，同时说明保存网页时的注意事项。如图片的格式以及我们常用的图片格式有哪些等。教师进一步提出还有哪些方法呢？学生探索，完成任务五。另外教师重新强调主页保存中存在的问题：单击“文件”——“保存”或工具栏中的“保存”按钮，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点的images文件夹中，便于站点的管理。
师再次提出我们把前面的网页做好之后，你想不想看一下你制作的网页发布到网上之后的实际效果呢？自然导入第五关的内容：如何预览网页？生对照学案自学、操作，并比较这两法的异同。学生演示操作，教师总结预览方法。
方法一：单击“预览”标签
方法二：单击“文件”——“在浏览器中浏览”——IE浏览器。
操作完之后，教师提出：如果我们预览完之后我想修改或者继续编辑我们的网页怎么办呢？自然提出任务六，学生根据学案操作、回答、演示。教师再进一步总结归纳。同时说明利用Html制作网页的特点，延伸出以后同学们要学习的问题。
生以练习为主，也可以在生生之间或师生之间进行互帮互学。
学生之间可以互相帮助、讨论探究问题。
巩固训练学生所学技能，进一步加深学生对知识的了解与掌握。
培养学生积极动手的能力。
采取对比式教学方法

（四）训练巩固：大显身手
教师活动
学生活动
教学意图
师让同学们看看我们刚才的操作，总结回顾一下，主要学会了哪些内容，学生回答，教师展示五关、任务六，说明实际上我们刚才已经过了五关斩了六将，你想不想把今天所学内容展示一番呢？自然引出训练巩固的内容：师用大屏幕展示练习题：“大显身手”操作要求。
1、插入图片3，并改变其大小。
2、将网页再进行保存。
3、将网页进行预览。
师查看学生操作，及时发现学生操作中的问题，给予即时性评价或纠正，并将发现的好的做法在学生中进行推广。
学生回顾总结
生以练习为主，也可以在生生之间或师生之间进行互帮互学。
巩固训练学生所学技能，进一步加深学生对知识的了解与掌握。
培养学生积极动手的能力。
（五）能力拓展：八仙过海，各显神通
教师活动
学生活动
教学意图
本题目是一道能力拓展题，教师提供一个网页，充分发挥学生的潜能去完善这个网页，学生可以输入文字并进行修饰，也可以插入图片，改变图片的属性。也可以添加其它修饰，教学目标是通过本练习，熟练提高学生制作网页的能力，培养学生的信息素养。（师用大屏幕展示题目操作要求。）
师巡回观察学生操作中存在的问题，并及时进行纠正。最后分组对学生的操作给予指导，并鼓励学生形成个人学习成果。
怎么制作网页图片
学生练习，制作网页。
学生分组讨论网页修饰的方法，并发表小组看法。分析他们小组是何对网页进行修饰和完善的？
让学生进一步加深对本课知识的掌握，让不同技能层次同学都能够得到进一步的延伸学习，采取合作学习的方式也能实现学生学习资源的共享
（六）课堂小结
教师对本堂课进行知识性总结，鼓励学生进行知识反思，反思本堂课在学习中还存在什么问题，教师给学生在技术上做解答。
（七）课后实践：
为了感谢同学们的积极配合，老师还要赠给同学们一个礼物，这是《说唱脸谱》歌曲，，希望同学们欣赏后能够受到启发，结合自己的爱好与特长，设计一个自己喜欢的网站，做到修饰独具特，个性突出，并且使你制作的网站达到：不论老的少的、男的女的都喜欢看的效果。

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