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

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

《《网页中的表格》教案设计.docx》由会员分享，可在线阅读，更多相关《《网页中的表格》教案设计.docx（5页珍藏版）》请在冰豆网上搜索。

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

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

本资料为woRD文档，请点击下载地址下载全文下载地址　　一、教学设计部分

　　教学内容分析

　　R本课的主要内容与地位

　　网页中，常用表格来对网页中其它元素定位，将复杂的元素有条理的分布到网页各个位置──网页布局。

另外，当我们把表格的宽度定为固定像素值后，还能保证网页布局不会随浏览器窗口的大小变化而变化，当我们在网页中输入文字的时候，就可以让文字顶满格后自动换行，方便我们对文字的编辑。

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

　　R本课与前后内容的关系

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

　　教学目标分析

　　R知识目标/技能目标

　　·知识目标

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

　　·技能目标

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

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

　　R过程与方法目标

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

　　R情感态度与价值观目标

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

　　R本课的重难点

　　重点和难点：

掌握利用表格对网页进行布局的方法

　　R本课的课时分配建议

　　一课时

　　教学策略设计建议

　　R教法建议

　　由于关于表格的基本操作（插入表格、调整表格：

调整行高或列宽、合并或拆分单元格、插入或删除行或列、平均分布行或列）在word中已经有较详细的操作方法。

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

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

　　R学法建议

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

　　教学资源与环境建议

　　R本课教学资源索引

　　1．第二课的半成品网页：

Index．htm、Parents．htm

　　教学评价建议

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

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

　　教学过程参考案例

　　第一阶段：

导入新课，明确学习目标

　　教学环节

　　教师活动

　　学生活动

　　设计理念

　　导入新课

　　指导学生“读一读”，讨论两幅图之间的相似之处。

　　师：

校园内的建筑通过道路和绿化带进行区域上的划分，网页中的素材是通过表格进行合理的安排，但如何安排呢？

　　这就是本节课的学习内容──网页中的表格。

　　阅读，讨论、思考、回答。

　　从学生身边最熟悉的环境入手，导入他们陌生的知识点，帮助学生通过对二者的比较理解新知识。

　　第二阶段：

范例精讲，学生自主探究，完成范例

　　教学环节

　　教师活动

　　学生活动

　　设计理念

　　学习与探究

　　教师讲解表格在网页时的重要作用。

　　任务一：

插入表格

　　师：

如果我们想要在网页中使用表格必须先插入表格，操作方法与word差不多，自己尝试着在一个新网页中插入不同设置的表格，并填写表1-3-1。

　　教师指导学生参照图1-3-4在主页文件Index．htm中插入表格：

　　任务二：

表格的调整

　　师：

此部分内容与word中的操作也是非常相似，根据教材内容分组完成表格的调整。

调整结束后将第二课中已经输入的内容移动到表格中。

　　任务三：

设计网页模板

　　师：

设计网站时为提高工作效率，我们一般使用模板，现在我们就来定制属于我们自己的网页模板。

　　插入默认值的表格，分组插入修改不同参数值的表格，讨论并填写表格。

　　实践表格的调整方法，体验表格对网页布局的重要作用。

　　根据教材提示，将首页保存为模板。

　　对于学生熟悉的知识点，完全放手给学生探究完成。

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

　　第三阶段：

知识、情感拓展

　　教学环节

　　教师活动

　　学生活动

　　设计理念

　　知识与情感

　　师：

请同学们再次预览使用表格布局的网页，然后改变浏览器窗口的大小，网页版面发生变化吗？

这说明什么问题呢？

　　师：

在生活中，你能体会到父母对自己的关心和爱护吗？

请大家课下完成“一日护蛋”的实践活动，设计新网页“Feeling．htm”。

　　学生分组预览网页。

　　生：

表格可以保护网页的布局。

　　由表格对网页布局的保护延伸到父母对子女的爱。

让学生从护蛋活动中体会这种爱护要付出多大的精力。

　　第四阶段：

综合实践，巩固与提高，自由创作，迁移运用

　　教学环节

　　教师活动

　　学生活动

　　设计理念

　　实践与创新

　　师：

