制作网站首页教案设计.docx

制作网站首页教案设计.docx

《制作网站首页教案设计.docx》由会员分享，可在线阅读，更多相关《制作网站首页教案设计.docx（12页珍藏版）》请在冰豆网上搜索。

制作网站首页教案设计

制作网站首页教案设计

广东省云浮市郁南县平台镇初级中学黄伟兴

教学课题：

制作网站首页

教学背景：

网站首页是网站的“脸面”，学生通过学习设计网站首页，一方面培养他们为提高作品吸引力、展现自我而积极思考、探究、尝试的意识和态度，另一方面通过学习各种基本网页设计技术，亲历网页制作的一般过程，更好地为接下去几节课的学习和活动参与打下基本功。

教学目标：

1、知识与技能：

（1）了解网页一般由哪些元素组成。

（2）学会运用表格进行版面布局。

（3）能够在网页中添加网页元素。

（4）能在网页中设置超链接。

2、过程与方法：

（1）通过制作网站首页，掌握版面布局、添加网页元素和设置超链接的基本技术方法，达到举一反三的功效。

（2）通过学生动手设计网页的实践活动，使学生掌握对象属性的设置方法，为学生今后学习其他软件奠定基础。

3、情感态度与价值观：

（1）提高视觉素养，能根据网页主题确定恰当的网页风格并具有初步的创意。

（2）通过运用表格布局网页对象活动，进一步掌握各种不同对象属性的设置方法和规律，提高学生学习信息技术的信心。

（3）在合作实践过程中，培养学生的审美能力和创造能力，在小组协作学习中，培养学生合作帮助、团结协作的良好品质。

 （4）培养学生大胆构思、自我创新的精神，培养学生的美感及创作后的成就感。

（5）善于和老师、同伴一起分析讨论，在分析、探讨中学会欣赏，学会评价。

4、学情分析：

学生已经具备了计算机软件使用的基础，但学生在学习过程中往往会把注意力停留在技术实现的层面上，让学生认识和掌握制作网站首页的方法，故操作性强。

在前面几节课学生初步确定了网站的主题，收集了部分资料。

学生已经在word文档的学习中掌握在文档中插入图片、艺术字等素材方法，为制作网页中的添加素材这一环节打下基础，同时表格教学比较枯燥，表格嵌套、根据图片特点裁剪图片、设计制作表格等知识点更加枯燥乏味。

图片处理操作水平的差异和教学内容的枯燥，可能会造成很多学生不愿动手、不会动手。

在实际教学时，教师应该时刻给予学生恰当的引导，在调动学生学习兴趣方面下足功夫。

5、素质目标：

制作网页要应用到多方面的知识，培养学生的知识迁移能力，同时给学生提供了自由发挥的空间，学生可以充分发挥自身的创造力与想象力，培养学生综合运用知识的能力。

教学重点难点：

1、教学重点：

（1）能用表格规划版面布局的方法与技巧。

（2）恰当选取网页元素与设置。

2、教学难点：

（1）掌握超链接技术设置网站导航功能的方法。

（2）掌握设置网页属性的一般方法。

教材分析：

　　1、本节的作用和地位：

　本节课侧重培养信息表达的能力，对于加强学生的信息意识，提高信息处理的能力有着重要的作用；网页的设计也给学生提供了展示个性、自主创新的机会，促使他们主动地学、创造性地学；网页的评价则能使学生了解内容编排的原则，页面布局的种类，色彩搭配的风格等，提高他们的艺术修养和审美情趣。

　2、本节主要内容介绍：

　　课改后信息技术课已不再是单纯的计算机技能课，它强调以培养信息素养为目标，以任务驱动为模式，以应用软件为载体。

只有在实际教学中突破以往的教学模式，才能培养出适应信息社会发展的有用人才。

这节课的主要任务是使学生掌握在FrontPage用表格规划网页及在网页中插入图片、声音、水平线等相关知识与操作，并能合理、灵活地应用到网页制作中，美化自己的网页。

教学方法：

1、先学后教，“兵”教“兵”

　　先学，就是让学生自学，尝试独立操作；后教，是根据学生自学效果，教师进行精讲、点评，并尽量让学生去“教”；“兵”教“兵”，就是让学生充当小教师的角色，自学得较好的学生操作给其他学生看，通过示范，在学生间起到相互促进，相互影响的作用，达到共同进步。

　2、任务驱动，小组竞赛法

 　根据学生不同的学习能力、知识储备、兴趣爱好，依据自愿组成原则，将全班分成若干个小组。

