框架网页的特点及制作方法.
网页设计中的框架是什么-优缺点-注意什么问题
网页设计中的框架是什么-优缺点-注意什么问题框架是网页中常用的一种页面制定方法。
frame的功能是在一个浏览器窗口中将网页分成假设干不同的区域，以便在一个浏览器窗口中显示多个HTML页面。
框架是网页中常用的一种页面制定方法。
frame的功能是在一个浏览器窗口中将网页分成假设干不同的区域，以便在一个浏览器窗口中显示多个HTML页面。
使用该框架可以非常方便的完成导航工作，使网站的结构更加清楚，并且各个框架之间没有干扰;使用该框架的特点是使网站的风格坚持一致。
通常，网站的同一部分被做成一个页面，作为整个网站框架结构的子框架的内容。
框架结构由两部分组成：框架：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分中显示的内容无关的web 文件。
Frameset:Frameset也是一个网页文件。
它将窗口按行和列划分为多个框架。
帧数取决于有多少页。
每个框架中显示不同的网页文件。
所谓框架，就是把网页分成几个框架窗口，同时获得多个网址。
Ltframeset用于划分框架窗口。
每个框架窗口都有一个，必须在的范围内使用。
2 网页制定框架的优缺点有哪些1、优点(1)访问者的浏览器不必须要为每个页面重新加载与导航相关的图形。
(2)每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下)，因此访问者可以独立滚动这些框架。
例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不必须要再滚动回顶部来使用导航条。
2、缺点(1)可能难以实现不同框架中各元素的准确图形对齐。
(2)对导航进行测试可能很耗时间。
(3)各个带有框架的页面的URL不显示在浏览器中，因此访问者可能难以将特定页面设为书签(除非您提供了服务器代码，使访问者可以加载特定页面的带框架版本)。
3网页制定框架应注意的问题1、避免框架和内联框架框架和内联框架使得搜索引擎难以抓取网站，因为它们与标准所约定的一个网页就是一个html文件相背驰，而是包涵了多个html文件。
网页设计与制作——框架技术
框架集的属性设置
边框：设置是否显示边框，对整个框架集有效。有三个值 （是－显示；否－不显示；默认－与其他框架一样）。 边框颜色：设置边框的颜色。 边框宽度：设置边框线的宽度，默认为6像素，若不想要边 框，则设为0。 行或列：设置框架的高度或宽度。
单位：设置距离的单位。
框架尺寸的调整
框架的基本概念
框架是浏览器窗口的一个区域 ，在这个 区域中可以显示一个单独的文档而不影 响另一个区域中显示的内容。 在一个页面上可以分出多个区域设置多 个框架，把这些框架看成一个整体，就 称为框架集。框架集定义了窗口的布局 结构。
使用框架结构的好处
版面布局美观 通过目录、索引来引导阅读内容的导航 用于导航时链接内容显示，不破坏版面 的结构，不破坏目录或导航条的作用， 使浏览者一直清楚自己处在什么位置。 加快网页的下载速度。
选择框架或框架集
1.选取框架 方法一：欲选取某个框架集，只需 在框架面版相应的框架单击即可。
方法二：在文档窗口中，按住ALT 键，在欲选的框架里点击，便选取 了相应的框架。
选择框架或框架集
2.选取框架集 方法一：在框架面版中，单击立体边框。 方法二：在文档窗口中将鼠标移动到框 架与框架集只见的分隔线上，单击鼠标 左键即可选中相应的框架集。
利用框架技术进行网页制作
信息技术学院 郑义
问题引入
没有使用框架技术的网页的通病
为什么要使用框架 框架的基本概念 框架集和框架
问题引入
在浏览同学们完成的第二次网页作品时，当我们 单击页面上的某个超级链接时，就会打开一个新 的浏览器窗口，而原来的浏览器窗口不是被关闭 了，就是被新的浏览器窗口给遮挡住了。迷航现 象的产生是由于网页设计者的考虑不周造成的。
第八章框架网页
（2）将框架平均分成两行或两列 ）
将光标放在要拆分的框架边框内，选择“框架” 拆分框架 拆分框架” 将光标放在要拆分的框架边框内，选择“框架”|“拆分框架”命令弹 拆分框架”对话框。 拆分为行” 拆分为列” 单击“确定” 出“拆分框架”对话框。选择 “拆分为行”或“拆分为列”，单击“确定” 按钮。 按钮。
第二节 利用FrontPage 2003处理框架 利用FrontPage 2003处理框架 一、创建框架网页
选择“文件” 新建 命令，打开“新建网页” ① 选择“文件” “新建 ” 命令，打开“新建网页”和“新 建站点”窗格； 建站点”窗格； ② 单击“新建网页”下面的“其他网页模板”超级链接， 单击“ 新建网页 下面的“其他网页模板” 超级链接， 下面的 打开“网页模板”对话框； 打开“网页模板”对话框； 单击“框架网页”选项卡，显示十种网页模板， ③ 单击“框架网页”选项卡，显示十种网页模板，选择其 中任一种形式，在对话框右边会出现该模板形式的说明， 中任一种形式，在对话框右边会出现该模板形式的说明，以及 模板预览。 模板预览。 单击每个框架中的“新建网页”按钮， ④ 单击每个框架中的“新建网页”按钮，各编辑区变成编 辑状态， 可以依次编辑各个网页。 辑状态 ， 可以依次编辑各个网页 。 单击每一个框架区域中的 设置初始网页”按钮将打开一个对话框， “设置初始网页”按钮将打开一个对话框，可以在该对话框中 选择一个网页作为框架网页最初显示的网页，并显示在框架区 选择一个网页作为框架网页最初显示的网页， 域中。 域中。
四、在框架网页中设置超链接
在框架组中设置超级链接后，单击超级链接， 在框架组中设置超级链接后，单击超级链接，该链接所指向的网 页 通常会在另一个框架中打开， 即会在目标框架 中打开。 在使用 通常会在另一个框架中打开 ， 即会在 目标框架中打开 。 目标框架 中打开 FrontPage 2003的框架网页模板所创建的框架网页下，目标框架已经 的框架网页模板所创建的框架网页下， 的框架网页模板所创建的框架网页下 设置好了。在框架组中设置超链接与在普通的网页中设置超链接相同 与在普通的网页中设置超链接相同， 设置好了。在框架组中设置超链接与在普通的网页中设置超链接相同， 也可以设置文本超链接和图片超链接。 也可以设置文本超链接和图片超链接。
浅谈框架网页的学习
浅谈框架网页的学习框架网页是当前互联网发展的一个重要组成部分，其在网页开发中起到了至关重要的作用。
学习和掌握框架网页的技术对于网页设计师和开发者来说至关重要。
本文将从框架网页的概念、作用、学习方法等方面进行浅谈。
一、框架网页的概念框架网页是指利用框架技术将一个网页拆分成若干部分，每个部分都可以独立加载，具有独立的功能。
框架网页的制作思路是将一个网页分成几个部分，每个部分可以单独操作，而不需要整个页面再次加载。
在框架网页中，主要包含了框架页和嵌套页。
框架页是用来定义框架的页面，而嵌套页是被框架页引用的页面。
框架网页具有以下几个特点：1. 界面整洁：可以将网页的不同部分分离开来，使页面看上去更加整洁清晰。
2. 节约带宽：一旦框架网页加载完毕，只需要重新加载页面内容即可，可以节省带宽和提高页面加载速度。
3. 提高用户体验：框架网页可以提高用户的使用体验，使用户在浏览页面时更加舒适和方便。
三、框架网页的学习方法1. 学习HTML和CSS基础知识：在学习框架网页之前，首先要掌握HTML和CSS的基础知识，这是框架网页的基础。
2. 学习JavaScript编程语言：JavaScript是框架网页的重要编程语言，掌握JavaScript可以使你更加灵活地控制网页各个部分的内容和行为。
3. 学习框架技术：学习使用流行的框架技术，如Bootstrap、jQuery等，这能够帮助你更加高效地进行框架网页的设计和开发。
4. 实践和总结：在理论学习的基础上，要进行大量的实践，通过不断地实践才能够更好地掌握框架网页的技术。
要及时总结实践中的经验和教训，不断提升自己的能力。
四、总结框架网页的学习对于网页设计师和开发者来说非常重要，它可以让网页更加清晰、易用、快速加载以及动态交互效果，从而提升用户的使用体验。
通过学习HTML、CSS、JavaScript和框架技术，可以让你更好地掌握框架网页的技术，设计出更加优秀的网页。
希望大家可以通过不断的学习和实践，掌握框架网页的技术，创作出更加优秀的网页作品。
网页设计与制作设计框架网页
第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.教学难点
框架中超链接的使用。
■教学方法与手段
对比教学法、探究学习法、模仿学习法。
■课前准备
制作相同结构的用以对比的表格网页和框架网页以及给学生用于操作的网站半成品和素材。
■教学过程。
- 1、下载文档前请自行甄别文档内容的完整性，平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益，请联系客服反馈,我们会尽快为您处理(人工客服工作时间：9:00-18:30)。
框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个HTML页面。
使用框架可以非常方便的完成导航工作，让网站的结构更加清晰，而且各个框架之间决不存在干扰问题。
利用框架最大的特点就是使网站的风格一致。
通常把一个网站中页面相同的部分单独制作成一个页面，作为框架结构的一个子框架的内容给整个网站公用。
一个框架结构有两部分网页文件构成：
框架（Frame）：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。
框架集（Frameset）：框架集也是一个网页文件，它将一个窗口通过行和列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。
一、创建框架
在创建框架集或使用框架前，通过选择“查看/可视化助理/框架边框”
命令，使框架边框在文档窗口的设计视图中可见。
1、使用预制框架集
(1、新建一个HTML文件，在快捷工具栏选择“布局”，单击“框架”
按钮，在弹出的下拉菜单中选择“顶部和嵌套的左侧框架”。
（2）、使用鼠标直接从框架的左侧边缘河上边缘向中间拖动，直至合适的位置，这样顶部和嵌套的左侧框架就完成了。
2、鼠标拖动创建框架
（1）、新建普通网页，命名后将其打开。
（2）、把鼠标放到框架边框上，出现双箭头光标时拖拽框架边框，
可以垂直或水平分割网页。
二、、保存框架
每一个框架都有一个框架名称，可以用默认的框架名称，也可以在属性面板修改名称，我们采用系统默认的框架名称topFrame（上方）、leftFrame（左侧）、mainFrame（右侧）。
选择菜单栏>文件>保存全部，将框架集保存为index.html，上方框架保存为07.html，左侧框架保存为08.html，右侧框架保存为
09.html。
这个步骤虽然简单，但是很关键，只有将总框架集和各个框架保存在本地站点根目录下，才能保证浏览页面时显示正常。
三、编辑框架式网页
虽然框架式网页把屏幕分割成几个窗口，每个框架（窗口）中放置一个普通的网页，但是编辑框架式网页时，要把整个编辑窗口当作一个网页来编辑，插入的网页元素位于哪个框架，就保存在哪个框架的网页中。
框架的大小可以随意修改。
1、改变框架大小
用鼠标拖拽框架边框可随意改变框架大小。
2、删除框架
用鼠标把框架边框拖拽到父框架的边框上，可删除框架。
3、设置框架属性
设置框架属性时，必须先选中框架。
选择框架方法如下：
选择菜单栏>窗口>框架，打开框架面板，单击某个框架，即可选中
该框架。
在编辑窗口某个框架内按住Alt键并单击鼠标，即可选择该框架。
当一个框架被选择时，它的边框带有点线轮廓
2. 设置框架属性
选中框架，在属性面板上可以设置框架属性：框架名称、源文件、空白边距、滚动条、重置大小和边框属性等。
需要注意的是：1、框架是不可以合并的。
2、在创建链接时要用到框架名称，所以我们要很清楚的知道每个框架对应的框架名。
四、在框架中使用超级链接
在框架式网页中制作超级链接时，一定要设置链接的目标属性，为链接的目标文档指定显示窗口。
链接目标较远（其他网站）时，一般放在新窗口，在导航条上创建链接时，一般将目标文档放在另一个框架中显示（当页面较小时）或全屏幕显示（当页面较大时）。
“目标”下拉菜单中的选项：
* _blank 放在新窗口中。
* _parent 放到父框架集或包含该链接的框架窗口中。
* _self 放在相同窗口中（默认窗口无须指定）。
* _top 放到整个浏览器窗口并删除所有框架。
在我们保存有框架名为mainFrame、leftFrame、topFrame的框架后，在目标下拉菜单中，还会出现mainFrame、leftFrame、
topFrame选项：
* mainFrame 放到名为mainFrame的框架中。
* leftFrame 放到名为leftFrame的框架中。
* topFrame放到名为topFrame的框架中。
五、制作框架页面
1、选择菜单栏>窗口>框架，打开框架面板，选中整个框架集，如
下图所示：
在属性面板中，将行的值设置为100，单位为像素，如下图所示：2、选择菜单栏>窗口>框架，打开框架面板，选中子框架集，如下图所
示：
在属性面板中，将列的值设置为200，单位为像素，如下图所示：
这样，我们就完成了对整个框架的布局。
下面我们来布局各个框架页
面。
3、鼠标在topFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了07.html。
在页面属性中将上、下、左。
右边距全
部设为0。
插入一个1行2列的表格，宽度为100％，高度为100px，左单元格宽度为382px并插入背景图片img/103.jpg，设置表格的背景颜色为103.jpg图片右边缘的绿色（用吸管吸取）。
4、鼠标在leftFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了08.html，在页面属性中将上、下、左。
右边距全
部设为0。
插入一个6行1列的表格，表格宽度为95％，居中对齐。
将第一个单元格的高度设为20px，选中其余单元格将高度设置为50px。
分别
输入文字设置导航栏目。
分别对各个导航栏目建立链接关系，链接路径指向要链接到的网页，
目标选择mainFrame框架。
5、鼠标在mainFrame框架中的空白处点击一下，我们会看见文档窗口上方的文件名变为了09.html，在页面属性中将上、下、左。
右边距
全部设为0。
自己设置一个欢迎页面。
至此，我们完成了一个框架网站的制作。
这篇教程为“Dreamweaver 8 入门经典教程”的一部分。
查看全套教程
>>>>>。
/networksoft/web_design/index.html
网页设计中使用框架的优缺点剖析
2007-01-28 信息来源：酷络网
视力保护色：【大中小】【打印本页】【关闭窗口】
框架的最常见用途就是导航。
一组框架通常包括一个含有导航条的框架和另一个要显示主要内容页面的框架。
但是，框架的设计可能比较复杂;并且在许多情况下，您可以创建没有框架的 Web 页，它可以达到使用一组框架所能达到的许多同样效果。
例如，如果您想让导航条显示在页面的左侧，则既可以用一组框架代替您的页面，也可以只是在站点中的每一页上包含该导航条。
许多专业 Web 设计人员不喜欢使用框架，并且许多浏览 Web 的人也不喜欢框架。
在大多数情况下，这种反感是因为遇到了那些使用框架效果不佳或不必要地使用框架的站点(例如，每当访问者单击导航按钮时就重新加载导航框架内容的框架集。
如果框架使用得法(例如，在允许其他框架的内容发生更改的同时，使一个框架中的导航控件保持静态，则这些框架对于某些站点可能非常有用。
并不是所有的浏览器都提供良好的框架支持，框架对于无法导航的访问者而言可能难以显示。
所以，如果您确实要使用框架，应始终在您的框架集中提供 noframes 部分，以方便不能查看这些框架的访问者。
您最好还要提供指向站点的无框架版本的显式链接，以用于那些虽然其浏览器支持框架但不喜欢使用框架的访问者。
使用框架具有以下优点:
访问者的浏览器不需要为每个页面重新加载与导航相关的图形。
每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下，因此访问者可以独立滚动这些框架。
例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不需要再滚动回顶部来使用导航条。
使用框架具有以下缺点:
可能难以实现不同框架中各元素的精确图形对齐。
对导航进行测试可能很耗时间。
各个带有框架的页面的 URL 不显示在浏览器中，因此访问者可能难以将特定页面设为书签(除非您提供了服务器代码，使访问者可以加载特定页面的带框架版本。