当前位置 :项目首页 > 集体备课 > 正文

教学目标

知识与技能：掌握在网页中表格、图片的使用方法，进一步体会表格所具有的实现网页布局的功能。

过程与方法：具有一定的观察、分析能力，能发现在美化网页过程中出现的问题，并通过实践学会解决问题。能充分利用现有条件，主动查阅FrontPage 2000相关资料，进行自主学习。

情感态度与价值观：通过学习和实践，培养学生对网站建设的兴趣和主动探索精神。通过与小组中其他同学密切配合，培养团队协作精神。

教学重点：引导学生掌握网页布局与美化的常用方法，激发学生的求知欲。

教学难点：掌握使用表格进行网页布局时参数设置的方法与依据。

教学资源：

1、计算机多媒体网络教室，并且联入Internet。

2、FTP服务器，提供学生作业保存的空间，方便学生上传与下载。

3、基于机房局域网的信息技术课堂教学平台。

4、FrontPage2000软件

教学准备：

学生方面：应知晓网页、网页布局及网页美化相关知识；掌握FrontPage2000的基本操作。

以小组为单位制定主题网站的主题，搜集大致可用的素材；设计好自己的网页布局样式。

教师方面：使用教学平台提供导学案，范例网页链接，供学生分析的素材网页，学生活动可能用到的网页素材，学前评价材料，学后评价表。

学前评价内容如下：

⑴ 以下表述正确的是

A、网站是由一些互相关联的网页构成的，构成网站的网页地位是相等的。

B、建设网站，只能通过FrontPage 2000 来实现。

C、图片作为网页的元素，是作用是对相应的文字作补充说明、增加页面的美感。

D、在FrontPage 2000中，使用框架网页模板创建的主页，不能调整各个框架的大小。⑵ 合理、美观的网页布局，能给网页增加的美感，增强网页对受众的吸引力，增强信息交流的效力。关于网页布局，以下说法正确的有

A、使用框架,可以把浏览器窗口分割成不同的区域（框架），每个区域，每个区域（框架）可显示一个独立的网页，从而实现布局。

B、使用表格布局，可以对网页元素进行更加合理、精确的布局。

C、网页中使用图片即可实现对网页元素进行布局。

【设计意图】通过评价来确定学生已经具备的基本素质，了解学生是否具备直接学习本节内容应该具备的最低知识和技能，给本节课教学提供参考。

学后评价自评表：

预备活动：

学生登录ftp服务器，下载上节课上传的个人作业——新建立的网站及使用框架创建的主页，按要求放置到E:\MySchool文件夹中，备用。

学生登录信息技术课堂教学平台，完成上课签到，阅读导学案。

教学过程

一、创设情境，导入

师：同学们，我们都有过上网的经历，请大家回想一下你登录过的网页，就网页外观来说，什么样的网页外观更能吸引你，提高你的观赏欲望呢？

生：回忆，思索，讨论，回答。

师：回应学生答案，继续通过课堂教学平台展示几个不同外观的页面：①纯文字网页；②色彩丰富的网页；③适当配图的网页；④有板块布局，且简洁合理；⑤布局感觉凌乱不堪的网页；⑥过分花哨的网页）。

请对比这几个网页，你更喜欢哪一个，说明理由。

生：依次点击教学平台提供的链接，观察，比较，思考，回答。

师：归纳提炼学生的答案——喜欢整洁、布局合理、美观的网页。

师：网页是是用于发布信息，与他人交流的，应该考虑尽可能多地吸引受众。合理的布局，精美的外观，第一眼就给人以赏心悦目的感觉，增强了网页的吸引力。将来你们各小组的主题网站建成以后，我们将在学校网站开辟空间，将大家的成果向全世界展示。这是我们的信息发布平台，也需要吸引更多的受众，当然也要做好美化工作。这节课我们就来学习最基本的美化方法——使用表格、图片美化网页。（板书课题）

师：我们先来欣赏一个网页，看看该网页是如何美化的。

生：点击课堂教学平台给出的超连接，登录指定页面（林口四中网站学校概览页面）。

师：请大家就导学案提出的问题，进行小组讨论。

① 网页整体感觉美观程度如何？

② 你认为网页中图片起到了哪些作用？

③ 网页元素的布局合理吗？哪些内容具有表格布局的痕迹？

生：观察，就网页美化问题讨论。

