8A 第12课 用表格为网页布局

一、教学目标

       知识与技能目标:通过分析不同的页面布局,理解布局在版面设计中的重要性。利用表格规划网页布局,掌握表格的插入、设置等操作方法。

       过程与方法目标:通过规划页面布局,初步掌握运用表格对网页上的对象进行合理排版,完成网站标题和栏目的布局,逐步提高网页设计能力。

       情感态度价值观目标:通过这节课,让学生感受到自己动手的乐趣,让学生明白,有很多事情是可以用自己的知识去实现的。

二、教学重难点

     教学重点:用表格布局网页;

     教学难点:灵活掌握排列表格和设置表格属性的方法。

三、教学准备

网络教室,示例网站及相应的素材。

四、教学过程设计

      一、导入

         展示2张素材相同布局不同的网页。

         提问

        ①:哪一张比较美观?对照课本图12-1至12-4常见网站主页构成图,它属于哪种类型?

        ②:它是怎么布局的?

          教师分析网页中所隐含的表格结构,总结用表格为网页布局的重要性。

        设计意图:学生观察和比较两张网页,个别回答问题。通过提问、引导、比较等方法,培养学生辨别表格布局网页页面的好处。

          二、新授

        (一)分析表格布局

         提问:这张网页是用几行几列的表格布局的?

         教师展示表格结构。

         展示“网络世界”网站主页,让学生分析表格结构。

   设计意图:分析网页中所隐含的表格结构,并回答。

       通过提问、比较、学生回答,教师示范演示等方法,提高学生如何利用表格布局网页页面的能力。

        (二)设置网页大小

         布置任务一:打开自己的网站主页,设置网页大小。

         一起学习“日积月累”。

   学生活动:学生读读“日积月累”,查找一下自己屏幕的分辨率。

       (三)插入及编辑表格并完成页面布局

       布置任务二:根据自己的网站主页设计,插入表格。

       个别学生演示插入表格。

       布置任务三:对表格进行拆分,调整单元格。

       教师演示,并作页面布局。

       设计意图:学生在制作过程中的合作、讨论、展示、交流、评价及归纳等方法,培养学生的思考能力、语言组织能力、语言表达能力、归纳能力和审美能力。

     完成之前操作的学生确定标题栏目和分栏目,并在主页中插入图片和文字。

设计意图:部分学生完成,提高任务让一部分学生体会整体网页制作的过程。

      三、课堂总结

      展示个别学生的成果,并分析成功和欠缺的地方。

设计意图:学生分析,教师总结。培养学生重视学习结果质量,并从中获得成功的体验。

五、教后反思

       如何将文字、图像和网页各元素合理、恰当的排放在网页中,使页面易读和美观,是初学者建设网站要考虑的问题。观察一些站点,不难发现,很多网页都是使用表格来组织的。利用表格来布局页面,对于初学者来说易上手,因为它以可视化的形式呈现信息,比较直观,对页面元素定位也比较方便。学生制作的网站最终效果如何,取决于页面布局的合理性,因此,本课对于网页制作有着十分重要的作用。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,503评论 25 709
  • 用两张图告诉你,为什么你的 App 会卡顿? - Android - 掘金 Cover 有什么料? 从这篇文章中你...
    hw1212阅读 13,116评论 2 59
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,862评论 1 92
  • 感恩今天的早晨在我跑步的时侯没下雨,氧气十足,很舒服。谢谢你,谢谢你,谢谢你。 感恩今天早上我这么冷能坚持跑步,加...
    向好生长阅读 263评论 0 0
  • 回家的意义是什么?或许有些人认为,这个问题是多余的,回家还要诠释什么意义吗?或许也有些认为,如歌词“找点时间,找点...
    听雨潇轩阅读 554评论 0 1