以目前的情況來說,Dreamweaver 內(nèi)建的功能可說是越作越多、越作越豐富、齊備。在這里我要向大家介紹的4.0版本中的一些應(yīng)用小技巧。
1. 讓網(wǎng)頁頁面更有彈性
有些網(wǎng)頁開發(fā)者稱以下要介紹的這種技巧為 liquid,我在這兒則把這種技巧叫做是 stretchy(彈性延伸的技巧)。這是一種技巧,可在訪客瀏覽器窗口大小改變時也隨之調(diào)整網(wǎng)頁頁面大小,因此若是窗口過大不會有空白處、窗口過小邊緣不會跑出上下移動的拉Bar。其實大多數(shù)簡單的網(wǎng)頁會自己隨著瀏覽器窗口大小來調(diào)整頁面大小,但是若是網(wǎng)頁里用到很多不同的框框及表格,網(wǎng)頁頁面大小很難自動彈性地調(diào)整。通常網(wǎng)頁設(shè)計者會用混合運用固定欄寬的框框,和 GIF 圖檔作為間隔, 來設(shè)計網(wǎng)頁頁面,這樣一來不論是用 Internet Explorer 或是用,頁面大小都會固定而不會跑掉。用 Dreamweaver 4.0 可以輕而易舉的設(shè)計出會自動彈性調(diào)整的網(wǎng)頁。要怎么做呢?
用工具面版(Object palette)上的按鈕開啟網(wǎng)頁,并且轉(zhuǎn)換到 格式檢視( Layout view)。這時可以看到文字方塊的列寬, 每一列的方框上方中間還有一個小小的下拉式箭頭 ,選擇想要設(shè)定彈性顯示的列上方的小箭頭,接著選擇「將列設(shè)為彈性顯示」( Make Column Autostretch)。 (設(shè)定自動調(diào)整列寬以一列為限)這時該列方框上方會出現(xiàn)一條波浪形的線,而不是原本表示列寬的數(shù)字。 Dreamweaver 會自動制作出固定版面的空格圖文件,這個空白圖文件是以列上方的兩個長條形的空白表格表示,如此版面會自動被填充,才會完成彈性版面設(shè)定。(在次增加空白圖文件時會跳出一個對話框問你是否要使用內(nèi)建圖檔,為求效果,我建議你讓 Dreamweaver 自動產(chǎn)生一個,不然不用使用空白圖文件來填充版面。)
2. 創(chuàng)造個性化調(diào)色盤
Dreamweaver 4.0 新的 Assets panel(屬性控制面板)是一種可以在編輯網(wǎng)站時根據(jù)檔案型態(tài),例如圖片、樣板等來管理檔案的新工具,當(dāng)你定義新站臺時(選擇Site · New Site),所有類型的組件會自動增加到 Asset panel 里的適當(dāng)表框中。這個加入新的Assets panel屬性控制面版里也有顏色框,儲存你網(wǎng)站里所用到的所有色彩,包含文字的顏色、背景的顏色,以及連結(jié)的顏色等。這是一個為使用者量身定做的網(wǎng)站導(dǎo)向顏色盤。只要 Assets panel (先選擇 Window · 再選擇 Assets),接著選擇左方那個小小的色彩滾動條,可以看到你網(wǎng)站里各式各樣的顏色選項。當(dāng)然你可以將這些顏色拉到某些特定選取的文字中。甚至當(dāng)你選擇某種顏色時,畫面上會出現(xiàn)這種顏色的十六進制值的色彩濃淡度,和三色對應(yīng)碼(RGB)。如果想將調(diào)色盤工具列縮小一點,甚至可以僅加入某些顏色到調(diào)色盤的收藏夾里。只需將選取的顏色反白、選擇窗口里一個叫做「添加到我的收藏夾」按鈕(最下方靠右的按鈕),完成了。
3. 制作彈出式選單導(dǎo)覽系統(tǒng)
原本要制作彈出式選單導(dǎo)覽系統(tǒng)(Pop-up Menu Navigation System)要用到好一些 JavaScript 的語法技巧,但是若你裝了Dreamweaver/Fireworks Studio,輕輕松松即可快速辦到。首先在 Fireworks 里開始,選擇某個圖片, 然后在 Set Pop-Up Menu的對話框里選擇 Insert· Pop-Up Menu,你可以輸入項目(items)的名稱并選擇 Plus (加入)按鈕,來新增該項目。你可以繼續(xù)在跳出來的訊息框里進行細(xì)項設(shè)定,例如設(shè)定該項目所要用的文字及連結(jié),當(dāng)然也可以新增子選單、并重新安排下一層的設(shè)定。完成時,選擇 Next (下一步),繼續(xù)設(shè)定偏好值,例如顏色、字體等等。這時選單完成后,可以預(yù)覽 HTML 語法,也可預(yù)覽影像。再選擇 Finish (完成)。這時當(dāng)鼠標(biāo)移動到原來的圖案時,會出現(xiàn)選單系統(tǒng)的內(nèi)容一覽。 接著將制作好的檔案匯出時, Fireworks 會自動生產(chǎn)出所有 Dreamweaver 需要用到的 HTML、JavaScript,以及影像檔案。
4. 讓圖檔動起來!
如果你同時安裝有 Dreamweaver/Fireworks Studio,這兩種產(chǎn)品搭配的完美程度將使你贊不絕口。即使你不是專業(yè)的圖檔設(shè)計者,在設(shè)計網(wǎng)頁時也多多少少想把一些 GIF 圖片文件修改得活靈活現(xiàn)。Dreamweaver 可以讓你制作動畫不求人喔!在標(biāo)準(zhǔn)窗口里選擇要進行修改的圖片,然后在 Property Inspector 里選擇編輯鈕(Edit)。如果你安裝的 Dreamweaver里附有 Fireworks, Fireworks 是 Dreamweaver 預(yù)設(shè)圖片編輯器,這時圖片會自動加載到 Fireworks。(若仔細(xì)看,各位會發(fā)現(xiàn) Fireworks 的畫面會出現(xiàn) Editing From Dreamweaver 這樣的文字和圖樣,指示你可以由Dreamweaver 里進行圖片編輯。) 好了,現(xiàn)在在 Fireworks 里選擇要編輯的圖片,選擇 Modify ·Animate ·Animate Selection。 接下來完成 Animate dialog box 里的設(shè)定,選定動畫的框架數(shù),動畫移動的方向、透明度等等設(shè)定。你也可以選擇 Frames 工具列設(shè)定移動速度,選擇 Object 面版來改變設(shè)定。要匯出檔案時,只要選擇 Optimize 工具列,在檔案類型的地方選擇 Animated GIF。完成以后,F(xiàn)ireworks 會自動將圖片以化設(shè)定匯出,并且自動將 GIF 圖檔更新,還會在 Dreamweaver 里將更新過的圖檔秀出來。選擇 File ·Preview in Browser,這樣可以在瀏覽器里預(yù)覽剛剛制作完成的可愛圖檔!
5. 讓按鈕有閃動效果
在 Dreamweaver中,不用有 Flash 程序,也可以制作有閃動效果的 Flash 按鈕對象。 4.0 版內(nèi)建有好幾個 Flash 按鈕對象,可以制作好幾個不同形式的按鈕。選擇 Insert ·Interactive Images ·Flash Button 可看到有哪些內(nèi)建按鈕。在對話框內(nèi)甚至可以用鼠標(biāo)指到想要使用的按鈕形式,然后看看在瀏覽器里的效果如何。用鼠標(biāo)光標(biāo)把要用的按鈕形式選起來,再依序輸入?yún)?shù),例如按鈕上的文字、字形、顏色、連結(jié)等,或是自定文件名稱。按 下OK。接下來會有一個 SWF 檔產(chǎn)生,檔案并會自動置入你的網(wǎng)頁中。按一下這個做好的檔案,會看到 Property Inspector (屬性明細(xì))中會秀出檔案的屬性。將檔案屬性秀出來時,如果擴展檔案屬性明細(xì)表,會出現(xiàn) Play (播放)鈕,選擇之后可以不用開啟瀏覽器來預(yù)視按鈕的閃動效果。
6. 制作流動文字
在網(wǎng)頁中增加 流動文字像增加我剛剛介紹的 Flash 按鈕一樣簡單。相同地,不用安裝 Flash,用 Dreamweaver 4.0 提供的新功能可以輕松辦到。常用 HTML 語法寫網(wǎng)頁、沒有交互式媒體經(jīng)驗的網(wǎng)頁制作者也可以輕松制作出小巧的 Flash 形式的流動文字。根據(jù) Macromedia 表示,有97%的網(wǎng)絡(luò)使用者可以觀看有 Flash 效果的網(wǎng)頁,因此這項新功能可以在不添加兼容性麻煩的情況下為網(wǎng)頁增添一些瀏覽上與讀者的互動性。選擇Insert ·Interactive Images ·Flash Text,再將偏好設(shè)定一一填入(例如要變更效果的文字、字形、字體顏色及字體大小等等)。