DreamWeaver操作技巧大全(16條技能)

2024-09-04 21:28:28

字體：大中小

來源：轉載

供稿：網友

點評：DreamWeaver是著名的網站開發工具，本文整理了一些其相關操作技巧，對于大家的學習會有所幫助，從事網頁愛好者的朋友可以學習下，希望對大家有所幫助

原本由Macromedia公司所開發的著名網站開發工具。它使用所見即所得的接口，亦有HTML編輯的功能。它現在有Mac和Windows系統的版本。隨Macromedia被Adobe收購后，Adobe也開始計劃開發Linux版本的Dreamweaver了。 Dreamweaver自MX版本開始，使用了Opera的排版引擎"Presto" 作為網頁預覽。

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進制代碼，真方便。

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”選項，然后在方框中輸入自己的文字，例如“歡迎來到我的主頁”等，單擊“確定”即可。

上一篇：Dreamweaver、Notepad++ 代碼配色(提高自身代碼閱讀能力)

下一篇：如何在Dreamweaver cs6 中設置默認文檔格式為html5