网页制作教学设计

第1篇：网页制作教学设计

浅谈“网页制作”之网页版面的教学设计

摘 要：若要实现好的教学效果，必然要采用有效的教学方法。《网页制作》是一门理论性、综合性和实践性都很强课程，为了取得良好的教学效果，也让学生理解好、掌握好网页制作的基本知识和技能，文章从分析教材、教学对象、设计思路、教学目标和教学过程等方面来阐述这门课程教学设计思路。

关键词：网页制作;教学设计

随着网络的日益发达，网页技术得到不断普及，在社会各个领域中都充分体现了网页制作技术的重要性，学校方面也开始不断重视这一方面人才的培养。但是，中、高等职业院校的毕业生所学知识往往与就业单位要求不相符，很大方面的一个原因是传统的网页制作课程教学难以满足现阶段的发展形势。因此，笔者将根据这一课程的教材特点和学生的特点，浅谈如何设计“网页制作”的教学。

1 教材分析与教学对象分析

1.1 分析教材。《Dreamweaver MX2004中文版网页制作基础》是我校选用的教材，其最大特点在于采用“任务驱动，案例教学”的形式，这就充分考虑到了实际运用和实际需要，用趣味十足的实际案例来讲解网页制作方面的知识技能和应用技巧，这样不仅使方便教师教学，而且使学生学起来很实用。在学习“网页制作”知识之前，学生已经初步掌握了网络相关知识、数据库设计与应用、Office办公软件的应用、计算机硬件组装与维护、FLASH二维动画设计等内容。因而，在学生已具备了收集、编辑文本、图像信息的能力的情况下，我们的教学重点应该放在网页信息表达方面，例如网页版面的美化、文字内容表达等。不仅要加强学生的信息意识，还要提高学生的信息处理能力;教材第四章的内容中以“我的个人主页”为案例设计，这给了学生充分的想象空间，满足学生喜欢展现自我的个性需求，又有效发挥他们的主动性和创造性。另外，对网页版面设计效果的评价促使学生更好的了解编排原则、布局种类、色彩搭配等，有助于提高他们的审美能力和艺术修养内容。

1.2 分析教学对象。本课程的教学对象是中等专业学生，根据学生的性格特点，他们对操作性较强课程的学习积极性明显高于纯理论的学习。而在现代社会，《网页制作》这门课程与每个人的生活都是息息相关的，加之其网页界面融合文本、图片、音乐、视频等为一体，极大的调动了学生的学习兴趣，继而激发学生了解网页实现原理和方法的欲望;教师在实际教学过程中要时刻注意引导学生利用已有知识更好的学习网页制作，与此同时也巩固了旧知识，一举两得;教师应当适时地监控学生的协作学习情况，鼓励分组合作交流，并实时总结心得、体会，引导学生“自主、合作、探究”学习。

2 《网页制作》课程教学设计的思路

从以往《网页制作》课程的教学情况来看，在学习这门课程之后，学生虽掌握了基本理论知识，但实际运用能力较差，很少能制作出优秀的作品，主要表现在两个方面：网页色彩的使用和网页内容的定位。因此，教师在设计教学时，需要借助一个载体——一个实际的项目，并将整个项目分解成若干小项目，再把每一个小项目分别作为一个学习任务，用这样的方法贯穿于整个教学过程。完成了一个小项目，也就相应的掌握了一个知识点。便这样完成学生运用三个软件进行网页制作的学习。

课程设计要有助于提高学生的技能水平。运用“项目导向”与“任务驱动”的教学模式，创新教学方法，继而帮助学生有效掌握网页版面设计技术。具体阐述如下：注重培养学生自学能力和专业技能。在掌握网页制作理论知识的同时，也要注重学生社会能力的培养。在学习网页制作的过程中，主要学习一些网站开发知识，可以让学生以自主学习或是合作学习的形式进行，若是结合实际来学习会达到更佳效果更好;将网页制作作为一项整体的教学任务，对于教学内容、教学方法和考核内容，做好任务分配工作，结合多样的教学方法建立与之相应的考核体系，这样必然达到最佳的学习效果;教学设计要结合社会需求，作为理论与操作相结合的学科，网页制作在设计课程时，可以模拟真实的项目，如此可以进一步提升学生的技能，任务驱动教学模式的实行，能更好的调动学生的学习积极性和求知热情。

3 教学目标的设定

3.1 知识目标。这一目标主要为：掌握Dreamweaver的工作环境，以及菜单、工具栏的使用方法;掌握新建网站的方法、网页的编辑技术和文档的保存方法;掌握操作表格、单元格、框架、层的辅助定位工具的方法;掌握插入和编辑网页超链接的技术;掌握插入和编辑文本、图片、动画、视频的方法和设置格式的方法;掌握利用Fireworks设计处理文字的方法;掌握利用Fireworks制作网页中所需的线条及边框;掌握用工具绘制图形的方法;掌握基本动画和引导动画的制作。

3.2 技能目标。这一目标主要为：能通过模仿网页来制作实际网页;能在网页中熟练地插入文字、图片、动画等;能通过使用简单的表格编排出结构清晰、内容整齐的网页内容;能恰当地选择适当的网页背景图案和背景音乐;能插入简单的表单，使网页具有初步的动态功能。

3.3 情感目标。这一目标主要为：培养学生的敬业精神、团队协作精神;培养学生的社会责任感和工作效率观念;培养学生的审美情趣和审美能力;通过课堂中出现的网页，渗透爱党爱校教育;在合作学习过程中培养乐于助人、团结协作的精神。

4 教学重点、难点的设定

教学重点是帮助学生掌握网页布局、表格的制作和编辑方法、表格的嵌套和属性的设置，以及熟悉网页的各种元素。教学难点在于培养学生分析网页布局和色彩搭配的能力。

5 设计教学过程

5.1 引例以导入新课。(1)推荐给学生优秀网站做范例。1)清华大学网页布局——“国字型”并分析其网页元素;2)万州一家企业网页布局——“三字型”并简析其网页元素;3)重庆市机关党建网页和环球厨卫网页布局———“T字型”并简析其网页元素。(2)组织学生讨论网页的内容和风格，分析网页框架和布局。

5.2 课程主要内容的学习。(1)以广播的方式展示范例网站的网页，逐步引导学生分析网页的布局并尽可能详尽(“国”字型)，在分别分析网页元素——文本、图像、表格等。(2)分小组布置活动任务，并分别指定小组长，教师实时观察进程，并对学生制作过程中遇到的问题适时给予帮助。(3)组织小组之间进行网页制作互评;(4)设计网页版面设计评估表。

5.3 课堂小结。在这个教学过程中，利用现代多媒体中的实例网页，教师准备好备好教学素材和课件，围绕网页制作实例，来促使学生掌握网页的布局，表格的制作与编辑方法，并熟悉网页的各种元素。通过课堂上的实践操作环节，很好的培训了学生的技能，教会学生举一反三、融会贯通，大大提高了学生的综合运用能力。同时提高了学生的专业技能水平，让学生真正地学会学以致用，教师也顺利完成教学目标，取得良好的教学效果。

6 设计考核方式

网页制作作为一个整体项目，可以从以下几方面进行评价：页面结构设计、网页中动画的制作、网页中导航的制作、子页面的制作、网页中图像的制作、网页中的链接和整体效果。主网页和二级网页在整体布局上要风格统一，布局合理、美观，文件命名正确，文件夹组织标准有序，符合社会标准;按要求制作网页导航、编辑网页元素，导航要求清晰、有一定动画效果。考核评分时，教师不仅应当结合学生的平时操作情况，还应考虑作品展示时其他同学的评价，综合评价给出一个分数。

7 结束语

网络技术发展不断更新，作为实践性很强的科目，“网页制作”对学生的动手能力要求越来越高，同时还需要学校和教师积极主动地关注社会需求，及时掌握技术发展趋势和网页制作发展动向，鼓励学生在不断储备知识的同时，不断提高自己的实践操作能力，使更多的网页制作人才得以涌现。

参考文献：

