有些網(wǎng)頁(yè)開(kāi)發(fā)者稱(chēng)以下要介紹的這種技巧為 liquid，我在這兒則把這種技巧叫做是 stretchy(彈性延伸的技巧)。這是一種技巧，可在訪(fǎng)客瀏覽器窗口大小改變時(shí)也隨之調(diào)整網(wǎng)頁(yè)頁(yè)面大小，因此若是窗口過(guò)大就不會(huì)有空白處、窗口過(guò)小邊緣就不會(huì)跑出上下移動(dòng)的拉Bar。其實(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 或是用，頁(yè)面大小都會(huì)固定而不會(huì)跑掉。用 Dreamweaver 4.0 可以輕而易舉的設(shè)計(jì)出會(huì)自動(dòng)彈性調(diào)整的網(wǎng)頁(yè)。要怎么做呢?

2. 讓按鈕有閃動(dòng)效果

　　在 Dreamweaver中，不用有 Flash 程序，也可以制作有閃動(dòng)效果的 Flash 按鈕對(duì)象。 4.0 版內(nèi)建有好幾個(gè) Flash 按鈕對(duì)象，可以制作好幾個(gè)不同形式的按鈕。選擇 Insert ·Interactive Images ·Flash Button 就可看到有哪些內(nèi)建按鈕。在對(duì)話(huà)框內(nèi)甚至可以用鼠標(biāo)指到想要使用的按鈕形式，然后看看在瀏覽器里的效果如何。用鼠標(biāo)光標(biāo)把要用的按鈕形式選起來(lái)，再依序輸入?yún)?shù)，例如按鈕上的文字、字形、顏色、連結(jié)等，或是自定文件名稱(chēng)。按 下OK。接下來(lái)就會(huì)有一個(gè) SWF 檔產(chǎn)生，檔案并會(huì)自動(dòng)置入你的網(wǎng)頁(yè)中。按一下這個(gè)做好的檔案，會(huì)看到 Property Inspector (屬性明細(xì))中會(huì)秀出檔案的屬性。將檔案屬性秀出來(lái)時(shí)，如果擴(kuò)展檔案屬性明細(xì)表，會(huì)出現(xiàn) Play (播放)鈕，選擇之后可以不用開(kāi)啟瀏覽器來(lái)預(yù)視按鈕的閃動(dòng)效果。

3. 制作流動(dòng)文字

　　在網(wǎng)頁(yè)中增加 流動(dòng)文字就像增加我剛剛介紹的 Flash 按鈕一樣簡(jiǎn)單。相同地，不用安裝 Flash，用 Dreamweaver 4.0 提供的新功能就可以輕松辦到。常用 HTML 語(yǔ)法寫(xiě)網(wǎng)頁(yè)、沒(méi)有交互式媒體經(jīng)驗(yàn)的網(wǎng)頁(yè)制作者也可以輕松制作出小巧的 Flash 形式的流動(dòng)文字。根據(jù) Macromedia 表示，有97%的網(wǎng)絡(luò)使用者可以觀看有 Flash 效果的網(wǎng)頁(yè)，因此這項(xiàng)新功能可以在不添加兼容性麻煩的情況下為網(wǎng)頁(yè)增添一些瀏覽上與讀者的互動(dòng)性。選擇Insert ·Interactive Images ·Flash Text，再將偏好設(shè)定一一填入

4. 創(chuàng)造個(gè)性化調(diào)色盤(pán)

　　Dreamweaver 4.0 新的 Assets panel(屬性控制面板)是一種可以在編輯網(wǎng)站時(shí)根據(jù)檔案型態(tài)，例如圖片、樣板等來(lái)管理檔案的新工具，當(dāng)你定義新站臺(tái)時(shí)(選擇Site · New Site)，所有類(lèi)型的組件會(huì)自動(dòng)增加到 Asset panel 里的適當(dāng)表框中。這個(gè)加入新的Assets panel屬性控制面版里也有顏色框，儲(chǔ)存你網(wǎng)站里所用到的所有色彩，包含文字的顏色、背景的顏色，以及連結(jié)的顏色等。這是一個(gè)為使用者量身定做的網(wǎng)站導(dǎo)向顏色盤(pán)。只要激活 Assets panel (先選擇 Window · 再選擇 Assets)，接著選擇左方那個(gè)小小的色彩滾動(dòng)條，就可以看到你網(wǎng)站里各式各樣的顏色選項(xiàng)。當(dāng)然你可以將這些顏色拉到某些特定選取的文字中。甚至當(dāng)你選擇某種顏色時(shí)，畫(huà)面上會(huì)出現(xiàn)這種顏色的十六進(jìn)制值的色彩濃淡度，和三色對(duì)應(yīng)碼(RGB)。如果想將調(diào)色盤(pán)工具列縮小一點(diǎn)，甚至可以?xún)H加入某些顏色到調(diào)色盤(pán)的收藏夾里。只需將選取的顏色反白、選擇窗口里一個(gè)叫做「添加到我的收藏夾」按鈕(最下方靠右的按鈕)，就完成了。

