网页制作教学设计

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

网页制作的教学设计

一、教学目标

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 的不同、学生回答、学生观察教师演示不同编辑窗口的区别。学生上机操作，在指定位置建立自己站点、请先做好的学生当小老师，辅导其它学生。学生回答、学生操作，同桌互相帮助，并参考教师做的课件，利用网络环境下的课件自己探索学习，满足不同层次学生的需求、学生总结

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

点评：

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

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

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

二、突出重点，及时点评

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

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

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

四、重点突出、目标明确

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

五、教学效果较好

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

第二篇：《网页制作表单的设计》教学设计

表单的设计网页制作课程

15电商

4、5班2课时

一、【教学目标】

学会使用表单中文本域、图片域、单选按钮、复选框、跳转菜单、文本区域等的应用

二、【教学重点与难点】：

重点：文本域、跳转菜单，单选按钮的应用 难点：单选按钮的应用，跳转菜单的制作

三、【教学方法】

讨论法、讲授法、演示法、练习法

五、【教学过程】

一、 认识表单

表单的作用：表单就是浏览者可以在网页中填写信息的表格，其作用是接收浏览者填写的信息并将其提交给表单处理程序进行处理。

二、 生成表单

1、表单的创建与表单字段的添加

“插入”—“表单”—“选择需要的表单类型”

2、表单向导

“文件”—“新建”—“网页”--“常规”——“表单网页向导”

三、 表单内容编辑

1、文本域——账号和密码的输入

3、图片域——制作提交按钮

4、单选按钮——性别选项设计

5、复选框——兴趣爱好设置

6、按钮 (“验证有效性按钮” 登录)

7、跳转菜单菜单——密保问题的设置

8、文本区域——留言框的制作

四、学生练习制作表单

制作一个注册信息表单，要求包括下面的内容：会员帐号、您的姓名、您的性别、输入密码、密码确认、密码提示问题、密码提示答案、电子邮件、留言框、收货地址、兴趣爱好、提交按钮、重填按钮

六、【课程小结】

七、【作业】

完成课堂示范案例，校园网站的注册和登录页面设计

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

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

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

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

一、教材分析

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

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

二、设计思想

1、任务驱动

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

2、小组协作

制作班级网页是个大任务，具有一定的开放性和综合性。因此采取小组协作学习的方式是非常必要的。小组成员的知识程度、学习能力和思维方式都有差异，可以通过讨论、交流与合作，取长补短、拓展思路。每个学习小组由6-8人组成，每人负责制作1-2个页面，组合成一份班级网页。最后，各小组作品集中评比，选出优秀作品，上传到校园网上公布。 基于资源

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

三、学习目标

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

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

<

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

教学设计与创新

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

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

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

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

3、基于工作过程的教学

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

4、课程考核

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

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

山东省昌乐二中 滕学梅

【学情分析】

1.在学习网页制作之前，学生进行了网站的规划与设计，还没有就网页制作真正着手练习，对Frontpage的使用比较陌生，但是已经有word等软件的操作基础，很多基本的操作可以迁移过来。并且，通过高一的学习与养成，学习小组的整体意识已经建立，组内合作、组间竞争的氛围已经形成，所以可以采用先进行自主练习，然后合作探究，通过各组推荐的作品展示进行评价，在展示的同时也提高了学生的技术水平。

2.学生操作基础不同，接受能力不同，可以充分发挥各小组“技术顾问”的作用，帮助指导组内其他成员，共同完成学习任务。 【学习目标】

1.熟练掌握网页制作和美化的基本操作，提高操作和审美能力; 2.大胆动手，积极实践，总结用网页表达主题的技巧和方法; 3.积极、热情地投入学习，体验网页制作的快乐。 【重点难点】

1.重点：利用表格对网页进行布局;网页中的图文设置及超链接的使用。 2.难点：网页间超链接的建立。 【教学过程】

课前准备：提前做好小组座次安排，由学科班长组织大家按组入座。

一、展示导入，明确学习目标(3分钟)

1.展示精彩网页(如北京大学、清华大学网站首页)，引导学生简单分析网页风格。 2.明确本节课学习目标与主要任务。

二、指导与点拨(3分钟)

1. 分析北京大学网站首页，观察其网页布局(如图)，引导学生尝试使用表格对网页进行版面设计。 2.对网页制作所用的基本操作进行点拨： (1)文字、图片的添加与调整 (2)网页背景的设置 (3)超链接的建立

三、基本功练习(10分钟)

1.任务：快速“克隆”示例网页。(素材发到桌面“基本功练习”文件夹中)

与word中的操作类似，注意迁移 2.要求：(1)先独立练习(参考导学案的“操作导航”);尝试一遍后可与组内同学小声交流，解决疑难问题;

(2)每组的“技术顾问”完成任务后可下座指导; (3)完成后相互检查超链接的效果。

四、制作主题网页(15分钟)

1.任务：从桌面“主题网页”文件夹给出的四个主题中选择一个，快速完成主题网页的制作;

2.具体要求参看导学案“实践探究”部分;可两人合作，有能力者最好独立完成;

五、作品推选、上传：每组推选一个作品参加组间评选，并将作品文件夹传至FTP。

六、精彩展示(10分钟)各组派一代表向全班展示自己的作品，并简介操作要点。 展示前，引导全体学生积极思考以下问题：

1.你从展示作品中学到了什么?有哪些可借鉴之处?

2.你是否清楚各作品的效果是如何实现的?若有疑问，及时提出。 3.能不能提出更好的修改建议?

注：1.学生展示过程中，教师要引导大家规范操作，对于重点加以强调。 2.提醒学科班长记录参与展示和积极质疑、解答的同学，汇入评价。

七、完善提升：(5分钟)

1.借鉴所展示作品的优秀之处，进一步完善自己的作品; 2.根据展示同学的演示，将新学到的操作尝试一遍。

八、总结：

1.网页制作要领：(1)灵活运用基本操作;(2)版面设计清晰、条理，或者有独特之处;(3)配色和谐，给人美感;(4)超链接顺畅、自由，方便使用。 2.由学科班长公布本节课评价统计情况。

【教学反思】

1.在学生自主练习过程中，适时指导很重要，但教师一人肯定不能照顾全体学生，所以充分发挥学习小组的“技术顾问”的作用很关键。

2.在“制作主题网页”环节，给学生准备四个不同的主题素材是很有必要的，我们在进行教学设计时要考虑到学生个性、兴趣不同，并加以利用，促进教学。

3.对进行展示的同学要进行简单培训(或者对各组长进行培训，由组长传达到展示者)，防止展示时只宣讲他们网页中的内容，而忽略技术，浪费宝贵的时间。 4.课堂即时评价很重要。学生初次接触一个软件，要经常收获一点成就感才有进一步探索的欲望，这就需要我们教师注意发现、及时鼓励。学科班长记录好大家的课堂参与情况，下课前公布，这项工作若坚持下来，对我们的教学会有很大促进。