第五课 统一风格——制作框架网页

第一篇：第五课 统一风格——制作框架网页

统一风格——制作框架网页

教学目标： 1.掌握表格的拆分与合并。

2.学会创建框架、制作框架网页和保存框架网页。

3.能制作鼠标经过图像的动态效果。4.学会制作超级链接和电子邮件链接。

5.掌握目标设置在网页制作过程中的作用和方法。

教学重点：创建框架和制作框架网页。

教学用具：多媒体网络教室。教学方法：讲解、学生练习。时间安排：2节课 教学过程：

一、课程导入

一个网站常常划分成多个区域，对于每个区域来说，其色彩搭配、网站风格、网站标题、网站导航都是统一的。为了能做到这种统一，我们每个网页中相同的内容固定在一个区域。我们通过创建框架制作框架网页，可以轻松实现网页结构划分和布局。看一个使用了框架的网页范例，师大资源网（http://source.xjnu.edu.cn）。使大家对框架有一个初步的了解和感性认识。

二、新课讲授 1.新建站点

（1）将“安全自护我能行”站点文件夹safe传到学生机。（2）新建站点。

2.创建框架和框架集

制作框架网页的前提是创建框架，并根据网页布局设计框架的样式，然后再具体设计制作网页的内容。（1）规划“框架”文件夹。（2）新建框架集

步骤1：执行“文件”——》“新建”命令，打开“新建文档”对话框，在 “类别”中选择 “框架集”。

步骤2：单击“创建”按钮，在弹出对话框中单击“确定”，框架创建完成。（3）保存框架集

步骤1：执行“文件”——》“保存全部”命令，保存到frame文件夹中。步骤2：重命名框架集文件和每个框架文件。（4）设置框架和框架属性

框架的属性包括框架名称、源文件、边距、尺寸、滚动条等；框架集的属性包括框架面积、框架边界颜色、距离等。

步骤1：执行“窗口”——》“框架”命令，打开框架面板。

步骤2：单击“框架”面板中的框架边缘部分，选中框架集，在 “属性”面板中设置框架集的属性。

步骤3：单击“框架”面板中的topFrame框架和mainFrame框架，在“属性”面板中设置所选框架的属性。（5）制作框架网页 ①制作上框架网页

步骤1：打开网页top.html，设置背景颜色#EAFF8A，上边距为0像素。步骤2：插入一个2行5列的表格并调整行列的高宽。。。步骤3：在导航表格中，设置鼠标经过图像。步骤4：为图片添加超链接，设置打开方式（目标）。②制作下框架网页

步骤1：打开网页main.html，设置背景颜色#EAFF8A，上边距为0像素。步骤2：插入一个5行9列的表格并调整行列的高宽。。。步骤3：合并相关单元格。

步骤4：插入图片，并为图片添加超链接。步骤5：添加邮件链接。

三、学生练习

学生小组合作完成书上的练习任务，并将任务上交到教师机。

四、作品评价

对于较快完成任务并且完成任务较好的同学进行表扬鼓励。

五、本课小结

1.创建框架，实现网页风格的统一，保存框架时，需要保存框架集文件和含有框架的所有文件。

2.利用鼠标经过图像，可以制作网页导航动态按钮。3.超级链接是实现网页互联的关键，设置网页的打开方式，可以调整链接网页的显示位置。

第二篇：框架网页制作教案分析

框架网页的制作

教学目标：

1．知识与技能：

（1）理解框架的概念及基本用途。

（2）掌握框架网页的新建、制作、编辑与保存，了解框架的拆分方法。

（3）初步掌握将框架结构与表格布局结合使用来制作网页。

2．过程与方法：

（1）通过对表格网页的分析，体验新知识（框架结构网页）的优点，从而促进更好的学习新知识。

（2）通过理解框架的概念与组成，学会分析框架网站的结构。（3）通过动手操作来深入了解框架的使用方法及用途，提高在网页制作方面的知识水平，培养自主学习的能力。3．情感态度与价值观：

（1）通过以“人与动物”为主题的框架结构网页的制作活动，开拓知识面，激发学习兴趣与热情，体会框架网页在展现主题内容中的作用。（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。

（3）形成积极主动的学习和使用多媒体技术的习惯，通过参与信息活动，参与社会实践，树立团队意识，形成积极合作的态度。

教学要点：

1．重点：

（1）框架的概念、用途。（2）创建、编辑与保存框架网页的方法，框架的嵌套使用。2．难点：（1）框架的拆分。（2）制作框架网页。

教学对象分析：

