最新版：《网页中的表格》教案设计

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

一、教学设计部分

教学内容分析 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和网页设计中的不同作用。 网页模板是一个新知识点，只有借助实际操作就能感受它的作用教案表格模板图片，所以安排学生使用模板设计新网页的环节。 二、补充资料部分

1．课件与学件 R学生用学件

名称文件名

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

表格的调整表格调整．swf

设计网页模板网页模板．swf

2．资料库 网站版面的布局设计 版面设计也可以理解为布局设计，就是我们在浏览器上发现的一个完整的页面。如何将所有应表现的内容有机地融合和分布，达到某些视觉效果，这就叫做版面布局设计。我们将怎样做好网站的版面设计呢？首先我认为是“过程必定了结果”，重视你所做的每一步并把它尽量做到最好，相信结果也不会偏离轨道。 下面先使我们来认识一些版面设计的流程。 一、构思（结构的打造） 在构想之前我们总应该进行网站的意愿分析、定位跟受众群等众多方面的事情。如果我们连那些问题都还不知道的话，请先不要去想着设计，因为在不知道需求的状况下，盲目地去把页面设计达到某些视觉效果是很难的。 当我们真正确认需求后，便可以尽可能地发挥自己的想象力，将自己想到的“构思”画出来（用笔和纸以及工具都可以，根据自己的习惯而定）。这是属于一个构思的过程，不讲求精致工整，也不必考虑到一些细节的个别，只要用几条粗陋的笔触描绘出时尚的轮廓即可。尽可能多构想一些，以便选用一个最合适的进行构建。 二、粗略布局 这个阶段是个试用期，我们即使把重要的元素跟网页结构相结合，看看框架是否合理，如果不适宜则进行相应的更改。 三、完善布局 当我们将要有一个很好的框架时，我们必须按照网站设计时的构想将其所需的内容有条理地融入于整个的框架中。

我们必须借助对截图的处理、空间的合理运用进行编排。 下面是广告大师樊志育在《广告制作》中所提及的，希望对你们在布局的理论里面有所帮助。 1．正常平衡──亦称“匀称”。多指左右、上下对照方式，主要注重秩序，能达到安定诚实、信赖的效果。 2．异常平衡──即非对照方式，但也应平衡和韵律，当然都是不均整的，此种布局可超过强调性、不安性、高注目性的效果。 3．对比──所谓对比，不仅运用颜色、色调等方法来做体现，在内容上也能涉及古与今、新与旧、贫与富等对比。 4．凝视──所谓凝视是运用页面中人物视线，使浏览者仿照跟随的心理，以超过注视页面的效果，一般多用明星凝视状。 5．空白──空白有两种作用，一方面对其他网站表示突出卓越，另一方面也表示网页品位的优越感，这种体现方式对体显网页的时尚十分有效。 6．尽量用图片解说──此法对不能用语言说服、或用语言能够表达的感情，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。这个阶段主要是针对些细节的修改和改进了，比如说一些色彩饱和度、一些字体、间距的调整等。

点击显示全文，继续预览