第三级,单击此处编辑母版标题样式,第,10,章 网页框架,Frame,在网页中，一个网页可以包含多个页面，此时需要用到框架。使用框架可以进行页面布局，把网页化分为几个区域。例如，一个水平框架用于放置Banner（也就是标题）；左垂直框架用于放置导航；右垂直框架用于放置正文。每一个框架单独使用一个网页，从而使页面设计简单化。框架除了用于页面布局，还可用于制作目录。包含框架的网页称为框架集。框架集定义了各个框架的结构、数量、大小和目标等属性。本章将介绍框架的使用方法。,10.1,创建,框,框架,一个,完,完整,的,的框,架,架页,面,面应,该,该包,括,括两,个,个部,分,分：,框,框架,和,和框,架,架集,。,。前,面,面介,绍,绍了,框,框架,集,集的,作,作用,，,，它,用,用来,定,定义,框,框架,的,的各,种,种属,性,性。,在,在网,页,页中,框,框架,集,集是,不,不可,见,见的,，,，显,示,示出,来,来的,只,只是,各,各个,框,框架,。,。框,架,架集,本,本身,是,是一,个,个网,页,页再,加,加上,框,框架,的,的目,标,标页,面,面，,所,所以,一,一个,完,完整,的,的框,架,架集,包,包含,有,有多,个,个页,面,面。,10.1.1,自定,义,义框,架,架,在创,建,建自,定,定义,框,框架,之,之前,，,，首,先,先确,定,定是,否,否打,开,开框,架,架可,视,视元,素,素。,如,如果,没,没有,，,，需,要,要按,照,照以,下,下步,骤,骤进,行,行操,作,作：,单,单击,【,【查,看,看】|【,可,可视,化,化助,理,理】|【,框,框架,边,边框,】,】命,令,令，,使,使其,处,处于,选,选中,状,状态,。,。此,时,时，,页,页面,中,中可,以,以显,示,示框,架,架边,框,框。,创,创建,自,自定,义,义框,架,架的,具,具体,步,步骤,如,如下,：,：,自定,义,义左,右,右框,架,架效,果,果,自,自定,义,义上,下,下框,架,架效,果,果,10.1.2,预定,义,义框,架,架,在DreamweaverCS3,中,中，,系,系统,预,预定,义,义了13,种,种框,架,架类,型,型。,通,通过,插,插入,栏,栏中,【,【布,局,局】,标,标签,的,的框,架,架按,钮,钮，,可,可以,为,为页,面,面设,置,置框,架,架，,具,具体,步,步骤,如,如下,：,：,框架,子,子菜,单,单,【,【框,架,架标,签,签辅,助,助功,能,能属,性,性】,对,对话,框,框,10.1.2,预定,义,义框,架,架,单击,【,【确,定,定】,按,按钮,，,，完,成,成创,建,建预,定,定义,框,框架,，,，效,果,果如,图,图左,所,所示,。,。按,照,照以,上,上步,骤,骤，,可,可以,创,创建,其,其他,类,类型,框,框架,，,，如,左,左侧,和,和嵌,套,套的,顶,顶部,框,框架,，,，效,果,果如,图,图右,所,所示,。,。,顶部,和,和嵌,套,套的,左,左侧,框,框架,效,效果,左,左侧,和,和嵌,套,套的,顶,顶部,框,框架,效,效果,10.1.3,自定,义,义嵌,套,套框,架,架,前面,介,介绍,了,了框,架,架的,创,创建,方,方法,，,，使,用,用系,统,统预,定,定义,的,的方,法,法可,以,以快,速,速创,建,建出,复,复杂,的,的框,架,架。,但,但是,预,预定,义,义框,架,架有,时,时并,不,不能,完,完全,满,满足,需,需要,，,，此,时,时需,要,要创,建,建自,定,定义,框,框架,。,。框,架,架像,表,表格,一,一样,可,可以,多,多重,嵌,嵌套,，,，具,体,体步,骤,骤如,下,下：,下框,架,架嵌,套,套框,架,架效,果,果,多,多重,嵌,嵌套,框,框架,效,效果,10.2,框,架,架,源,源,码,码,前,一,一,小,小,节,节,介,介,绍,绍,如,如,何,何,创,创,建,建,框,框,架,架,集,集,和,和,框,框,架,架,，,，,接,接,下,下,来,来,查,查,看,看,构,构,成,成,框,框,架,架,的,的,源,源,码,码,会,会,有,有,怎,怎,样,样,的,的,变,变,化,化,。,。,本,本,小,小,节,节,将,将,介,介,绍,绍,框,框,架,架,源,源,码,码,，,，,以,以10.1.3,小,小,节,节,的,的,实,实,例,例,进,进,行,行,讲,讲,解,解,，,，,打,打,开,开,实,实,例,例,框,框,架,架,集,集.,从,源,源,码,码,中,中,可,可,以,以,看,看,出,出,，,，,网,网,页,页,中,中,有,有,两,两,个,个,陌,陌,生,生,的,的,标,标,签,签,和,和,。,。,其,其,中,中,标,标,签,签,用,用,于,于,设,设,置,置,框,框,架,架,集,集,，,，,标,标,签,签,用,用,于,于,设,设,置,置,框,框,架,架,。,。,这,这,些,些,标,标,签,签,都,都,是,是,成,成,对,对,出,出,现,现,，,，,如,如,果,果,不,不,结,结,束,束,标,标,签,签,可,可,能,能,会,会,造,造,成,成,页,页,面,面,混,混,乱,乱,。,。,标,标,签,签,包,包,含,含rows,和,和cols,两,两,个,个,属,属,性,性,，,，,这,这,两,两,个,个,属,属,性,性,分,分,别,别,用,用,于,于,设,设,置,置,水,水,平,平,拆,拆,分,分,和,和,垂,垂,直,直,拆,拆,分,分,框,框,架,架,，,，,还,还,用,用,于,于,设,设,置,置,框,框,架,架,的,的,尺,尺,寸,寸,。,。,10.2,框,架,架,源,源,码,码,标,标,签,签,有,有,多,多,个,个,属,属,性,性,，,，,其,其,使,使,用,用,语,语,法,法,如,如,表,表,。,。,（,（,续,续,表,表,）,）,10.3,调,整,整,框,框,架,架,前,面,面,了,了,解,解,了,了,如,如,何,何,创,创,建,建,框,框,架,架,。,。,新,新,创,创,建,建,的,的,框,框,架,架,需,需,要,要,进,进,行,行,一,一,些,些,调,调,整,整,才,才,能,能,符,符,合,合,设,设,计,计,的,的,要,要,求,求,，,，,如,如,框,框,架,架,结,结,构,构,、,、,尺,尺,寸,寸,大,大,小,小,和,和,数,数,量,量,等,等,。,。,在,在,实,实,际,际,应,应,用,用,中,中,，,，,还,还,需,需,要,要,对,对,框,框,架,架,集,集,及,及,其,其,属,属,性,性,进,进,行,行,修,修,改,改,。,。,本,本,节,节,将,将,介,介,绍,绍,如,如,何,何,调,调,整,整,框,框,架,架,以,以,适,适,合,合,需,需,要,要,。,。,10.3.1,选择框架,修改对象,属,属性时首,先,先选中对,象,象。对框,架,架集或框,架,架进行修,改,改时，首,先,先选中框,架,架对象。,选,选中框架,集,集时，其,所,所有框架,边,边框显示,出,出虚线，,表,表示该框,架,架处于选,中,中状态。,同,同样当框,架,架选中时,，,，也会显,示,示虚线，,表,表示选中,，,，效果如,图,图10.9所示。,【框架】,面,面板,嵌,嵌套框架,效,效果,10.3.1,选择框架,选中一个,框,框架后，,可,可以结合Alt键,和,和方向键,进,进行框架,选,选择的切,换,换。,选中第一,层,层框架集,效,效果,选,选,中,中最右下,方,方框架效,果,果,10.3.2,保存框架,设计好框,架,架页面后,，,，要保存,框,框架。因,为,为框架页,面,面包含了,多,多个网页,，,，所以保,存,存时与普,通,通页面不,一,一样。在DreamweaverCS3中,可,可以保存,一,一个框架,集,集，也可,以,以单独保,存,存一个框,架,架，还可,以,以保存所,有,有的框架,集,集及框架,。,。最快捷,的,的方式是,保,保存框架,集,集。保存,框,框架集的,具,具体步骤,如,如下：,单击框架,边,边框选中,框,框架集。,单击【文,件,件】|【,框,框架集另,存,存为】命,令,令，弹出,【,【另存为,】,】对话框,。,。输入路,径,径及名称,，,，单击【,确,确定】按,钮,钮。,如果框架,集,集已经保,存,存过，单,击,击【文件,】,】|【保,存,存框架集,】,】命令。,10.3.3,设置框架,集,集,插入框架,集,集后，需,要,要对框架,集,集进行一,些,些设置，,如,如边框架,有,有无、大,小,小和颜色,等,等。在Dreamweaver CS3中，,可,可通过框,架,架集的【,属,属性】面,板,板进行设,置,置。框架,集,集的【属,性,性】面板,如,如图所示,。,。,边框集属,性,性设置效,果,果,预,预,览,览效果,10.3.4,设置框架,设置框架,集,集后，同,样,样也需要,设,设置框架,的,的属性。,例,例如，设,置,置框架的,名,名称、尺,寸,寸大小、,边,边框和滚,动,动条等属,性,性。,接着上一,小,小节中的,实,实例设置,框,框架属性,，,，具体步,骤,骤如下：,框架滚动,条,条效果,框,框架,属,属性设置,效,效果,10.3.5,命名框架,集,集页面,在DreamweaverCS3,中,中，不能,通,通过【属,性,性】面板,进,进行命名,，,，而是通,过,过设计视,图,图工具栏,和,和页面属,性,性来进行,设,设置。设,计,计视图工,具,具栏设置,的,的具体步,骤,骤如下：,设计视图,工,工具栏,框架集标,题,题效果,10.3.6,修改框架,尺,尺寸,前面介绍,通,通过【属,性,性】面板,可,可以修改,框,框架的尺,寸,寸，还可,通,通过拖动,鼠,鼠标进行,框,框架的大,小,小修改，,具,具体步骤,如,如下：,调整框架,尺,尺寸,10.3.7,使用无框,架,架内容,当浏览器,不,不支持框,架,架元素时,，,，可以设,置,置提示信,息,息，告诉,浏,浏览者浏,览,览的页面,不,不能正常,显,显示。此,时,时通过编,辑,辑无框架,内,内容来提,示,示浏览者,，,，具体步,骤,骤如下：,编辑无框,架,架内容,10.4,设置框架,链,链接,在框架中,可,可以使用,链,链接来控,制,制框架内,容,容，把链,接,接的目标,定,定位在指,定,定的框架,。,。例如，,电,电子书类,网,网页的左,框,框架用于,放,放置目录,等,等导航信,息,息，右框,架,架用于放,置,置主体内,容,容。此时,需,需要把右,框,框架设置,为,为主框架,（,（main_frame）,，,，当单击,目,目录导航,时,时，链接,内,内容即可,显,显示在主,框,框架内，,具,具体步骤,如,如下：,10.4,设置框架,链,链接,按F12,键,键预览网,页,页，效果,如,如图左所,示,示。选择,【,【目录三,】,】选项，,右,右边出现,“,“目录三,的,的内容”,，,，如图右,所,所示。,框架链接,效,效果,改,改变框架,链,链接效果,10.5,使用浮动,框,框架,iframe,浮动框架,比,比普通框,架,架要灵活,，,，它可以,像,像层一样,在,在网页中,放,放置。浮,动,动框架结,合,合脚本程,序,序可制作,出,出页面的,局,局部更新,。,。在此将,介,介绍浮动,框,框架的基,本,本用法,10.5,使用浮动,框,框架,iframe,在DreamweaverCS3,中,中不能在,【,【属性】,面,面板中设,置,置iframe，,只,只能手动,进,进行修改,源,源码。将,前,前面的源,码,码复制到,网,网页的标签之,间,间，预览,效,效果如图,所,所示。,iframe,效,效果,10.6,专家总结,本章介绍了框,架,架的基本概念,。,。读者可以学,习,习如何创建框,架,架、设置框架,大,大小和框架命,名,名等基本操作,。,。在使用框架,的,的过程中，注,意,意要理解框架,的,的基本概念和,结,结构，以及框,架,架的嵌套关系,。,。通过框架可,以,以用来制作电,子