Dreamweaver网页设计8

1第8章框架8.1框架的基本概念8.2创建框架集8.3保存框架和框架集8.4设置框架和框架集的属性8.5框架实例8.6模板思考与练习2图8.138.1框架的基本概念框架（Frame）就是浏览器窗口的一个区域，在这个区域中可以显示一个单独的文档（页面）而不影响另一个区域中的显示内容。框架又理解为一个能独立显示的文档。在一个页面上可以分出多个区域，设置多个框架。把这些框架看成一个整体，就称为框架集（Frameset）。框架集定义了窗口的一种布局结构。使用框架技术不仅可以布局版面，更多的是用于需要通过目录、索引来阅读内容的导航，也用于网页的导航条，因为用它阅读链接内容时，可以不破坏版面的结构，不破坏目录或导航条的导航作用，处在什么位置，一目了然。4在HTML中，框架集用Frameset/Frameset来标记，框架用Frame/Frame标记。图8.1所示页面框架的HTML标记为：framesetcols=″224,*″frameborder=0border=″0″framespacing=0framesetrows=″124,*,61,0″frameborder=0border=″0″framespacing=0framesrc=″html/navigation.htm″name=″mm_navigation″scrolling=″no″resize=″no″marginheight=″0″marginwidth=″0″framesrc=″html/cont.htm″name=″left″scrolling=″yes″resize=″no″marginheight=″0″marginwidth=″5″border=″0″5framesrc=″html/other_refs_nav.htm″name=″other_navigation″scrolling=″no″resize=″no″marginheight=″0″marginwidth=″0″/framesetframesetrows=″*,0″border=″0″frameborder=0framespacing=0framesrc=″contextID.html″name=″right″scrolling=″auto″resize=″yes″marginwidth=″20″marginheight=″5″/frameset/frameset该例说明，框架集可以嵌套，可以查看文件ProgramFiles|Macromedia|Dreamweaver4|Help|UsingDreamweaver|ContextHelp.htm。68.2创建框架集8.2.1创建框架集为叙述方便，从一个空文档开始创建框架集，其他两种情况的创建方法完全相同。假设已创建了一个新的空白文档。【例8.1】创建框架集①单击要分割框架的窗口，将插入点放置入窗口中。如果已经存在框架，则需要单击某个框架窗格，将插入点放入该窗格内。②打开Frame（框架）对象面板（见图8.2）。③在框架对象面板上单击相应的按钮，或直接将按钮拖动到文档窗口中，即可在当前文档窗口中构建出相应格式的框架，框架以灰色线条分割（见图8.3）。7图8.28图8.39注意：在框架对象面板中，命名InsertLeftFrame(插入左框架)的按钮，实际上建立有两个框架的框架集，一个叫左（Left）框架，一个叫主框架（MainFrame）。在按钮图标中，白色部分（左边）表示左框架，蓝色部分（右边）表示主框架，而不是一个框架。其他框架对象类似。如图8.3，单击“上、左嵌套框架”按钮，建立了一个上、下左形式的框架集。④如果在图8.3所示的框架集中的某个框架中再次单击插入框架集按钮，则可以创建嵌套框架。如在图8.3MainFrame框架中单击“创建下框架”按钮，建立的嵌套框架如图8.4。10图8.411注意：从图8.4看到，创建下框架时，原来框架中的内容被分割在了上边。实际上，如果要创建框架的页面或使框架中有内容，则需内容被分割在MainFrame(主框架)中，就是对象按钮图标中的蓝色区域。⑤创建框架集后，执行Window|Frames（框架集）命令，打开Frames可停靠浮动面板，可以清晰地看到框架的结构，单击其中的区域，可以选定框架（见图8.5）。提示：创建框架集还可以使用Insert|Frames(插入|框架集)命令。技巧：页面中的框架用灰线分割，用鼠标拖动分割线，可以调整框架区域的大小。12图8.513在页面中建立框架后，文档页面四周显示框架边框，在边框上按下鼠标向窗口内拖动，可以继续分割框架(见图8.6)。使用Modify|Frameset命令(见图8.7)，可以将一个框架左（left）右(right)或上（up）下(down)拆分为两个框架，多次使用，可以将一个框架拆分为多个框架。8.2.2在框架中添加内容框架集定义了一种页面分割结构，每一个框架可以显示一个单独的网页，也即每个框架就是一个网页。将插入点定位在某框架中，就可以像编辑普通网页一样编辑框架网页，插入文本、表格、图像、格式化等（见图8.8）。如果框架中的内容超出框架范围，会自动显示滚动条，拖动滚动滑块，可以显示窗口外的内容。14图8.615图8.716图8.8178.2.3建立超链接在图8.9所示的框架网页左下角的框架中有一个指向首页的链接，单击该链接，首页在该框架中显示（见图8.10），而首页中的“红楼梦”是指向图8.9的链接，如果多次单击首页中的“红楼梦”和“红楼梦人物”中的“首页”，在浏览器中就会形成网页显示上的嵌套（见图8.11），此非人们所愿。不过，这种情况可以通过超链接的Target属性来解决。所以在设置框架中的超链接时，一定要特别注意Target属性的设置。18图8.919图8.1020图8.1121【例8.3】在框架中建立超链接①选中要建立超链接的对象，文字、图像等。②在属性面板中的Link（链接）对话框中输入目标端点的URL地址，或单击后面的文件夹按钮从磁盘选择文件。③在Link右边的Target（目标）文本框中输入打开目标网页的位置，或从后面的下拉列表中选择（见图8.12）。_blank：表示将开启一个新的浏览器窗口，并载入链接目标锚端的文档。_parent：在当前的浏览器的整个窗口中显示链接目标锚端的文档。_self：在链接所在的框架中显示链接目标锚端的文档。22图8.1223_top：在当前整个浏览器窗口显示链接目标锚端的文档内容，效果同_parent。以上四项即使不是在框架中建立链接，也是可以选择的。只是_blank较常用，默认是_parent。在有框架的文档中建立超链接，下拉列表中还会列出当前各个框架的名字，可以选择在哪个框架中显示目标。在图8.12中：mainFrame表示在名为mainFrame框架中显示目标；leftFrame表示在名为leftFrame框架中显示目标；topFrame表示在名为topFrame框架中显示目标。在图8.9中，右下部的框架，即“主页”链接所在框架是mainFrame，图8.10显示的Target属性取值是mainFrame或_self时的情形，取值为leftFrame和topFrame的情形见图8.13和图8.14。如果选择_top，则返回首页时，会以整个浏览器窗口显示。24图8.1325图8.14268.2.4浏览器不支持框架时的处理在Internet上存在着各种各样的浏览器，有些浏览器甚至是基于字符模式的，所以不是所有的浏览器都一定支持框架技术。如果主页使用了框架技术，则不支持框架技术的浏览器就不能正常显示。在遇到这种情况时，一般应该在框架集文档中显示一些提示信息，告诉用户当前网页使用了框架技术，需要使用支持框架的浏览器观看，也可以制作没有使用框架技术的网页，在浏览器不支持框架时显示该页。在HTML中，当浏览器不支持框架时，会显示标记Noframes和/Noframes之间的内容。如果浏览器支持框架，则会完全忽略Noframes和/Noframes标记间的内容。27在Dreamweaver中，创建框架时已经在HTML中加入了下列语句：noframesbodybgcolor=″#FFFFFF″text=″#000000″/body/noframes需要做的就是在Body和/Body之间要显示的主体内容。可以是一句提示信息，如：“本网页需要使用支持框架技术的浏览器浏览”，或是一个不使用框架的完整网页。要编辑该页，可以使用以下方法：①执行Modify|Frameset|EditNoframesContent（编辑非框架内容）命令；28②这时文档窗口变为一个普通的文档窗口，可以在其中编辑非框架信息，这实际上也是一个网页，只是其中不应再使用框架；③编辑完毕，再次执行Modify|Frameset|EditNoframesContent命令，可以返回到原先的框架集文档窗口中。298.3保存框架和框架集在含有框架的文档中，一个框架就是一个网页，对应一个HTML文件，称为框架文件。保存含有框架的网页时，除需要保存各个框架文件外，还需要保存一个记录框架结构的文件，可称这个文件为框架集文件。它也是一个HTML文件，但不包括任何网页中的具体内容，只是定义了框架结构和每个框架对应的网页文件名。浏览时通过该文件将各个框架文件显示在相应的框架中。所以，如果一个框架集中包含左右两个框架，则实际上应该保存3个文件，一个是框架集文件，一个是左方框架对应的文件，另一个是右方框架对应的文件。30在Dreamweaver中，可以单独保存某个框架文件，或保存框架集文件本身，也可以将整个框架集（包括框架集文件和其中的各个框架文件）保存。注意：预览含有框架的网页效果，必须将各个框架文档以及框架集文档存储到磁盘上。8.3.1存储框架集文档保存框架集结构的操作如下：①在Frames(框架)浮动面板中单击任何一个框架；②执行File|SaveFrameset（保存框架集）命令（见图8.15），即可保存框架集文档；③如果框架集文档尚未存储，则会打开文件存储对话框，允许选择存储路径并输入文件名称，单击Save（保存）按钮，即可保存框架集；31图8.1532如果框架集文件已经被存储过，则该操作将在原先的基础上再次保存文档内容，不会再出现文件存储对话框；④如果希望将框架集文档以另外的名称保存，执行File|SaveFramesetAs（框架集另存为）命令。8.3.2存储框架文档①在框架集文档窗口中，在要保存的框架文档中单击，将插入点放置到该框架中；②执行File|SaveFrame（保存框架）命令（见图8.16），即可保存该框架文档；③如果框架文档尚未存储，则会打开文件存储对话框，允许选择存储路径并输入文件名，单击Save按钮，保存该框架文档。33图8.1634如果已经保存过该框架文档，则该操作只是再次在原先基础上保存框架文档，不会出现文件存储对话框。8.3.3存储框架集及所有的文档【例8.4】保存框架集和框架文档①执行File|SaveAllFrames命令。②如果有文档（包括框架集文档或框架文档）尚未被保存，则会出现文件存储对话框，提示选择存储路径并输入文件名称。单击Save按钮，即可保存这些文档。如果有多个文档尚未保存，则会依次出现多个文件存储对话框。如果所有的文档都已经被保存过，则直接保存文件，而不会出现文件存储对话框。358.3.4打开框架和框架集文档框架文档就是一般的网页文件，可以单独像一般网页文件一样打开并编辑。单独打开框架文件，不显示框架。而框架集文档则记录框架结构及所链接的框架文档。打开框架集文档，显示框架结构，同时载入各个框架文档。368.4设置框架和框架集的属性框架的属性包括框架的名称、源文件、空白边距、滚动特性、重设大小特性以及边框特性等。框架集的属性可以控制框架集的整体属性，例如框架的尺寸、颜色、框架之间边框的宽度等。在Dreamweave