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

DreamWeaver技巧大全

網頁設計 閱讀(5.49K)

  1. 用Dreamweaver 4.0輕鬆設計會自動彈性調整的網頁

DreamWeaver技巧大全

首先需要保證的是你的頁面內容採用了表格的格式,然後開啟你要編輯的頁面,按“Ctrl+F6”或者選單“View→TableView→Layout?View”轉換到佈局檢視。這時可以看到單元格的列寬,在列寬數字的旁邊還有一個小小的下拉式箭頭,點選你要設定彈性顯示的列上方的小箭頭,接著選擇“將列設為彈性顯示”(Make Column Autostretch)。該列方框上方就會出現一條波浪形的線,而不是剛才表示列寬的數字。完成後你的頁面就變成了一個具有彈性的頁面了。此外,需要注意頁面中不要有尺寸過大的圖片。

  2. 用Dreamweaver 4.0製作有閃動效果的Flash按鈕

選擇選單Insert→Interactive?Images→Flash?Button就可看到有哪些內嵌按鈕。在彈出的對話方塊裡,你可以在“Style”列表裡選擇自己想要的按鈕樣式,在預覽(Sample)窗口裡可以看到這種樣式的效果如何。選擇好之後,在“Button?Text”視窗輸入按鈕上面的文字,在“Font”視窗選擇字型,在“Size”視窗輸入文字的大小,在“Link”視窗輸入連結的目標,在“Target”視窗選擇連結開啟的方式,在“BgColor”選擇按鈕背景顏色,在“Save?As”視窗輸入儲存的檔名。完成這些後,按下“OK”按鈕,你就完成了一個Flash按鈕啦。這個按鈕還會自動插入你的網頁中,然後在Dreamweaver編輯視窗選中你剛才製作的按鈕,屬性視窗就會顯示出這個按鈕的屬性,單擊上面的“Play”按鈕,你就可直接在編輯視窗預覽這個按鈕的閃動效果。需要注意的是Dreamweaver?4.0的這個功能不支援中文字型。

  3. 在Dreamweaver 4.0中自定義鍵盤快捷鍵

選擇選單“Edit→Keyboard?Shortcuts”,在對話方塊中會列出目前已經啟用的以及可以更改的快捷鍵一覽表,你可以在這裡把快捷鍵改成自己習慣用的。如果要更改快捷鍵,首先要選取你要更改的命令,接著選取目前的快捷鍵,這個快捷鍵就會出現在“Shortcuts”列表中,然後在“Press Key”視窗輸入你想要使用的快捷鍵,然後點選“Change”按鈕更改即可完畢。你還可以利用“+”、“-”按鈕增加或者刪除當前的快捷鍵。

  4. 讓Dreamweaver?4.0和Fireworks整合