本节内容是针对高一学生，而初上高中的他们对一切新知识都很好奇，同时存在着一定的懵懂，因此在教授他们本节课知识之前，要事先充分激发他们对本节课内容的兴趣，因此课前老师先展示一组利用表格制作的框架网页，要求学生仔细观察，找出它们的一个共同特点，并提问如何快捷地制作这种网页？从而引出本节课内容，并且在讲授内容的过程中，要耐心的进行演示教学，不能一味的口述使学生感到一片茫然。

教材分析：

从在本教材中所处的位置来看，《运用框架结构制作网页》是在创建新站点，制作简单网页、运用表格制作网页和动态网页之后。通过前面的学习，学生可以建立有多张网页的个人站点，在对网页的设计中会运用表格给网页布局，为了使网页增添动感，还会通过增加滚动字幕、动态按钮以及动画插件等方法，令网页更加具有活力。但是除了表格布局外，还有一种常见的布局形式，应用也相当广泛，学生在浏览一些著名网站时就能遇到，通过本节课《运用框架结构制作网页》学习，可以为学生解惑，帮助学生理解框架结构制作网页的应用。从教材的难易度分析，这部分知识点学生从来没有接触过，在前面学习其它的应用软件时也没有类似的地方，故而有一定难度，教学目标不能定的过高。

第三篇：框架网页的制作教案设计与反思

框架网页的制作教案设计与反思

江苏省宜兴市和桥镇第二中学 吕超 邮编：214211 E-mail：lvchao012326@163.com

一、教学目标：

1、知识与技能：

（1）、了解框架结构网页的概念及在网页中的作用，了解它与表格网页的区别。

（2）、掌握框架结构网页的建立、框架结构的拆分、框架的删除等。（3）、掌握框架中页面设置及保存的方法，如设置初始网页按钮、新建网页按钮等。

2、过程与方法：

（1）、能够区分框架结构属性设置与网页属性设置的不同点。（2）、通过框架结构网页设计，使学生对网页的整体结构有更进一步的认识。

3、情感态度与价值观：

（1）、能够将表格与框架结构网页结合使用，在创作中体验乐趣。（2）、培养学生网页设计的审美意识、创新意识。

二、教学重点难点：

1、教学重点：

（1）、框架网页的作用和功能，框架的建立与属性设置。（2）、框架中各个页面之间的关联，每个框中页面的设置方法。（3）、框架网页的保存方法。

2、教学难点：

（1）、框架结构网页中框架属性与页面属性的设置方法。（2）、理解框架结构的多页面存储方法及各页面之间的关联。

三、教学过程：

1、创设情境、导入新课

（1）、教师展示一组表格制作的网页，引导学生找出它们的共同特点。并提问如何快捷地制作这种网页（学生回答：使用复制、粘贴快捷地制作）。

（2）、教师又提问：有没有更好的方法呢？相同的区域我们能否只做一遍呢？从而导入新课——框架网页的制作。

设计意图：通过对比、比较，引导学生思考，激发学生学习的乐趣。

2、任务驱动、自主学习

（1）、教师展示一个框架网页，引导学生理解框架网页的概念。（2）、出示任务一：框架网页的新建与保存。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第227页的实践学习。（3）、教师讲解框架结构中的每个框都是一个独立的选项文件，即网页文件，因此当框架确定之后，需要为每个框分别指定其网页文件的来源，可以通过每个框中的“新建网页”按钮和“设置初始网页”按钮进行选择。

（4）、学生理解框架网页的概念，通过阅读教材中的内容，自学新建框架网页的操作，初步了解“新建网页”和“设置初始网页”两个按钮的不同，并认真聆听教师的讲解，注意观察，按要求模仿操作。（5）、出示任务二：相关页面的制作与设置。教师要求学生先阅读教材中的操作步骤，再尝试完成书本第228、229页的实践学习。（6）、学生制作相关页面，同时也是对前面所学内容的复习和回顾。教师反馈学生的操作情况，开展评比活动，对表现好的学生给与表扬。（7）、出示任务三：框架网页属性的设置。学生自主探究学习，有问题可向教师寻求帮助。教师基础扎实的同学完成任务后可进行拓展学习。

（8）、教师请学生示范操作，并说明自己设置的方法和原因。同时鼓励做的比较好的学生。

设计意图：培养学生的自主学习能力，对于课堂教学难点，学生在教师的讲解后模仿操作，有效突破难点。

3、展示作品、课堂小结

（1）、教师给出一些常见的框架结构应用界面，如Web邮箱页面等，引导学生总结本课内容，并让学生分组，推进一些优秀作品在全班展示。

（2）、教师点评，并鼓励完成作品比较好的学生。

设计意图：拓展学生的视野，使学生了解框架的应用方法。展示优秀作品鼓励学生，激发学生的创作欲望。

四、教学反思：

