{管理信息化EAM资产管理}Dreamweaver网页设计8

《{管理信息化EAM资产管理}Dreamweaver网页设计8》由会员分享，可在线阅读，更多相关《{管理信息化EAM资产管理}Dreamweaver网页设计8（74页珍藏版）》请在金锄头文库上搜索。

1、第8章 框 架,8.1 框架的基本概念 8.2 创建框架集 8.3 保存框架和框架集 8.4 设置框架和框架集的属性 8.5 框架实例 8.6 模板 思考与练习,1,图8.1,2,8.1 框架的基本概念,框架（Frame）就是浏览器窗口的一个区域，在这个区域中可以显示一个单独的文档（页面）而不影响另一个区域中的显示内容。框架又理解为一个能独立显示的文档。 在一个页面上可以分出多个区域，设置多个框架。把这些框架看成一个整体，就称为框架集（ Frameset）。框架集定义了窗口的一种布局结构。 使用框架技术不仅可以布局版面，更多的是用于需要通过目录、索引来阅读内容的导航，也用于网页的导航条，因为用

2、它阅读链接内容时，可以不破坏版面的结构，不破坏目录或导航条的导航作用，处在什么位置，一目了然。,3,在HTML中，框架集用来标记，框架用标记。图8.1所示页面框架的HTML标记为： ,4, 该例说明，框架集可以嵌套，可以查看文件Program Files|Macromedia|Dreamweaver 4|Help|UsingDreamweaver|ContextHelp.htm。,5,8.2 创建框架集,8.2.1 创建框架集 为叙述方便，从一个空文档开始创建框架集，其他两种情况的创建方法完全相同。假设已创建了一个新的空白文档。 【例8.1】创建框架集 单击要分割框架的窗口，将插入点放置入窗口

3、中。如果已经存在框架，则需要单击某个框架窗格，将插入点放入该窗格内。 打开Frame（框架）对象面板（见图8.2）。 在框架对象面板上单击相应的按钮，或直接将按钮拖动到文档窗口中，即可在当前文档窗口中构建出相应格式的框架，框架以灰色线条分割（见图8.3）。,6,图8.2,7,图8.3,8,注意： 在框架对象面板中，命名Insert Left Frame(插入左框架)的按钮，实际上建立有两个框架的框架集，一个叫左（Left）框架，一个叫主框架（MainFrame）。在按钮图标中，白色部分（左边）表示左框架，蓝色部分（右边）表示主框架，而不是一个框架。其他框架对象类似。 如图8.3，单击“上、左嵌

4、套框架”按钮，建立了一个上、下左形式的框架集。 如果在图8.3所示的框架集中的某个框架中再次单击插入框架集按钮，则可以创建嵌套框架。如在图8.3 Main Frame框架中单击“创建下框架”按钮，建立的嵌套框架如图8.4。,9,图8.4,10,注意： 从图8.4看到，创建下框架时，原来框架中的内容被分割在了上边。实际上，如果要创建框架的页面或使框架中有内容，则需内容被分割在Main Frame(主框架)中，就是对象按钮图标中的蓝色区域。 创建框架集后，执行Window|Frames（框架集）命令，打开Frames可停靠浮动面板，可以清晰地看到框架的结构，单击其中的区域，可以选定框架（见图8.5

5、）。 提示： 创建框架集还可以使用Insert|Frames(插入|框架集)命令。 技巧： 页面中的框架用灰线分割，用鼠标拖动分割线，可以调整框架区域的大小。,11,图8.5,12,在页面中建立框架后，文档页面四周显示框架边框，在边框上按下鼠标向窗口内拖动，可以继续分割框架(见图8.6)。 使用Modify|Frameset命令(见图8.7)，可以将一个框架左（left）右(right)或上（up）下(down)拆分为两个框架，多次使用，可以将一个框架拆分为多个框架。 8.2.2 在框架中添加内容 框架集定义了一种页面分割结构，每一个框架可以显示一个单独的网页，也即每个框架就是一个网页。将插入