[1]曾广雄.中文Dreamweaver网页制作实例教程[M].北京：研究出版社，2008：206.

[2]周奇.新编网页设计与制作教程[M].北京：研究出版社，2008：185.

[3]贾勤.网页设计三合一能力教程[M].北京：中国铁道出版社，2006：54.

作者单位：辽宁省大连市旅顺广播电视大学，辽宁大连 116041

作者：王晓晴

第2篇：浅谈“网页制作”之网页版面的教学设计

【摘要】相同的课程采用不同的教学方法，会有截然不同的教学效果。针对《网页制作》这门课程综合性、理论性和实践性非常强的特点，为了让学生更好的理解和掌握网页制作的知识和技能，从而取得良好的教学效果，文章从教材分析、教学对象分析、设计思路、教学目标、教学重难点以及教学过程和评价阐述这门课程教学设计思路。

【关键词】网页制作 任务驱动 小组分工合作

《Dreamweaver MX2004中文版网页制作基础》是中等职业技术学校计算机网络方面的一门主干专业课程，它的操作性与实践性特别强，深受学生欢迎。为了更好的让学生掌握网页制作的精髓，教师应该经常关注且精心设计课程教学方案，笔者结合“重庆幼专招生信息查询”网页这个具体的实例，探讨这一问题。

一、教材分析

我校选用的教材是《Dreamweaver MX2004中文版网页制作基础》，它的最大特点是采用“任务驱动，案例教学”的形式，充分考虑了中等专业学校教师和学生的实际需要，通过具有趣味性的实例来讲解网页设计与制作方面的应用技巧和基本方法，使教师教起来方便，学生学起来实用。

在学习本课程之前，学生已初步掌握了英特网相关基础知识，计算机硬件组装与维护，数据库设计与应用，Office办公软件的应用，Photoshop图形图像处理，FLASH二维动画设计，3dmax三维动画设计等内容。因此，学生已经具备了收集、获取和编辑文本、图像信息的能力，我们应把重点放在网页信息表达能力方面(比如，在版面美化、文字内容的表达、图片的内涵)，加强学生的信息意识，提高处理信息的能力;本书第四章中以“我的个人主页”为案例设计给同学们丰富的想象空间，迎合了学生善于展现自我的特性，促使他们主动、创造地学;网页设计效果的评价能使学生了解内容编排的原则，页面布局的种类，色彩的搭配，内容和形式的统一等，提高他们的艺术修养和审美情趣。

在教材内容的编排上，抓住了预备知识——环境的设置——网页元素(如文本、图像、表格、表单)——框架——CSS样式——模板和库——代码设计——网页的发布与维护这条主线，以贴近生活的项目实例，使学生从总体上把握了网站的设计开发。

二、教学对象分析

本课程教授对象是中等专业学生，他们对操作实践性较强的课程学习积极性明显高于纯理论知识的学习，特别是《网页制作》这门课程，在当今时代，它与我们的生活息息相关，再加上它的界面融合了文本、图片、动画、音视频等一体，使学生产生极大的兴趣，激化学生对网页实现原理和方法的欲望;在学生已掌握办公文字处理、图形图像处理、动画制作的基础之上，教师在教学过程中要注意引导学生将所学知识应用到网页制作，同时也达到巩固旧知识的目的;教师要实时监控学生分组协作学习情况，鼓励多交流，并总结心得与体会，使协作学习真正走向成熟。

三、设计思想

制作“重庆幼专招生信息查询”网页，带有一定的综合性，它真实再现网站设计理念。因此应将项目任务分解，采用小组之间相互协作学习方式是非常必要的。根据网站建设项目的特点，将项目任务分成网站总体规划设计、网站运行环境的配置、网页版面的布局、图形图像的处理、文字内容撰写等，每个小组就是一个完整的开发设计团队，由5-6人组成，每小组成员在组长的统一指挥下，完成相应网页元素的加工处理，这样可以充分调动每个同学的积极性，发挥每个同学的特长，培养每个同学的团队意识，达到取长补短、相互促进，共同完成并组合成一个“重庆幼专招生信息查询”网页。最后，各小组作品实现互评，并指出各自的优缺点。

四、教学学习目标

本单元的认知、情感和动作技能三种目标分述如下：

认知目标：

(1)能熟练应用表格布局网页。

(2)能独立分析常见网页版面布局。

(3)能熟练应用文本插入、图片的编辑和表格的绘制。

(4)能客观评价网页的内容和风格，具备一定的审美能力。

情感目标：

(1)通过课堂中出现的网页，渗透爱党爱校教育。

(2)具有乐于助人、团结协作的精神。

技能目标：

(1)能模仿网页进行实际网页的制作。

(2)能在网页中熟练地插入文字、图片、动画、水平线。

(3)能使用简单的表格编排网页内容，使网页的结构清晰，内容整齐。

(4)能选择合适的网页背景图案和背景音乐。

(5)能够插入简单的表单，使网页具有初步的动态交互功能。

五、教学重点

掌握网页布局，表格的制作与编辑方法、表格的嵌套和属性的设置;熟悉网页的各种元素。

六、教学难点

分析网页布局、色彩搭配。

七、教学过程

本单元的教学共需2课时，教学安排如下表：

“重庆幼专招生信息查询”网页

八、教学评价

本节课的教学评价主要根据下面的网页作品评价量化表来进行，由学生自评和教师打分反映学生的学习状况。

结语：在此二节课的教学中， 利用多媒体中实例网页，备好教学课件和教学素材，围绕实例，使学生掌握网页的布局，表格的制作与编辑方法、表格的嵌套和属性的设置;熟悉网页的各种元素等。通过实践操作课程环节，加强技能培训，让学生学会举一反三，融会贯通，提高综合运用能力，增进学校与社会的密切联系，培养学生的社会责任感。同时通过实例网页在课堂教学中渗透学生爱党爱校的情感教育。此二节课提高了学生的专业技能水平，让学生真正地学有所得，学有所用，顺利地完成了教学目标，取得了良好的教学效果。

参考文献：

[1]田博文主编，Dreamweaver MX 2004中文版网页制作基础，人民邮电出版社，2006

[2]刘启珍，杨黎明 主编，学与教的心理学，华中科技大学出版社， 2012

[3]钟启泉总主编，祝智庭主编，信息教育展望，华东师范大学出版社， 2002

[4]张春晓主编， 网页制作与网站建设宝典，电子工业出版社， 2012

作者：黄俊操

第3篇：中职网页制作课程教学设计探讨

摘 要：《网页制作》是一门理论性与实践性非常强的操作性课程，针对该课程的特点及中职生的特点，为让学生了解和掌握网页制作知识和技能，从而达到良好的教学效果，文章从选好适用教材规划课程、课程内容的教学设计，制订教学方案、教学方法、考核评价方法的改变几个方面对网页制作课程教学设计进行探讨。

关键词：网页制作;教学设计;教学方法;考核评价

怎样建立一个网站?怎样才能设计一个精美出色的网站?面对中职校的学生学习网页制作又应该从哪儿入手?应该学会哪些制作网站的技术，并让学生了解和掌握网页制作知识和技能?这就是中职校网页制作这门课程最关心的问题。多年来我一直从事中职校网页制作课程的教学工作，下面我就谈一下网页制作课程进行教学设计。

一、选好适用教材

我校中职生大多是初中毕业生，且基础较差，选定教材的难易程度一定要掌握好，不能让学生看课本就像看天书，认为自己学不会，从一开始就放弃这门课程。同样，教材也不能过于简单，让学生认为没有难度，不学或敷衍一下，这样也达不到教学的目的。结合我校学生的特点，我们选的是根据教育部《中等职业技术学校计算机应用与软件技术专业领域技能型紧缺人才培养指导方案》编写的《网页制作》，本教材贯穿项目教学的思想，从网页制作初学者的角度出发，并采用“任务驱动”模式进行编写，通过一个个具体的课堂任务案例，由浅入深地讲解网页设计和制作，非常适合我校学生的特点。

二、规划课程教学内容