1、本节课是在学习完简单网页、表格布局网页、交互式网页的基础上，进一步学习网页的设计方法。由于学生已经具备了一定的网页设计基础知识与技能，所以教师可以根据学生的实际情况，采用更灵活的教学方法。教师可以简单介绍框架结构网页的功能及框架的建立与编辑方法，以及框架属性设置与网页属性设置的方法与区别。然后由学生根据教师提供的学案及演示动画，完成框架网页设计任务。

第四篇：《框架网页》教案

《框架网页》教案

八年级信息技术备课组

组长签名

授课人

教学目的：学习框架网页的制作方法，掌握框架网页的构成。教学重点：框架网页的制作, 框架网页的属性。教学时间：2课时 教学步骤： 一）、框架页的基本组成

框架页是一种特殊格式的网页，主要由边框、网页、滚动条组成。在框架页中，每个框架都有一个网页相连接。当打开框架页时，则同时载入每个框架所相连的网页文件。

在框架页中显示的是三个独立的网页组成的（实际下载了四个网页，还包括框架页本身这个网页）。主体框一般用来显示正文内容的。二）、创建框架页

FrontPage 2000提供了10个框架网页向导帮助我们创建框架页。其操作步骤如下：（1）打开【文件】菜单，选择【新建】菜单项，在子菜单中选择【网页】菜单项，出现新建对话框。

（2）在对话框中单击【框架网页】选项卡。

（3）在选项卡中选择【目录】，此时在【预览】栏中会显示被选中的框架结构图，并在上方显示说明情况。

（4）单击【确定】按钮后，出现框架结构图。

（5）新创建的框架结构共有2个网页窗口，其中一个在左边，另一个在右边。这时单击【新建网页】按钮后，我们可以在当前框架网页中输入文字、图片等内容了。（如果这时单击【设置初始网页】按钮后，将弹出一个“创建超链接”的对话框，可以为所在的框架超链接到指定的网页上去。）

（6）框架的保存：单击“

”工具按钮，出现【另存为】对话框。

 保存左边框的网页文件。在对话框右面的框架示意图中，单击左边框后为蓝色，表示左边框中的网页正准备保存。在“URL”中输入文件名“in1”，单击【确定】按钮后，此时左边框的网页文件被保存起来。

 保存右边框的网页文件。紧接着，在对话框的框架示意图中，右边框显示为蓝色。在“URL”中输入文件名“in2”，单击【确定】按钮后，右边框的网页文件也被保存起来。 保存框架本身网页。在对话框中整个框架示意图的边框为蓝色，在“URL”中输入文件名“index.htm”，单击【确定】按钮后，此时保存的是整个框架页文件。三）、框架及框架页的属性

1、设置框架的属性

框架有很多属性，例如框架的名称、宽度、高度、边距、滚动条、可调整性、间距等。以框架页为例说明，其具体操作方法如下：

单击要设置属性的框架，然后单击【框架】菜单，再单击【框架属性】菜单项，出现对话框。可以在此对话框中修改框架的属性了。

2、框架页的属性

以上是设置每个框架的属性，而修改整个框架页的属性，其具体操作如下： 在【框架属性】对话框中，单击【框架网页】按钮，会出现“网页属性”对话框。

第周八年级信息技术教案 在这个对话框中的“框架”选项卡中只有两项：

 “框架间距”：指框架之间的边框的宽度，默认值为2。

如果框架不要显示出边框时，可单击“显示边框”前面的单选框，取消“√”。四）、框架页的编辑

在框架页中，当要拆分某一框架时，单击框架→拆分框架→选择并确定。当要删除某一框架时，单击框架→删除框架→选择并确定。五）、框架页的超链接

在框架页中，当单击左边的超链接时，在右边框中显示该超链接网页的内容。下面我们将以框架页为例，说明怎样实现框架网页之间的超链接。其操作步骤如下：

（1）在左边的框架中选择要设置超链接的“（2）单击“选择“jbxx.htm”。

（3）在对话框右下角“目标框架”栏，单击“标设置”栏中就相应显示所选定的区域名称。其中：

 网页默认值(main)：超链接的网页将显示在右边框（即“main主体”）。 相同框架：在左边框单击某个超链接时，其链接网页也将显示在左边框。 整页：单击某个超链接时，只显示所链接的网页，原来框架不再显示。 新建窗口：单击某超链接时，所链接的网页将显示在新打开的浏览器中。 父框架：单击某个超链接时，将返回上一级的框架。六）、上机操作

练习设计框架网页

”图片（或文字）。

”超链接工具按钮，出现【编辑超链接】对话框。这时在对话框的文件列表中

”按钮，出现一个对话框。

在对话框中，单击框架示意图中不同的区域，也可以单击右边列表框的选项，在对话框的“目

课堂小结

板书设计 ：

教学反思

第周八年级信息技术教案

