教案：使用表格布局网页.docx

教学内容： 项目五 表格的应用
任务3、 使用表格布局网页
课 程： 网页设计与制作
专 业： 计算机
授课课时： 1课时
教 师：
授课班级：
单 位：
授课时间：

教学设计说明：对于使用表格布局“个人写真”首页的任务，我在坚持以教师为主导，学生为主体的教学原则下，通过复习提问——巩固旧知；创设情景——导入新课，明确任务；提出问题——分析任务，引发思考、课堂讨论、获取知识；讲授点拨——任务实施，引出重点；师生互动，归纳提高——攻破难点五个环节进行教学。在任务实施中采取小组合作完成的方法，以小组为整体回答问题及完成操作性任务，小组评比采用星级制，小组得星数量从多到少评为优、良、合格、差。以此培养学生的合作意识、激发学生积极性及学习热情。
授课项目
项目五、表格的应用
任务3、使用表格布局网页
教学目标
知识与技能目标
1．理解表格在网页布局中的重要功能。
2．掌握插入表格的相关操作，如插入表格的方法、设置表格和单元格属性的方法、表格结构的调整、表格的嵌套等。
3、理解网页布局排版的原则
4、将素材插入表格
过程方法目标
1．通过用表格布局网页，进一步理解表格的作用、功能。
2．通过对比学习与自主探究，了解并掌握软件学习的一般方法及规律，提升自主学习能力。
情感态度与价值观
激发学生制作网站的兴趣，培养严谨的学风，相互协作的合作精神。
教学重点
网页布局表格结构的设计与制作
教学难点
网页布局排版的原则
学情分析
本课程的教学对象是计算机专业二年级学生，具备一定的计算机应用、图片处理软件的基础，并且在之前已经学过了平面设计及Flash动画,在此基础上学习网页设计与制作是有一定的理论及技能基础的。
但是也存在着问题：综合应用能力薄弱，自主学习能力较差，学生之间学习水平差异较大。
教材处理
教材所用实例不够典型且与之前技能点联系不够，在此更换实例，同时加入超级链接的元素，使实例成为综合性网站制作实例，以便让学生以小组合作的形式去探索完成。
教、学法
1、 教法：案例教学法、任务驱动法、对比教学法
2、 学法：自主学习法、合作学习法
小组分配
按照异质分组的原则，参与指导小组的划分：
1、组长由成绩好、组织协调能力强的学生担任；
2、各小组均有一名技术操作能力较强的学生；
3、各小组均有成绩优秀、中等和较差的学生；
每组选出组长负责分工，确保每人都有分工。本项目以小组（每组5—6人）为单位，通过分析任务单，展开讨论、自主探究、完成任务。由组员推荐或者自荐，进行小组间交流展示。
教学资源
1、多媒体网络教室、互动多媒体软件。
2、参考多本同类教材并结合实际需要整合资源。
3、选用教参上的典型网页布局实例。
教学评价
体系
教师评价；学生自评；学生互评
教学过程设计
教师活动
教学内容
学生活动
教学准备
将本项目完成所需素材、效果图打包发给学生。

学生依据此文件夹创建网站的站点。
复习回顾
带领学生回顾与本课学习相关的技能点，为进入新课的学习做好准备。
一、复习回顾
1、你所了解的网页有哪些基本元素？
2、请总结在网页中插入这些网页元素的方法？
3、请创建名为“mywb”的站点，站点根目为D:/myweb素材
1、复习巩固旧知，小组讨论总结
2、明确网页制作员的工作素养——有序、严谨
导入新课
引导学生观察2个网页中的文本、图片等元素的布局，强调两个网页在制作中的区别是前者运用表格进行合理布局，可见布局在网页制作中的重要作用。

提出本次课的任务。
二、导入新课
看图观察对比2张网页效果图

图1 图2

首页效果图

【观看效果图】
观看老师展示的2张页面效果图。
【学生感受】
学生明确表格在网页制作中的的重要作用。

学生明确本课的学习任务。

任务分析
请同学们观察首页的布局，分析首页的版面结构，得出首页表格布局图。

任务实施

向学生展示首页表格尺寸图

演示操作步骤

请学生到教师机上演示表格四的操作。

巡回检查学生制作，并针对制作过程出现问题进行及时指正。

引导学生建立调整表格结构的思路，参照WORD软件中相关操作。
演示操作步骤

教师巡回检查学生制作，并针对制作过程出现问题进行及时指正。

联系网站实际应用，让学生理解此布局排版的原则。

通过新旧知识的综合性应用让学生巩固旧知，同时更好地掌握新知。
三、进入新课
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、任务拓展
根据首页效果图运用已学知识技能将图片、文字等对象插入到相应位置。
提示：
在同一个单元格里文字下方还有图片该如何处理？
【学生讨论】学生在教师的引导下，分析、归纳该页面布局规律。

学生到前面操作，及时发现操作存在的普遍问题。

【学生操作】学生带着问题练习完成的表格插入及设置操作。并操作总结表格的填充、间距、边框属性意义。

学生首先建立调整表格结构的方法，其次再具体学习操作方法，并与WORD中的操作进行对比。

【学生操作】学生带着问题练习完成的表格结构调整操作。

学生思考，结合实际，判断该原则的合理性，真正理解

【学生自主练习】学生自主探究、自主创新，避免一味听老师讲解。
课堂总结
四、任务总结、评价
1、学生对技能点插入表格及属性设置、调整表格结构和将素材插入表格适当位置的掌握情况.
2、各小组对任务完成情况总结，并评出本课表现最优组。
学生总结反思所学，不明白之处及时向老师或同学学习。

五、作业
补充练习
巩固新知
板书设计
表格布局
1、表格在网页布局中的重要功能
2、插入表格的相关操作：
l 插入表格的方法
l 设置表格和单元格属性的方法
l 表格结构的调整：合并与拆分、表格的嵌套
3、 网页布局排版的原则
4、将素材插入表格
教学反思

6