下载文档原格式
使用框架和层布局网页学习要点：●框架结构的的概念●创建框架集和框架●设置框架和框架集属性●层的创建和设置●层的基本操作●创建浮动框架网页●创建上下结构框架网页●利用层制作下拉菜单框架可以用来划分网页，使不同的文件可以载入不同页面的定义区域中。
框架通常用来定义页面的导航区域和内容区域。
框架有两个主要部分---框架集和框架。
框架集是在一个文档内定义一组框架结构的HTML网页。
层是Dreamweaver中另外一种可以进行排版的工具。
它可以被定位在页面的任意位置，并且其中可以包含文本、图像等所有可直接插入到网页的对象。
一、框架结构的概念框架的作用就是把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。
当在文件中建立框图架时，Dreamweaver可以创建一个无标题的框架集文件，在每个框架中创建无标题文件，如果某个页面补划分成两个框架，它实际上包含的却是3个独立的文件：一个框架集文件和两个框架内容文件。
框架内容文件包含了将出现在页面框架中的内容。
框架可以将文档窗口水平或垂直地分成若干部分，以使用户能够一次浏览更多的内容，在一般情况下，用户需要不停地在文章内容和导航内容之间切换。
但是，如果利用框架结构，把导航内容永远固定在页面的顶或右边，那么在任何时候，用户都可以直接选择上边或右边的导航内容，切换到想要浏览的内容。
二、创建框架集和框架框架是浏览器窗口中的一个区域，它可以显示与浏览器窗口的其余部分中所显示内容无关的HTML文档。
框架集是HTML文件，它定义一组框架的布局和属性，包括框架的数目、框架的大小和位置以及在每个框架中初始显示的页面的URL。
（一）使用预定义的框架集选择“文件>新建”命令，弹出“新建文档”对话框，在对话框中选择“常规”选项卡，在“类别”列表中选择“框架集”选项，在“框架集”列表中选择相应模式。
“创建”。
（二）创建嵌套框架集在另一个框架集之内的框架集称为嵌套的框架集。
一个框架集文件可以包含多个嵌套的框架集。
第十七讲使用“布局模式”进行页面布局和框架的基础知识在上一讲中，我们学习了利用布局模式进行页面布局设计。
在本讲中我们继续学习使用“布局模式”进行页面布局和并开始学习框架的基础知识。
通过本讲的学习，我们希望达到下面的学习目标：◆设置列宽度；◆使用间隔图像；◆在“文档”窗口中使用框架集；◆设计框架集；◆选择框架和框架集；◆在框架中打开文档。
17.1 设置列宽度可以为列指定一个特定的宽度或让它延伸以填充浏览器窗口尽量大的部分。
也可以使用间隔图像为列指定一个最小宽度。
有时HTML 代码中设置的列宽度与屏幕上的外观宽度不匹配。
发生这种情况时，用户可以使宽度一致。
表格中的列可以具有固定的宽度或自动延伸。
在布局完成之前让某个列自动伸展可能会对表格布局产生无法预料的效果。
为了防止列变得出乎意料得宽或窄，在让某个列自动伸展之前，请先创建完整的布局，并在使列自动伸展时使用间隔图像。
如果每个列都包含其他内容，可以使该列保持所需的宽度，则无需使用间隔图像。
如果要使列自动伸展，则单击列标题菜单，然后选择“列设置为自动伸展”，或者先选择列中的一个单元格，然后在属性检查器中单击“自动伸展”。
在给定的表格中用户只能让一个列自动伸展。
如果尚未给该站点设置间隔图像，将出现“选择占位图像”对话框。
如果出现“选择占位图像”对话框，请选择下列选项中的一个，然后单击“确定”。
在自动伸展列的顶部或底部会出现波浪线。
在包含间隔图像的列的顶部或底部会出现双线。
◇“创建占位图像文件”创建一个GIF 图像以用作间隔图像，并允许选择一个存储该间隔图像文件的文件夹，例如站点的图像文件夹。
如果没有为站点创建间隔图像文件，将使用这个推荐的选项；◇“使用现存的占位图像文件”允许指定现有的间隔图像文件用于自动伸展表格中。
间隔图像应该是单像素的透明GIF；◇“对于自动伸展表格不要使用占位图像”指定Dreamweaver 应该避免向表格中自动添加间隔图像。
如果插入间隔图像时没有使列自动伸展，则不会出现此选项。
框架布局网页Dreamweaver提供了几种不同的网页布局方式，之前为同学们介绍了表格，接下来介绍利用框架来布局网页。
要求同学们掌握建立框架的方法，熟练运用框架的属性面板对框架进行属性设置。
实验原理：框架将浏览器的窗口分割为多个可显示区域，每一个显示区域称为一个框架，它可以包含一个单独的、可以滚动的页面。
每一个框架都包含一个独立的HTML文件。
一、利用框架排版实验内容：步骤1 选择［文件］菜单栏中的［新建］命令，创建一个新的页面，并将其命名为“个人主页”。
步骤2 选择［插入］工具栏中［布局］任务栏中的［框架］命令，单击按钮，选择下拉菜单的“顶部和嵌套的左侧框架”命令。
步骤3 弹出［框架标签辅助功能属性］对话框，将网页中框架的各个部分进行命名。
步骤4 选择［窗口］菜单栏中［框架］命令。
步骤5 右侧的面板中就加入了［框架］面板，选中“topFrame”框架进行编辑。
步骤6 页面下方出现了“topFrame”框架的［属性］面板。
对“top Frame”框架进行编辑。
步骤7 选中“mainFrame”框架进行编辑，页面下方出现了“mainFrame”框架的［属性］面板，对“mainFrame”框架进行编辑。
步骤8 选中“leftFrame”框架进行编辑，页面下方出现了“leftFrame”框架的［属性］面板，对“leftFrame”框架进行编辑。
步骤9 选择［文件］菜单栏中的［保存全部］命令，对文件进行保存。
步骤10 弹出保存整体文件的对话框，为文件命名为“index.html”。
步骤11 对各个框架部分进行保存，为各个框架进行命名。
步骤12 单击F12，在浏览器中预览效果。
二、创建框架集创建框架集，可以自己设计，也可以从预定义的框架集中选择，还可以修改一个已存在的Dreamweaver文件来创建。
实验内容：步骤1 选择［修改］菜单栏中的［框架集］命令。
步骤2 根据需要在其子菜单中选择任意一个分割命令。
实验3-1使用框架布局网页实验内容和步骤：实验3-1使用框架布局网页参考P156页案例1“使用框架布局休闲音乐网页”（图8-1）第1步，文件->新建->HTML第2步，插入->HTML->框架->上方及下方第3步，弹出“框架标签辅助功能属性”点击确定第4步，文件->保存全部（此处重点，因为保存4个不同的html文件）第4.1步，第一个将网页框架集保存为chap08-1C-index.html第4.2步，第二个将网页框架集中的中间框架保存为chap08-1C-main.html第4.3步，第三个文件如何保存呢？1).先在右下角框架处用鼠标单击灰色的TopFrame处，2).然后再用鼠标单击设计区窗口的上方部分。
3).文件->保存框架4).选择同一个文件夹，文件命名chap08-1C-top.html后，单击保存按钮第4.4步，第四个文件如何保存呢？1).先在右下角框架处用鼠标单击灰色的BottomFrame处，2).然后再用鼠标单击设计区窗口的下方部分。
3).文件->保存框架4).选择同一个文件夹，文件命名chap08-1C-bottom.html后，单击保存按钮第4.5步，检查，一共保存四个文件第5步，选中上方框架插入->图像images\top.jpg第6步，选中中间框架文件->在框架中打开sub-pages\w1.html第7步，选中下方框架输入文字CopyRight 2019第8步，然后，文件->保存全部按F12预览。
如果需要调整，还要执行，文件->保存全部，再按F12预览设计效果。
单元4——使用框架布局页面学习目标：➢理解框架布局的原理➢掌握使用框架进行页面布局的方法➢学习利用浮动框架嵌入插件Dreamweaver CS3提供了一种很方便的可以进行网页布局的工具——框架。
框架主要是用来把浏览器窗口划分为若干个区域，每个区域可以分别显示不同的网页。
访问者浏览站点时,可以使某个区域的文档永远不更改，但可通过导航条的链接更改主要框架的内容.框架结构常被用在具有多个分类导航或多项复杂功能的Web页面上.任务4.1 框架基本操作在网页中，一个网页可以包含多个页面，此时需要用到框架.使用框架可以进行页面布局,把网页化分为几个区域。
例如，一个水平框架用于放置Banner（也就是标题）；左垂直框架用于放置导航；右垂直框架用于放置正文。
每一个框架单独使用一个网页，从而使页面设计简单化。
框架除了用于页面布局，还可用于制作目录.包含框架的网页称为框架集。
框架集定义了各个框架的结构、数量、大小和目标等属性.本章将介绍框架的使用方法。
4。
1。
1创建一个新的框架集网页(1）运行Dreamweaver CS3，选择“文件”→“新建”命令，弹出“新建文档"对话框，在对话框中选择“示例中的页”→“框架集" →“上方固定，左侧嵌套”选项，如下图所示。
(2）单击“创建”按钮，弹出“框架标签辅助功能属性”对话框，如下图所示,在此可为每一个框架指定一个标题.（3）单击“确定”按钮，即可创建一个上方固定，左侧嵌套的框架集,如下图所示。
4。
1.2保存框架每个框架包含一个文件，因此一个框架集会包含多个文件，在保存网页时,要将整个网页文档都保存下来。
操作步骤如下：（1）选择“文件”→“保存全部”命令，整个框架边框会出现一个阴影框，同时会弹出“另存为”对话框，命名为“index。
html”，表示整个框架集的名称.（2）单击“保存”按钮，弹出第二个“另存为"对话框，右边框架内侧出现阴影，命名为“main。
dreamweaver框架布局页面技巧
我们为大家收集整理了关于dreamweaver框架布局页面，以方便大家参考。
框架由两个主要部分组成框架集和单个框架。
1、点击插入中的框架，即显示出已定义的13种框架的样式。
我们上中下结构为例。
2、点击上中下框架结构的图标，此时在页上插入上下两个框架，将整个页面分割成了3部分。
我们分别在上面输入上，在中间输入中，在下面输入下。
3、先保存一下。
点击菜单中的文件/保存全部。
这时首先保存框架集文件，可以自己修改名字，如kuangjia.htm。
然后将分别保存框架集中的其他页面。
在保存对应的页面的时候，该部分会以虚线框起来，这样可将上面部分保存为shang.htm。
下面部分保存为xia.htm。
中间部分保存为zhong.htm。
4、至此，我们保存了四个页面，分别是框架集，和组成框架集的上、中、下三个页面。
所以，其实这个框架是由四个页面组成的，所以用框架会降低一点用户浏览的速度。
5、点击窗口/其他/框架，打开框架的面板。
在这里单击某个框架，即可选。
使用前端框架实现网页布局的方法在现代的网页开发中，使用前端框架来实现网页布局是一种非常常见的做法。
前端框架通过提供一系列的组件和样式来帮助开发者快速搭建页面布局，减少重复代码的编写，提高开发效率。
本文将介绍几种常见的前端框架以及它们实现网页布局的方法。
首先，我们来介绍一下Bootstrap框架。
Bootstrap是一个开源的 HTML、CSS和 JavaScript 框架，它提供了一套响应式的网页组件和布局样式。
使用Bootstrap可以轻松实现网页布局。
在使用Bootstrap时，我们首先需要引入Bootstrap的CSS和JavaScript文件。
然后，我们可以使用Bootstrap提供的预定义的网格系统来构建页面布局。
Bootstrap的网格系统将页面划分为12个等宽的列，在布局时，我们只需要使用合适的列数和组件进行组合即可实现所需的布局。
类似于Bootstrap的还有Foundation框架。
Foundation是另一个受欢迎的前端框架，也提供了一套可定制的网页组件和布局样式。
使用Foundation框架实现网页布局与Bootstrap类似，我们同样需要引入Foundation的CSS和JavaScript文件。
然后，我们可以使用Foundation提供的网格系统和组件来构建页面布局。
Foundation的网格系统也是基于等宽的列，通过使用不同列数的组合，我们可以实现各种不同的布局效果。
除了以上两个较为流行的前端框架外，还有一些其他的前端框架也可以用来实现网页布局。
比如Semantic UI、Material-UI等。
这些框架的使用方法和原理类似，都是通过提供一系列的组件、样式和网格系统来帮助我们实现网页布局。
除了使用现成的前端框架，我们也可以使用CSS的强大特性来自行实现网页布局。
CSS提供了丰富的布局方法和属性，我们可以利用这些属性来实现各种复杂的布局效果。
比如，使用CSS的position属性可以实现绝对定位布局；使用CSS的float属性可以实现浮动布局；使用CSS的flexbox属性可以实现弹性布局等。
单元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个角，当光标变成时，拖动到框架的中间，可以将框架拆分成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>键预览，得到如下图所示效果。
分别点击各链接文字，top框架和left框架都保存不变，而main框架中的内容将会进行改变，如下图所示。