通过讨论，明确了表格的精确布局作用，以及表格与图片对网页的美化作用，进而明确本节课的任务主题。

二、分组探究

师：大家已经知道，表格可以实现网页布局。大家课前已经设计了自己的布局，下面就以实践一下用表格来实现布局的方法。

师：现在完成导学案探究任务一。请参照导学案中的提示操作，遇到问题，请先以小组为单位探究解决，可以上Internet查询。为了板块之间相区别，请将板块填充不同的颜色。

生：打开FrontPage2000软件，完成自己的布局设计。

1、尝试探究使用表格分隔页面，实现布局的方法，设计一个网页布局并通过在网页插入表格来实现。

① 根据需要设计表格的行数和列数。

② 根据所设计的板块来设置单元格的高度和宽度。

③ 根据设计意愿设置表格的框线粗细、颜色参数。

④ 尝试更复杂的表格布局方式——在某个大板块中划分更小的板块。

   提示：表格的嵌套。可以分别设置单元格背景颜色，来查看布局效果。

其中 ④ 不作为统一要求，供有能力的学生尝试。

教师巡视，个别指导。

教师小结学生完成情况。

小结后明确：行列整齐划一的布局，一重表格即可；复杂的布局，需要表格嵌套；用于布局的表格的框线，一般要隐藏，这样更美观些。

师：使用表格来布局网页，可以精确地控制网页元素的位置，让整个页面整洁美观；再使用图片，可使网页看上去丰富多彩。现在我们来尝试使用图片来美化网页，请大家完成导学案探究任务二，使用图片将刚才布局好的网页进行美化。遇到问题，请先以小组为单位探究解决，可以上Internet查询。

2、使用图片来美化网页

使用提供的课堂教学平台图片素材或者自己的图片素材来美化探究任务一制作的页面。

① 使用图片作为网页背景，使网页看上去美观、舒适。

② 在表格单元格中分别插入图片和文字，进一步美化网页。

③ 使用图片作为表格背景。

④ 尝试在单元格的图片上叠加文字。

其中 ④ 供有能力的学生先尝试，然后大家共同学习。

教师巡视，个别指导。

教师小结学生完成情况。

小结后明确：图片作为网页背景使用是，不能影响前景，一般选用虚化的图片。

师：现在完成导学案任务二中的讨论。

讨论：

① 在单元格中插入图片后，单元格的大小发生改变了吗？你是如何解决这个问题的？

② 要保持单元格的尺寸不改变，应该_____；要保证图片的尺寸不变化，应该_____。

③ 在单元格中的图片上叠加文字，你实现了吗？你用的方法是____。

讨论后明确：单元格插图时，单元格尺寸要与图片向适应；图片上叠加文字，须将图片作为单元格背景使用。

另外，图片还有对文字信息进行补充说明的作用。

三、体验活动

师：通过刚才的探究任务，我们已经掌握了使用表格、图片美化网页的方法。下面请大家运用已掌握的知识与技能来完成教材任务三，实践“我爱我校”网页的制作。

生：按教材任务，完成各自的实践活动。

1、完成教材“任务三”，使用指定的素材，可以在完成基本任务的基础上自由发挥。

以小组为单位探究解决遇到的问题。

① 制作top1.htm页面

实践表格、图片的运用，并学习表格样式的设置。

② 制作top2.htm页面

   学习使用图片作为网页背景。

③ 制作二级子页

   学习使用FrontPage2000文件管理功能，复制网页。

④ 制作top3.htm页面

⑤ 调整框架页面中各框架的高度到合适数值。

   完成书上空白。

各小组组长总结本组任务完成情况，未完成学生的原因，教师小结。

师：现在大家对使用表格、图片来美化网页的方法已经比较熟悉了。现在请个小组创建各自的主题网站，分工协作，完成主题网站的基本美化任务。

生：以小组为单位，由组长分工，共同完成本组的主题网站创建与美化任务。

2、以小组为单位设计一个主题网页，自拟主题，合理布局，适当美化网页，填入简单的内容。

四、展示与评价

1．展示主题网页，说明设计意图、布局方法、美化设计，遇到了什么问题，是如何解决的。

2．学生就本节课的学习活动进行自评，填写课堂教学平台的自评表。

师：将本节课作业成果打包上传至FTP服务器各自的空间，同时上传到自己的私人空间——邮箱、网盘等，共后续活动时调用。

五、后续活动

运用本课所学知识与技能，继续完善主题网站的美化工作。