制作网站——表格布局网页

制作网站——表格布局网页（第3-4课时）
教学目标：
1．知识与技能
（1）了解网页设计中表格的作用。

（2）掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能
够在单元格中正确插入文字和图片。

（3）能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。

2．过程与方法
（1）掌握软件学习中的对比学习法，培养学生迁移学习的能力。

（2）通过用表格结构设计网页，使学生进一步理解表格的作用、功能及网页设计方法的多
样性，培养学生的发散思维能力。

（3）通过自主探究，使学生掌握软件的使用规则，由摸索、探究性学习到形成性学习，培
养学生学会学习，驾御学习的能力。

3．情感态度与价值观
（1）通过对比学习使学生体验软件学习的一般方法及规律，提高学生自主学习信息技术的
能力。

（2）通过运用表格布局网页对象活动（各人根据网站主题，设计网页），进一步掌握各种
不同对象的属性设置方法和规律，体验创造的快乐。

（3）通过“动物——人类的朋友”表格页的设计与制作，再次激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。

教学重点、难点：
1．教学重点：
（1）了解表格在网页设计中的重要作用和功能。

（2）掌握插入、编辑表格的方法及表格的属性设置方法。

（3）掌握单元格的修饰与属性设置。

2．教学难点：
表格的嵌套设计在网页设计中的应用。

教学方法：
对比教学法、探究学习法、模仿学习法。

教学准备：
各自制作的站点文件夹，整理、归类相关素材并按要求摆放。

教学过程：
1．复习
以复习提问的方式来回顾站点的建立、网页的新建以及网页中文字、图像等对象的插入，学
生认真回顾，回答教师提问。

为本节课教学做一定铺垫。

2．引入
（1）观看两个页面并进行比较：一个使用表格布局，但表格边框隐藏（看不出表格痕迹），其页面工整，文本、图片摆放对称，具有一定规律；另一个页面凌乱，图文混杂，摆放杂乱。

你更喜欢怎样的页面布局？
提出问题：有什么办法可以达到第一个页面的效果？
（2）观察第三个页面，内容与第一个页面相同，显现页面的表格边框。

学生讨论，交流，回顾Word中学习过的表格，明白表格在FrontPage中的作用。

3．新授
（1）分析表格结构
展示一些由表格布局的网页，引导学生分析其表格结构，自然过渡到教材中的例子（biaoge.htm），分析结构，得出表格的布局（如表格有几行几列，哪些行做了哪些处理）。

任务1 规划网页表格布局
分层完成该任务，基础相对薄弱一些的同学仅要求读懂教材中的网页表格布局，知道规则，根据表格的行数与列数，调整至最终样式；基础扎实、操作能力较强的同学可以跳出课本，自行设计表格网页布局，并将自己的表格设计绘制在书本上。

学生可根据自己的实际情况选择任务难度，并动手分析与创意设计。

建议：使用多个非嵌套的表格来布局。

设计意图：分层教学，培养学生模仿以及创新能力。

（2）完成表格布局
FrontPage中表格的插入和编辑与Word中的表格操作类似，教师无需讲解，引导学生进行知识迁移。

任务2 新建一个页面，用表格布局该网页，并在该网页中放入相应内容
打开站点，新建网页，以“biaoge.htm”为文件名保存。

按前面分析的要求插入一个表格。

调整表格结构（主要是行列的插入、删除，单元格的合并、拆分、调整大小等）。

老师可安排操作熟练的同学进行演示。

（3）充实网页页面内容
任务3 在表格中插入图片、输入文字
建议：插入图片对象前，对图片做一定处理，例如选择风格统一的图片，调整图片大小至同一尺寸等。

注意图片的保存。

（4）调整表格属性，美化页面
预览制作的网页，修饰网页，让网页看起来更美观。

任务4 表格属性以及单元格属性的设置
表格属性的设置，如去除网格线、设置表格背景色等。

使用不同的颜色区分各板块，设置单元格属性。

强调：学会利用右击后弹出的快捷菜单中的命令。

学生根据自己的实际情况选择任务难度，可按教师具体要求修饰、调整表格，也可根据自己的意图修饰、调整表格。

