對想要在視覺(jué)化環(huán)境下制作復雜網(wǎng)頁(yè)的專(zhuān)業(yè)網(wǎng)頁(yè)制作者來(lái)說(shuō)，Dreamweaver已經(jīng)漸漸在網(wǎng)頁(yè)編輯工具中展露頭角，成為專(zhuān)業(yè)人士編寫(xiě)網(wǎng)頁(yè)的最佳選擇。根據Macromedia公司的調查，Dreamweaver目前已累積有超過(guò)七十萬(wàn)名的使用者，占有率在網(wǎng)頁(yè)編輯工具中居冠，像“Adobe GoLive”和“NetObjects Fusion”等競爭者都被遙遙拋在后頭。

因此一般地預估Dreamweaver的使用群體將會(huì )持續的增加。在這種勢不可擋的普及率席卷之下，可想而知Dreamweaver內置的功能可說(shuō)是越來(lái)越多、越來(lái)越豐富、齊全。在這次我們的介紹中，就有新增一些功能提供網(wǎng)頁(yè)制作者一些更快速的設計、更容易地編碼及整合性更強的功能。事不宜遲，以下我們介紹如何善用Dreamweaver里的一些功能。

以下密技共有十二項，可分成四個(gè)主題。分別是：設計網(wǎng)頁(yè)頁(yè)面（Dreamweaver里具有彈性的頁(yè)面設計功能）、搭配Macromedia其它產(chǎn)品一起使用Dreamweaver（制作動(dòng)畫(huà)和圖片不求人）、自訂使用界面（享受個(gè)性化的使用經(jīng)驗）和最后的加入Dreamweaver擴充程序（在網(wǎng)頁(yè)中載入擴充高級功能 ）。

不管你是要運用HTML原始語(yǔ)法逐字逐字來(lái)編寫(xiě)網(wǎng)頁(yè)，或是運用標準化窗口來(lái)進(jìn)行網(wǎng)頁(yè)的視覺(jué)設計，以下的小秘訣都可以派得上用場(chǎng)。

秘訣1：讓網(wǎng)頁(yè)頁(yè)面大小更有彈性　　

有些網(wǎng)頁(yè)開(kāi)發(fā)者稱(chēng)以下要介紹的這種技巧為“l(fā)iquid”，在這兒則把這種技巧叫做是“彈性延伸的技巧”。這是一種技巧，可在訪(fǎng)客瀏覽器窗口大小改變時(shí)也隨之調整網(wǎng)頁(yè)頁(yè)面大小，因此如果窗口過(guò)大就不會(huì )有空白處；窗口過(guò)小邊緣就不會(huì )跑出上下移動(dòng)的拉條。其實(shí)大多數簡(jiǎn)單的網(wǎng)頁(yè)會(huì )自己隨著(zhù)瀏覽器窗口大小來(lái)調整頁(yè)面大小，但是如果是網(wǎng)頁(yè)里用到很多不同的框架及表格，網(wǎng)頁(yè)頁(yè)面大小就很難自動(dòng)彈性地調整。通常網(wǎng)頁(yè)設計者會(huì )用混合運用固定寬度的框架，和GIF圖片作為間隔來(lái)設計網(wǎng)頁(yè)頁(yè)面，這樣一來(lái)不論是用Internet Explorer或是用Netscape Navigator，頁(yè)面大小都會(huì )固定而不會(huì )跑掉。用Dreamweaver 4.0可以輕而易舉的設計出會(huì )自動(dòng)彈性調整的網(wǎng)頁(yè)。要怎么做呢？

★具體做法：用工具面板（Object palette）上的按鈕打開(kāi)網(wǎng)頁(yè)，并且轉換到“格式查看”（Layout view）。這時(shí)可以看到文字方塊的欄度，每一欄的方框上方中間還有一個(gè)小小的下拉式箭頭，點(diǎn)選想要設置彈性顯示的欄上方的小箭頭，接著(zhù)選擇“將欄設為彈性顯示”（Make Column Autostretch）。（設置自動(dòng)調整欄的寬度以一欄為限）這時(shí)該欄方框上方就會(huì )出現一條波浪形的線(xiàn)，而不是原本表示欄度的數字。 Dreamweaver會(huì )自動(dòng)制作出固定版面的空格圖片，這個(gè)空白圖片是以欄上方的兩個(gè)長(cháng)條形的空白表格表示，如此版面會(huì )自動(dòng)被填充，才會(huì )完成彈性版面設置。（在第一次增加空白圖片時(shí)會(huì )跳出一個(gè)對話(huà)框問(wèn)你是否要使用內置圖片，為求效果，我們建議你讓Dreamweaver自動(dòng)產(chǎn)生一個(gè)，不然就不用使用空白圖片來(lái)填充版面。）

