現如今，網頁制作以及建站成了人人需要掌握的技能，小編也從各方面得到需求說，以前有過PS的入門教程，現在能不能做一個DW的入門教程。那么從今天開始，小編將用一些時間，為大家帶來DW的入門教程。只要能堅持，你也能成為大神。

1、之前我們做過了關于頭部標題欄以及logo部分的div切分，不知道大家還記不記得。今天我們要做一些關于網站主體部分的劃分，希望大家緊跟著之前的思路哦。首先我們還是打開dw。

2、自然，要定義body部分，就要用到body的代碼。我們在body之間輸入兩個關于div的代碼。

3、因為我們準備將body部分劃分為2欄，也就說，我們應該定義不同的body，起名一個l一個r，定義代碼如下：

           <div id="body_l"></div>

            <div id="body_r"></div>

4、完畢后，我們來定義它們的樣式。來到css文件，css文件主要是定義樣式的，當然，因為我們定義的是id，所以這里要用#開始。

即：

#body_l{}

#body_r{}

大括號中即是我們需要定義的屬性了。

5、定義完成樣式的屬性，代碼如下：

#body_l{width:220px;height:500px;background-color:#FFC}

#body_r{width:220px;height:500px;background-color:#FFC}

先看下效果：

6、雖然我們定義的是左右，但是發覺右側的div跑到下方去了，其實我們忘記了一個命令，就是float。我們加上邊距margin，然后插入float命令，再看。

7、可以看到，雖然并排排列了，但是兩個div黏在一起，也分辨不出所以然，所以我們加入這樣的語句：

margin-left:20px

讓它距離左側20像素，然后預覽。

8、剛剛好，我們分完了這些div，下節我們說一下div的再詳細劃分。

相關推薦：

dreamweaver如何改變代碼的字體大小?

Dreamweaver怎么新建站點地圖?dw編輯站點地圖的方法

Dreamweaver建立的站點怎么更改圖像的默認文件夾位置?