当前位置:文档之家› 制作网站——表格布局网页

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

制作网站——表格布局网页(第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)多种运用表格布局的网页——优秀网站。

教学反思:。

相关主题