规划教学内容是做好课程教学的首要任务。根据中职学生的特点，本课程选择以培养学生的实践动手能力为目标。教学内容主要定位在静态网页的制作、设计和发布方面，在内容组织上从实际需要出发，以够用为原则，精选了网页制作技术的一些主要内容展开讲解，主要任务有网页的基础知识、HTML语言、Dreamweaver 8软件、Photoshop CS2软件、Flash 8软件、CSS层叠样式表、Script脚本等。以网页设计的技能学习和训练为主，重点讲授Dreamweaver网页设计软件的使用方法及相关技巧。让学生通过这门课程的学习，能够具备综合运用专业软件为中小型网站设计和制作网页的能力，为今后从事相应的网站设计制作工作打下良好的基础。同时，注意综合运用学生已学的专业课程知识，如在其他课程学习的Photoshop、Flash等媒体处理软件，通过Dreamweaver网页设计软件进行整合，在课程的教学内容中，结合中职人才培养要求，体现实用原则，注重培养学生自学能力，以应用能力培养为目标，以适应信息技术的不断更新，以培养适合社会需要的实用型人才为目标的教学体系。

三、课程内容的教学设计，制订教学方案

根据中职学生的认知规律和网页学习的特点，循序渐进、由浅入深地介绍网页制作技术。实践证明，学生学习网页设计制作的过程一般可分为四个阶段：

第一阶段是网页入门，内容包括第一、二章，主要让学生了解什么是网页和网站，什么是HTML语言以及常用的网页制作工具;学会制作简单的网页和网站，既能把各种现成的素材插入网页中，制作成一个个网页，并能在网页中对这些内容进行简单地编排，最后能将这些网页链接起来，构成一个简单的网站。

第二阶段是网页布局制作阶段，内容为第三章，主要让学生学会网页内容布局的相关技术和快速建站的技术。这部分虽然也属于网页基础，但内容相对较难，也非常重要，因此单独划为一个阶段。

第三阶段是网页美化设计阶段，内容包括第四、五、六章，主要让学生学会使用Photoshop软件对各类素材进行加工处理和布局设计制作;学会使用Flash软件设计制作网站的动感效果;通过对优秀网站的鉴赏，了解网站的制作流程、网站的布局设计和整体色彩搭配。这一阶段的教学是建立在学生已经初步掌握了Photoshop和Flash的简单操作基础上的，而在网站设计上更突出让学生通过鉴赏和模仿，学会网站设计技术，教学中应该更多地根据学生的作品特点引导性地提供各类样例给学生参考，让学生学习某些符合他自身特点的色彩搭配和网页布局。

第四阶段是网站程序使用阶段，内容包括七、八章，主要让学生学会网页特效的制作和中小型动态网站的架设。这一阶段的学习除了能让网页更有技术含量、更有动感外，还能掌握简单的中小型动态网站建立方法，为以后学习动态网站制作打基础。

四、合理的教学方法

网页制作是一门实践性和操作性非常强的课程，要提高学生的综合应用能力和创新能力，加强学生的实践动手能力，课程必须安排在计算机房进行，采用教与学结合的方式，学生通过多练、多做来掌握。在网页制作教学中教师要制定教学方法，根据教学内容、学生特点、教师自身的教学风格等实际情况，通过多媒体教学手段，结合案例分析法、分组讨论等多种教学方法进行教学。

1. 多媒体教学手段

在多媒体教室运用多媒体讲台、投影设备、音响设备等将案例效果的视频或图片进行展示。

2. 案例分析法，给出相应的项目任务

教师在上课的过程中，要精心设计案例，本着创造性、实用性和新颖性的原则，取人之长，补己之短。要结合课程教学的需要将知识点融于其中，激发学生的学习兴趣。对案例要进行解剖分析，结构与知识点应用，详细了解案例的典型性与应该掌握的问题解析，让学生开阔视野，开拓学生的学习思路。

3. 模仿操作法

进行模仿制作，让学生详细了解网站建设的方法和流程、制作过程和步骤，做到心中有数，了解制作现场，模拟制作步骤，提高学生动手操作，激发学生的学习热情，增强学习的积极性和主动性，调动模仿他人的网站的制作兴趣与热情。

4. 练习法

教师演示案例制作，学生在计算机设备上跟着教师的操作示范进行实践，边讲边练，边练边学。给学生布置网页制作练习，让学生了解本节课要解决的问题和工作任务，有目的地进行学习，巩固知识和提高操作设计水平。

5. 分组讨论学习

采用学生和老师以及学生与学生间分组进行学习的教学方法，如学生网页设计自评、课堂讨论、实践作业、学生网页制作的作品欣赏、模拟设计环境等教学方法，让学生主动地参加到教学活动中来。这样教学内容就在教、学、赏、作、创的交融中完成了，同时也能培养学生的思考、总结能力，也能发挥学生的团队精神，从而提高学生的积极性和主动性。对项目制作作品，分组讨论项目实施方案和计划，并在计算机设备上完成项目制作，之后，由每个小组派出代表对本组的作品进行展示和解说。最后，由教师和学生一起对他们的作品进行点评、讨论。

6. 课后创新活动

一方面组织学生参加比赛，包括国内举办的各种大赛和校内举办的比赛，鼓励学生以团队合作方式进行创作，促进学生同行之间的相互交流与学习。另一方面根据上课的内容，又进行了拓展练习，留下相关作业进行巩固复习工作。这样既对知识点进行了强化，同时也激发学生继续学习的兴趣。

五、考核、评价方法

网页制作课程的实践性非常强，我们要检验的是学生的设计能力、综合应用能力和创新能力，单靠最后的期末考试，是不能确切地评价一个学生的真实水平的，因此要将平时的作业、练习都纳入学生评价中。对于网页这门课程，我将课堂任务分解为“知识预读”“任务目标”“实施步骤”“对照练习”“任务小结”和“知识拓展”等环节，每个任务完成后可以用下面的评价量表进行评价。

平时的作业就是一次次的案例，检查学生平时学习的态度和知识的掌握情况，进行评分。期中考试可以做一个简单的个人网页来考核学生的学习情况，要求在考试时间内完成题目。对于期末考试，我认为应该以要求学生设计一个完整的网站来结束本课程，所以网页制作的考核成绩应以平时作业、期中考试成绩、期末考试成绩按4∶3∶3的比例评分。因为网页制作要建设一个整体设计的网站在短短的两三个小时内是无法完成的，包括素材的收集、版面的布局、内容的充实等，所以应该以上交作品的形式完成本课程的期末考试，而不是像原来所执行的2个小时完成考题。在作品完成的过程中，教师进行巡视、评价，也就是我们考核的不仅仅是最后的作品，而是将完成作品的过程也作为我们评价的一个依据。最后，上交的作品可以让全班同学互相点评、互相评价，在评价别人作品的同时以提高自己的水平。

几年来，我一直坚持上述的做法，取得了良好的教学效果。在我所教的班级中涌现出了一批网页制作高手，我所教的网页制作课程也越来越受到学生的喜爱。

(武鸣县职业技术学校)

作者：潘春莲

第4篇：《网页制作》教学设计

阜新市第十八中学

彭勇

一、教材依据

辽宁师范大学出版社 初中信息技术八年级上册，第二单元《网站设计与制作》，活动1“创建个人网站”以及活动2中的关于部分FrontPage2000的内容。

二、设计思想

【教学指导思想】

信息技术课是一门实践性很强、极富创造性、具有明显时代发展性特点的课程。而现代教育理论提倡以学生为中心，强调学生“学”的主动性，学生是信息加工的主体，教师的作用体现在组织、指导、帮助和促进学生的学习、充分发挥学生的主动性、积极性和创造性，从而使学生最有效地进行学习，达到最优的教学效果。 因此本课题遵循“教师主导，学生主体”的设计理念，让学生在教师的引导下，对所学的内容进行探索、分析、研究，在实践操作中培养学生科学的态度和价值观，同时培养学生的学习兴趣。

【教学对象分析】

.学生的知识能力

