浙教版信息技术八年级上第十二课用表格为网页布局教学设计
课题
用表格为网页布局
单元
第三单元
学科
信息技术
年级
八年级
学习
目标
知识目标：了解常见的网页版式
技能目标：会用表格进行网页的规划和布局
情感目标：学会欣赏网页，体验创作的乐趣。
重点
网页版式的设计和表格的建立。
难点
设计出好的网页布局。
教学过程
教学环节
教师活动
学生活动
设计意图
导入新课
同学们先观察一下上面两个网站的图片，看看同学们更喜欢哪种布局!第一个页面凌乱，摆放杂乱，而第二个布局，页面工整，文本图片具有一定的规律。有什么方法可以达到整齐的页面效果呢?需要在网页中插入表格。
思考
激发学生学习兴趣并快速进入学习状态
讲授新课
制作网页时经常采用表格来规划页面的布局，便于对页面上的文字、图片、标题、动画等对象的位置进行合理定位。
一、规划主页页面布局
网站除了内容丰富、视觉冲击力强，还需要有一个安排合理的页面布局，如图所示是常见的网站主页构成图。
页面布局可以根据网站的内容来设计，一般应让访问者浏览网站时感觉简洁有序、方便。
二、制作主页
主页的页面布局可用表格来设计，“网络世界”网站的表格布局，如图所示
制作方法如下:
1.打开主页。启动 Sharepoint Designer，打开已建好的站点，如 D lixue，双击主页“ default.htm”，此时主页处于编辑状态。
2.设置网页大小。在菜单栏中选择“视图”→“网页大小”→“800×600”。
日积月累
网页大小可根据屏幕分辨率进行设置。
不同浏览者的屏幕分辨率会有所不同
为了达到最佳的网页浏览效果，网页大小一般设置为略小于屏幕分辯率的大小
如800×600或者960×800等
3.插入表格
单击菜单栏中的“表格”→“插入表格”，在弹出的“插入表格”对话框中设置表格的行列数，如5x1(如图)
单击“确定”，得到如图所示的效果图。
4.根据布局要求，对规划表格进行拆分
设置相应的行数或列数，效果如图所示。
5.适当改变表格宽度和高度，让它布满页面，主页布局设置基本完成。
亲身体验
设计网站主页草图，注明标题栏目、分栏目的位置，然后利用表格进行布局。
阅读材料
表格运用技巧二则
绘制表格时，有时可能会因为同一行插入不同尺寸的图片，影响了并列的其他内容的位置，使网页版面出现混乱。这时，就需要掌握一些表格的处理技巧。
技巧一:表格嵌套
表格嵌套就是在原有单元格内再插入表格，使其容納的文字或图片等元素不会影响其他单元格中的元素位置。
例如，在第二行插入1×5表格，可以采用嵌套表格来完成，如图所示。
仔细观察第一行导航栏和第二行导航栏，它们有什么不同呢?
技巧二:布局表格
使用 Sharepoint Designer2007的 “布局表格”功能，可以帮助用户轻松地设计版面布局。
新建一个网页或者打开一个空白网页，然后选择“表格”→“布局表格系统将自动打开“布局表格”任务窗格如图所示。
在“布局表格”任务窗格的“表格布局”列表中，系统提供了12种表格布局的样式，如图所示。
单击某种表格布局样式即可选定该样式。
课堂练习
在网站主页中插入图片、输入文字
通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。
学生动手实践操作，学生小组间讨论，共同完成任务。
通过教师的讲解，以小组合作的方式，开展探讨交流，完成任务。
学生动手实践操作，学生小组间讨论，共同完成任务。
学生小组间讨论，共同完成任务，并分组汇报。
通过小组合作，加强学生组内团结、共同完成任务，
培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。
培养学生组间合作能力，并且炼动手能力
培养学生动手操作能力，并且锻炼学生的语言组织能力和表达的能力。
培养学生独立完成练习的能力。
课堂小结
分小组总结归纳，教师补充。
各组汇报总结，其他小组成员做补充。
锻炼学生的总结能力，逻辑思维、语言表达能力。
布置作业
新建个人网站的主页
板书
一、规划主页页面布局
二、制作主页
课件22张PPT。信息技术浙教版 八年级上第十二课 用表格为网页布局新知导入 同学们先观察一下上面两个网站的图片，看看同学们更喜欢哪种布局!第一个页面凌乱，摆放杂乱，而第二个布局，页面工整，文本图片具有一定的规律。有什么方法可以达到整齐的页面效果呢?需要在网页中插入表格。新知导入新知讲解 网站除了内容丰富、视觉冲击力强，还需要有一个安排合理的页面布局，如图所示是常见的网站主页构成图。一、规划主页页面布局居中型半包围型主题突出型导航栏型新知导入新知导入二、制作主页主页的页面布局可用表格来设计，“网络世界”网站的表格布局，如图所示制作方法如下:1.打开主页。启动 Sharepoint Designer，打开已建好的站点，如 D lixue，双击主页“ default.htm”，此时主页处于编辑状态。新知讲解日积月累网页大小可根据屏幕分辨率进行设置。不同浏览者的屏幕分辨率会有所不同为了达到最佳的网页浏览效果，网页大小一般设置为略小于屏幕分辯率的大小如800×600或者960×800等新知讲解3.插入表格。单击菜单栏中的“表格”→“插入表格”，在弹出的“插入表格”对话框中设置表格的行列数，如5x1(如图)单击“确定”，得到如图所示的效果图。新知讲解4.根据布局要求，对规划表格进行拆分选中第二行，在菜单栏中选择“表格”→“修改”→“拆分单元格”，在“拆分单元格”对话框中(如图)设置相应的行数或列数，效果如图所示。新知讲解新知讲解亲身体验新知讲解阅读材料表格运用技巧二则新知讲解技巧一:表格嵌套表格嵌套就是在原有单元格内再插入表格，使其容納的文字或图片等元素不会影响其他单元格中的元素位置。例如，在第二行插入1×5表格，可以采用嵌套表格来完成，如图所示。新知讲解仔细观察第一行导航栏和第二行导航栏，它们有什么不同呢?新知讲解技巧二:布局表格使用 Sharepoint Designer2007的 “布局表格”功能，可以帮助用户轻松地设计版面布局。新建一个网页或者打开一个空白网页，然后选择“表格”→“布局表格系统将自动打开“布局表格”任务窗格如图所示。新知导入在“布局表格”任务窗格的“表格布局”列表中，系统提供了12种表格布局的样式，如图所示。单击某种表格布局样式即可选定该样式。课堂练习课堂小结总结本节课所学内容板书设计一、规划主页页面布局
二、制作主页新建个人网站的主页作业布置谢谢21世纪教育网（www.21cnjy.com) 中小学教育资源网站 有大把高质量资料？一线教师？一线教研员？
欢迎加入21世纪教育网教师合作团队！！月薪过万不是梦！！
详情请看：
https://www.21cnjy.com/help/help_extract.php
