利用表格布置版面设计

第四节用表格布置版面

兰铁一中夏维功

【教学重点】

根据网站设计主题利用表格选择不同的版面布局

【教学难点】

栏目与内容的选择与版面设计的和谐统一

【教学对象分析】

高二年级的学生已经学习了Windowsxp、Office2003的基本操作，具备基本的信息处理能力，大多数学生已具备了制作一般的网页所具有的技能。对制作网页的兴趣较大，但是许多学生网页作品制作的随意性较大，比如：主题立意不新，内容庞杂，色彩凌乱，结构不严，对小组协同学习的方式不太适应，对选择适当的工具，处理声音、动画、视频、图像等信息技术和原理，还要进一步的学习。

【教学目标】

1、知识与技能：

（1）能熟练使用网络课程平台搜索资料。能从实际学习中获取信息并加工、借鉴和整理。

（2）掌握利用表格布置网页版面的一般方法和步骤，能基本表达网站的内容创意、设计思路及制作过程。正确认识主题网站内容和结构的和谐统一。

2、过程与方法：

（1）通过小组协同合作学习，培养学生积极、合作、进取的品质。

（2）发现和解决完成布局版面设计过程上的问题，小组与小组间能相互交流各自的经验教训。

（3）能评价和调整网站设计和制作过程，对本小组和其他小组的网站设计做出恰当评价。

3、情感、态度与价值观

通过评价和鉴赏他人的作品，体验其创作思想，明了其中所蕴含的意义，培养学生健康的审美情趣，学会积极主动的学习，而不是抄袭。

【教学方法和手段设计】

1、任务驱动

通过对一个现有的学生作品的解剖来理解表格在完成一个主题网页中的重要地位。通过moodle分组、调查、讨论、作业等多种综合实践活动形式，加上学生的认知实际，能使他们产生一种急切地完成任务的动机，而完成任务又能给他们带来成就感和满足感。这种心理上的内在动力驱使学生自觉地把计算机作为一种信息处理的工具来使用，由“要我学”变成“我要学”。

在教学过程中，不断把任务细化，一步步引导，最终激发学生的创作欲望，使学生在教师的引导下逐步达成教学目标。

2、小组协作

制作主题网站是个大任务，具有一定的开放性和综合性。因此采取小组协作学习的方式是非常必要的。小组成员的知识程度、学习能力和思维方式都有差异，可以通过讨论、交流与合作，取长补短、拓展思路。每个学习小组由6-8人组成，最后，各小组作品集中上交作业，老师及时的给出成绩和评价。

【教学过程】

该课以建构主义学习理论为指导，把传统的教学模式变为学生自主式学习模式；以学生为中心，整个教学过程中教师起组织者、辅导者、参与者和促进者的作用，充分发挥学生的主动性、积极性和探索精神。最终达到使学生有效地实

教学环节教学程序

一、课前准备

上课前，安排分组，并选出一名组长,然后我会给每个小组一张小纸条,纸条上是moodle信息化课程平台网

址:http://202.201.93.9/moodle 和各小组的帐号和密码。并

要求各小组认真填写卡片内容，从而了解各小组的组成情

况和教学任务完成情况。及时带领大家进入MOODLE（摩

灯）信息化课程平台。消除大家对新环境的陌生感。

在课程平台中给出引导，如图：

二、导入新课

1、作品展示：

提供四个高中学生的网页作品：

2、以调查引出表格布局网页的重要性

3、通过提供的阅读材料让学生了解网页布局类型，并提供

一个“公共区”讨论，让学生回答上面四个网页作品分别

属于哪种表格布局类型。（阅读材料见附件一）

三、讲授新课

1、作品剖析：

为了更好的让大家了解利用表格布局版面的好处，我们就以其中的《》为例一起来学习

剖析图

2、学习利用表格布置版面：

（1）插入表格

插入一个2行、3列的表格

（2）修改表格

a. 合并单元格的方法

要求：将第一行3个单元格合并

b.插入行或列的方法

要求：连续插入3行

c.调整行、列距的方法

利用表格边线的拖动来调整即可。

**辅助学习：

学生可以利用录象1来学习表格布局版面的过程

四、自主探索完

成网页制作

1、提供素材

•

2、制作网页

学生根据提供的录象2，自主探索，添加素材，完成网页制作。

五、评价总结

上传作业，并给予及时的点评

附件一：

网页布局类型大致可分为“同”字型、拐角型、标题正文型、左右分栏型、上下框架型、综合框架型、封面型、Flash型等，下面将为同学们分别举例介绍以上者几种网页布局的类型。

1、“同”字型：也可以称为“国”字型，是一些大型网站所喜欢的类型，即最上面是网站的标题以及横幅广告条，接下来就是网站的主要内容，左右分列一些两小条内容，中间是主要部分，与左右一起罗列到底，最下面是网站的一些基本信息、联系方式、版权声明等。这种结构是我们在网上见到的差不多最多的一种结构类型。下面是“中国人才热线网站（上海站）”的首页。

2、“厂”字型：这种结构与上一

种只是形式上的区别，其实是很相

近的，上面是标题及广告横幅，接

下来的左侧（或者右侧）是一窄列

链接等，右列（或者左列）是很宽

的正文，下面可以有一些网站的辅

助信息。在这种类型中，一种很常

见的类型是最上面是标题及广告，

左侧（或者右侧）是导航链接。下

面是“上海交通大学网络教育学院”

的首页。

3、标题正文型：这种类型即最上面是标题或类似的一些东西，下面是正文，比如一些

文章页面、公告页面或注册页面等就是这种

类型。下面是交大网络教育学院的一个公告

页面。

4、左右分栏型：这是一种两页内容分

为左右两列的布局结构，有一些企业网站也

喜欢采用这种类型结构作为网站的首页安

排布局，因为它非常清晰，一目了然。下面