第十二课 用表格为网页布局 教学设计
1教学目标
(一)知识与技能目标 1.知道网页构图布局的意义、理解用表格排版网页的作用; 2.学会在网页中插入表格进行排版; 3.学会设置表格的属性。 (二)过程与方法目标 1.通过实例引导,分析不同的页面布局,理解网页构图布局的意义; 2.通过对比试验,了解表格在网页制作中的作用; 3.通过任务驱动,掌握表格的插入、设置等操作方法。 (三)情感态度与价值观 1.对网页进行合理布局,可以提高学生的艺术修养和审美情趣; 2.学生通过对自己的网站首页进行布局设计,更是对学生提供了展示个性和创意的机会,让学生感受成功的乐趣。
2重点难点
1.教学重点:理解网页构图布局的意义,掌握插入表格和更改表格属性; 2.教学难点:灵活掌握排列表格和设置表格属性。
3教学准备
1.空白纸、笔 2.PPT课件 3.帮助视频
4教学过程
活动1【导入】比一比，导入新课
师:上节课,我们已经将自己的小窝搭建好了,今天我们就要开始装修我们的门面了。在这之前,我们先来看一下以下两个网页。(展示两个不同的网页)请问同学们,你们会更喜欢哪一个? 生:仔细观看网页,并回答。 师:请个别学生回答,并问为什么? 【设计意图】通过两个网页(布局杂乱、布局合理清晰)的对比,引出页面合理布局的重要性。
活动2【讲授】新课学习——规划主页页面布局
1、看一看,认识布局类型 师:下面请同学们仔细看一看这张网页,观察一下,这张网页是如何布局的? 生:观察并回答(上面是标题栏,接着是导航栏,中间是网页内容,最下面是网站版权说明) 师:总结(像这种类型的布局结构,我们称之为“导航栏型”) 师:我们再来看看下面的几个网页,分析一下它们各是属于哪种类型的?(居中型、半包围型和主题突出型) 2、画一画,绘制页面布局 局中型、半包围型、主题突出型和导航栏型是平时常见的四种网页布局类型,那我们在设计网页时,是不是一定要按照这四种布局呢?当然不是,网页的布局设计是没有限定规则的,只要配合网站内容,让浏览者感觉简洁、有序和方便就可以了。如果在这基础上, 能够揭示主题、富有创意就更完美了! 【任务一】根据自己的想法,在白纸上为自己的网站主页绘制一个布局草图,注明标题栏、导航栏、网页内容、版权信息栏等位置。 反馈:展示几个学生的草图。 3、想一想,转化草图布局 选择一个学生的草图,并画在黑板上。 问:如何在网页中实现这个布局呢? 在主页中插入表格,通过表格能实现网页中元素的定位、排版功能。使得页面布局整齐、美观。使用表格布局是制作网页是经常采用的方法。 问:那我们可以将黑板上这个布局图设计成几行几列的表格呢? 生:知识迁移。回顾word中学习过关于表格的知识,回答问题。
活动3【练习】新课学习——制作主页
1、打开主页,插入表格 上节课我们已经建好了网站的站点和主页,现在请同学们用Share Point软件打开我们的网站。(帮助视频) 【知识链接】为了适应不同浏览者的屏幕分辨率,在该软件中实现最佳的编辑效果,网页一般设置为略小于屏幕分辨率的大小,在这里,我们一般保持默认状态就可以了。 【任务二】根据布局草图,在主页中插入相应行列的表格。 (提示)操作步骤和在word中插入方法一致。 请一位同学上台演示操作过程。 2、修改表格 观察插入的表格,发现与我们实际需要的表格有出入,从而导入需要合并或者拆分单元格。(帮助视频) 【任务三】根据布局要求,对表格进行合并或拆分,并将标题、导航栏内容、版权信息等文字填充到单元格中。完成后,尝试调整表格单元格的大小,便于在浏览器中浏览。 3、保存网页,提交网站 完成所有任务的同学,请将网站提交到学习平台。(帮助视频) 4、拓展任务 观察你的导航栏和老师的导航栏有什么区别?你会发现老师的导航栏位于这一行的最中间,这是如何实现的呢? 勇于挑战高难度任务的同学们,你们的机会来了,尝试在表格中实现这个功能,可参考课本P47页《阅读材料》中的“技巧一:表格嵌套”。
活动4【活动】作品展示与点评
展示学生作品,由学生点评和教师点评。
活动5【活动】课堂总结
这节课同学们学会了什么?(学生小结,教师概括总结)
课件16张PPT。
网页一 网页二
观看以下两个网页后，说一说你更喜欢哪一个，为什么？
比一比第十二课 用表格为网页布局导航栏型居中型半包围型主题突出型看一看 网页的布局设计是没有限定规则的，只要配合网站内容，让浏览者感觉简洁、有序、美观就可以了。如果在这基础上，能够揭示主题、富有创意就更完美了。页面布局 【任务一】根据自己的想法，在白纸上为自己的网站主页绘制一个布局草图，并注明标题栏、导航栏、网页内容、版权说明栏等位置。画一画Share Point
Designer用表格为网页布局 在主页中插入表格，通过表格能实现网页中元素的定位、排版功能，使得页面布局整齐、美观。表格分析表格插入表格 【任务二】打开上节课建好的站点和主页，根据自己的布局草图，在主页中插入相应行列的表格。
合并拆分修改表格 【任务三】根据布局要求，对表格进行合并或拆分，并结合自己的网站规划书，将网站的主题、导航栏栏目标题以及自己的版权信息等填充到单元格中，并调整表格大小。拓展任务 请观察你的导航栏和老师的导航栏有什么区别？这是如何实现的呢？
勇于挑战高难度任务的同学们，你们的机会来了，请尝试在表格中实现这个功能，可参考课本P47页《阅读材料》中的“技巧一：表格嵌套”。
课堂总结 通过这节课的学习，你学到了什么？ 为了设计出简洁而又精美的网页，我们需要设计、排版、布局。
在日常生活中，我们同样要有规划布局，这样才能够提高效率，更快更好的达到目标。
