使用框架布局页面.
单元4——使用框架布局页面学习目标：理解框架布局的原理掌握使用框架进行页面布局的方法学习利用浮动框架嵌入插件Dreamweaver CS3提供了一种很方便的可以进行网页布局的工具——框架。
框架主要是用来把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。
访问者浏览站点时，可以使某个区域的文档永远不更改，但可通过导航条的链接更改主要框架的内容。
框架结构常被用在具有多个分类导航或多项复杂功能的Web页面上。
任务4.1 框架基本操作在网页中，一个网页可以包含多个页面，此时需要用到框架。
使用框架可以进行页面布局，把网页化分为几个区域。
例如，一个水平框架用于放置Banner（也就是标题）；左垂直框架用于放置导航；右垂直框架用于放置正文。
每一个框架单独使用一个网页，从而使页面设计简单化。
框架除了用于页面布局，还可用于制作目录。
包含框架的网页称为框架集。
框架集定义了各个框架的结构、数量、大小和目标等属性。
本章将介绍框架的使用方法。
4.1.1创建一个新的框架集网页(1)运行Dreamweaver CS3，选择“文件”→“新建”命令，弹出“新建文档”对话框，在对话框中选择“示例中的页”→“框架集”→“上方固定，左侧嵌套”选项，如下图所示。
（2）单击“创建”按钮，弹出“框架标签辅助功能属性”对话框，如下图所示，在此可为每一个框架指定一个标题。
（3）单击“确定”按钮，即可创建一个上方固定，左侧嵌套的框架集，如下图所示。
4.1.2保存框架每个框架包含一个文件，因此一个框架集会包含多个文件，在保存网页时，要将整个网页文档都保存下来。
操作步骤如下：（1）选择“文件”→“保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框，命名为“index.html”，表示整个框架集的名称。
（2）单击“保存”按钮，弹出第二个“另存为”对话框，右边框架内侧出现阴影，命名为“main.htlm”，表示右边框架即主框架的文件名。
（3）单击“保存”按钮，依次弹出第3个和第4个“另存为”对话框，分别命名为“left.html”和“top.html”，表示左边框架和上方框架的文件名。
如下图所示：4.1.3选择框架和框架集在Dreamweaver中，打开“窗口”菜单，选择“框架”命令，可以打开“框架”面板，如下图所示在面板中单击要选择的框架，被选中的框架边框内侧会出现，如下图所示。
或者按<Alt>键，在要选择的框架内单击鼠标左键也可选中。
如下图所示。
在文档窗口中，单击文档窗口中要选择的框架，即可选中该框架，如下图所示。
边框，可以选择整个框架集，如下图所示。
4.1.4编辑框架（1）拆分框架制作框架网页可以根据Dreamweaver自定义的框架集来创建，也可以自行设计各种类型的框架集结构，以符合设计要求。
自行设计框架集结构，其实就是拆分框架，也可以使用鼠标拖动框架集的外边框直接进行拆分。
操作步骤如下：将光标放置在如下图所示的右侧框架中，选择插入栏的“布局”，在“框架”下拉菜单中单击“底部框架”按钮，如下图所示。
拆分后将变成如下图所示的框架。
按<Alt>键选择左侧框架，用鼠标向右拖动框架的右边框，将其拆分成如下图所示的框架。
分，如下图所示。
还可以选择“拆分左框架”、“拆分右框架”、“拆分下框架”命令进行拆分。
分成4个，如下图所示。
提示：如果要创建3个框架，首先创建2个框架，然后拆分其中一个框架，不要将4个框架转换成3个框架，因为合并两个相邻框架必须编辑框架集代码。
（2）删除框架用鼠标将框架边框脱离编辑窗口即可删除框架，然后框架中有未保存的内容，Dreamweaver会提示保存该文档。
通过关闭显示框架集的文档窗口，可以删除框架集，如果该文件已经保存，可以删除该文件。
如果边框拖曳错了，只要用鼠标把需要删除的边框拖到父框架的边框上或脱离页面即可删除。
（3）链接框架要在一个框架中使用链接打开另一个框架中的文档，必须设置链接目标，链接的目标属性指定在其中打开链接的内容框架或窗口。
如果导航条位于左框架，而希望链接的材料显示在右侧的主要内容框架中，则必须将主要内容框架的名称指定为每个导航条链接的目标。
当访问者单击导航链接时，将在主框架中打开指定的内容。
在“属性”面板中的“目标”下拉列表中选择mainFrame选项，用来作为指向链接的目标。
在“属性”面板中的“链接”下列列表中选择链接文档应在其中显示的框架或窗口。
●_blank：打开一个新窗口显示目标网页。
●_parent：目标网页的内容在父框架窗口中显示。
●_self：目标网页的内容在当前所在框架窗口中显示。
●_top：目标网页的内容在最顶层框架窗口中显示。
任务4.2 利用框架制作后台管理系统界面在网页中，一个网页可以包含多个页面，此时需要用到框架。
使用框架可以进行页面布局，把网页化分为几个区域。
下面我们将通过制作如下图这样一个利用框架制作后台管理系统界面的实例来说明个中的方法与技巧。
首先我们要分析一下整个页面布局情况，这个页面可分为顶部框架、左侧框架和右侧框架三个框架，其中顶部框架为固定区，左侧框架为导航区，而右侧框架则为内容区。
页面的结构如下图所示。
下面让我们来一步步地利用框架制作出这个页面：（1）当然我们要先在Dreamweaver中新建一张HTML网页，运行Dreamweaver CS3，选择“文件”→“新建”命令，弹出“新建文档”对话框，在对话框中选择“示例中的页”→“框架集”→“上方固定，左侧嵌套”选项，如下图所示。
（2）单击“创建”按钮，弹出“框架标签辅助功能属性”对话框，如下图所示，在此可为每一个框架指定一个标题。
（3）单击“确定”按钮，即可创建一个上方固定，左侧嵌套的框架集，如下图所示。
（4）接下来，我们要分别设置三个框架的页面属性，全都设置为如下图所示的页面属性。
（5）设置完成后，我们便要保持框架集，具体步骤为：a)选择“文件”→“保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框，命名为“index.html”，表示整个框架集的名称。
b)单击“保存”按钮，弹出第二个“另存为”对话框，右边框架内侧出现阴影，命名为“main.htlm”，表示右边框架即主框架的文件名。
c)单击“保存”按钮，依次弹出第3个和第4个“另存为”对话框，分别命名为“left.html”和“top.html”，表示左边框架和上方框架的文件名。
如下图所示：提示：使用框架布局网页是一种高效的网页设计方法，但是只有那些具有特殊页面结构、使用框架的网页才能进行框架布局。
（6）保存好之后，我们将要给各框架插入表格，同时设置表格的背景图像。
首先我们将光标定位在top框架上，“文档”工具栏上文件名变为“top.html”，“框架”面板中的top—Frame框架高亮显示，表面此时处于top.html文件的编辑状态。
单击页面快捷菜单上的按钮，在框架中插入一个1行1列的表格，设置宽度为1002像素，如下图所示：表格成功插入后，选择images文件中图像名为jm_01.jpg的图作为该表格的背景图像，设置表格高度为90，如下图所示：接下来我们将光标移到left框架上，同样的选择快捷菜单上的按钮，插入1行1列，宽度为125像素的表格，插入后选择images文件中图像名为jm_02.jpg的图作为该表格的背景图像，设置表格高度为490，如下图所示：接着将光标移到left框架与main框架的分界线，当光标变成时，设置left框架的列值为125像素，如下图所示。
接下来将光标移到main框架上，同样的插入1行3列，宽度为100%的表格，如下图所示。
（提示：设置表格宽度为100%，可以使表格内容随框架边框的移动而移动。
）表格成功插入后，将光标移到表格的第一列，将该列属性设置为宽34，高490，背景为images文件中图像名为jm_03_01.jpg的图像，如下图所示。
设置完成后将光标移到到表格的第二列，无需改变宽度和高度，直接选择images文件中图像名为jm_03_02.jpg的图像作为该列的背景。
接着将光标移到第三列，将该列属性设置为宽34，背景为images文件中图像名为jm_03_03.jpg的图像。
（注意：排版布局用的表格，它的边框、间距、填充这三个参数都应设为0.因为排版布局用的表格应为不可见的表格，其作用只是用作内容定位和页面布局，不用显示出来。
如果需要整个网页居中显示的话，可以分别选中这三个表格在属情面板中设为居中对齐就可以了。
另外大家会发现表格很小没有设定高度，但是我们不用急于设定高度，我们可以住里面放内容，让内容把表格蹭大。
）上面的步骤完成之后，后台管理系统界面的基本结构就出来了，如下图所示：（7）接下来我们来设置导航区部分，我们依然利用表格来进行排版，将光标定位在leftFrame框架中，编辑left.html文件，插入一个4行1列的表格，设置宽度为100%，将第一行拖曳至与背景图中的横线重叠，另外三行设置高度为30像素，输入如右图所示的链接文字。
（8）接下来我们打开first文件中文件名为main.html的网页，接着选择“文件”→“另存为”命令，弹出“另存为”对话框，在文件名中输入“main1.html”，单击保存按钮，按此操作增加多3张main.html网页。
如下图所示。
打开main.html网页，在表格的第二列中输入“欢迎光临！”，设置水平居中对齐，大小36，粗体字。
接着打开main1.html网页，在其中插入如下图所示的个人信息表格。
接下来打开main2.html网页，将image文件中名为bg.jpg的图片插入进去，然后打开main3.html网页，输入如下所示的文字：（9）主框架网页文件设置好后，我们回到index.html文件中设置导航区的文字链接，选中“主菜单”文字，设置链接为main.html，目标为mainFrame，如下图所示：选中“个人信息表”文字，设置链接为main1.html，目标为mainFrame。
.同样的，设置“图片”的链接为main2.html，目标为mainFrame，“DW简介”的链接为main3.html，目标为mainFrame。
.（10）选择“文件”→“保存全部”命令，保存所有网页文件，按<F12>键预览，得到如下图所示效果。
如下图所示。
希望通过这一个简单例子的制作能让大家了解网页框架的排版布局，并能掌握其中的方法与技巧，尤其是框架与表格的结合布局技巧。
任务4.3 利用浮动框架嵌入天气预报在另一个框架集内的框架集成为嵌套的框架集。
一个框架集文件可以包含多个嵌套的框架集。
大多数Web网页实际上都使用嵌套的框架，在Dreamweaver CS3中大多数预定义的框架集也使用嵌套。
格式塔框架构建技术排列方式
格式塔框架构建技术排列方式
格式塔框架是一种用于构建具有层次结构的网页布局的技术。
它主要包含了四个层级：容器、栏目、模块和元素。
在使用格式塔框架构建网页时，可以按照以下顺序进行排列：
1. 容器（Container）：网页的最外层容器，用于包裹整个网页内容。
可以设置宽度、边距和背景色等属性。
2. 栏目（Columns）：将容器分成多列，常用的有两列或三列
布局。
栏目可以设置宽度、内边距和浮动等属性。
3. 模块（Modules）：每一列可以包含多个模块，模块可以是
独立的内容区块，例如导航菜单、广告栏或文章列表等。
模块可以设置宽度、内边距和边框等属性。
4. 元素（Elements）：在模块中，可以进一步分为多个元素。
元素可以是文字、图像、按钮或表单等。
元素可以设置宽度、边距和排列方式等属性。
在排列方式上，可以选择以下几种常用的方式：
1. 横向排列：将栏目或模块水平排列在一行中，常见于导航栏、图片轮播等。
2. 垂直排列：将模块或元素垂直排列在一列中，常见于文章列表、评论区等。
3. 网格排列：将栏目或模块按照网格状进行排列，常见于照片墙、产品展示等。
4. 层叠排列：将模块或元素重叠放置，常见于图片叠加效果、滑动菜单等。
总的来说，具体的排列方式可以根据设计需求和网页内容来确定，可以灵活运用以上几种方式进行组合排列，以达到所需的网页布局效果。
网页的框架和布局控制
创建一个儿童世界的网页。包括：1.绘制出基本框架和 表格。2.插入所需动画和导航条。
第9页/共11页
本章小结：
•掌握预定义框架的创建方法。 •熟悉编辑和调整框架和框架集的方法。 •掌握设置布局单元格和表格的方法。
第10页/共11页
感谢您的观看！
第11页/共11页
2、设置布局表格的格式 要设置布局表格的属性，可在网页文档中选中一个布
局表格，然后选择“窗口”|“属性”命令以显示布局表 格“属性”面板。在“属性”面板中，可以为布局表格 设置内容对齐方式、宽度和高度、背景颜色等属性。
第8页/共11页
五、 思考
•怎样绘制出嵌套布局表格。 •怎样设置布局单元格和表格的属性。
看”|“网格”|“显示网格”命令，在文档中显示网格， 然后在文档中绘制布局单元格，选择“查看”|“网 格”|“靠齐到网格”命令，将布局单元格靠齐到网格。
第5页/共11页
三、使用布局单元格和表格
4、移动和调整布局单元格和表格 用户如要移动布局单元格，只需使用鼠标拖动布局单
元格边线，将其移动到需要的位置即可。调整布局表格 时，首先要选中该表格，然后将鼠标移动到边角控制点， 根据箭头方向调整表格大小。
二、调整框架式样
1、设置框架属性 要设置框架的属性，可在网页文档中选择一个框架，然
后选择“窗口”|“属性”命令以显示框架的“属性”面 板。
2、设置框架集属性 要设置框架集的属性，可在网页文档中选择一个框架集，
然后选择“窗口”|“属性”命令，以显示框架集的“属性” 面板。
第2页/共11页
三、使用布局单元格和表格
第6页/共11页
四、设置布局单元格和表格
1、设置布局单元格的格式 要设置布局单元格的属性，可在网页文档中选中一个
怎么使用dreamweaver制作网页教程 dw建站设计网页
怎么使用dreamweaver制作网页教程 dw建站设计网页Dreamweaver是一款专业的网页制作软件，被广泛应用于网页设计师的日常工作中。
它是一款视觉化网页开发工具，可以轻松制作出跨越平台和浏览器限制的充满动感的网页。
在本文中，我们将为您介绍如何使用Dreamweaver制作网页。
一、定义站点1.在任意一个根目录下创建一个文件夹（例如E盘），并为其命名（例如MyWeb）。
2.打开Dreamweaver，选择“站点-新建站点”，在对话框中输入网站名称和本地根文件夹路径（E:web），然后确定。
此时再次打开Dreamweaver，会自动找到刚才设立的站点。
二、创建页面1.在本地文件夹E:\MyWeb下，右键点击空白处，选择“新建文件”，建立一个页面。
默认的文件名为untitled.htm，将其改名为index.htm。
2.双击index.htm进入该页面的编辑状态。
在标题空格里输入网页名称，按右键选页面属性，打开“页面属性”窗口。
在这里可以设置网站的标题、背景颜色或背影图像，超级链接的颜色（一般默认即可），其他都保持默认即可。
3.在页面中添加文字，可用菜单“窗口/属性”打开属性面板，选取文字大小为6，再使文字居中，然后在文字前用几个回车使其位于页面中间。
4.如果需要选取字体，则选择字体中的最后一项“编辑字体列表”，在对话框中选+号，接着在“可用字体”栏中选择需要加入到字体列表中的一种字体，点击中间的按钮就可以加入了。
三、为页面添加图片在页面中添加图片，可用菜单“插入/图片”，选择本地图片路径，然后将其拖拽到页面中即可。
Dreamweaver是一款非常强大的网页制作软件，通过本文的教程，相信您可以轻松上手制作出精美的网页。
1、在本地文件夹E:\MyWeb下新建文件夹，用于存放图片，可更名为tu、pic或images。
2、打开对象面板，选择“插入图像”，在对话框中选择要插入的图片。
若出现对话框“是否将该文件复制到根文件夹中？”，需选择“是”，并保存到刚建立的文件夹中。
使用前端框架技术开发移动端网页的步骤
使用前端框架技术开发移动端网页的步骤移动端网页的流行使得开发者们越来越重视使用前端框架技术来构建优秀的用户界面和交互体验。
前端框架技术提供了便捷的开发工具和丰富的组件库，可以简化开发流程、提高开发效率。
本文将介绍使用前端框架技术开发移动端网页的主要步骤。
步骤一：选择合适的前端框架技术在开始开发之前，首先需要选择适合的前端框架技术。
目前最流行的前端框架技术包括React、Angular和Vue.js等。
选择合适的框架技术主要依据项目需求、开发经验和团队技术储备等因素。
比较流行的框架React具备更好的性能和更广泛的生态系统，适合开发大型复杂的移动端网页。
步骤二：设置开发环境在使用前端框架技术开发移动端网页之前，需要设置好开发环境。
首先，确保已经安装了适合的代码编辑器，如VS Code、Atom等。
然后，安装Node.js和npm 来管理项目依赖。
使用npm来安装所选框架的命令行工具，并创建项目文件夹。
最后，初始化项目，并安装相关的依赖模块。
步骤三：设计网页结构在开始编码之前，需要先设计好移动端网页的整体结构。
这个过程主要包括确定网页的布局、导航栏、页面结构和所需的组件等。
可以利用设计软件或在线工具来绘制页面草图，以便更好地理解和沟通设计需求。
步骤四：编写组件使用前端框架技术时，组件是开发的核心。
组件可以提高代码的可复用性和可维护性，加快开发速度。
在编写组件之前，需要先确定组件的作用和功能，并将其分解为更小的可复用组件。
然后，根据设计需求和框架的语法，编写组件的HTML结构、CSS样式和JavaScript逻辑。
使用框架提供的组件库或第三方库可以进一步加快开发进度。
步骤五：实现页面交互移动端网页的交互效果对用户体验至关重要。
根据设计需求和产品要求，使用前端框架技术来实现页面的交互效果。
框架技术通常提供了丰富的API和工具，如React的Hooks和Vue.js的指令，用于处理用户输入、响应事件和更新页面等。
dreamweaver8网页设计 第九章 使用框架布局网页
2021/10/10
6
9.2 框架和框架集的基本操作
9.2.1 选择框架和框架集 1．在文档编辑窗口中选择
在文档编辑窗口中选择框架的方法为：按住【Alt】 键的同时在要选择的框架内单击，被选中的框架 边框变为虚线。 如要选择框架集，则单击该框架集上的任意边框 即可，选中的框架集所有边框都呈虚线显示。
2021/10/10
2
9.1.2 了解框架网页构造
下图所示网页至少由三个单独的网页文档组成：两 个框架区域中显示的两个页文档和把这两个文档 显示在一个界面上的框架集文档。在Dreamweaver 中设计使用框架的网页时，必须全部保存这三个文 件，框架网页才能在浏览器中正常显示。
2021/10/10
3
9.1.3 创建框架集
1．使用“新建文档”对话框创建
使用“新建文档”对话框创建框架集的方法同 创建普通页面的方法相似。
2021/10/10
4
2．使用“布局”插入栏创建
使用“布局”插入栏创建框架集就像插入表格 一样简单。
2021/10/10
5
3．手动创建
使用前面两种方法创建的都是Dreamweaver中预 定义的框架集，当这些框架集无法满足用户需求 时，可以在此基础上手动分割创建框架。
2021/10/10
7
2．在“框架”面板中选择
选择“窗口”>“框架”菜单，可打开“框架” 面板，该面板中显示了窗口中框架的结构，不同 的框架区域显示了框架的名称。
选择框架：在“框架”面板中单击需要选择的 框架即可将其选中，被选择的框架在“框架” 面板中以粗黑框显示。 选择框架集：在“框架”面板中单击框架集的 边框即可选择框架集。
2021/10/10
框架页和框架集
将鼠标定位在框架边框上，当鼠标光标变成 或 形状时，单 击鼠标左键，就选中整个了框架，同时在编辑区该框架集周围有一圈 虚线。
3．保存框架页和框架集 在插入框架后，必须及时保存框架页和框架集。在保存框架之前，必 须先保存框架集文档，指明整个框架的形成，否则会出现递归错误。
（1）保存框架集
直接在框架中编辑HTML文档，和在普通页面中编辑HTML文档一 致，只须注意在保存时，必须选择【文件】|【保存全部】命令。
5．设置框架页和框架集属性
（1）设置框架集属性
1、打开创建好的HTML框架文档，打开【框架】面板。 2、 如果【框架】面板没有出现，可以执行【窗口】|【框架】命令。 3、在【框架】面板中单击各个框架集边框，【属性】检查器中就 会变成各框架集的属性设置。 4、 根据设置要求，对每一个层次的框架集进行属性设置。
嵌套框架中的属性设置级别高于框架设置文档中的属性级别，ห้องสมุดไป่ตู้果在框 架设置中指定框架的边界为零，而在嵌套框架中指定有边界，则最后显示 的框架是有边界的。
“框架集”属性检查器
（2）设置框架页属性
1、在【框架】面板中单击个框架页，在【属性】检查器中就会显 示各框架页的属性。 2、根据设置要求，对各个框架页进行属性设置。
1．替换框架与删除框架
在编辑完成框架的结构后，有时会发现错误，这时可以通过替换与删 除框架来达到目的。
（1）替换框架
在某些多层嵌套框架建立完成后，有时需要重新设置某一层的框架结 构，这时就需要替换框架。替换框架就是将框架集中某个框架的内容替换 成另外一个框架文件。 1、 打开已经设置完成的框架集。在【框架】面板中单击需要替换 的那个框架页，进行编辑。 2、 执行命令【文件】|【在框架中打开】命令。 3、弹出【选择HTML文件】对话框。在其中选择替换文件，单击 【确定】按钮。
第六章 使用框架,层和时间轴
第六章使用框架、层和时间轴本章要点：●框架的概念●使用框架设置网页布局●层的概念●创建层●使用时间轴一、使用框架（P90 6.2 使用框架）（一）、使用框架如果多个网页拥有相同的导航区，只是内容有所不同，则可以使用框架来设计网页布局，这样浏览者在查看不同内容时，无需每次都下载整个页面，而可以保持导航部分不变，只下载网页中需要更新的内容即可，从而极大提高网页的下载速度。
这类网页称为框架页，其最典型的应用时各大论坛的设计。
1、框架的概念框架页面通过框架将网页分成多个独立的区域，在每个区域可以单独显示不同的页面，每个区域可以独立翻滚。
（1）框架网页的结构框架由框架和框架集组成，框架就是网页中被分隔开的各个部分，每一个部分都是一个完整的网页，这些网页共同组成了框架集。
框架集实际上也是一个网页文件，用于定义框架的结构、数量、尺寸等属性。
框架集又被称为父框架，框架被称为子框架，将某个页面划分为若干框架时，既可独立地操作各个框架，创建新文件，也可为框架指定自己制作好的文档。
选择【查看】-【可视化助理】-【框架边框】命令可以显示或隐藏框架边界。
（2）框架网页的功能——导航（3）框架结构的优点●浏览者无需为每个页面重新加载与导航相关的图形，可以大大提高网页的下载效率●每个框架都有自己的滚动条，浏览者可以独立滚动这些框架2、创建框架网页文档（1）在【新建文档】对话框中创建文件-新建-示例中的页-框架集-选择所需框架结构在【框架标签辅助功能属性】对话框中为每一个框架指定一个标题（2）在【布局】插入栏中创建插入-布局-框架-可选13种预定于框架（3）手动创建框架网页查看-可视化助理-框架边框，显示框架边框，选中所需分隔的框架，按ALT键同时，光标移至框架边框上，显示为双箭头时，即可将一个框架拆分为两个框架。
（二）、编辑框架1、框架的基本操作（1）创建嵌套框架打开一个框架网页，将光标移至要创建嵌套框架集的框架中，选择【插入记录】-【HTML】-【框架】-选择某种嵌套框架集（2）删除框架光标移至需要删除的框架边缘，显示为双箭头时，将鼠标朝向框架外继续拖拽至边框消失即删除该框架（3）选择框架和框架集【窗口】-【框架】，显示框架面板，在框架面板中选择所需框架。
frameset框架用法 html5
框架（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 HTML网页布局设计——框架的应用
广东工程职业技术学院计算机信息系《网页设计》实训报告实训题目：实训项目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图像。
用框架布局页面
10.2 创建框架和框架集
使用框架可以方便地实现网页的定位。与其他 定位方式不同的是，使用框架可以将一个浏览 器窗口划分为多个区域，在每个区域都可以显 示不同的HTML 文档。
一个框架显示包含导航控件的文档，而另一个 框架显示含有内容的文档，这是使用框架的一 个极其典型的例子。
10.2.1 使用预置框架集
框架与框架集
框架实际上由两部分组成，即框架与框架集。 框架就是网页中被分割开的各个部分，每部 分都是一个完整的HTML网页。网页中的各 个框架组成框架集，框架集实际也是一个 HTML文件，用于定义文档中框架的结构、 数量、尺寸及装入框架的页面文件，所以框 架集并不显示在浏览器中，只是存储了一些 框架如何显示的信息。
10.4 编辑框架
可以在标准、布局模式下对网页进行编辑 一样，也可以在框架与框架集中输入文本、 插入图像、修改框架与框架集的相关属性。
10.5 使用链接控制框架内容
使用框架的一个重要目的，就是在一个框架 中用链接来控制另一个框架中的显示内容。 要实现这样的功能，在使用链接时，必须指 定链接的目标位置，也就是指明要操作的框 架对象。框架的位置是通过框架的名称来确 定和标示的。
“相对”的框架，为保证跨浏览器的兼容性，可设 “值” 为1
10.3.2 设置框架样式
【框架名称】：当前选中的框架命名，必须使单个单词， 只能以字母起始，区分大小写；
【源文件】：为当前选中的框架插入的框架网页的路径； 【滚动】：设定当框架内容超出框架范围时，框架边缘是
否出现滚动条； 【不能调整大小】：默认情况下，浏览时可改变大小；
本章结束
框架与框架集
相应地，框架集被称为父框架，框架被称为子框架。 当用户将某个页面划分为若干个框架时，既可独立 地操作各个框架，既可以创建新文档，也可为框架 指定已制作好的文档。通过选择“查看”|“可视化 助理”|“框架边框”命令，可以显示或隐藏框架边 界。