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

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

《《网页制作》项目式教案2.docx》由会员分享，可在线阅读，更多相关《《网页制作》项目式教案2.docx（58页珍藏版）》请在冰豆网上搜索。

《网页制作》项目式教案2

《网页制作》教案

科任：

王贤全

班级：

高二（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

“媒体日记”网页

存放本栏目需要的图片

存放多媒体文件

２．创建框架集

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

３．选择框架并设置属性

让学生自己找选择框架的方法（通过课本或使用帮助）。

然后按照课本步骤，设置框架属性，添加每个框架的内容。

讲解属性面板各选项的含义：

“框架名称”：

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

“源文件”：

用于设置在该框架中显示的网页文件。

可以单击“浏览文件”按钮选择要显示的网页文件。

“滚动”：

用于设置是否显示滚动条。

其中“默认”表示由浏览器的默认设置确定是否显示滚动条。

大多数浏览器默认设置为在浏览器窗口中没有足够空间来显示框架内容时，显示滚动条。

“不能调整大小”：

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

“边框”：

用于设置在浏览器中是否显示框架边框。

大多数浏览器默认设置显示边框。

“边框颜色”：

用于设置边框颜色。

“边界宽度”：

以像素为单位设置框架左边框和内容之间的距离。

“边界高度”：

以像素为单位设置框架上边框和内容之间的距离。

提个醒：

在页面中单击框架区域内部，表示要编辑该框架内容，不等于选中了框架。

在“框架”面板中框架内部单击，才会选中相应框架。

４．选择框架集并设置属性

给出选择框架集的方法，然后提问学生，应该在哪里设置属性。

最后按课本步骤操作讲解。

５．保存框架和框架集

按课本步骤操作

注意：

上述任务创建了一个框架集网页，它包含三个框架页，其中左下部和右下部框架页已经通过“属性”面板的“源文件”选项设置为从素材中拷贝过来的网页，页面内容没有修改，所以不需要保存；而框架集页面和上部框架页是新建的，因此需要保存。

保存单个框架页面时，可以先将光标定位到该框架页面，再选择菜单栏“文件”菜单的“保存框架”选项。

进行下列操作前，首先要勾选菜单栏“查看”→“可视化助理”→“框架边框”选项（默认不被勾选），在页面中显示框架结构。

⑴手动创建框架集

用鼠标拖拽“文档窗口”中的任一边界，都可以创建包含两个框架的框架集。

用鼠标拖拽“文档窗口”的任一角，都可以创建包含上下左右4个框架的框架集。

⑵拆分框架

先选中要拆分的框架，再按住键盘的Alt键用鼠标拖拽边框拆分框架。

⑶删除框架

用鼠标拖拽框架边框到相邻边框，即可删除相应框架。

通过本任务学习了创建框架集、设置框架集属性以及如何保存框架网页的知识。

1、创建网页“practice4-1.html”，使用“新建文档”对话框，创建“右侧固定，上方嵌套”结构的框架集网页，设置显示框架边框，边框宽度为3，颜色为“#0000FF”。

根据所学习的创建框架集方法，自己动手创建上述框架集网页。

每个框架的属性设置按要求制作。

学生分组完成任务。

让每组学生评论本组作的情况，哪些好、哪些不好，缺点是什么，哪些知识点没有掌握。

教师总结，根据不同情况再次进行强调总结。

1．自己试一试如何手动创建框架。

2.自己练习如何拆分框架和删除框架。

3．创建如下图所示的框架集网页“practice4-2.html”。

４．创建如下图所示的框架集网页“practice4-3.html”。

首先对今天学习任务进行明确定位，让学生明确今天学习的任务目标。

学生观察框架的使用

引导学生自己完成给出的任务，学生做好了给予鼓励，做不好时一定要给予其提示。

任务二使用链接控制框架内容

一、提出任务

1．任务目标

在“心情日记”页面创建链接，使用链接控制框架内容。

2.解决的问题

本任务通过在“心情日记”页面创建链接，学习使用超级链接控制框架内容，实现在同一浏览器窗口中显示多个网页的功能。

3.本任务所涉及原有知识要点

完成本任务所涉及原有知识要点有：

如何创建框架集，设置框架集和框架的属性。

二、教学目标

1.知识目标

⑴理解通过创建超级链接控制框架显示内容的过程。

⑵熟悉属性面板中“目标”的种类和含义。

⑶掌握框架中超链接的设置。

2.能力目标

掌握利用框架和链接实现在同一浏览器窗口中显示多个网页内容。

3.情感目标

