网页制作（一）民以食为天教学设计

1、62 网 页 制 作（一）-民以食为天 教学设计东阳市外国语学校 王燕（高中）所属模块：信息技术必修 信息技术基础课时：1课时 适用学段：高中一年级上学期一、 教学设想 根据教材，设想第1课时的知识点由“美食”这个主题展开，通过一个示范网站让学生了解网页设计的一般步骤，了解网站的组成（主页面，分页面），了解网页中的各构成元素（图片、文字、超链接等），通过小组合作制作一个简单的网站，掌握网页标题的设置、表格的插入及属性设置、插入文字、插入图片、设置超链接、保存网页等操作，掌握网页制作软件Frontpage的基本使用方法，使学生对制作网站有一个很强的概念和认识。在本节中，要求通过小组学习的方式，既

2、有分工又有合作，在完成一个简单网站的规划、制作的同时，让学生充分体验小组合作学习的乐趣和积极作用。这节所学的知识点虽然比较多，但是根据学生已有的知识水平，通过教材、助学网站、教师讲解、学生互助等一系列措施，通过小组合作，在1课时内还是应该能够完成一个简单网站的制作，也为后面的网站完善和学生自由创作提供条件。二、教材分析本节课是第六章网页的设计与制作的第二节内容网页制作的第1课时内容，根据新课程标准，网页制作这一节安排5个课时。本章教学任务是否完成，要看学生能否通过小组合作的方式来完成一个主题网站的设计与制作。我根据实际情况，对课程教学内容进行了调整，设想在第1课时就让学生对制作网页网站有一个很

3、强的整体概念，在提供素材的情况下能完成简单网页的制作。在第2课时对网页进行完善及素材的收集，第3-6课时让学生分小组进行自由创作，这样一来，学生对制作网站就有一个很强的概念和认识。选择一个学生感兴趣的，健康积极的主题，激发学生的兴趣，是本堂课设计上的一个重点。教材中需要掌握的知识点也比较明确，用一个个相关联的任务将这些知识点联系起来，这样可以对教材的内容通盘考虑。三、学生分析通过前五章的学习，学生的信息素养有了较大的提高，利用信息技术解决实际问题的操作技能有了长足的进步，由于多数学生在初中没有制作过完整意义上的网页和网站，所以，对于本章的知识和技能而言，基本不存在“零起点”影响学生学习的问题。

4、对于Frontpage，虽然在界面上和Word有些不同，但是很多问题学生可以迁移Word中的知识来学习，相对地说提高学习的兴趣，同时降低了学习的难度。同学们对于上网都是很感兴趣的，在内心对于能制作一个网站就觉得很了不起，如果自己有能力制作的话那可是太好的事了。有了这个学生心理，就为学习这块内容提供了一定的情感基础。即使在制作中碰到困难，学生也能迎难而上，用功地制作自己的作品。四、教学目标分析知识目标1、 了解网页设计的一般步骤和网站的组成（主页面，分页面）。2、 了解网页中的各构成元素（图片、文字、超链接等）。3、掌握网页制作软件Frontpage的基本使用方法，包括掌握网页标题的设置、表格的

5、插入及属性设置、插入文字、插入图片、设置链接到指定网页超链接、保存网页等操作。能力目标有意识地养成知识迁移的能力，学会与他人合作，通过多种途径进行学习。情感目标1、 培养学生小组合作学习的能力和自主探究的精神。2、 体验与小组成员合作制作完成一个简单网站带来的成功感觉。五、重点分析1、 表格在制作网页中的的定位作用及表格边框线粗细等属性设置。2、 网页中图片属性的设置。3、 设置链接到指定网页的超链接。六、难点分析1、网页中表格的修饰。2、网页中的图文混排操作。3、设置链接到指定网页超链接操作。七、教学准备1、 教师设置好服务器，保证每台学生机都能登录到服务器。2、 教师传发上课素材到学生机，

6、包括一个名为“网页制作”的文件夹（D盘）。3、 学生上课前浏览助学网站，了解课堂学习内容与任务。4、 学生按座位进行分组（4位同学一组）。预先分组，选出组长，与学生沟通好奖励的层次和奖品。八、教学过程。1、情景模拟，激情导入教师：俗话说：“民以食为天”。同学们想想看，你从小长这么大吃过的最好吃的菜是什么菜？或是你目前最喜欢吃，最渴望吃到的菜有哪些？学生：立即被“美食”主题吸引，说出自己喜欢的菜式。教师：老师知道了大家都喜欢吃哪些菜，同学们看看老师给你们准备的菜，喜不喜欢？学生：欣赏图片（课件播放中国八大菜系的经典菜），被色香味俱全的菜吸引了。教师：许多同学看得口水都流下来了，我相信大家对美食都

7、是来者不拒的。今天我们这节课的任务就是同学们分小组合作制作一个小型的美食网站，以后有机会把这个网站放到因特网上，让更多的人加入到我们的美食行列中来。学生：跃跃欲试。老师：一说到做网站，许多同学都会觉得很难，其实不然。同学们看老师做的示范网站。教师一边示范网站，一边讲解网站的结构（主页面，分页面），网页中的各构成元素（图片、文字、超链接等），使学生有个感性的认识，了解网页中各元素的不同布局。学生：一边欣赏网站，一边听教师讲解。2、第一阶段任务，完成网页制作的准备工作教师：在前面的学习中，我们已经知道常用的网页制作软件有Frontpage、Dreamweaver等，我们选Frontpage软件来学

