教学内容：项目五表格的应用
任务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、任务拓展
根据首页效果图运用已学知识技能将图片、文字等对象插入到相应位置。
提示：
在同一个单元格里文字下方还有图片该如何处理？
