制作框架网页
框架网页的制作
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.教学难点
框架中超链接的使用。
■教学方法与手段
对比教学法、探究学习法、模仿学习法。
■课前准备
制作相同结构的用以对比的表格网页和框架网页以及给学生用于操作的网站半成品和素材。
■教学过程。
第9章 制作框架网页
框架名称：用来作为链接指向的目标。 源文件：确定框架的源文档。 滚动下拉列表：确定当框架内的内容显示 不下的时候是否显示滚动条。 不能调整大小：限定框架尺寸，防止用户 拖动框架边框。
边框：用来控制当前框架边框。 边框颜色：设置与当前框架相信的所有框 架的边框颜色。 边框宽度：设置框架边框与内容之间的左 右边距 边框高度：设置框架边框与内容之间的上 下边距
9.2.3 保存框架网页
每个框架包含一个文档，因此一个框架 集会包含多个文件，在保存网页的时候， 不能只保存一个文档，要将整个网页文 档都保存下来。
保存框架网页的具体操作步骤如下：
选择“文件》保存全部”命令，整个框架 边框会出现一个阴影框，同时弹出“另存 为”对话框。因为阴影出现在整个框架集 内侧，所以询问框架集的名称。 将整个框架命名为index.htm，单击“保存” 按钮。 接下来出现第2个“另存为”对话框，因 为右边框架内侧出现阴影，询问右边框架 的文件名，将文件命名为right.htm，单击 保存按钮。
9.5.1 拆分框架
通过拆分框架，可以增加框架集的框架 数量，在文档中插入框架实际上是建立 嵌套框架。 两种方法拆分右侧框架：
将光标置于右侧框架中，单击“布局》框 架”下拉列表中的“底部框架”。 按ALT键选择右侧框架，然后向上拖动右 侧框架的下边框。
9.5.2 为框架设置链接
要在一个框架中使用链接打开另一个框 架中的文档，必须设置链接目标。
9.2.1 使用预设方式创建框架网页
操作步骤：
选择“文件》新建”命令，弹出“新建文 档”对话框，在“常规”选项卡中选择 “框架集”选项，在右边的“框架集”列 表中选择“上方固定，左侧嵌套”选项。 单击确定按钮，新建一个框架网页。
《七、 制作框架网页》作业设计方案-高中信息技术人教版选修3
《制作框架网页》作业设计方案（第一课时）一、作业目标通过本次作业，学生将掌握制作框架网页的基本概念和技能，包括了解网页框架的构成、学会创建框架、设置页面属性等。
通过实践操作，学生将加深对信息技术课程的理解，提高解决问题的能力。
二、作业内容1. 任务一：创建框架学生需要使用HTML代码创建一个简单的框架页面。
要求框架分为左右两个部分，左侧部分放置导航栏，右侧部分为内容区。
学生需要使用表格或div标签进行布局设计。
2. 任务二：设置页面属性学生需要设置框架页面的标题、背景颜色、边距等属性，使页面更加美观。
同时，学生需要使用CSS样式对内容区进行美化，如调整字体、大小、颜色等。
3. 任务三：链接和导航学生需要在左侧导航栏中添加链接，使页面可以跳转。
学生需要使用超链接标签<a>实现链接功能，同时确保链接的正确性和可用性。
三、作业要求1. 学生需独立完成作业，不得抄袭或使用其他方式获取答案。
2. 作业中使用的代码和设计应符合规范，符合网页制作的基本原则。
3. 学生需在规定时间内完成作业，并在提交作业时附上相应的注释和说明。
4. 鼓励学生在作业中运用创新思维，尝试不同的布局和美化方式，提高自己的实践能力。
四、作业评价1. 评价标准：根据学生的作业完成情况、代码规范性、页面美观程度等方面进行评价。
2. 评价方式：教师对学生提交的作业进行批改，给出相应的分数和评语。
同时，教师可以通过学生的作业反馈，了解学生对知识的掌握情况，以便在后续教学中进行调整和改进。
3. 评价结果：根据评价标准，对学生的作业进行评分和排名。
对于表现优秀的学生，给予一定的奖励和鼓励，以提高学生的学习积极性和自信心。
五、作业反馈1. 学生反馈：学生可以通过教师提供的反馈信息，了解自己的作业完成情况，找出自己的不足之处，及时调整学习方法和策略。
同时，学生可以向教师提出自己的疑问和困惑，寻求帮助和建议。
2. 教师反馈：教师可以通过学生的作业反馈，了解学生对知识的掌握情况，以便在后续教学中进行调整和改进。
网页设计类之框架的制作
框架所谓框架就是将一个窗口划分为若干个独立的子窗口（或区域），每个子窗口可构成一个独立的网页，即可有各自的标题、背景、内容等，对各个区域可进行独立的操作。
如为了使网页的版面结构清晰，我们可以对网页进行适当的区域分割，使网页中不同内容在不同区域中显示，达到布局合理的目的。
1、创建框架创建框架又叫创建框架集页面，有三种方法：（1）单击主菜单“文件”→“新建”命令或者单击标准工具栏上的按钮，弹出“新建文档”对话框，然后选择“框架集”如图1所示，选择所需的结构。
图1新建框架集窗口（2）在已打开的空页面中，单击主菜单“插入”→“框架”命令，在其子菜单中可以选择不同的框架样式，单击其中一种命令就可在编辑页面中插入相应的框架。
（3）在已打开的空页面中，直接单击“插入”面板组上的“框架”面板，然后选择所需的结构，如图2所示。
图2框架面板如选择所示的第一种结构：垂直拆分。
“显示设计”视图自动被拆分为左右两个窗口，显示如图3所示。
图3垂直拆分另外，可以通过单击主菜单“窗口”→“其它”→“框架”来显示或隐藏系统所提供的一个帮助编辑的“框架”面板。
框架分割线，可单击“文档”工具栏的“视图选项”按钮（弹出如图4所示的菜单）→“可视化助理”→“框架边框”进行显示和隐藏。
图4选择框架边框显示（隐藏）2、编辑框架集页面（1）手工调整框架页如图3所示。
①将鼠标移至区域之间的边框线，鼠标光标变成双向箭头，然后左右拖动可以调整左右窗口的大小。
②如需将页框再进行分割，可先在“框架”面板中选中对应的框（此时框线会变粗），如图5所示的小窗口。
再在“显示设计”视图中拖动相应边框至合适位置即可。
图5框架再分割如在“框架”面板中选取右框，拖动“显示设计”视图的右框下边框，即可将右框分割成一上下框结构，如图5所示。
③删除某个页框时，只需拖动其边框线至整个编辑窗口的外边框即可。
（2）通过属性检查器设置框架页在“框架”面板中，单击外框（或单击“显示设计”视图中各框架间的分割框线）以选取整个框架，属性检查器就会切换成框架集属性检查器，如图6所示。
实验十五制作框架网页
实验十五制作框架网页上机日期：2017年11月3日（计网16348)一、目的要求1、掌握框架网页的制作和保存方法。
2、掌握框架网页中链接目标的设置方法。
二、实验课时4课时三、实验内容1、制作一个框架网页，在各框架中输入不同文字或图片，最后保存该框架网页。
操作步骤：（1）新建空白文档，在其中插入一个“左侧和嵌套的顶部框架”框架页。
（2）命名框架，使用默认的框架名：leftFrame、topFrame和mainFrame。
（3）用“保存全部”、命令保存2个框架网页，命名为index.html、main0.html，再用“保存框架”分别保存left0.html和top0.html页面。
（4）在框架面板中选中最外层的框架集，选择“index.html”页面，将左框架的列宽80修改为200像素，选中右侧框架集，在属性面板中将top框架行高80修改为180像素。
（5）设置left0.html框架的背景颜色为“#A6DCF6”。
（6）光标定位在left0.html页面中，新建CSS样式，选择重定义HTML标签中的td标签，定义为字体为宋体，大小14像素，边框为1像素、实线、颜色“#006600”。
（7）在left0.html中输入“羊皮卷”，黑体，大小32，颜色“#006600”。
插入一个21行1列的表格，宽度170像素，重定义table标签边框为1像素、实线、颜色“#006600”。
单元格设置：背景颜色白色，高度30像素，对齐方式为水平垂直都居中。
将此框架属性面板中的“滚动”项设置为“是”。
（8）在表格中输入相应的文本：羊皮卷序言、羊皮卷之一、……、羊皮卷之十、羊皮卷的启示一、……、羊皮卷的启示十。
为文本建立空链接，修改链接的默认样式。
（9）对top0.html进行无缝页面的设置（左边距和上边距都设置为0）。
设置背景图像为fa3c762.jpg，并且设置背景不重复，背景颜色为“#A6DCF6”。
（10）光标定位在top框架，在其中插入1行1列的表格，宽100%高100，单元格水平居中对齐，输入文本“世界上最伟大的励志书—羊皮卷的故事”，设置文本的字体颜色和大小，效果如图1。
单元六制作框架网页共18页
单元六制作框架网页[学习目标]学习一种HTML中的高级特性：制作框架网页。
理解框架网页的概念，学习制作框架网页的布局与框架网页中的超链接。
框架网页是在同一个浏览器中将窗口画面分成几个框架，每个框架显示一个HTML文件。
通过学习，可以利用框架网页结构在一个窗口中间同时浏览多个页面，还可以在一个区域中显示所有页面的总索引，通过单击这个区域中的超链接，相关网页就会显示在另一个区域中，非常直观，使浏览者在浏览局部内容时仍对整个网站的结构有清晰的认识，不至于进入多层链接后而迷失方向。
6.1 创建框架网页[案例说明]利用制作框架网页的标记符，网页,网页文件为classgroup.htm。
classgroup.htm 代码(创建框架网页)<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>制作框架网页</title></head><frameset rows="32%,50%,*" framespacing="0" frameborder="0"图6-1框架网页 [代码分析]src="groupleftsrc="groupmaisrc="groupbott框架网页是在同一浏览器窗口中显示多个相互隔离的HTML页的结构，它是HTML中的新特性，提供了一种全新的组织Web的方法。
使用框架网页组织页面时，每个框架可显示一个不同的独立页面或者图像，可以将一些框架中的内容保留在浏览器窗口中，而使其余窗口的内容发生改变。
图6-1所示框架网页将浏览器窗口分为上、中、下三行（<frameset rows="32%,50%,*" framespacing="0" frameborder="0" border="0">）。
教学设计：制作网页(框架)
教学设计：制作网页（框架）学习目标:制作框架网页在网页中插入字幕和超链接知识制作框架网页框架网页是一种特殊的网页，它将窗口划分成若干小窗口区域（框架）。
每个框架独立显示一个不同的网页（有自己的网页名字），整个框架网页有一个总的名字。
框架与表格在组织网页结构时相似。
表格是对页面区域进行划分，框架是对整个浏览窗口进行划分。
·创建框架网页：单击菜单文件→新建→网页，选择框架网页标签→选择嵌套式层次结构·选中的框架边框为蓝色，在拆分或删除框架时应注意是否选中。
·隐藏框架间的横线：右击框架网页→单击框架属性→在对话框中单击框架网页按钮，在网页属性对话框中选框架标签→设置显示边框为未选中状态。
·按住键，拖动鼠标可以快速拆分框架。
·删除框架：单击菜单框架→删除框架。
·保存框架网页时注意要保存所涉及到的所有网页。
·更改框架链接的网页：右击相应的超链接→在弹出的快捷菜单上选择超链接属性命令，打开超链接对话框→可直接选择列出的文件，或在框中输入网页的地址→单击目标框架右边的更改目标框架按钮，在当前框架网页中选择目标框架。
网页中插入字幕·插入字幕：光标定位插入点→单击插入→组件→字幕打开字幕属性对话框；→在文本框中输入文字，选择方向速度表现方式等；→选中字幕，拖动鼠标，调节字幕运动范围。
·修改字幕：双击字幕，可以打开字幕属性对话框，对字幕属性进行修改。
超链接相关网页超链接是从一个网页指向另一个目标的连接。
一般在网页中的某文字或图片上设置超链接。
·创建超链接：单击文字或图片→常用工具栏的超链接按钮，打开创建超链接对话框。
·取消超链接：选中具有超链接的文本或图片，单击超链接按钮，在打开的对话框中将栏中的内容删除。
·跟踪超链接：在超链接上右击，在打开的快捷菜单上选择跟踪超链接命令；或：在普通视图中，按住键，将光标移到超链接上，单击，会跟踪连接到超链接指向的目的位置。
第3单元 制作框架网页
5、认识框架网页的视图 （1）用FrontPage打开一个框架网页，单击“设计” 选项卡，进入“设计”视图。 （2）单击“拆分”选项卡，进入“拆分”视图。 （3）单击“无框架”选项卡，进入“无框架”视图。 （4）单击“代码”选项卡，进入“代码”视图。 （5）单击“预览”选项卡，进入“预览”视图。
二、设计框架网页
五、保存框架网页
1、在菜单栏中选择“文件/保存”，弹出“另存为”对话框。 2、在“另存为”对话框中一一保存各个框架（如横幅框架、 目录框架和主要框架）。 （1）在“另存为”对话框中，输入对应文件和网页标题，保 存“横幅框架”。 （2）单击“保存”按钮后，预览框中又选中了目录框架，输 入对应文件名和网页标题，保存“目录框架”。 （3）保存完目录框架后，预览框中显示选择了整个网页框架， 输入对应的文件名和网页标题，保存网页设置文件。
将“多面的我”网页设计为框架网页。 多面的我（标题）
（目录） 好文的我 好动的我 好摄影的我
（单击左边目录，动态显示相应内容）
知识充电站： 如果一个站点在浏览器中显示为包含3个框架的单个页面，则它实际上 至少由4个单独的页面组成：框架集页面以及3个单个页面，这3个单个 页面包含这些框架内初始显示的内容。当在Frontpage中设计使用框架 集的页面时，必须全部保存这4个页面，以便该页面可以在浏览器中正 常工作。
一、认识框架网页
1、框架网页的作用：是将浏览器窗口划分为若干个不同的区 域，每个区域可以分别显示不同的网页。 2、框架的组成：框架集和单个框架。 3、框架集和单个框架的定义：框架集是指框架网页显示的框 架数、框架的大小、载入框架的网页源和其他可定义的属 性等。单个框架是指在网页上定义的一个区域。 4、框架网页：是通过超链接将不同的单个框架建立起了联系， 从而实现页面的导航和页面间的交互操作。
应用框架制作网页操作步骤
应用框架制作网页操作步骤：一、套用框架1、新建一个Dreamweaver 文档，然后在“布局”类的插入工具栏中单击“框架”按钮右边的下向箭头，在调出的列表中选取“左侧和嵌套的顶部框架”项，并在文档工具栏的“标题”框中输入“巴黎三日游”。
若见不到框架框线，则可选择“查看→可视化助理”命令，然后选取“框架边框”项。
2、设置框架的宽度与高度按Shift+F2键，或者选择“窗口→框架”命令，在面板组中显示出框架面板。
1）设置左侧单元格的宽度为150像素在框架面板中单击框架集的最外端边框，以选取框架集，此时的属性面板如下图所示。
在属性面板中单击左侧框架，输入列值为150，单位为像素；再单击右侧框架，以让系统自动将单位设置为“相对”。
2）设置右侧之顶部框架的高度为45像素在框架面板中单击右侧框架的外框，以选取右侧框架，然后在属性面板中单击顶部框架，并输入行值为45像素；再单击下方框架，以让系统自动将单位设置为“相对”。
二、指定各框架的显示内容1、指定左侧框架的显示内容在框架面板中单击左框架（leftFrame ），然后在属性面板中单击“源文件”框右侧的“浏览”按钮，选取源文件为parise 文件夹中的parisdiaryleftmenu.htm ，并单击“确定”按钮。
2、指定右侧顶部框架的显示内容左侧框架右侧框架顶部框架下方框架在框架面板中单击右侧顶部框架（topFrame），然后在属性面板中单击“源文件”框右侧的“浏览”按钮，选取源文件为parise文件夹中的parisdiarytopmenu.htm，并单击“确定”按钮。
3、指定主框架（右侧下方框架）的显示内容在框架面板中单击右侧下方框架（主框架，mainFrame），然后在属性面板中单击“源文件”框右侧的“浏览”按钮，选取源文件为parise文件夹中的parisdiarymain.htm，并单击“确定”按钮。
三、指定链接框架并保存之框架集网页是由框架所组成的。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
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网页， 它可以将浏览器窗口分成不同的区域，称 为框架区域，每个区域都可以保存并显示 一个不同的网页。