一、背景分析
對想要在視覺化環(huán)境下制作復(fù)雜網(wǎng)頁的專業(yè)網(wǎng)頁制作者來說,Dreamweaver已經(jīng)漸漸在網(wǎng)頁編輯工具中展露頭角,成為專業(yè)人士編寫網(wǎng)頁的最佳選擇。根據(jù)Macromedia公司的調(diào)查,Dreamweaver目前已累積有超過七十萬名的使用者,占有率在網(wǎng)頁編輯工具中居冠,像 “AdobeGoLive”和“NetObjects Fusion”等競爭者都被遙遙拋在后頭。因此一般地預(yù)估Dreamweaver的使用群體將會持續(xù)的增加。
在這種勢不可擋的普及率席卷之下,可想而知Dreamweaver內(nèi)置的功能可說是越來越多、越來越豐富、齊全。在這次我們的介紹中,就有新增一些功能提供網(wǎng)頁制作者一些更快速的設(shè)計、更容易地編碼及整合性更強(qiáng)的功能。事不宜遲,以下我們介紹如何善用Dreamweaver里的一些功能。以下密技共有十二項,可分成四個主題。分別是:設(shè)計網(wǎng)頁頁面(Dreamweaver里具有彈性的頁面設(shè)計功能)、搭配Macromedia其它產(chǎn)品一起使用 Dreamweaver(制作動畫和圖片不求人)、自訂使用界面(享受個性化的使用經(jīng)驗)和最后的加入Dreamweaver擴(kuò)充程序(在網(wǎng)頁中載入擴(kuò)充高級功能)。
二、設(shè)計網(wǎng)頁頁面的秘訣
1:讓網(wǎng)頁頁面大小更有彈性
有些網(wǎng)頁開發(fā)者稱以下要介紹的這種技巧為“liquid”,在這兒則把這種技巧叫做是“彈性延伸的技巧”。這是一種技巧,可在訪客瀏覽器窗口大小改變時也隨之調(diào)整網(wǎng)頁頁面大小,因此如果窗口過大就不會有空白處;窗口過小邊緣就不會跑出上下移動的拉條。其實大多數(shù)簡單的網(wǎng)頁會自己隨著瀏覽器窗口大小來調(diào)整頁面大小,但是如果是網(wǎng)頁里用到很多不同的框架及表格,網(wǎng)頁頁面大小就很難自動彈性地調(diào)整。通常網(wǎng)頁設(shè)計者會用混合運(yùn)用固定寬度的框架,和GIF圖片作為間隔來設(shè)計網(wǎng)頁頁面,這樣一來不論是用InternetExplorer或是用Netscape Navigator,頁面大小都會固定而不會跑掉。用Dreamweaver4.0可以輕而易舉的設(shè)計出會自動彈性調(diào)整的網(wǎng)頁。要怎么做呢?
2:創(chuàng)造個人調(diào)色板
Dreamweaver新的“Assetspanel”(屬性控制面板)是一種可以在編輯網(wǎng)站時根據(jù)文件格式,例如圖片、樣式等來管理文件的新工具。 ★具體做法:當(dāng)你定義新站點時(點選Site NewSite),所有類型的物體會自動增加到“Asset panel” 里的適當(dāng)表框中。這個新加入的“Assetspanel”屬性控制面板里也有顏色框,儲存你網(wǎng)站里所用到的所有色彩,包含文字的顏色、背景的顏色,以及超鏈接的顏色等。這是一個為使用者量身定做的網(wǎng)站導(dǎo)航顏色盤。只要啟動“Assetspanel”(先選“Window”再點“Assets”),接著點左方那個小小的色彩卷軸,就可以看到你網(wǎng)站里各式各樣的顏色選項。當(dāng)然你可以將這些顏色拉到某些特定選取的文字中。甚至當(dāng)你選擇某種顏色時,畫面上會出現(xiàn)這種顏色的十六進(jìn)位值的色彩淡濃度,和三原色對照碼(RGB)。如果想將調(diào)色板工具欄縮小一點,甚至可以僅加入某些顏色到調(diào)色板的“我的最愛”里。只需將選取的顏色反白、點選窗口里一個叫做“新增到我的最愛的”按鈕(最下方靠右的按鈕),就可以完成了。
3:制作彈出式菜單導(dǎo)航系統(tǒng)
原本要制作彈出式菜單導(dǎo)航系統(tǒng)(Pop-up Menu NavigationSystem)要用到很多的一些JavaScript的語法和技巧,但是如果你有Dreamweaver、Fireworks Studio,即可輕輕松松快速辦到。具體做法:首先在“Fireworks”里開始,選擇某個圖片,然后在“SetPop-Up Menu”的對話框里點選“ Insert Pop-UpMenu”,你可以輸入項目(items)的名稱并點“Plus”(加入)按鈕,來新增該項目。你可以繼續(xù)在跳出來的信息框里進(jìn)行細(xì)項設(shè)置,例如設(shè)置該項目所要用的文字及超鏈接,當(dāng)然也可以新增子菜單,并重新安排下一層的設(shè)置。完成時,點選“Next”(下一步),繼續(xù)設(shè)置各種參數(shù)值,例如顏色、字體等等。這時菜單完成后,既可以預(yù)覽HTML語法,也可預(yù)覽圖象。再點“Finish”(完成)。這時當(dāng)鼠標(biāo)移動到原來的圖片時,會出現(xiàn)菜單系統(tǒng)的內(nèi)容一覽。接著將制作好的文件導(dǎo)出時,“Fireworks”會自動生產(chǎn)出所有Dreamweaver 需要用到的HTML、JavaScript,以及圖象文件。
4:讓圖片動起來
如果你同時安裝有Dreamweaver、FireworksStudio,這兩種軟件搭配的完美程度將使你贊不絕口。即使你不是專業(yè)的圖片設(shè)計者,在設(shè)計網(wǎng)頁時也多多少少想把一些GIF圖片修改得活靈活現(xiàn)。Dreamweaver可以讓你制作動畫不求人。具體做法:在標(biāo)準(zhǔn)窗口里選擇要進(jìn)行修改的圖片,然后在“PropertyInspector”里點選“編輯”(Edit)。如果你安裝的Dreamweaver里附有“Fireworks”, “Fireworks”就是Dreamweaver預(yù)設(shè)圖片編輯器,這時圖片就會自動載入到“Fireworks”。(如果仔細(xì)看,你會發(fā)現(xiàn) Fireworks的畫面會出現(xiàn)“EditingFrom Dreamweaver”這樣的文字和圖樣,指示你可以在Dreamweaver里進(jìn)行圖片編輯。)好了,現(xiàn)在在“Fireworks”里點選要編輯的圖片,選擇“Modify Animate Animate Selection”。 接下來完成“Animate dialogbox”里的設(shè)置,選定動畫的幀數(shù),動畫移動的方向、透明度等等設(shè)置。你也可以點選“Frames”工具設(shè)置移動速度,選擇“Object” 面板來改變設(shè)置。要導(dǎo)出文件時,只要點選“Optimize ”工具欄,在文件類型的地方選擇“Animated GIF”。完成以后,“Fireworks”就會自動將圖片以最佳化設(shè)置導(dǎo)出,并且自動將 GIF圖片更新,還會在Dreamweaver里將更新過的圖片顯示出來。點選“File Preview inBrowser”,這樣就可以在瀏覽器里預(yù)覽剛剛制作完成的可愛圖片。
5:讓按鈕有閃動效果
在Dreamweaver中,不用有Flashs,也可以制作有閃動效果的Flash按鈕物體。Dreamweaver內(nèi)置有好幾個Flash按鈕物體,可以制作好幾個不同形式的按鈕。具體做法:點選“InsertInteractive Images FlashButton”就可看到有那些內(nèi)置按鈕。在對話框內(nèi)甚至可以用鼠標(biāo)指到想要使用的按鈕形式,然后看看在瀏覽器里的效果如何。用鼠標(biāo)指針把要用的按鈕形式選定,再依順序輸入?yún)?shù),例如按鈕上的文字、字形、顏色、超鏈接等,或是自設(shè)文件名字。按下OK。接下來就會有一個“SWF”格式的文件產(chǎn)生,文件并會自動導(dǎo)入你的網(wǎng)頁中。按一下這個做好的文件,會看到“PropertyInspector”(屬性明細(xì))中會顯示出文件的屬性。將文件屬性顯示出來時,如果擴(kuò)展文件屬性明細(xì)表,會出現(xiàn)“Play”(播放),點選之后可以不用打開瀏覽器來預(yù)覽按鈕的閃動效果。
6:制作流動文字
在網(wǎng)頁中增加流動文字就像增加我們剛剛介紹的Flash按鈕一樣簡單。相同地,不用安裝Flash,用 Dreamweaver提供的新功能就可以輕松辦到。常用HTML語法寫網(wǎng)頁、沒有互動式媒體經(jīng)驗的網(wǎng)頁制作者也可以輕松制作出小巧的Flash形式的流動文字。這項新功能可以在不添加相兼容性麻煩的情況下為網(wǎng)頁增添一些瀏覽上與訪客的互動性。具體做法:點選"InsertInteractive Images Flash Text”,再將參數(shù)設(shè)置一一填入(例如要更改效果的文字、字形、字體顏色及字體大小等等)。
7:更改鍵盤快捷鍵
Dreamweaver可讓使用者自訂使用界面,這項設(shè)計十分有彈性。舉例來說,使用者可以通過編寫程序或自行增加物體(object)的方式來更改菜單。不必功力高深,你就可以更改鍵盤快捷鍵,因為Dreamweaver有一項叫做“KeyboardShortcut Editor”的圖形界面。
具體做法:只要點選“Edit KeyboardShortcuts”,對話框?qū)⑤d入并欄出可以改動的快捷鍵一覽表,讓你把快捷鍵改成自己習(xí)慣用的設(shè)置值。要改動快捷鍵,只要使用現(xiàn)行設(shè)置(CurrentSet)和命令欄(Command)的下拉菜單,在現(xiàn)有的命令中找到想要更改的命令,接著選取目前的快捷鍵,就會出現(xiàn)在快捷鍵的列表中。另外,如果要增加快捷鍵設(shè)置,可以點選“Plus”、在鍵盤上敲入你想使用的新快捷代表鍵,點選“改變”(Change)即可。同時你也可以選取某快捷鍵、點選“移除”(Minus),就可以移除某個快捷鍵。
8:重新設(shè)置網(wǎng)站窗口(Site window)欄
只要從“Sitewindow”中點選“View File View Columns”,就可以自字查看網(wǎng)站(Siteview)欄的大小及出現(xiàn)方式。選取某一欄的名稱,使用上下箭頭重新調(diào)整,或不要勾選顯示欄(Showfield)以隱藏該欄。另外,點選“Plus”鈕也可以新增欄,并自創(chuàng)欄名。此外,你也可以在下拉式菜單中選擇現(xiàn)有的“note”來將欄和 “DesignNote”產(chǎn)生關(guān)聯(lián)。
9:查看網(wǎng)頁原代碼
當(dāng)你打開“Reilly CodeReference”(WindowReference)來檢查屬性或是瀏覽器的兼容性時,預(yù)設(shè)的窗口會以細(xì)小的字型顯示出“參考設(shè)置值”。但是如果你按下窗口右上方的右鍵(就在關(guān)閉按鈕的下方),就會出現(xiàn)一排下拉式菜單,可以在這邊選擇原始代碼字體的大?。ㄐ⌒妥值街行妥煮w以及大型字體)。選擇大型字體比較不會“虐待”眼睛,因為這樣你看HTML原代碼時就不用拿著放大鏡看屏幕了。
10:新增Flash按鈕
在5中,我們介紹如何用20種預(yù)設(shè)的按鈕類型,來制作Dreamweaver里的Flash按鈕。這是不用另外安裝任何文件或程序的方法。下面有另一種方法,就是安裝“Fireworksbuttons”,這種擴(kuò)充功能和秘訣5有相同的效果。具體做法:到 “Exchange forDreamweaver”(Dreamweaver 擴(kuò)充功能交換中心) ,輸入“InstaGraphics Extensions forDreamweaver”的關(guān)鍵字搜尋,然后再下載這個大約577K 的文件。轉(zhuǎn)換到Dreamweaver,選擇“Commands ManageExtensions”,再選擇“File Install Extension”,就可以開始安裝。一旦重新啟動“Dreamweaver”,就有六個新奇有趣的按鈕格式,包括“Surfboard”及 “Bulletbar”在內(nèi), 這時只要使用“InsertInteractive Images Fireworks Button”命令,就可以制作出一個酷炫的按鈕。你也可以用“commands ConvertBullets To Images”及 “Commands Convert Text To Images”,上述兩種方法都可以自動執(zhí)行“Fireworks”。
11:在網(wǎng)頁中加入“設(shè)置成我的最愛”功能★具體做法:在“Exchange”里搜尋,你就可以發(fā)現(xiàn)“AddTo Favorites”的擴(kuò)充功能。這個小小的文件才占3K,下載時間不會等太久,接著循相同步驟,由“Extension Manager”載入(CommandsManage Extensions、File Install Extension)。接著重新啟動 Dreamweaver,這個新載入的擴(kuò)充文件會在Dreamweaver里新增一項功能。如果你的網(wǎng)頁中加入這個“加入我的收藏集”的功能,這樣一來使用者看到你的網(wǎng)站時,輕輕一按,就可以輕易地將你的網(wǎng)站加入他使用瀏覽器的“我的最愛”(或是個人書簽)。此外,最炫的是也可以自訂“我的最愛”名稱,以及“我的最愛”名稱前會出現(xiàn)的小圖示(一般IE中“我的最愛”前面的小圖示都是IE的預(yù)設(shè)值,如果你有自己設(shè)計的小圖示,那就炫多了)。注意,這項功能只支持用IE 4.0以及更高版本的瀏覽器。只要選擇“Windows”菜單里的“Behavior”面板,再到IE功能下拉菜單點選此項功能,即可輕松啟動此酷炫功能。
12:超酷的圖表如果你想制作表格,還要自己花時間再逐字編寫網(wǎng)頁原代碼嗎?不需要了,已經(jīng)有現(xiàn)成的了!具體做法:到Exchange下載 “FormBuilderextension”,就有現(xiàn)成的表格,可讓你馬上復(fù)制包含像:國家、性別、婚姻狀況、年齡層及其他目錄等的表格。到 Exchange下載這個小巧(只有11K)的文件,然后由“ExtensionManager”安裝進(jìn)來(Commands Manage Extensions, File Install Extension)。接著只要重新啟動Dreamweaver,點選“Insert FormBuilder”,就會在(InsertFormBuilder)中發(fā)現(xiàn)擴(kuò)充功能。點選了之后這時會有一個對話框出現(xiàn),會顯示出所有可以套用的格式菜單,實在非常方便。