秘訣2：創(chuàng )造個(gè)人調色板

Dreamweaver新的“Assets panel”（屬性控制面板）是一種可以在編輯網(wǎng)站時(shí)根據文件格式，例如圖片、樣式等來(lái)管理文件的新工具。

★具體做法：當你定義新站點(diǎn)時(shí)（點(diǎn)選Site New Site），所有類(lèi)型的物體會(huì )自動(dòng)增加到“Asset panel” 里的適當表框中。這個(gè)新加入的“Assets panel”屬性控制面板里也有顏色框，儲存你網(wǎng)站里所用到的所有色彩，包含文字的顏色、背景的顏色，以及超鏈接的顏色等。這是一個(gè)為使用者量身定做的網(wǎng)站導航顏色盤(pán)。只要啟動(dòng)“Assets panel”（先選 “Window”再點(diǎn)“Assets”），接著(zhù)點(diǎn)左方那個(gè)小小的色彩卷軸，就可以看到你網(wǎng)站里各式各樣的顏色選項。當然你可以將這些顏色拉到某些特定選取的文字中。甚至當你選擇某種顏色時(shí)，畫(huà)面上會(huì )出現這種顏色的十六進(jìn)位值的色彩淡濃度，和三原色對照碼（RGB）。如果想將調色板工具欄縮小一點(diǎn)，甚至可以?xún)H加入某些顏色到調色板的“我的最?lèi)?ài)”里。只需將選取的顏色反白、點(diǎn)選窗口里一個(gè)叫做“新增到我的最?lèi)?ài)的”按鈕（最下方靠右的按鈕），就可以完成了。

秘訣3：制作彈出式菜單導航系統

原本要制作彈出式菜單導航系統（Pop-up Menu Navigation System）要用到很多的一些JavaScript的語(yǔ)法和技巧，但是如果你有Dreamweaver、Fireworks Studio，即可輕輕松松快速辦到。

★具體做法：首先在“Fireworks”里開(kāi)始，選擇某個(gè)圖片，然后在“Set Pop-Up Menu”的對話(huà)框里點(diǎn)選“ Insert　 Pop-Up Menu”，你可以輸入項目（items）的名稱(chēng)并點(diǎn)“Plus”（加入）按鈕，來(lái)新增該項目。你可以繼續在跳出來(lái)的信息框里進(jìn)行細項設置，例如設置該項目所要用的文字及超鏈接，當然也可以新增子菜單，并重新安排下一層的設置。完成時(shí)，點(diǎn)選“Next”（下一步），繼續設置各種參數值，例如顏色、字體等等。這時(shí)菜單完成后，既可以預覽HTML語(yǔ)法，也可預覽圖象。再點(diǎn)“ Finish”（完成）。這時(shí)當鼠標移動(dòng)到原來(lái)的圖片時(shí)，會(huì )出現菜單系統的內容一覽。接著(zhù)將制作好的文件導出時(shí)，“Fireworks”會(huì )自動(dòng)生產(chǎn)出所有 Dreamweaver 需要用到的HTML、JavaScript，以及圖象文件。

秘訣4：讓圖片動(dòng)起來(lái)

如果你同時(shí)安裝有Dreamweaver、Fireworks Studio，這兩種軟件搭配的完美程度將使你贊不絕口。即使你不是專(zhuān)業(yè)的圖片設計者，在設計網(wǎng)頁(yè)時(shí)也多多少少想把一些GIF圖片修改得活靈活現。Dreamweaver可以讓你制作動(dòng)畫(huà)不求人。

★具體做法：在標準窗口里選擇要進(jìn)行修改的圖片，然后在“Property Inspector”里點(diǎn)選“編輯”（Edit）。如果你安裝的Dreamweaver里附有“Fireworks”，“Fireworks”就是Dreamweaver預設圖片編輯器，這時(shí)圖片就會(huì )自動(dòng)載入到“Fireworks”。（如果仔細看，你會(huì )發(fā)現Fireworks的畫(huà)面會(huì )出現“Editing From Dreamweaver”這樣的文字和圖樣，指示你可以在Dreamweaver里進(jìn)行圖片編輯。）好了，現在在“Fireworks”里點(diǎn)選要編輯的圖片，選擇“ Modify Animate Animate Selection”。 接下來(lái)完成“Animate dialog box”里的設置，選定動(dòng)畫(huà)的幀數，動(dòng)畫(huà)移動(dòng)的方向、透明度等等設置。你也可以點(diǎn)選“Frames”工具設置移動(dòng)速度，選擇“Object”面板來(lái)改變設置。要導出文件時(shí)，只要點(diǎn)選“ Optimize ”工具欄，在文件類(lèi)型的地方選擇“Animated GIF”。完成以后，“Fireworks”就會(huì )自動(dòng)將圖片以最佳化設置導出，并且自動(dòng)將 GIF 圖片更新，還會(huì )在Dreamweaver里將更新過(guò)的圖片顯示出來(lái)。點(diǎn)選“File Preview in Browser”，這樣就可以在瀏覽器里預覽剛剛制作完成的可愛(ài)圖片。

