《框架网页制作》PPT课件.ppt

1,第8章 框 架,8.1 框架的基本概念 8.2 创建框架集 8.3 保存框架和框架集 8.4 设置框架和框架集的属性 8.5 框架实例 8.6 模板 思考与练习,2,图8.1,3,8.1 框架的基本概念,框架（Frame）就是浏览器窗口的一个区域，在这个区域中可以显示一个单独的文档（页面）而不影响另一个区域中的显示内容。框架又理解为一个能独立显示的文档。 在一个页面上可以分出多个区域，设置多个框架。把这些框架看成一个整体，就称为框架集（ Frameset）。框架集定义了窗口的一种布局结构。 使用框架技术不仅可以布局版面，更多的是用于需要通过目录、索引来阅读内容的导航，也用于网页的导航条，因为用它阅读链接内容时，可以不破坏版面的结构，不破坏目录或导航条的导航作用，处在什么位置，一目了然。,4,在HTML中，框架集用来标记，框架用标记。图8.1所示页面框架的HTML标记为： ,5, 该例说明，框架集可以嵌套，可以查看文件Program Files|Macromedia|Dreamweaver 4|Help|UsingDreamweaver|ContextHelp.htm。,6,8.2 创建框架集,8.2.1 创建框架集 为叙述方便，从一个空文档开始创建框架集，其他两种情况的创建方法完全相同。假设已创建了一个新的空白文档。 【例8.1】创建框架集 单击要分割框架的窗口，将插入点放置入窗口中。如果已经存在框架，则需要单击某个框架窗格，将插入点放入该窗格内。 打开Frame（框架）对象面板（见图8.2）。 在框架对象面板上单击相应的按钮，或直接将按钮拖动到文档窗口中，即可在当前文档窗口中构建出相应格式的框架，框架以灰色线条分割（见图8.3）。,7,图8.2,8,图8.3,9,注意： 在框架对象面板中，命名Insert Left Frame(插入左框架)的按钮，实际上建立有两个框架的框架集，一个叫左（Left）框架，一个叫主框架（MainFrame）。在按钮图标中，白色部分（左边）表示左框架，蓝色部分（右边）表示主框架，而不是一个框架。其他框架对象类似。 如图8.3，单击“上、左嵌套框架”按钮，建立了一个上、下左形式的框架集。 如果在图8.3所示的框架集中的某个框架中再次单击插入框架集按钮，则可以创建嵌套框架。如在图8.3 Main Frame框架中单击“创建下框架”按钮，建立的嵌套框架如图8.4。,10,图8.4,11,注意： 从图8.4看到，创建下框架时，原来框架中的内容被分割在了上边。实际上，如果要创建框架的页面或使框架中有内容，则需内容被分割在Main Frame(主框架)中，就是对象按钮图标中的蓝色区域。 创建框架集后，执行Window|Frames（框架集）命令，打开Frames可停靠浮动面板，可以清晰地看到框架的结构，单击其中的区域，可以选定框架（见图8.5）。 提示： 创建框架集还可以使用Insert|Frames(插入|框架集)命令。 技巧： 页面中的框架用灰线分割，用鼠标拖动分割线，可以调整框架区域的大小。,12,图8.5,13,在页面中建立框架后，文档页面四周显示框架边框，在边框上按下鼠标向窗口内拖动，可以继续分割框架(见图8.6)。 使用Modify|Frameset命令(见图8.7)，可以将一个框架左（left）右(right)或上（up）下(down)拆分为两个框架，多次使用，可以将一个框架拆分为多个框架。 8.2.2 在框架中添加内容 框架集定义了一种页面分割结构，每一个框架可以显示一个单独的网页，也即每个框架就是一个网页。将插入点定位在某框架中，就可以像编辑普通网页一样编辑框架网页，插入文本、表格、图像、格式化等（见图8.8）。如果框架中的内容超出框架范围，会自动显示滚动条，拖动滚动滑块，可以显示窗口外的内容。,14,图8.6,15,图8.7,16,图8.8,17,8.2.3 建立超链接 在图8.9所示的框架网页左下角的框架中有一个指向首页的链接，单击该链接，首页在该框架中显示（见图8.10），而首页中的“红楼梦”是指向图8.9的链接，如果多次单击首页中的“红楼梦”和“红楼梦人物”中的“首页”，在浏览器中就会形成网页显示上的嵌套（见图8.11），此非人们所愿。 不过，这种情况可以通过超链接的Target属性来解决。所以在设置框架中的超链接时，一定要特别注意Target属性的设置。,18,图8.9,19,图8.10,20,图8.11,21,【例8.3】在框架中建立超链接 选中要建立超链接的对象，文字、图像等。 在属性面板中的Link（链接）对话框中输入目标端点的URL地址，或单击后面的文件夹按钮从磁盘选择文件。 在Link右边的Target（目标）文本框中输入打开目标网页的位置，或从后面的下拉列表中选择（见图8.12）。 _blank： 表示将开启一个新的浏览器窗口，并载入链接目标锚端的文档。 _parent： 在当前的浏览器的整个窗口中显示链接目标锚端的文档。 _self： 在链接所在的框架中显示链接目标锚端的文档。,22,图8.12,23,_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.13,25,图8.14,26,8.2.4 浏览器不支持框架时的处理 在Internet上存在着各种各样的浏览器，有些浏览器甚至是基于字符模式的，所以不是所有的浏览器都一定支持框架技术。如果主页使用了框架技术，则不支持框架技术的浏览器就不能正常显示。在遇到这种情况时，一般应该在框架集文档中显示一些提示信息，告诉用户当前网页使用了框架技术，需要使用支持框架的浏览器观看，也可以制作没有使用框架技术的网页，在浏览器不支持框架时显示该页。 在HTML中，当浏览器不支持框架时，会显示标记和之间的内容。如果浏览器支持框架，则会完全忽略和标记间的内容。,27,在Dreamweaver中，创建框架时已经在HTML中加入了下列语句： 需要做的就是在和之间要显示的主体内容。可以是一句提示信息，如：“本网页需要使用支持框架技术的浏览器浏览”，或是一个不使用框架的完整网页。要编辑该页，可以使用以下方法： 执行Modify|Frameset|Edit Noframes Content（编辑非框架内容）命令；,28, 这时文档窗口变为一个普通的文档窗口，可以在其中编辑非框架信息，这实际上也是一个网页，只是其中不应再使用框架； 编辑完毕，再次执行Modify|Frameset|Edit Noframes Content命令，可以返回到原先的框架集文档窗口中。,29,8.3 保存框架和框架集,在含有框架的文档中，一个框架就是一个网页，对应一个HTML文件，称为框架文件。保存含有框架的网页时，除需要保存各个框架文件外，还需要保存一个记录框架结构的文件，可称这个文件为框架集文件。它也是一个HTML文件，但不包括任何网页中的具体内容，只是定义了框架结构和每个框架对应的网页文件名。浏览时通过该文件将各个框架文件显示在相应的框架中。所以，如果一个框架集中包含左右两个框架，则实际上应该保存3个文件，一个是框架集文件，一个是左方框架对应的文件，另一个是右方框架对应的文件。,30,在Dreamweaver中，可以单独保存某个框架文件，或保存框架集文件本身，也可以将整个框架集（包括框架集文件和其中的各个框架文件）保存。 注意： 预览含有框架的网页效果，必须将各个框架文档以及框架集文档存储到磁盘上。 8.3.1 存储框架集文档 保存框架集结构的操作如下： 在Frames(框架)浮动面板中单击任何一个框架； 执行File|Save Frameset（保存框架集）命令（见图8.15），即可保存框架集文档； 如果框架集文档尚未存储，则会打开文件存储对话框，允许选择存储路径并输入文件名称，单击Save（保存）按钮，即可保存框架集；,31,图8.15,32,如果框架集文件已经被存储过，则该操作将在原先的基础上再次保存文档内容，不会再出现文件存储对话框； 如果希望将框架集文档以另外的名称保存，执行File|Save Frameset As （框架集另存为）命令。 8.3.2 存储框架文档 在框架集文档窗口中，在要保存的框架文档中单击，将插入点放置到该框架中； 执行File|Save Frame（保存框架）命令（见图8.16），即可保存该框架文档； 如果框架文档尚未存储，则会打开文件存储对话框，允许选择存储路径并输入文件名，单击Save按钮，保存该框架文档。,33,图8.16,34,如果已经保存过该框架文档，则该操作只是再次在原先基础上保存框架文档，不会出现文件存储对话框。 8.3.3 存储框架集及所有的文档 【例8.4】保存框架集和框架文档 执行File|Save All Frames命令。 如果有文档（包括框架集文档或框架文档）尚未被保存，则会出现文件存储对话框，提示选择存储路径并输入文件名称。单击Save按钮，即可保存这些文档。如果有多个文档尚未保存，则会依次出现多个文件存储对话框。 如果所有的文档都已经被保存过，则直接保存文件，而不会出现文件存储对话框。,35,8.3.4 打开框架和框架集文档 框架文档就是一般的网页文件，可以单独像一般网页文件一样打开并编辑。单独打开框架文件，不显示框架。而框架集文档则记录框架结构及所链接的框架文档。打开框架集文档，显示框架结构，同时载入各个框架文档。,36,8.4 设置框架和框架集的属性,框架的属性包括框架的名称、源文件、空白边距、滚动特性、重设大小特性以及边框特性等。框架集的属性可以控制框架集的整体属性，例如框架的尺寸、颜色、框架之间边框的宽度等。在Dreamweaver中，通过属性面板和框架浮动面板，可以完成绝大多数的属性设置操作。 8.4.1 框架浮动面板 框架浮动面板即框架可停靠浮动面板，简称框架面板，它显示了页面的框架结构。执行Window|Frames命令，图8.17框架面板或按下Ctrl+F10键，可以打开或关闭框架面板（见图8.17）。,37,图8.17,38,在框架面板中，显示当前框架集文档窗口中已经出现的框架窗格结构，同时在不同的框架区域中，还显示该框架的名称。在框架集文档窗口中建立框架、删除框架、修改框架的尺寸或名称时，框架面板上的显示都会发生相应的变化。 8.4.2 选中框架和框架集 要设置框架和框架集的属性，首先必须确定设置哪个框架的属性。 1. 用框架面板选中框架或框架集 要选中某个框架，可以直接在框架面板上单击对应的区域中任意位置。被选中的框架区域四周会出现黑色边框，在文档窗口中相应框架周围显示虚线。 要选中框架集，可以单击框架面板四周的框架边框,这时整个框架面板区域四周显示粗黑边框，文档窗口中该框架集的所有框架周围都会显示虚线。,39,图8.18是用框架面板选中框架，而图8.19是用框架面板选中框架集。注意，这是一个嵌套框架，选中的是一个子框架集。 2. 在文档窗口中选中框架或框架集 在文档窗口中，按住Alt键，然后单击要选中的框架窗格中的任意位置，即可选中该框架。被选中的框架四周会出现虚线。 在文档窗口中直接单击框架边框，即可选中框架集。选中框架集时，所有的框架边框上都会显示虚线。 8.4.3 设置框架属性 要设置框架属性，首先要选中框架，然后在属性面板中设置相应属性。选中框架时的属性面板如图8.20所示。,40,图8.18,41,图8.19,42,图8.20,43,1. 框架名称 为每一个框架指定一个名称，以便在超链接的Target属性以及JavaScript等描述语言中引用框架。框架名称在Frame Name （框架名称）下面的文本框中设置。实际上在用对象按钮或命令建立框架时，Dreamweaver按位置为每一个框架设置了默认名称，如果需要修改，可以在该文本框中重新输入需要的名称。 框架的名称可以是字母和数字，其中可以出现短下划线符号（_），但是不能出现连字号（）、句点（.）以及空格。框架的名称可以以字母开头，不能用数字开头。并且需要注意，不要使用JavaScript的保留关键字，如top或navigator等。,44,2. 框架源 框架源即框架源文件，实际就是框架文件，事实上不必直接在框架中编辑框架网页，而可以指定任何一个网页文件为某个框架中的文件。 在Src（源）文本框中，可以设置该框架源文件的URL。也可以单击右方的文件夹按钮，从磁盘上选择框架文件。 另一种指定框架源的方法是首先在文档窗口中单击框架窗格，将插入点放入该窗格中，然后执行File|Open in Frame（在框架中打开）命令。 3. 滚动条 框架是一个有一定范围的区域，如果其中的网页较大，需用滚动框架才能看到区域外的内容。,45,Scroll（滚动条）: 下拉列表设置滚动属性。可以有四种选择。 Auto（自动）： 当框架文档内容超出了框架的大小时，会出现框架滚动条，允许通过拖动滚动条显示框架内容，内容不超范围则不显示滚动条。 Yes（是）： 无论框架文档中的内容是否超出框架的大小都会显示框架滚动条。 No （不）： 即使框架文档中的内容超出了框架的大小，也不会出现框架滚动条。 Default（默认）： 删除scrolling（滚动）属性设置，大多数浏览器将之当作Auto方式。 4. 框架大小 简单调整框架大小的方法是拖动文档窗口框架的分隔条，另外可以在框架集属性面板中调整整行框架的高度或整列框架的宽度。,46,4. 框架大小 简单调整框架大小的方法是拖动文档窗口框架的分隔条，另外可以在框架集属性面板中调整整行框架的高度或整列框架的宽度。 5. 重设大小 框架在设计阶段可以通过拖动边框改变大小。在浏览器中，是否可以根据其中的显示内容改变大小呢？No Resize（不可重设大小）复选框用来设置这一性质。选中则在浏览器中不能通过拖动框架的边框来改变框架大小。而清除该复选框，则可以通过拖动边框来改变其大小。 注意： 这里设置的不可重设大小属性指在浏览器中浏览网页时的特性。在Dreamweaver的文档窗口中，始终可以通过拖动框架边框来改变框架大小；,47,如在浏览器中改变大小，除不设NoResize项外，还必须设置框架集的边框宽度大于0； 框架是否可改变大小还与相邻框架的设置有关，因为一个框架如扩大区域，相邻框架就要缩小区域，所以，如果相邻区域有一个设置为不能改变大小，则这个框架即使设置了可以改变大小不等，实际上也是改变不了的。 6. 边框 框架只是确定了窗口的分割结构，但并不一定要在窗口中画上分隔线。Borders（边框）下拉列表设置是否显示边框。 Yes： 框架与其四周的框架相邻处显示分隔条。 No： 框架与其四周的框架相邻处不显示分隔条。 Default： 删除Frameborder（框架边框）属性，大多数浏览器将之当作Yes。,48,注意： 该选项会覆盖为框架集定义的边框设置； 只有在同当前框架相邻的所有框架的边框都设置为不显示时，框架间的边框才会真正不显示。 Border Color（边框颜色）: 颜色框设置框架边框的颜色。可以选择颜色，也可以在文本框中输入十六进制颜色数值。该操作覆盖对框架集中边框颜色属性的设置。 Margin Width（边距宽度）: 文本框设置当前框架左右方的空白边距，也即框架左右边框同框架内容之间的距离，单位是像素。 Margin Height（边距高度）: 文本框设置当前框架上下方的空白边距，也即框架上下边框同框架内容之间的距离，其单位是像素。,49,8.4.4 设置框架集边框 框架集属性包括框架的尺寸、颜色、框架之间边框的宽度等。框架集属性可以由“框架集”属性面板设置。选中框架集，“框架集”属性面板如图8.21所示。 1. 边框 在Borders（边界）下拉列表中可设置框架集中所有框架的边框是否被显示。Yes，显示该框架集中所有框架之间的分隔条；No，不显示框架集中框架之间的分隔条；Default，删除Frameborder（框架边框）属性。大多数浏览器将其当作Yes。 注意： 对框架的属性设置会覆盖对框架集的属性设置。,50,图8.21,51,例如，如果将某个框架集设置为无边框，但是又将其中的某个框架属性设置为有边框，则在实际显示中该框架将显示边框。 Border Color（边框颜色）: 颜色框设置框架集中所有框架边框的颜色。 Border Width（边框宽度）: 文本框设置框架集中所有框架的边框宽度，单位是像素。 注意： 利用框架对象按钮创建框架集，所有的预定义框架集都带有如下属性，即没有边框、没有滚动条以及框架大小不可调节。 2. 框架大小 除在文档窗口中用鼠标拖动框架边框外，还可以在框架集面板中改变框架大小。,52, 选中框架集。 单击属性面板右端“行/列选择”中的相应区域，选中要设置大小框架的行或列。单击行头或列头可以选中相应的框架行或框架列，单击框架区域中任意位置，可以在选中该框架所在行或所在列两种状态之间切换。 在Value文本框中输入框架的大小数值，在右方Unit（单位）下拉列表框中，可以选择数值的单位。 Pixels： 表示在Value文本框中输入的数值以像素作为单位。这种方式设置的框架大小是固定的，无论如何改变浏览器窗口，框架的大小都保持不变。它经常被应用于一些永远不希望改变框架大小的场合中，如导航条所在的框架文档。 Percent： 表示在Value文本框中输入的数值是当前框架同当前框架集大小的百分比数值。这种方式设置的框架大小是不固定的，随着浏览器窗口大小的变化，框架的大小也会发生变化。,53,Relative（相对）： 表示在Value文本框中输入的数值是当前框架同其他框架之间的大小比例。 注意： 用Relative作度量单位，在框架集中应有两个以上框架使用该单位，才可以比较。如一个框架设置为3，一个框架设置值为9，则表示这两个框架的大小比例为13。 8.4.5 设置框架和框架集的标题 文档的标题指的是在文档头部位于和标记之间的文字，它显示在浏览器的标题栏中。在插入了框架集文档的窗口中，可以分别为每个框架文档设置标题，也可以为框架集文档本身设置标题。 如要设置框架文档的标题，可以将插入点放置到要设置标题的框架窗格中；而要设置框架集标题，则需要选中整个框架集。,54, 在工具栏Title（标题）文本框中输入或修改标题。或执行Modify|Page Properties（页面属性）命令，打开页面设置对话框，设置标题。 注意： 在浏览框架集文档时，浏览器标题栏上显示的是框架集文档的页面标题，尽管每个框架文档都有其自己的标题，但它们并不显示在浏览器的标题栏上，设置框架文档的标题主要是为了便于管理。当然如果单独浏览框架文档，则浏览器标题栏上仍会显示框架文档标题； 框架的标题同框架的名称不同。框架标题是说明框架文档内容的主题的，而框架名称仅仅是一个便于区别不同框架的符号。,55,8.5 框架实例,本节以一个实例介绍一下框架的综合应用。 【例8.5】框架的应用实例 设要建立一个“古典名著阅读网”，如图8.22所示，这是首页。单击某部书名，上部页头和底部的版权信息不动，中间显示该书主页面，如单击“红楼梦”，如图8.23所示。页面中部左边显示目录，可以有滚动条；右边是一个象征性图案。单击目录，在右边显示该回的内容（见图8.24）。其他书目相同，单击首页回到图8.22所示的页面。,56,图8.22,57,图8.23,58,图8.24,59,下面仅以红楼梦为例介绍制作方法。 （1） 制作内容页面 内容页面是普通页面，每个章回做成一页，不需做过多修饰，只要段落清楚即可，文件按章回编号，如hong001、hong002、hong003，参见图8.25。 （2） 制作图书主页，建立阅读链接（见图8.26） 在页面中建左框架，设置框架属性：显示边框、可重调大小、自动加滚动条、框架名称。框架命名时注意，有相互链接的所有页面的框架最好不要重名，否则容易混乱，如可以设左右框架的名称分别为：bookml、bookmain。 在左边输入图书目录，右边可以是象征性图案和书名。 建立目录与内容的链接，特别注意链接的Target属性设为bookmain。,60,图8.25,61,图8.26,62, 保存框架集文件为hong.htm，左框架文件为hongleft.htm，右框架文件为hongright .htm。 （3） 制作主页，建立图书链接 在页面上先建立一个上框架，再在下面的框架中建立一个下框架，形成一个上、中、下结构的框架集，分别命名topframe、mainframe、bottomframe。以像素点为单位设置上、下框架的大小，设置不可重调大小，无滚动条，中间框架自动添加滚动条。 在上面框架中插入一个两行一列的表格。第一行输入“古典名著阅读网”并设置相应的文字格式。第二行输入“首页 三国演义 红楼梦 西游记 水浒传”，设置单元格背景为淡蓝色。 在中间框架中插入一幅图像，调整大小，不需特别设置。,63, 在下面的框架中输入版权信息，不需特别格式化。 保存文件：框架集为gudian.htm，上框架为gudiana.htm， 中框架为gudianb.htm，下框架为gudianc.htm。 建立链接。“首页”链接gudianb.htm，target=mainframe；“红楼梦”链接hong.htm，target=mainframe。 重新保存文件（Save All Frames）。 在Dreamweaver文档窗口中按F12键，就可以欣赏作品了（见图8.27）。 注意： 主页文件名为gudian.htm。,64,图8.27,65,8.6 模板,模板是网页的样板。利用模板可以制作格式相似的网页。 【例8.6】创建模板 新建或打开一个文档，在其中编辑多个网页中都需要的内容。可以是图像、表格、超链接、框架等任何网页元素，编辑方法与一般网页没有任何不同。 执行File|Save as Template（另存为模板）命令，将网页保存为模板,这时会出现输入模板名称的Save As Template对话框。 注意： 默认状态下，系统将默认板文件保存在C:Program FilesMacromediaDreamweaver 4LessonsLesson FilesTemplates目录下，可以在Save As Template对话框中选择站点名称，则系统会将默认板保存在站点目录的Template子目录中。,66, 设置完毕，按Save按钮