Dreamweaver鲜为人知的小秘诀

　　一、背景分析

　　对想要在视觉化环境下制作复杂网页的专业网页制作者来说，Dreamweaver已渐渐在网页编辑工具中展露头角，成为专业人士编写网页的最好选择。根据Macromedia公司的调查，Dreamweaver现在已累积有超过七十万名的使用者，占有率在网页编辑工具中居冠，像“Adobe GoLive”和“NetObjects Fusion”等竞争者都被遥遥抛在后头。因此一般地预估Dreamweaver的使用群体将会持续的增加。

　　在这种势不可挡的普及率席卷之下，可想而知Dreamweaver内置的功能可说是越来越多、越来越丰富、齐全。在这次我们的介绍中，就有新增一些功能提供网页制作者一些更快速的设计、更容易地编码及整合性更强的功能。事不宜迟，以下我们介绍如何善用Dreamweaver里的一些功能。以下密技共有十二项，可分成四个主题。分别是：设计网页页面（Dreamweaver里具备弹性的页面设计功能）、搭配Macromedia其他产品一起使用Dreamweaver（制作动画和图片不求人）、自订使用界面（享受个性化的使用经验）和最后的加入Dreamweaver扩充程式（在网页中载入扩充高级功能 ）。

　　二、设计网页页面的秘诀

　　不管您是要运用HTML原始语法逐字逐字来编写网页，或是运用标准化窗口来进行网页的视觉设计，以下的小秘诀都能够派得上用场。

　　秘诀1：让网页页面大小更有弹性

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

　　★具体做法：用工具面板（Object palette）上的按钮打开网页，并且转换到“格式查看”（Layout view）。这时能够看到文字方块的栏度，每一栏的方框上方中间更有一个小小的下拉式箭头，点选想要配置弹性显示的栏上方的小箭头，接着选择“将栏设为弹性显示”（Make Column Autostretch）。（配置自动调整栏的宽度以一栏为限）这时该栏方框上方就会出现一条波浪形的线，而不是原本表示栏度的数字。 Dreamweaver会自动制作出固定版面的空格图片，这个空白图片是以栏上方的两个长条形的空白表格表示，如此版面会自动被填充，才会完成弹性版面配置。（在第一次增加空白图片时会跳出一个对话框问您是否要使用内置图片，为求效果，我们建议您让Dreamweaver自动产生一个，不然就不用使用空白图片来填充版面。）

　　秘诀2：创造个人调色板

　　Dreamweaver新的“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 图片更新，还会在

标签：

版权申明：本站文章部分自网络，如有侵权，请联系：west999com@outlook.com
特别注意：本站所有转载文章言论不代表本站观点，本站所提供的摄影照片，插画，设计作品，如需使用，请与原作者联系，版权归原作者所有