第三课 网页中的表格(教参)

（一）教学设计部分

⇨教学内容分析

本课的主要内容与地位

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

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

本课与前后内容的关系

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

⇨教学目标分析

知识目标/技能目标

知识目标

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

技能目标

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

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

过程与方法目标

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

情感态度与价值观目标

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

本课的重难点

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

本课的课时分配建议

一课时

⇨教学策略设计建议

教法建议

由于关于表格的基本操作（插入表格、调整表格：调整行高或列宽、合并或拆分单元格、插入或删除行或列、平均分布行或列）在Word中已经有较详细的操作方法。在本课教学过程中，教师教学的重点应放在由学生探究以上基本操作的基础上的表格的使用——即：如何利用表格布局网页，让网页中的素材合理的在网页上分布。

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

学法建议

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

⇨教学资源与环境建议

本课教学资源索引

1.第二课的半成品网页：Index.htm、Parents.htm

⇨教学评价建议

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

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

⇨教学过程参考案例

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

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

⇨教学反思(教学设计理念)

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

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

（二）补充资料部分

⇨1.课件与学件

学生用学件

⇨3.资料库

网站版面的布局设计

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

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

一、构思（结构的搭建）

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

当我们真正确定需求后，便可以尽可能的发挥自己的想象力，将自己想到的“构思”画上去（用笔和纸或者软件都可以，根据自己的习惯而定）。这是属于一个构思的过程，不讲究细腻工整，也不必考虑到一些细节的部分，只要用几条粗陋的线条勾画出创意的轮廓即可。尽可能的多构思一些，以便选择一个最适合的进行搭建。

二、粗略布局

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

三、完善布局

当我们已经有一个很好的框架时，我们需要根据网站设计时的构思将其所需的内容有条理的融入于整个的框架中。我们需要通过对图片的处理、空间的合理利用进行编排。

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

1、正常平衡---亦称“匀称”。多指左右、上下对照形式，主要强调秩序，能达到安定诚实、信赖的效果。

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

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

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

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

6、尽量用图片解说---此法对不能用语言说服、或用语言无法表达的情感，特别有效。图片解说的内容，可以传达给浏览者的更多的心理因素。

四、深入优化

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