教学对象是八年级的学生，这一阶段的学生正处在抽象逻辑思维逐步形成的过程中，但形象思维仍是获取知识的重要思维方式。而本节课中涉及到的HTML语言有其枯燥难懂的一面，学生在理解上存在着一定的难度，所以教师在教学设计中希望能通过学生自己的双眼、双手以及思考来发现新知识，从而减轻他们对新知识的畏惧、降低理解的难度。

.学生心理特点分析

初中学生活泼好动、好奇心强、求知欲旺、视野广泛，对信息技术充满兴趣，大部分学生都能熟练使用浏览器浏览网页，他们对上网和网页有着极大的兴趣。所以在本课题中教师利用学生的这种心理设计了一个趣味导入，从趣味引入学生感兴趣的网页，使学生在课堂中保持着较高的学习积极性。

【教学内容分析】

本节课是新授课且是第二单元《网站设计与制作》的第一节课，教师将这节课的重心放在了“启下”上，目的是激发学生的学习兴趣和他们的求知欲，为顺利开展以后的教学活动打好基础、做好铺垫。本节课的教学内容有两个方面，一是初识HTML语言，二是初识FrontPage2000的窗口组成。教师设计的重点并不是让学生充分理解HTML语言的结构，而是通过HTML语言能够有效地引出制作网页的软件FrontPage2000，继而使学生能顺其自然产生使用FrontPage2000制作网页的兴趣。

教学内容的整合：课本上将初识HTML语言和FrontPage2000的窗口组成分在了两个活动中，考虑到信息技术课一星期一个班只有一节课，如果第一节课只讲HTML语言，不涉及制作网页的软件FrontPage2000，会令学生感到枯燥，同时这种枯燥感很可能会维持一个星期直到下节课，这样学生对制作网页的兴趣就远不如将两个教学内容结合起来的高，也不利于今后的教学活动开展。所以教师将本节课的重心放在让学生理解HTML语言与FrontPage2000之间的联系上。

三、教学目标

【知识与技能】

（１）了解网页与网站的有关知识；

（２）了解HTML标识性语言的功能及结构；

（３）认识构成网页的基本元素；

（４）了解常用的制作网页的软件； （５）了解网站策划与定位的重要性，掌握网站的规划流程；

（６）了解网站设计软件FrontPage2000的窗口组成；

（７）学会设计有意义的网站主题，收集网站相关资料，画出网站的结构图。 【过程与方法】

（１）趣味导入新课的内容，极大地发挥学生主体、教师主导的作用；

（２）适时引导学生产生新的问题，再通过教师的讲解与演示、对比和学生的自主学习来解决问题。

【情感态度与价值观】

（１）强烈的求知欲激发学生的学习兴趣和学习积极性；

（２）了解信息技术的前沿知识后，学生会对信息技术课保持新鲜感和兴趣感；

（３）学生在不断实现自己主体地位的同时，也获得了新知识，更从中体会到了学习的快乐。

四、教学重点和难点

重点：

1、认识构成网页内容的基本元素，理解网页布局的特点；

2、了解HTML标识性语言的功能及结构；

3、学会启动FrontPage2000，了解网站设计软件FrontPage2000的窗口组成，理解各组成部分的功能；

4、网站主题的确立，规划网站结构图，学会创建新站点的基本方法。

难点：

1、理解HTML标识性语言的结构及应用HTML语言编写简单网页；

2、网站如何定位；

3、如何收集网站的相关信息；

4、在导航视图模式下建立网站结构。

五、教学准备

①搜集常用的网页制作软件的相关信息；

②打开多媒体电脑教室的教师机和学生机，保证电脑教室的广播系统工作正常；

③共享班级文件夹；

④示例的班级网站及网页。

六、教学模式选择

“学生主体，教师主导”的教学模式。

七、教学过程

1.情境引入： 向学生展示一组优秀网站、网页，激发学生创作自己个人网站的兴趣和欲望。学生在观看，欣赏网站时，受到激励产生想制作一个网页的冲动。在师生欣赏网页作品时复习回顾已学并已淡忘的基础知识。问题：网页的构成元素及布局？教师分析案例，与学生共同回顾文字的插入、图片的插入和设置、动画的插入和设置、表格的相关操作等相关知识。让学生在案例中回顾基础，激发灵感。并引入本节主题，自己动手制作网页。

2.展示模板：

教师向学生展示本节课要完成的网页。要求学生会模仿制作出该网页模板，并能够自己创作出新的网页模板。

3.本节任务：

1）网页与网站有什么区别？

2）一个网页由哪些元素组成？对照给出的网页分析网页的组成元素—标题图片，标题栏，水平线，滚动字幕，图片，文字及背景等等。

3)用Photoshop 处理素材，达到给出网页中图片标题，并设计出突出自己主题的网站标题。 拓展：用photoshop软件，画图软件，或flash软件设计自己需要的网页图片。 4）要求学生会模仿制作出该网页模板，并能够根据自己确立的主题制作一个网页模板。 学生自主完成模板仿制，并自主探究设计一个复合自己设计主题的网页模板。小组内成员可相互交流，教师巡视，随时解决学生在学习过程中遇到的问题，并注意收集有共性的问题，并适时给以学生以点拨。尤其关注一下学困生。

5）小组选出最佳模板，探究完善此模板，然后以此模板设计网页。 4.评价展示：

作品完成，提交给教师机，自我评价，小组互评，选出小组最佳作品提交展示，师生共同赏析评价，挖掘作品优点，并指出改进之处。培养大家的审美能力，并挖掘大家的创新能力。

5.课堂小结

师生共同回顾这节课的基础知识与基本技能，并加强网络道德意识，注意版权。

八、教学反思

在信息技术教学中，必须以新的教学理念和教学理论为指导，根据新的课程标准，探索适合信息技术课堂教学的教与学的新策略和新模式来挖掘学生潜能，提高学生素质。

以前我总认为信息技术课就是教会学生如何操作，课堂中总是采用“教师讲，学生听”的传统模式，是“学”跟着“教”走，只要“我说你做”就可以了。现在我尝试着做一些改进，在本课题中围绕“学生主体、教师主导”的设计理念去设计每个教学环节，积极体现学生的主体作用，努力提高学生的学习效果。

实践证明我的想法是好的，但是在实践中难免有疏忽和做的不够细的地方。比如：由于我的观察不全面，忽略了个别学生学习中的心理障碍，有些学生的畏难情绪影响到他的整个学习效果；课堂学习气氛热烈但不够和谐。这些都说明了一个问题：我仅仅注重了学生整体主体的体现，而忽略了个体。经过思考，我认为在这节课的教学设计中可以多增加个体展示的机会，特别是那些学习有困难的学生，我应该多关注他们的动态，多帮助他们。

本课的教学目标是掌握使用FrontPage制作网页的基本方法；重点是掌握在网页中插入文字和图片的方法；难点在于插入表格规划网页的结构。

备课时，发现教材以一个标题，一张图片以及一篇文章的简单结构示例，如果完全依照教材进行授课，势必无法突破难点。于是设计了一个将学生前期制作的环保报刊，利用FrontPage软件制成网页的环节来帮助学生突破难点。并取学生环保报刊中具典型结构的五份。制作出引导学生分析结构，规划框架的演示片备用。

课堂以自主探究的模式展开，同学们在以往的学习中已掌握了在Word中插入表格、图片等方法，在FrontPage中他们很顺利地完成了教材呈现的目标。基本掌握了单张网页的制作方法。

接下来就是突破难点的训练。面对演示片呈现出的任务及教材相关提示。此时，问题集中到如何插入一个布局表格来实现规划好的结构。而教材上完全没有提示学生探究FrontPage “表格”与Word “表格” 功能的异同。少数同学开始试着插入适合自己网页结构的框架表格，而大部分的同学则完全没有考虑结构问题，做起直接的搬移，将FrontPage当成Word来用。直到出现无法将图片，文字放置到设想位置时，才意识到教材中“FrontPage通常用表格来安排网页中各种内容（文章、图形等）的版面位置。”这问话的含义是否明确。急着寻求解决的办法。我便让哪些意识到要先插入适当结构框架表的学生来说说他们的想法。并及时出示与学生思维一致的演示片，将探究FrontPage “表格”功能的提示呈现给他们。同时利用极域教室的功能，向全体同学展示同伴的探究结果，让学生不同的思绪方式及智慧产生碰撞，相互启示，顺利突破教学难点。

