DreamWeaver超級技巧1

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

首先需要保證的是你的頁面內容採用了表格的格式,然後打開你要編輯的頁面,按“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進制代碼,真方便。