第十二课 用表格为网页布局 教学设计
1教学目标
知识与技能:
1.通过分析不同的页面布局,理解布局在版面设计中的重要性。
2.利用表格规划网页布局,掌握表格的插入、设置等操作方法。
过程与方法:
阅读教材,大胆尝试,学生分组讨论协作,教师指导。
情感态度与价值观:
端正学生学习网页制作的态度,引导观察、借鉴优秀作品可鉴之处,培养他们审美价值观。通过观察比较,学生会发现,很多网页都使用表格来组织和布局页面的,而且信息以可视化形式呈现,直观整洁,对页面元素定位操作方便。网站效果取决于页面布局的合理性,因此需要培养和提高他们用表格布局网站主页的能力。
2学情分析
对于初中学生来说,刚刚接触网页制作,既新鲜,又感兴趣。谈不上具备很好的网页布局操作经验。如何将文字、图像和网页各元素合理、恰当的排放在网页中,使页面易读和美观,是初学者建站需要考虑的问题,也是一大难点。对于初学者容易上手是拟定结构图(行数、列数),插入表格并且修改表格,使它的信息以可视化形式呈现,直观整洁,对页面元素定位操作,都尤为重要。学生制作的网站最终效果如何,取决于页面布局的合理性设置和对网页总的宗旨把握。
3重点难点
重点:用表格布局网页(拟定行/列数,插入表格)
难点:灵活掌握排列表格和设置表格属性的方法
4教学过程
活动1【导入】比较网页所想
1.展示2张素材相同布局不同的网页。
教师提问:(1):哪张比较美观?对照课本图12-1至12-4常见网站主页构成图,它属于哪种类型?
学生回答:(1)第2张主页更好,并简要说明理由;
说出常见的网站主页结构类型(4种):居中型、半包围型、主题突出型 和 导航栏型。
范例网站首页属导航栏型。
(2)它是怎么布局的?
老师分析网页中所隐含的表格结构,用表格为网页布局的重要性。
活动2【讲授】新课新授
一、分析表格布局
1.提问:这张网页是用几行几列的表格布局的?
学生:观察并说出几行几列
教师:演示表格结构类型。
2.展示“范例”网站主页,让学生分析表格结构类型。
二、设置网页大小
任务1:打开自己的网站主页,设置网页大小。
(一起学习”日积月累”)
三、插入及编辑表格并完成页面布局
任务2:根据自己的网站主页设计,插入表格。
请学生演示插入表格。
任务3:对表格进行拆分、合并,调整单元格。
教师演示,并作页面布局。
教师提问:网页中能看到用于布局的表格线吗?怎样“去掉”或“隐藏”?
(教师关键处点拨,学生作相应练习)
活动3【练习】完善丰富主页内容
完成以上操作的同学,确定标题栏目和分栏目,并在主页中插入图片和文字等。
活动4【活动】学生作品展示、点评
展示部分学生成果(不同典型类型),并分析成功(或独到之处)和欠缺的地方。学生分析,教师引导总结。
活动5【活动】课堂小结
回顾:
表格布局网页知识点:表格布局类型以及表格设置。
本节课我们主要学了哪些?
典型的网页结构有哪几种类型?
(师生一起回忆)
活动6【测试】自我评价
评价试题(满分10分,10分“优秀”,8分“良好”、6分“合格”、6分以下“需努力”)
1、(4分)常见的网页布局结构类型(书本中)有:、、和等
2、(2分)插入表格后,表格的行列数、行列距按要求合并、拆分合并设置,是否已完成()
3、(2分)不让表格线在网页中显示出来,你的方法是:
4、(2分)我设计的网页主页具有以下哪几项()
A条理清晰B主次分明C色彩对比度适当D布局疏密适当E美观引人入胜
活动7【作业】课外延伸
根据网站主页布局类型,搜索相关网站主页。
周末上网查找四种不同类型网站主页,并记下典型网站名称(或地址)。
课件18张PPT。第十二课 用表格为网页布局课程回顾前面我们制订了建站计划，又建立了网站站点。
2网站主页：主要由哪几部分组成？ 这节课让我们一起：为已确立的网站主题、栏目……构思布局。 标题（或主题图）、导航栏（或栏目）、网页内容、网站版权说明 等组成。网站首页1试比较，哪个主次更分明、条理更清晰、版面更整洁、布局更美观？网站首页24课堂任务了解 常见网页布局形式
会用 表格布局 并 制作网站首页
掌握 两种技巧：嵌套表格 和 布局表格
5常见网站主页构成图 —— 居中型、半包围型、主题突出型 和 导航栏型 等常见网站主页构成图 —— 居中型、半包围型、主题突出型 和 导航栏型 等网页布局形式常见网页布局形式
“国”字型
拐角型
标题正文型
左右框架型
上下框架型
综合框架型
封面型
Flash型
变化型 ……8“国”字型网页布局形式910网页布局形式11页面布局页面布局效果
条理清晰
主次分明
色彩对比度适当
布局疏密适当12用表格为网站主页布局新建网页（主页），并设置页面大小（为什么？）13布局页面
插入一个X行Y列的表格
在属性中设置表格对齐方式、修改边框线颜色、边距、大小等完善网站主页：插入图片、输入文字等表格嵌套在单元格中插入一个新的表格
就好像在word文档中插入表格14嵌套表格15布局表格布局表格16课堂小结使用表格布局页面导航栏型常见网页布局形式嵌套表格/布局表格的使用表格的调整、修改网页中使用表格拟定表格的行、列数主题突出型半包围型居中型……完善主页课外作业周末上网查找:四种不同类型网站主页，并记下典型网站名称（或地址） 致谢:感谢同学们认真听课,你辛苦了!