第5篇：网页制作的教学设计

一、教学目标

1 、知道站点、主页的概念，能在指定位置建立只有一个网页的站点;

2 、认识 FRONTPAGE 的界面;

3 、掌握在主页中插入文字、图片、水平线;

4 、掌握页面文件与图片的保存。

二、教学重点

1 、能在指定位置建立只有一个网页的站点(难点)

2 、能在页面中插入文字、图片、水平线

3 、掌握页面文件与图片的保存(难点)

三、学情分析

学生已经学习了 WORD 、 POWERPOINT 与上网浏览信息，对计算机的基本操作( WORD 中文档的编辑，网页的浏览等)比较熟练。这使得学生主动探索、自主学习成为可能。每位学生必须完成基本任务，有能力的学生还可以完成提高篇的学习，以充分发挥学生的积极性与自主性。

四、教学方法

在教学中，一方面采用比较教学的方法，促进学生知识的迁移;另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。

五、教学过程设计

教师活动： 1 、引入课题：(激发兴趣，活跃气氛)

同学们喜不喜欢上网?经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么?(网站)

浏览新浪网站，浏览的第一个页面称为什么?(主页)

我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。

问题 1 ：网站是不是就是网页?用自己的语言描述一下网站的概念(网站包含多个网页，通过超链接把不同的页面链接起来)

问题 2 ：网页是不是就是主页? ( 第一个页面称为主页 , 网站设计者可以确定哪一个是主页 , 主页的文件名一般为： index.htm, 主页也是网页 )

设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在 internet 上，让所有的人访问浏览。

今天我们学习用 Frontpage 建立站点，制作一个主页。

先来研究一下没有发布的网站 , 打开教师做的网站

问：同学们看到了什么?(文件夹)

总结：

可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。

打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。

请学生浏览教师课件，了解学习任务

2 、新建站点

FP 的启动

问：与 word 比较，有什么不同?

(增加了视图区，编辑区有三个窗口)

总结：

视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面

普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式

预览窗口：浏览器中出现的效果，与 PowerPoint 中的 “ 放映幻灯片 ” 类似。

Html 窗口：编写 HTML (超文本标记语言，它是描述网页内容和外观的标准。)

打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。

(教会学生利用导学课件，根据导学软件完成任务)

任务 1 ：学生根据导学课件，在 d: 建立自己站点

教师巡视指导

请一位学生示范如何建立站点 , 教师总结

问：在文件夹列表中看到了什么?

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

3 、编辑主页与保存主页

看效果图，请学生分析主页中的元素

总结：鲜明的主题，如：我的世界、我的宠物等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍

根据导学软件，学生完成任务 2 ：设计主页、保存主页与图片

教师巡视指导

4 、总结反馈

请学生示范，讲解如何插入图片(来自剪贴画与来自文件)、插入水平线，如何保存

总结：必须切换到 “ 普通 ” 窗口下编辑

主页的保存中存在问题：

单击 “ 文件 ”----“ 保存 ” 或工具栏的 “ 保存 ” 按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点 images 文件夹中 , 便于站点的管理。

5 、请学生继续完成自己的主页，有能力的同学完成提高篇

教师巡视指导

6 、教师与学生共同评价总结

展示学生作品，教师与学生共同评价

请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。

学生活动：学生回答问题、学观察鼠标指针、学生回答问题、学生观察网站的表现形式、齐声回答、学生浏览课件，并了解本节课的学习任务、学生观察 FP 界面与 word 的不同、学生回答、学生观察教师演示不同编辑窗口的区别。学生上机操作，在指定位置建立自己站点、请先做好的学生当小老师，辅导其它学生。学生回答、学生操作，同桌互相帮助，并参考教师做的课件，利用网络环境下的课件自己探索学习，满足不同层次学生的需求、学生总结

注：课件中包含每一个操作过程的操作步骤及拓展的知识、基本任务与提高任务的效果图。

点评：

教学课题 “ 网页制作 ” 作为初中阶段的最后一部分内容，难度较大，教学的深度较难掌握。这就要教师在备教材的基础上，同时还要备学生，做到对学生的情况有较为深刻地了解，以便很好地完成教学任务，达到预期的教学效果。根据教材和《中小学信息技术课程指导纲要(试行)》中的精神，本课应以 “ 任务驱动 ” 的方式完成，一方面教会学生了解和熟悉具体软件的基本功能，另一方面又能主动地掌握并深入学习思考。寻着这个思路授课教师在课前作了大量的课前准备制作出了相应的教学课件 “ 网页制作 ” 。

一、调动学生的学习热情，变被动学习为主动学习

整个教学过 程张云 老师采取了 “ 引导加任务驱动 ” 的模式进行。首先教师进行导入，导入概念，强调概念;再引导学生学习课件的使用，引导他们读懂课件中的第一个任务：建立一个只有一页的网站，(此处若能引导学生，由学生来完成，减少老师的操作，效果会更好)，然后让学生模仿第一步的操作进行下面内容的学习，完成导学材料中给出的一个个任务。

二、突出重点，及时点评

张云 老师在引导学生进行学习、操作后，就主动地去观察和发现学生中出现的问题，甚至于课前对可能出现的问题，也进行有预见性地准备;发现问题及时点评。(点评分为个别点评和全班点评，点评不等于教师将操作过程演示一遍。 张云 老师在点评建成的网站时，重点若再突出些，介绍再清楚些，效果会更好。比如：站点中内容说明不够清楚等。)

三、发挥学生的协作学习精神

张云 老师在教学过程中，对有困难的学生进行个别辅导，同时还需发挥学生的协作学习的精神，充分调动学生学习的积极性，让学有余力的学生充当 “ 小老师 ” ，从而体会到学习的乐趣。(整个教学过程中，这点做地不够，没有充分地让师生互动起来)

四、重点突出、目标明确

最后， 张 老师在整个教学过程中，应再突出教学重点，明确本节课的任务。(课前的导入，最好给出教学目标，课后的小结应让学生总结他本堂课学习到哪些知识，所以感觉这节课重点不突出，内容分散。)

五、教学效果较好

由 于张云 老师在课前对本课作了大量的准备工作，课件制作效果较好，所以学生完成情况很好，教学任务完成情况较好。

第6篇：网页制作软件 教学设计

网页制作软件

一、 教材分析

本课是FRONTPAGE中一节基础内容课，也是FRONTPAGE以后知识学习的铺垫。本节课以制作一个简单网页为教学任务，学习目的明确，步骤清楚，希望完成任务而初步掌握简单制作步骤的指导思想。同时对学生网页的创作能力、网页布局和色彩搭配能力进行激发与培养。并为其以后进一步学习网页制作而打下良好的基础。本节课的重点是网页常用编辑器以及网页设计布局，难点是网页的设计及布局。教师重点在导，学生重点在实践与创新。为了合理利用上课时间，将用已有部分拓展知识和演示范例利用网络下传至学生机，以利于学生上课的实践与创新。

二、 学情分析

我校的大部分学生在小学就接受过系统的信息技术课程学习，具备了一定的计算机操作能力，加上初

一、初二也学完了word execl powerpoint的知识，应该说学生都具备了一定的基础。但也有部分学生基础没有打好，但基本的操作应该没有多大问题。因此，在教学过程中关于frontpage的打开与保存，这里我让学生自己去学习，教师只给予必要的提示。而关于HTML 和讲授网页布局的过程时，有必要要教师先演示一下，这也是本节课的重难点。

三、教学目标分析：

1、知识目标：

通过本节的教学，学生将了解常用的网页制作软件，掌握frontpage的操作界面，并能亲自尝试做出简单的网页作品。

2、过程与方法

