Dreamweaver网页设计的小窍门

Dreamweaver设网页设计的小窍门

　　给大家整理了一些Dreamweaver设计网页中的小窍门，希望对想学习Dreamweaver的朋友有一点帮助...

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

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

　　具体做法：用工具面板(Object palette)上的按钮打开网页，并且转换到“格式查看”(Layout view)。这时能看到文字方块的栏度，每一栏的方框上方中间更有一个小小的下拉式箭头，点选想要设置弹性显示的栏上方的小箭头，接着选择“将栏设为弹性显示”(Make Column Autostretch)。(设置自动调整栏的宽度以一栏为限)这时该栏方框上方就会出现一条波浪形的线，而不是原本表示栏度的数字。 Dreamweaver会自动制作出固定版面的空格图片，这个空白图片是以栏上方的两个长条形的空白表格表示，如此版面会自动被填充，才会完成弹性版面设置。

　　秘诀2：创造个人调色板

　　Dreamweaver新的“Assets panel”(属性控制面板)是一种能在编辑网站时根据文件格式，例如图片、样式等来管理文件的新工具。

　　具体做法：当你定义新站点时(点选Site New Site)，所有类型的物体会自动增加到“Asset panel” 里的适当表框中。这个新加入的“Assets panel”属性控制面板里也有颜色框，储存你网站里所用到的所有色彩，包含文字的颜色、背景的颜色，及超链接的颜色等。这是个为使用者量身定做的网站导航颜色盘。只要启动“Assets panel”(先选 “Window”再点“Assets”)，接着点左方那个小小的色彩卷轴，就能看到你网站里各式各样的颜色选项。当然你能将这些颜色拉到某些特定选取的文字中。甚至当你选择某种颜色时，画面上会出现这种颜色的十六进位值的色彩淡浓度，和三原色对照码(RGB)。如果想将调色板工具栏缩小一点，甚至能仅加入某些颜色到调色板的“我的最爱”里。只需将选取的颜色反白、点选窗口里一个叫做“新增到我的最爱的”按钮(最下方靠右的按钮)，就能完成了。

　　秘诀3：制作弹出式菜单导航系统

　　原本要制作弹出式菜单导航系统(Pop-up Menu Navigation System)要用到非常多的一些java script的语法和技巧，不过如果你有Dreamweaver、Fireworks Studio，即可轻轻松松快速办到。

　　具体做法：首先在“Fireworks”里开始，选择某个图片，然后在“Set Pop-Up Menu”的对话框里点选“ Insert　 Pop-Up Menu”，你能输入项目(items)的名称并点“Plus”(加入)按钮，来新增该项目。你能继续在跳出来的信息框里进行细项设置，例如设置该项目所要用的文字及超链接，当然也能新增子菜单，并重新安排下一层的设置。完成时，点选“Next”(下一步)，继续设置各种参数值，例如颜色、字体等等。这时菜单完成后，既能预览HTML语法，也可预览图象。再点“ Finish”(完成)。这时当鼠标移动到原来的图片时，会出现菜单系统的内容一览。接着将制作好的文件导出时，“Fireworks”会自动生产出所有 Dreamweaver 需要用到的HTML、java script，及图象文件。

　　秘诀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”，这样就能在浏览器里预览刚刚制作完成的可爱图片。

　　秘诀5：让按钮有闪动效果

　　在Dreamweaver中，不用有Flashs，也能制作有闪动效果的Flash按钮物体。Dreamweaver内置有好几个 Flash按钮物体，能制作好几个不同形式的按钮。

　　具体做法：点选“Insert Interactive Images Flash Button”就可看到有那些内置按钮。在对话框内甚至能用鼠标指到想要使用的按钮形式，然后看看在浏览器里的效果怎么。用鼠标指针把要用的按钮形式选定，再依顺序输入参数，例如按钮上的文字、字形、颜色、超链接等，或是自设文件名字。按下OK。接下来就会有一个“SWF”格式的文件产生，文件并会自动导入你的网页中。按一下这个做好的文件，会看到“Property Inspector”(属性明细)中会显示出文件的属性。将文件属性显示出来时，如果扩展文件属性明细表，会出现“Play”(播放)，点选之后能不用打开浏览器来预览按钮的闪动效果。

　　秘诀6：制作流动文字

　　在网页中增加流动文字就像增加我们刚刚介绍的Flash按钮相同简单。相同地，不用安装Flash，用 Dreamweaver提供的新功能就能轻松办到。常用HTML语法写网页、没有互动式媒体经验的网页制作者也能轻松制作出小巧的Flash形式的流动文字。这项新功能能在不添加相兼容性麻烦的情况下为网页增添一些浏览上和访客的互动性。

      具体做法：点选“Insert Interactive Images Flash Text”，再将参数设置一一填入(例如要更改效果的文字、字形、字体颜色及字体大小等等)。