（表格边框的调整都需掌握）
设计意图：完成必须要求掌握的知识同时，给学生一定的自主空间，鼓励他们去创新，而非一成不变的生硬模仿。

（5）表格的嵌套
有时为了制作出更加美观的网页，我们可以使用表格的嵌套来实现。

任务5 加入横向目录导航条，尝试使用表格嵌套的方法解决问题。

学生动手制作网页。

4．总结与评价
本节课我们学习了在FrontPage中插入表格、编辑表格以及表格嵌套的基本方法。

请同学回答几个问题、并演示几个基本操作。

展示表格页面制作完成的优秀作品，表扬完成任务的同学，对未完成的同学给予激励，鼓励他们利用课余时间继续完成。

学生回答问题：
（1）表格在FrontPage中起到了的作用：定位对象。

（2）表格编辑的基本操作。

关注课堂学生操作达成率。

第四节制作表格——网页中动态效果的制作（第5-6课时）
教学目标：
1．知识目标
(1）理解动态网页与网页动态效果的区别。

(2）掌握网页动态效果的制作。

2．技能目标
掌握“插入”菜单中“组件”命令的使用，使得网页增添动态效果。

3．情感目标
通过学生自主学习网页动态效果的制作，形成积极、主动的学习气氛，激发学生的学习兴趣，培养学生的探究意识和创新能力。

教学重、难点：
1．重点：滚动字幕、交互式按钮等动态效果的制作与Flash的插入。

2．难点：各种效果对象的属性设置。

3．关键：动态效果制作中应图文并茂、色彩和谐、动静适宜。

教学方法：自主探究式学习、任务驱动式教学。

教学准备：
具有动态效果的网页，包括滚动字幕、交互式按钮和FLASH的插入
教学过程：
1．引入
老师打开静态网页和加有动态效果的网页，请学生感受它们的不同。

学生观察、比较两张网页，指出它们的不同点。

师生共同分析网页，引入新课的学习。

2．新授
任务1 滚动字幕的制作
教师巡视，个别给予指导。

学生完成任务后，展示作品，并演示操作。

小结设置滚动字幕的关键点：
文本的大小、字体、颜色等。

表现方式。

运动方向。

背景色的设置。

任务2 交互式按钮的制作
教师巡视，个别给予指导。

学生展示作品，演示操作，小结制作交互式按钮的关键点：
按钮文本的设置。

按钮的颜色、背景色以及效果等。

图片按钮。

任务3 网页中插入一个Flash动画
教师巡视，个别给予指导。

学生展示作品，演示操作，小结插入Flash动画的关键点：
Flash显示窗口的大小调整。

预览模式下才能看到Flash效果。

插入Flash后的网页保存。

学生参照教材内容完成网页动态效果制作，并比较分析其他同学的作品，对照自己的作品加以完善。

培养学生自主学习，发现问题的能力，师生共同分析问题并给予解决。

3．总结与评价
（1）学习过程评价，展示学生的作品，师生给予评价，激发他们更大的主动性与积极性。

（2）归纳总结。

学生对照“自我评价”表，进行过程性学习的评价。

参考资料
1．相关知识与技术
（1）关于横幅：用FrontPage 2003制作网页时，没有FrontPage 2000那样的插入“横幅广告管理器”功能，所以在FrontPage 2003中，网页中的横幅可以用静态的图片表示，也可以用Flash软件制作交替显示横幅，作为插件插入到网页的横幅位置。

（2）关于交互式按钮：在FrontPage 2003中交互按钮的形式有多种，其属性设置有文字、图像及背景等，这是FrontPage 2000所不能比拟的。

（3）关于DHTML效果
教材中没有介绍动态DHTML效果，这里建议老师们将动态DHTML效果内容补充讲解。

如下，将按钮“enter”图片当鼠标停在按钮处，显示进入下一页按钮“next”，设置方法如下：2．关于资源素材
（1）资源库：人与自然、环保等各种文字、图片、Flash动画资料。

（2）多种运用表格布局的网页——优秀网站。

教学反思：。