框架网页制作.ppt
《框架网页制作.ppt》由会员分享,可在线阅读,更多相关《框架网页制作.ppt(74页珍藏版)》请在三一办公上搜索。
1、第8章 框 架,8.1 框架的基本概念8.2 创建框架集8.3 保存框架和框架集8.4 设置框架和框架集的属性8.5 框架实例8.6 模板思考与练习,图8.1,8.1 框架的基本概念,框架(Frame)就是浏览器窗口的一个区域,在这个区域中可以显示一个单独的文档(页面)而不影响另一个区域中的显示内容。框架又理解为一个能独立显示的文档。在一个页面上可以分出多个区域,设置多个框架。把这些框架看成一个整体,就称为框架集(Frameset)。框架集定义了窗口的一种布局结构。使用框架技术不仅可以布局版面,更多的是用于需要通过目录、索引来阅读内容的导航,也用于网页的导航条,因为用它阅读链接内容时,可以不破
2、坏版面的结构,不破坏目录或导航条的导航作用,处在什么位置,一目了然。,在HTML中,框架集用来标记,框架用标记。图8.1所示页面框架的HTML标记为:,该例说明,框架集可以嵌套,可以查看文件Program Files|Macromedia|Dreamweaver 4|Help|UsingDreamweaver|ContextHelp.htm。,8.2 创建框架集,8.2.1 创建框架集为叙述方便,从一个空文档开始创建框架集,其他两种情况的创建方法完全相同。假设已创建了一个新的空白文档。【例8.1】创建框架集 单击要分割框架的窗口,将插入点放置入窗口中。如果已经存在框架,则需要单击某个框架窗格,
3、将插入点放入该窗格内。打开Frame(框架)对象面板(见图8.2)。在框架对象面板上单击相应的按钮,或直接将按钮拖动到文档窗口中,即可在当前文档窗口中构建出相应格式的框架,框架以灰色线条分割(见图8.3)。,图8.2,图8.3,注意:在框架对象面板中,命名Insert Left Frame(插入左框架)的按钮,实际上建立有两个框架的框架集,一个叫左(Left)框架,一个叫主框架(MainFrame)。在按钮图标中,白色部分(左边)表示左框架,蓝色部分(右边)表示主框架,而不是一个框架。其他框架对象类似。如图8.3,单击“上、左嵌套框架”按钮,建立了一个上、下左形式的框架集。如果在图8.3所示的
4、框架集中的某个框架中再次单击插入框架集按钮,则可以创建嵌套框架。如在图8.3 Main Frame框架中单击“创建下框架”按钮,建立的嵌套框架如图8.4。,图8.4,注意:从图8.4看到,创建下框架时,原来框架中的内容被分割在了上边。实际上,如果要创建框架的页面或使框架中有内容,则需内容被分割在Main Frame(主框架)中,就是对象按钮图标中的蓝色区域。创建框架集后,执行Window|Frames(框架集)命令,打开Frames可停靠浮动面板,可以清晰地看到框架的结构,单击其中的区域,可以选定框架(见图8.5)。提示:创建框架集还可以使用Insert|Frames(插入|框架集)命令。技巧
5、:页面中的框架用灰线分割,用鼠标拖动分割线,可以调整框架区域的大小。,图8.5,在页面中建立框架后,文档页面四周显示框架边框,在边框上按下鼠标向窗口内拖动,可以继续分割框架(见图8.6)。使用Modify|Frameset命令(见图8.7),可以将一个框架左(left)右(right)或上(up)下(down)拆分为两个框架,多次使用,可以将一个框架拆分为多个框架。8.2.2 在框架中添加内容框架集定义了一种页面分割结构,每一个框架可以显示一个单独的网页,也即每个框架就是一个网页。将插入点定位在某框架中,就可以像编辑普通网页一样编辑框架网页,插入文本、表格、图像、格式化等(见图8.8)。如果框
6、架中的内容超出框架范围,会自动显示滚动条,拖动滚动滑块,可以显示窗口外的内容。,图8.6,图8.7,图8.8,8.2.3 建立超链接在图8.9所示的框架网页左下角的框架中有一个指向首页的链接,单击该链接,首页在该框架中显示(见图8.10),而首页中的“红楼梦”是指向图8.9的链接,如果多次单击首页中的“红楼梦”和“红楼梦人物”中的“首页”,在浏览器中就会形成网页显示上的嵌套(见图8.11),此非人们所愿。不过,这种情况可以通过超链接的Target属性来解决。所以在设置框架中的超链接时,一定要特别注意Target属性的设置。,图8.9,图8.10,图8.11,【例8.3】在框架中建立超链接 选中
7、要建立超链接的对象,文字、图像等。在属性面板中的Link(链接)对话框中输入目标端点的URL地址,或单击后面的文件夹按钮从磁盘选择文件。在Link右边的Target(目标)文本框中输入打开目标网页的位置,或从后面的下拉列表中选择(见图8.12)。_blank:表示将开启一个新的浏览器窗口,并载入链接目标锚端的文档。_parent:在当前的浏览器的整个窗口中显示链接目标锚端的文档。_self:在链接所在的框架中显示链接目标锚端的文档。,图8.12,_top:在当前整个浏览器窗口显示链接目标锚端的文档内容,效果同_parent。以上四项即使不是在框架中建立链接,也是可以选择的。只是_blank较常
8、用,默认是_parent。在有框架的文档中建立超链接,下拉列表中还会列出当前各个框架的名字,可以选择在哪个框架中显示目标。在图8.12中:mainFrame表示在名为mainFrame框架中显示目标;leftFrame表示在名为leftFrame框架中显示目标;topFrame表示在名为topFrame框架中显示目标。在图8.9中,右下部的框架,即“主页”链接所在框架是mainFrame,图8.10显示的Target属性取值是mainFrame或_self时的情形,取值为leftFrame和topFrame的情形见图8.13和图8.14。如果选择_top,则返回首页时,会以整个浏览器窗口显示。
9、,图8.13,图8.14,8.2.4 浏览器不支持框架时的处理在Internet上存在着各种各样的浏览器,有些浏览器甚至是基于字符模式的,所以不是所有的浏览器都一定支持框架技术。如果主页使用了框架技术,则不支持框架技术的浏览器就不能正常显示。在遇到这种情况时,一般应该在框架集文档中显示一些提示信息,告诉用户当前网页使用了框架技术,需要使用支持框架的浏览器观看,也可以制作没有使用框架技术的网页,在浏览器不支持框架时显示该页。在HTML中,当浏览器不支持框架时,会显示标记和之间的内容。如果浏览器支持框架,则会完全忽略和标记间的内容。,在Dreamweaver中,创建框架时已经在HTML中加入了下列
10、语句:需要做的就是在和之间要显示的主体内容。可以是一句提示信息,如:“本网页需要使用支持框架技术的浏览器浏览”,或是一个不使用框架的完整网页。要编辑该页,可以使用以下方法:执行Modify|Frameset|Edit Noframes Content(编辑非框架内容)命令;,这时文档窗口变为一个普通的文档窗口,可以在其中编辑非框架信息,这实际上也是一个网页,只是其中不应再使用框架;编辑完毕,再次执行Modify|Frameset|Edit Noframes Content命令,可以返回到原先的框架集文档窗口中。,8.3 保存框架和框架集,在含有框架的文档中,一个框架就是一个网页,对应一个HTM
11、L文件,称为框架文件。保存含有框架的网页时,除需要保存各个框架文件外,还需要保存一个记录框架结构的文件,可称这个文件为框架集文件。它也是一个HTML文件,但不包括任何网页中的具体内容,只是定义了框架结构和每个框架对应的网页文件名。浏览时通过该文件将各个框架文件显示在相应的框架中。所以,如果一个框架集中包含左右两个框架,则实际上应该保存3个文件,一个是框架集文件,一个是左方框架对应的文件,另一个是右方框架对应的文件。,在Dreamweaver中,可以单独保存某个框架文件,或保存框架集文件本身,也可以将整个框架集(包括框架集文件和其中的各个框架文件)保存。注意:预览含有框架的网页效果,必须将各个框
12、架文档以及框架集文档存储到磁盘上。8.3.1 存储框架集文档保存框架集结构的操作如下:在Frames(框架)浮动面板中单击任何一个框架;执行File|Save Frameset(保存框架集)命令(见图8.15),即可保存框架集文档;如果框架集文档尚未存储,则会打开文件存储对话框,允许选择存储路径并输入文件名称,单击Save(保存)按钮,即可保存框架集;,图8.15,如果框架集文件已经被存储过,则该操作将在原先的基础上再次保存文档内容,不会再出现文件存储对话框;如果希望将框架集文档以另外的名称保存,执行File|Save Frameset As(框架集另存为)命令。8.3.2 存储框架文档 在框
13、架集文档窗口中,在要保存的框架文档中单击,将插入点放置到该框架中;执行File|Save Frame(保存框架)命令(见图8.16),即可保存该框架文档;如果框架文档尚未存储,则会打开文件存储对话框,允许选择存储路径并输入文件名,单击Save按钮,保存该框架文档。,图8.16,如果已经保存过该框架文档,则该操作只是再次在原先基础上保存框架文档,不会出现文件存储对话框。8.3.3 存储框架集及所有的文档【例8.4】保存框架集和框架文档 执行File|Save All Frames命令。如果有文档(包括框架集文档或框架文档)尚未被保存,则会出现文件存储对话框,提示选择存储路径并输入文件名称。单击S
14、ave按钮,即可保存这些文档。如果有多个文档尚未保存,则会依次出现多个文件存储对话框。如果所有的文档都已经被保存过,则直接保存文件,而不会出现文件存储对话框。,8.3.4 打开框架和框架集文档框架文档就是一般的网页文件,可以单独像一般网页文件一样打开并编辑。单独打开框架文件,不显示框架。而框架集文档则记录框架结构及所链接的框架文档。打开框架集文档,显示框架结构,同时载入各个框架文档。,8.4 设置框架和框架集的属性,框架的属性包括框架的名称、源文件、空白边距、滚动特性、重设大小特性以及边框特性等。框架集的属性可以控制框架集的整体属性,例如框架的尺寸、颜色、框架之间边框的宽度等。在Dreamwe
15、aver中,通过属性面板和框架浮动面板,可以完成绝大多数的属性设置操作。8.4.1 框架浮动面板框架浮动面板即框架可停靠浮动面板,简称框架面板,它显示了页面的框架结构。执行Window|Frames命令,图8.17框架面板或按下Ctrl+F10键,可以打开或关闭框架面板(见图8.17)。,图8.17,在框架面板中,显示当前框架集文档窗口中已经出现的框架窗格结构,同时在不同的框架区域中,还显示该框架的名称。在框架集文档窗口中建立框架、删除框架、修改框架的尺寸或名称时,框架面板上的显示都会发生相应的变化。8.4.2 选中框架和框架集要设置框架和框架集的属性,首先必须确定设置哪个框架的属性。1.用框
16、架面板选中框架或框架集要选中某个框架,可以直接在框架面板上单击对应的区域中任意位置。被选中的框架区域四周会出现黑色边框,在文档窗口中相应框架周围显示虚线。要选中框架集,可以单击框架面板四周的框架边框,这时整个框架面板区域四周显示粗黑边框,文档窗口中该框架集的所有框架周围都会显示虚线。,图8.18是用框架面板选中框架,而图8.19是用框架面板选中框架集。注意,这是一个嵌套框架,选中的是一个子框架集。2.在文档窗口中选中框架或框架集在文档窗口中,按住Alt键,然后单击要选中的框架窗格中的任意位置,即可选中该框架。被选中的框架四周会出现虚线。在文档窗口中直接单击框架边框,即可选中框架集。选中框架集时
17、,所有的框架边框上都会显示虚线。8.4.3 设置框架属性要设置框架属性,首先要选中框架,然后在属性面板中设置相应属性。选中框架时的属性面板如图8.20所示。,图8.18,图8.19,图8.20,1.框架名称为每一个框架指定一个名称,以便在超链接的Target属性以及JavaScript等描述语言中引用框架。框架名称在Frame Name(框架名称)下面的文本框中设置。实际上在用对象按钮或命令建立框架时,Dreamweaver按位置为每一个框架设置了默认名称,如果需要修改,可以在该文本框中重新输入需要的名称。框架的名称可以是字母和数字,其中可以出现短下划线符号(_),但是不能出现连字号()、句点
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- 框架 网页 制作
链接地址:https://www.31ppt.com/p-6301918.html