信息技术:第十二课用表格为网页布局.docx
浙教版信息技术八年级上第十二课用表格为网页布局教学设计课题用表格为网页布局单元第三单元学科信息技术年级八年级学习目标知识目标:了解常见的网页版式技能目标:会用表格进行网页的规划和布局 情感目标:学会欣赏网页,体验创作的乐趣。重点网页版式的设计和表格的建立。难点设计出好的网页布局。教学过程教学环节教师活动学生活动设计意图导入新课同学们先观察一下上面两个网站的图片,看看 同学们更喜欢哪种布局!第一个页面凌乱,摆放杂 乱,而第二个布局,页面工整,文本图片具有一定 的规律。有什么方法可以到达整齐的页面效果呢? 需要在网页中插入表格。思考激发学生学习 兴趣并快速进入 学习状态讲授新课制作网页时经常采用表格来规划页面的布局, 便于对页面.上的文字、图片、标题、动画等对象的 位置进行合理定位。一、规划主页页面布局网站除了内容丰富、视觉冲击力强,还需要有 一个安排合理的页面布局,如下图是常见的网站 主页构成图。页面布局可以根据网站的内容来设计,一般应 让访问者浏览网站时感觉简洁有序、方便。二、制作主页主页的页面布局可用表格来设计,“网络世界” 网站的表格布局,如下图制作方法如下:1 .翻开主页。启动Sharepoint Designer,翻开 己建好的站点,如 D lixue ,双击主页 “ default.htm”,此时主页处于编辑状态。2 .设置网页大小。在菜单栏中选择“视图”一 “网页大小” “800 X 600”。通过教师的讲 解,以小组合 作的方式,开 展探讨交流, 完成任务。通过小组合作, 加强学生组内团 结、共同完成任 务,日积月累网页大小可根据屏幕分辨率进行设置。不同浏览者的屏幕分辨率会有所不同为了到达最正确的网页浏览效果,网页大小i般 设置为略小于屏幕分辩率的大小如 80() X 600 或者 960 X 800 等3 .插入表格单击菜单栏中的“表格”一“插入表格”,在 弹出的“插入表格”对话框中设置表格的行列数, 如5x1(如图)单击“确定”,得到如下图的效果图。4 .根据布局要求,对规划表格进行拆分设置相应的行数或列数,效果如下图。5 .适当改变表格宽度和高度,让它布满页面,学生动手实践培养学生动手操主页布局设置基本完成。操作,学生小作能力,并且锻亲身体验组间讨论,共炼学生的语言组同完成任务。织能力和表达的设计网站主页草图,注明标题栏目、分栏目的能力。位置,然后利用表格进行布局。阅读材料表格运用技巧二那么通过教师的讲绘制表格时,有时可能会因为同一行插入不同解,以小组合培养学生组间合作的方式,开作能力,并且炼尺寸的图片,影响了并列的其他内容的位置,使网展探讨交流,动手能力页版面出现混乱。这时,就需要掌握一些表格的处完成任务。理技巧。技巧一:表格嵌套表格嵌套就是在原有单元格内再插入表格,使 其容纳的文字或图片等元素不会影响其他单元格 中的元素位置。学生动手实践培养学生动手操例如,在第二行插入1X5表格,可以采用嵌操作,学生小作能力,并且锻组间讨论,共炼学生的语言组套表格来完成,如下图。同完成任务。织能力和表达的仔细观察第一行导航栏和第二行导航栏,它们能力。有什么不同呢?技巧二:布局表格使用 Sharepoint Designer2007 Kj "布局表格” 功能,可以帮助用户轻松地设计版面布局。新建一个网页或者翻开一个空白网页,然后选 择“表格”一“布局表格系统将自动翻开“布局表 格”任务窗格如下图。在“布局表格”任务窗格的“表格布局”列表 中,系统提供了 12种表格布局的样式,如下图。单击某种表格布局样式即可选定该样式。课堂练习在网站主页中插入图片、输入文字学生小组间讨 论,共同完成 任务,并分组 汇报.培养学生独立完 成练习的能力。课堂小结分小组总结归纳,教师补充。各组汇报总 结,其他小组 成员做补充。锻炼学生的总结 能力,逻辑思维、 语言表达能力。布置作业新建个人网站的主页板书一、规划主页页面布局二、制作主页版权声明21世纪教育网 (以下简称“本网站”)系属深圳市二一教育 股份(以下简称“本公司”)旗下网站,为维护本公司合法权益,现依 据相关法律法规作出如下郑重声明:一、本网站上所有原创内容,由本公司依据相关法律法规,安排专项经费, 运营规划,组织名校名师创作完成,著作权归属本公司所有。二、经由网站用户上传至本网站的试卷、教案、课件、学案等内容,由本公 司独家享有信息网络传播权,其作品仅代表作者本人观点,本网站不保证其内容 的有效性,凡因本作品引发的任何法律纠纷,均由上传用户承当法律责任,本网 站仅有义务协助司法机关了解事实情况。三、任何个人、企事业单位(含教育网站)或者其他组织,未经本公司许可, 不得使用本网站任何作品及作品的组成局部(包括但不限于复制、发行、表演、 广播、信息网络传播、改编、汇编、翻译等方式),一旦发现侵权,本公司将联 合司法机关获取相关用户信息并要求侵权者承当相关法律责任。四、一旦发现侵犯本网站作品著作权的行为,欢迎予以举报。举报 :4006379991举报信息一经核实,本公司将依法追究侵权人法律责任!五、本公司将结合广大用户和网友的举报,联合全国各地文化执法机关和相 关司法机关严厉打击侵权盗版行为,依法追究侵权人的民事、行政和刑事责任!特此声明!深圳市二一教育股份