　　秘诀7：更改键盘快捷键

　　Dreamweaver可让使用者自订使用界面，这项设计十分有弹性。举例来说，使用者能通过编写程式或自行增加物体(object)的方式来更改菜单。不必功力高深，你就能更改键盘快捷键，因为Dreamweaver有一项叫做“Keyboard Shortcut Editor”的图像界面。

　　具体做法：只要点选“Edit Keyboard Shortcuts”，对话框将载入并栏出能改动的快捷键一览表，让你把快捷键改成自己习惯用的设置值。要改动快捷键，只要使用现行设置(Current Set)和命令栏(Command)的下拉菜单，在现有的命令中找到想要更改的命令，接着选取目前的快捷键，就会出目前快捷键的列表中。另外，如果要增加快捷键设置，能点选“Plus”、在键盘上敲入你想使用的新快捷代表键，点选“改动”(Change)即可。同时你也能选取某快捷键、点选“移除”(Minus)，就能移除某个快捷键。

　　秘诀8：重新设置网站窗口(Site window)栏

　　具体做法：只要从“Site window”中点选“View File View Columns”，就能自字查看网站(Site view)栏的大小及出现方式。选取某一栏的名称，使用上下箭头重新调整，或不要勾选显示栏(Show field)以隐藏该栏。另外，点选“Plus”钮也能新增栏，并自创栏名。此外，你也能在下拉式菜单中选择现有的“note”来将栏和“Design Note”产生关联。

　　秘诀9：查看网页原代码

　　具体做法：当你打开“Reilly Code Reference”(Window Reference)来检查属性或是浏览器的兼容性时，预设的窗口会以细小的字型显示出“参考设置值”。不过如果你按下窗口右上方的右键(就在关闭按钮的下方)，就会出现一排下拉式菜单，能在这边选择原始代码字体的大小(小型字到中型字体及大型字体)。选择大型字体比较不会“虐待”眼睛，因为这样你看HTML原代码时就不用拿着放大镜看屏幕了。

　　秘诀10：新增Flash按钮

　　秘诀5中，我们介绍怎么用20种预设的按钮类型，来制作Dreamweaver里的Flash按钮。这是不用另外安装所有文件或程式的方法。下面有另一种方法，就是安装“Fireworks buttons”，这种扩充功能和秘诀5有相同的效果。

　　具体做法：到 “Exchange for Dreamweaver”(Dreamweaver 扩充功能交换中心) ，输入“InstaGraphics Extensions for Dreamweaver”的关键字搜寻，然后再下载这个大约577K 的文件。转换到Dreamweaver，选择“Commands Manage Extensions”，再选择“File Install Extension”，就能开始安装。一旦重新启动 “Dreamweaver”，就有六个新奇有趣的按钮格式，包括“Surfboard”及“Bulletbar”在内，这时只要使用“Insert Interactive Images Fireworks Button”命令，就能制作出一个酷炫的按钮。你也能用“commands Convert Bullets To Images”及 “Commands Convert Text To Images”，上述两种方法都能自动执行“Fireworks”。

　　秘诀11：在网页中加入“设置成我的最爱”功能

      具体做法：在“Exchange”里搜寻，你就能发现“Add To Favorites”的扩充功能。这个小小的文件才占3K，下载时间不会等太久，接着循相同步骤，由“Extension Manager”载入(Commands Manage Extensions、File Install Extension)。接着重新启动 Dreamweaver，这个新载入的扩充文件会在 Dreamweaver里新增一项功能。如果你的网页中加入这个“加入我的收藏集”的功能，这样一来使用者看到你的网站时，轻轻一按，就能轻易地将你的网站加入他使用浏览器的“我的最爱”(或是个人书签)。此外，最炫的是也能自订“我的最爱”名称，及“我的最爱”名称前会出现的小图示(一般IE中“我的最爱”前面的小图示都是IE的预设值，如果你有自己设计的小图示，那就炫多了)。注意，这项功能只支持用 IE 4.0及更高版本的浏览器。只要选择“视窗系统”菜单里的“Behavior”面板，再到IE功能下拉菜单点选此项功能，即可轻松启动此酷炫功能。

　　秘诀12：超酷的图表

　　如果你想制作表格，还要自己花时间再逐字编写网页原代码吗?不必了，已有现成的了!

　　具体做法：到Exchange下载“Form Builder extension”，就有现成的表格，可让你马上复制包含像：国家、性别、婚姻状况、年龄层及其他目录等的表格。到Exchange下载这个小巧(只有11K)的文件，然后由“Extension Manager”安装进来(Commands Manage Extensions, File Install Extension)。接着只要重新启动 Dreamweaver，点选“Insert FormBuilder”，就会在(Insert FormBuilder)中发现扩充功能。点选了之后这时会有一个对话框出现，会显示出所有能套用的格式菜单，实在非常方便。