Dreamweaver是由Macromedia公司出品的所見即所得式網頁編輯器，它同Microsoft出品的FrontPage一同被稱為網頁設計的兩大利器。至于說這兩種軟件孰優孰劣，那就是仁者見仁、智者見智了，我在這里也不好評論。但是根據我的觀察，專業的網頁制作人員似乎使用Dreamweaver的更多一些，大家明白我的意思了吧：）

　　現在Dreamweaver的最新版本是3.0。與以前的版本相比，Dreamweaver 3.0增加了許多全新的功能，如History、MetaNotes、HTML Style、Quick Tag Editor等。此外，Dreamweaver 3.0對一些新的技術如DHTML,JAVA也有了更好的支持。靈活的運用Dreamweave的各項功能，我們能創造出令人眼花繚亂的動態網頁。下面，我將制作通過一個實例，帶領大家熟悉Dreamweaver的各項功能。

　　首先，讓我們制作一個普通的圖文并茂的網頁（其實也就是有文字、有圖片就行了）。想大家這點還會做吧，我就不講了。什么？你不會！其實很簡單了，就跟使word一樣，直接往上敲字就行了，貼圖片用Insert -> Image就行了。

　　現在，我們就擁有了一個最簡單的網頁了。雖然它還是十分的簡陋，但我們已經走出了網頁設計的第一步。大家所做的第一個網頁也應該和這個差不多吧。接下來，我們將在這個網頁的基礎上增加其它的內容，使它看起來漂亮一些。

　　我們在做網頁的時候，是不是覺得排版十分的麻煩呢？為了對齊一篇文章或者一幅圖，我們往往要調整好多次。其實我們利用表格，就可以輕松的排版了。選擇Insert -> Table，彈出一個對話框。（如圖１）

　　輸入你想要的表格行數和列數。最重要的一點是要在Border處填0，這樣表格的邊框寬度將為0，換句話說，就是表格的邊框是隱藏不可見的。這樣，Dreamweaver生成了一個缺省大小的表格。我們調整表格的寬度和高度，并將一部分單元合并，使表格適應我們的要求。（如圖２）

　　接著，我們就可以在表格中填上我們想要的東西，而它們的位置都被限定在了表格單元里。因此，排版的困難也就迎刃而解了。讓我們看一下排版后的效果吧，是不是比較好看？（如圖3）

　　然而，雖然使用表格來進行排版比較方便，但它還有一定的不便之處：我們要事先把整個的頁面設計畫出來，然后統一的對表格位置進行安排；此外，當我們對頁面布局不滿意時，進行調整也是一件非常麻煩的工作。我們知道使用層能夠更方便、精確地定位頁面元素。所以，我們可以利用層來進行排版。對于不支持使用層的較低版本的瀏覽器，我們可以利用Dreamweaver提供的轉換工具，先用層來快速創建復雜頁面布局，然后再把層布局轉換成表格布局。需要時，也可以在層和表格之間來回轉換，以調整布局和優化頁面設計。

　 　　讓我們用層來重新設計我們的頁面。選擇Insert ->Layer創建三個層，然后將它們拖到合適的位置，并在其中插入相應的內容。另外，因為表格單元不能重疊，所以，Dreamweaver 不能把重疊的層轉換為表格。如果計劃把一個文檔中的層轉換為表格，以便與低版本（3.0及其以下版本）瀏覽器兼容，就要在建立、移動層和調整層大小時防止層發生重疊。我們可以選擇View -> Prevent Layer Overlaps來防止層的重疊。但有時候這一選項也不大管用，還需要我們手動把重疊的層分開。這可能是Dreamweaver的小Bug吧。（如圖4）

　　如上圖所示，我們用層設計好了的一個頁面布局。接著我們將它轉換為表格。選擇Modify -> Layout Mode -> Convert Layers to Table，彈出一個對話框。（如圖5）

　　對話框中各選項的作用說明如下：
Most Accurate（最精確）：為每一層建立一個表格單元，以及為保持層與層之間的間隔必須的附加單元格。
Smallest: Collapse Empty Cells（最小:壓縮空單元格）：指定如果幾個層被定位在指定像素數之內，這些層的邊緣應該對齊。選擇本項生成的表格的空行、空列最少。
Use Transparent GIFs（使用透明的GIF圖像）：用透明GIF圖像填充表格的最后一行。這樣可以確保表格在所有瀏覽器中的顯示相同。如果選擇本項，將不可能通過拖曳生成的表格的列來改變表格的大小。不選本項時，轉換成的表格中不包含透明GIF圖像，但在不同的瀏覽器中，它的外觀可能稍有不同。
Center on Page（在頁面上居中）：使生成的表格在頁面上居中對齊。如果不選本項，表格左對齊。
Prevent Layer Overlaps(防止層重疊)：選擇本項可防止層重疊。
Show Layer Palette（顯示層面板）：選擇本項，轉換完成后顯示層面板。
Show Grid（顯示網格）：選擇本項，在轉換完成后顯示網格。
Snap To Grid（吸附到網格）：選擇本項，啟用吸附到網格功能。