6、点定位在某框架中，就可以像编辑普通网页一样编辑框架网页，插入文本、表格、图像、格式化等（见图8.8）。如果框架中的内容超出框架范围，会自动显示滚动条，拖动滚动滑块，可以显示窗口外的内容。,13,图8.6,14,图8.7,15,图8.8,16,8.2.3 建立超链接 在图8.9所示的框架网页左下角的框架中有一个指向首页的链接，单击该链接，首页在该框架中显示（见图8.10），而首页中的“红楼梦”是指向图8.9的链接，如果多次单击首页中的“红楼梦”和“红楼梦人物”中的“首页”，在浏览器中就会形成网页显示上的嵌套（见图8.11），此非人们所愿。 不过，这种情况可以通过超链接的Target属性来解决。所

7、以在设置框架中的超链接时，一定要特别注意Target属性的设置。,17,图8.9,18,图8.10,19,图8.11,20,【例8.3】在框架中建立超链接 选中要建立超链接的对象，文字、图像等。 在属性面板中的Link（链接）对话框中输入目标端点的URL地址，或单击后面的文件夹按钮从磁盘选择文件。 在Link右边的Target（目标）文本框中输入打开目标网页的位置，或从后面的下拉列表中选择（见图8.12）。 _blank： 表示将开启一个新的浏览器窗口，并载入链接目标锚端的文档。 _parent： 在当前的浏览器的整个窗口中显示链接目标锚端的文档。 _self： 在链接所在的框架中显示链接目标

8、锚端的文档。,21,图8.12,22,_top： 在当前整个浏览器窗口显示链接目标锚端的文档内容，效果同_parent。 以上四项即使不是在框架中建立链接，也是可以选择的。只是_blank较常用，默认是_parent。在有框架的文档中建立超链接，下拉列表中还会列出当前各个框架的名字，可以选择在哪个框架中显示目标。在图8.12中： mainFrame表示在名为mainFrame框架中显示目标； leftFrame表示在名为leftFrame框架中显示目标； topFrame表示在名为topFrame框架中显示目标。 在图8.9中，右下部的框架，即“主页”链接所在框架是mainFrame，图8.1

9、0显示的Target属性取值是mainFrame或_self时的情形，取值为leftFrame和topFrame的情形见图8.13和图8.14。如果选择_top，则返回首页时，会以整个浏览器窗口显示。,23,图8.13,24,图8.14,25,8.2.4 浏览器不支持框架时的处理 在Internet上存在着各种各样的浏览器，有些浏览器甚至是基于字符模式的，所以不是所有的浏览器都一定支持框架技术。如果主页使用了框架技术，则不支持框架技术的浏览器就不能正常显示。在遇到这种情况时，一般应该在框架集文档中显示一些提示信息，告诉用户当前网页使用了框架技术，需要使用支持框架的浏览器观看，也可以制作没有使用

10、框架技术的网页，在浏览器不支持框架时显示该页。 在HTML中，当浏览器不支持框架时，会显示标记和之间的内容。如果浏览器支持框架，则会完全忽略和标记间的内容。,26,在Dreamweaver中，创建框架时已经在HTML中加入了下列语句： 需要做的就是在和之间要显示的主体内容。可以是一句提示信息，如：“本网页需要使用支持框架技术的浏览器浏览”，或是一个不使用框架的完整网页。要编辑该页，可以使用以下方法： 执行Modify|Frameset|Edit Noframes Content（编辑非框架内容）命令；,27, 这时文档窗口变为一个普通的文档窗口，可以在其中编辑非框架信息，这实际上也是一个网页，

11、只是其中不应再使用框架； 编辑完毕，再次执行Modify|Frameset|Edit Noframes Content命令，可以返回到原先的框架集文档窗口中。,28,8.3 保存框架和框架集,在含有框架的文档中，一个框架就是一个网页，对应一个HTML文件，称为框架文件。保存含有框架的网页时，除需要保存各个框架文件外，还需要保存一个记录框架结构的文件，可称这个文件为框架集文件。它也是一个HTML文件，但不包括任何网页中的具体内容，只是定义了框架结构和每个框架对应的网页文件名。浏览时通过该文件将各个框架文件显示在相应的框架中。所以，如果一个框架集中包含左右两个框架，则实际上应该保存3个文件，一个是

