设计网站的网页布局2.docVIP

主题3 设计网站的网页布局 主备人：范少君 课 题：设计网站的网页布局 【课 时】2课时 【教学重点】 插入表格和更改表格属性。 【教学难点】 让学生灵活掌握排列表格和设置表格属性的方法。 【课 型】新授课 【教学方法】任务驱动、师生互动、个别指导 、广播演示 【教学过程】 （一-）出示教学目标 1、理解用表格布局主页的作用。 2、掌握在网页中插入表格进行排版。 3、学生设置表格的属性。 2、复习回顾，导入新课 我们已经给大家分好了组，下面我们比赛一下们班那一组的信息技术水平高？ 学生：……… 教师：自己说了都不算，这节课我们就来较量一下。怎么样？先从第一个环节拼图游戏开始。 邀请两位同学（男生和女生）上来，分别选择其中一个，帮我把网页上图片的位置调整好。一位没调整好，另一位调整好了。 先采访一下失败的原因，你觉得问题出在哪里，是不是按照Word中的方法在操作，那你觉得在Word中图片、文字可以怎么样，而在FrontPage中呢？ 采访另一个，发表一下你的成功感言，你觉得你为什么会成功，是网页中的什么帮了你的忙？网页里面有表格。也说是说在网页中要给图片定位，就必须要用到表格，表格在网页中起到了一个怎么样的作用——可以定位对象，即可以为网页布局，那怎样操作大家想不想学，今天这节课我们一起来学习第十五课《用表格为网页布局》。 3、学生自主学习，教师巡视指导 探索新知 （一）设计制作网页布局 参考课本45页 任务1 为“足迹·甘肃”网站设计网站布局。 1、分析不同网页的布局特点 分析表2-2中网页布局，了解网站主页、某个栏目首页和呈现具体信息的底层页面布局的共同特点和区别，将你总结的网页布局特点填写在表格内。 学生阅读自学、分析、讨论。 一点通：（1）体现“以用户为中心”。 （2）站内风格基本一致。 （3）页面协调，便于阅读。 2、了解网页布局的基本要素 （1）每个网页上必备的基本信息。每个网页上通常都应该包含网站的名称、导航栏和版权版权信息而且位置固定。 （2）网页主要信息的布局方法。（纵横分割式） （3）网页风格基本一致。 3、用FrontpPage 2003布局表格，设计特作网站主页布局 （为了确保图文混排的网页，不因屏幕分辨率的改变而改变，网页中常用表格来控制图文位置） 操作步骤 P47 步骤一：打开站点 （1）在FrontPge 2003中，执行“插入”“表格”，打开“我的网站”站点。 （2）双击文件夹index.htm 步骤二：设置网页标题“足迹?甘肃”。 步骤三：绘制主页页面布局。 （1）打开“表格”菜单，执行“插入”———“表格”命令，打开“插入表格”对话框。 （2）在“插入”表格对话框中，依据布局需要进行设置（示例：6行3列），如图 设定表格边框粗细为0，是为了在浏览网页时隐去表格线。 （3）单击“确定”按钮。屏幕显示如图所示。 （4）合并单元格。 （5）完成单元格，拖动边线来调整单元格大小。 4、教师检查学生自学效果、点拨 1） 提出问题 （1）学生自学几分钟后回答，各小组讨论，组长组织纠错 （2）学生对没讨论出来的问题提出来大家讨论。给教师说没解决的问题 2、教师解疑 （1）边广播演示，边解决问题。 （2）纠正错误、发扬优点、学生再做一做。 5、课堂作业 P44“探索与实践” 6、小结 　师：请同学们结合课本学习任务的操作演练，说一说在本节课中你都学到了哪些知识，有了哪些收获？ 1、了解用表格布局主页的作用。 2、网页中插入表格如何进行排版。 3、学会用FrontPage 2003表格如何进行页面布局。 【教后记录】 2