十二個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)要用到很多的一些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)以隱藏該欄