制作框架网页
1．保存框架
图8-9 “保存为”对话 框
2．保存框架集
8.4 设置框架和框架集属性
框架属性确定了框架集内各个框架的 名称、源文件、边框的框架能否调整大小 等。框架集属性确定框架的大小和框架之 间的边框宽度和颜色等。在框架结构文档 中，框架和框架集都有各自的属性设置面 板，它们的属性应该分别进行设置。
8.4.1
框架的属性
1．启动框架属性面板
图8-10 “框架”控制面板和框架属性面板
2．设置框架的属性
8.4.2
框架集的属性
1．启动框架集属性面板
图8-11 “框架”控制面板和框架的属性
1．设置框架的大小
2．设置框架和框架集的边框 3．设置框架或框架集的边框颜色 4．改变框架的背景色
8.2 创 建 框 架
Dreamweaver MX创建框架集的方法
有两种：一是可以自己设计，二是可以从 几个预设的框架集中选择。
8.2.1
插入预设的框架集
图8-2 “框架”面板
提示：在“框架”面板中，预设的框 架集是由两种颜色组成的，其中浅蓝色的 区域表示在创建框架后，原文档内容所在 的位置。白色区域则表示新创建的框架文 档所在的位置。
8.5.1
框架内的链接
框架内的链接就是建立一个框架内不 同HTML页面间内容的链接和跳转。
8.5.2
关键字的链接
关 键 字的 链 接是 指 在属 性面板中的 “目标”下拉列表框中列出的原有参数， 用来确定所链接文件的显示位置，它不同 于框架名称的参数（如 mainFrame ），这 些参数有4种，其含义如下。 _blank _parent _self _top
1．利用框架控制面板选定框架和框架集 2．在文档视窗中选定框架和框架集 3．切换所选定框架和框架集
8.3.2
删除框架
8.3.3
在框架中打开网页文档
创建框架的目的是在框架中建立新的 网页或打开已有的网页文档。
8.3.4
保存框架和框架集
框架集文件和与之相关的框架文件必 须先保存，才能在浏览器中预览整个框架 网页内容。可以分别保存框架集页面或框 架页面，也可以同时保存所有打开的框架 文件和框架集页面。
8.2.2
设计和插入框架集
“框架”面板上的预设框架集几乎包
含了一般的框架格式，当然也可以自己设 计框架格式，灵活运用框架集。
8.3 编 辑 框 架
8.3.1
选定框架和框架集
在对框架进行编辑操作之前必须先选 择所需的框架，可以直接在网页文档视窗 中选择框架，当然利用“框架”控制面板 对框架进行操作比较方便。
8.5 链 接 框 架 的 内 容
利用框架结构，可以把导航条内容固
定在页面的顶部、左边或右边。在浏览网
页时，用户可以直接选择导航条上相应的
内容，切换到所对应的页面，这都需要事
先对各个框架建立超链接。
要想在框架内使用链接，必须为链接 设置一个目标，该目标是指框架内链接要 打开的网页内容。根据链接目标的不同， 框架中的链接主要有两种：框架内的链接 和关键字的链接。
框架是在同一个浏览窗口中显示多个 网页的技术，框架网页是一种特殊的网页。 框架将窗口划分为不同的部分，各部分中 都有各自的网页，总体构架出一个框架集。 此外，通过为超链接指定目标框架，可以 在框架之间建立起以内容为媒介的联系，
因而实现页面导航的功能。
8.1 认 识 框 架 网 页
框架（Frames）技术由框架集 （Frameset）和框架（Frame）两部分组成。 框架网页是一种特殊的HTML网页， 它可以将浏览器窗口分成不同的区域，称 为框架区域，每个区域都可以保存并显示 一个不同的网页。
框架网页的制作
2 4添加新字体 3选择其中一种
3、下框架的制作
修改文字大小
选择本行中表格背景图， 如所选图像不在网页根 目录中，则按照提示方 法复制图像到网页所在 位置的“images”中
3、下框架的制作
添加图像到文字下一行的单元格中，每格 一图，也可尝试将单元格合并，四幅图插 入到一行中。 给图像添加超链接：选择中国儿童网图片， 右键-创建链接
3、下框架的制作
1、按照上框架制作的方法，插入表格：3 行，4列，宽780，其余为0 2、合并第一行的四个单元格并复制相应 文字到下框架的第一行中（ctrl+c复制， ctrl+v粘贴） 3、表格中任意处单击，在属性面板中选 择“页面设置”调整字体和背景
3、下框架的制作
修改字体四部曲
33行44列宽列宽780780其余为其余为0022合并第一行的四个单元格并复制相应合并第一行的四个单元格并复制相应文字到下框架的第一行中文字到下框架的第一行中ctrlcctrlc复制复制ctrlvctrlv粘贴粘贴33表格中任意处单击在属性面板中选表格中任意处单击在属性面板中选择页面设置调整字体和背景择页面设置调整字体和背景4添加新字体修改字体四部曲修改文字大小选择本行中表格背景图如所选图像不在网页根目录中则按照提示方法复制图像到网页所在位置的images中添加图像添加图像到文字下一行的单元格中每格到文字下一行的单元格中每格一图也可尝试将单元格合并四幅图插一图也可尝试将单元格合并四幅图插给图像添加超链接
URL中输入：
4、版权
合并表格最下面一 行的单元格，键入 版权信息文字，版 权符号的添加方法 如右图所示
版权信息
学而不思则罔
分析：1、框架？框架集？有何作用？ 回顾：鼠标经过图像的制作方法 属性面板你会用了吗？ 思考：为什么网页及网页中的元素要存放 在一定的路径中？
设计框架网页
• 单击中间右框中的“设置初始页面”按钮， 弹出“插入超链接”对话框，如下图所示， 在对话框中选择要加入的网页文件，单击 确定
4.组织框架间的调用关系
• 我们要让中间左框中的导航菜单添加超链 接，所链接的页面在调入时全部出现在框 架“main”中。 • 我们就应该“单击“设置超链接”窗口右 侧的“目标框架”按钮，弹出“目标框架” 对话框，如图所示，这个时候，“main”框 架就是默认值，直接单击“确定”。
什么是框架网页？
• 框架就是可以将浏览器窗口分 割成几个小区域，每个区域相 对独立，可以显示不同的网页 内容，这些区域就称为框架， 具有这种功能的网页，就叫做 框架网页。
1. 创建框架网页
• 单击“文件”—＞新建—＞网 页—＞框架网页—＞标题、页 脚和目录—＞确定。 • 然后就出现下面这个界面
2.设置框架属性
• （1）右击框架弹出快捷菜单选择“框 架属性”，打开“框架属性”对话框， 介绍框架名称、控制框架边界的大小 及是否用滚动条。
• （2）在对话框中，单击“框架网页” 按钮，打开“网页属性”对话框,单击 “框架”选项卡，定义“框架间距” 和图的上框中的“新建网页”按钮，在 页面中插入华南虎图片素材。 • 单击图的左框中的“新建网页”按钮，在 页面中输入一个“6行1列”的表格(在菜单 栏-表格选择)在单元格输入物种命名、外 形特征等导航菜单项，并设置单元格的背 景色。 • 在图的下框输入“版权所有 海西小学五 年级（6）班”等文字
〖2021年整理〗《第十三 制作框架网页》完整版教学课件PPT
单击“目标框架” 按钮
“main”框架就是 默认值，直接单击 确定。
用同样的方法，设置其他导航菜单项的超 链接，完成后预览网站效果，并保存。
提示：对于新建的框架网页，保存框架网 页需要一课创建的“mite” 网站，然后打开网站中的 “”文档
范
任务二：设定初始页面 例
插入网站标题 图片素材
插入6行1列表格
弹出超链接对
话框中选择“” 网页文件
任务三：设置框架属性
任务四：设置导航菜单项的超链接
1 选中左框中“应急避险须知”文字，右键 单击，在快捷菜单中选择“超链接命令”
第十三课 制作框架网页
框架网页作品最终浏览效果：
浏览器被分成四个区域， 每个区域都是单独的网页， 通常情况下只有右框的内 容需要随着左框选择项目 的不同而发生变化。 制作框架网页可以看成 “一种”拼图游戏，就是 将若干个独立相关的网页 组合在一起，形成完整的 框架网页。
任务一：打开网站
制作框架网页可以看成 “一种”拼图游戏，就是 将若干个独立相关的网页 组合在一起，形成完整的 框架网页。
制作框架网页
第13课制作框架网页教学目标：1.能打开上节课创建的框架网页，为主框架设置初始网页，设置框架属性。
2.能为选中的对象设置链接的网页，并将该网页安排在合适的框架中；理解框架间的调用关系。
3.学会保存框架网页。
教学重点：能为主框架设置初始网页；为选中的对象设置链接的网页，并将该网页安排在合适的框架中；理解框架间的调用关系，会保存框架网页。
教学难点：为选中的对象设置链接的我那过夜，并将该网页安排在合适的框架中；理解框架间的调用关系。
课时安排：1课时教学过程：一、对比作品，导入新课1.展示上节课的半成品“防震减灾专题网站”和“防震减灾专题网站”框架网页的成品，引导学生欣赏，对比作品。
2.出示教材第73页的图13-1，并讲授：制作框架网页网页可以看作是一种“拼图”游戏，就是将若干个独立相关的网页组合在一起，形成一个完整的框架网页。
3.出示课题。
二、制作防震减灾专题网站1.打开网站，设定初始页面。
（1）讲授并演示：启动FrontPage,单击“打开网站”命令，打开上节课创建的“mysite”网站中的“”文档。
（2）打开框架网页时，第一次出现在框架的网页称为初始页面，如何设定初始页面呢？（3）布置任务：出示“防震减灾专题网站”初始页面图，引导学生以小组为单位探究设定初始页面的方法。
（4）引导学生反馈设置初始页面的过程，并针对学生的演示给予讲解。
2. 设置框架属性（1）讲授并演示：在中间右框空白处单击右键，选择“框架属性”命令，查看框架的默认名称；单击“框架网页”按钮，打开“网页属性”对话框，单击“框架”选项卡，定义“框架间距”和是否“显示边框”。
（2）布置任务：用同样的方法设置其他框架的属性。
3.组织框架间的调用关系。
（1）引导学生回忆如何在导航菜单设置超链接。
（2）请学生演示设置导航菜单的超链接。
（3）教师演示并说明框架间的调用关系。
（4）布置任务：为导航菜单设置超链接，设定框架间的调用关系，保存、预览框架网页。
制作框架网页
第五课制作框架网页教学目标：1．掌握拆分单元格的方法。
2．掌握创建与保存框架集的方法。
3．熟练掌握利用鼠标经过图像制作网页导航的方法。
4．掌握外部链接和电子邮件链接的制作方法。
5．掌握目标设置在网页制作过程中的作用和方法。
教学重点：培养学生的兴趣。
教学媒体：远程教育资源教学课时：3课时教学过程授课日期：4月5日-4月23日一：引课在进行网站制作的时候，为了有效地统一网站的风格，常常需要将页面划分成多个区域，将各个网页的相同内容（如网站标题、网站导航等）固定在一个区域中，使网站导航结构清晰。
利用框架可以轻松实现网页结构划分和布局。
演示网页范例：给学生展示一些比较有特点的使用了框架的网页范例，通过观察了解网页布局的基本规律和框架在网页中的作用，对框架有一个初步的了解和感性认识。
提出任务：用两节课时间，学习如何创建框架、制作框架网页。
在制作的过程中，要注意随时保存文件。
二：（1）创建和保存框架集利用“新建文档”的方式创建框架集，是比较直接的创建框架的方法。
根据实际网页布局的需要，可以方便地选择框架集的样式，从而创建合适的框架。
步骤1：执行“文件”→“新建”命令，选择常规标签，选择框架集选项。
单击创建按钮。
步骤 2：执行“文件”→“保存全部”命令。
打开另存为对话框。
双击frame 文件夹，将文件保存在frame文件夹中。
重命名框架集文件名为all.html，单击保存按钮；重命名下框架集文件名为main.html，单击保存按钮；重命名上框架文件名为top.html，单击保存按钮即可。
步骤 3：单击框架面板中的边缘部分，选中框架集，在“属性检查器”中设置框架集的属性。
（2）利用鼠标经过图像制作导航按钮鼠标经过图像由页面载入时显示的原始图像和鼠标指针经过时显示的图像组成，这两个图像应大小相等，如果图像大小不等，将自动调整第2个图像的大小以匹配第1个图像的属性。
在浏览器中当鼠标指针移过图像时，图像可以发生变化，利用鼠标经过图像的这种特殊效果，可以制作动态网页导航按钮。
制作框架网页教案
制作框架网页教案教案标题：制作框架网页教案教学目标：1. 学生能够理解什么是框架网页，并能够解释其作用和优势。
2. 学生能够使用HTML和CSS创建框架网页的基本结构和样式。
3. 学生能够利用框架网页设计和布局内容。
教学资源：1. 计算机和互联网连接2. HTML和CSS编辑器（如Sublime Text、Notepad++等）3. 网页浏览器（如Chrome、Firefox等）教学步骤：引入：1. 向学生介绍框架网页的概念，并解释其在网页设计中的作用。
2. 引导学生思考框架网页与普通网页的区别，并列举框架网页的一些应用场景。
主体：3. 讲解HTML框架标签的基本语法和用法，包括`<frameset>`、`<frame>`和`<noframes>`标签。
4. 演示如何创建一个简单的框架网页结构，包括水平和垂直分割的框架。
5. 引导学生实践创建自己的框架网页结构，并帮助他们解决可能遇到的问题。
6. 讲解CSS样式表的基本语法和用法，包括如何为框架网页添加样式和布局。
7. 演示如何为框架网页添加背景颜色、边框、字体等样式效果。
8. 引导学生实践为自己的框架网页添加样式和布局，并鼓励他们发挥创造力。
总结：9. 回顾框架网页的概念和创建过程，确保学生对所学内容有一个清晰的理解。
10. 鼓励学生分享他们创建的框架网页，并提供反馈和建议。
教学评估：1. 观察学生在实践中的表现，包括他们是否能够正确创建框架网页的结构和样式。
2. 收集学生的框架网页作品，评估其创意和设计水平。
3. 进行小组或个人讨论，让学生分享他们对框架网页的理解和应用。
拓展活动：1. 鼓励学生进一步探索框架网页的高级功能，如跨框架通信、动态调整框架大小等。
2. 引导学生学习响应式网页设计的基本概念和技巧，以适应不同设备和屏幕尺寸。
教学反思：1. 教学过程中，及时观察学生的学习情况，根据需要进行适当的调整和辅导。
网页设计与制作设计框架网页
第8章 设 计 框 架 网
16
页
8.1 框架网页
■ 框架实例
■ 创建链接。
■ 如果希望链接地对象（文本或者图片）在 一个框架内部,而链接地页面则在另外地框
架内打开,那么就需要通过设置目的打开方
式来控制框架地显示内容。在设置好链接
之 后 , 使用属性面板里地Target（目的）弹
出菜单,可以指定在哪个框架打开被链接地
■ 创建各种框架 ■ 方法1:选择"修改"→"框架集"→"拆分左,右,
上 , 下框架"命令。
2023-02-15
第8章 设 计 框 架 网
6
页
8.1 框架网页
■ 创建各种框架 ■ 方法2:按住Alt键 , 然后拖曳任一条框架边框,
这样可以垂直或水平分割文档（或已有地 框架） ; 按住Alt键 , 然后从一个角上拖曳框 架边框,这样也可以把文档（或已有地框架） 划分为4个框架。
■ 接下来分别在"框架"面板选择相应地框架, 然后在框架属性面板里插入相应地网页就 可以完成了。
2023-02-15
第8章 设 计 框 架 网
28
页
8.1 框架网页
■ 保存框架集 ■ 框架集地实质就是把浏览器窗口划分为几
个可相同可不同地小区（即框架） , 然后可 以在每个小区独立显示一个网页文件 （html文件） , 而最后这些独立小区地组合 就是所谓地框架集。
2023-02-15
第8章 设 计 框 架 网
7
页
8.1 框架网页
■ 插入预定义框架集 ■ Dreamweaver通常预定义了多种框架集,
通过使用预定义框架集,我们就可以轻易创 建想要地框架集。选择"插入"→"HTML" →"框架"命令然后选择一种框架,框架集生 成时可以对每一个框架命名。
框架型网页的制作
实验六框架型网页的制作一、实验目的1、掌握框架集和框架的创建和保存；2、掌握框架、框架集的编辑和属性的设置；3、掌握框架超级链接。
二、实验内容利用框架制作如下图所示的页面效果，框架集网页为index.html，其中：图2-9-1为打开index.html的效果图；图2-9-2 单击左侧“勇敢的心”的网页效果图；图2-9-3 单击左侧“肖申克的救赎”的网页效果图；图2-9-4 单击左侧“阿凡达”的网页效果图；图2-9-5 单击左侧“战马”的网页效果图；图2-9-1 图2-9-2图2-9-3 图2-9-4图2-9-5三、知识点分解该实验主要涉及的知识点就是框架和框架集的保存以及设置超链接的目标框架。
四、实验步骤1、选择[文件]/[新建]菜单命令。
2、在“新建文档”对话框“示例中的页”列表中选择“框架集”选项。
3、从“框架集”列表选择相应的框架集，如图2-9-8所示。
图2-9-8 “新建文档”对话框4、单击按钮，则会弹出“框架标签辅助功能属性”对话框，为每一框架指定一个标题，单击“确定”按钮，则上方框架标题为“topFrame”，左侧框架标题为“leftFrame”，右侧框架标题为“mainFrame”。
5、选择[查看]/[可视化助理]/[框架边框]菜单命令，则在文档中就会出现框架的边框。
6、选择[文件]/[保存全部]菜单命令，将框架集文件保存为index.html，上方框架文件保存为top.html，左侧框架文件保存为left.html，右侧框架文件保存为main.html。
注意：对于框架集和框架文件保存的文件名，一定要做的看到文件名就能知道该文件对应与该框架集中的哪个框架。
7、选择[窗口]/[框架] 菜单命令，打开“框架”面板，直接在面板中单击最外面的框架集，打开属性对话框，设置“行值”：119px，再选择里面嵌套的框架集，设置“列值”：253px。
8、打开top.html，依次插入图片，定义图片宽和高均为200px。
《制作框架网页》PPT课件
8.4 设置框架和框架集属性
框架属性确定了框架集内各个框架的 名称、源文件、边框的框架能否调整大小 等。框架集属性确定框架的大小和框架之 间的边框宽度和颜色等。在框架结构文档 中，框架和框架集都有各自的属性设置面 板，它们的属性应该分别进行设置。
8.4.1 框架的属性
1．启动框架属性面板
图8-10 “框架”控制面板和框架属性面板
创建框架的目的是在框架中建立新的 网页或打开已有的网页文档。
8.3.4 保存框架和框架集
框架集文件和与之相关的框架文件必 须先保存，才能在浏览器中预览整个框架 网页内容。可以分别保存框架集页面或框 架页面，也可以同时保存所有打开的框架 文件和框架集页面。
1．保存框架
图8-9 “保存为”对话 框
2．保存框架集
利用框架结构，可以把导航条内容固 定在页面的顶部、左边或右边。在浏览网 页时，用户可以直接选择导航条上相应的 内容，切换到所对应的页面，这都需要事 先对各个框架建立超链接。
要想在框架内使用链接，必须为链接 设置一个目标，该目标是指框架内链接要 打开的网页内容。根据链接目标的不同， 框架中的链接主要有两种：框架内的链接 和关键字的链接。
2．设置框架的属性
8.4.2 框架集的属性
1．启动框架集属性面板
图8-11 “框架”控制面板和框架集属性面板
2．设置框架集的属性
8.4.3 设置或更改框架的属性
1．设置框架的大小 2．设置框架和框架集的边框 3．设置框架或框架集的边框颜色 4．改变框架的背景色
8.5 链 接 框 架 的 内 容
8.3 编 辑 框 架
8.3.1 选定框架和框架集
在对框架进行编辑操作之前必须先选 择所需的框架，可以直接在网页文档视窗 中选择框架，当然利用“框架”控制面板 对框架进行操作比较方便。
框架网页的制作
框架网页的制作
■教学目标
1.知识与技能
（1）理解框架的概念与用途。
（2）掌握框架网页的新建、制作、编辑与保存的方法。
（3）初步掌握将框架结构与表格布局结合使用来制作网页。
（4）会在框架网页中设置超链接。
2.过程与方法
（1）通过对表格网页的分析以及表格与框架网页的对比，体验新知识（框架结构网页）的优点，从而促进其学习新知识。
（2）理解框架的概念与组成，学会分析网站的结构。
（3）感受框架网页的用途，体会其优点，从而明确框架网页设计技术的适用范围。
3.情感态度与价值观
（1）通过以“母亲节的祝福”为主题的框架结构网页制作活动，提升对母爱的理解，学会感恩。
（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。
4.行为与创新
在老师的引导下学会对比学习，培养对知识的主动探索、主动发现和对所学知识意义的主动建构。
■教学重点与难点
1.教学重点
框架网页的建立与保存。
2.教学难点
框架中超链接的使用。
■教学方法与手段
对比教学法、探究学习法、模仿学习法。
■课前准备
制作相同结构的用以对比的表格网页和框架网页以及给学生用于操作的网站半成品和素材。
■教学过程。