下载文档原格式
网页设计中的框架是什么-优缺点-注意什么问题框架是网页中常用的一种页面制定方法。
frame的功能是在一个浏览器窗口中将网页分成假设干不同的区域，以便在一个浏览器窗口中显示多个HTML页面。
框架是网页中常用的一种页面制定方法。
frame的功能是在一个浏览器窗口中将网页分成假设干不同的区域，以便在一个浏览器窗口中显示多个HTML页面。
使用该框架可以非常方便的完成导航工作，使网站的结构更加清楚，并且各个框架之间没有干扰;使用该框架的特点是使网站的风格坚持一致。
通常，网站的同一部分被做成一个页面，作为整个网站框架结构的子框架的内容。
框架结构由两部分组成：框架：框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口其余部分中显示的内容无关的web 文件。
Frameset:Frameset也是一个网页文件。
它将窗口按行和列划分为多个框架。
帧数取决于有多少页。
每个框架中显示不同的网页文件。
所谓框架，就是把网页分成几个框架窗口，同时获得多个网址。
Ltframeset用于划分框架窗口。
每个框架窗口都有一个，必须在的范围内使用。
2 网页制定框架的优缺点有哪些1、优点(1)访问者的浏览器不必须要为每个页面重新加载与导航相关的图形。
(2)每个框架都具有自己的滚动条(如果内容太大，在窗口中显示不下)，因此访问者可以独立滚动这些框架。
例如，当框架中的内容页面较长时，如果导航条位于不同的框架中，那么向下滚动到页面底部的访问者就不必须要再滚动回顶部来使用导航条。
2、缺点(1)可能难以实现不同框架中各元素的准确图形对齐。
(2)对导航进行测试可能很耗时间。
(3)各个带有框架的页面的URL不显示在浏览器中，因此访问者可能难以将特定页面设为书签(除非您提供了服务器代码，使访问者可以加载特定页面的带框架版本)。
3网页制定框架应注意的问题1、避免框架和内联框架框架和内联框架使得搜索引擎难以抓取网站，因为它们与标准所约定的一个网页就是一个html文件相背驰，而是包涵了多个html文件。
什么是Iframe
Iframe是内联框架的简称，是⼀种允许外部⽹页嵌⼊到HTML⽂档中的HTML元素。
与传统的⽤于创建⽹页结构的框架不同，iframe可以插⼊⽹页布局中的任何位置。
可以使⽤iframe标签将iframe插⼊到HTML⽂档中
具体实例：
1.代码中会将URL的内容插⼊到⽹页内的728 x 90 px嵌⼊式框架中，iframe源(src)可以引⽤同⼀服务器上的外部⽹站或另⼀个页⾯，⽐如src=”/example.php”。
2.宽度和⾼度属性不是必需的，但是通常⽤于定义iframe的⼤⼩。
其他iframe属性，如marginwidth和marginheight在HTML 4和更早的版本中得到了⽀持，但是在HTML5中，CSS⽤于定制iframe的外观。
3.iframe有⼏种不同的⽤途，⽐如在线⼴告和多媒体。
许多⼴告平台使⽤iframe在⽹页上显⽰⼴告，因为它们⽐内联脚本提供了更⼤的灵活性。
由于iframe可能包含整个⽹页，因此⼴告客户可以在iframe中包含额外的跟踪代码，以帮助确保⼴告客户和出版商的准确报告。
4.iframe还⽤于在⽹页中显⽰不同类型的媒体，例如，爱奇艺视频和百度地图窗⼝经常使⽤iframe嵌⼊到⽹页中。
许多web应⽤程序使⽤iframe，因为它们可以显⽰动态内容⽽⽆需重新加载⽹页。
注意：
但是过度使⽤iFrame会降低页⾯速度，并带来安全风险，把iFrame看作是内容的⼀部分，⽽不是站点的⼀部分。
例如，如果您想添加⼀个爱奇艺视频来吸引读者，那么可以向该⽂章插⼊⼀个iFrame元素。
网页设计框架的名词解释随着互联网和移动互联网的迅猛发展，网页设计已成为越来越重要的领域。
在进行网页设计时，人们通常会使用一种被称为网页设计框架的工具。
本文将对网页设计框架进行名词解释，探讨其定义、使用场景以及优势。
一、网页设计框架的定义网页设计框架，简称框架，是一种用于快速搭建和开发网页的工具和技术。
它提供了一系列预定义的模板、样式和组件，旨在帮助开发者更高效地创建各种类型的网页。
框架通常基于HTML、CSS和JavaScript技术构建，通过提供统一的结构和标准化的代码，使网页设计和开发变得更加简单和可维护。
二、网页设计框架的使用场景1. 响应式设计：随着移动设备的普及，响应式设计已成为现代网页设计的标配。
网页设计框架提供了一套已经经过测试的响应式布局，以适应不同屏幕尺寸和设备。
通过使用框架提供的响应式组件和栅格系统，开发者可以轻松构建适应不同设备的网页。
2. 快速搭建：网页设计框架提供了许多预先定义的样式和组件，如导航栏、按钮、表单等。
开发者可以直接使用这些组件，而不必从头开始编写代码。
这样可以大大缩短网页设计和开发的时间，并提高工作效率。
3. 跨浏览器兼容性：不同浏览器对网页的渲染方式有所不同，这往往给网页设计师带来兼容性的问题。
幸运的是，网页设计框架可以帮助解决这个问题。
框架经过充分测试，保证在各种常见浏览器中良好运行，从而大大减少了兼容性调试的难度。
三、网页设计框架的优势1. 提高效率：网页设计框架提供了一系列已经经过优化和测试的代码和组件，使开发者能够快速构建功能丰富的网页。
开发者无需从头编写代码，可以节省大量时间和精力。
2. 统一风格：框架提供了一套统一的设计风格和组件，使得设计师和开发者能够保持一致的视觉风格。
这使得整个网站看起来更加专业和整洁，同时也提高了用户体验。
3. 易于维护：通过使用网页设计框架，开发者可以将网页的样式和结构分离，使得代码更具可维护性。
当需要进行修改或更新时，只需对框架内的组件进行调整，而无需逐个修改每个页面的代码。
框架（Frameset）是指在网页中将不同的网页内容放置在不同的框架（或窗口）中，以便于用户可以在同一个页面中同时浏览多个不同的网页内容。
在HTML5中，框架（Frameset）仍然是一种有效的页面布局方式，虽然在某些情况下它并不被推荐使用。
下面将对HTML5中的frameset框架用法进行全面的介绍，包括使用实例、优缺点、适用场景和未来趋势等方面。
一、frameset框架用法介绍1. 什么是frameset框架Frameset框架是一种在网页中创建分割窗口的方式，它允许网页被分割成不同的区域，并在每个区域中加载不同的网页内容。
通常情况下，frameset框架被用于创建多个可以同时滚动的网页区域，以方便用户在一个页面内浏览多个不同的内容。
2. frameset框架的基本结构frameset框架的基本语法结构如下所示：```<!DOCTYPE html><html><head><title>Frameset Example</title></head><frameset cols="25,50,25"><frame src="frame1.html"><frame src="frame2.html"><frame src="frame3.html"></frameset></html>```在这个例子中，使用`<frameset>`标签定义了一个包含了三个不同尺寸的框架的框架集。
每个`<frame>`标签则定义了每个框架中要加载的网页内容。
二、frameset框架用法实例下面通过一个实际的例子来展示frameset框架的用法。
1. 创建一个包含多个框架的网页我们创建一个名为`frameset-example.html`的文件，内容如下：```html<!DOCTYPE html><html><head><title>Frameset Example</title></head><frameset cols="25,50,25"><frame src="frame1.html"><frame src="frame2.html"><frame src="frame3.html"></frameset></html>```在这个例子中，我们使用`<frameset>`和`<frame>`标签创建了一个包含了三个不同尺寸的框架的框架集，并在每个框架中加载不同的网页内容。
广东工程职业技术学院计算机信息系《网页设计》实训报告实训题目：实训项目07 框架的应用班级：学号：姓名：日期：教师：成绩：实训目的：1．掌握在网页中创建框架的操作方法。
2．掌握如何保存框架集文件和各个框架的操作方法。
3．掌握设置框架集属性和框架属性的方法。
4．掌握编辑框架内容的操作方法。
5．了解在框架中设置超链接的操作方法。
实训内容：1.本次实训要求用布局表格完成“我的主页”网页，完成2个框架集页面的创建，具体效果参见预览效果页面。
2.在站点“myweb”根文件夹之下，建立一个“07”的子文件夹，将“素材”复制到这个文件夹下，而且重新命名为“sucai”，里面的文件夹也重新命名，去掉中文；再在“07”下建立一个“letuweb”文件夹，将“ch8”复制到此文件下。
3.在“07”的子文件夹中建立“07.html”的网页文件，为本次练习的内容做一个首页。
4.制作一个框架网页a)新建一个页面文档，将其保存为07-1.html。
创建框架集“上方和下方框架”网页，在中间的框架中嵌套一个“左侧框架”，保存全部的页面，设置框架网页标题及属性。
b)框架集由4个框架组成：1.顶部为标题部分，显示网页的大标题，保存为07-1top.html。
2.中间左侧为导航部分，提供个网页的导航链接，保存为07-1left.html。
3.中间右侧为主题部分，显示网页主要内容，网页展示的内容共分为4大部分，分别为：公司简介07-1main.html、产品介绍07-1main2.html、征稿合作07-1main3.html和联盟伙伴07-1main4.html。
这4部分内容分别放置在4个网页中，并通过导航链接控制在住框架中显示。
4.底部为说明部分，主要包括一些版权信息等，保存为07-1bottom.html。
c)编辑各框架内的网页文件：1.将光标定位在topFrame框架中，编辑07-1top.html文档，在其中中插入一个1行1列宽度为680像数的表格，在表格中插入Banner图像。
框架是什么，框架就好比我们的骨骼，支撑着整个网页，如果一个网页没了框架，那么就感觉像一盘散沙，因此为了更好的实现网页的效果，我们就要学会给网页制作一个框架，为了更好的理解什么是框架。
我们画一张示意图来进行讨论。
这是一个左右型的框架，由三个网页文件组成的。
首先外部的框架是一个文件，图中我们用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教程专区。
实验七框架结构【实验目的】：通过本实验，使学生熟悉创建、编辑框架网页和利用框架来布局页面的基本方法。
ＩＴ人物个性网页设计之网页构架Ｒｅｌｅｎ 现在做主页的朋友越来越多。
而对于没有学过设计，以及没有学过美术的朋友而言，怎样去提高自己网页设计水平，或做出自己的个性网页呢？技术也只是为了设计而服务的，在技术的同等条件下，怎样来展示自己？ 本系列共分为“网页构架、页面设计、色彩搭配、内容艺术、前卫技术、创意无限、ＣＩ行销、应用技巧”八个部分，本系列将会逐步给大家提一些建议及一些技巧归纳。
希望你能得到一些帮助和对设计网页设计有一些了解并逐步深入。
一般网页编排内容有：文字（Ｔｅｘｔ）、静态图片 （Ｓｔｉｌｌ Ｉｍａｇｅ）和动画（ａｎｉｍａｔｉｏｎＦｌａｓｈ）。
具体可实现的技术更多了，包括视频（Ｆｌａｓｈ Ｍｏｖｉｅ Ｓｈｏｃｋｗａｖｅ…）、音乐和音效［Ｍｕｓｉｃ＆Ｓｏｕｎｄ ｅｆｆｅｃｔｓ］、交互式网页、高科技虚拟等等。
在设计网页时候，可以广泛把应用各种技术。
如果网页比喻成人的话，先要有骨架，也就是网页的排版框架。
我进行了大致的分类，主要是：分栏式结构，区块分布，平面图片设计，以及非规律的设计，下面我将逐一讲解。
一、分栏式结构 分栏结构，也是最常见的方式。
常见的有如 Ｅｐｉｔｏｎｉｃ．ｃｏｍ（ｈｔｔｐ：／／ｗｗｗ．ｅｐｉｔｏｎｉｃ．ｃｏｍ／）的二分栏设计，七色谷（ｗｗｗ．７ｃｖ．ｃｏｍ）的三分栏，以及国外常见的四分栏结构，我甚至还特殊设计过五分栏（ｈｔｔｐ：／／ｗｗｗ．ｈｏｍｅ２ｖ．ｃｏｍ／ｖｃｉｔｙ）的网页。
通常的布局编排情况有如图１所示。
图１中，１是二分栏，２是标准三分栏，３是四分栏，４～６是一些ＬＯＧＯ以及导航在下面的情况，而通常会使用Ｆｒａｍｅ。
７～９则是一般的变化，而我这里所列出的一些例子也是很泛泛的。
见到一些网页的设计，判断上，有一些是以颜色来分栏的，有一些是利用导航分栏的。
不论你用那种设计方法，最重要的是心中有数，去编排自己的内容。
设计也只是为了你的内容服务的。
一个快捷的方法是，在纸上勾画一下，用你的内容名称填充一下，粗略的进行规划。
框架 (2)一、框架结构的概念 (2)二、使用框架搭建网站 (2)1.框架的创建 (2)2.框架的删除 (5)3.框架的属性 (5)4.框架的保存 (7)三、浮动框架（嵌入式框架） (9)框架也是网页的排版工具之一，与表格和层的区别是，表格和层均是以插入的对象为单位，而框架是以插入的网页为单位，它提供了一种较为固定的网页结构，我们称之为框架或框架结构。
一、框架结构的概念框架结构是一种使多个网页通过多种类型区域的划分，最终显示在同一个窗口的网页结构。
类似玻璃窗框，当中的玻璃既是网页页面。
最常见的一种应用就是邮箱。
框架的作用是把浏览器的显示空间分割为几个部分，每个部分都可以独立显示不同的网页。
一个完整的框架结构由两部分组成，它们是框架和框架集。
1.框架框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的网页文件。
2.框架集框架集就是框架的集合。
它将一个窗口通过行列的方式分割成多个框架，框架的多少根据具体有多少网页来决定，每个框架中要显示的就是不同的网页文件。
二、使用框架搭建网站1.框架的创建（1）自动创建框架新建html文档，在“布局”面板中，找到“框架”按钮，单击右下角箭头，弹出下拉列表如下图：选择自己需要的框架结构形式，比如“左侧和嵌套的顶部框架”，创建完成。
（2）手动创建框架手动创建一个“左侧和嵌套的顶部框架”的页面。
●新建一个html文档，执行菜单栏“查看/可视化助理/框架边框”命令，●将鼠标移至页面顶部的框架边框上，此时会出现一个上下方向的双向箭头，向下拖动鼠标将边框线移到页面中，页面被拆分成了上下两部分。
●接下来按照Ctrl键，同时用鼠标拖动框架左边框至页面中。
如图：注意：如果不按Ctrl键，直接用鼠标拖动，则效果如下：择【框架集】选项卡，从右侧选择框架类型。
2.框架的删除删除框架与手动创建框架的操作正好相反，将鼠标移至页面中的框架边框上，当出现双向箭头后将其拖离设计区域就可以了。
·110·第9章 框架网页中框架（frame）的主要作用是，将浏览器窗口分割成几个相对独立的小窗口，浏览器可以将不同网页文件同时传送到这几个小窗口，这样就可以同时浏览不同网页文件。
使用框架，可以在一个浏览器中显示出多张HTML文档，这种HTML文档被称为框架页，各张框架页都可以不同，所以各页面之间是独立的。
通过本章的学习，可以了解到以下框架知识：frameset标签用法frame标签用法框架分栏框架重要属性框架链接框架实例9.1 框架基本语法框架，就是在一个浏览器中显示多个HTML页面，使用框架后，在一张网页中可以用来放置多个不同的网页。
在新闻类的网站可以看到，有的广告专用一张网页来显示的，每次更新广告的时候，只需要对那张网页做修改。
在本节中主要介绍框架的基本语法，如frameset、frame和框架的部分属性等。
如果一个网页的左边导航菜单是固定的，而页面中间的信息可以上下移动，这一般就可以认为是一个框架型网页。
此外，一些框架型站点的模板在其页面上方放置了公司的LOGO或图片，不过这一块也是位置固定的。
而页面的其他部分则可以上下左右移动。
有的框架型站点模板还会在其固定区域中，放入链接或导航按钮。
框架的基本语法是由<frameset></frameset>标签对表示，标签对放在<html></html>标记对下的<head></head>后面，即与<head></head>标记对并列。
如何来实现框架，全由<frameset></frameset>来设置，其内又包含<frame></frame>，用<frame></frame>标记对来表示在框架内放入什么文件，代码9.1表示框架的基本语法。
代码9.1 源代码\第9章\框架基本语法.html<html><head><title>框架基本语法</title></head><!—设置框架-->·111·<frameset cols="25%,50%,25%">> <frame src ="/"> <frame src ="/"> <frame src ="/"> </frameset> </html>上面代码在html 中插入了框架，框架包括三个网页，分别表示了网址之家、新浪和网易的首页，在<frameset>中的cols 参数代表列，代码9.1中，表示在框架集中有三个框架且链接不同的页面，效果如图9.1所示。