学生将通过教师的引导，学会通过自主的研究探索，主动获取知识，并运用知识解决问题，逐步地培养自己的创新精神和实践能力。这对于学生以后的进一步学习很有帮助。具体过程：课题引入-----教师提示------学生上机自主学习------问题反馈-----教师演示-----学生完成作品-----优秀作品点评-----教师小结-----巩固练习-----课后探究、实践。

3、情感、态度与价值观 ① 活动教学激发学生学习frontpage的兴趣。

② 培养他们自主学习、互相协作的良好学习习惯以及自主创新精神。

4、重点、难点

重点：了解常用的网页制作软件，掌握frontpage的操作界面。

难点：网页的合理布局和色彩搭配。

四、教法阐述

为了实现以上教学目标，结合教材特点，本课采用的主要教学方法有“任务驱动法”、“创设情境法”等。通过学生已经受过的美术教育和信息技术教育（课程整合），创设一个Inter网页在线的情境（创设情境法），设置一个个任务，让学生运用已学知识，自己动手，有机完成课堂设计的各种操作（任务驱动法）（包括：了解常用软件的概况，利用word对frontpage的操作界面熟练掌握，完成自己的第一个网页设计。）以任务驱动的方式查漏补缺，使教学内容合理流动，水到渠成。教学中，启发、诱导贯穿始终，充分调动学生的学习积极性，注意调节课堂教学气氛，使学生变被动学习为主动愉快的学习，使课堂能在生动、有趣、高效中进行。

五、学法指导

本课教给学生的学法是“接受任务——思考讨论——合作操练”。 建构主义学习理论强调以学生为中心，要求学生由知识的灌输对象转变为信息加工的主体。故此本课教学过程中，巧妙设计，让学生带着一个个任务通过课堂讨论、相互合作、实际操作等方式，自我探索，自主学习，使学生在完成任务的过程中不知不觉实现知识的传递、迁移和融合。

六、教学设计

1、收集资料，激发兴趣。

在这一环节中，教师利用课前准备好的前期省市获奖网页作品，并将之融合到课件中。教师结合初中学生特点和乡土教育，故利用屏幕广播播放《我的家乡》和《思品斋》，让学生共同欣赏，从而引导学生的创作欲望，激发其兴趣。

设计意图：通过网页实例的导入，将课堂气氛调节得比较活跃，让学生更容易进入学习状态，为以下的学习做好铺垫。

2、初识网页制作软件。 在激发了学生学习兴趣后，教师趁势提出：你们也想制作这样的作品来表达自己的想法吗？顺势引出“三剑客”的概念，引导学生了解常见的html编辑器。

设计意图：通过学生感兴趣的问题设问，吸引学生的注意力，激发学生的学习兴趣。

3、层层攻关（任务驱动 逐步提高 分层教学）

欣赏过网页，教师就提出与学生共同制作简单的网页的想法。在授课中我安排了多次的动手制作活动，制作难度由浅入深，旨在通过学生自己动手动脑，形成自主探究进而创作的能力。

（1）第一关：基本任务：边学边做，牛刀小试

由于是初次制作，所以不易过难过复杂，所以选择了让学生自主进入frontpage的界面，因为有office前面知识做铺垫，学生进入操作界面并可以在较短的时间内熟悉基本的操作界面，又有助于形成学生内心的成就感，提高学生继续学习的积极性。后巡回辅导并观察哪些学生用的方法最快、最简便。

学生：自主学习、互相协作，也可以参考教师已下传上操作方法或正确样例。 设计意图：这是第一关任务，对于已有计算机操作基础的学生来说相对较简单。所以我这里给出提示与操作方法后让学生自己去过这第一关。让学生学会操作，并尝试不同的操作方法来解决问题。 （2）第二关：进阶任务：由学到创，拓展提升

在学习完成第一个环节后，教师趁势提出html的概念，实例中字体、大小、颜色变化，引导学生观察普通、html、预览的不同，以及相关的操作方法。在此基础上，教师进一步设置了拓展问题，让学生设计自己的网页，并通过简单网页的制作体会html的具体含义。最后教师选择相关学生进行总结，教师注意点评。

学生：根据刚才学习的知识和教师提供的素材。先完成自己的作品并与同学进行交流和沟通。学生通过不断的实践，简单修改html的方法，并进行演示。

设计意图：这是第二关任务，其中html也是本节课的重难点，所以教师先用一种常用方法演示html的内容，而修改让学生自主学习完成。 同时让学生相互进行交流，有助于提高他们的学习积极性与成就感，又可以培养他们之间互相帮助学习的良好习惯。方法多样让学生学会用不同的操作方法来解决实际问题，但得让他们自己去实践，这有助于培养他们自主学习的良好习惯。 （3）第三关：挑战任务：展翅高飞，自由创作

在学习制作完第二个环节后，引导学生进入“网页达人”的环节，本环节主要讲解网页的布局等知识，由教师演示常见的网页布局格式，并简单的给学生进行点评和原理分析。在此基础上，引导学生结合自己的上网经历仔细对比异同，同时归纳适合个人网页的布局和颜色搭配方式。

设计意图：在第二关的基础上，对出现的问题，进行分析、演示。让学生在掌握操作技术的基础上对网页布局和颜色搭配有进一步的认识，在此基础上形成对学生审美观的培养。完成第三关操作任务即完成自己的作品。让学生能设计出有创意的作品，培养他们的创新精神。考虑到学生之间的差异，在这里只对背景和图片的接触和了解，让计算机基础好的一些学生能探索出新的知识操作。

4、评价作品 教师总结 评价作品

（1）学生互评：通过教师设置的共享文件夹了解其他学生作品，学生互相发表意见。

（2）学生自己推荐：认为自己作品好的学生可以举手向老师推荐。 （3）教师总结评价：教师对学生们评价出的优秀作品以及自己推荐的作品作评价并结合作品完成的时间前后评选出前5位优秀作品并进行表扬。

设计意图：培养学生评价他人作品的能力。互相欣赏作品可以让学生来检测自己的学习成果，知道彼此之间的差距。让学生有成就感，从而激发学生的学习积极性，进一步活跃了课堂气氛。

教师总结

教师结合学生作品和上课的具体情况总结本节课的主要内容，注意强调知识目标和情感态度价值观的总结。

5、知识竞答大比拼

教师演示准备好的一个知识竞答游戏，学生观看大屏幕，抢答题目。 设计意图：用游戏形式的巩固练习即让学生对本节课的知识学习得到反馈，进一步巩固所学知识，又可以活跃课堂气氛。

6、课后探究实践

教师给出提示，引导学生自主学习，充分挖掘他们的学习潜力

设计意图：让学生在课后有思考问题的空间，进一步激发他们学习frontpage的兴趣。培养他们自主学习计算机其他操作知识。

第7篇：“网页制作”教学设计与思考

[摘要]中小学信息技术课已不再是单纯的计算机技能课，它强调以培养信息素养为目标，以任务驱动为模式，以应用软件为载体。只有在实际教学中突破以往的教学模式，才能培养出适应信息社会发展的有用人才。本文以“网页制作”单元为例，阐述了信息技术课教学设计的新思路，并就现行教材的编排组织提出了几点建设性意见。

[关键词]信息技术/网页制作/任务驱动

中学信息技术课程的任务是培养学生的信息素养，具体包括快速获取信息的能力，正确地评价信息，有效地利用信息和准确地表达信息。因此，信息技术课也应以信息处理为主线来展开，而不该成为单纯的计算机应用软件操作课。以“网页制作”为例，整个制作过程对学生获取、评价、表达和利用信息的各项能力都是一种培养和锻炼。下面，笔者就这一单元的教学设计做具体阐述。

一、教材分析

我校目前使用的教材是江苏省中小学教学研究室编写的高一《信息技术》。网页制作是其中第五章的教学内容。在这之前，学生已初步掌握了网络通信的基础知识，因特网的信息服务，网络信息的搜索、浏览和下载，以及电子邮件的使用等内容。因此，学生已经具备了获取信息的能力，网页制作单元就可侧重培养信息表达的能力，这对于加强学生的信息意识，提高信息处理的能力有着重要的作用;网页的设计也给学生提供了展示个性、自主创新的机会，促使他们主动地学、创造性地学;网页的评价则能使学生了解内容编排的原则，页面布局的种类，色彩搭配的风格等，提高他们的艺术修养和审美情趣。

