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

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

1. 網(wǎng)站結(jié)構(gòu)的劃分和圖像插入

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

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

現(xiàn)在，讓我們來看一下如何控制div縫隙，這是一個(gè)小細(xì)節(jié)問題。為了方便說明，我們給每個(gè)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;

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

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

這次我們需要了解另一個(gè)CSS屬性：padding-left，它表示元素左側(cè)的間隙。我們?cè)诿總€(gè)div中添加以下代碼：

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

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

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

實(shí)際上，由于我們?cè)黾恿?0px的間隙，但前方的寬度沒有進(jìn)行相應(yīng)調(diào)整，導(dǎo)致文字被“擠到下方”。所以，前方的寬度應(yīng)該減少20px，即從原來的888px調(diào)整為868px。

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

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

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

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

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

6. 預(yù)覽效果

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

通過以上步驟，你已經(jīng)學(xué)會(huì)了如何控制div縫隙，并進(jìn)行相關(guān)樣式調(diào)整。在網(wǎng)頁制作中，這是一個(gè)非常基礎(chǔ)且重要的技能，希望本教程能夠幫助到你。