教案：使用表格布局网页

1、9/9教学内容： 项目五 表格的应用 任务3、 使用表格布局网页 课 程： 网页设计及制作 专 业： 计算机 授课课时： 1课时 教 师： 授课班级： 单 位： 授课时间： 教学设计说明：对于使用表格布局“个人写真”首页的任务，我在坚持以教师为主导，学生为主体的教学原则下，通过复习提问巩固旧知；创设情景导入新课，明确任务；提出问题分析任务，引发思考、课堂讨论、获取知识；讲授点拨任务实施，引出重点；师生互动，归纳提高攻破难点五个环节进行教学。在任务实施中采取小组合作完成的方法，以小组为整体回答问题及完成操作性任务，小组评比采用星级制，小组得星数量从多到少评为优、良、合格、差。以此培养学生的合作意

2、识、激发学生积极性及学习热情。授课项目项目五、表格的应用任务3、使用表格布局网页教学目标知识及技能目标1理解表格在网页布局中的重要功能。2掌握插入表格的相关操作，如插入表格的方法、设置表格和单元格属性的方法、表格结构的调整、表格的嵌套等。3、理解网页布局排版的原则4、将素材插入表格过程方法目标1通过用表格布局网页，进一步理解表格的作用、功能。2通过对比学习及自主探究，了解并掌握软件学习的一般方法及规律，提升自主学习能力。情感态度及价值观激发学生制作网站的兴趣，培养严谨的学风，相互协作的合作精神。教学重点网页布局表格结构的设计及制作教学难点网页布局排版的原则学情分析本课程的教学对象是计算机专业二

3、年级学生，具备一定的计算机应用、图片处理软件的基础，并且在之前已经学过了平面设计及Flash动画,在此基础上学习网页设计及制作是有一定的理论及技能基础的。但是也存在着问题：综合应用能力薄弱，自主学习能力较差，学生之间学习水平差异较大。教材处理教材所用实例不够典型且及之前技能点联系不够，在此更换实例，同时加入超级链接的元素，使实例成为综合性网站制作实例，以便让学生以小组合作的形式去探索完成。教、学法1、教法：案例教学法、任务驱动法、对比教学法2、学法：自主学习法、合作学习法小组分配按照异质分组的原则，参及指导小组的划分：1、组长由成绩好、组织协调能力强的学生担任；2、各小组均有一名技术操作能力较

4、强的学生；3、各小组均有成绩优秀、中等和较差的学生；每组选出组长负责分工，确保每人都有分工。本项目以小组（每组56人）为单位，通过分析任务单，展开讨论、自主探究、完成任务。由组员推荐或者自荐，进行小组间交流展示。教学资源1、多媒体网络教室、互动多媒体软件。2、参考多本同类教材并结合实际需要整合资源。3、选用教参上的典型网页布局实例。教学评价体系教师评价；学生自评；学生互评教学过程设计教师活动教学内容学生活动教学准备将本项目完成所需素材、效果图打包发给学生。学生依据此文件夹创建网站的站点。复习回顾带领学生回顾及本课学习相关的技能点，为进入新课的学习做好准备。一、复习回顾1、你所了解的网页有哪些基

5、本元素？ 2、请总结在网页中插入这些网页元素的方法？ 3、请创建名为“mywb”的站点，站点根目为D:/myweb素材1、复习巩固旧知，小组讨论总结2、明确网页制作员的工作素养有序、严谨导入新课引导学生观察2个网页中的文本、图片等元素的布局，强调两个网页在制作中的区别是前者运用表格进行合理布局，可见布局在网页制作中的重要作用。提出本次课的任务。二、导入新课看图观察对比2张网页效果图 图1 图2首页效果图【观看效果图】观看老师展示的2张页面效果图。【学生感受】学生明确表格在网页制作中的的重要作用。学生明确本课的学习任务。任务分析请同学们观察首页的布局，分析首页的版面结构，得出首页表格布局图。任务

6、实施向学生展示首页表格尺寸图演示操作步骤请学生到教师机上演示表格四的操作。巡回检查学生制作，并针对制作过程出现问题进行及时指正。引导学生建立调整表格结构的思路，参照WORD软件中相关操作。演示操作步骤教师巡回检查学生制作，并针对制作过程出现问题进行及时指正。联系网站实际应用，让学生理解此布局排版的原则。通过新旧知识的综合性应用让学生巩固旧知，同时更好地掌握新知。三、进入新课1、任务分析2、任务实施（一）、插入布局页面的表格并在表格、单元格属性面板中设置表格【操作步骤】步骤1：单击菜单栏插入记录/表格，设置：1*1，边框、边距、间距：0；步骤2：单击状态栏table标签，设置表格对齐方式为“居中

7、”；步骤3：单击状态栏td标签，设置单元格高；步骤4：表格2、3、4的创建方法同上。【提出问题】如果表格属性填充、间距、边框不设为0是什么效果？练习一：带着问题完成表格插入及属性设置操作。【总结】如果没有指明单元格边距和单元格间距，大多数浏览器按单元格边距为1、单元格间距为2来显示表格。（二）调整表格结构1、合并、拆分表格【操作步骤】步骤1：光标定位于表格2中，单击单元格属性面板“拆分”按钮，将单元格差分成10列；步骤2：按住ctrl键选择不连续单元格，设置奇数单元格为80px,偶数单元格为20px;2、表格嵌套【操作步骤】光标定位于表格3第二例，插入一个2*3，宽度80%的表格。【提出问题】

8、如何使嵌套的表格置于单元格的最顶端并居中？练习二：完成表格的结构调整操作。【总结】表格中的第二种对齐单元格中的对象相对该单元格的对齐方式，在属性面板中展开水平对齐/垂直对齐下拉列表，选择相应的水平方向和垂直方向的对齐方式。3、归纳提高网页布局排版的原则:网页布局最好用多个表格叠加在一起来实现，即网页中有多个表格从上到下独立的排放。4、任务拓展根据首页效果图运用已学知识技能将图片、文字等对象插入到相应位置。提示：在同一个单元格里文字下方还有图片该如何处理？【学生讨论】学生在教师的引导下，分析、归纳该页面布局规律。学生到前面操作，及时发现操作存在的普遍问题。【学生操作】学生带着问题练习完成的表格插入及设置操作。并操作总结表格的填充、间距、边框属性意义。学生首先建立调整表格结构的方法，其次再具体学习操作方法，并及WORD中的操作进行对比。【学生操作】学生带着问题练习完成的表格结构调整操作。学生思考，结合实际，判断该原则的合理性，真正理解【学生自主练习】学生自主探究、自主创新，避免一味听老师讲解。课堂总结四、任务总结、评价1、学生对技能点插入表格及属性设置、调整表格结构和将素材插入表格适当位置的掌握情况.2、各小组对任务完成情况总结，并评出本课表现最