一、背景分析

　　對(duì)想要在視覺(jué)化環(huán)境下制作復(fù)雜網(wǎng)頁(yè)的專業(yè)網(wǎng)頁(yè)制作者來(lái)說(shuō)，dreamweaver已經(jīng)漸漸在網(wǎng)頁(yè)編輯工具中展露頭角，成為專業(yè)人士編寫網(wǎng)頁(yè)的最佳選擇。根據(jù)macromedia公司的調(diào)查，dreamweaver目前已累積有超過(guò)七十萬(wàn)名的使用者，占有率在網(wǎng)頁(yè)編輯工具中居冠，像“adobe golive”和“netobjects fusion”等競(jìng)爭(zhēng)者都被遙遙拋在后頭。因此一般地預(yù)估dreamweaver的使用群體將會(huì)持續(xù)的增加。

　　在這種勢(shì)不可擋的普及率席卷之下，可想而知dreamweaver內(nèi)置的功能可說(shuō)是越來(lái)越多、越來(lái)越豐富、齊全。在這次我們的介紹中，就有新增一些功能提供網(wǎng)頁(yè)制作者一些更快速的設(shè)計(jì)、更輕易地編碼及整合性更強(qiáng)的功能。事不宜遲，以下我們介紹如何善用dreamweaver里的一些功能。以下密技共有十二項(xiàng)，可分成四個(gè)主題。分別是：設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面(dreamweaver里具有彈性的頁(yè)面設(shè)計(jì)功能)、搭配macromedia其它產(chǎn)品一起使用dreamweaver(制作動(dòng)畫和圖片不求人)、自訂使用界面(享受個(gè)性化的使用經(jīng)驗(yàn))和最后的加入dreamweaver擴(kuò)充程序(在網(wǎng)頁(yè)中載入擴(kuò)充高級(jí)功能)。

　　二、設(shè)計(jì)網(wǎng)頁(yè)頁(yè)面的秘訣

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

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

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

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

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

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

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

　　秘訣3：制作彈出式菜單導(dǎo)航系統(tǒng)

　　原本要制作彈出式菜單導(dǎo)航系統(tǒng)(pop-up menu navigation system)要用到很多的一些java script的語(yǔ)法和技巧，但是假如你有dreamweaver、fireworks studio，即可輕輕松松快速辦到。

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

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

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

　　★具體做法：在標(biāo)準(zhǔn)窗口里選擇要進(jìn)行修改的圖片，然后在“property inspector”里點(diǎn)選“編輯”(edit)。假如你安裝的dreamweaver里附有“fireworks”，“fireworks”就是dreamweaver預(yù)設(shè)圖片編輯器，這時(shí)圖片就會(huì)自動(dòng)載入到“fireworks”。(假如仔細(xì)看，你會(huì)發(fā)現(xiàn)fireworks的畫面會(huì)出現(xiàn)“editing from dreamweaver”這樣的文字和圖樣，指示你可以在dreamweaver里進(jìn)行圖片編輯。)好了，現(xiàn)在在“fireworks”里點(diǎn)選要編輯的圖片，選擇“ modify animate animate selection”。 接下來(lái)完成“animate dialog box”里的設(shè)置，選定動(dòng)畫的幀數(shù)，動(dòng)畫移動(dòng)的方向、透明度等等設(shè)置。你也可以點(diǎn)選“frames”工具設(shè)置移動(dòng)速度，選擇“object”面板來(lái)改變?cè)O(shè)置。要導(dǎo)出文件時(shí)，只要點(diǎn)選“ optimize ”工具欄，在文件類型的地方選擇“animated gif”。完成以后，“fireworks”就會(huì)自動(dòng)將圖片以最佳化設(shè)置導(dǎo)出，并且自動(dòng)將 gif 圖片更新，還會(huì)在dreamweaver里將更新過(guò)的圖片顯示出來(lái)。點(diǎn)選“file preview in browser”，這樣就可以在瀏覽器里預(yù)覽剛剛制作完成的可愛(ài)圖片。

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

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

　　★具體做法：點(diǎn)選“insert interactive images flash button”就可看到有那些內(nèi)置按鈕。在對(duì)話框內(nèi)甚至可以用鼠標(biāo)指到想要使用的按鈕形式，然后看看在瀏覽器里的效果如何。用鼠標(biāo)指針把要用的按鈕形式選定，再依順序輸入?yún)?shù)，例如按鈕上的文字、字形、顏色、超鏈接等，或是自設(shè)文件名字。按下ok。接下來(lái)就會(huì)有一個(gè)“swf”格式的文件產(chǎn)生，文件并會(huì)自動(dòng)導(dǎo)入你的網(wǎng)頁(yè)中。按一下這個(gè)做好的文件，會(huì)看到“property inspector”(屬性明細(xì))中會(huì)顯示出文件的屬性。將文件屬性顯示出來(lái)時(shí)，假如擴(kuò)展文件屬性明細(xì)表，會(huì)出現(xiàn)“play”(播放)，點(diǎn)選之后可以不用打開瀏覽器來(lái)預(yù)覽按鈕的閃動(dòng)效果。

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

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

　　秘訣7：更改鍵盤快捷鍵　

