現(xiàn)如今，網(wǎng)頁制作以及建站成為了人人需要掌握的技能。小編從各方面得到需求，大家希望有一個Dreamweaver（DW）的入門教程，就像之前有過PS的入門教程一樣。那么，從今天開始，小編將花些時間為大家?guī)?/p>

現(xiàn)如今，網(wǎng)頁制作以及建站成為了人人需要掌握的技能。小編從各方面得到需求，大家希望有一個Dreamweaver（DW）的入門教程，就像之前有過PS的入門教程一樣。那么，從今天開始，小編將花些時間為大家?guī)鞤W的入門教程，相信只要能堅持學習，大家也能成為DW的大神。

1. 網(wǎng)站結構的劃分和圖像插入

按照之前的課程，我們應該已經(jīng)知道了建站的具體思路。首先，使用div命令對網(wǎng)站的結構進行劃分，然后插入圖像，并應用進階學到的技巧來處理不同的網(wǎng)站需求。這是基本的思路。

2. 控制div縫隙的細節(jié)

現(xiàn)在，讓我們來看一下如何控制div縫隙，這是一個小細節(jié)問題。為了方便說明，我們給每個div輸入一些文字性的內(nèi)容：

lt;div id"header_t_l"gt;logolt;/divgt;
lt;div id"header_t_r"gt;titlelt;/divgt;
lt;div id"header_b"gt;writinglt;/divgt;

在編輯中，我們會發(fā)現(xiàn)輸入的文字都是頂格顯示的，沒有間隙也沒有對齊的方法，這在編輯過程中是很麻煩的。

3. 使用padding-left代碼實現(xiàn)左側間隙

這次我們需要了解另一個CSS屬性：padding-left，它表示元素左側的間隙。我們在每個div中添加以下代碼：

#header_t_l {
  padding-left: 20px;
}
#header_t_r {
  padding-left: 20px;
}
#header_b {
  padding-left: 20px;
}

添加完代碼后，預覽頁面，你會發(fā)現(xiàn)出現(xiàn)了問題，文字和div元素全部都被擠到下方了，雖然有了20px的間隙。

4. 調(diào)整前方的寬度來解決問題

實際上，由于我們增加了20px的間隙，但前方的寬度沒有進行相應調(diào)整，導致文字被“擠到下方”。所以，前方的寬度應該減少20px，即從原來的888px調(diào)整為868px。

然后，再次預覽頁面，是不是沒有問題了呢？

5. 定義頂部縫隙并更改字體大小

接下來，我們來定義頂部的縫隙。首先，我們改變字體大小，可以使用以下代碼：

#header_b {
  font-size: 12px;
  line-height: 30px;
}

通過設置不同的字體大小和行高，你可以根據(jù)需要調(diào)整縫隙大小。

6. 預覽效果

最后，讓我們來預覽一下效果，確保所有的調(diào)整都生效并沒有其他問題。

通過以上步驟，你已經(jīng)學會了如何控制div縫隙，并進行相關樣式調(diào)整。在網(wǎng)頁制作中，這是一個非?；A且重要的技能，希望本教程能夠幫助到你。