秘訣5：讓按鈕有閃動(dòng)效果

在Dreamweaver中，不用有Flashs，也可以制作有閃動(dòng)效果的Flash按鈕物體。Dreamweaver內置有好幾個(gè) Flash按鈕物體，可以制作好幾個(gè)不同形式的按鈕。

★具體做法：點(diǎn)選“Insert Interactive Images Flash Button”就可看到有那些內置按鈕。在對話(huà)框內甚至可以用鼠標指到想要使用的按鈕形式，然后看看在瀏覽器里的效果如何。用鼠標指針把要用的按鈕形式選定，再依順序輸入參數，例如按鈕上的文字、字形、顏色、超鏈接等，或是自設文件名字。按下OK。接下來(lái)就會(huì )有一個(gè)“SWF”格式的文件產(chǎn)生，文件并會(huì )自動(dòng)導入你的網(wǎng)頁(yè)中。按一下這個(gè)做好的文件，會(huì )看到“Property Inspector”（屬性明細）中會(huì )顯示出文件的屬性。將文件屬性顯示出來(lái)時(shí)，如果擴展文件屬性明細表，會(huì )出現“Play”（播放），點(diǎn)選之后可以不用打開(kāi)瀏覽器來(lái)預覽按鈕的閃動(dòng)效果。

秘訣6：制作流動(dòng)文字

在網(wǎng)頁(yè)中增加流動(dòng)文字就像增加我們剛剛介紹的Flash按鈕一樣簡(jiǎn)單。相同地，不用安裝Flash，用 Dreamweaver提供的新功能就可以輕松辦到。常用HTML語(yǔ)法寫(xiě)網(wǎng)頁(yè)、沒(méi)有互動(dòng)式媒體經(jīng)驗的網(wǎng)頁(yè)制作者也可以輕松制作出小巧的Flash形式的流動(dòng)文字。這項新功能可以在不添加相兼容性麻煩的情況下為網(wǎng)頁(yè)增添一些瀏覽上與訪(fǎng)客的互動(dòng)性。 ★具體做法：點(diǎn)選“Insert Interactive Images Flash Text”，再將參數設置一一填入（例如要更改效果的文字、字形、字體顏色及字體大小等等）。

秘訣7：更改鍵盤(pán)快捷鍵

Dreamweaver可讓使用者自訂使用界面，這項設計十分有彈性。舉例來(lái)說(shuō)，使用者可以通過(guò)編寫(xiě)程序或自行增加物體（object）的方式來(lái)更改菜單。不必功力高深，你就可以更改鍵盤(pán)快捷鍵，因為Dreamweaver有一項叫做“Keyboard Shortcut Editor”的圖形界面。

★具體做法：只要點(diǎn)選“Edit Keyboard Shortcuts”，對話(huà)框將載入并欄出可以改動(dòng)的快捷鍵一覽表，讓你把快捷鍵改成自己習慣用的設置值。要改動(dòng)快捷鍵，只要使用現行設置（Current Set）和命令欄（Command）的下拉菜單，在現有的命令中找到想要更改的命令，接著(zhù)選取目前的快捷鍵，就會(huì )出現在快捷鍵的列表中。另外，如果要增加快捷鍵設置，可以點(diǎn)選“Plus”、在鍵盤(pán)上敲入你想使用的新快捷代表鍵，點(diǎn)選“改變”（Change）即可。同時(shí)你也可以選取某快捷鍵、點(diǎn)選“移除”（Minus），就可以移除某個(gè)快捷鍵。

秘訣8：重新設置網(wǎng)站窗口（Site window）欄

★具體做法：只要從“Site window”中點(diǎn)選“View File View Columns”，就可以自字查看網(wǎng)站（Site view）欄的大小及出現方式。選取某一欄的名稱(chēng)，使用上下箭頭重新調整，或不要勾選顯示欄（Show field）以隱藏該欄。另外，點(diǎn)選“Plus”鈕也可以新增欄，并自創(chuàng )欄名。此外，你也可以在下拉式菜單中選擇現有的“note”來(lái)將欄和“Design Note”產(chǎn)生關(guān)聯(lián)。

