下载文档原格式
网页设计中的框架是什么-优缺点-注意什么问题框架是网页中常用的一种页面制定方法。
frame的功能是在一个浏览器窗口中将网页分成假设干不同的区域，以便在一个浏览器窗口中显示多个HTML页面。
框架是网页中常用的一种页面制定方法。
frame的功能是在一个浏览器窗口中将网页分成假设干不同的区域，以便在一个浏览器窗口中显示多个HTML页面。
使用该框架可以非常方便的完成导航工作，使网站的结构更加清楚，并且各个框架之间没有干扰;使用该框架的特点是使网站的风格坚持一致。
通常，网站的同一部分被做成一个页面，作为整个网站框架结构的子框架的内容。
框架结构由两部分组成：框架：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分中显示的内容无关的web 文件。
Frameset:Frameset也是一个网页文件。
它将窗口按行和列划分为多个框架。
帧数取决于有多少页。
每个框架中显示不同的网页文件。
所谓框架，就是把网页分成几个框架窗口，同时获得多个网址。
Ltframeset用于划分框架窗口。
每个框架窗口都有一个，必须在的范围内使用。
2 网页制定框架的优缺点有哪些1、优点(1)访问者的浏览器不必须要为每个页面重新加载与导航相关的图形。
(2)每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下)，因此访问者可以独立滚动这些框架。
例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不必须要再滚动回顶部来使用导航条。
2、缺点(1)可能难以实现不同框架中各元素的准确图形对齐。
(2)对导航进行测试可能很耗时间。
(3)各个带有框架的页面的URL不显示在浏览器中，因此访问者可能难以将特定页面设为书签(除非您提供了服务器代码，使访问者可以加载特定页面的带框架版本)。
3网页制定框架应注意的问题1、避免框架和内联框架框架和内联框架使得搜索引擎难以抓取网站，因为它们与标准所约定的一个网页就是一个html文件相背驰，而是包涵了多个html文件。
浅谈框架网页的学习框架网页是当前互联网发展的一个重要组成部分，其在网页开发中起到了至关重要的作用。
学习和掌握框架网页的技术对于网页设计师和开发者来说至关重要。
本文将从框架网页的概念、作用、学习方法等方面进行浅谈。
一、框架网页的概念框架网页是指利用框架技术将一个网页拆分成若干部分，每个部分都可以独立加载，具有独立的功能。
框架网页的制作思路是将一个网页分成几个部分，每个部分可以单独操作，而不需要整个页面再次加载。
在框架网页中，主要包含了框架页和嵌套页。
框架页是用来定义框架的页面，而嵌套页是被框架页引用的页面。
框架网页具有以下几个特点：1. 界面整洁：可以将网页的不同部分分离开来，使页面看上去更加整洁清晰。
2. 节约带宽：一旦框架网页加载完毕，只需要重新加载页面内容即可，可以节省带宽和提高页面加载速度。
3. 提高用户体验：框架网页可以提高用户的使用体验，使用户在浏览页面时更加舒适和方便。
三、框架网页的学习方法1. 学习HTML和CSS基础知识：在学习框架网页之前，首先要掌握HTML和CSS的基础知识，这是框架网页的基础。
2. 学习JavaScript编程语言：JavaScript是框架网页的重要编程语言，掌握JavaScript可以使你更加灵活地控制网页各个部分的内容和行为。
3. 学习框架技术：学习使用流行的框架技术，如Bootstrap、jQuery等，这能够帮助你更加高效地进行框架网页的设计和开发。
4. 实践和总结：在理论学习的基础上，要进行大量的实践，通过不断地实践才能够更好地掌握框架网页的技术。
要及时总结实践中的经验和教训，不断提升自己的能力。
四、总结框架网页的学习对于网页设计师和开发者来说非常重要，它可以让网页更加清晰、易用、快速加载以及动态交互效果，从而提升用户的使用体验。
通过学习HTML、CSS、JavaScript和框架技术，可以让你更好地掌握框架网页的技术，设计出更加优秀的网页。
希望大家可以通过不断的学习和实践，掌握框架网页的技术，创作出更加优秀的网页作品。
实验六框架型网页的制作一、实验目的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。
框架网页的制作
■教学目标
1.知识与技能
（1）理解框架的概念与用途。
（2）掌握框架网页的新建、制作、编辑与保存的方法。
（3）初步掌握将框架结构与表格布局结合使用来制作网页。
（4）会在框架网页中设置超链接。
2.过程与方法
（1）通过对表格网页的分析以及表格与框架网页的对比，体验新知识（框架结构网页）的优点，从而促进其学习新知识。
（2）理解框架的概念与组成，学会分析网站的结构。
（3）感受框架网页的用途，体会其优点，从而明确框架网页设计技术的适用范围。
3.情感态度与价值观
（1）通过以“母亲节的祝福”为主题的框架结构网页制作活动，提升对母爱的理解，学会感恩。
（2）能够将表格与框架结构网页结合使用，在创作中体验乐趣。
4.行为与创新
在老师的引导下学会对比学习，培养对知识的主动探索、主动发现和对所学知识意义的主动建构。
■教学重点与难点
1.教学重点
框架网页的建立与保存。
2.教学难点
框架中超链接的使用。
■教学方法与手段
对比教学法、探究学习法、模仿学习法。
■课前准备
制作相同结构的用以对比的表格网页和框架网页以及给学生用于操作的网站半成品和素材。
■教学过程。
框架是什么，框架就好比我们的骨骼，支撑着整个网页，如果一个网页没了框架，那么就感觉像一盘散沙，因此为了更好的实现网页的效果，我们就要学会给网页制作一个框架，为了更好的理解什么是框架。
我们画一张示意图来进行讨论。
这是一个左右型的框架，由三个网页文件组成的。
首先外部的框架是一个文件，图中我们用index.htm命名。
框架中左边命名为A，指向的是一个网页A.htm。
右边命名为B，指向的是一个网页B.htm。
下面我们就来从头开始制作一个框架。
1、点“文件”菜单>新建，弹出“新建文档”对话框如下图：或在插入栏>布局>选＂框架：左框架＂如下图：Dreamweaver MX 2004生成一个空白的框架页面，如下图：2、选择「窗口」菜单＞“框架”，弹出“框架”面板如下图。
从框架面板可知，系统对左右框架生成命名。
左框架名为：leftFrame，右框架名为：mainFrame，当然您可以通过框架属性面板对框架重新命名，了解这一点非常重要。
创建超级链接时，要依据它正确控制指向的页面。
3、保存框架。
选择“文件”菜单点击“保存全部”。
系统弹出对话框。
这时，保存的是一个框架结构文件。
我们按照惯例都命名为index.htm。
保存的时候如果虚线框笼罩的是周围一圈就是保存框架结构。
（下图）虚线笼罩在右边就是保存框架中右边网页。
（如下图）虚线笼罩在左边就是保存框架中左边的网页：（如下图）三个页面保存完毕。
4、下面我们要实现按左边的超级链接，对应的页面出现在右边。
在左边的页面中做上超级链接。
指向一个已经存在的页面。
注意做好链接以后，要在目标栏中设置为mainFrame。
(如下图）6、设置完毕，保存全部，按F12预览网页。
链接指向的页面出现在右边框架中。
7、重复以上步骤，把左框架所有的链接做完，一个简单的网站导航结构创建完成。
更多Dreamweaver 教程请继续访问建站学的Dreamweaver教程专区。
实验七框架结构【实验目的】：通过本实验，使学生熟悉创建、编辑框架网页和利用框架来布局页面的基本方法。
框架是网页中经常使用的页面设计方式，框架的作用就是把网页在一个浏览器窗口下分割成几个不同的区域，实现在一个浏览器窗口中显示多个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 不显示在浏览器中，因此访问者可能难以将特定页面设为书签(除非您提供了服务器代码，使访问者可以加载特定页面的带框架版本。
