教案使用表格布局网页模板.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、 将素材插入表格
教学反思