容易被忽略的Dreamweaver技巧
发布时间:2006-5-31 18:53:43   收集提供:shendata
如果你是一名试图在可视开发环境下创建复杂网络站点的 Web 设计人员,很显然,DreamWeaver (以下简称DW)几乎肯定就是你的首选工具。以下的这些小技巧相信会对你设计自己的站点大有裨益。



一、创建弹出式导航系统

  创建弹出式菜单导航系统要用到很多JavaScript代码。不过,如果你采用 DreamWeaver/FireWorks Studio作为开发平台,你就可以很快地完成这些工作了。首先你可以在FireWorks内选择图像的快照或其中一个片断,然后选择“Insert/Pop-Up Menu”菜单命令,在“Set Pop-Up Menu”对话框内键入菜单选项名字并点击“Plus”按钮即可把这些选项加入到自己的菜单中。你可以设置菜单的文本和链接,同时还可以创建子菜单、重新排列菜单项。完成以上工作后,单击“Next”按钮即可设置颜色、字体等属性。你还可以选择在 HTML或者图像中显示菜单系统。点击“Finish”按钮之后你可以看到鼠标停留在快照或者图像片断上时菜单系统的外观。在导出文件时,FireWorks就为DW中的文件创建了所需要的全部 HTML、JavaScript和图片。类似这种DW集成其他产品协同设计的方式还有很多,只要稍加留意就可以运用自如了。



二、具有“弹性”的页面

  你可以让你的页面随着浏览器窗口大小的改变而随之改变,这个功能被Web开发人员叫做Liquid。具有这一特性的页面在大窗口内不会留下空白,在小窗口的情况下则不会出现滚动条。大多数简单的页面本身也是具有这种特性的,不过要创建这样的页面很难,因为你不得不创建很多栏和表格。通常情况下,我们都想使用固定栏和间隔GIF来设计页面,使之可以同时应用于Internet Explorer和Netscape Navigator这两款主流浏览器。有了DW 4.0 帮忙,你就可以轻易地实现这种“弹性”页面了。

  首先打开需要设计的页面,然后按下“对象”面板上的“布局视图”按钮切换到布局视图。这样,在每个栏的顶部就可以看到栏宽和一个小小的下拉箭头,单击你打算延伸的栏上的箭头,并选择“列设置为自动伸展”即可,这里只能有一个栏可以设置为自动伸展。DW将自动地创建间隔GIF,这些GIF以栏顶的双条标示。要使这种布局能起到正常的作用,采用这些间隔GIF是非常必要的。如果你是头一次为某个站点增加间隔GIF,这时会出现一个“选择间隔图像”对话框,询问你是“创建间隔图像文件”、“使用现存的间隔图像文件”,还是“对于自动伸展表格不要使用间隔图像”。



三、创建个人颜色面版

  DW4.0中的“资源”面板可以让你根据各种类型要素,比如图片、模版等组织自己站点内的文件。只要你通过“站点”→“新建站点”菜单定义了自己的站点,那么所有这些要素的类型就会自动地增加到“资源”面板的相应标签上。这个面板的“颜色”标签上存放了站点内采用的全部颜色,其中包括文本颜色、背景和链接的颜色等。这个标签就是你自己的站点调色版。要调出这个调色版,你可以通过“窗口”→“资源”菜单打开“资源”面板,并单击右下方的“刷新站点列表”小按钮,然后就会看到站点内的全部颜色列表了。你可以把这些颜色拖到选中的文本上。还有,在你加亮选中某种特定颜色时,该颜色的16进制数值和RGB数值就会出现在上面的窗口中。如果你想进一步缩小站点颜色面板的大小,可以只向“资源”面板的“收藏”区增加某些颜色。方法非常简单,选中需要的颜色,然后点击窗口右下角的“添加到收藏夹”小按钮即可。
 
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50