秘訣9：查看網(wǎng)頁(yè)原代碼

★具體做法：當你打開(kāi)“Reilly Code Reference”（Window Reference）來(lái)檢查屬性或是瀏覽器的兼容性時(shí)，預設的窗口會(huì )以細小的字型顯示出“參考設置值”。但是如果你按下窗口右上方的右鍵（就在關(guān)閉按鈕的下方），就會(huì )出現一排下拉式菜單，可以在這邊選擇原始代碼字體的大?。ㄐ⌒妥值街行妥煮w以及大型字體）。選擇大型字體比較不會(huì )“虐待”眼睛，因為這樣你看HTML原代碼時(shí)就不用拿著(zhù)放大鏡看屏幕了。

秘訣10：新增Flash按鈕

秘訣5中，我們介紹如何用20種預設的按鈕類(lèi)型，來(lái)制作Dreamweaver里的Flash按鈕。這是不用另外安裝任何文件或程序的方法。下面有另一種方法，就是安裝“Fireworks buttons”，這種擴充功能和秘訣5有相同的效果。

★具體做法：到 “Exchange for Dreamweaver”（Dreamweaver 擴充功能交換中心） ，輸入“InstaGraphics Extensions for Dreamweaver”的關(guān)鍵字搜尋，然后再下載這個(gè)大約577K 的文件。轉換到Dreamweaver，選擇“Commands Manage Extensions”，再選擇“File Install Extension”，就可以開(kāi)始安裝。一旦重新啟動(dòng) “Dreamweaver”，就有六個(gè)新奇有趣的按鈕格式，包括“Surfboard”及“Bulletbar”在內， 這時(shí)只要使用“Insert Interactive Images Fireworks Button”命令，就可以制作出一個(gè)酷炫的按鈕。你也可以用“commands Convert Bullets To Images”及 “Commands Convert Text To Images”，上述兩種方法都可以自動(dòng)執行“Fireworks”。

秘訣11：在網(wǎng)頁(yè)中加入“設置成我的最?lèi)?ài)”功能

★具體做法：在“Exchange”里搜尋，你就可以發(fā)現“Add To Favorites”的擴充功能。這個(gè)小小的文件才占3K，下載時(shí)間不會(huì )等太久，接著(zhù)循相同步驟，由“Extension Manager”載入（Commands Manage Extensions、File Install Extension）。接著(zhù)重新啟動(dòng) Dreamweaver，這個(gè)新載入的擴充文件會(huì )在 Dreamweaver里新增一項功能。如果你的網(wǎng)頁(yè)中加入這個(gè)“加入我的收藏集”的功能，這樣一來(lái)使用者看到你的網(wǎng)站時(shí)，輕輕一按，就可以輕易地將你的網(wǎng)站加入他使用瀏覽器的“我的最?lèi)?ài)”（或是個(gè)人書(shū)簽）。此外，最炫的是也可以自訂“我的最?lèi)?ài)”名稱(chēng)，以及“我的最?lèi)?ài)”名稱(chēng)前會(huì )出現的小圖示（一般IE中“我的最?lèi)?ài)”前面的小圖示都是IE的預設值，如果你有自己設計的小圖示，那就炫多了）。注意，這項功能只支持用 IE 4.0以及更高版本的瀏覽器。只要選擇“Windows”菜單里的“Behavior”面板，再到IE功能下拉菜單點(diǎn)選此項功能，即可輕松啟動(dòng)此酷炫功能。

秘訣12：超酷的圖表

如果你想制作表格，還要自己花時(shí)間再逐字編寫(xiě)網(wǎng)頁(yè)原代碼嗎？不需要了，已經(jīng)有現成的了！

★具體做法：到Exchange下載“Form Builder extension”，就有現成的表格，可讓你馬上復制包含像：國家、性別、婚姻狀況、年齡層及其他目錄等的表格。到Exchange下載這個(gè)小巧（只有11K）的文件，然后由“Extension Manager”安裝進(jìn)來(lái)（Commands Manage Extensions, File Install Extension）。接著(zhù)只要重新啟動(dòng) Dreamweaver，點(diǎn)選“Insert FormBuilder”，就會(huì )在（Insert FormBuilder）中發(fā)現擴充功能。點(diǎn)選了之后這時(shí)會(huì )有一個(gè)對話(huà)框出現，會(huì )顯示出所有可以套用的格式菜單，實(shí)在非常方便。