用表格为网页布局教学设计

刘浩

摘 要 “用表格为网页布局”教学设计通过巧妙设计，设置游戏、实验等教学环节，化抽象为直观，加强学生课堂的体验，调动学生的参与意识。

关键词 教学设计；网页布局；信息技术

中图分类号：G633.67 文献标识码：B

文章编号：1671-489X（2015）21-0108-03

1 设计思路

这节课是“建站计划”“建立站点”之后知识的进一步延伸，是制作网站的前期重要知识，在本章中具有承前启后的作用，要求学生熟练掌握。小游戏环节让学生体验网页布局的重要性，调动学习的积极性，发挥学生的想象力。通过尝试小实验环节，体会表格的作用。通过回顾Word中表格操作，尝试解决SharePoint2007中表格中的相关问题，使学生能进行知识迁移与内化，提高课堂的深度。通过设置挑战任务，培养学生的自主学习能力。主要用到的教学方法包括讲授法、实验法、探究法、演示法、练习法。

2 教学分析

教材分析 本课选自浙教版初中八年级《信息技术》第三单元，教学对象为八年级学生。如何将文字、图像和网页其他元素合理恰当地安排在网页中，使页面易读和美观是初学者建设网站首要考虑的问题。表格作为一种素材排版定位工具，在建设网站过程中有着不可替代的地位，因此，本课对于网页制作有着十分重要的作用。

学情分析 学生已经掌握使用Word、PowerPoint等软件制作多媒体作品的方法，对于网页制作有一定的借鉴作用。SharePoint Designer2007中的表格与Word和Power-Point有类似的操作，对于表格操作的方法没有技术难点，表格的知识可以利用知识迁移来完成学习。

教学目标

1）通过设置制作以环保为主题的网页的任务，培养学生的环保意识。

2）通过玩游戏环节，使学生体验、了解网页布局的作用是排版。

3）通过知识讲解，使学生理解网页布局的类型及方法。

4）通过设置对比实验，让学生了解表格在网页制作中的作用是定位对象。

5）通过设置任务让学生掌握SharePoint2007中表格的操作。

6）通过课堂拓展任务，学生自主创作、思考，掌握嵌套表格的作用及操作。

教学重点

1）掌握网页布局的方法。

2）SharePoint2007中表格的操作。

教学难点

1）网页布局的作用。

2）表格在网页制作中的地位。

3 教学过程

游戏导入，布局的作用

教师：各位同学，我们先玩一个拼图游戏。请双击打开桌面上的拼图游戏.swf。这里有很多关于环境保护的图片素材，你可以通过拖放鼠标的方式将这些图片再次排列。请用两分钟完成拼图。

【设计意图】通过此游戏环节，让学生在不知不觉中完成网页布局的操作，既能实现可视化布局效果，还能通过开放式游戏使学生的作品多样化，增强课堂的趣味性。

教师：我们一起来分享一下各位的作品。谁愿意分享你的作品？（展示2～3个不同类型效果）

【设计意图】鼓励学生展示、表达自己的想法与成果，培养学生的自信。

教师：你为什么要这样设计？

学生：这样设计比较好看，方便浏览，界面也简洁。

教师：很好。这位同学刚分享了他的成果与设计思路，设计页面的目的是美观、简洁、方便使用。这就是这节课要学习的内容——布局网页。

【设计意图】针对这个小活动，引导学生做总结，轻松突破网页布局这一难点，充分体现了以学生为中心的教学思想。

教师：现在我们来一起学习一下常见的网页布局的类型及其效果（以此主题为例，展示四种不同的布局类型，使学生对网页布局有更加深刻的认识）。那是不是只有这四种类型呢？其实还有其他的类型，请看效果图。

【活动小结】网页布局的作用是排版。但是网页没有特定的布局，只要达到界面简洁、美观、方便使用的效果即是好的布局。

任务驱动，画布局图

任务一：在纸上画出网页布局图。

要求：1）按照刚才拼出的效果在白纸上画出布局草图；2）将标题、导航栏、网页等信息标注在布局图的相应位置，效果如图1所示。

学生动手画草图，教师选取几种草图拍照上传到QQ展示并评价学生的布局，都能画出自己的效果图，并选取一个布局图，将其画在黑板上。

【设计意图】教师通过手机拍照并上传至QQ，体现了手机与QQ等生活工具在教学中的应用，还能引导学生学会将手机与QQ等生活工具用于学习。及时展现、反馈学生的作品，提高课堂资源的利用。