教材中采用的网页制作软件是FrontPage2000。由于FrontPage2000采用了与Word等其他Office软件相类似的图形操作界面，可以自动生成Html代码，轻松实现网页发布。在第三章，学生已经学过了Word字处理软件。因此，对FrontPage2000的启动、关闭、文件操作、文字编辑和图片处理都会有一种似曾相识的感觉，这种知识迁移对后续的学习非常有利。

二、设计思想

1、任务驱动

本单元的学习通过完成网页作品来实现。班级网页的信息来自学生生活的班集体，每个热爱班级、关心班级的同学都能产生一种急切地完成任务的动机，而完成任务又能给他们带来成就感和满足感。这种心理上的内在动力驱使学生自觉地把计算机作为一种信息处理的工具来使用，由“要我学”变成“我要学”。在教学中，教师通过创设情境，激发学生的创作欲望，把总任务划分到每节课，按照学生的制作进度来布置子任务，使学生在教师的引导下逐步达成教学目标 。

2、小组协作

制作班级网页是个大任务，具有一定的开放性和综合性。因此采取小组协作学习的方式是非常必要的。小组成员的知识程度、学习能力和思维方式都有差异，可以通过讨论、交流与合

作，取长补短、拓展思路。每个学习小组由6-8人组成，每人负责制作1-2个页面，组合成一份班级网页。最后，各小组作品集中评比，选出优秀作品，上传到校园网上公布。

基于资源

要培养学生的信息能力，就必须为他们提供大量处理信息的机会。基于资源的学习就是让学生接触到丰富的学习资源，为学生的知识构建提供支撑。笔者采用ASP技术自主开发了一个信息技术学习网站，该网站具有强大的交互功能，不仅能为学生创设丰富的资源环境，还为每个注册用户提供个人空间，支持作品的上传或下载，并开辟了学生论坛和教师答疑，供师生们交流和讨论。网站的使用不仅方便学生的学，还能改善教师的教，也为师生间的交流提供了虚拟空间。

三、学习目标

本单元的认知、情感和动作技能三种目标分述如下：

认知目标

1、能简要陈述FrontPage2000主要功能，熟悉其操作界面

2、能用自己的话解释下列术语：HTML，URL，网页，主页，超链接

3、能主动获取、收集班级信息，并加以分类和整理

4、能客观评价网页的内容和风格，具备一定的审美能力

情感目标

1、具有集体荣誉感，愿意为班级的网页建设出谋划策

2、具有乐于助人、团结协作的精神

3、能尊重他人的劳动成果，有保护知识产权的意识

动作技能目标

1、能熟练地建立、打开、保存、浏览网页文件

2、能按照需要建立框架网页，设置各框架中的初始网页

3、能在网页中熟练地插入文字、图片、动画、水平线

4、能使用简单的表格编排网页内容，使网页的结构清晰，内容整齐

5、能选择合适的网页背景图案和背景音乐

6、能根据实际需要使用不同的超链接，合理地组织网页

7、能在网页中插入悬停按钮、滚动字幕和横幅广告管理器，使网页具有动感

8、能够插入简单的表单，使网页具有初步的动态交互功能

四、学习资源设计

在基于资源的学习中，教师的任务就是收集、设计和管理学习资源，引导和帮助学生自主地查找并获得学习指导，通过师生间、生生间的交流与合作，完成知识的建构和技能的提高。因此，学习资源的设计尤为重要。本单元需要的学习资源包括以下部分：

1、推荐给学生的网站地址链接，如门户网站、班级网站、搜索引擎、信息技术网站等

2、本单元学习的目标和任务，以及每课时的子目标和子任务

3、教师对班级网页栏目的划分建议，如同学档案、教师风采、学习园地、班级活动、休闲娱乐、班级留言板、酷站链接、站长信箱等等

4、根据每课时的学习目标制作的操作指导，包括操作界面的演示

5、网页设计所需的各种素材，如图片、动画、Midi音乐等等

6、拓展学习材料，如Photoshop、Flash、Asp、Access等技术资料

7、Frontpage2000的帮助系统和信息技术教材也是重要的学习资源

以上学习资源(第7项除外)都应公布在教学网站中，保证学生在需要时查找。学生也可以把自己找到的好素材上传到网上。

五、教学过程

本单元的教学共需8课时，每节课教师都要求学生完成子任务。教学安排如下表：

课时

学习子任务

教师行为

学生行为

1 访问推荐网页

评价网页，确定标准

形成小组、讨论栏目，明确分工

推荐优秀网站

组织学生讨论网页内容和风格，分析网页框架和布局。

小结网页评价的标准

提出学习任务(班级网页制作)和原则(小组协作，网上讨论与学习)

提供网页栏目划分建议

