阿飙专线Dreamweaver直通车──网页布局

梦觉 
2001年 43期

编者按：本篇我们要介绍的是Dreamweaver中的布局部分，如果我们把网页制作看得简单些，它其实就是一些静态的和动态的页面元素的组合，如何合理地将它们组织得美观、有条理就需要我们头脑里有一个整体布局的概念。在Dreamweaver中，安排页面内容布局主要是依靠表格来完成的，通过表格的相互嵌套和合并、拆分，可以使你头脑里的设计构思变为现实。此外，框架结构也是实现布局的一种方式，它可以实现导航性非常好的页面结构。下面就分别介绍一下这两种布局方式的运用。
　　#1一、掌握表格
　　表格对每个人来说都是很容易理解的，但要运用恰当、合理、富于秩序性，却好像不是很简单，很多朋友抱怨Dreamweaver的表格不如Frontpage操作简单、易用。其实，这里面主要的一个原因是设计者缺乏整体的布局观，如果我们在刚开始就将要实现的布局在头脑里考虑一遍，下手的时候你会觉得非常容易的。就软件来说，每个软件都有各自的操作特点，一旦你理解了软件的工作方式，你自然会将它运用得得心应手些。我们以一个常见的网页结构为例介绍表格布局，此页面由顶部的Logo和Banner区，导航菜单区，页面内容区，底部版权区组成，如图1所示。
　　#21.布局方法
　　由于浏览器显示页面内容时是下载完一个完整的表格后才显示此表格中的所有内容，因此我们应尽可能将表格分为多个各自独立的表格，这样可以加快显示速度，而不应将所有的页面内容都放置在一个大表格中。根据^43040702a^1所示，我们将我们的页面从上向下分为四个表格。
　　#22.属性面板
　　打开Object面板，点击表格图标插入一个表格，根据需要我们插入一个单行双列的表格，宽度设为780。下面我们打开表格的属性面板，修改表格的各个参数如^43040702b^2所示：
　　属性面板的各项参数设置比较简单，关于清除单元格数值的用法我在后面会介绍。我只是提醒大家一定要重视CellPad和CellSpace的设置和作用，CellPad（单元格填充值），表示单元格的边框和它里面内容之间的空白；CellSpace（单元格间距值），表示单元格和单元格之间的距离。这两个值如果充分理解了，不仅可以实现单像素的边框，而且可以使你的页面内容布局更加丰富多彩，大家可以多试着练习一下这两个值的变化。如^43040702c^3，我们设定了顶部Logo和Banner所在表格的CellPad为10、CellSpace为0。
　　#23.修改表格
　　    （1）插入的默认表格我们还需要对它进行各种修改、合并、拆分，才能满足复杂页面的布局需要。如果你熟悉Word软件的用法，可以像操作Word表格一样进行表格的修改，在Dreamweaver中你可以对整个表格、单行、单列、多行、多列（相邻或相隔）、单个单元格、多个单元格（相邻或相隔）进行操作，例如设置多个选择范围的属性、复制多个单元格的内容、清除多个选择区的内容等等，你可以使用Ctrl、Shift键实现多个单元的选择，也可以用鼠标拖动选择多个单元格，如^43040702d^4所示。
　　    （2）单元格之间的内容可以互相复制和移动，选定一个单元格中的内容，按住Ctrl键的同时拖动到另一单元格，即可将其复制过去。也可以一次选定多个单元格通过复制粘贴将其复制到相同布局的一组单元格中，但必须是布局相同的，例如将一组2×2单元的内容复制到另一组2×2单元组中，如^43040702e^5所示。
　　#24.修改多个属性
　　当光标定位在单元格中时，我们看一下此时的属性面板。
　　这里面需要掌握的主要是拆分和对齐属性。我们可以将当前的单元格进行拆分，也可选择多个单元格进行合并，如^43040702f^6所示。还可以设定多个单元格内容的对齐方式，朋友们最好使用对齐选项中的Horz（水平）和Vert（垂直）下拉框设定对齐方式，而少用右上角的对齐方式，因为那将增加一个<div>标签，这样可以减少源代码的数量。还有一点要注意的是尽量事先计划好表格的结构，避免反复多次的拆分和合并表格，这样会将表格变得复杂，给以后的工作造成很多麻烦。
　　#25.嵌套表格
　　由于我们把表格主要当作一种布局工具，因此对一些常规的表格属性并未作详细介绍，如表格边框、表格色彩、表格背景等等，朋友可自己练习一下。为了满足我们页面的需要，我们常常需要进行表格嵌套，进行表格嵌套只需将光标定位在一格单元格中，然后插入一个新的表格即可。总的来说嵌套表格可以最大程度地满足页面布局的要求，如^43040702g^7所示：
　　但是表格的嵌套也有一些不利因素，例如过多的嵌套影响浏览器的解析，影响页面的显示速度，因此建议表格的嵌套不要超过3层。在开始嵌套表格前最好计划好，避免反复的合并拆分、嵌套、取消，尽量少拖动表格来确定表格的大小，多注意底部标示选择器的标签状态，这样可以准确选择需要的单元格。
　　#1二、善用框架
　　介绍完表格我们再来看看另一种主要的布局方式，这就是框架结构Frame。也许很多朋友已经注意到我们站点页面通常具有一个统一的外观，一些基本的导航菜单和网站Logo、Banner并不会在每个页面发生变动，页面中变化的只是一些具体的内容。针对这种情况，我们可以使用框架结构来将不变的导航放入一个页面，而将变化的内容放入各自的页面，再将这两部分组合起来即构成了框架结构外观。
　　#21.创建框架结构
　　既然我们已经知道框架结构是由一些单独的页面组成，在创建框架结构页面前，最好先将组成词框架结构的各个单独页面做好，你也可以在Site（站点管理器）窗口中先生成需要的各个空白页面，例如顶部的导航页面Top.html，下部左侧的Left.htm和下部右面的Main.htm，这在前面的站点部分我们已经介绍过。在Dreamweaver4的Object面板中新增了Frames面板，如^43040702h^8所示。我们可以利用此工具方便快捷地创造框架页面集。
　　打开Main.htm页面，点击框架面板的“插入框架”图标，可在当前页面的左边和上边增加相应的框架集页面。此时需要打开Windows—>Frames，在此框架窗口可以统览整个框架集的组成情况。首先我们需要制定框架集的各个组成页面，用鼠标点击其中的一个组成部分，例如MainFrame，如^43040702i^9所示。在属性面板中的Src部分指定此页面是调用的Main.htm页面，顶部的topFrame是调用的Top.htm页面，左侧的LeftFrame是调用的Left.htm页面。此时属性面板中显示的各个页面的路径是类似file:///F/ExampleSite/main.htm形式，这时需要用鼠标在Frame面板中选定最外端的边框，然后执行File→Save Frameset将此框架页面命名保存
　　#22.设定框架属性
　　保持框架面板的最外端边框被选定，打开框架属性面板，在这里设定框架的基本属性，如^43040702j^10所示。
　　用鼠标在右侧选定框架中的一个组成部分，然后在左侧设定此部分在整个框架集中所占的高度Row为80pix，此部分不使用边框Borders-No。接下来将其余两部分的框架参数设定完成，记住首先需要在框架面板中选定对应的框架边框才可以。设定完框架集的属性后，在Frames面板点击其中一个框架页面，再来看看属性面板，如^43040702k^11所示。
　　我们主要需要设定Scroll：滚动条是否出现；No Resize：框架尺寸是否可以在浏览时调整；Margin Width/Margin Height：框架边与内容之间所预留的间隔大小；FrameName：设定框架页的名称，这将在以后的文件之间互相链接时用到；Borders：设定当前框架是否出现边框。
　　#23.设定框架集页面之间的互链
　　框架页面的主要用途就是用于导航，浏览者点击一个链接时，相关的内容页会在另一个框架中显示出来，这其实就是为链接指定了一个目标框架窗口。通过前面我们定义的框架的名称属性，我们可以将组成框架的任意一个部分甚至整个框架作为目标窗口。要指定一个内容页到指定框架的链接，可以按照如下步骤：
　　（1）选择链接文字或图片，如我们在顶端框架页中输入About Me文字。
　　（2）选定这个文字内容，打开属性面板，在链接地址中（Link），输入相应的地址About.htm。在Target下拉框选择需要的窗口名称，如^43040702l^12所示。
　　这里显示的是当前页面所包含的窗口以及Dreamweaver预设的四个窗口名称，_blank：此选项将使链接在新窗口打开。_parent：此选项将使链接在当前窗口的上一级窗口打开。_self：此选项将使链接在本身所在的窗口打开。_top：此选项将使链接在整个框架集的最外端窗口打开。mainFrame：我们前面为右边窗口设定的名称，选择此项文档将在此窗口中打开。leftFrame：我们前面为左边窗口设定的名称。topFrame：我们前面为顶端窗口设定的名称。
　　（3）在浏览器中浏览时，当点击About栏目后，相应的栏目内容将在右下方的MainFrame窗口打开。
　　#1三、本期技巧提示
　　关于页面布局的主要内容就是这些，但是实际操作中肯定还会遇到很多问题，学习没有什么捷径，只有实践、实践再实践。朋友们有什么疑问可以到http://www.blueidea.com/bbs提出并讨论，下面我再总结几个页面布局阶段有用的技巧。
　　#21.精确定位页面元素
　　搞过设计的朋友都特别希望能精确定位网页元素，他们喜欢每个元素都能按自己的愿望精确定位。Dreamweaver自带的Grid功能可以有助于这种希望的实现。执行命令View—Edit Grid打开坐标辅助，可以选择网格状或者是点状显示，同时打开Snap to Grid，此后在插入或添加新的元素时，都会按你的设定精确定位。
　　#22.表格的技巧
　　（1）创建一个像素边框。有些朋友抱怨Dreamweaver无法做出单像素的表格边框，其实仔细利用表格的属性面板即可做出这种单像素表格。首先使用Object面板插入一个表格，定义表格宽、高及行数和列数。此时表格的默认CellPad和CellSpace、Border都为0。在属性面板中定义表格的Border为0，CellPad为5（这项可使单元格中的内容与单元格边缘之间保持5个像素）；CellSpace为1（此项使得单元格之间保持1个像素的间距）。设置表格的背景色为深色（如#999999），设置每一个单元格的背景色为浅色（如#FFFFFF）。在浏览器中观察效果即可。
　　（2）导入数据表格。有时我们需要将一些在Execel文件中创建的表格导入Dreamweaver中，可以先将原来的Execel文件另存为带制表符分隔的.txt文本文件。在Dreamweaver中执行Insert→Tabular Date（见^43040702m^13）。
　　参数后即可将其中的数据导入Dreamweaver的一个表格中。
　　（3）格式化表格
　　如果你对重复设定各个单元格的参数感到厌烦的话，使用Format Table命令可以帮你快速格式化表格，此命令在Command菜单下，此命令内带多种表格配色方案，你可以选择一种，Dreamweaver会自动将色彩方案应用到你选定的表格上。
　　#13.更新多个框架页面
　　有时我们需要在点击一个链接的同时更新另外两个或多个框架页面内容，这可以通过以下步骤来实现。
　　（1）选择链接的文字或图片。
　　（2）打开行为面板（Behaviors），点击加号添加Go to URL行为（见^43040702n^14）。
　　（3）在Go to URL对话框中显示了当前已有的所有框架窗口，我们分别选定一个窗口名称，可以分别单独设定每个窗口将要更新的文件内容。Dreamweaver会在设定了目标文件的窗口后面加一个“*” 号，表示此框架窗口已设定了URL。