用DreamWeaver快速搭建框架页面
?牐牽蚣芤趁媸怯梢蛔槠胀ǖ腤eb页面组成的页面集合,通常在一个框架页面集中,将一些导航性的内容放在一个页面中,而将另一些需要变化的内容放在另一个页面中。使用框架页面的主要原因我想大概是为了使导航更加清晰,使网站的结构更加简单明了。让我们看一下下面的这个网站例子吧(图1)。(^30040704a^)
?牐犝飧鲆趁媸怯缮现邢氯糠肿槌傻囊桓隹蚣芤趁婕钌厦娴氖谴苏镜愕睦改康己剑慊鞑煌睦改浚嘤Φ睦改磕谌莼岢鱿衷谥屑涞目蚣茏右趁嬷小W钕旅媸谴苏镜愕囊恍┫喙匦畔⒁趁娴己剑慊髅扛隼改亢螅畔⒁不岢鱿衷谥屑涞闹骺蚣芤趁嬷小U庋目蚣芤趁孀楹峡梢员Vふ稣镜愕睦改渴贾斩汲鱿衷阡勒叩氖酉咧校逛勒叩淖⒁饬Ω嗉性诳蚣芤趁婕闹屑洳糠郑蠢改磕谌萆稀?
#1 如何创建框架页面
?牐犗旅嫖铱冀樯芸焖俅罱?框架结构页面的主要步骤,需要指出的是通往目的地的路千条万条,我只介绍我最常走的路:)在Dreamweaver4中的Object面版中新增了Frames面板,我们可以利用此工具方便快捷地创造我们的框架页面。
?牐犖颐侵揽蚣芙峁沟囊趁娑际怯啥喔龅ザ赖靡趁孀槌桑虼嗽谥谱骺蚣芤趁嬷白詈孟冉槌煽蚣艿母鞲龅ザ赖囊趁娼ê谩J紫瓤匆幌挛颐亲钪盏囊趁妫ㄍ?2):(^30040704b^)
?牐犜谖颐钦飧鍪道薪枰龅ザ赖囊趁妫疃ザ说氖莟op.htm页面,下方左边的是导航页面Left.htm,下方右边的是内容页面Main.htm。下面分别介绍创建的具体步骤:
?牐?1.在Dreamweaver的站点窗口分别创建三个空的页面,分别命名为:Top.htm、Left.htm、Main.htm。
?牐?2.打开Main.htm页面。将Object面板切换到Frames面板(图3);(^30040704c^)
?牐犞葱胁说?Window—Frames打开框架结构面板(图4);(^30040704d^)
?牐犞葱胁说?View—Visual Aids—Frame Borders使得框架结构的边框可见(图5)。(^30040704e^)
?牐?3.在Frames工具面板中选择图6所示框架集。(^30040704f^)
?牐犜诘鼻暗腗ain页面的顶端合作边分别插入一个相邻的页面,组成我们需要的框架集(图7)。(^30040704g^)
?牐?4.指定组成框架集得页面,打开属性面板,分别设定顶端和左边框架页面的实际文件链接地址,其他参数如图8所示;(^30040704h^)
?牐?1)Src:设置框架文件的链接地址。
?牐?2)FrameName:设置框架文件的名称,此设置非常重要在后面的连接中将用到。
?牐?3)Scroll:设定是否允许滚动条出现,顶端最好设定为No,左端最好设定为Auto。
?牐?4)No Resize:可以指定是否允许改变框架集各页面的窗口大小。
?牐牱直鹬付ǘザ艘趁媪唇游募牡刂肺猅op.htm,左端页面链接文件的地址为Left.htm。
?牐?5.改变框架集页面大小。在框架面板中选定上下框架集边框,设定顶端框架页面的高度(图9);(^30040704i^)
?牐牻酉吕从檬蟊暄《ㄏ路降目蚣芗僭谑粜悦姘逯猩瓒ㄗ蟊呖蚣艿目矶龋ㄍ?10);(^30040704j^)
?牐?6.基本的框架页面组成就设定完了,执行菜单命令File—Save Frameset As保存框架集页面为Frames.htm。下面我们需要在各个页面之间搭起沟通的桥梁—加入链接。
#1 框架页面应用之不同页面实现互相链接
?牐犖颐侵揽蚣芤趁娴闹饕猛揪褪怯糜诘己剑勒叩慊饕桓隽唇邮保喙氐哪谌菀郴嵩诹硪桓隹蚣苤邢允境隼矗馄涫稻褪俏唇又付?了一个目标框架窗口。用前面我们定义的框架的名称属性,我们可以将组成框架的任意一个部分甚至整个框架作为目标窗口。要指定一个到指定框架的链接,可以按照如下步骤进行:
?牐?1.选择链接文字或图片,这里我们选择最顶端的“About Me”文字。
?牐?2.在链接地址中(Link),输入相应的地址About.htm。在Target下拉框选择需要的窗口名称(图11);(^30040704k^)
?牐犝饫锵允镜氖堑鼻耙趁嫠拇翱谝约癉reamweaver预设的四个窗口名称,
?牐牐遙lank:此选项为点击链接,打开一下新窗口。
?牐牐遬arent:此选项为点击窗口链接在当前窗口的上一级窗口打开。
?牐牐遱elf:此选项将使链接在本身所在的窗口打开。
?牐牐遲op:此选项为点击链接窗口在整个框架集的最外端窗口打开。
?牐爉ainFrame:我们前面为右边窗口设定的名称,选择此项文档将在此窗口中打开。
?牐爈eftFrame:我们前面为左边窗口设定的名称。
?牐爐opFrame:我们前面为顶端窗口设定的名称。
?牐?3.本例中我们为上面的导航栏目设定的目标框架窗口都为mainFrame,点击About栏目时,相应的栏目内容将在右下方的mainFrame窗口打开。
#1 框架页面应用之同时更新多个页面
有时我们需要在点击一个栏目时同时更新另外的两个或多个框架页面内容,这可以通过以下步骤使用Dreamweaver的行为来实现。
?牐?1.选择链接的文字或图片。
?牐?2.打开行为面板(Behaviors),点击加号添加Go to URL行为(图12)。(^30040704l^)
?牐?3.在Go to URL对话框中显示了当前已有的所有框架窗口,分别选定一个窗口名称,可以分别单独设定每个窗口将要更新的文件内容。Dreamweaver会在设定了目标文件的窗口后面加一个“*”号,表示此框架窗口已设定了URL(图13)。(^30040704m^)
?牐?4.完成后,点击确定即可,我们点击此链接,会同时更新多个窗口的内容。
?牐犛捎谀壳翱蚣芙峁挂训玫搅舜蠖嗍榔鞯闹С郑虼怂涞迷嚼丛狡毡椤5喽岳此担蚣芙峁挂绕胀ㄒ趁婺延诳刂坪椭谱鳎芏嘞附谖侍庑枰惴锤吹牡髡褪导饫镂薹ㄒ灰幌晗附樯埽M业慕樯苣馨镏憧际导蚣芙峁沟囊趁妗<亲。魏蔚母冻龆蓟嵊兴栈竦摹?