《网页中的表格》教案设计

《网页中的表格》教案设计

一、教学设计部分

教学内容分析

R本课的主要内容与地位

网页中，常用表格来对网页中其它元素定位，将复杂的元素有条理的分布到网页各个位置──网页布局。另外，当我们把表格的宽度定为固定像素值后，还能保证网页布局不会随浏览器窗口的大小变化而变化，当我们在网页中输入文字的时候，就可以让文字顶满格后自动换行，方便我们对文字的编辑。

由此可见，网页中只有利用表格进行布局，才能称得上真正意义上的网页设计。

R本课与前后内容的关系

利用表格布局网页，将上一节设计的网站首页中的各种素材进行合理的分布，是对学生进行网页设计技能上的提升；利用表格布局网页也是整个网站设计中一个非常重要技术手段，应用非常广泛。教学目标分析

R知识目标/技能目标

·知识目标

理解表格在网页设计中的重要作用。

·技能目标

⑴掌握使用表格布局网页。

⑵灵活掌握表格调整的方法。

R过程与方法目标

能够合理利用表格对网页进行布局和规划。

R情感态度与价值观目标

了解学校概貌，发现校园之美，理解规矩与方圆的关系，养成良好的生活和学习习惯。

R本课的重难点

重点和难点：掌握利用表格对网页进行布局的方法

R本课的课时分配建议

一课时教学策略设计建议

R教法建议

由于关于表格的基本操作在ord中已经有较详细的操作方法。在本课教学过程中，教师教学的重点应放在由学生探究以上基本操作的基础上的表格的使用──如何利用表格布局网页，让网页中的素材合理的在网页上分布。

另外，网页模板是提高建站效率的有效手段，教师要注意引导学生对网页模板的使用。

R学法建议

注意观察和借鉴样板网站中表格的运用情况，刚开始使用表格设计网页时可将其边框粗细的值设为1，以观察调整表格的过程，从而掌握表格调整的技巧。教学资源与环境建

议

R本课教学资源索引

．第二课的半成品网页：Index．ht、Parents．ht教学评价建议

R自评、互评、师评要注意的问题

学生制作的网页是否通过表格的布局达到美化、整齐和排列有序的目的。教学过程参考案例

阶段：导入新课，明确学习目标

教学环节教师活动学生活动设计理念

导入新课指导学生“读一读”，讨论两幅图之间的相似之处。师：校园内的建筑通过道路和绿化带进行区域上的划分，网页中的素材是通过表格进行合理的安排，但如何安排呢？这就是本节课的学习内容──网页中的表格。阅读，讨论、思考、回答。从学生身边最熟悉的环境入手，导入他们陌生的知识点，帮助学生通过对二者的比较理解新知识。

第二阶段：范例精讲，学生自主探究，完成范例

教学环节教师活动学生活动设计理念

学习与探究教师讲解表格在网页时的重要作用。任务一：插入表格师：如果我们想要在网页中使用表格必须先插入表格，操作方法与ord差不多，自己尝试着在一个新网页中插入不同设置的表格，并填写表1-3-1。教师指导学生参照图1-3-4在主页文件Index．ht中插入表格：任务二：表

格的调整师：此部分内容与ord中的操作也是非常相似，根据教材内容分组完成表格的调整。调整结束后将第二课中已经输入的内容移动到表格中。任务三：设计网页模板师：设计网站时为提高工作效率，我们一般使用模板，现在我们就来定制属于我们自己的网页模板。插入默认值的表格，分组插入修改不同参数值的表格，讨论并填写表格。实践表格的调整方法，体验表格对网页布局的重要作用。根据教材提示，将首页保存为模板。对于学生熟悉的知识点，完全放手给学生探究完成。

尝试通过不同途径解决同一问题，提高办事效率。

第三阶段：知识、情感拓展

教学环节教师活动学生活动设计理念

知识与情感师：请同学们再次预览使用表格布局的网页，然后改变浏览器窗口的大小，网页版面发生变化吗？这说明什么问题呢？师：在生活中，你能体会到父母对自己的关心和爱护吗？请大家课下完成“一日护蛋”的实践活动，设计新网页“Feeling．ht”。学生分组预览网页。生：表格可以保护网页的布局。由表格对网页布局的保护延伸到父母对子女的爱。让学生从护蛋活动中体会这种爱护要付出多大的精力。

第四阶段：综合实践，巩固与提高，自由创作，迁移运用

教学环节教师活动学生活动设计理念

实践与创新师：通过本节课的学习，你是否感觉上一节课设计的二级网页“Parents．ht”需要使用表格重新布局一下呢？教师巡视指导：刚才我们学习了网页模板的保存，下面请同学们使用模板设计xx页表中所列的三个网页。师：请大家思考：能否为实践活动网页设计统一的模板？使用表格重新布局网页。设计新网页，体验模板的重要作用。重点实现示例网页Neighbor．ht中的表格设计效果。学以致用，巩固提高。

第五阶段：教学总结，设疑激趣，为下一节课作好铺垫教学环节教师活动学生活动设计理念

课堂小结课堂小结本节课的学习内容。师：通过本节课的学习，同学们是否觉得自己做出的网页在形式上还有些单调？我们能否把网页做得更漂亮呢？请同学们课后预习下一课的内容──网页美化。重新审视自己的网页，并与样例对比，查找出自己网站需要改进的地方。通过对比查找不足，做到有的放矢，激发学生自主探究的热情。

教学反思

本节课的主要内容与ord中的表格操作有很多相似之处，但又有很大的不同。所以，教师应让学生通过实践理解表格在ord和网页设计中的不同作用。

网页模板是一个新知识点，只有通过实际操作才能体会

它的作用，所以安排学生使用模板设计新网页的环节。

二、补充资料部分

．与学件

R学生用学

名称文件名

在网页中插入表格插入表格．sf

表格的调整表格调整．sf

设计网页模板网页模板．sf

．资料库网站版面的布局设计

版面设计也可以理解为布局设计，就是我们在浏览器上看到的一个完整的页面。如何将所有要体现的内容有机地整合和分布，达到某种视觉效果，这就叫做版面布局设计。我们将如何做好网站的版面设计呢？首先我认为是“过程注定了结果”，重视你所做的每一步并把它尽量做到最好，相信结果也不会偏离轨道。

下面先让我们来了解一些版面设计的步骤。

一、构思

在构思之前我们总需要进行网站的需求分析、定位和受众群等很多方面的事情。如果我们连这些问题都还不清楚的话，请先不要去想着设计，因为在不了解需求的情况下，盲目地去把页面设计达到某种视觉效果是很难的。

当我们真正确定需求后，便可以尽可能地发挥自己的想