第五篇：教学设计：《Dreamweaver网页制作实用教程》----框架技术

教学设计：《Dreamweaver网页制作实用教程》----框架技术

《Dreamweaver网页制作实用教程》----框架技术 教学预案设计：罗执清（沙洋职教中心）

一、创意说明

网页制作是计算机应用专业的一门主干课程。我校采用的教材是机械工业出版社的《Dreamweaver网页制作实用教程》，框架技术是该书第八章的内容。书中是以三个小任务的形式介绍了制作框架网页的基本步骤，若按书上内容用传统的教师讲解、学生操作的方式教学，会存在一些问题。

1、学生不理解为什么要用框架结构来制作网页；

2、学生只是按任务要求及具体的操作提示来完成框架结构网页，并不知道这种框架结构的网页应用什么场合，在什么情况下选用框架结构来设计网页呢？

3、内容上没有学生喜欢的动态或多媒体元素，学生觉得只是按部就班地操作，提不起兴趣。所以在本节课的设计中要有心注意处理好以上三个问题，精心设计课件与学件，把提高学生学习兴趣，培养学生动手能力有机融于教学。采用任务驱动和项目教学法，在教学中分“基本任务”和“拓展任务”两个层次设计教学内容，要求每个学生必须完成“基本任务”中的内容，而对学有余力的同学再继续完成“拓展任务”中内容的制作，从而达到分层教学的目的。

二、学情分析

学生已经学过了office、Photoshop、flash等软件，对Dreamweaver 8的启动、关闭、文件操作、文字编辑和图片处理都会有一种似曾相识的感觉，这种知识迁移对后续的学习非常有利。同时，学生已初步掌握了网络通信的基础知识，因特网的信息服务，网络信息的搜索、浏览和下载，以及电子邮件的使用等内容。因此，学生已经具备了获取信息的能力。网页制作单元就可侧重培养信息表达的能力，这对于加强学生的信息意识，提高信息处理的能力有着重要的作用；网页的设计也给学生提供了展示个性、自主创新的机会，促使他们主动地学、创造性地学；网页的评价则能使学生了解内容编排的原则，页面布局的种类，色彩搭配的风格等，提高他们的艺术修养和审美情趣。

三、教材内容分析

框架设计是网页制作的一个重要模块，能够将浏览器页面分割成几个不等的窗口，每个窗口相对独立，在同一页面的几个窗口同时浏览不同的网页文件或者相对保持某些窗口的内容。从在本教材所处的位置来看，框架技术是在创建新站点、制作简单网页、运用表格制作网页和动态网页之后。通过前面的学习，学生可以建立有多张网页的个人站点，会运用表格给网页布局，为了使网页增添动感，还会通过增加滚动字幕、动态按钮以及动画插件等方法，令网页更加具有活力。但是除了表格布局外，还有一种常见的布局形式，应用也相当广泛。通过本单元学习，能帮助学生理解框架结构制作网页的应用，在设计网站时能灵活运用两种布局方法。从教材的难易度分析，这部分知识点学生从来没有接触过，有前面学习其它软件时也没有类似的地方，故而有一定难度，教学目标不能定得太高。

四、教学目标分析

本单元的认知、能力和情感三种目标分述如下： 认知目标：

①理解框架结构的含义和用途

②掌握框架和框架集的含义，学会创建普通框架页面、创建嵌套框架结构页面、创建浮动框架页面 ③掌握框架属性的设置方法 ④掌握框架网页的保存方法 能力目标：

①具备建立网页框架及设置框架属性的能力 ②能够应用网页框架建立简单的网页 情感目标：

培养学生网页设计的审美能力、创新能力、协作学习和自主学习能力

五、教学策略设计

1、实施任务驱动，把学习的主动权交给学生，引导学生动手尝试、观察辨析

2、采用项目教学和小组讨论法，培养学生合作学习和自主学习的能力

3、实施分层教学，从好、中、差各类学生的实际出发，确定不同层次的目标，进行不同层次的教学和辅导，使各类学生得到充分的发展

4、采用半成品加工策略，提供一些素材，让学生直接制作，提高学习的效率。

六、教学过程设计

1、课前探究

①访问推荐网页，形成小组、组织学生讨论网页内容和风格，分析网页框架和布局。②提供网页栏目划分建议。③组织各小组讨论。

2、新课导入：教学环节

教师活动

学生活动

设计目的新 课 导 入

1、教师演示一些用网页框架制作的优秀网页作品

2、提问：这些网页是如何制作的呢？引起学生的兴趣

1、回答问题，带着问题观察老师的操作

2、分析几个网站的特色

3、提供网页栏目划分

1、开门见山，明确这节课学习的内容

2、演示优秀作品，引起学生的兴趣