第一篇：框架网页制作教案分析
框架网页的制作
教学目标：
1．知识与技能：
（1）理解框架的概念及基本用途。
（2）掌握框架网页的新建、制作、编辑与保存，了解框架的拆分方法。
（3）初步掌握将框架结构与表格布局结合使用来制作网页。
2．过程与方法：
（1）通过对表格网页的分析，体验新知识（框架结构网页）的优点，从而促进更好的学习新知识。
（2）通过理解框架的概念与组成，学会分析框架网站的结构。（3）通过动手操作来深入了解框架的使用方法及用途，提高在网页制作方面的知识水平，培养自主学习的能力。3．情感态度与价值观：
（1）通过以“人与动物”为主题的框架结构网页的制作活动，开拓知识面，激发学习兴趣与热情，体会框架网页在展现主题内容中的作用。（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。
（3）形成积极主动的学习和使用多媒体技术的习惯，通过参与信息活动，参与社会实践，树立团队意识，形成积极合作的态度。
教学要点：
1．重点：
（1）框架的概念、用途。（2）创建、编辑与保存框架网页的方法，框架的嵌套使用。2．难点：（1）框架的拆分。（2）制作框架网页。
教学对象分析：
本节内容是针对高一学生，而初上高中的他们对一切新知识都很好奇，同时存在着一定的懵懂，因此在教授他们本节课知识之前，要事先充分激发他们对本节课内容的兴趣，因此课前老师先展示一组利用表格制作的框架网页，要求学生仔细观察，找出它们的一个共同特点，并提问如何快捷地制作这种网页？从而引出本节课内容，并且在讲授内容的过程中，要耐心的进行演示教学，不能一味的口述使学生感到一片茫然。
教材分析：
从在本教材中所处的位置来看，《运用框架结构制作网页》是在创建新站点，制作简单网页、运用表格制作网页和动态网页之后。通过前面的学习，学生可以建立有多张网页的个人站点，在对网页的设计中会运用表格给网页布局，为了使网页增添动感，还会通过增加滚动字幕、动态按钮以及动画插件等方法，令网页更加具有活力。但是除了表格布局外，还有一种常见的布局形式，应用也相当广泛，学生在浏览一些著名网站时就能遇到，通过本节课《运用框架结构制作网页》学习，可以为学生解惑，帮助学生理解框架结构制作网页的应用。从教材的难易度分析，这部分知识点学生从来没有接触过，在前面学习其它的应用软件时也没有类似的地方，故而有一定难度，教学目标不能定的过高。
第二篇：《框架网页》教案
《框架网页》教案
八年级信息技术备课组
组长签名
授课人
教学目的：学习框架网页的制作方法，掌握框架网页的构成。教学重点：框架网页的制作, 框架网页的属性。教学时间：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主体”）。 相同框架：在左边框单击某个超链接时，其链接网页也将显示在左边框。 整页：单击某个超链接时，只显示所链接的网页，原来框架不再显示。 新建窗口：单击某超链接时，所链接的网页将显示在新打开的浏览器中。 父框架：单击某个超链接时，将返回上一级的框架。六）、上机操作
练习设计框架网页
”图片（或文字）。
”超链接工具按钮，出现【编辑超链接】对话框。这时在对话框的文件列表中
”按钮，出现一个对话框。
在对话框中，单击框架示意图中不同的区域，也可以单击右边列表框的选项，在对话框的“目
课堂小结
板书设计 ：
教学反思
第周八年级信息技术教案
第三篇：第五课 统一风格——制作框架网页
统一风格——制作框架网页
教学目标： 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.超级链接是实现网页互联的关键，设置网页的打开方式，可以调整链接网页的显示位置。
第四篇：网页制作教案
网页制作与设计教案
第一讲 网页设计概述....................................................................................................................3 1.1WWW和URL.....................................................................................................................3 1.2IE5的使用............................................................................................................................3 1.3 网页中所使用的技术............................................................................................................4 1.4 制作网页的基本方法............................................................................................................4 第二讲 HTML的基本标志与格式标志.......................................................................................4 2.1 HTML文档的基本结构.........................................................................................................5 第三讲 HTML的文本、图片与超级链接标志...........................................................................5 2.2 插入文字................................................................................................................................6 2.3 插入图片................................................................................................................................8 2.4 建立超级链接........................................................................................................................8 第四讲 HTML表格、表单与框架标志.......................................................................................9 2.5 插入表格................................................................................................................................9 2.6 表单的应用..........................................................................................................................10 2.7 框架窗口..............................................................................................................................10 第五讲 HTML标志综合运用案例.............................................................................................11 第六讲 DREAMWEAVER中简单WEB站点建立与管理.....................................................12 3.1 DREAMWEAVER概述............................................................................................................12 第七讲 DREAMWEAVER中静态网页设计.............................................................................13 3.2 在页面中加入文字和图像..................................................................................................14 3.3 超级链接的运用..................................................................................................................14 3.4.表格的应用.........................................................................................................................14 3.5.在网页中创建表单.............................................................................................................15 第八讲 DREAMWEAVER中动态网页设计.............................................................................15 第九讲 DREAMWEAVER综合性网页设计案例.....................................................................16 第十讲 VBSCRIPT概述.............................................................................................................17 4.1 VBSCRIPT语言简介.............................................................................................................17 第十一讲 VBSCRIPT的基本元素与输入输出.........................................................................18 4.2.基本数据类型.......................................................................................................................18 4.2.表达式和运算符.................................................................................................................19 第十二讲 VBSCRIPT的条件语句、循环语句和过程.............................................................20 4.3 VBSCRIPT基本语句.............................................................................................................20
第一讲 网页设计概述
【教学内容】
讲解网页设计的相关术语及网站制作的基本流程。【教学目的】
使学生对网站及网页有一定的认识，激发学生学习网页设计的兴趣。【教学重点】
网页设计中的若干术语。【教学难点】
理解网页设计中的若干术语。【教学方式】
讲授式、讨论式、案例分析式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《Internet 网页工场》Wittime工作室 重庆出版社。
3、《WEB网站设计》Joel Sklar著 高等教育出版社。
4、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
1.1 WWW和URL 1.1.1 Web的起源
Web是World Wide Web的简称，一般也称之为WWW或3W 1.1.2 Web的特点和结构
Web最大的特点是使用了超文本（Hypertext）WWW采用C/S（客户机/服务器）工作模式
在浏览器和服务器之间应用HTTP（Hyper Text Transfer Protocol，超文本传输协议）作为网络应用层通信协议 1.1.3 URL URL的完整格式
协议://主机名或IP地址：端口号/路径名/文件名
1.2 IE5的使用
Web浏览器是浏览Internet资源的客户端软件
在Windows环境下使用的浏览器主要有Internet Explorer、Netscape Navigator、Mosaic等
1.2.1 IE5的界面 1.2.2 IE5的使用
列表标志的使用。【教学方式】
讨论式、案例分析式、练习式。【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.1 HTML文档的基本结构
2.1.1 HTML语法
1、双标记
语法：
<标记>内容
2、单标记 语法：<标记> 最常用的单标记是
3、标记属性 语法
<标记
属性1 属性2 属性3 … > 例子
4、注释语句 格式
例子
2.1.2 HTML文档的基本结构 【课后小结】
通过本次课的学习,要求能熟练掌握网页面的基本标志与格式标志,并能灵活运用 列表,有序列表,无序列表标志及属性。
第三讲 HTML的文本、图片与超级链接标志
【教学内容】
讲解HTML标准中的文本、图片与超级链接标志 【教学目的】
* 使学生了解标题元素,掌握字体,上下标,及特殊字符的标志。
< EM>......，强调文字，通常用斜体。
< STRONG>......，特别强调的文字，通常用黑体。
......，以等宽体显示西文字符。
......，使文字大小相对于前面的文字增大一级。
......，使文字大小相对于前面的文字减小一级。......，使文字成为前一个字符的上标。......，使文字成为前一个字符的下标。
文本修饰 2.2.7
预格式化文本 使用预格式化标记
不再忽略在此之间的空格、制表符与回车符等元素 2.2.8 转义字符与特殊字符
一般转义符都是以“&”开始，以“；”结束，一个转义符之间不能有空格 2.2.9 文本强制换行和不换行 文本强制换行
不换行
标记
属性：Width，Size，Align，Noshade，color 2.2.11 使用列表
1、无序列表
- 列表条目1
- 列表条目2......
2、有序列表
- 列表条目1
- 列表条目2......
3、定义列表
- 列表条目1
- 条目1的说明
- 列表条目2
- 条目2的说明 ……
...... 2.4.4 图像地图 【课后小结】
本节介绍了在网页中加入文本、图片和超级链接的标志与相应属性，熟练运用这些标志是制作多媒体网页的基础。超级链接标志中，书签链接是一类特殊的链接方式，理解和使用书签链接学习HTML中超级链接标志的难点。
第四讲 HTML表格、表单与框架标志
【教学内容】
讲解HTML中制作表格、表单与框架的标志。【教学目的】
使学生掌握简单表格、表单与框架的制作。【教学重点】
* 表格中单元格的合并以及表格嵌套和叠加操作。* 框架的嵌套使用。* 表单元素标志与属性。【教学难点】
* 理解表格属性rowspan与colspan的含义以及表格嵌套实现的基本思想。* 理解框架属性name、target的意义。
* 理解表单中相应元素对应标志及属性的含义。【教学方式】
案例分析式、项目教学 【教学参考】
1、《网页设计与制作》杨尚森 曲宏山 贾文峰等著 电子工业出版社。
2、《WEB网站设计》Joel Sklar著 高等教育出版社。
3、《HTML网页制作教程》材义语编著 铁道出版社。【新课内容】
2.5 插入表格
2.5.1 在网页中插入表格
表格的基本构成元素：表头，单元格，列，行
| 第一行第一列 | 第一行第二列 |
| 第二行第一列 | 第二行第二列 |