通过本节课的学习，你是否感觉上一节课设计的二级网页“Parents．htm”需要使用表格重新布局一下呢？

　　教师巡视指导

　　：

刚才我们学习了网页模板的保存，下面请同学们使用模板设计xx页表中所列的三个网页。

　　师：

请大家思考：

能否为实践活动网页设计统一的模板？

　　使用表格重新布局网页。

　　设计新网页，体验模板的重要作用。

重点实现示例网页Neighbor．htm中的表格设计效果。

　　学以致用，巩固提高。

　　第五阶段：

教学总结，设疑激趣，为下一节课作好铺垫

　　教学环节

　　教师活动

　　学生活动

　　设计理念

　　课堂小结

　　课堂小结本节课的学习内容。

　　师：

通过本节课的学习，同学们是否觉得自己做出的网页在形式上还有些单调？

我们能否把网页做得更漂亮呢？

请同学们课后预习下一课的内容──网页美化。

　　重新审视自己的网页，并与样例对比，查找出自己网站需要改进的地方。

　　通过对比查找不足，做到有的放矢，激发学生自主探究的热情。

　　教学反思（教学设计理念）

　　本节课的主要内容与word中的表格操作有很多相似之处，但又有很大的不同。

所以，教师应让学生通过实践理解表格在word和网页设计中的不同作用。

　　网页模板是一个新知识点，只有通过实际操作才能体会它的作用，所以安排学生使用模板设计新网页的环节。

　　二、补充资料部分

　　．与学件

　　R学生用学件

　　名称

　　文件名

　　在网页中插入表格

　　插入表格．swf

　　表格的调整

　　表格调整．swf

　　设计网页模板

　　网页模板．swf

　　2．资料库

　　网站版面的布局设计

　　版面设计也可以理解为布局设计，就是我们在浏览器上看到的一个完整的页面。

如何将所有要体现的内容有机地整合和分布，达到某种视觉效果，这就叫做版面布局设计。

我们将如何做好网站的版面设计呢？

首先我认为是“过程注定了结果”，重视你所做的每一步并把它尽量做到最好，相信结果也不会偏离轨道。

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

　　一、构思（结构的搭建）

　　在构思之前我们总需要进行网站的需求分析、定位和受众群等很多方面的事情。

如果我们连这些问题都还不清楚的话，请先不要去想着设计，因为在不了解需求的情况下，盲目地去把页面设计达到某种视觉效果是很难的。

　　当我们真正确定需求后，便可以尽可能地发挥自己的想象力，将自己想到的“构思”画上去（用笔和纸或者软件都可以，根据自己的习惯而定）。

这是属于一个构思的过程，不讲究细腻工整，也不必考虑到一些细节的部分，只要用几条粗陋的线条勾画出创意的轮廓即可。

尽可能多构思一些，以便选择一个最适合的进行搭建。

　　二、粗略布局

　　这个阶段是个试用期，我们只要把重要的元素和网页结构相结合，看看框架是否合理，如果不适合则进行相应的修改。

　　三、完善布局

　　当我们已经有一个很好的框架时，我们需要根据网站设计时的构思将其所需的内容有条理地融入于整个的框架中。

我们需要通过对图片的处理、空间的合理利用进行编排。

　　下面是广告大师樊志育在《广告制作》中所提到的，希望对大家在布局的理论上面有所帮助。

　　1．正常平衡──亦称“匀称”。

多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。

　　2．异常平衡──即非对照形式，但也要平衡和韵律，当然都是不均整的，此种布局能达到强调性、不安性、高注目性的效果。

　　3．对比──所谓对比，不仅利用色彩、色调等技巧来做表现，在内容上也可涉及古与今、新与旧、贫与富等对比。

　　4．凝视──所谓凝视是利用页面中人物视线，使浏览者仿照跟随的心理，以达到注视页面的效果，一般多用明星凝视状。

　　5．空白──空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种表现方法对体显网页的格调十分有效。

　　6．尽量用图片解说──此法对不能用语言说服、或用语言无法表达的情感，特别有效。

图片解说的内容，可以传达给浏览者的更多的心理因素。

这个阶段主要是针对些细节的更改和优化了，比如说一些颜色饱和度、一些字体、间距的调整等。