网页布局教案
爱本无罪-现金管理暂行条例实施细则
网页布局之一
授课日期
班级名称
授课地点
教学课题
课 时 2学时
（1）掌握利用表格布局网页中的文字、图像等页面元素的方法。
（2）掌握应用表格存储文本或数据，且对数据进行有序排列。
教学目的
（3）掌握利用表格将形状规则的小图片合成形状不规则的大图片的操作方
法。
（4）掌握应用布局表格和层的方法布局网页中的文字和图片的方法。
（1）利用表格布局网页中的文字、图像等页面元素。
（2）应用表格存储文本或数据，且对数据进行有序排列。
知识目标
（3）利用表格将形状规则的小图片合成形状不规则的大图片。
（4）应用布局表格和层的方法布局网页中的文字和图片。
（1）利用表格布局网页中的文字、图像等页面元素。
能力目标
（2）应用表格存储文本或数据，且对数据进行有序排列。
（3）利用表格将形状规则的小图片合成形状不规则的大图片。
培养学生的创新能力与独立思考能力，并使其具有分析问题、解决问题的能
素质目标
力。
（1）利用表格布局网页中的文字、图像等页面元素。
重 点
（2）应用表格存储文本或数据，且对数据进行有序排列。
（3）应用布局表格布局网页中的文字和图片
难 点
（1）应用层的方法布局网页中的文字和图片。
课 型 演示型＋操作型
教学方法
边讲解、边展示、边欣赏
教学手段 每人一台计算机操作实践
教 参
《网站设计与网页配色》
10．8
信管053
软件三机房
实验三 网页布局之一
1．实训课程引导
本次实训熟悉利用表格布局网页的文字、图像
等页面元素；
学习应用表格存储文本或数据；学会利用表格将形态规则的小图
片合成形成不规则
的大图片；熟悉应用布局表格和层布局网页的
文字和图片
2．展示网页的预览效果
首先浏览本次实训所制作网页的最终效果：请浏览
。
3．分析实训任务
教学环节
（1）相关实训任务
管理本地站点，在本地站点中新建网页，设置网页的整体属
性。
在网页中输入文字，插入图像。
（2）重点实训任务
利用表格布局网页中的文字、图像等页面元素。
应用表格存储文本或数据，且对数据进行有序排列。
应用布局表格布局网页中的文字和图片
应用层的方法布局网页中的文字和图片。
（3）拓展实训任务
利用表格将形状规则的小图片合成形状不规则的大图片。
时间安排
5
5
5
4．明确实训目的
（1）掌握利用表格布局网页中的文字、图像等页面元素的
方法。
（2）掌握应用表格存储文本或数据，且对数据进行有序排
列。
（3）掌握利用表格将形状规则的小图片合成形状不规则的
大图片的操作方法。
（4）掌握应用布局表格和层的方法布局网页中的文字和图
片的方法。
5．介绍实训步骤与内容
（1）预览实训起点网页：请浏览。
（2）在站点“Co
mputerDiy”根文件夹中新建一个子文件夹
“03实训3”，在该子文件夹中创建一个命名为“
”的网
页文档。
（3）设置网页的页面属性。
（4）从上至下依次插入四个表格，用于布局图片和文本。
5
（5）在“主板调研报告”下面插入层，再在层中插入两张
图片。
（6）在“降价排行”下面插入一张表格，该表格用于存储
数据。
（7）在“微星品
牌主板”下面插入布局表格和布局单元格，
然后在布局单元格中输入文本，插入图片。
（8）在其他各表格中输入文本，插入图片。
6．学生完成实训任务
（1）老师现场指导、答疑……
50
（2）现场点评
注意：实训任务完成后，必须将提示信息删除
5
7．操作提示与功能扩展
（1）对学生实训完成情况进行阶段性讲解、说明共性问题
的解决方法
“主板频道”位置的图片是几张规则的小图片借用表格拼接
而成。
本次实训应用表格
、布局表格、层等多种网页元素对文本和
图片进行布局，主要目的是训练网页的多种布局方法，其实只使
用表格进行布局也能实现。
（2）在现有基础上拓展网页功能
8. 实训小结 <
br>网页中元素布局方法有多种，本次实训主要学会了利用表
格、层、布局表格等方法对页面中的文字
和图像进行布局的方法。
目前比较常用的方法是利用层对页面元素进行布局，其优点是布
局灵活
，浏览速度快。
9．实训拓展
（1）按要求编写实训报告
（2）课外独立完成本次实训的全部内容
总计
课后作业 写实训报告
课后评析
90
5
5
5