网页设计10.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,第,10,章 框 架,本章主要介绍框架和框架集的概念、框架页面的创建、框架的嵌套、框架集及框架页面的属性设置等内容，最后还涉及到框架的具体应用。,10.1,框架和框架集的概念,单个框架是指在网页上定义的一个区域，框架的作用就是把浏览器的窗口划分为若干个区域，每个区域可以分别显示不同的网页。框架由两个主要部分,框架集和单个框架组成。框架集就是框架的集合。框架集的作用就是把浏览器窗口划分为若干个区域，每个区域可以显示不同的网页。框架集定义了一页网页显示的框架数、框架的大小、载入框架的网页源和其他可定义的属性等等。一般情况下，框架集文档中的内容不会显示在浏览器中，所以可以将框架集仅仅看成是一个可以容纳和组织多个文档的容器。,图,10-1,显示了框架和框架集之间的关系。图中，一个框架集中包含了三个框架。,图,10-1,框架和框架集的关系,如果某个页面被划分为两个框架集，那么它实际上包含的是三个独立的文件，一个架集文件和两个框架内容文件。框架内容文件就是显示在页面框架中的内容。,框架通常被用来定义页面的导航区和内容区域。,10.2,创建框架,10.2.1,创建框架集,在一个空白文档的基础上构建框架，有如下两种方法。,1.,第一种方法：,新建一个页面，选择菜单“查看”,“,可视化助理”,“,框架边框”命令，如图,10-2,所示，则文档四周出现边框，用鼠标点击边框之后可以看见虚线框，如图,10-3,所示，说明新建的页面中已经附带了框架。,图,10-2,创建框架集,图,10-3,出现边框,用鼠标拖拽边框，松开鼠标之后就可以把窗口一分为二，这样就把页面分为两个框架。例如拖拽左右边框可以把窗口分为左右两个部分，而拖拽上下边框可以把窗口分为上下两个部分。另外，也可以拖拽窗口的四个角，这样可以直接把窗口分为四个区域。如图,10-4,所示。当窗口分割为几个框架之后，每个框架都可以作为独立的网页进行编辑，也可以直接把某个已经存在的页面导入到该框架中。,原始表格,水平分割文档,水平垂直分割文档,图,10-4,用拖曳的方法创建框架集,垂直分割文档,框架允许嵌套，比如要创建图,10-5,所示的框架，可以先通过上述的方法水平一分为二，但是接着不能直接拖拽边框，否则会得到图,10-4,中水平垂直分割文档所示的框架。正确的方法是先在右下角的框架面板中点击右部的框架，然后再按下,键拖拽边框。若右边框架面板关闭，则选择彩单“窗口”,“,其它”,“,框架”，即可显示框架面板。,图,10-5,创建嵌套框架,如果边框拖拽错了，只要用鼠标把需要删除的边框拖到父框架的边框上或拖离页面即可删除。如图,10-6,所示。,图,10-6,删除框架,2.,第二种方法：,单击需要分割框架的窗口，将光标放置到窗口中。如果已经存在框架，则需要单击某个框架窗格，将光标放入该窗口内。,打开“修改”菜单，选择“框架页”，打开相应的子菜单。如图,10-7,所示。选择相应的分割框架命令，拆分如图,10-8,所示的框架。,图,10-7,拆分框架,图,10-8,原始框架,拆分左框架：将文档窗口拆分为左右两个框架。当前文档窗口中的内容被放置在左边框架内，如图,10-9,所示。,图,10-9,拆分左框架,拆分右框架：将文档窗口拆分为左右两个框架。当前文档窗口中的内容被放置在右边框架内，如图,10-10,所示。,图,10-10,拆分右框架,拆分上框架：将文档窗口拆分为上下两个框架。当前文档窗口中的内容被放置在上面框架内，如图,10-11,所示。,图,10-11,拆分上框架,拆分下框架：将文档窗口拆分为上下两个框架。当前文档窗口中的内容被放置在下面框架内，如图,10-12,所示。,重复上述操作，继续拆分窗口，即可创建嵌套框架。,图,10-12,拆分下框架,10.2.2,创建预定义框架集,Dreamweaver,预定义了多种框架集形式。使用预定义框架集，可以快速简便地创建框架。,选择菜单“窗口”,“,插入”，在插入面板上选择“框架”标签，切换到框架插入面板。预定义框架集图标的蓝色区域代表当前的框架，如图,10-13,所示。,插入面板中提供了,13,种框架模板，主要分为垂直框架、水平框架和嵌套的框架集三种。,图,10-13,框架插入面板,1.,垂直框架,垂直框架网页模板提供了一种左右分栏的页面模式，,Dreamweaver,MX,提供了两种垂直双框架网页模板“目录”模板 和“垂直拆分”模式 两种模式。,目录：页面左方创建一个目录框架，右面为主要框架。目录框架中的超链接目标指向主要框架，在目录框架中打开超链接会改变主要框架中的显示内容。如图,10-14,所示。,垂直拆分：创建独立的左部和右部两个框架，相当于两个独立的页面。,图,10-14,垂直框架,2.,水平框架,水平框架网页是按照上下来布局的，,Dreamweaver,MX,提供了三种 、水平框架网页。依次为：标题、页脚、上下的层次结构。,标题：第一个模板是“标题”框架模板。页面的上方创建了一个导航标题框架，下面创建了一个主框架。标题框架中的超链接的目标框架是主框架，打开标题框架中的超链接会改变主框架中的内容。如图,10-15,所示。,图,10-15,水平框架（标题）,页脚：第二个模板是“页脚”框架页面模板。页面的上方创建了一个主要框架，下面创建了一个页脚框架。页脚框架中的链接的目标框架是主框架，打开页脚框架中的超链接会改变主框架中的内容。如图,10-16,所示。,上下的层次结构：创建三个自顶向下的信息层次结构。顶部和底部的框架是常规的超链接，链接的目标框架是中间的框架，打开顶部和底部框架中的超链接会改变主框架中的内容。如图,10-16,所示。,图,10-16,水平框架（页脚）,3.,嵌套的框架集,Dreamweaver,MX,提供了 、八种嵌套框架网页模板。如果在一组框架里，不同行或不同列中有不同数目的框架，则要求使用嵌套的框架集。,10.2.3,创建,NOFRAMES,如果浏览器不支持框架，则不显示框架集和框架文档内容，所以应该在框架文档中，创建位于,和,标记间的提示信息，告诉用户如何访问网页。通常，将这种内容称作,NORFAMES,内容，或无框架内容。,Dreamweaver,提供了相应的方法来方便地创建无框架内容。,选择菜单“修改”,“,框架页”,“,编辑无框架内容”命令，则文档窗口即变成一个普通的文档窗口，可以在其中编辑无框架信息，如图,10-17,所示。可以按照编辑普通文档的方法，编辑其中的内容。例如，输入文字、插入图像以及创建链接等。,再次选择菜单“修改”,“,框架页”,“,编辑无框架内容”命令，则返回到原先的框架集文档窗口中。,图,10-17,编辑非框架内容,10.2.4,存储框架和框架集文件,在,Dreamweaver,中，可以单独保存某个框架文档、框架集文档，也可以将整个框架集（包括框架集文档本身以及其中的各个框架文档）保存。当在文档窗口中构建框架时，,Dreamweaver,会为新生成的框架文档以及框架集文档临时命名，例如，,UntitledFrameset_1,、,UntitledFrameset_2,等。,1.,存储框架集文档,单击框架边框，选中框架集文档。选择菜单“文件”,“,存储框架集”命令，即可保存框架集文件。若想将框架集文档以另外的名称保存，选择菜单“文件”,“,另存储框架为”命令。出现“保存为”对话框，如图,10-18,所示。,图,10-18,保存为对话框,2.,存储框架文档,单击要保存的框架窗格，将光标放置到该窗格中，即选中要保存的框架文档。选择菜单“文件”,“,存储框架”命令，即可保存框架文档。若想将框架文档以另外的名称保存，选择菜单“文件”,“,另存框架为”命令。,3.,存储框架集中所有的文档,当框架集中包含多个框架，不便于逐个保存时，可以一次性保存框架集中所有的文档。选择菜单“文件”,“,全部保存”命令，即可保存所有的框架文档。,10.3,设置框架和框架集的属性,1.,设置框架的属性,框架的属性包括框架的名称、框架源文件、框架的空白边框、框架的滚动特性、框架的重设大小特性以及框架的边框特性等，利用框架的属性面板可以完成这些属性的设置。,首先选中框架。按住,Alt,键，然后单击文档窗口中要选中框架的窗格中的任意位置，即可选中该框架。属性面板则如图,10-19,所示。,图,10-19,选中框架时的属性面板,框架名称：输入框架的名称。框架的名称必须是一个单词，其中可以出现短下划线符号“,_”,，但是不能出现连字号“,-”,，句点“,.”,以及空格。框架的名称可以以字母开头，但是不能用数字开头。并且不能使用,JavaScript,保留关键字，例如,top,或,navigator,之类。,源：设置该框架源文件的,URL,。单击右方的文件夹窗口，然后从磁盘上选择框架文件，或是利用指向文件的图标来提取,URL,地址。,另一种指定框架源的方式：首先，在文档窗口中单击框架窗格，将光标放入该窗格中，然后选择菜单“文件”,“,在框架中打开”命令，这时会弹出文件操作对话框，提示用户从磁盘上选择要放入该框架中的文件。如图,10-20,所示。,图,10-20,文件操作对话框,滚动条：在该下拉列表中，设置该框架中出现滚动条的方式。,（,1,）自动：当框架文档内容超出了框架大小时，出现滚动条。可以通过拖动滚动条，显示框架内容。,（,2,）是：无论框架文档中的内容是否超出框架的大小，都会显示框架滚动条。,（,3,）否：即使框架文档中的内容超出框架的大小，也不会显示框架滚动条。,（,4,）默认：大多数浏览器当作自动方式。,不可重设大小：选中该复选框，则设置无法通过拖动框架的边框（即框架和其它框架之间的分隔条）来改变框架的大小。清除该复选框，则可以通过拖动该框架同其他框架之间的分隔条来改变其大小。,边框颜色：在该颜色井中，设置框架边框的颜色。,边距宽度：设置当前框架左右边框同框架内容的间距。,边距高度：设置当前框架上下边框同框架内容的间距。,边框：选择该下拉列表中不同的选项，可以控制是否显示当前框架的边框。,（,1,）是：选择该选项，则该框架与四周的框架相处显示分隔条。,（,2,）否：选择该选项，则该框架与四周的框架相邻处不显示分隔条。,（,3,）默认：选择该选项，大多数浏览器将之默认为（是）方式。,只有将与当前框架相邻的所有框架都设置为不显示时，框架间的边框才会真正不显示。,2,设置框架集的属性,框架集的属性决定了框架集的整体属性，例如框架的尺寸、框架的颜色、框架之间边框的宽度等。,选中框架集，属性面板如图,10-21,所示：,图,10-21,选中框架集时的属性面板,边框：在该下拉列表中，可以设置框架集中所有的框架的边框是否被显示。其中各选项与框架属性中的边框属性相同。,注意，对框架的属性设置会覆盖对框架集的属性设置。例如，将某个框架设置为无边框，而其中某个框架设置为有边框，则实际将显示该框架的边框。,边框颜色：在该颜色井中，设置框架集边框的颜色。,同样对框架的属性设置将覆盖对框架集的属性设置。例如，将某个框架集边框设置为红色，但是又将其中某个框架的边框颜色设置为蓝色，则实际显示中该框架集除该框架之外的所有框架边框都为红色，而该框架边框显示为蓝色。,边框宽度：设置框架集中所有框架的边框宽度。在该文本框中输入框架边框宽度值，单位为像素。输入,0,则不显示边框。,值和单位：在框架集的属性面板中的值和单位区域，可以设置框架集中不同框架的宽度和高度。,行列：要设置框架的大小，在行列选择区中单击行,/,列选择标签选择行,/,列。然后，在值域中输入一个数字，设置选定行或列的大小，并在单位下拉菜单上选择量度单位。量度单位有三个选项：,像素：以像素为单位设置行高或列宽。以该方式设置的框架大小是固定的，不随浏览器窗口大小改变而改变。对于一些要保持一样大小的框架（如导航栏），经常选择该选项。,百分数：选择该项，表示当前框架同当前框架集的大小成百分比。这种方式设置的框架大小将随浏览器窗口大小变化而改变。,相对：表示在值文本框中输入的数值是当前框架同其他框架之间的大小比例。,注意，在设置框架大小时，三种单位的优先级从高到低分别为：像素、百分比、相对。例如，如将某个框架大小设置为以百分比为单位，然后又用像素为单位设置了其他框架的大小，则,Dreamweaver,会以像素为单位设置框架的大小。,3,设置框架和框架集的标题,在显示框架集文档的窗口中，可以分别为每个框架文档设置标题，也可以为框架集文档本身设置标题。,首先将光标放置在要设置标题的框架窗口中，或选中该框架，若要设置框架集标题，则需要选中整个框架集。选择菜单“修改”,“,页面属性”命令，弹出页面属性设置对话框。如图,10-22,所示。在标题文本框中，设置相应的标题名称。也可以直接在工具栏上的“标题”文本框中设置框架和框架集的标题。,图,10-22,页面设置对话框,设置框架文档的标题主要是为了便于管理，但在浏览框架集文档时，浏览器标题栏上只显示框架集文档的标题，而不显示每个框架文档的标题。如果用浏览器直接打开某个框架文档，则浏览器标题栏上会显示该框架文档的标题。,10.4,应用实例,图,10-23,显示了,微型计算机,书中第十章的课件页面，该页面由四个框架文档组成。其中左上角返回区域、右上角标题区、左下角导航栏、右下角主要内容显示区各为一个框架。,图,10-23 Pentium,多任务处理页面,该页面的框架制作过程如下：,1),新建一个页面，选择菜单“查看”,“,可视化助理”,“,框架边框”命令，则文档四周出现边框，用鼠标点击边框之后可以看见虚线框。,2),用鼠标拖拽窗口的一角，将窗口分为四个区域，调整四个窗口的大小比例。这样每个框架都可以作为独立的网页进行编辑，也可以直接把某个已经存在的页面导入到该框架。,3),将返回图标导入到左上角的框架中，并建立相应的链接。将标题导入到右上角框架中。左下角导航栏，将预先制作好的导航栏页面导入到该框架中。导航栏页面可以直接用,HTML,编写，在编写过程中，要注意每一章节的链接页面是否正确。,4),保存所有的框架页面。,10.5,习题,一、填空与选择,1.,框架主要由,_,和,_,两部分组成。,2.,架名可以是一个单词，也可以包含下划线，但是不允许有,_,等,A.,连字符,B.,句号,C.,空格,D.,小数点,二、上机操作题,1.,在文档窗口中创建一个上下划分的框架，然后在上面的框架中创建一个左右划分的子框架，并分别以“我的主页”、“个人资料”、“我的爱好”、“我的作品”命名整个框架集和各个子框架并保存所有的框架。,2.,为,10.2,创建的框架文档编辑一个,NoFrames,文档，当不支持框架的浏览器载入“我的主页”时，浏览器显示,NoFrames,内容。,