如今，隨著網(wǎng)頁制作和建站成為人人需要掌握的技能，越來越多的人開始學(xué)習(xí)Dreamweaver（DW）這一強(qiáng)大的工具。在過去，我們分享了PS的入門教程，現(xiàn)在讓我們來看看DW的入門教程吧！今天起，我將花些時(shí)

如今，隨著網(wǎng)頁制作和建站成為人人需要掌握的技能，越來越多的人開始學(xué)習(xí)Dreamweaver（DW）這一強(qiáng)大的工具。在過去，我們分享了PS的入門教程，現(xiàn)在讓我們來看看DW的入門教程吧！今天起，我將花些時(shí)間為大家?guī)鞤W入門教程，只要堅(jiān)持學(xué)習(xí)，你也能成為一個(gè)DW大神。

更加細(xì)致的div框架劃分

在定義網(wǎng)頁結(jié)構(gòu)的上中下部分后，根據(jù)實(shí)際操作需求，網(wǎng)頁中間還需要進(jìn)行更細(xì)致的劃分。例如，如果我們想要進(jìn)一步劃分已經(jīng)定義的頭部（header），就需要在頭部內(nèi)部進(jìn)行劃分操作。

劃分頭部為多個(gè)部分

如果我們想將頭部劃分為3個(gè)部分，可以使用如下代碼：

```html

```

CSS樣式編輯

接下來，讓我們來編輯CSS樣式，以定義不同部分的外觀。比如，定義logo欄目的樣式：

```css

header_t_l {

width: 80px;

height: 80px;

background-color: CFF;

}

```

設(shè)置對齊方式

當(dāng)定義頭部右側(cè)時(shí)，注意在代碼末尾添加`float: left`以確保對齊方式正確。只有設(shè)置了對齊方式，我們定義的框架才不會(huì)出現(xiàn)錯(cuò)位問題。

預(yù)覽效果

在沒有設(shè)置對齊的情況下預(yù)覽頭部的效果可能會(huì)出現(xiàn)混亂。通過設(shè)置`float`命令后，可以看到頭部各部分按照設(shè)定的方式正確顯示。

底部定義

最后，讓我們定義底部部分的樣式：

```css

header_b {

width: 968px;

height: 20px;

background-color: 3CF;

float: left;

}

```

查看效果

通過以上設(shè)置，您可以看到頭部和底部部分被成功劃分并顯示出不同的樣式。學(xué)會(huì)這些基礎(chǔ)知識，相信您已經(jīng)邁出了成為DW大神的第一步！ 繼續(xù)努力學(xué)習(xí)，您一定能夠掌握更多高級技巧，打造出令人印象深刻的網(wǎng)頁作品！