當前位置:才華齋>設計>網頁設計>

十二個Dreamweaver使用小祕訣

網頁設計 閱讀(5.79K)

導語:下面就由小編為大家介紹一下十二個Dreamweaver使用小祕訣,不管你是要運用HTML原始語法逐字逐字來編寫網頁,或是運用標準化視窗來進行網頁的視覺設計,以下的小祕訣都可以派得上用場!

十二個Dreamweaver使用小祕訣

祕訣1:讓網頁頁面大小更有彈性

有些網頁開發者稱以下要介紹的這種技巧為“liquid”,在這兒則把這種技巧叫做是“彈性延伸的技巧”。這是一種技巧,可在訪客瀏覽器視窗大小改變時也隨之調整網頁頁面大小,因此如果視窗過大就不會有空白處;視窗過小邊緣就不會跑出上下移動的拉條。其實大多數簡單的網頁會自己隨著瀏覽器視窗大小來調整頁面大小,但是如果是網頁裡用到很多不同的框架及表格,網頁頁面大小就很難自動彈性地調整。通常網頁設計者會用混合運用固定寬度的框架,和GIF圖片作為間隔來設計網頁頁面,這樣一來不論是用Internet Explorer或是用Netscape Navigator,頁面大小都會固定而不會跑掉。用Dreamweaver 4.0可以輕而易舉的設計出會自動彈性調整的網頁。要怎麼做呢?

具體做法:用工具面板(Object palette)上的按鈕開啟網頁,並且轉換到“格式檢視”(Layout view)。這時可以看到文字方塊的欄度,每一欄的方框上方中間還有一個小小的下拉式箭頭,點選想要設定彈性顯示的欄上方的小箭頭,接著選擇“將欄設為彈性顯示”(Make Column Autostretch)。(設定自動調整欄的寬度以一欄為限)這時該欄方框上方就會出現一條波浪形的線,而不是原本表示欄度的數字。Dreamweaver會自動製作出固定版面的空格圖片,這個空白圖片是以欄上方的兩個長條形的空白表格表示,如此版面會自動被填充,才會完成彈性版面設定。(在第一次增加空白圖片時會跳出一個對話方塊問你是否要使用內建圖片,為求效果,我們建議你讓Dreamweaver自動產生一個,不然就不用使用空白圖片來填充版面。)

祕訣2:創造個人調色盤

Dreamweaver新的“Assets panel”(屬性控制面板)是一種可以在編輯網站時根據檔案格式,例如圖片、樣式等來管理檔案的新工具。

具體做法:當你定義新站點時(點選Site New Site),所有型別的物體會自動增加到“Asset panel” 裡的適當表框中。這個新加入的“Assets panel”屬性控制面板裡也有顏色框,儲存你網站裡所用到的所有色彩,包含文字的顏色、背景的顏色,以及超連結的顏色等。這是一個為使用者量身定做的網站導航顏色盤。只要啟動“Assets panel”(先選 “Window”再點“Assets”),接著點左方那個小小的色彩卷軸,就可以看到你網站裡各式各樣的顏色選項。當然你可以將這些顏色拉到某些特定選取的文字中。甚至當你選擇某種顏色時,畫面上會出現這種顏色的十六進位值的色彩淡濃度,和三原色對照碼(RGB)。如果想將調色盤工具欄縮小一點,甚至可以僅加入某些顏色到調色盤的“我的最愛”裡。只需將選取的顏色反白、點選窗口裡一個叫做“新增到我的最愛的”按鈕(最下方靠右的按鈕),就可以完成了。

祕訣3:製作彈出式選單導航系統

原本要製作彈出式選單導航系統(Pop-up Menu Navigation System)要用到很多的一些java script的語法和技巧,但是如果你有Dreamweaver、Fireworks Studio,即可輕輕鬆鬆快速的辦到。

