Dreamweaver網頁制作入門教程：div框架的更細致劃分

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

如今，隨著網頁制作和建站成為人人需要掌握的技能，越來越多的人開始學習Dreamweaver（DW）這一強大的工具。在過去，我們分享了PS的入門教程，現在讓我們來看看DW的入門教程吧！今天起，我將花些時間為大家帶來DW入門教程，只要堅持學習，你也能成為一個DW大神。

更加細致的div框架劃分

在定義網頁結構的上中下部分后，根據實際操作需求，網頁中間還需要進行更細致的劃分。例如，如果我們想要進一步劃分已經定義的頭部（header），就需要在頭部內部進行劃分操作。

劃分頭部為多個部分

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

```html

```

CSS樣式編輯

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

```css

header_t_l {

width: 80px;

height: 80px;

background-color: CFF;

}

```

設置對齊方式

當定義頭部右側時，注意在代碼末尾添加`float: left`以確保對齊方式正確。只有設置了對齊方式，我們定義的框架才不會出現錯位問題。

預覽效果

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

底部定義

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

```css

header_b {

width: 968px;

height: 20px;

background-color: 3CF;

float: left;

}

```

查看效果

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