　　單擊OK，我們就將層布局頁面轉換為了表布局頁面。一般來說，Dreamweaver轉換出的表格有一些誤差，還需要我們自己手動調節一下。（如圖6）

　　怎么樣，效果還不錯吧。如果你需要把表格轉換為層，就選擇Modify -> Layout Mode -> Convert Tables To Layers，過程很簡單，我這里就不再說了。

　　我們利用層的特性，還可以制作出各種各樣的動態網頁特效。下面我將給大家講解一個利用層做出來的網頁特效：讓圖像動起來。我們在瀏覽網頁時，經常會發現有的網頁上的圖形會沿著一條路徑移動。這其實是最簡單的DHTML特效，我們利用Dreamweaver可以輕易的做出這種效果。下面，我們就讓網頁上那個可愛的小獅子動起來吧。

　　創建一個層Layer1，把它移動到合適的位置，然后把小獅子頭拖進層里面。接著，我們再創建一個層Layer2，在層里面填幾句話，然后把層的背景顏色定為白色。（如圖7）

　　選擇第一個層，然后選擇Modify -> Timeline -> Add Object to Timeline，彈出時間線面板。時間線面板表示層在時間上的屬性。拖動時間線上的關鍵幀記號，可以改變關鍵幀的位置。我們把結束幀的位置放到第20幀處。對另一個層我們也進行一樣的處理。（如圖8）

　　確定在Layer1的時間線被選定的情況下，將幀數指示條移到第15幀處，選擇Modify -> Timeline -> Add Keyframe，在這個位置增加一個關鍵幀。同樣的，對Layer2也作一樣的處理。（如圖9）

　　現在，我們為兩個層都創建了時間線，在每個時間線上有三個關鍵幀。接下來，我們就可以定義層在關鍵幀的位置了。在Layer1的時間線第一幀的位置點一下，然后拖動層左上角的把手，把它放在你滿意的位置。對Layer1的另外兩個關鍵幀，我們也作一樣的處理，將層放在合適的位置。對于Layer2，我們使它始終與Layer1重疊。當這些都做好之后，我們就可以在窗口之中看見層移動的路徑了。（如圖10）

　　接著，選擇處于第一幀位置的Layer2，將它的可視屬性改為Hidden（在屬性面板之中的vis選項）。因為瀏覽器默認的層的可視屬性是可見的，所以我們就不用定義其他位置的層的屬性了。這樣，我們就使Layer2 在第1到14幀時隱藏起來，在第15到20幀時顯示出來。

　　好了，現在我們已經建立好了一個動態網頁的例子。我們可以按住時間線面板上的播放按鈕，預覽頁面的動畫效果。如果要在瀏覽器中看到你做的效果，最好把時間線面板上的Autoplay和Loop選項選中，這樣動態效果可以在頁面調用時自動開始循環播放。怎么樣，按F12在瀏覽器中看一看我們自己做的動態效果吧。這只會說話的小獅子可不可愛？

　　現在，我們的小獅子雖然可以說話，但也只不過是顯示一段文字而已。你想不想讓它真的開口說話呢？只要利用Dreamweaver提供的Behaviors功能，我們就可以輕易的實現這個效果了。

　　一個Behaviors實際是一個javascript元素，它使對象可以進行交互。Behaviors是事件和動作的組合。當你添加一個Behaviors時，你要確定掛鉤在一個事件上的一個動作。

　　首先，讓我們來熟悉一下行為面板。選擇Window -> Behaviors，打開行為面板。其中的加號和減號按鈕用于增加和刪除行為；Event For列表框允許我們選擇不同的瀏覽器，Dreamweaver將根據我們的選擇從行為列表中剔除你從這個列表選擇的瀏覽器不能辨認的事件。下面的Event和Action列表則列出了你所定義在當前對象上的事件和行為。（如圖11）

　　單擊加號按鈕會彈出一個行為列表，當前可以使用的行為用黑色字體顯示，不能使用的行為則用灰色字體顯示。下面我為大家簡單介紹一下這些行為的功能。（如圖12）
Call javascript：調用一個寫好的javascript函數或者一行javascript語句
Change Property：改變對象的屬性
Check Browser：檢查訪問者的瀏覽器類型，根據返回的結果顯示不同的頁面
Check Plugin：檢查訪問者是否安裝了指定的插件，根據返回的結果顯示不同的頁面
Control Shockwave or Flash：控制Shockwave或者Flash文件的播放狀況
Drag Layer：使訪問者可以移動層，用于創建可移動的頁面元素
Go To URL：在當前窗口或指定的框架里打開新的頁面，它還可以同時改變兩個或兩個以上的框架的內容 Jump Menu：當你使用Insert -> Form Object ->&