资源简介

任务二 添加和使用层
一、提出任务
1．任务目标
完成“家乡山水”页面中层的制作。
2. 解决的问题
通过完成本任务学习层的使用，并为下一个任务添加行为做准备。
3. 本任务所涉及原有知识要点
完成本任务所涉及原有知识要点有：在网页中添加表格，在单元格中添加内容。
二、教学目标
1. 知识目标
⑴ 理解层的概念和作用。
⑵ 掌握插入层。
⑶ 掌握层的基本操作：选中、移动、对齐、调整大小。
⑷ 掌握层的属性设置。
⑸ 掌握在层中添加内容。
2. 能力目标
熟练掌握使用层在网页中不同位置定位的方法。
3. 情感目标
培养学生不怕困难、积极探索的优良作风，增强学生审美能力，使学生感受到完成任务的成就感。
三、教学分析与准备
1. 教学重点
⑴ 层的属性设置。
⑵ 在层中插入内容。
2．教学难点
层的定位方法。
3. 教学方法
任务驱动学习、协作学习和探究学习相结合。
4. 课时安排
4课时。
5. 教学环境
多媒体网络教室。
四、学习过程（组织课堂、复习知识、教师引领完成任务占2课时；举一反三占2课时。）
教学环节及手段 教师活动 学生活动
组织课堂 复习提问 任务流程 导入任务 分析任务 完成任务 教师结合PPT演示文稿和实际操作讲解。 边讲边做 知识总结 举一反三 任务目标 启发思路 完成任务 总结评价 教师点评总结 布置作业 集中学生注意力，准备上课。 通过教师提问、学生回答来考察学生对添加热点和创建锚记链接的掌握情况。 如何添加热点，有几种热点工具？ 如何创建锚记链接？ 演示本任务网页，找出本次需要完成的部分，从而引出本任务的内容，即通过插入层来在网页中定位要显示的内容。 提出任务：添加和使用层。 景区地图上共有六个景区，每个景区对应一个层，加上初始显示层共有七个层叠放在同一位置，显示相应的图像。另外，还需要建立一个层，用于显示简单的介绍文字。本任务将在页面中插入八个层，改变层的大小，确定层的位置，然后在层中添加内容。 １．插入层 在“文件”面板中双击“travel.html”文件，打开“家乡山水”网页。引导学生从课本中找到插入层的步骤，在需要的位置插入8个层，同时认识层面板。 ２．设置层的属性 在“层”面板中，单击“Layer8”选中该层，其中“高”、“宽”等属性的默认值取决于“首选参数”对话框（选择菜单栏“编辑”→“首选参数”选项）中“层”分类的设置。将“宽”修改为300像素，其他采用默认值。其他层的属性保持默认值不变。 层“属性”面板介绍 “层编号”：用于设置层的名称，同一页面中的每个层都有唯一的名称。第一次插入的层名称默认为“Layer1”。 “左”和“上”：用于设置层的左上角相对于页面（如果是嵌套层，则相对于其父层）左上角的水平距离和垂直距离，值默认为0，单位默认为像素，通常使用默认值。 “宽”和“高”：用于设置层的宽度和高度。单位默认为像素。 “Z轴”：用于设置层在Z轴上的位置，即层叠顺序。在浏览器中，编号较大的层叠放在编号较小的层的上面。值可以为正，也可以为负。 “可见性”：用于设置层是否可见。default:默认值；inherit:继承父层的可见性；visible：可见；hidden：不可见。 “溢出”：用于设置当前层中的内容超出其大小时的状态。Visible：层高度自动增加以容纳超出的内容；hidden：层大小不变，多出的内容隐藏；scroll：在预览时层自动加上滚动条；auto：自动识别是否显示滚动条，层中内容超过层的大小时显示，否则不显示。 “剪辑”：用于定义层在“文档窗口”中的可见区域，单位为像素。 3. 在层中添加内容 将光标放在要插入内容的层中，然后添加内容。 4.设置层的显示属性 通过“层”面板中的图标，将所有层的显示属性设置为隐藏。单击“层”面板中“Layer1”和“Layer8”左边的图标，将这两个层的显示属性设置为可见，其他层不可见。 通过完成本任务引导学生学习了层的作用，以及如何插入层、设置层的属性、对层操作。 将本单元“举一反三”文件夹中的“pra5-2”文件夹拷贝到D盘根目录，运行Dreamweaver 8，使用文件夹中的图像与文本制作“我的心事”网页“practice5-7.html”,整个页面使用层进行布局，效果如图JYFS5-5所示。 图JYFS5-5 应用层、对层进行定位布局网页。 组织学生分组完成本任务 每组学生代表评论本组完成情况，哪些好、哪些不好，缺点是什么，哪些知识点没有掌握 根据不同情况再次进行强调总结 1. 创建网页“practice5-5.html”，使用层完成如下工作：在图像“practice5-4.jpg”的上方叠放另一张图像“practice5-5.gif”（所需素材在本单元素材文件夹中的“举一反三”文件夹中），完成效果如图JYFS5-3所示。 图JYFS5-3 2. 创建网页“practice5-6.html”，利用层的可重叠性，制作阴影效果的文字，如图JYFS5-4所示。 图JYFS5-4 先让学生明确本任务学习的任务目标。 引导学生自己完成

展开更多......

收起↑