對於想要在視覺化的環境下製作複雜網頁的專業網頁製作者來說,Dreamweaver 已經漸漸在網頁編輯工具市場中展露頭角,成為專業人士編寫網頁的最佳選擇。以目前的情況來說,Dreamweaver 內建的功能可說是越作越多、越作越豐富、齊備。這裡我要向大家介紹的4.0版本中的一些應用小技巧。
1. 讓網頁頁面更有彈性有些網頁開發者稱以下要介紹的這種技巧為liquid,我在這裡則把這種技巧叫做是stretchy(彈性延伸的技巧)。這是一種技巧,可在訪客瀏覽器視窗大小改變時也隨之調整網頁頁面大小,因此若是視窗過大就不會有空白處、視窗過小邊緣就不會跑出上下移動的拉Bar。其實大多數簡單的網頁會自己隨著瀏覽器視窗大小來調整頁面大小,但是若是網頁裡用到很多不同的框框及表格,網頁頁面大小就很難自動彈性地調整。通常網頁設計者會用混合運用固定欄寬的框框,和GIF 圖檔作為間隔, 來設計網頁頁面,這樣一來不論是用Internet Explorer 或是用,頁面大小都會固定而不會跑掉。用Dreamweaver 4.0 可以輕鬆的設計出會自動彈性調整的網頁。要怎麼做呢?
用工具面版(Object palette)上的按鈕開啟網頁,並且轉換到格式檢視( Layout view)。這時可以看到文字方塊的列寬, 每一列的方框上方中間還有一個小小的下拉式箭頭,選擇想要設定彈性顯示的列上方的小箭頭,接著選擇「將列設為彈性顯示」( Make Column Autostretch)。 (設定自動調整列寬以一列為限)這時該列方框上方就會出現一條波浪形的線,而不是原本表示列寬的數字。 Dreamweaver 會自動製作出固定版面的空格圖文件,這個空白圖文件是以列上方的兩個長條形的空白表格表示,如此版面會自動被填充,才會完成彈性版面設定。 (第一次增加空白圖檔時會跳出對話方塊問你是否要使用內建圖檔,為求效果,我建議你讓Dreamweaver 自動產生一個,不然就不用使用空白圖檔來填滿版面。)
2. 創造個人化調色盤Dreamweaver 4.0 新的Assets panel(屬性控制面板)是一種可以在編輯網站時根據檔案型態,例如圖片、樣板等來管理檔案的新工具,當你定義新站台時(選擇Site · New Site),所有類型的元件會自動增加到Asset panel 裡的適當錶框。這個加入新的Assets panel屬性控制面版裡也有顏色框,儲存你網站裡所用到的所有色彩,包含文字的顏色、背景的顏色,以及連結的顏色等。這是一個為使用者量身定做的網站導向顏色盤。只要啟動Assets panel (先選擇Window · 再選擇Assets),接著選擇左方那個小小的色彩滾動條,就可以看到你網站裡各式各樣的顏色選項。當然你可以將這些顏色拉到某些特定選取的文字中。甚至當你選擇某種顏色時,畫面上會出現這種顏色的十六進制值的色彩濃淡度,和三色對應碼(RGB)。如果您想要將調色盤工具列縮小一點,甚至可以只加入某些顏色到調色盤的收藏夾裡。只要將選取的顏色反白、選擇視窗裡一個叫做「加入我的收藏夾」按鈕(最下方靠右的按鈕),就完成了。
3. 製作彈出式選單導覽系統原本要製作彈出式選單導覽系統(Pop-up Menu Navigation System)要用到好一些JavaScript 的語法技巧,但是若你裝了Dreamweaver/Fireworks Studio,輕輕鬆松即可快速辦到。先在Fireworks 開始,選擇某個圖片, 然後在Set Pop-Up Menu的對話框裡選擇Insert· Pop-Up Menu,你可以輸入項目(items)的名稱並選擇Plus (加入)按鈕,來新增該項目。你可以繼續在跳出來的訊息框裡進行細項設定,例如設定該項目所要用的文字及連結,當然也可以新增子選單、並重新安排下一層的設定。完成時,選擇Next (下一步),繼續設定偏好值,例如顏色、字體等等。此時選單完成後,可預覽HTML 語法,也可預覽影像。再選擇Finish (完成)。這時當滑鼠移到原來的圖案時,會出現選單系統的內容一覽。 接著將製作好的檔案匯出時, Fireworks 會自動生產所有Dreamweaver 需要用到的HTML、JavaScript,以及影像檔案。
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中,不用有Flash 程序,也可以製作有閃動效果的Flash 按鈕物件。 4.0 版內建有好幾個Flash 按鈕對象,可以製作好幾個不同形式的按鈕。選擇Insert ·Interactive Images ·Flash Button 就可以看到哪些內建按鈕。在對話方塊內甚至可以用滑鼠指向想要使用的按鈕形式,然後看看在瀏覽器裡的效果如何。用滑鼠遊標把要用的按鈕形式選起來,再依序輸入參數,例如按鈕上的文字、字形、顏色、連結等,或是自訂檔案名稱。按下OK。接下來就會有一個SWF 檔產生,檔案並會自動置入你的網頁中。點選這個做好的檔案,會看到Property Inspector (屬性明細)中會秀出檔案的屬性。將檔案屬性秀出來時,若擴充檔案屬性明細表,會出現Play (播放)鈕,選擇後可以不用開啟瀏覽器來預視按鈕的閃爍效果。
6. 製作行動文字在網頁中增加流動文字就像增加我剛剛介紹的Flash 按鈕一樣簡單。同樣地,不用安裝Flash,用Dreamweaver 4.0 提供的新功能就可以輕鬆辦到。常用HTML 語法寫網頁、沒有互動式媒體經驗的網頁製作者也可以輕鬆製作出小巧的Flash 形式的行動文字。根據Macromedia 表示,有97%的網路使用者可以觀看有Flash 效果的網頁,因此這項新功能可以在不添加相容性麻煩的情況下為網頁增添一些瀏覽上與讀者的互動性。選擇Insert ·Interactive Images ·Flash Text,然後將偏好設定一一填入(例如要變更效果的文字、字形、字體顏色及字體大小等等)。
7. 更改鍵盤快速鍵Dreamweaver 可讓使用者自定使用接口,這項設計十分有彈性。舉例來說,使用者可以透過撰寫程式(programming)或自行增加物件(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. 閱讀網頁原始檔當你開啟O'Reilly Code Reference(Window ·Reference)來檢查屬性或是瀏覽器的相容性時,預設的視窗會以細小的字體顯示出參考設定值。但是若你按下視窗右上方的右鍵鈕(就在關閉按鈕的下方),就會出現一排下拉式選單,可以在這邊選擇原始文件字體的大小(小型字,到中型字體以及大型字體) 。選擇大型字體比較不會虐待眼睛,因為這樣你看HTML 原始檔時就不用拿著放大鏡看螢幕了!
10. 新增Flash 按鈕在上面我已經教你如何用20種預設的按鈕類型,來製作Dreamweaver 裡的Flash 按鈕。這是不用另外安裝任何檔案或程序的方法。底下有另一個方法,就是安裝Fireworks buttons,這種擴充功能和技巧五有相同效果。到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 的默認值,如果你有自己設計的小圖標,那就酷多了。功能,即可輕鬆啟動此酷炫功能
。 Form Builder extension,就有現成的表格,可讓你馬上複製包含像國家、性別、婚姻狀況、年齡層及其它目錄等的字段表格。安裝進來(Commands ·Manage Extensions, File ·Install Extension)。 然接著只要重新啟動Dreamweaver,選擇Insert ·FormBuilder,就會在(Insert· FormBuilder )中發現擴充檔。 ,會秀出所有可以套用的格式選單。