教师：这是我们某位同学的大作，这个草图是一个不规则的图形，看我怎么用魔法将其变成我们常见的图形。

教师通过将学生的布局图添加几条辅助线，使其转变成常见的、规则的几行几列表格。

教师：当我将这个布局图添加几条线，不规则的图形变成了什么？如图2表格布局图所示。

学生：表格。

教师：对，就是表格。那你的布局图能够转换成几行几列呢？请同学们在布局图上画一画。

【设计意图】像数学题一样，通过添加辅助线的形式将不规则图形转变成规则图形，激发学生的创造性思维，让学生懂得学科之间是有关联的。将学生的作品当成课堂教学资源，更加有说服力。

实验教学：表格的作用

学生：老师，我们在Word、PowerPoint多媒体作品设计过程中没有用到表格，那网站能不能不用表格？

教师：李彦，你真棒，很会思考，我们为他鼓掌。为了验证你的猜想，我提供了一个实验，请你来验证一下。endprint

教师：（打开实验链接，将网页bg1.htm打开）请你将这个页面中的文字和图片排列整齐（文字、图片无法排列整齐，再打开bg2.htm）。现在请你将图片和文字分别放到表格中，看看效果。

教师：通过这个实验，你得出了什么结论？

学生：用表格可以很方便地将文字与图片排列整齐。

教师：说得很好，表格的作用就是将网页中的文字、图片等素材对象进行定位。网页都是用表格来进行布局的，请看两个范例（展示网页的表格）。

【设计意图】事先预设此环节，安排学生李彦在适当的时候提出问题，引出课堂知识冲突，为下一环节做好铺

垫；同时吸引学生的注意力，及时调整学生的学习状态。通过设计一个对比实验，用实验验证学生的猜想，让学生总结实验结论——表格在网页布局的作用，培养学生的钻研、思考、解决问题的能力。

插入表格

教师：插入表格之前，为了编辑的方便，我们通常要先设置网页大小。在通常情况下，我们一般将网页大小设置成默认状态的“当前网页大小”。

教师：接着请各位设计师在此页面中按照你的布局草图的行列数插入表格，最后将相应的文字信息填写到表格中，效果请参照大屏幕。

【设计意图】通过演示法讲解、回顾打开网站站点的技巧与方法、网页大小设置方法，快速进入任务二的学习中。

调整表格

教师：各位设计师，表格插入好的请举手。（环顾学生）若有不会的，请一个设计师演示。请各位结合Word中表格的相关操作，还可以结合教材中的步骤，完成单元格的合并与拆分的操作，使网页布局更加合理。

【设计意图】关于表格的插入、拆分、合并单元格等操作已经在Word、PowerPoint设计多媒体作品时学过，学生可以凭已有的知识完成，也可以参照教材的步骤完成，培养学生的自学能力与意识。

作品的保存与评价 要求所有设计师保存提交作品，展示1～2个设计师作品，并做好评价。

【设计意图】及时评价与反馈学生的作品，能够鼓励和督促学生认真完成作品的设计。

课堂拓展练习 如图3所示课堂提高练习，在第二行调整导航栏这一行单元格列宽，使他们平均分布时不影响第三列图片这一行，该如何实现？请参照教材的阅读材料一提供的方法试一试。

【设计意图】结合教材阅读材料，通过设计课堂拓展练习，能使学习有余力的学生在课堂上有充分发挥，培养其自学能力。

4 课堂总结

师生一起回顾所学知识，课堂小结内容如图4所示。

设计意图 通过使用流程图式的课堂总结，展现知识结构图，有利于学生掌握本节课的知识点，有利于学生理解本节课的知识网络，有利于学生重建知识体系。

教学反思 本节课先通过设置小游戏使得课堂氛围更加轻松、活泼而不失寓教于乐。仿照解数学题一样添加辅助延长线，将不规则的布局图轻松转化为几行几列的常见的规则的表格，轻松突破难点。通过设置对比实验，激起学生的好奇心与思考，通过学生做实验得出表格的作用是定位对象这一重要结论，避免了说教式的教学，使课堂教学形式更加多样、有效。结合教材阅读材料，通过设计课堂拓展练习，能使学有余力的学生在课堂上有充分发挥，培养其自学能力。采用流程式的课堂总结，将一节课的内容一一呈现，升华了课堂内涵。endprint