Dreamweaver3之一学就会(五)

Author: 5D精英网 机器猫 Date: 2000年 第27期

#1    分帧篇
  在浏览网页的时候,我们常常会看到这样的一种导航结构。就是超级连接做在左面,单击以后链接的部分出现在右面。或者在上边单击链接指向的页面出现在下面。要做出这样的效果,必须进行分帧。为了更好的理解什么是帧。我们画一张示意图来进行说明(如^27040201a^1)。
  这是一个左右结构的帧。事实上这样的一个结构是由三个网页文件组成的。首先外部的框架是一个文件,图中我们用index.html命名。框架左边命名为A,指向的是一个网页A.html。右面命名为B,指向的是一个网页B.html。
  清楚了帧的结构,下面我们就来从头开始制作一个框架。
  1.首先进入Dreamweaver。在一个空白页面中选择菜单Modify→Frameset→Spilit Left。页面中出现一个分隔条。用鼠标拖拽到合适的位置。一个帧结构就做好了,并生成了三个页面。
  2.选择菜单Window→Frames,出现帧面板(如^27040201b^2)。
  3.做好了帧以后很重要的一步是给帧命名。在帧面板中单击左边部分。在属性面板中将Framename域填写为Left,也就是将左边的帧命名为left。同样在帧面板中单击右边部分,在属性面板中将Framename域填写为right,也就是将右边的帧命名为right。
  4.保存网页。选择菜单File→Save All。系统弹出对话框。这时,保存的是一个帧结构文件。我们按照惯例都命名为index.htm。如何知道保存的文件是哪一部分呢。这里有一个诀窍。保存的时候如果虚线框笼罩的是周围一圈就是保存帧结构。否则笼罩在左边就是保存帧中左边网页。右边就是帧中右边网页。按照这个方法我们保存左边网页,名称为bar.htm,右边为main.htm。三个网页就保存完毕。
  5.下面我们要实现按左边的超级链接,对应的页面出现在右边。在左边的页面中做上超级链接,指向一个已经存在的页面(如^27040201c^3)。注意做好连结以后,要在Target域中设置为right。这样一个超级链接就做好了。
  6.按F12预览网页。链接指向的页面出现在右边帧中。
  7.重复制作新的页面。再将链接指向页面。注意Target设置为right就可以了。这样就制作了一个简单的网站导航结构(如^27040201d^4)。
  为了让大家更好的了解帧,下面我们就来解释几个为什么。
  1.为什么要给帧命名。
  现在看来这个问题就比较简单。因为要求超级链接指向的页面,在指定的帧中出现,必须命名,这样才可以加以控制。
  2.为什么要在超级链接属性面板中设Target域。
  Target域这里我们称它为目标区。也就是超级链接指向的页面出现在什么目标地区。默认的情况下Target域中总有四个目标。
 ?S_blank:单击链接以后,指向页面出现在新窗口中。
 ?S_parent:用指向页面替换它外面所在的帧结构。
 ?S_self:出现在同一帧结构里面。比如left还是left。
 ?S_top:跳出所有帧结构。指向的页面直接全屏出现在浏览器中。
  3.为什么帧结构页面起名字叫做index.html。
  其实,这是一个早就提及的问题。别人访问我们制作好的网站,总得有第一页给他看吧。一般我们把网站的第一页命名为index也就是索引的意思。因为我们可以通过这一页来访问站内的其他页面。更重要的原因是,我们做好了网页要上传到服务器上去。服务器上大多已经设定好了默认的页面名称为index。这就是为什么在浏览器中输入地址的时候,直接就可以看到网站页面而无须特别指定。
  分帧的方法,除了使用菜单Modify→Frameset→Split Left(right,up,down)以外,还有一种直观的分割方法。
  1.选择菜单View→Frame Border。网页四周出现一个灰色边框。
  2.按住Alt键光标移动到边框上会变成十字双箭头。拖拽到指定位置。帧就做好了。这种划分方法可以做出十字形的分帧。光标移到边框的角落处按住Alt+拖拽。就可以拉出十字形的帧。
  取消帧结构
  拖住帧当中的灰色分隔条,拖拽到边框上就可以取消一个帧了。取消帧以前会提示是否要将删去的网页存盘。根据需要选择存或者不存就可以了。
  帧的边框
  一旦使用了帧以后。帧的边框是一条灰色的分隔条。很多时候影响了整个页面的美观。解决的方法是单击帧边框,选中整个帧结构,打开属性面板(如^27040201e^5)。在属性面板中Borders设置为No。Border width设置为0就可以了。
  关于分帧的话题,我们就暂时讨论到这里。到本期为止,Dreamweaver3的基础讲解已经差不多了,大家学到这里已经有能力来制作一些基本的网页了。从下一期起,将开始讲解Dreamweaver3的进阶技术。