如果你的電腦裡同時安裝了Dreamweaver/Fireworks,那麼你就可以使用Dreamweaver?4.0提供的整合Fireworks的功能。利用這個功能你可以把你的GIF圖片修改得更加動人,輕鬆地實現動畫效果。在Dreamweaver編輯視窗選擇好你要修改的GIF圖片,然後在圖片屬性視窗單擊“編輯(Edit)”按鈕,這時系統會自動啟動Fireworks軟體編輯這個圖片。仔細看,你會發現Fireworks的圖片編輯視窗已出現Editing?From?Dreamweaver這樣的文字和圖樣,也就是說這個圖片是為Dreamweaver頁面進行圖片編輯的。現在我們在Fireworks裡選擇要編輯的`圖片,選擇選單“Modify→Animate→Animate?Selection”。在彈出的窗口裡設定動畫的屬性:選定動畫的幀數、動畫移動的方向、透明度等等。然後把修改好的檔案匯出即可。這樣,在Dreamweaver編輯視窗會自動更新剛才修改好的檔案,使你的頁面圖片動起來。

  5. 巧用網站報告器

在Dreamweaver?4.0裡提供了一個網站報告器,利用這個網站報告器可以幫助你在你的網站眾多檔案中快速找到和修復錯誤。單擊選單“Site→Reports”即可啟動報告器,選擇你要檢查的專案,然後單擊“Run”按鈕即可查出你網站上的一般問題。你也可以自己編寫報告器來查出網站上的一些特殊問題 (一般問題通常是一些文字丟失或文件未命名) 。

  6. 快速恢復多次操作

在製作頁面時,我們可能需要不停地修改頁面,有時還要恢復過去的操作,我們可以使用“Edit”選單裡的“Undo”命令,可是這個命令每次只能恢復一次,如果我們需要恢復多次操作,那就要不停地“Undo”,實在太煩。在Dreamweaver?4.0裡提供了一個History視窗,可以讓我們輕鬆地恢復多次操作。在“Windows”選單裡選擇“History”即可開啟這個歷史視窗。在這個視窗把你每一次的操作都保留下來了,利用視窗左邊那個滑動指標,就可以不停地恢復,還可以撤銷每一次操作,包括已經存檔的。而且還可以把這個歷史紀錄儲存下來共享。

  7. 隱藏浮動面板

開啟Dreamweaver,給人的第一印象是一堆浮動面板,往往弄得你眼花繚亂,雖然它可以拖開,但畢竟佔據著本來就很有限的螢幕,若把它關閉了,等一下用它時又要去開啟。其實你只要按一下F4鍵,所有浮動面板都不見,再按F4他們又都重現於螢幕上了。

  8. 快速預覽網頁

初學Dreamweaver,往往找不到預覽選單,不得不另外啟動IE瀏覽器來預覽網頁的實際效果。其實Dreamweaver的預覽選單放到File選單下了,要預覽正在編輯的網頁,按F12鍵就可以了,方便得很呢!而且還可設定在不同的瀏覽器中預覽,在File選單下的Preview in Browser中選擇Edit Browser List就可選擇不同的瀏覽器進行預覽。以測試你的網頁對不同瀏覽器的適應性。

  9. 在HTML檢示窗中顯示行號和自動換行

雖然Dreamweaver的Behaviors是一個javascript小程式的巨集,許多實現特殊網頁效果的javascript程式都不用動手程式設計,但有時需要編寫一點小程式時,顯示程式行號顯得尤為必要,特別是在程式發生錯誤時,往往都有是提示在“XX行有錯誤”,若一行一行地去數行號不僅太累而且還容易數錯,在FrontPage中老是為數錯行號而煩惱。在Dreamweaver中可方便了,只要在HTML原始碼檢視器視窗中,選中“Line Numbers”(行號)複選框,則會在原始碼檢視器視窗中對每條HTML語句自動顯示行號,一目瞭然。同樣有時一行程式碼較長,只要在HTML原始碼檢視器視窗中,選中“Warp”(自動換行)複選框,則會啟用視窗的自動換行特性,過長的程式碼會自動從視窗的邊緣繞回。

  10. 如何獲得顏色的十六進位制程式碼

在設計網頁時,有時要用到16進位制的顏色程式碼,以前經常為這事頭痛,在Dreamweaver中只要按屬性面板上“bg”邊上小方框右下角的小三角形,在彈出的顏色板上,滑鼠指到哪兒,馬上就能顯示出相應顏色的16進位制程式碼,真方便。

  11. 製作背景音樂

在Dreamweaver中插入背景音樂是非常容易實現的,這裡介紹兩種方法,由大家選擇。

(1)在頁面不顯眼的地方插入一空層 ,並在層內放入一個ActivX物件 ,雙擊該物件,在開啟的對話方塊中選擇一個MIDI音樂檔案,然後在層物件屬性面板中設定其可視性為“Hidden”,儲存變動後按F12預覽網頁,聽聽是否有音樂聲。

(2)另一種方法是利用Dreamweaver的“Behaviors”行為編輯器 ,單擊“+”按鈕,選擇其中“Play Sound”選項,在彈出的對話方塊中選擇一個音樂檔案即可。

  12. 讓背景圖不滾動

與FrontPage不同,Dreamweaver中插入的背景圖是會隨文字滾動的。有的時候我們需要製作固定的背景圖,怎麼辦呢?先定義一張背景圖,按“F10”開啟HTML原始檔,找到定義背景圖片的語句,例如background=″images/background.JPG″,在它的後面空一格加上一句bgproperties=″fixed″。預覽一下,是不是有點小小的成就感。

  13. 定義大小不變的文字

為什麼別人網頁上的文字那麼漂亮,不管你怎麼按瀏覽器字型按鈕上的大小,他們的字型尺寸都不會發生變化。其實他們使用了網頁中的“CSS”樣式表技術,在Dreamweaver中要實現這一功能是非常簡單的。首先按“F7”或者選擇“視窗”選單中的“樣式表”選項開啟樣式表編輯器,在視窗中單擊滑鼠右鍵選擇“新建”,在彈出的對話方塊中輸入需要定義的樣式表名稱,按“確定”,然後在列表中選擇第一項“型別”,並給具體的文字屬性定義引數(一般來說文字的大小在800×600的螢幕中選擇10.5較為適宜),按“確定”後,定義好的樣式表就出現了。選擇網頁編輯窗中的文字,單擊新的樣式表名,可以看到選中的文字發生的變化。預覽一下,試試定義的文字字型尺寸還會不會隨瀏覽器的選擇字型大小而改變。

  14. 插入Flash動畫

Macromedia公司的Flash動畫因其具有互動性、傳送速度快等特點,已逐漸成為網頁製作的一項新武器,如果你的網頁上能插入一段Flash動畫,那麼一定會使你的作品增色不少。在Dreamweaver中插入Flash製作的SWF格式動畫十分容易,單擊物件工具欄上的Flash徽標或單擊的“媒體”下的“Flash”,就可以開啟選擇SWF動畫檔案的對話方塊了,選好檔案後可在其屬性面板中設定播放的引數,即大功告成。

  15. 讓表格給網頁留白

在Dreamweaver的新網頁上輸入文字時,預設格式是頂天立地的,十分不美觀。要避免這一缺憾其實很簡單,只要大家用好表格工具就行了。具體做法是:在新頁面上插入一張居中對齊的表格,為了能夠使表格方便控制,最好設定奇數列,並且數值不要太大。這樣在單元格內輸入的文字就被限制在一個可以隨意調整寬度的區域內,就不愁文字不聽使喚了。

 16. 改變狀態列提示文字

一般情況下,當瀏覽器裝入一個頁面時,在其狀態列上顯示的是該頁面的地址名稱,十分呆板。你有沒有想過給瀏覽器的狀態列增加一點個性呢?如果有的話,那麼請按照以下的步驟,定製自己喜歡的文字吧!首先開啟“Behaviors”行為編輯窗,單擊“+”按鈕,選擇“Set Text Set”下的“Text Of Status Bar”選項,然後在方框中輸入自己的文字,例如“歡迎來到我的主頁”等,單擊“確定”即可。