具體做法:首先在“Fireworks”裡開始,選擇某個圖片,然後在“Set Pop-Up Menu”的對話方塊裡點選“ Insert Pop-Up Menu”,你可以輸入專案(items)的名稱並點“Plus”(加入)按鈕,來新增該專案。你可以繼續在跳出來的資訊框裡進行細項設定,例如設定該專案所要用的文字及超連結,當然也可以新增子選單,並重新安排下一層的設定。完成時,點選“Next”(下一步),繼續設定各種引數值,例如顏色、字型等等。這時選單完成後,既可以預覽HTML語法,也可預覽圖象。再點“ Finish”(完成)。這時當滑鼠移動到原來的圖片時,會出現菜單系統的內容一覽。接著將製作好的檔案匯出時,“Fireworks”會自動生產出所有 Dreamweaver 需要用到的HTML、java script,以及圖象檔案。

祕訣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中,不用有Flashs,也可以製作有閃動效果的Flash按鈕物體。Dreamweaver內建有好幾個 Flash按鈕物體,可以製作好幾個不同形式的按鈕。

具體做法:點選“Insert Interactive Images Flash Button”就可看到有那些內建按鈕。在對話方塊內甚至可以用滑鼠指到想要使用的按鈕形式,然後看看在瀏覽器裡的效果如何。用滑鼠指標把要用的按鈕形式選定,再依順序輸入引數,例如按鈕上的文字、字形、顏色、超連結等,或是自設檔名字。按下OK。接下來就會有一個“SWF”格式的檔案產生,檔案並會自動匯入你的網頁中。按一下這個做好的檔案,會看到“Property Inspector”(屬性明細)中會顯示出檔案的屬性。將檔案屬性顯示出來時,如果擴充套件檔案屬性明細表,會出現“Play”(播放),點選之後可以不用開啟瀏覽器來預覽按鈕的閃動效果。

祕訣6:製作流動文字

在網頁中增加流動文字就像增加我們剛剛介紹的Flash按鈕一樣簡單。相同地,不用安裝Flash,用 Dreamweaver提供的新功能就可以輕鬆辦到。常用HTML語法寫網頁、沒有互動式媒體經驗的網頁製作者也可以輕鬆製作出小巧的Flash形式的流動文字。這項新功能可以在不新增相相容性麻煩的情況下為網頁增添一些瀏覽上與訪客的互動性。

具體做法:點選“Insert Interactive Images Flash Text”,再將引數設定一一填入(例如要更改效果的文字、字形、字型顏色及字型大小等等)。

祕訣7:更改鍵盤快捷鍵

Dreamweaver可讓使用者自訂使用介面,這項設計十分有彈性。舉例來說,使用者可以通過編寫程式或自行增加物體(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:檢視網頁原始碼

具體做法:當你開啟“Reilly Code Reference”(Window Reference)來檢查屬性或是瀏覽器的相容性時,預設的視窗會以細小的字型顯示出“參考設定值”。但是如果你按下視窗右上方的右鍵(就在關閉按鈕的下方),就會出現一排下拉式選單,可以在這邊選擇原始程式碼字型的大小(小型字到中型字型以及大型字型)。選擇大型字型比較不會“虐待”眼睛,因為這樣你看HTML原始碼時就不用拿著放大鏡看螢幕了。

祕訣10:新增Flash按鈕

祕訣5中,我們介紹如何用20種預設的按鈕型別,來製作Dreamweaver裡的Flash按鈕。這是不用另外安裝任何檔案或程式的方法。下面有另一種方法,就是安裝“Fireworks buttons”,這種擴充功能和祕訣5有相同的效果。

具體做法:到 “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的預設值,如果你有自己設計的小圖示,那就炫多了)。注意,這項功能只支援用 IE 4.0以及更高版本的瀏覽器。只要選擇“Windows”選單裡的“Behavior”面板,再到IE功能下拉選單點選此項功能,即可輕鬆啟動此酷炫功能。

祕訣12:超酷的圖表

如果你想製作表格,還要自己花時間再逐字編寫網頁原始碼嗎?不需要了,已經有現成的了!

具體做法:到Exchange下載“Form Builder extension”,就有現成的表格,可讓你馬上覆制包含像:國家、性別、婚姻狀況、年齡層及其他目錄等的表格。到Exchange下載這個小巧(只有11K)的檔案,然後由“Extension Manager”安裝進來(Commands Manage Extensions, File Install Extension)。接著只要重新啟動 Dreamweaver,點選“Insert FormBuilder”,就會在(Insert FormBuilder)中發現擴充功能。點選了之後這時會有一個對話框出現,會顯示出所有可以套用的格式選單,實在非常方便。