《网页制作》项式教案2.docVIP

《网页制作》教案 科任：王贤全 班级：高二（8）班 课时：10节×4周=40节 作业：40次 时间：2010.11.1——2010.11.26 项目四 制作“心情日记”网页 本项目通过“创建框架集”、“使用链接控制框架内容”和“制作媒体日记页面”三个任务完成“幽幽我心的个人网站”中“心情日记”栏目的制作，学习如何使用框架结构来布局页面及如何在网页中插入多媒体文件，任务完成后效果如图： 本项目具体的教学过程共分为以下四个方面的任务：任务一 创建框架集 （4课时） 任务二 使用链接控制框架内容 （4课时） 任务三 制作媒体日记网页 （4课时） 任务四 使用代码制作框架网页（4课时） 任务一 创建框架集 一、提出任务 1．任务目标 框架的 ⑵ 创建框架集。 ⑶ 设置框架属性。 ⑷ 设置框架集属性 2．教学难点 显示框架边框 ⑵ 设定框架的滚动格式 ⑶ 框架的边框样式 3. 教学方法 任务驱动学习和协作学习、探究学习相结合。 4. 课时安排 4课时 5. 教学环境 D:\mysite\diary diary.html “心情日记”框架集网页 left.html 左下部框架页 top.html 上部框架页 main1.html 右下部框架显示的“个人日记”网页 main2.html “情感天地”网页 main3.html “休闲搞笑”网页 main4.html “天下杂侃”网页 main5.html “媒体日记”网页 diaryimages 存放本栏目需要的图片 media 存放多媒体文件 ２．创建框架集 创建框架集有两种方法，引导学生通过课本或帮助将两种方法找出来，并根据任务要求选择框架集的类型，即“上方固定，左侧嵌套”。 ３．选择框架并设置属性 让学生自己找选择框架的方法（通过课本或使用帮助）。然后按照课本步骤，设置框架属性，添加每个框架的内容。讲解属性面板各选项的含义： “框架名称”：用于设置链接的“目标”属性或脚本中引用该框架时所用的名称。 “源文件”：用于设置在该框架中显示的网页文件。可以单击“浏览文件”按钮 选择要显示的网页文件。 “滚动”：用于设置是否显示滚动条。其中“默认”表示由浏览器的默认设置确定是否显示滚动条。大多数浏览器默认设置为在浏览器窗口中没有足够空间来显示框架内容时，显示滚动条。 “不能调整大小”：用于设置在浏览器中是否可以通过拖动框架边框来调整框架大小。 “边框”：用于设置在浏览器中是否显示框架边框。大多数浏览器默认设置显示边框。 “边框颜色”：用于设置边框颜色。 “边界宽度”：以像素为单位设置框架左边框和内容之间的距离。 “边界高度”：以像素为单位设置框架上边框和内容之间的距离。 提个醒：在页面中单击框架区域内部，表示要编辑该框架内容，不等于选中了框架。在“框架”面板中框架内部单击，才会选中相应框架。 ４．选择框架集并设置属性 给出选择框架集的方法，然后提问学生，应该在哪里设置属性。最后按课本步骤操作讲解。 ５．保存框架和框架集 按课本步骤操作 注意：上述任务创建了一个框架集网页，它包含三个框架页，其中左下部和右下部框架页已经通过“属性”面板的“源文件”选项设置为从素材中拷贝过来的网页，页面内容没有修改，所以不需要保存；而框架集页面和上部框架页是新建的，因此需要保存。 保存单个框架页面时，可以先将光标定位到该框架页面，再选择菜单栏“文件”菜单的“保存框架”选项。 进行下列操作前，首先要勾选菜单栏“查看”→“可视化助理”→“框架边框”选项（默认不被勾选），在页面中显示框架结构。 ⑴ 手动创建框架集 用鼠标拖拽“文档窗口”中的任一边界，都可以创建包含两个框架的框架集。 用鼠标拖拽“文档窗口”的任一角，都可以创建包含上下左右4个框架的框架集。 ⑵ 拆分框架 先选中要拆分的框架，再按住键盘的Alt键用鼠标拖拽边框拆分框架。 ⑶ 删除框架 用鼠标拖拽框架边框到相邻边框，即可删除相应框架。 通过本任务学习了创建框架集、设置框架集属性以及如何保存框架网页的知识。 1、创建网页“practice4-1.html”，使用“新建文档”对话框，创建“右侧固定，上方嵌套”结构的框架集网页，设置显示框架边框，边框宽度为3，颜色为“#0000FF”。 根据所学习的创建框架集方法，自己动手创建上述框架集网页。每个框架的属性设置按要求制作。 学生分组完成任务。 让每组学生评论本组作的情况，哪些好、哪些不好，缺点是什么，哪些知识点没有掌握。 教师总结，根据不同情况再次进行强调总结。 1．自己试一试如何手动创建框架。 2. 自己练习如何拆分框架和删除