10-框架网页的制作(第16周).docVIP

教学设计实例 信息技术课堂教学设计 教学内 容 框架网页的制作 学 校 北京市民族学校 授课教师 李 春 燕 日期 2005-4-22 课 型 新 授 课 授课班级 初二4班 课时 1 教学目 标 通过观察和比较，体会框架结构网页的优点； 通过操作和实践练习，掌握框架结构网页的制作步骤和方法； 通过探索学习和实践练习，掌握框架网页在网页制作中的综合应用； 通过任务的完成，体验学习成功的乐趣，提高学生学习的兴趣； 教学重 点 制作框架结构的网页 教学难 点 理解每一个框架窗口是一个独立的网页 教学用 具 计算机 多媒体 局域网 教 学方 法 和 设 计 框架网页的制作属于整体布局的设计。它的制作步骤简单，但是理解和应用确比较难。为了避免学生在学习过程中生搬硬套，强行记忆步骤的现象，我先利用大家共同都有的网站“民族文化”讲述了框架网页的制作步骤，用了电子课件和实物展示两种方法，详细讲述了框架网页的含义。然后让学生把框架网页应用到自己的网站制作中。学生在理解的基础上进行应用，既能增强学生的实践能力，又能激发他们的创新思维。 主要使用教学方法：以讲述法、任务驱动法为主，引导学生自主学习、自主探索。 时 间 教 学 过 程 教 师 活 动 学 生 活 动 4 22 (3) (8) (11) 12 7 引入新课： 展示两个内容相同但链接效果不同的网页，让学生观察。 提问：这两个网页的链接效果有什么不同？（引导：从新网页打开的方式来区分）。 对于第一个网页，点击链接之后，新的页面完全覆盖了主页，要点击另一个网页的链接时，必须通过“后退”按钮返回到主页，再点击另外一个网页的链接。在第二个网页中，所链接的网页被打开后出现在右面的方框中，不覆盖上面框架中的链接按钮。 （引出教学内容）这种效果就时通过FrontPage提供的框架功能来实现的。框架结构使得我们的整个网页结构清晰明了，而且它的链接是自动生成的，制作和查看都很方便。今天，我们就共同来学习框架网页的制作。 讲授新课： 1、什么是框架网页？ 框架网页，就是通过框架将一个网页拆分成几个相互独立又保持联系的网页窗口，每个框架网页都与一个网页文件相对应。 举例：在“北京欢迎您”这个网页中，有两个框架窗口，这两个框架窗口又各是一个独立的网页。（可以从制作过程中慢慢体会） 2、框架网页的制作 框架的结构分布又很多种，要确定使用哪种结构的框架，就首先对要制作的网页进行整体的布局设计。一般情况下，我们都把链接文字放在一个窗口，把所链接的网页放在另外一个窗口。以我们共同制作的“民族文化”这个网页来说，我们可以把网页结构规划为： 设计好结构以后，从“文件”菜单的“新建”项中选择“网页”，弹出“新建”对话框，选择“框架网页”选项，从窗口中选择我们需要的框架结构（从预览窗口中观察），然后单击“确定”按钮。 新建的框架网页被分成了上下两个框架窗口，而这两个框架窗口又各是一个独立的网页文件。每一个窗口中都有两个按钮，点击“设置初始网页”按钮，可以选择已经存在的网页，单击“新建网页”按钮，则可以新建一个空白页面。 设置“目录”页为上面窗口的初始页面，在下面的窗口中新建一个空白网页。 演示课件，讲述“两个窗口的独立”。 实践活动1：新建一个框架网页，设置“目录”网页为上面的框架窗口中的初始网页，在下面的窗口中新建一个空白网页。 3、保存框架网页 对于每一个新建的网页，我们应该指定一个路径，对它进行保存。现在，我们一起来把我们刚才新建的框架网页保存起来。 步骤：单击“开始”菜单中的“保存文件”选项，在“另存为”对话框中，注意右侧框架预览图中呈蓝色的窗口，这代表当前正在保存的文件。输入文件名“yemian”，单击“保存”按钮后，蓝框出现在整个框架页面的四周，输入文件名“kuangjia”，单击“保存”。 实践活动2：保存刚才新建的网页，给每一个网页命名。 提问：加上整个框架网页，当前显示出几个网页？为什么只提示保存两个？ 演示实物，进一步讲述两个框架窗口的独立。同时从预览模式下观察链接所打开的网页，说明两个框架窗口中网页文件的联系。 4、介绍框架属性对话框 如果你对框架的结构不满意，还可以进行调整。根据大家的经验，我们应该从什么地方找到调整框架属性的对话框呢？（提示：你在插入一个表格以后，要想改变表格的边框粗细，你应该怎样找到“表格属性”对话框？） 请同学们自己找找看，能不能找到“框架属性”对话框？ 在框架窗口的空白处右键单击，从弹出的快捷菜单中选择“框架属性”，弹出框架属性对话框（如图）。 初始网页：如果在设置初始网页时不小心选错了，单击右边的“浏览”按钮，可以重新选择正确的初始网页。 框架大小：输入数值改变框架的宽度或高度。 边 距：设置文字与边