第九课《框架布局网页》教案 2020—2021学年冀教版信息技术八年级全一册

第九课 框架布局网页 教学目标： （1） 掌握框架网页的概念及用途。 （2） 掌握框架网页的创建、制作、编辑与保存。 （3） 能够在浏览器中预览网页，了解框架的拆分方法。 （4） 初步掌握将框架结构与表格布局结合使用来制作网页。教学重点： 框架网页的概念、用途，创建、编辑、保存与拆分框架网页的方法。教学难点： 创建、编辑框架网页的方法。 教学过程： 导入：浏览器窗口被分割成了 3 个区域，类似这样的网页被称为框架结构网页。这种结构的特点在于能够将浏览器页面分割成若干个区域，各个区域既相互独立，又保持一定联系，且部分区域内容相对固定。 （图一）“人与动物”框架网页 利用框架结构设计如图一所示的“人与动物”网页： 在网页的上部显示“人与动物”标题与宣传语。 在网页的左下侧制作四个悬停按钮。在网页的右下侧显示该页的内容。1．创建框架结构网页 任务一：请结合“实践指导一”，创建框架网页。实践指导一： Step 1 打开站点“dongwu”。 Step 2 创建框架网页。执行“文件→新建→网页”命令，在弹出的“新建”对话框中单击“框架网页”标签，选择“横幅和目录”样式。如图二所示。 （图二） 横幅和目录 单击“确定”按钮，窗口出现横幅和目录结构的框架，如图三所示。 （图三） 框架页面 Step 3 保存网页为“kuangjia.htm”。 注：记录框架结构需要一个独立的页面，此外，框架结构中的每个框都是一个独立的网页文件。通过每个网页中的“新建网页”按钮、“设置初始网页”按钮进行选择。 2. 新建或指定各框中的初始页面 任务二：结合“实践指导二”，制作 top 框架页面、 left 框架页面和 main 框架页面。 在横幅和目录的框架网页中，一般将三个框分别命名为 top 、 left 、 main/right （如图三），其中 top 框用来显示本页主题或横幅广告， left 框用来显示超级链接的目录， main 框用来显示与目录对应的内容。 实践指导二： Step 1 制作 top 框架页面。 单击 top 框中的“新建网页”按钮，top 框中会出现一个空白页面。 在空白页面中插入一张 1 行 2 列的表格，设置网页属性（在“边距”标签中，分别选中“指定上边距”“指定左边距”复选框，并将相应的参数调整为“0”），将左、右单元格的大小调整合适，并将表格边框粗细调整为“0”。