《网页制作》项目式教案.doc

《网页制作》教案

科任：王贤全

班级：高二（8）班

课时：10节×4周=40节

作业：40次

时间：2010.11.1——2010.11.26

项目四制作“心情日记”网页

本项目通过“创建框架集”、“使用链接控制框架内容”和“制作媒体日记页面”三个任务完成“幽幽我心的个人网站”中“心情日记”栏目的制作，学习如何使用框架结构来布局页面及如何在网页中插入多媒体文件，任务完成后效果如图：

本项目具体的教学过程共分为以下四个方面的任务：

任务一创建框架集（4课时）

任务二使用链接控制框架内容（4课时）

任务三制作媒体日记网页（4课时）

任务四使用代码制作框架网页（4课时）

任务一创建框架集

一、提出任务

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

存放多媒体文件

２．创建框架集

创建框架集有两种方法，引导学生通过课本或帮助将两种方法找出来，并根据任务要求选择框架集的类型，即“上方固定，左侧嵌套”。

３．选择框架并设置属性

让学生自己找选择框架的方法（通过课本或使用帮助）。然后按照课本步骤，设置框架属性，添加每个框架的内容。讲解属性面板各选项的含义：

“框架名称”：用于设置链接的“目标”属性或脚本中引用该框架时所用的名称。

“源文件”：用于设置在该框架中显示的网页文件。可以单击“浏览文件”按钮选择要显示的网页文件。

“滚动”：用于设置是否显示滚动条。其中“默认”表示由浏览器的默认设置确定是否显示滚动条。大多数浏览器默认设置为在浏览器窗口中没有足够空间来显示框架内容时，显示滚动条。

“不能调整大小”：用于设置在浏览器中是否可以通过拖动框架边框来调整框架大小。

“边框”：用于设置在浏览