网页制作综合应用教案
【教学分析】
学生的信息技术水平和能力的参差不齐，这是一个不争的事实。在如何组织信息技术课堂教学上各有各的方法，但怎样才能发挥那些水平较高、能力较强的同学的作用，调动不同层次学生的学习信息技术的兴趣一直是我们探索的问题。
本节课力图探讨信息技术课堂教学如何在网络环境中实现分层教学；努力探讨如何实现使现有的不同层次水平的学生在信息技术课堂教学中都有所为、有所得；同时还试图在学生的自主学习、协作学习与课堂教学评价等方面作出一些有益的探索。【教学目标】
1、知识与能力：
①熟练掌握并合理运用网页制作知识与技巧； ②逐步培养学生分类整理信息资源的能力； ③逐步培养学生分析、处理、应用信息的能力。
2、过程与方法：
①导入新课阶段，采用问题引导的方式，让学生整体了解本节课的任务。
②初步制作阶段，采用自主学习的方式，要求学生主动思考问题，并试着自己动手去解决。
③交流学习阶段，采用协作学习的方式，提供给学生一个交流的平台，引导学生在组内交流学习问题、制作心得等。更进一步地把自己的作品修饰的更漂亮一些。④作品评价阶段，采用小组间互相评价作品（提供评价标准），教师汇总评价结果，及时反馈评价信息，点评作品。
3、情感态度价值观：
①逐步培养学生的独立自主学习的方式； ②逐步培养学生协作学习的方式； ③逐步培养学生团队合作的精神； ④逐步培养学生欣赏、评价优秀作品。【教学重点】
1、超链接的设置。超链接是网页的灵魂，教学中任务多处要求学生制作超链接，强化这一知识点。
2、表格的制作与修饰。表格是用来组织网页信息中最常用的方式之一，教学任务一再要求用表格进行主页布局，并要对表格进行一定的修饰，从而使整个网页条理分明。
3、主页的布局和修饰。学生水平、层次、综合能力在这一点上可以体现出来，在教学任务和评价中也作出了相应的要求。【教学难点】
主页的合理布局和修饰。要求学生在完成主页的基本制作基本上，要注重对主页的美化，让我们的主页更吸引人。【教学策略】
1、设计并采用交互式网络教学平台；
2、对学生进行分组并分配相应的任务（主页设计与制作），采用任务驱动式教学方法；
3、学生首先独立自主地解决力所能及的问题（主页中资源的使用、超链接的设置、表格的制作等），采用自主学习策略；
4、学生间相互交流学习心得，利用交流平台相互帮助解决网页制作中遇到的问题，采用协作学习策略；
5、对教学的结果进行评价，组间互评、教师点评，采用作品评价的方法。【教学课时】 一课时 【教学资源】
交互式网络教学平台，教学网页，任务素材，FTP学生用户的建立及相关参数配置。【教学准备】
教师活动 学生活动 设计理念
课前准备
1、准备教学过程所使用的资源。
(1)为了使教学更具有吸引力，确定了本次制作活动的主题为“科技时尚”，并选择了下面几个子主题： A、UFO专题 B、国际空间站 C、恐龙世界 D、通古斯之迷 E、火星探测 F、三星堆之迷 G、科普生活
(2)要求学生从Internet下载给定主题的相关内容（网页、图片等等）。
(3)教师整理学生所下载、收集的资料，为每一个子主题制作相应的教学资料包。
2、为学生准备FTP用户，并设置相应的权限。
3、通过网络教学平台完成以下内容：(1)确定上课的班级。
(2)检查机房的设备，根据情况及时调整学生的座位，并在教学平台中及时修改调整学生信息。
(3)根据学生的学习情况以及任务的完成情况来确定层次，并把程度较好的学生设定为组长，其他学生分成不同的制作小组。
(4)根据学生对制作主题的选择情况，对全班的学生进行分组，在教学平台自动分组的基础上，并适当进行调整。
1、根据教师的要求，从网上搜索资料（文字、图片、声音、视频等），并把相关资料下载下来。
2、整理所需要的素材，并按要求把它传送到指定的位置。
3、学生根据教师的安排和指导，进入网络教学平台。
4、从教师提供的几个不同学习主题中选择自己感兴趣的主题。
5、等待教师分组。
教育学上对备课有这样一个观点： 备课实际上一是备学生，二是备教材。
对于信息技术课还应加上备教学环境（机房）。
教师应充分熟悉机房环境，更要充分利用网络机房这一教学环境来营造教学情境，从而使学生更能投入到教学中去。
各组的活动主题相同，但小组内各成员的所完成的主题各不相同，他们共同构成小组的大主题。这样横向在评价上可以实现可比性；纵向可以增强组员之间团结协作，共同构建、完善小组的大主题。
【任务设计】（某一学生的任务）请认真仔细阅读以下内容：
1、首先，我们郑重提醒你：你正在参与一项集体活动，请记住你是“科技时尚”组的一名成员，你的活动结果将直接影响甚至决定你所在团队的最后成绩，所以提醒你要打起十二分精神来认真完成所接到的任务。以下是你的团队成员名单： 组长：季 洁
张 婧 戚 涛 孙 欣 孙 兴 刘 沁 李沁怡
2、请下载实践操作中所要用到的资料包，然后把它解压到D:。
3、启动FrontPage，打开站点“D:恐龙世界”，新建一个网页，然后把它保存起来，名称为：Index.htm 注意保存网页时的名称一定要为此文件名，你的任务就是在这个网页中设计制作完成。
4、在设计你的主页和网站时，请注意以下几点提示：
A、要求你创建的名为“Index.htm”网页，它是一个网站的主页，此网页相当重要，可以说它是别人观察你的任务完成情况的入口。此网页的内容完全由你自己的设计完成，如果你还不太清楚主页的制作要求和规则，请查阅“主页设计”。
B、本节课所制作的主页不建议你使用框架网页来组织网页，建议你请使用表格来组织网页信息。C、主页上所设置的超链接一定要正确、准确；主页所链接的下一级网页一定要能够返回到主页。
D、主页设计一定要遵循简洁，色彩鲜明，文字、图像、动画等信息源安排的要合理，要动静结合，表格请进行必要的修饰。
5、请在主页的适当位置添加一个“科技时尚首页”超链接，超链接地址：../06/index.htm
6、所有的网页制作完成后，请先打开”D:恐龙世界”文件夹，检查Index.htm的制作效果，以及所有的链接是否正确。
7、检查正确后，把该站点发布到“ftp://192.168.201.101”，在弹出的对话框中，用户名为01，无密码。
8、请单击你的作品，再次检查你所制作的网页的内容是否正确、完整。特别是图片、声音、视频以及超链接。
【教学过程】
教学活动 学生活动 设计理念 问题引导
1、通过网络教学平台，进入问题分析阶段。
2、先简单介绍本节课的学习方式和学习内容，学习过程中注意些什么问题，让学生初步了解：(1)我们的任务是什么？(2)我们该怎样去完成任务？
(3)任务将以什么样的形式表现出来？(4)任务的最终表格形式是什么？
3、指出组长与成员之间的任务有所不同，更强调组长的职责。
(1)组长的任务是制作主题“科技时尚”的主页，该主页应能够准确地链接到每个组员所制作的主页（教学平台提供了这些链接地址，但这些链接只有当所有的相应内容发布到网上之后方可检查其准确性），布局要合理，内容应充实，具有一定的吸引力。
(2)组员的任务是制作相应子主题的主页，该主页的布局一定要合理，内容应充实，链接要准确，特别是链接到组长主页的设置（教学平台提供了链接的地址，但该链接的设置只有发布到网上之后方可检查其准确性）。
(3)组长要帮助、检查组员所制作的主页是否合理、正确，特别是超链接设置是否正确。
1、首先认真阅读教学平台所展示的“实践操作要求”，并找出：(1)我在哪一制作小组？我的组长是谁？(2)我的制作主题是什么？(3)我的主页有哪些具体要求？
2、然后思考老师所提出的问题，对于这些问题用什么方法来解决？还有哪些地方没有听懂的、看懂的？及时提出来进行交流、讨论。
3、组长检查本组成员是否完成素材的下载？是否打开了相应的站点？帮助有困难的同学，并及时向老师汇报本组的情况。首先让学生了解本节课的主要任务是什么？该怎样去完成任务？设计和制作时应注意哪些问题？任务最终将以什么样的形式展现出来？
通过这些问题的思考学生可以从整体把握本节课的内容，这样在学习、操作过程中能做到胸中有数，有的放矢。
自主学习
1、通过网络教学平台进入自主学习阶段。
2、引导学生如何进行自主学习。
3、培养学生养成自己动手解决问题的学习习惯，使用多种方法来引导学生努力去做到这点。
鼓励学生自已去寻找解决问题的方法，在这一段时间内尽量不要随意提问。提示学生可以借助以下方式来寻求解决问题的方法：
(1)教学平台所提供的“相关帮助”；(2)自带课本中的相关章节；(3)FrontPage自带的帮助系统。
4、引导学生遇到问题先想想自己是否能够解决？ 是不是应该先去完成自己可以完成的部分？
是不是应该先把这些问题记录下来，等一会可以在小组内进行交流？ 引导学生养成一个良好的学习习惯。
5、强调在制作主页时要充分利用表格来规化自己的主页，并要对表格进行必要的修饰。
6、教师边巡视边把一些好设计、好想法介绍给大家听，并适当对那些程度较差的学生加以指导。
7、提醒并纠正学生在操作过程共同出现和遇到的问题。
1、学生首先查检所打开的站点中有哪些资源？
2、学生对资源进行分类整理，从而思考哪些将显示在自己的主页上？
3、思考如何设计才能制作出一个美观、得体的主页。
4、根据自己的设想，动手来制作自己的主页。
5、在制作的过程中如果遇到一些不太熟悉的知识或方法，先可以通过以下几种方式来查阅相关的帮助：(1)教学平台上所提供的一些帮助；(2)自带课本中的相关章节；(3)FrontPage自带的帮助系统。
如果通过上述方式尚不能解决则可以记录下所遇到的问题，等待下一步在组内进行交流。
6、初步设计制作完成自己主页。信息技术教育是以培养学生的信息能力，提高学生的信息素养为目标的教育。在整个教学过程中着重培养学生“信息技术的灵活运用能力”，培养学生以信息技术的方法手段，解决实际问题的能力。
当然首先我们还得让学生自己先思考、自己先动手、自己来解决所遇到的问题，这样可以达到逐步培养学生的自主学习能力。
协作学习
1、通过网络教学平台启动组内交流平台。
2、指导学生组内成员进行交流帮助。
3、引导学生进行使用正确交流的方式。
4、提醒学生及时完成自己的的主页制作。
5、提醒学生注意保存自己所修改的网页内容。
6、要求组长下位帮助、检查组员的主页制作情况（特别检查超链接设置的是否正确,主页是否有表格，表格是否进行了修饰）。
1、使用组内交流平台，提出自己的问题，并尽自己所能解答组员所提出的问题。
2、根据交流所得到的信息，及时调整和修饰完善自己主页。
3、组长此时应担负起指导帮助的责任，及时帮助组内成员完成主页的制作和修饰。
4、及时保存自己的制作内容。
5、及时把制作完成站点发布到指定的位置。
6、检查自己所制作内容是否正确（超链接）。学生的基本“信息素养”应包括“协作意识和信息的交流能力”。
学生通过这一交流平台，相互之间提供帮助，并记录问题以及问题的解决方法、方案、技巧等。并根据所得到的信息修改、完善自己的主页设计。
作品评价
1、通过网络教学平台启动作品评价平台。
2、指导学生进行作品评价。(1)介绍评价的方法。
(2)介绍、分析评价项目以及相应的评价标准。
3、及时收集并统计出学生的评价结果。
4、向全班学生公布各小组作品的评价结果，并对部分作品进行点评。(1)通过网络教学平台的统计结果，选择点评对象。(2)对网页的制作效果对照评价标准进行分析、评价。
(3)指出作品中的优缺点，提醒学生在今后的设计、制作过程中应该注意相应的问题。
1、打开作品评价窗口。
2、认真阅读评价项目的内容。
3、分别对各小组的作品进行观察浏览，并参照评价项目和评价标准，对小组作品按项目进行评价。
4、检查评价的结果，确认评价的信息没有错误。
5、提交评价结果。
6、观察教师对作品评价综合统计结果，聆听教师对一些作品的点评，思考本小组作品的得失，同时还思考自己在制作主页时还需要注意哪些问题。学生的制作结果（作品）总是希望能够得到某种程度的认可。学生之间的互评，一方面是对作品进行评价，更重要的是评价者在评价作品的过程中学习一些经验，吸取作品中的优点，摒弃其中的缺点。从而达到“取其精华，去其糟粕”的效果，提升知识综合应用的水平，逐步培养欣赏作品、评析作品的能力。
课堂小结 本节课是网页制作综合实践应用，要求学生根据所提供的素材，自主设计并制作一个主页，只是强调了要充分利用表格来规化网页，强调网页中的灵魂——超链接的制作。这样一来任务的灵活性较强，难度较大。这样的任务与平时学习训练的任务有较大的差别，要求同学们在今后的学习过程中应多注意知识灵活运用，加强实践操作。培养学生的创作和创新意识、自主学习和协作学习的意识。同时在教学过程中及时对学生所制作的作品进行评价，更强调学生之间的互评，教师点评。
【教学流程图】
【教学反思】
信息技术课堂教学方式一直是信息技术教师和一些教育专家探讨的一个主题，但目前多数教师在常规的课堂教学中还是采用教师边讲解学生边操作任务的教学方式。
作为一名信息技术教师，我平时也在思考这个问题，在总结近三年来的网络教学方式的基础上。我设计并制作了这一网络教学平台，其教学功能主要有：
1、控制教学环节。在信息技术课堂中教学过程很难控制，这是一个共识。如何有效地控制教学环节，本网络教学平台设置了几个关键教学环节（任务分析、自主学习、协作学习、作品评价），这样从整体上可以实现教学环节的控制；
2、提供组内成员交流学习的平台。学生在独立完成任务的同时，组内成员可以通过交流平台相互帮助指导；
3、作品评价。以小组为单位，学生可以根据提供的评价项目及评价标准进行评价其它组的作品。同时及时统计评价结果，最后展示并评点作品。
本课的主题是“信息技术在网络环境下实施分层教学的研讨”，这里包含两部分内容：一是网络教学环境，即是上面所说的网络教学平台；二是分层教学，分层教学也是我们信息技术课一直所倡导一种教学方式。由于学生的信息技术水平的参差不齐，在以往的教学过程中很多学生在很短的时间内就可以完成课内任务，而有些同学却每节课都不能完成任务。经过两年的教学思考，虽然我们在任务设计上进行了一些修改（分为基础任务和提高任务），为学生提供了选择和拓展的机会，但由于任务的过于具体化，学生的自我发展的空间受到了限制。本课中分层教学的设想要求学生完成共同的任务（主页的设计），但任务的描述不再非常具体化，只是作了一些规定（课本中的相关知识点，如超链接、表格等），更多的是要求学生发挥自己的想象力及创造力来设计完成任务。这样不同层次的学生可以设计不同水平的主页，从而达到分层的要求。
本课从课堂教学效果来看非常好：网络教学平台发挥了其应有的功能；学生完成任务的投入程度大大高于以前；听课教师对本网络教学平台和教学方式也给予了很高的评价和期望。
作为一次研讨课无疑是成功的，但要想其成为大家所期盼的常规的教学方式还有许多值得探讨与改进的地方：
1、网络教学平台的通用性。这是一个从设想、设计、制作都需要花大力气去解决的问题。
2、任务的设计。任务的设计一是要考虑学生的水平，二是要仔细研究教材。并非所有的内容都能按此种教学方式进行设计。如何能更好地实现分层教学也是值更深一步研究的问题。
3、学生互助方式的改进。从课堂教学来看，网络教学平台中的组内交流平台按我的观点完全可以去掉或修改成“答疑区”，以便于课后对教学设计进行反思及学生学习状态、过程的把握。
4、评价方式的改进。本节课的评价只有作品评价，虽然也有教师的点评，但还是缺乏评价方式的多样性；同时也只有学生之间的评价（且仅以组为单位），缺乏评价主体的多样性。应在评价方面多思考，如可以在教学过程中设置一些相关知识点的标准化题目，以便评价学生个体的对知识点的掌握程度。
当然只以个人的观点和想法不足以能引起信息技术课堂教学方式的变革，仅试图通过本人在教学上的一些做法能起到抛砖引玉作用，以期激起广大同仁的共同努力探索，为信息技术教学的发展提供更广阔的空间。
参考书目：
何润伟
《信息技术》第一册
中国和平出版社 杨威等
《信息技术教学导论》
电子工业出版社 朱慕菊
《走进新课程》
北京师范大学出版社
网址:http://
网址:http://
网页制作与设计教案
第一讲 网页设计概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 网页中所使用的技术............................................................................................................4 1.4 制作网页的基本方法............................................................................................................4 第二讲 HTML的基本标志与格式标志.......................................................................................4 2.1 HTML文档的基本结构.........................................................................................................5 第三讲 HTML的文本、图片与超级链接标志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入图片................................................................................................................................8 2.4 建立超级链接........................................................................................................................8 第四讲 HTML表格、表单与框架标志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表单的应用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五讲 HTML标志综合运用案例.............................................................................................11 第六讲 DREAMWEAVER中简单WEB站点建立与管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七讲 DREAMWEAVER中静态网页设计.............................................................................13 3.2 在页面中加入文字和图像..................................................................................................14 3.3 超级链接的运用..................................................................................................................14 3.4.表格的应用.........................................................................................................................14 3.5.在网页中创建表单.............................................................................................................15 第八讲 DREAMWEAVER中动态网页设计.............................................................................15 第九讲 DREAMWEAVER综合性网页设计案例.....................................................................16 第十讲 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT语言简介.............................................................................................................17 第十一讲 VBSCRIPT的基本元素与输入输出.........................................................................18 4.2.基本数据类型.......................................................................................................................18 4.2.表达式和运算符.................................................................................................................19 第十二讲 VBSCRIPT的条件语句、循环语句和过程.............................................................20 4.3 VBSCRIPT基本语句.............................................................................................................20
第一讲 网页设计概述
【教学内容】
讲解网页设计的相关术语及网站制作的基本流程。【教学目的】
使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】
网页设计中的若干术语。【教学难点】
理解网页设计中的若干术语。【教学方式】
讲授式、讨论式、案例分析式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《Internet 网页工场》Wittime工作室 重庆出版社。
3、《WEB网站设计》Joel Sklar著 高等教育出版社。
4、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构
Web最大的特点是使用了超文本（Hypertext）WWW采用C/S（客户机/服务器）工作模式
在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式
协议://主机名或IP地址：端口号/路径名/文件名
1.2 IE5的使用
Web浏览器是浏览Internet资源的客户端软件
在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表标志的使用。【教学方式】
讨论式、案例分析式、练习式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.1 HTML文档的基本结构
2.1.1 HTML语法
1、双标记
语法：
<标记>内容
2、单标记 语法：<标记> 最常用的单标记是
3、标记属性 语法
<标记
属性1 属性2 属性3 … > 例子
4、注释语句 格式
例子
2.1.2 HTML文档的基本结构 【课后小结】
通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用 列表,有序列表,无序列表标志及属性。
第三讲 HTML的文本、图片与超级链接标志
【教学内容】
讲解HTML标准中的文本、图片与超级链接标志 【教学目的】
* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。
< EM>......，强调文字，通常用斜体。
< STRONG>......，特别强调的文字，通常用黑体。
......，以等宽体显示西文字符。
......，使文字大小相对于前面的文字增大一级。
......，使文字大小相对于前面的文字减小一级。......，使文字成为前一个字符的上标。......，使文字成为前一个字符的下标。......，使文字显示为闪烁效果。2.2.6
文本修饰 2.2.7
预格式化文本 使用预格式化标记
不再忽略在此之间的空格、制表符与回车符等元素 2.2.8 转义字符与特殊字符
一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格 2.2.9 文本强制换行和不换行 文本强制换行
不换行 2.2.10 插入水平线 使用
标记
属性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、无序列表
2、有序列表
- 列表条目1
- 列表条目2......
3、定义列表
- 列表条目1
- 条目1的说明
- 列表条目2
- 条目2的说明 ……
...... 2.4.4 图像地图 【课后小结】
本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。
第四讲 HTML表格、表单与框架标志
【教学内容】
讲解HTML中制作表格、表单与框架的标志。【教学目的】
使学生掌握简单表格、表单与框架的制作。【教学重点】
* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】
* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。
* 理解表单中相应元素对应标志及属性的含义。【教学方式】
案例分析式、项目教学 【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.5 插入表格
2.5.1 在网页中插入表格
表格的基本构成元素：表头，单元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 | FrameSpacing=“2“
BorderColor=”#008000“ >
2.7.3 子窗口属性设置
2.7.4 常见的框架窗口划分方法（1）标题和正文，分为上下两部分（2）层次结构，分为上中下三部分
（3）目录和标题，分为左上、左下、右三部分
（4）标题、目录和正文，分为上、左下、右下三部分（5）嵌套目录，分为左、右上、右下三部分 2.7.5 不支持框架的网页