培养学生不怕困难、积极探索的优良作风，增强学生审美能力，使学生感受到完成任务的成就感。

三、教学分析与准备

1.教学重点

框架中超链接的设置。

2．教学难点

属性面板中“目标”的种类和含义。

3.教学方法

任务驱动学习、协作学习和探究学习相结合。

4.课时安排

4课时。

5.教学环境

多媒体网络教室。

四、学习过程（组织课堂、复习知识、教师引领完成任务占1.5课时；举一反三占2.5课时。

）

教学环节及手段

教师活动

学生活动

组织课堂

复习提问

任务流程

导入任务

分析任务

完成任务

教师结合PPT演示文稿和实际操作讲解。

边讲边做

知识总结

举一反三

引出任务

任务目标

启发思路

准备资料

完成任务

总结评价

布置作业

集中学生注意力，准备上课。

1．如何创建框架集？

2．如何设置框架集和框架的属性？

演示上次的任务，找出未完成的部分，从而引出本任务的内容，即通过添加超级链接控制框架页中显示不同的内容

提出任务：

使用链接控制框架内容

为上一任务创建的框架页面添加内容，其中左下部框架页直接应用素材网页“left.html”。

该网页中有“个人日记”、“感情天地”等五行文本。

然后为这五行文本创建超级链接，链接到素材中对应的网页，链接目标显示在右下部框架。

下面，讲解完成任务的步骤。

１．添加框架页的内容

制作顶部框架页所需要的网页“top.html”，创建一个空白页面“main5.html”。

２．创建超级链接控制框架显示内容

讲解“个人日记”的链接方法，让学生自己完成其他的链接，最终结果如下：

文本内容

链接对象

目标

情感天地

“main2.html”

mainFrame

休闲搞笑

“main3.html”

mainFrame

天下杂侃

“main4.html”

mainFrame

媒体日记

“main5.html”

mainFrame

完成本任务学习了在网页中创建超级链接，实现控制框架显示内容。

总结上述知识点，然后提问学生是不是也想自己做一个应用框架技术的网页？

比如，我们拍摄收集了很多相片，有家人的、朋友的、自己的。

希望将他们分类管理，以便更容易浏览展示。

下面任务就是利用今天学的框架知识完成一个个人相册。

创建网站“pra4-3”,站点保存在“D:

\pra4-3”文件夹。

使用框架技术制作一个网上相册，将自己拍摄或搜集的相片分类（至少分三类），把每一类相片显示在一个页面中。

创建一个“上方固定，左侧嵌套”的框架集网页“practice4-6.html”。

上部框架显示相册标题（自定），左下部框架显示分类名称并添加链接，右下部框架显示相应类别的相片页面（注意：

除了框架集网页外其他网页文件名自定）。

要认真组织页面，力求达到美观的效果，最好使用css样式。

准备资料：

上网查找或者使用自己的照片素材

应用上述技术制作自己的网页，每个框架页的属性设置根据自己的喜好制作。

学生自评：

分组让学生评论本组作的情况，哪些好、哪些不好，缺点是什么，哪些知识点没有掌握

教师总结：

根据不同情况再次进行强调总结

设计一个个人网站进行自我介绍，要求使用框架技术布局页面。

教师提问，学生总结回答

首先对今天学习的任务进行明确定位，让学生明确今天学习的任务目标。

引导学生自己完成

给学生时间自己找资料，自己布局美化页面，以便有更多自由发挥的空间

任务三制作媒体日记网页

一、提出任务

1．任务目标

在网页中插入多媒体内容。

2.解决的问题

通过完成本任务认识多媒体视频文件和FLASH动画文件在网页制作中的重要作用，学习运用多媒体文件美化和丰富网页。

3.本任务所涉及原有知识要点

完成本任务所涉及原有知识要点有：

在网页中插入图像、编辑图像，使用框架结构布局页面。

二、教学目标

1.知识目标

⑴了解多媒体文件的分类。

⑵了解视频文件在网页制作中的作用

⑶掌握在网页中插入视频文件。

⑷了解FLASH动画在网页制作中的作用

⑸掌握在网页中插入FLASH动画。

2.能力目标

能够在网页中插入多媒体文件并进行参数设置。

3.情感目标

通过参加科学探究活动，初步掌握在网页制作中使用多媒体文件的方法，并加深对多媒体文件的理解。

使学生增强自信心，对学习产生兴趣。

三、教学分析与准备

1.教学重点

⑴多媒体文件的分类

⑵在网页中插入视频文件。

⑶在网页中插入FLASH动画。

2．教学难点

⑴在网页中插入视频文件。

