第四篇、页面设计篇

蓝色经典 梦觉

3、 设计视图进阶应用。介绍完布局视图中的基本使用方法后，我们再来看看布局视图令一个重要的用途，既设计可扩展的页面结构，也就是可以随着浏览器分辨率自动改变大小的结构。

1） 改变布局表格为可伸缩。选中布局表格后打开属性面版，在Width（宽度）一项里选择Autostretch（自动伸展），Dreamweaver会有三种选择方法来继续下一步的操作，你可以选择新建一个空白图片、或选择已有的一个图片、或不使用空白图片来生成伸缩性布局表格，这个空白图片将在当前布局表格的下方新增一行，以此固定最左方的单元宽度为固定值，而右方的单元将来会自动扩展到浏览器边缘。此时使用了透明图片固定的一列会如下图标示出来；

2） 改变布局单元为可扩展。在布局表格的上方显示了每列布局单元格的宽度，我们可以点击其中一列的数值从弹出菜单中选择Make Column Autostretch将此列转换为自动扩展的，Dreamweaver会以一段波浪线表示此列，如下图；

3） 创建可伸缩页面。上面两种做法掌握后我们就可以来制作可伸缩的页面了。通常我们会将需要固定宽度的表格列先设定好相应的固定值，然后将剩余不需特定数值的表格列设定为可扩展值。我们看下面两种情况：

此表格为左右结构，左边的列设定为固定宽度值，右边的列设定为可扩展值。

此表格为左中右结构，左边和右边为固定宽度列，中部列为可扩展宽度列。这两种表格都实现了自动适应浏览器分辨率。

4） 编辑可扩展单元。

对已经转换为可扩展的单元，我们还可以再将它转换为固定宽度，也可以将所有的支撑表格宽度的透明图片取消，这两个命令可以从单元格上方的下拉菜单里找到。有时由于我们来回的修改布局表格，会使得一些单元的宽度值与实际值不同，这是会在单元的标示位置出现两个数值，如图；

我们可以点击此处从弹出菜单里选择Make Cell Widths Consistent，使得此单元的宽度值统一。

4、 交互在两种视图中工作。上面我们介绍了在设计视图中进行页面布局的步骤和方法，但需要注意的是，设计视图中有许多的元素属性并不能直接设定和修改，此时我们可以转换到标准视图中按常规方式设定这些属性值，再随时切换回设计视图，两种情况非常兼容，并不会出现任何不适应的变化。

到这里我们介绍了设计视图中的基本工作方法，之所有在前面已介绍的表格布局方法之外再给大家这种方法，只是为了给广大的设计师提供另一个工作的界面和方式，不可否认，这两种工作方式各有优缺点，至于具体使用那种方式，完全可以根据自己的习惯来决定。但是多条道路多个选择，相信多掌握一种方法可以给你更多更好的选择，也相信一定会有一种方法能适合你。朋友们有什么问题，可以到http://www.blueidea.com提出讨论。

技巧提示：

1、 快速改变视图辅助参数。我们经常需要开关网格显示、开关标尺显示、开关描摹图像显示，此时不需要总从下拉菜单执行这几条命令，在工作窗口的最上方有一个 快速开关常见视图操作的按钮，在这里可以改变常用的视图辅助参数。

2、 快速居中对齐布局表格。在设计视图中，我们创建的布局表格默认都是距页面左边的，这常和我们需要的居中放置不符，我们通常都的切换到标准视图来改变这个设置。其实我们可以选定这个布局表格，打开属性面版点击 ，或者按Ctrl+T打开快速标签编辑窗口，直接输入Align=”center”，则此布局表格自动居中布置。

3、 连续绘制多个布局单元。有时我们需要不停的点击Object面板上的布局单元按钮，绘制多个布局单元，这样很繁琐。其实我们可以按住Ctrl健，就可以连续的绘制多个布局单元。

总目录 | 第一页 | 第二页 | 第三页