中职高二下高教版Dreamweaver网页制作项目四 任务一 创建框架集教案

任务一 创建框架集 一、提出任务 1．任务目标 创建“心情日记”页面的框架结构。 2. 解决的问题 本任务通过在“心情日记”页面创建框架集并设置属性，学习创建框架集以及设置框架集和框架属性的知识。 3. 本任务所涉及原有知识要点 完成本任务所涉及原有知识要点有：创建网页、在网页中添加内容、添加超链接等。 二、教学目标 1. 知识目标 ⑴ 了解框架的含义。 ⑵ 掌握框架集的创建。 ⑶ 掌握框架的选择。 ⑷ 掌握框架集的选择。 ⑸ 掌握框架属性设置。 ⑹ 掌握框架集属性设置。 2. 能力目标 能够利用框架布局页面，设置框架属性。 3. 情感目标 培养学生不怕困难、积极探索的优良作风，增强学生审美能力，给学生以成功的体验。 三、教学分析与准备 1. 教学重点 ⑴ 框架的含义。 ⑵ 创建框架集。 ⑶ 设置框架属性。 ⑷ 设置框架集属性 2．教学难点 ⑴ 显示框架边框。 ⑵ 设定框架的滚动格式。 ⑶ 框架的边框样式。 3. 教学方法 任务驱动学习和协作学习、探究学习相结合。 4. 课时安排 4课时。 5. 教学环境 多媒体网络教室。 四、教学过程（组织课堂、复习知识、教师引领完成任务占1. 5课时；举一反三占2.5课时。） 教学环节及手段 教师活动 学生活动 组织课堂 复习知识 任务流程 导入任务 分析任务 完成任务 教师结合PPT演示文稿和实际操作讲解。 边讲边做，一定要将目录结构讲清楚 知识拓展 知识总结 举一反三 任务目标 启发思路 完成任务 总结评价 布置作业 集中学生注意力，准备上课。 通过学生总结考察学生对布局页面知识和美化页面的了解情况。 1．网页常见的几种布局？ 2．布局网页的方法？ ３．如何新建和使用css样式美化页面？ 教师总结，通过前面的学习已经掌握了网页的基本概念以及制作网页的基本知识，包括使用css样式美化网页、使用表格进行页面布局、添加链接等。 本任务学习如何在同一个网页中显示更多的内容，即在一个窗口中显示多个页面，要完成的就是创建“心情日记”页面的框架结构、使用链接控制框架内容。（同时演示任务） 提出任务：创建“心情日记”页面的框架结构。 依据“心情日记”效果图，页面分为上部、左下、右下三个部分，每个部分可以用一个框架页来实现。上部框架页用于放置标题“心情日记”和图像；左下部框架页用于放置“个人日记”等五个导航链接，每个导航链接一个页面；右下部框架页用于显示与导航链接相对应的页面。 下面讲解完成任务的步骤。 1．创建本单元的目录结构 打开要完成的任务，引导学生分析本任务、创建目录，拷贝素材，结果“心情日记”目录结构如下： 所在路径 文件/文件夹的名字 说明 D:\mysite\diary diary.html “心情日记”框架集网页 left.html 左下部框架页 top.html 上部框架页 main1.html 右下部框架显示的“个人日记”网页 main2.html “情感天地”网页 main3.html “休闲搞笑”网页 main4.html “天下杂侃”网页 main5.html “媒体日记”网页 <diaryimages> 存放本栏目需要的图片 <media> 存放多媒体文件 ２．创建框架集 创建框架集有两种方法，引导学生通过课本或帮助将两种方法找出来，并根据任务要求选择框架集的类型，即“上方固定，左侧嵌套”。 ３．选择框架并设置属性 让学生自己找选择框架的方法（通过课本或使用帮助）。然后按照课本步骤，设置框架属性，添加每个框架的内容。讲解属性面板各选项的含义： “框架名称”：用于设置链接的“目标”属性或脚本中引用该框架时所用的名称。 “源文件”：用于设置在该框架中显示的网页文件。可以单击“浏览文件”按钮 选择要显示的网页文件。 “滚动”：用于设置是否显示滚动条。其中“默认”表示由浏览器的默认设置确定是否显示滚动条。大多数浏览器默认设置为在浏览器窗口中没有足够空间来显示框架内容时，显示滚动条。 “不能调整大小”：用于设置在浏览器中是否可以通过拖动框架边框来调整框架大小。 “边框”：用于设置在浏览器中是否显示框架边框。大多数浏览器默认设置显示边框。 “边框颜色”：用于设置边框颜色。 “边界宽度”：以像素为单位设置框架左边框和内容之间的距离。 “边界高度”：以像素为单位设置框架上边框和内容之间的距离。 提个醒：在页面中单击框架区域内部，表示要编辑该框架内容，不等于选中了框架。在“框架”面板中框架内部单击，才会选中相应框架。 ４．选择框架集并设置属性 给出选择框架集的方法，然后提问学生，应该在哪里设置属性。最后按课本步骤操作讲解。 ５．保存框架和框架集 按课本步骤操作 注意：上述