阿飙专线Dreamweaver直通车──页面设计

 梦觉 
2001年 45期

上一期为大家介绍了用表格实现排版布局的基本方法，但对于很多直接的页面设计人员来说，在表格中将他们的设计转化为实际页面是一件非常枯燥、充满制约的工作，因为他们需要重新面对空白页面将他们的设计稿转换为实际页面，一些设计师也抱怨表格禁锢了他们的想象力，也听到一些制作人员抱怨表格缺乏灵活性，缺乏准确性。其实Dreamweaver4中已经有了好几个专为设计师准备的工具，而这些工具也许并未被大多数人利用起来，利用好它们可以满足设计师的工作习惯，本篇就给大家介绍这几个专为设计师的习惯而准备的工具，希望不要浪费了这些虽然隐蔽但却非常有效的工具和工作方法。
　　#1一、设定精确的工作环境
　　对于设计师来说，精确的元素定位是首要的条件，在Dreamweaver中有多个有助于精确定位的功能，利用这些工具我们可以在灵活性与精确性之间运用自如。
　　1.网格（Grid）:网格对设计师来说不会陌生，各种图像处理和制作软件都有此项功能，这是页面元素精确定位的基础，通过设定一定数值的网格，可以使页面元素有规则的排列。选择“查看\网格\编辑网格”，可以设定自己需要的网格大小，也可以改变网格显示为点状显示，还可以设定将层吸附到网格（^45040701a^1）。
　　2.标尺（Rule）:标尺是设计师良好的参考工具。它在页面的上方和左方显示，单位可以是像素，英寸或厘米。通常我们用它作为页面元素定位的参考坐标，默认的原点在页面的左上角，我们可以拖动网格原点到页面的任何位置（^45040701b^2）：
　　若要将原点还原到原来的位置，选择“查看\标尺\重设原点”即可。
　　3.页面边空:默认状态下，页面内容和页面边框之间空着大约10个像素的距离，我们需要在页面属性中设定这个间距为0。点击右键选择页面属性，将其中的left和top值修改为0。
　　#1二、描摹图像
　　设定好以上的工作环境后，就可以开始我们的工作了。通常设计师都是在图像处理软件里做好他们的设计稿，在Dreamweaver中设计师不需从一张白纸继续他们的工作。利用Dreamweaver中的描摹图像功能，我们可以在设计稿的基础上开始页面制作，这个图片只是一个制作过程中的参考，并不会在最终的页面中出现。
　　1.使用描摹图像。选择View\Tracing Image\Load载入描摹图像，选择你希望载入作为描摹图像的设计稿，程序会自动打开页面属性面版，在这里你可以设定这个描摹图像的透明度（^45040701c^3）。
　　2.控制描摹图像显示。选择View\Tracing Image\Show可以在显示和隐藏描摹图之间切换。
　　3.改变描摹图像的位置。有时我们需要对描摹图像位置进行细微的调整，可以通过View\Tracing Image\Adjust Position命令设置描摹图像与原点的偏移值。
　　描摹图像的功能不仅仅是对整个页面使用描摹图，我们也可以对单独的一个页面局部使用，例如对一个表格使用一张单独的描摹图，首先我们将一个小的描摹图载入当前页面，然后选定需要使用描摹图的一个局部，例如一个表格，然后执行View\Tracing Image\Align With Selection即可将描摹图像的原点对齐到表格的左上角（^45040701d^4）。
　　将描摹图定好位置后，我们就可以照着描摹图来安排我们的页面元素。
　　#1三、使用设计视图（Layout View）进行设计
　　在Dreamweaver的旧版本中，我们除了利用表格进行页面布局，利用描摹图像进行辅助外，也可以直接用层进行布局，最后再将层转换为表格来满足各种浏览器，但这种方法一直不太便利，而且也不太严谨，在Dreamweaver4中，新增了一个功能:Layout View，此功能可以使我们的页面转换到一个设计视图中，并利用新的布局单元随意的布置页面元素。
　　在这个新的设计视图中，我们可以随意的绘制布局单元或布局表格，在这些单元中再按照我们的需要插入相应的页面元素而这些布局单元在插入后还可以随意移动，当所有元素都放置在合适的位置后，我们可以切换回标准视图，所有的内容都各自组合在不同的表格中（^45040701e^5）。
　　在设计视图中进行工作有两种布局方式，一种是从布局单元开始，另一种是从布局表格开始，它们的工作方式稍有不同，下面我来分别介绍。
　　#21.从布局单元开始
　　（1）绘制布局单元。当我们打开设计视图时，可以直接在上面绘制布局单元，当我们绘制了第一个布局单元时，Dreamweaver会将整个当前文档空间作为一个布局表格，并在页面的左上角显示Layout Table标签（^45040701f^6）。
　　（2）修改布局单元。蓝色高亮显示的就是布局单元，此布局单元可以随意移动，并可以通过鼠标拖动控制手柄来随意改变大小，也可以先选中布局单元，再在属性面板直接输入相应的数值来改变大小和位置。
　　（3）移动布局单元。将鼠标放置在布局单元的边线上方，可以拖动布局单元到新的位置（^45040701g^7）。
　　（4）添加内容。布局单元放置好位置后，我们就可以在中间放置我们各种页面元素。此时我们可以切换到标准视图看一下，发现Dreamweaver自动将布局单元转换为相应大小的一个表格。
　　#22.从布局表格开始
　　在上面这种方法中，我们看到Dreamweaver将整个文档作为一个大的容器，各个布局单元分别放置在合适的位置。而最终转换到标准视图时，这些布局单元都是一个大表格中的单元格。这样并不利于页面浏览时的速度，我们还可以通过另一个途径来实现这个目的，这就是从布局表格开始，逐步细化到布局单元。
　　（1）绘制布局表格。我们可以根据页面内容将页面分为从上到下不同的多个布局表格，而且只能是从上到下平行排列的多个布局表格，不能从左往右排列。
　　（2）插入布局单元。布局表格放好后，就可以在每个布局表格中分别放置各自的布局单元格（最后效果见^45040701h^8）。
　　（3）嵌套布局表格。在设计视图中我们也可以方便的插入嵌套布局表格。首先我们需要明白，嵌套表格只能存在于未放置布局单元的布局表格空间中，从页面上来看，当插入一个布局表格时，Dreamweaver会以一种浅灰色表示布局表格的范围，而当插入一个布局单元时，这部分布局表格的空间会变为白色。明白了这一点就可以方便的绘制了，用布局表格工具在已有的灰色布局表格区域拖动，即可绘制出另一个嵌套的布局表格。在这个嵌套的布局表格中同样可以继续绘制布局单元，当我们切换到标准视图时就会发现这个区域是两层互相嵌套的表格。
　　（4）取消嵌套表格。有时我们绘制了一些嵌套布局表格并插入了许多内容后，想取消这种嵌套关系，而将它们变为同一个布局表格中的内容。这需要先选中内部的嵌套表格，打开属性面版，点击Remove Nesting命令取消嵌套关系，但原有的内容并不会丢失，而是在原位转换为上一个布局表格中的一部分。
　　#23.设计视图进阶应用
　　介绍完布局视图中的基本使用方法后，我们再来看看布局视图一个重要的用途，即设计可扩展的页面结构，也就是可以随着浏览器分辨率自动改变大小的结构。
　　（1）改变布局表格为可伸缩。选中布局表格后打开属性面板，在Width（宽度）一项里选择Autostretch（自动伸展），Dreamweaver会有三种选择方法来继续下一步的操作，你可以选择新建一个空白图片或选择已有的一个图片或不使用空白图片来生成伸缩性布局表格，这个空白图片将在当前布局表格的下方新增一行，以此固定最左方的单元宽度为固定值，而右方的单元将会自动扩展到浏览器边缘。此时使用了透明图片固定的一列会标示出来（^45040701i^9）。
　　（2）改变布局单元为可扩展。在布局表格的上方显示了每列布局单元格的宽度，我们可以点击其中一列的数值从弹出菜单中选择Make Column Autostretch将此列转换为自动扩展的，Dreamweaver会以一段波浪线表示此列，如^45040701j^10。
　　（3）创建可伸缩页面。上面两种做法掌握后我们就可以制作可伸缩的页面了。通常我们会将需要固定宽度的表格列先设定好相应的固定值，然后将剩余不需特定数值的表格列设定为可扩展值（^45040701k^11）。我们看下面两种情况:
　　此表格为左右结构，左边的列设定为固定宽度值，右边的列设定为可扩展值（^45040701l^12）。
　　此表格为左中右结构，左边和右边为固定宽度列，中部列为可扩展宽度列。这两种表格都实现了自动适应浏览器分辨率。
　　（4）编辑可扩展单元。对已经转换为可扩展的单元，我们还可以再将它转换为固定宽度，也可以将所有支撑表格宽度的透明图片取消，这两个命令可以从单元格上方的下拉菜单里找到（^45040701m^13）。有时由于我们来回修改布局表格，会使得一些单元的宽度值与实际值不同，这时会在单元的标示位置出现两个数值（^45040701n^14）。
　　我们可以点击此处从弹出菜单里选择Make Cell Widths Consistent，使得此单元的宽度值统一。
　　#24.交互在两种视图中工作
　　上面我们介绍了在设计视图中进行页面布局的步骤和方法，但需要注意的是，设计视图中有许多元素属性并不能直接设定和修改，此时我们可以转换到标准视图中按常规方式设定这些属性值，再随时切换回设计视图，两种情况非常兼容，不会出现任何不适应的变化。
　　到这里我们介绍了设计视图中的基本工作方法，之所从在前面已介绍了表格布局方法之外再给大家介绍这种方法，只是为了给广大的设计师提供另一个工作的界面和方式，不可否认，这两种工作方式各有优缺点，至于具体使用哪种方式，完全可以根据自己的习惯来决定。但是多条道路多个选择，相信多掌握一种方法可以给你更多更好的选择，也相信一定会有一种方法能适合你。朋友们有什么问题，可以到http://www.blueidea.com提出讨论。
　　#1    技巧提示:
　　#21.快速改变视图辅助参数
　　我们经常需要开关网格显示、开关标尺显示、开关描摹图像显示，此时不需要总从下拉菜单执行这几条命令，在工作窗口的最上方有一个快速开关常见视图操作的按钮，在这里可以改变常用的视图辅助参数。
　　#22.快速居中对齐布局表格
　　在设计视图中，我们创建的布局表格默认都是距页面左边的，这常和我们需要的居中放置不符，我们通常都是切换到标准视图来改变这个设置。其实我们可以选定这个布局表格，按“Ctrl+T”打开快速标签编辑窗口，直接输入Align=“center”，则此布局表格自动居中布置。
　　#23.连续绘制多个布局单元。
　　   有时我们需要不停地点击Object面板上的布局单元按钮，绘制多个布局单元，这样很繁琐。其实我们可以按住Ctrl健，就可以连续绘制多个布局单元。