应用表格布局网页结构.docVIP

《应用表格布局网页结构》教学实录 ［ 作者：阜宁县明达中学??姜秀菊????来源：本站原创????点击数：1078????更新时间：2010-6-12????文章录入：yc_chl ］ ??? 知识与技能目标：　　1、了解表格在网页设计中的作用。　　2、掌握网页中表格的制作方法、表格属性的设置方法以及单元格的修饰与编辑方法，能够在单元格中正确插入文字和图片。　　3、区分表格属性和单元格属性，并掌握属性的设置。　　4、能够根据网页设计内容，正确布局表格的结构，掌握表格嵌套的设计方法。　　过程与方法目标：　　1、利用对比学习，形成知识迁移的能力　　2、通过用表格布局网页，进一步理解表格的作用、功能　　3、通过对比学习与自主探究，了解并掌握软件学习的一般方法及规律，提升自主学习能力　　4、通过任务驱动学会　　情感态度与价值观目标：　　1、通过对用表格布局网页的学习，增强审美观，提高对学习网页制作的兴趣。　　2、通过“保护动物”网站的制作，激发学生关爱动物、保护动物的责任感，从而进一步树立共同改善人类生存环境的意识。　　教学重点与难点：　　1、重点。　　（1）了解表格在网页设计中的重要作用。　　（2）掌握插入、编辑表格的方法及表格的属性设置方法。　　（3）掌握单元格的修饰属性的设置。　　2、难点。　　表格的嵌套在网页设计的重要作用。　　教学准备：各自制作的站点文件夹，整理、归类相关素材并按要求摆放。　　教学过程 　　一、导入：　　播放歌曲“一个真实的故事”，激发学生兴趣，与学生互动。　　师：这首歌里讲的是什么样的故事呢？　　生回答。一个姑娘救丹顶鹤的故事　　师：丹顶鹤，它是一种珍稀动物，同学们还知道哪些珍稀动物呢？是从哪里知道这些珍稀动物的呢？　　生抢答。扬子鳄，大鲵，金丝猴，丹顶鹤……　　师：很好，同学们知道的可真多啊，是从哪里知道这些珍稀动物的呢？　　生回答：书，报纸，网络……　　师：?同学们知道，但是很多人不知道呢，更不知道人与动物要和谐相处，我们是不是有必要做些宣传。为保护珍稀动物尽一份力？　　生：?对　　师：??但是这么多珍稀动物在网页上应该如何分布呢？　　展示：两张素材相同布局不同的网页（动物——人类的朋友）。（然后将两个页面并排显示在投影上）　　　　提问：同学们，请大家比较一下这两个网页，相互之间可以讨论一下，那一个网页布局更合?? 理，哪张较美观？较美观的那张网页是怎么布局的？（请学生回答，请坐。）　　【设计意图】展示作品，激发学生兴趣；引导学生发现问题，并学会分析问题。　　观察和比较两张素材相同布局不同的网页，分析布局网页页面的元素。这两个网页，通过比较会发现：一个是页面工整，文本、图片摆放对称且有一定规律，使用表格布局，但表格边框隐藏（看不出表格痕迹）；一个是页面凌乱，有图有文，摆放杂乱，提出问题，有什么办法可以达到第一个页面的效果？　　二、新授：　　1、分析表格结构布局　　展示一些由表格布局的网页，引导学生分析其表格结构，自然过渡到书本例子（biaoge.htm），分析结构，得出表格的布局（几行几列，哪些行做了哪些处理）。　　（1）归纳：较美观的一组是利用表格来布局的。　　提问：谁能看出这张网页中所隐含的表格是几行几列的？ 　　展示：分析网页中所隐含的表格结构。?? 　　（2）学生讨论、交流，FrontPage中表格的插入和编辑与Word中的表格操作雷同，教师无需讲解，引导学生知识迁移。 　　任务一、学生操作：插入10行一列的表格。　　2、编辑表格并完成页面布局 　　演示：进行插入表格和编辑表格（合并、拆分单元格）　　任务二、学生观察示范，学生与教师进行合并、拆分单元格的实践操作。　　3、充实网页内容：　　任务三、在表格中插入图片、输入文字　　展示学生作品，引导学生发现表格页面中存在的问题，教师提出需要做哪些修改？ 　　学生回答：图片的大小，对齐方式，边框线、背景的设置。 　　4、 表格嵌套　　生：图片调整后，其它单元格随之变化，如何解决这个问题？　　师：这就要用到表格的“嵌套”。　　【设计意图】这是本节课的重点，布局主要就是通过插入表格、表格嵌套、拆分单元格来实现的。让学生动手制作，体验表格的作用；以任务驱动形式自主学习，然后让学生自己发现问题，并解决问题，推动学生的探索意识和交流能力。　　教师讲解，表格嵌套的含义，并演示。　　任务四：表格嵌套，把第一和第二行的单元格各自合并后，分别插入表格。　　5、 调整表格属性，美化页面　　教师演示：表格、单元格属性的调整。 　　任务五：表格属性以及单元格属性的编辑。调整图片大小、位置，设置单元格与表格属性。??