網站製作之dreamweaver入門
工具/原料
Dreamweaver
步驟/方法
dreamweaver入門（2004版本）:功能簡介：
Macromedia Dreamweaver MX 2004 （簡稱DW MX 2004），是Macromedia 最新開發的的HTML編輯器，用於對Web站點、Web頁和 Web應用程序進行設計、編碼和開發。 DW MX 2004 包含有一個嶄新、簡潔、高效的界面，且性能也得到了改進。此外，還包含了眾多新增的功能，改善了軟件的易用性並使您無論處於設計環境還是編碼環境都可以方 便地生成頁面。
【DW MX 2004 MX 2004 的新功能簡介】
▲簡潔高效的設計和開發界面：界面更易於使用，可使您的工作效率和工作質量均得到提高。
▲“插入”欄的改進：簡潔高效的新外觀，佔用更少的工作區空間。還新增加了一個“收藏”類別，您可以對“插入”欄進行自定義，將最常使用的對象放置在該欄上。
▲表格編輯可視化：在表格中進行列調整操作時能看到實際效果。
▲用戶界面改進：可得到最大的可用工作區，更清晰地顯示上下文和焦點，更易於使用和更具邏輯性。
▲起始頁：使您能夠訪問最近使用過的文件，創建新文件和訪問DW MX 2004資源。起始頁會在您啟動DW MX 2004 或尚未打開文檔時顯示。
▲保存桌面選項：使您可以選擇當您重新啟動DW MX 2004 時重新打開您上一次使用的文檔。
▲完全支持 Unicode：DW MX 2004支持 Internet Explorer所支持的所有文本編碼方式。您可以使用幾乎所有您的系統中安裝的語言字體，DW MX 2004 會正確地顯示和保存這些字體。
▲安全 FTP：使您能夠完全加密所有文件傳輸。
▲新式的頁面佈局和設計環境。
▲增強的 CSS 功能：提供了一個更為精巧的方法來進行樣式設計及提高設計交互性。
▲動態跨瀏覽器驗證：在您保存文檔時自動檢查當前文檔的跨瀏覽器兼容性問題。
本教程針對DW MX 2004簡體中文版進行討論，供學習網頁製作創建靜態網站的朋友們參考。因本人水平有限，不當之處在所難免，歡迎批評指正。
【圖象處理軟件】
Photoshop：製作圖文並茂的網頁，需要處理圖片， PS 是最好的圖象處理軟件。最新版為Photoshop CS(俗稱8.0)版本。對初學者來說稍微專業了。您可以使用簡單易學、功能強大的的 Photoshop Elements（即：PSE），對於網頁圖片文件製作PSE就足夠用了。。
Fireworks：最新為 MX 2004版本，網頁製作三劍客之一。能和DW無縫鏈接。該軟件請您自行收集下載。
Flash： 最新為 MX 2004版本，網頁製作三劍客之一。網上最火的動畫製作軟件。該軟件請您自行收集下載。
Ulead GIF Animator：友立公司開發的功能強大的GIF動畫軟件。該軟件請您自行收集下載。
【其他軟件】
CuteFTP：是專業的FTP上傳軟件，用於往服務器端上傳文件用。 Dreamweaver MX 2004 有此功能，而且功能強大。但是，不少人還是習慣用專業的FTP軟件。該軟件請您自行收集下載。
最終您還需要有一個網絡空間。以便您的大作讓更多的人瀏覽。
dreamweaver入門（2004版本）:窗口布局：
窗口布局
Dreamweaver MX 2004 提供了將全部元素置於一個窗口中的集成工作區。在集成工作區中，全部窗口和麵板集成在一個應用程序窗口中。您可以選擇面向設計人員的佈局或面向手工編碼人 員需求的佈局。首次啟動 Dreamweaver 時，會出現一個工作區設置對話框（如下圖）：
您可以從中選擇一種工作區佈局。如果您不熟悉編寫代碼，請您選擇“設計者”。如果您以後想更改工作區，可以使用編輯菜單“首選參數”對話框切換到一種不同的工作區。編輯菜單“首選參數”對話框如下圖：
【欄目說明】
“插入”欄（如下圖）：包含用於將各種類型的“對象”（如圖像、表格和層）插入到文檔中的按鈕。每個對象都是一段 HTML 代碼，允許您在插入它時設置不同的屬性。例如，您可以通過單擊“插入”欄中的“表格”按鈕插入一個表格。也可以不使用“插入”欄而使用“插入”菜單插入對 象。
“文檔”窗口 顯示您當前創建和編輯的文檔。
“屬性檢查器”（如下圖）： 用於查看和更改所選對象或文本的各種屬性。
“面板組”（如下圖） 是分組在某個標題下面的相關面板的集合。若要展開一個面板組，請單擊組名稱左側的展開箭頭；若要取消停靠一個面板組，請拖動該組標題條左邊緣的手柄。
“文件”面板（如下圖） 使您可以管理您的文件和文件夾，無論它們是 Dreamweaver 站點的一部分還是在遠程服務器上。“文件”面板還使您可以訪問本地磁盤上的全部文件，類似於 Windows 資源管理器。
Dreamweaver MX 2004提供了多種此處未說明的其他面板、檢查器和窗口。若要打開其它面板，請使用“窗口”菜單。
dreamweaver入門（2004版本）:菜單概述：
菜單概述
本節提供 Dreamweaver MX 2004中各菜單的簡要說明。下圖為菜單條：
以下分別敘述菜單選項：
文件菜單編輯菜單
“文件”菜單 包含“新建”、“打開”、“保存”、“保存全部”，還包含各種其他命令，用於查看當前文檔或對當前文檔執行操作，例如“在瀏覽器中預覽”和“打印代碼”。
“編輯”菜單 包含選擇和搜索命令，例如“選擇父標籤”和“查找和替換”。“編輯”菜單還提供對DW菜單中“首選參數”的訪問。
查看菜單插入菜單
“查看”菜單 使您可以看到文檔的各種視圖（例如“設計”視圖和“代碼”視圖），並且可以顯示和隱藏不同類型的頁面元素和 DW工具及工具欄。
“插入”菜單提供“插入”欄的替代項，用於將對象插入您的文檔。
修改菜單文本菜單
“修改”菜單 使您可以更改選定頁面元素或項的屬性。使用此菜單，您可以編輯標籤屬性，更改表格和表格元素，並且為庫項和模板執行不同的操作。
“文本”菜單使您可以輕鬆地設置文本的格式。
命令菜單站點菜單
“命令”菜單 提供對各種命令的訪問；包括一個根據您的格式首選參數設置代碼格式的命令、一個創建相冊的命令等。
“站點”菜單 提供用於管理站點以及上傳和下載文件的菜單項。
窗口菜單幫助菜單
“窗口”菜單 提供對 DW中的所有面板、檢查器和窗口的訪問。
“幫助”菜單 提供對 Dreamweaver 文檔的訪問，包括關於使用 Dreamweaver 以及創建 Dreamweaver 擴展功能的幫助系統，還包括各種語言的參考材料。
除了菜單欄菜單外，Dreamweaver 還提供多種右鍵顯示上下文菜單，您可以利用它們方便地訪問與當前選擇或區域有關的有用命令。若要顯示上下文菜單，右擊窗口中的某一項。
dreamweaver入門（2004版本）:常用工具欄：
“插入”欄“插入”欄包含用於創建和插入對象（如表格、層和圖像）的按鈕。當鼠標指針滾動到一個按鈕上時，會出現一個工具提示，其中含有該按鈕的名稱。 某些類別具有帶彈出菜單的按鈕。從彈出菜單中選擇一個選項時，該選項將成為該按鈕的默認操作。例如，如果從“圖像”按鈕的彈出菜單中選擇“圖像 佔位符”，下次單擊“圖像”按鈕時，Dreamweaver 會插入一個圖像佔位符。每當從彈出菜單中選擇一個新選項時，該按鈕的默認操作都會改變。
“插入”欄按以下的類別進行組織：
“常用”類別使您可以創建和插入最常用的對象，例如圖像和表格。
“佈局”類別使您可以插入表格、div 標籤、層和框架。您還可以從三個表格視圖中進行選擇：“標準”（默認）、“擴展表格”和“佈局”。當選擇“佈局”模式後，您可以使用 Dreamweaver 佈局工具：“繪製佈局單元格”和“繪製佈局表格”。
“表單”類別包含用於創建表單和插入表單元素的按鈕。
“文本”類別使您可以插入各種文本格式設置標籤和列表格式設置標籤。
“HTML”類別使您可以插入用於水平線、頭內容、表格、框架和腳本的 HTML 標籤。
“服務器代碼”類別僅適用於使用特定服務器語言的頁面，這些類別中的每一個都提供了服務器代碼對象，您可以將這些對象插入“代碼”視圖中。
“應用程序”類別使您可以插入動態元素，例如記錄集、重複區域以及記錄插入和更新表單。
“Flash 元素”類別使您可以插入 Flash 元素。
“收藏”類別使您可以將“插入”欄中最常用的按鈕分組和組織到某一常用位置。
文檔工具欄
文檔工具欄中包含按鈕，這些按鈕使您可以在文檔的不同視圖間快速切換：“代碼”視圖、“設計”視圖、同時顯示“代碼”和“設計”視圖的拆分視圖。
工具欄中還包含一些與查看文檔、在本地和遠程站點間傳輸文檔有關的常用命令和選項。 以下對選項進行說明：
顯示代碼視圖 僅在“文檔”窗口中顯示“代碼”視圖。
顯示代碼視圖和設計視圖 在“文檔”窗口的一部分中顯示“代碼”視圖，而在另一部分中顯示“設計”視圖。當選擇了這種組合視圖時，“視圖選項”菜單中的“在頂部查看設計視圖”選項變為可用。請使用該選項指定在“文檔”窗口的頂部顯示哪種視圖。
顯示設計視圖 僅在“文檔”窗口中顯示“設計”視圖。
標題 允許您為文檔輸入一個標題，它將顯示在瀏覽器的標題欄中。如果文檔已經有了一個標題，則該標題將顯示在該區域中。
沒有瀏覽器/檢查錯誤 使您可以檢查跨瀏覽器兼容性。
文件管理 顯示“文件管理”彈出菜單。
在瀏覽器中預覽/調試 在瀏覽器中預覽或調試文檔。從彈出菜單中選擇一個瀏覽器。
刷新設計視圖 當您在“代碼”視圖中進行更改後刷新文檔的“設計”視圖。
視圖選項 允許您為“代碼”視圖和“設計”視圖設置選項。
狀態欄
狀態欄提供與您正創建的文檔有關的其它信息 標籤選擇器 顯示環繞當前選定內容的標籤的層次結構。單擊該層次結構中的任何標籤以選擇該標籤及其全部內容。比如：單擊 可以選擇文檔的整個正文。
窗口大小 彈出菜單（僅在“設計”視圖中可見）用來將“文檔”窗口的大小調整到預定義或自定義的尺寸。
“窗口大小”彈出菜單的右側是頁面的文檔大小和估計下載時間。
dreamweaver入門（2004版本）:定義站點：
設置站點
Web 站點是一組具有如相關主題、類似的設計、鏈接文檔和資源。Dreamweaver MX 2004 是一個站點創建和管理工具，因此使用它不僅可以創建單獨的文檔，還可以創建完整的 Web 站點。創建 Web 站點的第一步是規劃。為了達到最佳效果，在創建任何 Web 站點頁面之前，應對站點的結構進行設計和規劃。決定要創建多少頁，每頁上顯示什麼內容，頁面佈局的外觀以及頁是如何互相連接起來的。
請執行以下操作：
啟動 Dreamweaver MX 2004：
選擇“站點” >“管理站點”（即，從“站點”菜單選擇“管理站點”）。 出現“管理站點”對話框。
在“管理站點”對話框中，單擊“新建”，然後從彈出式菜單中選擇“站點”。 出現“站點定義”對話框。
如果對話框顯示的是“高級”選項卡，則單擊“基本”。 出現“站點定義嚮導”的第一個界面，要求您為站點輸入一個名稱。
在文本框中，輸入一個名稱以在 Dreamweaver MX 2004中標識該站點。該名稱可以是任何所需的名稱。
單擊“下一步”。出現嚮導的下一個界面，詢問您是否要使用服務器技術。
選擇“否”選項，指示目前該站點是一個靜態站點，沒有動態頁。
單擊“下一步”。出現嚮導的下一個界面，詢問您要如何使用您的文件。
選擇標有“編輯我的計算機上的本地副本，完成後再上傳到服務器（推薦）”的選項。 在站點開發過程中有多種處理文件的方式，初學網頁製作的朋友請選擇此選項。
單擊該文本框旁邊的文件夾圖標。 隨即會出現“選擇站點的本地根文件夾”對話框。
單擊“下一步”， 出現嚮導的下一個界面，詢問您如何連接到遠程服務器。從彈出式菜單中選擇“無”。 您可以稍後設置有關遠程站點的信息。目前，本地站點信息對於開始創建網頁已經足夠了。單擊“下一步”，該向導的下一個屏幕將出現，其中顯示您的設置概要。
單擊“完成”完成設置。 隨即出現“管理站點”對話框，顯示您的新站點。單擊“完成”關閉“管理站點”對話框。
現在，已經為您的站點定義了一個本地根文件夾。下一步，可以編輯自己的網頁了。
dreamweaver入門（2004版本）:創建頁面：
頁面編輯
本節介紹如何應用Dreamweaver MX 2004創建自己的網頁。
從頭創建自己的頁面，可以使用 Dreamweaver MX 2004起始頁創建新頁，或者可以選擇“文件” >“新建”，彈出如下對話框：
從各種預先設計的頁面佈局中選擇一種。比如：選擇“基本頁”HTML，點擊創建按鈕。Dreamweaver MX 2004即展開工作區界面（一個空白頁）：
您可以在這個空白頁添加表格和輸入文本進行編輯。如果您要向頁面添加圖片或其它元素，應先保存這個空白頁。選擇“文件”>“另存為”，在“另存為”對話框中，瀏覽到站點本地根文件夾下。填入文件名，保存退出。
dreamweaver基礎教程:頁面的總體設置：
我們已經描繪了小屋的藍圖，從現在開始，為我們的小屋添磚加瓦吧。打開01.html，製作一個圖文混排的簡單頁面。
一、頁面的總體設置
1、設置頁面的頭內容
頭內容再瀏覽器中是不可見的，但是卻攜帶著網頁的重要信息，如關鍵字、描述文字等，還可以實現一些非常重要的功能，如自動刷新功能。
鼠標左鍵單擊插入工具欄最左邊按鈕旁的下拉小三角，在彈出菜單中選擇“HTML”項，出現“文件頭”按鈕，點開下拉菜單，就可以進行頭內容的設置了。
設置標題，網頁標題可以是中文、英文或符號，顯示在瀏覽器的標題欄中。我們直接在設計窗口上方的標題欄內輸入或更改，就可以完成網頁標題的編輯了。
插入關鍵字，關鍵字用來協助網絡上的搜索引擎尋找網頁。要想讓更多的人看見你的網站，這項要好好填哦^_^單擊上圖所示的“關鍵字”項，彈出“關鍵字”對話框，填入關鍵字即可。
插入META，META標記用於記錄當前網頁的相關信息，如編碼，作者，版權等，也可以用來給服務器提供信息。單擊上圖所示的“META”項，彈出“META”對話框，在“屬性”欄選擇“名稱”屬性，在“值”文本框中輸入相應的值，可以定義相應的信息。
author—作者信息，copyright—版權聲明，generator—網頁編輯器。
2、設置頁面屬性
單擊“屬性欄”中的“頁面屬性”按鈕，打開的“頁面屬性”對話框。
設置外觀，“外觀”是設置頁面的一些基本屬性。我們可以定義頁面中的默認文本字體、文本字號、文本顏色、背景顏色和背景圖像等。我們設置頁面的所有邊距為0。
設置鏈接，“鏈接”選項內是一些與頁面的鏈接效果有關的設置。“鏈接顏色”定義超鏈接文本默認狀態下的字體顏色，“變換圖像鏈接”定義鼠標放在鏈接上 時文本的顏色，“已訪問鏈接”定義訪問過的鏈接的顏色，“活動鏈接”定義活動鏈接的顏色。“下劃線樣式”可以定義鏈接的下劃線樣式。
設置標題，“標題”用來設置標題字體的一些屬性。如下圖所示，在左側“分類”列表中選擇“標題”，這裡的標題指的並不是頁面的標題內容，而是可以應用 在具體文章中各級不同標題上的一種標題字體樣式。我們可以定義“標題字體”及6種預定義的標題字體樣式，包括粗體、斜體、大小和顏色。按自己的喜歡的風格 設置吧。
dreamweaver入門（2004版本）:超級鏈接：
超級鏈接
作為網站肯定有很多的頁面，如果頁面之間彼此是獨立的，那麼網頁就好比是孤島，這樣的網站是無法運行的。為了建立起網頁之間的聯繫我們必須使用超級鏈接。稱“超級鏈接”，是因為它什麼都能鏈接，如：網頁、下載文件、網站地址、郵件地址……等等。下邊我們就來討論怎樣在網頁中創建超級鏈接。
【頁面之間的超級連接】
在網頁中，單擊了某些圖片、有下劃線或有明示鏈接的文字就會跳轉到相應的網頁中去。
1、在網頁中選中要做超級鏈接的文字或者圖片。
2、在屬性面板中單擊黃色文件夾圖標，在彈出的對話框裡選中相應的網頁文件就完成了。做好超級鏈接屬性面板出現鏈接文件顯示。（如下圖）
3、按F12預覽網頁。在瀏覽器裡光標移到超級鏈接的地方就會變成手型。
〖提示〗你也可以手工在鏈接輸入框中輸入地址。給圖片加上超級鏈接的方法和文字完全相同。
如果超級鏈接指向的不是一個網頁文件。而是其他文件例如zip、exe文件等等，單擊鏈接的時候就會下載文件。
超級鏈接也可以直接指向地址而不是一個文件，那麼單擊鏈接直接跳轉到相應的地址。例如，在鏈接框裡寫上那麼，單擊鏈接就可以跳轉到讀書屋網站。
【郵件地址的超級連接】
在網頁製作中，還經常看到這樣的一些超級鏈接。單擊了以後，會彈出郵件發送程序，聯繫人的地址也已經填寫好了。這也是一種超級鏈接。製作方法是：在編輯狀態下，先選定要鏈接的圖片或文字（比如：歡迎您來信賜教！），在插入欄點或點插入菜單選“電子郵件鏈接”彈出如下對話框，填入E-Mail地址即可。
提示：還可以選中圖片或者文字，直接在屬性面板鏈接框中填寫“mailto：郵件地址”。（如下圖）
創建完成後，保存頁面，按F12預覽網頁效果。
【製作圖片上的超級鏈接】
注意，我們這裡所說的圖片上的超級鏈接是指在一張圖片上實現多個局部區域指向不同的網頁鏈接。比如一張中國地圖的圖片，單擊了不同的省跳轉到不同的網頁。可點的區域就是熱區。為了演示製作效果下面的中國地圖我加了一些鏈接，你可以用鼠標測試。鼠標移動到省份的熱區，會顯示提示，如果有預先設置的網站，點擊會進入對方的網站。
【製作方法】
1、首先插入圖片。單擊圖片，用展開的屬性面板上的繪圖工具在畫面上繪製熱區。
2、屬性面板改換為熱點面板如圖：鏈接輸入框：填入相應的鏈接。替代框：填入你的提示文字說明。目標框：不作選擇則默認在新瀏覽器窗口打開。
3、保存頁面， 按F12預覽，用鼠標在設置的熱區檢驗效果。
提示：對於複雜的熱區圖形我們可以直接選擇多邊形工具來進行描畫。替代框填寫了說明文字以後，光標移上熱區就會顯示出相應的說明文字。
超級鏈接屬性面板中的目標選項。
“目標”我們稱它為目標區。也就是超級鏈接指向的頁面出現在什麼目標區域。默認的情況下域中總有四個選項。
①_blank ：單擊鏈接以後，指向頁面出現在新窗口中。
②_parent：用指向頁面替換他外面所在的框架結構。
③_self： 將連接頁面顯示在當前框架中。
④_top： 跳出所有框架，頁面直接出現在瀏覽器中。
【小結】本節教程主要探討創建頁面的鏈接。
1、內部鏈接：鏈接到本站點的其他文檔。
2、外部鏈接：鏈接到本站點以外的其他文檔。
3、E-Mail鏈接：單擊該鏈接，可以打開瀏覽者的郵件系統。
4、圖片熱區鏈接：使你的鏈接更靈活更有個性。
dreamweaver入門（2004版本）:表格設計：
表格設計
表格是現代網頁製作的一個重要組成部分。表格之所以重要是因為表格可以實現網頁的精確排版和定位。本節教程我們分為兩步來進行。首先看錶格操作的一個實例。然後來看一些表格操作的基本方法。在開始製作表格之前，我們首先對錶格的各部分的名稱做一個介紹。
一張表格橫向叫行，縱向叫列。行列交叉部分就叫做單元格。
單元格中的內容和邊框之間的距離叫邊距。單元格和單元格之間的距離叫間距。整張表格的邊緣叫做邊框。
下面看看我們使用表格製作的頁面的實例
這幅頁面的排版格式，如果用以前我們所講的對齊方式是無法實現的。因此我們需要用到表格來做。實際上是用兩行兩列的表格來製作。
1、 在插入欄中選擇按鈕或“插入”菜單>選“表格”。系統彈出表格對話框。這些參數我們都已經認識了。行：2。列：2。其餘的參數都保留其默認值。。
2、 在編輯視圖界面中生成了一個表格。表格右、下及右下角的黑色點是調整表格的高和寬的調整柄。當光標移到點上就可以分別調整表格的高和寬。移到表格的邊框線上也可以調整。
3、 在表格的第一格按住左鍵不放，向下拖拽選中二格單元格。
然後在展開的屬性面板中選擇合併單元格按鈕。將表格的單元格合併。如果要分割單元格，則可以用合併單元格按鈕右邊的按鈕。
4、 用鼠標拖拽表格的邊框調整到適當的大小。
5、 單擊左邊的單元格，然後輸入“攝影作品賞析”文字，並調整大小，因是豎排應每個字回車一次。如果需要調整格子的大小。只需要鼠標的光標移動到邊框上拖拽即可。
6、 在右邊上下單元格內分別插入圖片和文本。頁面的基本樣子有了。
7、 光標移動到表格的邊框上單擊。表格周圍出現調整框，表示選中整張表格。然後，在屬性面板中將“邊框”值設置適合的值，如果為0，邊框在編輯狀態，為虛線顯示，瀏覽時就看不見了。
一個符合要求的頁面在表格的幫助下做好了。
通過上面的操作我們對於表格有了一個初步的認識。還要提示一點，對整幅表格操作和對一個單元格操作的時候，相應的屬性面板是不同的。
表格顏色設置，選擇整幅表格後，利用屬性面板的顏色選擇器設置背景色。單元格也可單獨設置。鼠標在需要設置的單元格點一下，其餘操作同上。
下面我們就來看看這些屬性面板的區別。
表格的屬性面板，要出現這個面板必須先選中整幅表格，方法上面已經提到過了。您可以在眾多選項中填入需要的參數。
選中了單元格之後屬性面板就發生如下變化了。選擇行或者列都屬於選中單元格。
對錶格操作的幾種常用方式：
合併：將選中的連續單元格合併成為一個單元格。
分割：將一個單元格分割成若干單元格。
水平對齊方式：分為（左）（中）（右）三種。
垂直對齊方式：分為（頂）（居中）（居底）（基線對齊）
表格還可以增加或者刪除行或者列。在一個單元格中單擊鼠標右鍵。在右鍵菜單中選擇表格選項>>選擇“插入行或列”。系統會彈出對話框如下。
在對話框裡填入數據即可。最後要說的是選中表格中的各種元素的方法：
選中一行，把光標移到該行的最左邊單元格的左面，光標會變成箭頭狀。單擊就可以選中一行。
選中一列，把光標移到該列的最上邊單元格的上面，光標會變成箭頭狀，然後單擊可以選中一列。
選中整張表格，把光標移到表格的左上角或右邊框或下邊框線上。單擊即可選中整幅表格。選中的表格會在周圍出現一個黑框表示整張表格選中了。
選中單元格。單元格可以同時選中多個。選擇連續的單元格，光標先選中的一個單元格，按shift鍵不放，選取最後一個單元格。選不連續的單元格。按住Ctrl鍵，點取所需要的單元格即可。
我們對於表格的使用就講到這裡，表格是網頁製作的基本技術，只有通過不斷實踐才能充分掌握。
dreamweaver入門（2004版本）:框架技術：
框架技術
在瀏覽網頁的時候，我們常常會遇到這樣的一種導航結構。就是超級連接做在左邊單擊以後鏈接的目標出現在右面。或者在上邊單擊鏈接指向的目標頁面出現在下面。要做出這樣的效果，必須使用框架。為了更好的理解什麼是框架。我們畫一張示意圖來進行討論。
這是一個左右結構的框架。事實上這樣的一個結構是由三個網頁文件組成的。首先外部的框架是一個文件，圖中我們用index.htm命名。框架中左邊命名為A，指向的是一個網頁A.htm。右邊命名為B，指向的是一個網頁B.htm。
下面我們就來從頭開始製作一個框架。（以左右框架結構為例）
1、點“文件”菜單>新建，彈出“新建文檔”
或在插入欄>佈局>選＂框架：左框架＂
Dreamweaver MX 2004生成一個空白的框架頁面，
2、選擇「窗口」菜單＞“框架”，彈出“框架”面板。從框架面板可知，系統對左右框架生成命名。左框架名為：leftFrame，右框架名為：mainFrame，當然您可以通過框架屬性面板對框架重新命名，瞭解這一點非常重要。創建超級鏈接時，要依據它正確控制指向的頁面。
3、保存框架。選擇“文件”菜單點擊“保存全部”。系統彈出對話框。這時，保存的是一個框架結構文件。我們按照慣例都命名為index.htm。
保存的時候如果虛線框籠罩的是周圍一圈就是保存框架結構。
虛線籠罩在右邊就是保存框架中右邊網頁。
虛線籠罩在左邊就是保存框架中左邊的網頁：
三個頁面保存完畢。
4、下面我們要實現按左邊的超級鏈接，對應的頁面出現在右邊。在左邊的頁面中做上超級鏈接。指向一個已經存在的頁面。注意做好鏈接以後，要在目標欄中設置為mainFrame。
6、設置完畢，保存全部，按F12預覽網頁。鏈接指向的頁面出現在右邊框架中。
7、重複以上步驟，把左框架所有的鏈接做完，一個簡單的網站導航結構創建完成。
框架有很多優點，但是若理解不很透徹，容易搞混。如果您的網站頁面不多，可以創建一個不使用框架的Web頁面來完成框架的功能。例如，如果您想讓導航條顯示在頁面的左側或頂部，既可以使用框架頁面，也可以在每一頁包含該導航條而不使用框架。