第十二课 用表格为网页布局 课件+教案

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