苏科版八年级全册4 应用表格布局网页教案配套ppt课件

课题：应用表格布局网页结构

教学目标：

1.了解表格在网页设计中的作用。
2.掌握表格的制作方法和表格属性的设置方法。
3.能够根据网页设计的内容，正确设计表格的结构。
4.掌握表格嵌套的设计方法。
5.掌握修饰语编辑单元格的方法，能够在单元格中正确插入文字和图片。

教学重点：

掌握表格的制作方法和表格属性和单元格属性的设置方法。

教学难点：

表格嵌套在网页布局中的应用

教学准备：

素材，多媒体课件，网页

教学过程：

导入：观看两个页面进行比较异同

新授：

一、             分析表格结构及作用

小组合作探究：
    1.插入表格方法
    2.增加、删除行与列的方法
    3.拆分单元格的方法

学生演示、总结

表格是一种最基本的网页布局元素，在网页中使用表格进行布局，可以实现页面的精确排版和定位，美化页面，很好地控制页面中的各元素。

二、             小试牛刀

任务一、用表格进行版面布局 {分层次完成}
1.仿照首页新建网页，插入表格
2.应用表格，自己设计网页

 3.尝试使用表格嵌套的方法解决问题

三、             美化网页

任务二、充实页面内容并美化网页
1.在表格中插入图片、文字
2.设置单元格，表格属性

表格属性设置

插入表格后，就可以在“属性”面板中设置表格的相关属性，如图4-2所示。

◆图4-2  表格的属性

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

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

宽：用于设置表格的宽度，单位为像素或百分比。

填充：用于设置单元格中的内容与单元格边框之间的距离。如图4-3所示。

间距：用于设置单元格与单元格之间的距离。如图4-3所示。

对齐：用于设置表格的对齐方式，主要有左对齐、居中对齐和右对齐，默认为左对齐。

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

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

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

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

表格中既设置了背景颜色又设置了背景图像时，背景图像将会遮住背景颜色的显示。单元格的相关属性

单元格是组成表格的最基本单位。单元格属性面板如图4-4所示。

◆图4-4  单元格的属性

字体：用于设置单元格中文本的字体。

大小：用于设置单元格中文本的大小。

水平：用于设置单元格内容的水平对齐方式，主要有左对齐、居中对齐和右对齐，默认为左对齐。

垂直：用于设置单元格内容的垂直对齐方式，主要有顶端、居中、底部、基线四种方式、默认为居中对齐。

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

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

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

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

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

四、             拓展

探讨：1.如何去除网格线
        2.同时设置背景颜色与背景图片，效果如何？
        3.如何使用不同的颜色区分各板块？
五、评价

小组内评价，推选最优作品
小组之间评价
教师评价 ，展示最佳作品

总结本节内容