(转载自第一范文网http://，请保留此标记。) 组织各小组讨论

浏览网页

仔细观察，区分优劣

了解评价网页的标准

明确任务及原则

选择小组，参与讨论，确定栏目及分工，推举组长

组长上报成员名单

课后收集整理信息

2 学会使用教学网站

熟悉Frontpage2000的操作界面，掌握网页文件的创建、打开、保存和关闭操作

输入文字信息并修饰

公布教学网站地址和访问方法，介绍网站栏目及功能，特别是个人空间的上传、下载方法

参与学生的网上讨论，回答学生提问，必要时进行集体讲解和演示

登陆教学网站，了解栏目功能，练习使用

创建网页文件，输入网页文字信息并保存

设置文本字体字号颜色，调整段落对齐方式和缩进格式

引用资料注明出处

在网页下方署名

3 学会插入图片、动画、水平线

设置背景和音乐

学习插入表格，并用表格实现页面布局

介绍素材库中各类素材

参与网上讨论、答疑

提醒学生网页上的图片和动画应少而精，以免影响浏览速度

介绍表格的嵌套

分析学生网页，用表格演示页面布局

选择合适的素材插入网页合适位置，

设置图片和动画的大小、对齐方式和边框

设置网页背景和音乐

在需要插入表格的网页中，设置表格、行、列及单元格的属性并进行编辑

用表格规划页面内容

4 学习框架网页的创建及保存，学会拆分和删除框架

小组合作，建立主页

建立页间链接，并学会通过预览功能测试链接

介绍框架网页的各种格式和创建、保存的方法

演示拆分、删除框架

参与网上讨论、答疑

分析学生操作错误原因，页间链接应使用相对路径

演示超级链接的建立、使用预览功能测试链接

小组讨论选择一种框架页面作为主页

设置框架属性，如框架名称、初始网页等

创建主页与其他页面间的超级链接，并用预览功能测试链接是否正确

学会使用相对路径

5 学会创建书签链接、邮件链接和图片链接

建立URL链接

初步学会创建图象的热区链接

对每个链接进行测试

分析一个主页，让学生找出不同的超级链接

讨论各种链接的应用场合，如页面内容较多则使用什么链接?酷站链接和站长信箱分别使用什么链接?学生回答

错误原因分析，URL链接使用绝对路径

选择内容较多的页面建立书签链接

在图片上练习图片链接和热区链接

为酷站链接和站长信箱建立正确的链接

加深URL地址的认识

对每个链接进行测试

6 学会插入滚动字幕

学会使用悬停按钮

学会插入站点计数器和横幅广告管理器

小组网页初步组合，上传到教学网站

逐个检查各小组网页的制作进展，并给出评估意见

参与网上讨论、答疑

讲解小组网页的组合方式，每个栏目一个文件夹，图片放一个文件夹，提示学生使用文件夹视图管理文件

在主页上插入滚动字幕，并设置其方向、速度、表现和对齐方式

在主页上插入计数器和横幅广告管理器

选择一个页面插入悬停按钮，并设置其颜色、效果和链接对象

设置网页的动态效果

小组网页组合上传

7 了解表单的交互性，学习表单的创建和设置

在表单中插入各种组件

设置表单的Email提交方法

各组网页定稿上传

介绍简单的留言板，论坛和聊天室，供学生选择

引导学有余力的学生学习ASP和数据库技术

参与网上讨论、答疑

创建留言板或其他形式的表单，如学习调查表等

在表单中插入文本框、按钮、单选按钮、复选框、列表框等组件

设置Email提交方法

小组网页定稿上传

8 各组网页演示、互评

网上投票推选优秀网页和网页制作高手

每位同学自评

由班内网页高手做班级网页管理员，负责提交、维护班级网页

组织小组网页互评

设计网上投票网页

设计网页设计评估表

为每个学生的作品打分

积极参加小组互评

投票推选优秀网页和网页制作高手

认真小结本人学习情况，并如实打分自评

六、教学评价

本单元的教学评价主要根据下面的网页作品评价量化表来进行，由学生自评和教师打分反映学生的学习状况。

评价指标

(分值) 具体指标

量化等级分值

自评

教师

优

良

中

差

网页内容

(40) 获得的信息准确且完整

5 4 3 2

信息的收集方法效率高

10 8 6 4

网页文字没有语法和拼写错误

10 8

6 4

能找到合适的网页素材并合理应用

10 8 6 4

引用他人作品，是否注明出处

5 4 3 2

技术处理

(35) 网页布局整齐、合理

10 8 6 4

网页色彩协调、风格鲜明

10 8 6 4

网页链接正确、快捷

10 8 6

具有较强的动态交互功能

5 4 3 2

【2011年七夕情人节祝福网页——带有你名字的个性祝福】

【推荐】下载第一范文网的快捷方式到桌面，以便下次使用。

下载本文

内容搜索范文推荐【工作总结】 班主任 教师 办公室 财务 销售 【工作计划】 班主任 学校 教学 德育 班级

【工作报告】述职 述廉 社会实践 实习 辞职 调查 【党团范文】入党申请书 入团 思想汇报 转正

【演 讲 稿】 技巧 竞聘 英语 节日 教师 爱岗敬业 上一篇：FOR/NEXT循环语句教学设计 下一篇：“做中学”科学教育理论在自然教学中的运用您可以将本页一键：

关于我们 | 收藏本站 | 友情连接 | 【欢迎投稿】 Copyright © 第一范文网 All Rights Reserved. 粤ICP备06060663号 | 贵宾统计

您可以访问第一范文网()查看更多与本文《“网页制作”教学设计与思考》相关的文章。

第8篇：网页制作教学设计与创新

教学设计与创新

1、“学训合一”创造真实的职场环境

课程内容主要围绕培养学生在中小企业网站设计、维护方面等技能，以职业活动的工作过程为依据而进行改造。主要内容包括：网站需求与规划、网站效果图设计、静态商务网站设计。采用全机房教学，形成仿真的工作场所，使教学过程变为生产过程，学习任务变为工作任务，使学生通过学习亲身体验工作。

2、“学做一体”教学模式的教学组织过程

在工作环境建立的基础上，课程的实施过程通过一体化教学来完成，主要包括以下几个环节：①以流程为主线，确定每阶段的工作主任务，以及围绕主任务必须完成相应系列的子任务，在明确任务目标下的前提下，学生在教师案例中“学”，在自己中的作品中“做”。②老师以每个工作任务为考核阶段，加强对学生学习的过程控制，使考核目标分解到具体的任务中去，过程评价能够使学生加深对知识的理解和应用。③整个教学结束，学生的作品也相应形成，可作为最终考核的依据。

3、基于工作过程的教学

在“学做一体”模式下，教师是一体化教师，即专业理论课教师与实习指导课教师构成了一体。教师的指导作用体现在：一是对理论知识的指导。教师可以采取集中讲解、个别辅导、示范等方法进行解惑。二是实践操作的指导。对学生操作过程中遇到的困难以及操作的不规范性给于正确的指导，使学生养成正确规范的操作要领;三是课程组老师丰富的企业实践背景，让学生了解企业的各种管理规定以及企业文化，规范学生的行为，培养良好的工作习惯，提高学生的综合素养。

4、课程考核

教学内容的模块，决定了课程采用“过程+最终作品”的考核模式。学生在教师的指导下，不同的阶段完成不同的任务，过程考核对教师而言，通过学生作品的不断反馈来促进教学质量的提升;另一方面教师也可以根据学生的完成情况作出评判，使学生的学习过程得到有效控制，还可以用学生互评的方式，促进学生能力的培养。

第9篇：网页的制作教学设计

网页的制作

一、教学题目：网页的制作

二、教学目标：

1、知道站点、主页的概念，能在指定位置建立只有一个网页的站点；

2、认识FRONTPAGE的界面；

3、掌握在主页中插入文字、图片、水平线；

4、掌握页面文件与图片的保存。

三、教学重点：

1、能在指定位置建立只有一个网页的站点（难点）

2、能在页面中插入文字、图片、水平线

3、掌握页面文件与图片的保存（难点）

四、教学难点：

在教学中，一方面采用比较教学的方法，促进学生知识的迁移；另一方面，提供学生一个导学课件，让学生根据这个网络环境下的课件自己探索学习，以满足不同层次学生的需求。

五、教学过程：

教师活动：

1、引入课题：（激发兴趣，活跃气氛）

同学们喜不喜欢上网？经常上新浪、西祠胡同等，有没有同学知道新浪、西祠胡同称做什么？（网站）

浏览新浪网站，浏览的第一个页面称为什么？（主页）

我们还可以浏览其它的页面，点击超链接浏览，当鼠标变成手指的形状时有超链接。

问题1：网站是不是就是网页？用自己的语言描述一下网站的概念（网站包含多个网页，通过超链接把不同的页面链接起来）

问题2：网页是不是就是主页？(第一个页面称为主页,网站设计者可以确定哪一个是主页,主页的文件名一般为：index.htm,主页也是网页) 设计网站一般必须经过两个步骤，首先是在计算机里做好，然后发布在internet上，让所有的人访问浏览。

今天我们学习用Frontpage建立站点，制作一个主页。 先来研究一下没有发布的网站,打开教师做的网站 问：同学们看到了什么？（文件夹） 总结：

可以这样理解网站：在资源管理器里，网站表现为一个文件夹，里面存放的是所有与网站相关的文件。

打开主页，浏览页面，这是老师做的一个导学课件，将帮助大家完成学习任务。请学生浏览教师课件，了解学习任务。

2、新建站点

FrontPage的启动 问：与word比较，有什么不同？（增加了视图区，编辑区有三个窗口） 总结：

视图区：多种视图模式是为了方便网站的管理。制作网页时，必须在网页视图中编辑页面。

普通窗口：鼠标在闪动，可编辑、修改页面，所见即所得的方式。

预览窗口：浏览器中出现的效果，与PowerPoint中的“放映幻灯片”类似。 Html窗口：编写HTML（超文本标记语言，它是描述网页内容和外观的标准。） 打开导学软件，根据步骤，示范建立只有一个网页的站点，强调新站点的位置、路径的正确输入，站点的名称。

任务1：学生根据导学课件，在d:建立自己站点 请一位学生示范如何建立站点,教师总结。 问：在文件夹列表中看到了什么？

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

3、编辑主页与保存主页

看效果图，请学生分析主页中的元素

总结：鲜明的主题，如：我的世界、我的宠物等，有分割页面的水平线，与主题相关的图片，对网站的简单介绍

根据导学软件，学生完成任务2：设计主页、保存主页与图片

4、总结反馈

请学生示范，讲解如何插入图片（来自剪贴画与来自文件）、插入水平线，如何保存

总结：必须切换到“普通”窗口下编辑 主页的保存中存在问题：

单击“文件”---“保存”或工具栏的“保存”按扭，弹出一个对话框，保存嵌入式文件，改变文件夹，图片必须保存在本站点images文件夹中,便于站点的管理。

5、请学生继续完成自己的主页，有能力的同学完成提高篇

六、小结：

展示学生作品，教师与学生共同评价 请学生总结今天的学习内容：建立包含一个页面的站点，主页的设计与保存。