5. 制作彈出式選單導(dǎo)覽系統(tǒng)

　　原本要制作彈出式選單導(dǎo)覽系統(tǒng)(Pop-up Menu Navigation System)要用到好一些 JavaScript 的語(yǔ)法技巧，但是若你裝了Dreamweaver/Fireworks Studio，輕輕松松即可快速辦到。首先在 Fireworks 里開(kāi)始，選擇某個(gè)圖片， 然后在 Set Pop-Up Menu的對(duì)話(huà)框里選擇 Insert· Pop-Up Menu，你可以輸入項(xiàng)目(items)的名稱(chēng)并選擇 Plus (加入)按鈕，來(lái)新增該項(xiàng)目。你可以繼續(xù)在跳出來(lái)的訊息框里進(jìn)行細(xì)項(xiàng)設(shè)定，例如設(shè)定該項(xiàng)目所要用的文字及連結(jié)，當(dāng)然也可以新增子選單、并重新安排下一層的設(shè)定。完成時(shí)，選擇 Next (下一步)，繼續(xù)設(shè)定偏好值，例如顏色、字體等等。這時(shí)選單完成后，可以預(yù)覽 HTML 語(yǔ)法，也可預(yù)覽影像。再選擇 Finish (完成)。這時(shí)當(dāng)鼠標(biāo)移動(dòng)到原來(lái)的圖案時(shí)，會(huì)出現(xiàn)選單系統(tǒng)的內(nèi)容一覽。 接著將制作好的檔案匯出時(shí)， Fireworks 會(huì)自動(dòng)生產(chǎn)出所有 Dreamweaver 需要用到的 HTML、JavaScript，以及影像檔案。

6. 讓圖檔動(dòng)起來(lái)!

　　如果你同時(shí)安裝有 Dreamweaver/Fireworks Studio，這兩種產(chǎn)品搭配的完美程度將使你贊不絕口。即使你不是專(zhuān)業(yè)的圖檔設(shè)計(jì)者，在設(shè)計(jì)網(wǎng)頁(yè)時(shí)也多多少少想把一些 GIF 圖片文件修改得活靈活現(xiàn)。Dreamweaver 可以讓你制作動(dòng)畫(huà)不求人喔!在標(biāo)準(zhǔn)窗口里選擇要進(jìn)行修改的圖片，然后在 Property Inspector 里選擇編輯鈕(Edit)。如果你安裝的 Dreamweaver里附有 Fireworks， Fireworks 就是 Dreamweaver 預(yù)設(shè)圖片編輯器，這時(shí)圖片就會(huì)自動(dòng)加載到 Fireworks。(若仔細(xì)看，各位會(huì)發(fā)現(xiàn) Fireworks 的畫(huà)面會(huì)出現(xiàn) Editing From Dreamweaver 這樣的文字和圖樣，指示你可以由Dreamweaver 里進(jìn)行圖片編輯。) 好了，現(xiàn)在在 Fireworks 里選擇要編輯的圖片，選擇 Modify ·Animate ·Animate Selection。 接下來(lái)完成 Animate dialog box 里的設(shè)定，選定動(dòng)畫(huà)的框架數(shù)，動(dòng)畫(huà)移動(dòng)的方向、透明度等等設(shè)定。你也可以選擇 Frames 工具列設(shè)定移動(dòng)速度，選擇 Object 面版來(lái)改變?cè)O(shè)定。要匯出檔案時(shí)，只要選擇 Optimize 工具列，在檔案類(lèi)型的地方選擇 Animated GIF。完成以后，F(xiàn)ireworks 就會(huì)自動(dòng)將圖片以最佳化設(shè)定匯出，并且自動(dòng)將 GIF 圖檔更新，還會(huì)在 Dreamweaver 里將更新過(guò)的圖檔秀出來(lái)。選擇 File ·Preview in Browser，這樣就可以在瀏覽器里預(yù)覽剛剛制作完成的可愛(ài)圖檔!