⑵在网页中插入FLASH动画。

3.教学方法

任务驱动学习、协作学习和探究学习相结合

4.课时安排

4课时。

5.教学环境

多媒体网络教室。

四、教学过程（组织课堂、复习知识、教师引领完成任务占1.5学时；举一反三占2.5学时。

）

教学环节及手段

教师活动

学生活动

组织课堂

复习知识

任务流程

导入任务

分析任务

完成任务

知识总结

举一反三

任务目标

启发思路

分组完成任务

学生自评或互评

教师点评总结

布置作业

集中学生注意力，准备上课。

通过提问考察学生对框架集掌握情况。

1．框架集的作用？

2．上前演示使用框架集在一个网页中显示几个网页的内容。

学生分组讨论下列问题。

1．什么是媒体文件？

2．媒体文件有哪些？

3．列举日常生活中的媒体文件。

学生回答上述问题，教师总结，从而引导学生学习媒体文件。

浏览包含多媒体文件的网页，吸引学生兴趣。

通过前面的学习已经系统的了解了图形图像在网页制作中的应用，但是还没有使用过媒体文件，本任务将系统学习多媒体文件在网页制作中的应用。

提出任务：

在网页中插入视频文件

在“媒体日记”链接的网页“main5.html”中，插入一段视频文件。

在上部框架页面“top.html”中，插入Flash动画作为装饰，美化页面。

1．布局“媒体日记”页面

运行Dreamweaver8，在“文件”面板中，选择并打开上一任务创建的网页文件“main5.html”，通过“页面属性”设置网页上、下边距为0像素，背景色设置为“#EEF0FF”，其他采用默认值。

选择菜单栏“插入”菜单的“表格”选项，插入一个宽366像素、2行2列的表格，表格边框为0。

设置第一行高20像素，第二行高272像素，第一列宽17像素，第二列宽349像素（第二列列宽可以不设）。

在第一行、第一列单元格中插入“D:

\mysite\diary\diaryimages”文件夹中“point1.gif”图像，在第一行的第二列中输入文字“媒体日记”，文字大小为12像素。

然后合并第二行的两个单元格。

2．插入媒体插件

在“文档窗口”中，用鼠标在表格第二行内单击，选择菜单栏“插入”→“媒体”→“插件”选项，弹出“选择文件”对话框，如课本图4-16所示。

选择“D:

\mysite\diary\media”文件夹中的视频文件“ljsy.mpg”，单击“确定”按钮。

结合插入媒体菜单讲解有哪些媒体文件可以应用在网页设计中。

3．插入FLASH动画文件

在顶部框架页插入Flash动画。

在Dreamweaver8中，打开“D:

\mysite\diary”文件夹下的网页“top.html”，将插入点放到图像“biaoti.jpg”的右边，选择菜单栏“插入”→“媒体”→“Flash”选项，在弹出的“选择文件”对话框中选择“D:

\mysite\diary\media”文件夹中的Flash动画文件“top.swf”，单击“确定”按钮。

保存网页“top.html”，按F12键预览

插入FLASH文件后，FLASH背景与网页背景不协调。

为此，在“文档窗口”中，单击选中刚插入的Flash动画，然后单击“属性”面板中的“参数”按钮，弹出“参数”对话框，设置“参数”为“wmode”，“值”为“transparent”，表示背景为透明。

然后单击“确定”按钮，完成插入Flash及其参数设置，保存页面。

多媒体文件包含Flash动画、Shockwave、Applet、ActiveX和插件等，每一类文件都有其相应的可设置参数，用于设置多媒体文件的各种属性。

“wmode”是动画模式参数，“wmode”值设置为transparent代表显示Flash动画时，背景为透明。

通过完成本任务学习了视频文件和FLASH动画在网页制作中的应用。

创建网页“practice4-7.html”，在网页中插入“插件”，播放本单元素材“举一反三”文件夹中的“Boo.wav”。

回忆使用哪个菜单、选项可以插入插件？

本题应插入那个插件？

每个插件可以插入什么类型的多媒体文件？

把不同层次的学生分在一组中，鼓励同学积极讨论完成任务。

小组间互相观看运行效果，并相互评论。

教师对学生完成情况及评论进行总结，对完成任务的表扬，对没有完成任务的鼓励，并帮助他们分析没有完成的原因。

1.如何在网页中插入声音文件，插入的声音文件和网页的背景音乐有什么区别？

2．创建一个网页“practice4-8.html”，效果如图JYFS4-5所示，在网页下方插入“插件”，播放本单元素材“举一反三”文件夹中的“piantou.avi”。

