使用表格与布局表格布局网页

【 教学目标与要求】

1. 了解表格和布局表格在网页布局中的作用；
2. 掌握表格和布局表格的插入方法和基本编辑方法；
3. 掌握表格和布局表格、单元格和布局单元格的属性设置；
4. 通过对表格和布局表格的学习，提高学生学习网页制作的兴趣，增强学生的审美观。

【教学重点】

1. 表格的插入方法、基本编辑方法与应用；
2. 布局表格和布局单元格的绘制方法、属性设置与应用。

【教学难点】

1. 表格和单元格的属性设置与应用；
2. 布局表格和布局单元格的绘制与属性设置

【教学方法】

多媒体演示，案例教学，任务驱动，引导教学；提问式教学。

【教学课时】  2学时

【教学过程】

一、引入

1. 展示已经完成的使用表格布局的网页——雅诗兰黛化妆品网页，激起学生的学习兴趣。
2. 用表格控制文字、图片、动化等对象的位置，使网页的布局紧凑又整齐美观。常用的页面设计布局类型有：表格、布局表格和AP元素三种，本章着重讲解如何使用表格和布局表格布局页面。
3. 回顾word和excel中讲过的有关表格的概念和基本操作，引入DW中表格的概念和基本操作。

二、基础知识讲解

1. DW中表格的三种模式（了解）：标准模式/布局模式/表格扩展模式
2. 使用表格布局网页（重点掌握）
   1. 表格的作用
   2. 表格的组成部分：表格的行、列、单元格、边距、间距、边框
   3. 表格的标记：<table>标记、<tr>标记、<td>标记三者的对应位置

<table>

<tr>

<td>……….</td>

<td>……….</td>

<td>……….</td>

</tr>

<table>

4. 表格的基本设置和CSS设置（难点）:

表格的插入、选择、删除、大小调整；

单元格的选择、合并、拆分、大小调整；

表格在“扩展表格”模式和“标准”模式下的应用

3. 表格布局网页的应用实例（重点掌握）——使用表格布局如下的页面

教学提示;

1. 演示设置布局表格和单元格的属性；
2. 在设置好属性的布局单元格中添加滚动文字、图像和超级链接。

4. 表格布局的缺点（了解）

三、课堂练习

1. 按照课堂讲解仿作雅诗兰黛化妆品网页
2. 思考：如何制作二维码扫描链接？

【教学小结】

通过与学生熟悉的word中表格的操作对照讲解，本章的讲解显得较轻松；让学生上台操作，提高了学生的学习积极性和主动性，教学效果较好；通过图文并茂、色彩艳丽的网页界面，刺激学生的感官，使学生进一步提高了学习的兴趣。

【教学反馈】

表格的CSS设置学生掌握时略显困难，估计和英文单词不懂有一定关系。