资源简介

第三章第二节 网站的制作（第二课时）
【教学目标】
1、知识与技能
（1）了解利用表格布局的必要性。
（2）学会分析网页设计稿，学会用表格嵌套的方法完成网页结构布局
（3）学会用网页制作软件实现利用表格嵌套布局网页,学会一些表格布局技巧和注意点
（4）学会在表格布局中插入文字、图片、背景音乐等元素的方法和处理技巧
（5）学会一些基本的美化方法
2、过程与方法
（1）体会网页由设计图到完成电脑制作的一般流程
（2）学会把设计图抽象为表格嵌套布局的方法，感悟技巧。这是由设计变为现实的关键。
（3）初步学会表格设置和素材插入的处理技巧。
3、情感态度与价值观
（1）让学生了解珍惜动物的相关知识，培养关爱动物、热爱大自然的情感。
（2）在鼓励学生积极争先的同时培养学生互相帮助、互相合作的互助精神，消除自私心理。
【教学重难点】
教学重点
理解为什么要用表格布局
设计图转化为表格嵌套布局图
制作表格嵌套布局结构是各基本属性意义，表格设置技巧
文字、图片的插入方法，在表格中的使用技巧，表格、文字、图片的协调
教学难点
设计图转化成表格嵌套布局图。
表格设置的一些技巧，图、文、表格的配合设置（如何保证设计效果和尺寸比例）。
【教学过程】
导入
1、老师通过演示复习上节课的内容：顺序地直接制作首页。
2、将制作的首页传送给学生，（1）要求他们把标志图片按规定尺寸移动到规定位置。（2）要求他们将一段文字，变成一个矩形文字板块移动到某一规定位置。
3、以上要求学生完成不了，让学生发现直接制作网页，排版定位很不灵活，局限性极大，做不出生动活泼而又美观的页面。突出利用表格进行网页布局的必要性。（表格就像沙漠中为种植植被而用来固定流沙的草绳栅格）
设计图转化成表格嵌套布局图
老师在黑板上展示一份网页设计图，提出关键问题：如何用规则的表格来完成不规则的网页设计布局？抛出思考方向：用表格嵌套，逐步细化的方法。
演示给学生看：如何把设计图转化成表格嵌套布局图。
边演示边总结提炼转化方法：
首先放置一个1*1的表格，作为外框固定整个网页。
分离出一个个单独的横向贯穿行，每一行作为一个单独的表格。
每一个横向贯穿表格根据其中的竖向贯穿结构，确定其一行几列。
每个小单元格再根据其范围内部的设计情况嵌套更小的表格。
发现贯穿结构，逐步细化分解。
4、下发网页设计图讲义，讲义上有A（最简单）、B（一般）、C（较难）三个网页设计图，对应三块空白。
要求：（1）每位同学都必须完成A设计转化成表格布局图，画在对应空白处。
（2）一般同学完成B设计图转化成表格布局图，画在对应空白处。
（3）能力较强，学习较快的同学完成C设计图转化成表格布局图，画在对应空白处。
老师巡视点评，同学互相检查，互助。
三、在计算机上，利用网页制作软件实现网页布局和制作。
1、老师演示：表格的插入，介绍表格属性里的基本参数意义。
学生模仿练习。
2、老师演示：放入文字，预览，表格宽度发生变化，不能维持原来的设计状态。突出对表格宽度控制。
学生模仿练习。
3、老师演示：放入图片会影响了单元格的大小，如何调整？介绍图片的调整方法，图片属性的主要参数意义，图片、表格、文字根据设计图调节尺寸，使各元素美学协调。
学生模仿练习
* 让学生领悟到： 为了达到设计目的，要控制好各个单元格的宽度，高度由插入的元素互相牵制。
4、老师演示：完整的完成网页布局，插入各个元素，调整好尺寸和位置等等。
学生按各自的表格布局图在电脑上重新完成制作。
反复地 修改——保存——预览，发现修正不符合设计之初。
老师巡回指导点评，学生互助。
四、进阶
1、完成吃力的同学继续完成网页的基本制作。
学生互相协作，老师指导。
2、完成较快的同学在老师的带领下学习一下美化修饰的方法。
表格底色、边线、底图、背景音乐等修饰
老师演示——学生练习——老师指导点评，学生互助。
【作品欣赏观摩】
1、组织附近的同学互相观摩讨论作品。
2、老师把一些质量较高的作品集中展示点评。
【课堂小结】
这一节课，我们主要学习了以下几点：
1、如何将设计转化为表格嵌套布局图
2、学会了在计算机上利用表格嵌套实现网页布局，使网页制作更灵活，更得心应手。
3、我们学会了表格、文字、图片插入和设置的一些基本技巧。
【课后作业】
大家回去后，利用休息天的时间完成其他几个网页的设计，画好相应的表格嵌套布局图。

展开更多......

收起↑