一、背景分析
對於想要在視覺化環境下製作複雜網頁的專業網頁製作者來說，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)以隱藏該欄。另外，點選「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以及更高版本的瀏覽器。只要選擇「Windows」選單裡的「Behavior」面板，再到IE功能下拉選單點選此功能，即可輕鬆啟動此酷炫功能。
秘訣12：超酷的圖表
如果你想製作表格，還要自己花時間再逐字編寫網頁原代碼嗎?不需要了，已經有現成的了!
★具體做法：到Exchange下載“Form Builder extension”，就有現成的表格，讓你馬上複製包含像：國家、性別、婚姻狀況、年齡層及其他目錄等的表格。到Exchange下載這個小巧(只有11K)的文件，然後由「Extension Manager」安裝進來(Commands Manage Extensions, File Install Extension)。接著只要重新啟動Dreamweaver，點選“Insert FormBuilder”，就會在(Insert FormBuilder)中發現擴充功能。點選了之後這時會有一個對話方塊出現，會顯示出所有可以套用的格式選單，實在非常方便。