教案：使用表格布局网页

教学内容：项目五表格的应用

任务3、使用表格布局网页课程：网页设计与制作

专业：计算机

授课课时： 1课时

教师：

授课班级：

单位：

授课时间：

教学设计说明：对于使用表格布局“个人写真”首页的任务，我在坚持以教师为主导，学生为主体的教学原则下，通过复习提问——巩固旧知；创设情景——导入新课，明确任务；提出问题——分析任务，引发思考、课堂讨论、获取知识；讲授点拨——任务实施，引出重点；师生互动，归纳提高——攻破难点五个环节进行教学。在任务实施中采取小组合作完成的方法，以小组为整体回答问题及完成操作性任务，小组评比采用星级制，小组得星数量从多到少评为优、良、

D:/myweb素材

二、导入新课

看图观察对比2张网页效果图

图1 图2

首页效果图

三、进入新课

1、任务分析

2、任务实施

（一）、插入布局页面的表格并在表格、单元格属性面板中设置表格

【操作步骤】

步骤1：单击菜单栏[插入记录]/[表格]，设

置：1*1，边框、边距、间距：0；

步骤2：单击状态栏[table]标签，设置表格对齐方式为“居中”；

步骤3：单击状态栏[td]标签，设置单元格高；步骤4：表格2、3、4的创建方法同上。

【提出问题】

如果表格属性填充、间距、边框不设为0是什么效果？

练习一：带着问题完成表格插入及属性设置操作。

【总结】如果没有指明单元格边距和单元格间距，大多数浏览器按单元格边距为1、单元格间距为2来显示表格。

（二）调整表格结构

1、合并、拆分表格

【操作步骤】

步骤1：光标定位于表格2中，单击单元格属性面板“拆分”按钮，将单元格差分成10列；步骤2：按住ctrl键选择不连续单元格，设置奇数单元格为80px,偶数单元格为20px;

2、表格嵌套

【操作步骤】

光标定位于表格3第二例，插入一个2*3，宽度80%的表格。

【提出问题】

如何使嵌套的表格置于单元格的最顶端并居中？

练习二：完成表格的结构调整操作。

【总结】表格中的第二种对齐

单元格中的对象相对该单元格的对齐方式，在[属性]面板中展开[水平对齐]/[垂直对齐]下拉列表，选择相应的水平方向和垂直方向的

对齐方式。

3、归纳提高

网页布局排版的原则:网页布局最好用多个表格叠加在一起来实现，即网页中有多个表格从上到下独立的排放。

4、任务拓展

根据首页效果图运用已学知识技能将图片、文字等对象插入到相应位置。

提示：

在同一个单元格里文字下方还有图片该如何处理？