通过网页教学课件的辅助，在教师的引导下，各小组按照自己规划出的网页设计方案，以任务驱动和分工合作形式制作网页。

并通过自我评价、小组评价、师生互评相结合的评价方式使学生自主完成作业，由学生自己担任评委，评选出优秀网页，通过展示学生的优秀作品来激发学生对网页制作的兴趣。

　　由操作能力强的学生充当组长，带动其他成员完成网页制作，一来培养他们合作互助的关系，二来培养学生之间、师生之间的感情。

 　　整节课教师只扮演一个组织者和提示者的角色，一步步引导学生完成本课的目标，让学生充分发挥自主性、协助性，培养他们合作、创新的能力。

 　3、提问引导法

根据学生已有的知识结构体系，采用提问的方式引出每个教学目标，中间穿插观察、自主探究、合作交流的方式加深学生的印象，培养学生的观察能力，动手能力和团结合作精神。

让学生自觉主动地去分析问题、解决问题，学生在操作过程中不断发现问题、解决问题，使学生由学会知识变为会学知识。

教学评价：

在教学过程中一方面要考查学生能否顺利掌握制作网页的基本技术方法，根据设计需求完成网站首页的制作，另一方面又要考查学生在作品中是否做了科学的布局规划、是否合理地运用了各种网页元素，作品是否具备表现力和较强的可读性。

教学过程：

一、创设情景、引入课题、明确任务

师：

上节课我们已经规划了自己的网站，今天老师给大家带来了一个礼物，它是一个漂亮的网站，它就是“老师个人学校网站”，里面有许多关于同学们的内容，如：

你们漂亮的生活相等，请同学们欣赏。

生：

学生认真观看，自主互相讨论，畅谈想法及发表意见。

师：

继网站筹划之后我们就要着手来进行网页的设计了，第一个要进行的当然是首页的制作。

首页是网站的“脸面”，能不能吸引访问者的注意，它显得尤为重要，所以在设计制作首页时需要特别花心思。

怎样设计一个好看的网页让网站第一时间抢占浏览者的眼球呢？

再度打开网站的首页。

生：

仔细观察该首页的特点。

并互相讨论，各抒已见。

师：

上节课已经搜集了素材，这节课咱们来动手制作网站的首页。

指导学生使用FrontPage打开范例“班级网站”的首页，让学生进行小组交流，回答以下几个问题：

1、你知道有哪些软件可以用来制作网页吗？

2、该网页包含了很多元素，它们是如何整齐有序地分布在网页中的？

用什么可以分割网页的版面布局呢？

3、该首页包含了哪些元素？

是否能很好地表达主题思想？

结合小组收集到的素材，你认为在自己的网站首页中可以添加哪些网页元素？

4、导航栏是网站的“地图”，没有它，浏览者就会“迷路”。

选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看看会出现什么？

生：

观察思考、探究、小组合作交流，回答教师提出的几个问题，并确立自己将要开展的工作。

师：

其实很多文字处理软件都可以设计网页，如Word中，利用“另存为web页”就可以将文档保存为网页，有些图像处理软件如PhotoShop也可以制作网页，Windows“记事本”也可以制作网页等，不过FrontPage和Dreamweaver却是最方便的网页制作软件，因为它们不仅可以制作网页，而且能方便地设计和管理网站，很适合入门学习。

二、先学后教、任务驱动、自主学习

1、用表格进行版面布局

师：

（1）提问学生都为他们的主页准备了哪些内容和素材（如文本、图片、动画、音频、视频）？

（2）引导学生阅读教材，然后动手实践。

生：

（1）学生回答老师的问题。

（2）上网学习相关的技能技巧。

（3）小组合作自主探究，教师引导，并安排操作熟练的学生进行演示。

师：

（1）教师巡视课堂，做个别辅导。

针对学生普遍存在的问题，教师做详细讲解。

（2）以前我们可以用表格来表示数据信息吗？

表格还可以用来对网页版面实现分割吗？

（3）你打算怎样安排它们的具体位置才能使网页更加合理美观，方便访问者访问？

（4）让打开学生常去的网站，腾讯QQ网站，让学生观察并提问他们发现了什么，再逐一把表格中的各元素删除，使网页上只留下一个空表格结构。

（5）提醒学生要在编辑窗口和预窗口之间切换观察，使表格结构调整得更加合理。

（6）如何才能让表格不显示在我们的网页中呢？

生：

思考回答问题，小组合作探究、交流，完成老师布置的任务。

师：

（1）对比展示两张素材相同布局不同的网页。

