Dreamweaver技巧十二招

对想要在可视化的环境下制作复杂网页的专业网页制作者来说，Dreamweaver 已经渐渐在网页编辑工具市场中展露头角，成为专业人士编写网页的最佳选择。以目前的情况来说，Dreamweaver 内建的功能可说是越作越多、越作越丰富、齐备。在这里我要向大家介绍的4.0版本中的一些应用小技巧。

1. 让网页页面更有弹性

有些网页开发者称以下要介绍的这种技巧为 liquid，我在这儿则把这种技巧叫做是 stretchy（弹性延伸的技巧）。这是一种技巧，可在访客浏览器窗口大小改变时也随之调整网页页面大小，因此若是窗口过大就不会有空白处、窗口过小边缘就不会跑出上下移动的拉Bar。其实大多数简单的网页会自己随着浏览器窗口大小来调整页面大小，但是若是网页里用到很多不同的框框及表格，网页页面大小就很难自动弹性地调整。通常网页设计者会用混合运用固定栏宽的框框，和 GIF 图档作为间隔， 来设计网页页面，这样一来不论是用 Internet Explorer 或是用，页面大小都会固定而不会跑掉。用 Dreamweaver 4.0 可以轻而易举的设计出会自动弹性调整的网页。要怎么做呢？

用工具面版（Object palette）上的按钮开启网页，并且转换到 格式检视（ Layout view）。这时可以看到文字方块的列宽， 每一列的方框上方中间还有一个小小的下拉式箭头 ，选择想要设定弹性显示的列上方的小箭头，接着选择「将列设为弹性显示」（ Make Column Autostretch）。 （设定自动调整列宽以一列为限）这时该列方框上方就会出现一条波浪形的线，而不是原本表示列宽的数字。 Dreamweaver 会自动制作出固定版面的空格图文件，这个空白图文件是以列上方的两个长条形的空白表格表示，如此版面会自动被填充，才会完成弹性版面设定。（在第一次增加空白图文件时会跳出一个对话框问你是否要使用内建图档，为求效果，我建议你让 Dreamweaver 自动产生一个，不然就不用使用空白图文件来填充版面。）

2. 创造个性化调色盘 

Dreamweaver 4.0 新的 Assets panel（属性控制面板）是一种可以在编辑网站时根据档案型态，例如图片、样板等来管理档案的新工具，当你定义新站台时（选择Site · New Site），所有类型的组件会自动增加到 Asset panel 里的适当表框中。这个加入新的Assets panel属性控制面版里也有颜色框，储存你网站里所用到的所有色彩，包含文字的颜色、背景的颜色，以及连结的颜色等。这是一个为使用者量身定做的网站导向颜色盘。只要激活 Assets panel （先选择 Window · 再选择 Assets），接着选择左方那个小小的色彩滚动条，就可以看到你网站里各式各样的颜色选项。当然你可以将这些颜色拉到某些特定选取的文字中。甚至当你选择某种颜色时，画面上会出现这种颜色的十六进制值的色彩浓淡度，和三色对应码（RGB）。如果想将调色盘工具列缩小一点，甚至可以仅加入某些颜色到调色盘的收藏夹里。只需将选取的颜色反白、选择窗口里一个叫做「添加到我的收藏夹」按钮（最下方靠右的按钮），就完成了。 

3. 制作弹出式选单导览系统 

原本要制作弹出式选单导览系统（Pop-up Menu Navigation System）要用到好一些 JavaScript 的语法技巧，但是若你装了Dreamweaver/Fireworks Studio，轻轻松松即可快速办到。首先在 Fireworks 里开始，选择某个图片， 然后在 Set Pop-Up Menu的对话框里选择 Insert· Pop-Up Menu，你可以输入项目（items）的名称并选择 Plus （加入）按钮，来新增该项目。你可以继续在跳出来的讯息框里进行细项设定，例如设定该项目所要用的文字及连结，当然也可以新增子选单、并重新安排下一层的设定。完成时，选择 Next （下一步），继续设定偏好值，例如颜色、字体等等。这时选单完成后，可以预览 HTML 语法，也可预览影像。再选择 Finish （完成）。这时当鼠标移动到原来的图案时，会出现选单系统的内容一览。 接着将制作好的档案汇出时， Fireworks 会自动生产出所有 Dreamweaver 需要用到的 HTML、JavaScript，以及影像档案。

4. 让图档动起来！

如果你同时安装有 Dreamweaver/Fireworks Studio，这两种产品搭配的完美程度将使你赞不绝口。即使你不是专业的图档设计者，在设计网页时也多多少少想把一些 GIF 图片文件修改得活灵活现。Dreamweaver 可以让你制作动画不求人喔！在标准窗口里选择要进行修改的图片，然后在 Property Inspector 里选择编辑钮（Edit）。如果你安装的 Dreamweaver里附有 Fireworks， Fireworks 就是 Dreamweaver 预设图片编辑器，这时图片就会自动加载到 Fireworks。（若仔细看，各位会发现 Fireworks 的画面会出现 Editing From Dreamweaver 这样的文字和图样，指示你可以由Dreamweaver 里进行图片编辑。） 好了，现在在 Fireworks 里选择要编辑的图片，选择 Modify ·Animate ·Animate Selection。 接下来完成 Animate dialog box 里的设定，选定动画的框架数，动画移动的方向、透明度等等设定。你也可以选择 Frames 工具列设定移动速度，选择 Object 面版来改变设定。要汇出档案时，只要选择 Optimize 工具列，在档案类型的地方选择 Animated GIF。完成以后，Fireworks 就会自动将图片以最佳化设定汇出，并且自动将 GIF 图档更新，还会在 Dreamweaver 里将更新过的图档秀出来。选择 File ·Preview in Browser，这样就可以在浏览器里预览刚刚制作完成的可爱图档！