　　dreamweaver可讓使用者自訂使用界面，這項(xiàng)設(shè)計(jì)十分有彈性。舉例來(lái)說(shuō)，使用者可以通過(guò)編寫程序或自行增加物體(object)的方式來(lái)更改菜單。不必功力高深，你就可以更改鍵盤快捷鍵，因?yàn)閐reamweaver有一項(xiàng)叫做“keyboard shortcut editor”的圖形界面。

　　★具體做法：只要點(diǎn)選“edit keyboard shortcuts”，對(duì)話框?qū)⑤d入并欄出可以改動(dòng)的快捷鍵一覽表，讓你把快捷鍵改成自己習(xí)慣用的設(shè)置值。要改動(dòng)快捷鍵，只要使用現(xiàn)行設(shè)置(current set)和命令欄(command)的下拉菜單，在現(xiàn)有的命令中找到想要更改的命令，接著選取目前的快捷鍵，就會(huì)出現(xiàn)在快捷鍵的列表中。另外，假如要增加快捷鍵設(shè)置，可以點(diǎn)選“plus”、在鍵盤上敲入你想使用的新快捷代表鍵，點(diǎn)選“改變”(change)即可。同時(shí)你也可以選取某快捷鍵、點(diǎn)選“移除”(minus)，就可以移除某個(gè)快捷鍵。

　　秘訣8：重新設(shè)置網(wǎng)站窗口(site window)欄

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

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

　　★具體做法：當(dāng)你打開“reilly code reference”(window reference)來(lái)檢查屬性或是瀏覽器的兼容性時(shí)，預(yù)設(shè)的窗口會(huì)以細(xì)小的字型顯示出“參考設(shè)置值”。但是假如你按下窗口右上方的右鍵(就在關(guān)閉按鈕的下方)，就會(huì)出現(xiàn)一排下拉式菜單，可以在這邊選擇原始代碼字體的大小(小型字到中型字體以及大型字體)。選擇大型字體比較不會(huì)“虐待”眼睛，因?yàn)檫@樣你看html原代碼時(shí)就不用拿著放大鏡看屏幕了。

　　秘訣10：新增flash按鈕

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

　　★具體做法：到 “exchange for dreamweaver”(dreamweaver 擴(kuò)充功能交換中心) ，輸入“instagraphics extensions for dreamweaver”的要害字搜尋，然后再下載這個(gè)大約577k 的文件。轉(zhuǎn)換到dreamweaver，選擇“commands manage extensions”，再選擇“file install extension”，就可以開始安裝。一旦重新啟動(dòng) “dreamweaver”，就有六個(gè)新奇有趣的按鈕格式，包括“surfboard”及“bulletbar”在內(nèi)，這時(shí)只要使用“insert interactive images fireworks button”命令，就可以制作出一個(gè)酷炫的按鈕。你也可以用“commands convert bullets to images”及 “commands convert text to images”，上述兩種方法都可以自動(dòng)執(zhí)行“fireworks”。

　　秘訣11：在網(wǎng)頁(yè)中加入“設(shè)置成我的最愛(ài)”功能 ★具體做法：在“exchange”里搜尋，你就可以發(fā)現(xiàn)“add to favorites”的擴(kuò)充功能。這個(gè)小小的文件才占3k，下載時(shí)間不會(huì)等太久，接著循相同步驟，由“extension manager”載入(commands manage extensions、file install extension)。接著重新啟動(dòng) dreamweaver，這個(gè)新載入的擴(kuò)充文件會(huì)在 dreamweaver里新增一項(xiàng)功能。假如你的網(wǎng)頁(yè)中加入這個(gè)“加入我的收藏集”的功能，這樣一來(lái)使用者看到你的網(wǎng)站時(shí)，輕輕一按，就可以輕易地將你的網(wǎng)站加入他使用瀏覽器的“我的最愛(ài)”(或是個(gè)人書簽)。此外，最炫的是也可以自訂“我的最愛(ài)”名稱，以及“我的最愛(ài)”名稱前會(huì)出現(xiàn)的小圖示(一般ie中“我的最愛(ài)”前面的小圖示都是ie的預(yù)設(shè)值，假如你有自己設(shè)計(jì)的小圖示，那就炫多了)。注重，這項(xiàng)功能只支持用 ie 4.0以及更高版本的瀏覽器。只要選擇“windows”菜單里的“behavior”面板，再到ie功能下拉菜單點(diǎn)選此項(xiàng)功能，即可輕松啟動(dòng)此酷炫功能。|||

　　秘訣12：超酷的圖表

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

　　★具體做法：到exchange下載“form builder extension”，就有現(xiàn)成的表格，可讓你馬上復(fù)制包含像：國(guó)家、性別、婚姻狀況、年齡層及其他目錄等的表格。到exchange下載這個(gè)小巧(只有11k)的文件，然后由“extension manager”安裝進(jìn)來(lái)(commands manage extensions, file install extension)。接著只要重新啟動(dòng) dreamweaver，點(diǎn)選“insert formbuilder”，就會(huì)在(insert formbuilder)中發(fā)現(xiàn)擴(kuò)充功能。點(diǎn)選了之后這時(shí)會(huì)有一個(gè)對(duì)話框出現(xiàn)，會(huì)顯示出所有可以套用的格式菜單，實(shí)在非常方便。