12、框架集文件，一个是左方框架对应的文件，另一个是右方框架对应的文件。,29,在Dreamweaver中，可以单独保存某个框架文件，或保存框架集文件本身，也可以将整个框架集（包括框架集文件和其中的各个框架文件）保存。 注意： 预览含有框架的网页效果，必须将各个框架文档以及框架集文档存储到磁盘上。 8.3.1 存储框架集文档 保存框架集结构的操作如下： 在Frames(框架)浮动面板中单击任何一个框架； 执行File|Save Frameset（保存框架集）命令（见图8.15），即可保存框架集文档； 如果框架集文档尚未存储，则会打开文件存储对话框，允许选择存储路径并输入文件名称，单击Save（保存）

13、按钮，即可保存框架集；,30,图8.15,31,如果框架集文件已经被存储过，则该操作将在原先的基础上再次保存文档内容，不会再出现文件存储对话框； 如果希望将框架集文档以另外的名称保存，执行File|Save Frameset As （框架集另存为）命令。 8.3.2 存储框架文档 在框架集文档窗口中，在要保存的框架文档中单击，将插入点放置到该框架中； 执行File|Save Frame（保存框架）命令（见图8.16），即可保存该框架文档； 如果框架文档尚未存储，则会打开文件存储对话框，允许选择存储路径并输入文件名，单击Save按钮，保存该框架文档。,32,图8.16,33,如果已经保存过该框架

14、文档，则该操作只是再次在原先基础上保存框架文档，不会出现文件存储对话框。 8.3.3 存储框架集及所有的文档 【例8.4】保存框架集和框架文档 执行File|Save All Frames命令。 如果有文档（包括框架集文档或框架文档）尚未被保存，则会出现文件存储对话框，提示选择存储路径并输入文件名称。单击Save按钮，即可保存这些文档。如果有多个文档尚未保存，则会依次出现多个文件存储对话框。 如果所有的文档都已经被保存过，则直接保存文件，而不会出现文件存储对话框。,34,8.3.4 打开框架和框架集文档 框架文档就是一般的网页文件，可以单独像一般网页文件一样打开并编辑。单独打开框架文件，不显示

15、框架。而框架集文档则记录框架结构及所链接的框架文档。打开框架集文档，显示框架结构，同时载入各个框架文档。,35,8.4 设置框架和框架集的属性,框架的属性包括框架的名称、源文件、空白边距、滚动特性、重设大小特性以及边框特性等。框架集的属性可以控制框架集的整体属性，例如框架的尺寸、颜色、框架之间边框的宽度等。在Dreamweaver中，通过属性面板和框架浮动面板，可以完成绝大多数的属性设置操作。 8.4.1 框架浮动面板 框架浮动面板即框架可停靠浮动面板，简称框架面板，它显示了页面的框架结构。执行Window|Frames命令，图8.17框架面板或按下Ctrl+F10键，可以打开或关闭框架面板（

16、见图8.17）。,36,图8.17,37,在框架面板中，显示当前框架集文档窗口中已经出现的框架窗格结构，同时在不同的框架区域中，还显示该框架的名称。在框架集文档窗口中建立框架、删除框架、修改框架的尺寸或名称时，框架面板上的显示都会发生相应的变化。 8.4.2 选中框架和框架集 要设置框架和框架集的属性，首先必须确定设置哪个框架的属性。 1. 用框架面板选中框架或框架集 要选中某个框架，可以直接在框架面板上单击对应的区域中任意位置。被选中的框架区域四周会出现黑色边框，在文档窗口中相应框架周围显示虚线。 要选中框架集，可以单击框架面板四周的框架边框,这时整个框架面板区域四周显示粗黑边框，文档窗口中该框架集的所有框架周围都会显示虚线。,38,图8.18是用框架面板选中框架，而图8.19是用框架面板选中框架集。注意，这是一个嵌套框架，选中的是一个子框架集。 2. 在文档窗口中选中框架或框架集 在文档窗口中，按住Alt键，然后单击要选中的框架窗格中的任意位置，即可选中该框架。被选中的框架四周会出现虚线。 在文档窗口中直接单击框架边框，即可选中框架集。选中框架集时，所有的框架边框上都会显示虚线