十二個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)中發現擴充功能。點選了之後這時會有一個對話框出現，會顯示出所有可以套用的格式菜單，實在非常方便。