一个使用表格布局，但表格边框隐藏，其页面工整，文本、图片摆放对称，具有一定的规律；另一个不用表格布局则页面凌乱，图文混杂，摆放杂乱。

（2）教师简单演示。

A：

添加表格；B：

表格属性设置面板中的几个常用设置选项说明。

（3）指出学生易出错或难于处理的问题及学生可能遇到的问题。

生：

（1）认真观看教师演示，归纳总结交流自己动手动实践过程中存在的问题和不足、成功的心得体会及改进思路等。

（2）互相找出易出错或难于处理的问题及学生可能遇到的问题，合作探究解决的办法。

2、添加网页元素

师：

（1）要求学生把事先准备好的各种网页元素（如文本、图片、动画、音频、视频）添加到主页，也可使用教师机的共享资源库的素材。

（2）把学生用到的技能要点发到学习网站上。

生：

（1）小组合作交流，对之前收集到的素材进行选用，添加到网页中。

（2）上网学习相关的技能技巧。

（3）上网查找需补充的素材。

（4）学有余力的同学还可以尝试怎样让网页更加生动。

如添加视频、背景音乐等。

师：

（1）恰当地为学生提供方法，讲授经验心得。

（2）解决学生提出的疑难问题。

（3）鼓励学生进行发现和尝试提高他们的动手能力。

（4）教师巡视课堂，做个别辅导。

针对学生普遍存在的问题，教师做详细讲解。

师：

（1）教师简单演示。

（2）指出学生易出错或难于处理的问题及学生可能遇到的问题。

生：

认真观看教师演示，归纳总结交流自己动手动实践过程中存在的问题和不足、成功的心得体会及改进思路等。

3、设置超链接

师：

（1）如何通过超链接技术实现网站的导航功能？

（2）再次提出导航栏是网站的“地图”，没有它，浏览者就会“迷路”。

选定范例网站首页导航栏中的栏目文字，单击常用工具栏上的超链接按钮，看看会出现什么？

（3）你发现哪些地方需要设置超链接吗？

试对它们进行设置。

（4）如何检查各个链接目标是否设置正确？

生：

动手尝试，通过自主探究、小组合作交流，回答老师的问题。

师：

教师简单演示。

三、课堂小结、作品展示、师生评价

（1）教师引导学生进行总结，针对本节课的重点知识进行提问，了解学生对相关知识的掌握。

（2）学生相互欣赏作品，推荐优秀作品在全班进行展示。

我们来评一评，

哪个作品做得好，好在哪里？

那个作品还存在不足之处，都有那些方面？

师生共同评价，教师对完成情况好的学生和帮助他人的学生给与表扬。

四、教学反思

本节课采用的教学理念和教学方式是在建构主义的教学理论指导下，采用“任务驱动教学法”,让学生这种“带着任务自主学习”的探究模式下实现知识的意义建构。

以学生自己实践、自主学习为主，老师巧妙引导，适时指点为辅，学生在这种学习过程中处于积极主动的主体地位，从而可以充分发挥学生的学习主动性和创造性，使学生自主地获取知识。

让学生通过合作协调、构思创新的方式完成整节课学习的方法，极大调动了学生的学习积极性，培养了其信息表达的能力，加强了学生的信息意识，提高了信息处理的能力。

在探索式学习中，重要的不只是仅对任务完成的学习，而是学习者对知识的探索过程，是学习者在探索知识过程中的思维飞跃，是个性化发展的极好过程。

同时，自主学习可以使每一位学生根据自己的知识基础与学习方法自定步调进行个别化学习，克服了传统课堂教学中压制个性化发展而采用“一刀切”的人为现象,但在引导过程中要注意掌握好“度”，既让学生自己探索，掌握知识，又要合理补充，及时纠错。

《网站制作——站点创建与首页制作》教学设计

一、教材分析

本节课是江苏科学技术出版社教材，初中信息技术（8年级）第3章第2节的第二课时的内容，是继网站规划、网站设计后进行网站实现的关键一节，在整个课程的学习过程中至关重要。

这节课的主要任务是运用Dreamweaver软件，让学生掌握在网页中插入图片、声音、水平线等相关知识与操作，并能合理、灵活地编辑和美化自己的网页。

二、教学目标

1．知识与技能

（1）掌握简单网页的新建方法。

（2）能够在网页中插入、排版文字，掌握图片、水平线的插入方法及属性的设置方法，能够灵活应用“网页属性”对话框，设置网页属性，如背景、背景音乐。

（3）掌握保存网页的方法，了解网页保存与普通文档保存的不同点。

2．过程与方法

