资源简介

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

展开更多......

收起↑