《使用表格布局制作简单页面》教案

参考资料

教材

教学配套

素材

教学方法

教师讲解、演示。学生讨论，上机实践操作。

授课节数

2课时

教学目标

1.使用表格布局制作简单页面。

2.设置表格的相关属性。

相关知识

1.表格布局。

2.表格的相关属性。

3.单元格的相关属性。

学习重点

1.能熟练使用表格布局进行网页页面的设计。

教学内容

一、表格布局

使用表格进行页面布局，能很好的控制文本、图像等网页元素在页面上出现的位置。通过设置表格和单元格的属性，实现对页面元素的准确定位，可以达到整齐划一的页面显示效果。

二、表格的相关属性

表格ID：表格在网页中的唯一标识

行、列：用于设置表格的行数和列数

宽：用于设置表格的宽度

填充：用于设置单元格中的内容与单元格边框之间的距离

间距：用于设置单元格与单元格之间的距离

对齐：用于设置表格的对齐方式

边框：用于设置表格边框的宽度

边框颜色：用于设置表格的背景颜色

背景颜色：用于设置表格的背景颜色

背景图像：用于设置表格的背景图像

注：表格中设置了背景颜色又设置了背景图像时，背景图像将会遮住背景颜色显示。

三、单元格相关属性

字体：用于设置表格中文本的字体

大小：用于设置表格的大小

水平：用于设置单元格内容的水平对齐方式

垂直：用于设置单元格内容的垂直对齐方式

宽、高：用于设置单元格的宽度和高度

背景：用于设置单元格的背景图像

背景颜色：用于设置单元格的背景颜色

边框：用于设置单元格边框的颜色

链接：用于设置单元格中内容的超链接

任务实施：

1． 在Windows环境下使用“我的电脑”或“资源管理器”搜集见面素材。将“素材”文件夹中project04images中的图片文件到我们已经建立的站点文件nwnw中的images文件夹中。

2． 运行DreamweaverCS3软件，在exapmple站点中新建一个网页文件，命名为ex01.html.

3． 单击“插入”→“常用”工具栏的“表格”按钮，打开“表格”对话框，设置1行1列，宽度为“1000像素”，边框为“0”像素，“单元格边距”和“单元格间距”均为“0”像素。单击“确定”按钮，则在编辑区插入了一个1行1列的表格。设置表格ID为“top”。

4． 将光标定在单元格中，设置单元格高度为70。单击“插入”→“常用”工具栏的“图像”按钮，在打开的“选择图像源文件”对话框中选择images文件夹中的图像logo.jpg，单击“确定”，即可将图像插入在当前单元格中。

5． 选中该表格，在“属性”面板中设置背景颜色为“#333300”，在各单元格中输入文本。

6． 逐一选中各单元格，设置单元格的高为“50像素”文本颜色为“#FFFFFF”对齐方式为水平“居中对齐”在各单元格输入相应文本。

7． 逐一选中各单元格中的文本，设置字符大小为12，颜色为白色（#FFFFFF）。

8． 同样的方法再插入一个1行1列的表格，宽度为“242像素”，边框为“0像素”，单元格边距和单元格间均为“0像素”。设置表格ID为“pic”

9． 将光标定位在单元格中，在“属性”面板中设置水平为“居中对齐”垂直“居中”，高度为“288像素”。

10． 插入images文件夹中的ct_01.jpg图像。

11． 插入一个2行1列的表格，宽度为“242像素”，边框为“0像素”，单元格间距和边距为“0像素”设置表格ID为“nav”

12． 选中第一个单元格，设置背景颜色为“#336600”，高度为“30像素”。再输入文本“栏目导航”，设置文本大小为“12”颜色为“白色（#FFFFFF）”

13． 选中第二个单元格。设置高度为“150”垂直对齐方式为“居中”输入5行文本。选中这些文本，单击“文本”菜单→“列表”→“项目列表”。

14． 同样的方法制作一个“联系方式”表格。设置表格ID为“cont”。第一个单元格的高度为“30”。第二个单元格的高度为“170”。第二个单元格中的文本换行采用ctrl+Enter方式。

15． 同样的方法制作一个2行1列的表格，宽度为“746像素”边框为“0像素”单元格边距和单元格间距为“0像素”。设置表格ID为“company“。

16． 选中第一个单元格，设置背景颜色为“#336600”，高度为“30像素”。其他设置同前。

17． 在第二个单元格输入文本。设置文本大小为“12”。

18． 定位光标到文本超始处，插入图片images文件夹中的datang,jpg。设置图的对齐对“右对齐”。效果为4-10所示。

19． 同样的方法再插入一个1行1列的表格，宽度为“1000像素”，边框为“0像素”单元格间距为“0像素”设置表格ID为“bottom”。

20． 输入文本，设置单元格“对齐”为居中。

21． 保存此文件。

实施建议

1.表格除了作为网页元素在网页中广泛使用，还可以使用表格进行页面布局，将网页中的各种网页元素合理、清晰地放置在各个单元格中

2.熟练使用表格对页面进行布局，指导学生正确完成任务1的教学内容。

课后评价

表格布局作为几种网页布局方式中较为简单的布局方式，操作简单，易于掌握。