（1）对比教学，使学生掌握学习应用软件的基本方法和规律，达到举一反三的功效。

（2）任务驱动、自助探究，动手设计网站的实践活动，建立对象属性设置的思维方法和操作方法，为学生今后学习其它软件奠定基础。

（3）小组合作，培养学生自助、协作学习的能力。

3．情感态度与价值观

（1）能够在对比学习中，让学生体验软件学习的一般方法及规律，提高其学习信息技术的信心。

（2）能够在网站首页的设计和创建的过程中，掌握对象属性的设置方法，初步体验成功的快乐。

（3）能够通过小组交流学习，激发学生探究创新的学习精神。

三、教学重难点

1．教学重点

（1）站点的建立。

（2）简单网页设计方法，如文字、图片以及水平线的插入与编辑等。

（3）设置网页属性的一般方法。

2．教学难点

（1）站点的作用和存储路径。

（2）网页的保存。

四、教学方法

对比和任务驱动教学法，自助探究和合作学习法，

五、教学准备

教学内容准备：

整理、归类相关素材，并分发到学生电脑指定盘。

上课地点：

多媒体教室

六、教学过程

1．情境导入

分发导学案，展示《旅游日记》网站，提问学生放假出门旅游的经历，引导学生思考如何记录旅行过程，讲解网站展示的内容，激发学生创建网站的学习兴趣。

设计意图：

由学生生活实际入手，自然过渡，激发兴趣，活跃气氛。

2．新课教学

（1）网站介绍

通过展示的网页，分析其组成元素：

网站标志、标题、水平线、文字介绍、背景图片、背景音乐，强调网站内容的合理布局。

（2）建立站点

由于我们的网站需要制作多个网页文件以及相关图片、声音文件等，所以网站建设初期就要做好管理准备，我们以站点的形式来管理网站内部文件。

任务1在D盘下建立一个站点文件夹，站点名称：

0128（即班级序号+学号）。

教师活动：

指导学生对照书本进行学习（限时）；

学生操作期间教师巡视课堂，做个别辅导；

针对学生中普遍存在的问题，教师可做详细讲解。

学生活动：

明确教师要求后，阅读教材，开展对照着教材的自学活动；

举手反馈完成与否。

设计意图：

对照教材操作步骤自学软件的相关操作。

（自学为主）

提问思考：

在文件夹列表中看到了什么？

分析多出的文件夹列表栏，多了一个文件夹，里面有两个子文件夹和主页，图片存放在“images”文件夹中。

设计意图：

了解站点的作用，强调站点的管理。

（3）设计首页

再次强调一般首页组成情况，提出课堂制作要求（可跳出案例中各对象的具体摆放要求，但要求出现元素不得缺少）。

任务2 新建首页，要求首页中有如下对象：

网站的图片标志和标题。

网站的建立主旨（文字介绍）。

水平线（起分隔作用）。

链接到下一页的标记（可为文字，也可为图片）。

教师活动：

指导学生示范，讲解如何插入图片（来自文件）、插入水平线等。

（注意各对象“插入点”的选择）

学生活动：

按要求小组合作完成任务。

设计意图：

类比Word中对象的插入方法，使学生学会知识迁移。

并在完成基本任务的前提下，鼓励学生创新。

（类比学习法、知识迁移学习法）

（4）编辑与预览主页

提出具体编辑要求，引导学生设置相关对象的属性。

任务3 编辑主页

设置网站标题文字为隶书、7级、蓝色、居中。

设置水平线粗细为5像素。

设置文字介绍文字为楷体、小二号、蓝色、加粗。

选择一张淡雅图片，将其设置为首页背景图片。

为首页加上背景音乐。

教师活动：

指导学生示范，讲解如何设置文字、图片、水平线以及网页属性等。

学生活动：

按要求小组合作完成任务。

（强调：

必须在“普通”窗口下编辑，网页背景图片的像素符合要求）。

设计意图：

通过小组交流学习，培养学生自助、协作学习的能力，激发学生探究创新的学习精神。

（5）保存网页

教师活动：

深入讲解示范。

学生活动：

认真听讲，按要求保存自己的网页。

（强调：

选择一个其他文件的文件夹分类保存图片等素材）

3．总结与评价

（1）引导学生填写任务完成测评表，相互检查作业，推荐优秀作品，展示给全班同学，表扬完成情况好的同学与帮助他人的同学。

（2）对照本堂课的学习情况进行总结，提问本节课的重点知识，反馈学生相关知识的掌握情况。

设计意图：

加强总结反馈，鼓励学生互帮互助