在編排網頁時，並不是將元素通通塞進網頁就好了，而是採用「分區置入」的方式，先分析網頁版面而大概可以劃分成幾個區塊(block)，例如「標題區」、「選單區」...，然後就開啟網頁編輯軟體，建立出這些區塊。剛建立好的區塊還是空的，分別在每個空區塊填入內容後，才會產生我們理想中的緊密版面。

再劃分區塊時要注意的是，請粗略地劃分出「大」區塊就好，不要將網頁劃分得太細、太複雜，因為本階段是要規畫網頁「架構」，而不是製作網頁的「細節」。

網頁區塊劃分好以後，接著可以先為各區塊命名。在規劃的過程中你可能已經決定某區塊是標題區、某區塊是內容區...，但是為了方便後續的操作，必須使用CSS可以控制的ID名稱，因此請不要使用空格、特殊符號或中文字命名。此外，第1個字元務必使用英文字，第2個字元開始用英文或數字皆可。

以Dreamweaver編排網頁的第一步，就是要建立出我們規劃好的區塊，這裡要使用HTML中的Div標籤來完成。Div標籤看起來只是一個扁平的長條形空白方框，可別小看他哦!只要透過CSS樣式為Div標籤指定寬、高度，扁平的Div標籤就搖身一變成指定大小的空白區塊。

在設定各區塊的樣式前，首先要設定整體頁面的屬性，這樣一來假如有各區塊共通的設定，例如字型、邊框等樣式，都可以先行設定完畢。為了將樣式套用到整體頁面，我們要將CSS套用在body標籤上。當版面規劃完成後，就可以開始將各種網頁元素加入到區塊中囉!

而在實務上，我們通常會將網站中每頁共同的CSS樣式彙整再同一個CSS檔案內，再將各網頁連結到該CSS檔案(稱為外部樣式表)。這樣做的好處是，將來要修改CSS樣式定義時，只需修改一個CSS檔，不必把每個網頁都打開來修改，省時又有效率。