3．创建网页“practice4-9.html”，在网页中插入“插件”播放本单元素材“举一反三”文件夹中的“background.mid”，要求设置循环播放。

要点提示：

在“插件”的属性面板添加参数“loop”，值为“-1”。

学生可以利用帮助、课本、互联网查找答案。

力求通过任务导入，吸引学生学习兴趣。

教师引导，学生讨论、分析。

教师作为引导者和组织者，学生分组上机操作，完成相应任务并进行评价。

任务四使用代码制作框架网页

一、提出任务

1．任务目标

使用HTML制作一个标题为“唐代名词赏析”的框架页面。

2.解决的问题

通过使用代码制作框架网页学习HTML中框架集、框架标签的语法格式。

3.本任务所涉及原有知识要点

完成本任务所涉及原有知识要点有：

使用HTML代码在网页中添加超链接，插入文本并设置文本格式。

二、教学目标

1.知识目标

⑴了解框架集与框架在HTML中的区别。

⑵掌握框架、框架集标签的用法。

⑶掌握框架、框架集标签的一些重要属性。

⑷掌握使用代码生成框架网页。

2.能力目标

能够利用HTML代码制作框架网页。

3.情感目标

培养学生不怕困难、积极探索的优良作风，对自己充满信心，对学习充满兴趣。

三、教学分析与准备

1.教学重点

⑴框架、框架集标签的用法。

⑵框架、框架集标签的一些重要属性。

2．教学难点

框架、框架集标签的用法。

3.教学方法

任务驱动学习、协作学习和探究学习相结合。

4.课时安排

4课时。

5.教学环境

多媒体网络教室。

四、教学过程（组织课堂、复习知识、教师引领完成任务占1.5学时；举一反三占2.5学时。

）

教学环节及手段

教师活动

学生活动

组织课堂

复习知识

引领完成任务

导入任务

分析任务

完成任务

知识小结

举一反三

任务目标

启发思路

分组完成任务

学生自评或互评

教师点评总结

布置作业

集中学生注意力，准备上课。

通过提问考察学生对框架的掌握情况。

1．什么是框架、框架集？

2．框架、框架集的作用是什么？

前面已经学习了HTML语言的一部分内容，本任务将继续学习，学习HTML中框架、框架集标签，从而能够掌握如何使用代码生成框架页面。

提出任务：

使用代码制作框架网页。

通过代码添加包含三个框架的框架集，设置框架的属性，在一个框架集内显示三个框架页的内容。

1．准备工作

新建一个文件夹“tcsx”，把随书光盘中本单元素材文件夹中“HTML”文件夹下的网页“top.html”、“left.html”、“main.html”、“main2.html”和“main3.html”拷贝到此新建文件夹中。

运行Dreamweaver8，新建一个空白页面，命名为“tcsx.html”，保存在“tcsx”文件夹中。

将“文档窗口”切换到“代码”视图，修改网页标题为“唐代名词赏析”。

2．添加框架集

⑴在和之间添加框架集代码创建框架集，并设置其属性。

⑵框架、框架集标签讲解。

框架集标签格式：

框架标签格式

3．在框架集中添加框架

在和之间添加框架代码创建框架并设置他们的属性。

4．设置在不支持框架的浏览器中显示的信息

⑴在和之间修改并添加代码，设置在不支持框架的浏览器中显示的信息。

⑵.知识讲解

框架集网页中……标签与和标签不能互相包含。

但是……可以添加在……标签中，用于设置不支持框架的浏览器中显示的提示信息。

⑶知识拓展

框架还有第二种形式：

内联框架（inlineframe或iframe）。

它由微软InternetExplorer3.0版本引入的。

它把内联框架嵌入HTML文档中，就像HTML文档嵌入图片一样。

内联框架可以使开发者把一个HTML文档嵌入到另一个HTML文档中。

嵌入内联框架的语法：

通过完成本任务学习了：

1．框架集与框架在HTML中的区别。

2．框架集、框架标签。

3．框架集、框架标签的一些重要属性

4．使用代码生成框架集和框架的方法。

使用HTML代码制作框架集网页“practice4-11.html”，其结构为左侧固定、上方嵌套，左侧框架宽150像素，右上框架高100像素，显示框架边框，宽度为1像素，颜色为“#FF00FF”。

结合前面的例子，通过各种途径完成举一反三的任务。

获得帮助的方法有：

1．从教材获取。

2．通过Dreamweaver8帮助获取。

3．从互联网获取。

从Dreamweaver8帮助或互联网获取，要注意检索方法和检索关键词。

把