8、习如何制作网站。教师示范打开Frontpage软件。教师：Frontpage跟我们前面学的Word、Excel一样，是Office办公软件中的一员，所以在实际操作中很多知识我们都可以进行迁移。同学们仔细观察，看看界面上和Word、Excel有哪些不同？学生：视图栏；在工作区下有三个标签：普通、HTML、预览。教师：同学们观察得很仔细。视图栏中显示Frontpage的各种对象，我们所用的是网页视图。工作区底下的三个标签在网页制作中作用很大。“普通”标签表示网页处在编辑状态，“HTML”表示处在超文本标记语言状态，反映的是网页的实质内容，“预览”窗口中可以对网页的实际效果预览。我们在“普通”状态下

9、进行网页制作，如果你懂HTML语言，你也可以直接用HTML语言进行编辑网页。 我想讲到这里，同学们就可以大显身手了。第一阶段的任务是完成网页制作的准备工作。 准备工作：1、针对学生机中菜系的资料，每个小组讨论做哪个菜系的网站 2、分工：哪个同学做主页面，哪个同学做分页面 3、将D盘“网页制作”的文件夹重命名为自己的名字，将相关菜系的文件夹复制到自己文件夹中。学生：各小组分别讨论，完成准备工作。3、第二阶段任务：制作网页要点：设置网页标题；插入图片并设置属性；修饰文字；插入表格设置属性；合并单元格教师：老师特地做了教学网站，帮助同学们学习制作网站。同学们双击桌面上的“网页制作助学网站”，做主页的

10、同学打开“主页制作”超链接，分页面的同学打开“分页面”超链接，参照网页中的任务安排可完成网页的制作。除了助学网站外，同学们还可以利用书本P114的实践体验来学习，小组内同学相互帮忙，当然也可以请教老师。借鉴老师的示范网站，完成“制作要求”中的任务，网页和谐就表示网页制作成功。因为我们制作的是美食网站，所以最先完成任务的三个小组奖励“绿盛牛肉干”。 最后提醒：在制作过程中，一定要记得保存，将文件保存到自己的文件夹中。主页一般命名为“index.htm”,分页面的命名一般要和网页内容相对应，做到见名知义。 好，任务明确，开始操作吧。学生：各小组成员根据任务分配开始制作自己的网页。在制作的过程中，插

11、入讲解表格属性的设置和图文混排。问题1：在完成的网页效果中，表格的边框存在，有时会影响网页的整体效果，有没有方法使得表格起到定位的作用，在实际效果中又看不到表格边框。表格属性：在网页制作中，表格起着定位的作用。我们可以设置表格的相关属性。鼠标定位表格，单击鼠标右键，选择“表格属性”，在出现的对话框中我们可以设置对齐方式、单元格边距、单元格间距、宽度和高度、边框粗细、背景颜色和背景图片等。当设置表格边框粗细为“0”时，我们发现，这个表格的边框线是虚线，它可以起到定位的作用，以后浏览时就不会出现这些表格线。 问题2：在Word中，为了页面的美感，可以设置图片和文字的环绕方式。在网页中可不可以实现这

12、个效果呢？图文混排：用表格的方式可以将图片和文字编排得比较整齐，在Frontpage中可以用“定位”的方法，实现比较简单的图文混排。具体操作方法见教材P119。问题3：刚才修改了网页标题，可是不知网页标题在哪里？网页标题：网页标题是网页相关内容的概括，在标题栏的左上角显示，要求见名知义。教师一边巡视，一边指导有困难的学生操作，期间提醒学生要注意保存。教师对学生的作品进行验收，给最先完成的3个小组奖励。4、第三阶段任务：设置超链接，整合成一个网站教师：好。接下来我们要将小组同学的作品整合成一个网站。提问：如何使同学们制作的分散的网页整合成一个完整的网站？学生：利用超链接。教师：对。一个网站中的所

13、有网页，是通过超链接的形式互相连接起来。超链接是网页中最重要的因素。教师示范操作：第一步：在正在编辑的网页中，选定一段文字或一幅图片。 第二步：执行菜单“插入”-“超链接”命令，出现“创建超链接”对话框。 第三步：在“创建超链接”对话框中，单击“”选择按钮，在自己电脑中选择相应的一个网页作为超链接对象。教师：主页同学创建一个名为如“第2组”的文件夹，小组内所有成员将自己的文件夹复制到小组号的文件夹中，然后在主页同学的电脑上完成超链接的设置。主页的同学将各个菜链接到相关的分页面，分页面的同学制作“返回主页”的超链接。在制作的过程中，同学们可以参考助学网站和书本P118。学生：通过“网上邻居”将网页都复制到主页同学的文件夹中，根据任务设置相应的超链接。教师一边巡视，一边指导有困难的学生操作，期间提醒学生要注意保存。教师对学生的作品进行验收，给最先完成的3个小组奖励。5、学生上传作品学生将制作完成的网站作品上传到服务器。6、学生作品展示教师展示一至两个学生作品，学生和教师一起进行评价任务是否完成，和谐评价时不强调美化。7、学生自我评价学生打开助学网站中的“学生评价”，进行本节课的自我学习评价。教师对学生的自我评价进行点评。8、小结、课后扩展小结本课知识点，引出后续学习内容。通过这节课的学习，我们已经了解了网页制作的一般步骤与基本方法，大家根据选定的主题，利用