dreamweaver提供了快速建立網站框架的方式，我們可以通過簡單預設模板來達到快速的架構一個簡易網站的目的。看看下面這個網頁的基本結構，這是我們今天的目標，左側導航欄，右側顯示主頁面。

步驟/方法

1

打開dreamweaver，按快捷鍵“ctr+N”來到“新建文檔”界面，我們新建一個基本html頁面。

2

在這個頁面中輸入du小策，作為小策的個人頁面。

3

接下來為小策插入一張藝術照。

4

暫且完成了這個簡單的頁面，一會要用到。

5

同樣的方法給du幫幫建一個個人頁面。

6

接著將這兩個文件存起來。按快捷鍵“trl+s”，彈出這個對話框。文件名設為du小策，然后點擊確定。

以同樣的方法把幫幫存起來，以后備用。

7

按快捷鍵“ctrl+n”新建一個頁面。點擊圖中所示的位置，選擇布局。

8

在標簽欄選擇框架類型，如圖所示，這是頁面的整體布局，左側是預覽圖，右側hi名稱，我們選擇第一個作為示范。

9

彈出了一個對話框，這個對話框要對頁面的各個部分進行命名，這一步比較重要，一會我們要用到，所以看準，左欄叫做leftframe，右欄叫做mainframe。

10

在左側輸入百度經驗，du小策，du幫幫，在右側主頁面輸入百度經驗。此頁面的輸入和word的輸入沒有區別，就是直接打字，回車就是換行。我們看到下圖的樣子，左欄為導航欄，就是我們平時在網頁上看到的導航。

11

點擊“文件”——全部保存，記住這一步不是“ctrl+s”，因為框架頁面是有兩個頁面構成的，所以要選擇全部保存。

12

彈出了一個保存對話框，這一步非常重要，接下來還會彈出兩個這樣的對話框。那么這第一個是整個頁面的，第二個對話是右欄的，第三個是左側導航，他們分別儲存于不同的文件中。

13

看看效果，把鼠標放在不同的部分，標簽欄上會出現不同的文件名稱。

14

接下來我們要對左側導航建立鏈接。選中左欄中“百度經驗”，點擊右下角的一個圓圈，拖動圓圈到右面的相應文件，這樣就建立了一個鏈接。接著在界面的下面選擇目標為mainframe。mainframe是我們在第九步中命名的右側欄的名字，你可以返回去看看。百度經驗這四個字建立了鏈接指向“右側.html”這個文件，同時這個文件將在mainframe這個位置打開，也就是在右欄打開。

15

同樣的方式給小策和幫幫建立鏈接。分別指向“du小策.html”、“du幫幫.html”這兩個文件。

16

我們按快捷鍵F12，預覽界面，看看這是打開了主頁面“百度經驗”

17

點擊“du小策”這個鏈接

18

點擊“du幫幫”這個鏈接，看看效果。這個小網站的基本框架就建構好了。