第二节 网页布局

　

1．教学目标

知识与技能

★了解常见的网页版式。

★知道表格在网页中的作用。

★会用表格规划布局网页。

过程与方法

通过欣赏、解剖典型的网页版式，知道表格是布局网页的主要手段。通过设计制作一个网页，掌握用表格布局网页的方法。

3．重点和难点。

重点是网页版式的设计和表格的建立。难点是正确设置表格的属性。

本节包括两部分内容：网页的版式和用表格布局网页。前者是新知识，后者可以迁移文字处理中的表格的相关知识。

为了避免分散学生的注意力，提高课堂效率，教师课前最好下载一些典型版式的网页(分栏效果明显的、封面型的)，让学生自由浏览，然后归纳总结；教师也可以直接演示，引导学生总结。接下来，可以让学生自己尝试用表格布局指定的网页版式(如教材中的样例)，如果时间允许，还可以填充网页的内容。

三、教学建议

1．导入新课

可以从使用网页模板创建网页的局限性人手，引入如何从零开始自行规划设计网．页；或者从“如何定位图片在网页中的位置”人手，引人表格在网页规划中的作用；或者展示两个网页(其中，一个是用表格布局的，另一个是没有使用表格布局、页面很杂乱的)，让学生对比，指出哪个网页好，然后教师指出网页整齐的原因是使用了表格布局网页。

2．实践导引

(1)欣赏常见的网页版式

网页的布局离不开网页的版式。很多与网页制作相关的书上都把网页的版式归纳为以下几种：同字型、国字型、拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等，但是，这些表述很不直观，学生理解起来难度很大。因此，教材在网页的版式上做了一些处理，分为分栏式和封面型两大类，分栏式又可以细分为一栏式、两分栏式、三分栏式等。这样处理，对于“网页的版式”是零起点的初中学生来说，就容易接受得多。

对于初学者而言，网页的版式分类宜粗不宜细。对于那些变化型的很艺术的网页版式，教师可以提及，也可以鼓励学有余力的学生去做，但不是教学的重点。

此部分内容建议以浏览的方式进行归纳总结。

(2)使用表格布局网页

在引导学生归纳出网页的常见版式后，让学生启动Frontpage，打开这些网页，带着以下问题对网页进行“解剖”。

★为什么网页中的内容很整齐?

★为什么网页中的图片可以在网页的任意位置

★为什么在浏览网页时看不见表格的边框?

让学生用表格布局网页时，注意从以下几方面进行指导：

★为便于排版，一个网页从上到下可以用多个表格进行布局。比如水平式的导航栏可以使用一行多列的表格。

★单元格的拆分与合并。

★区分表格和单元格的属性设置，例如表格和单元格的对齐方式、背景颜色等。

★鼓励并指导学有余力的学生使用表格的嵌套，但层数不能太多。

4．评价建议

本节建议从以下几方面进行评价。

★是否使用了表格布局网页?

★表格的边框是否设置为隐藏?

★是否会拆分、合并单元格?

★是否会正确设置表格和单元格的常用属性，如对齐方式、背景颜色等。

5．助力

学生只有了解了一个网页的栏目组成后，才能有目的地布局网页。在学生知道了网页的常见版式后，可以进一步让学生了解这部分内容，方式可以是学生自学，也可以教师演示。

6．加油

目前有不少网页是采用了框架结构，尤其是一些教程。学有余力的学生可以进行尝试，体会框架的特点。

　

四、练习参考

1．首页、公司简介、

2．网页版式的类型：拐角型、标题正文型、左右框架型、上下框架型、综合框架型、封面型、Flash型、变化型等。

各种版式与分栏式的转换：略。

　

 

第二节 网页布局
学习者姓名
第一环节	欣赏常见的网页版式	常见的网页版式有_________、_________等
第二环节	用表格布局网页	一个网页通常岉_____________、______________、____________、_________、______________等栏目 执行_______________菜单命令，可以插入一个表格 需要隐藏表格的边框线时，应将表格的边框线粗细设置为_______________。