Dreamweaver網(wǎng)頁(yè)制作入門(mén)教程:div框架的更細(xì)致劃分
如今,隨著網(wǎng)頁(yè)制作和建站成為人人需要掌握的技能,越來(lái)越多的人開(kāi)始學(xué)習(xí)Dreamweaver(DW)這一強(qiáng)大的工具。在過(guò)去,我們分享了PS的入門(mén)教程,現(xiàn)在讓我們來(lái)看看DW的入門(mén)教程吧!今天起,我將花些時(shí)
如今,隨著網(wǎng)頁(yè)制作和建站成為人人需要掌握的技能,越來(lái)越多的人開(kāi)始學(xué)習(xí)Dreamweaver(DW)這一強(qiáng)大的工具。在過(guò)去,我們分享了PS的入門(mén)教程,現(xiàn)在讓我們來(lái)看看DW的入門(mén)教程吧!今天起,我將花些時(shí)間為大家?guī)?lái)DW入門(mén)教程,只要堅(jiān)持學(xué)習(xí),你也能成為一個(gè)DW大神。
更加細(xì)致的div框架劃分
在定義網(wǎng)頁(yè)結(jié)構(gòu)的上中下部分后,根據(jù)實(shí)際操作需求,網(wǎng)頁(yè)中間還需要進(jìn)行更細(xì)致的劃分。例如,如果我們想要進(jìn)一步劃分已經(jīng)定義的頭部(header),就需要在頭部?jī)?nèi)部進(jìn)行劃分操作。
劃分頭部為多個(gè)部分
如果我們想將頭部劃分為3個(gè)部分,可以使用如下代碼:
```html
```
CSS樣式編輯
接下來(lái),讓我們來(lái)編輯CSS樣式,以定義不同部分的外觀。比如,定義logo欄目的樣式:
```css
header_t_l {
width: 80px;
height: 80px;
background-color: CFF;
}
```
設(shè)置對(duì)齊方式
當(dāng)定義頭部右側(cè)時(shí),注意在代碼末尾添加`float: left`以確保對(duì)齊方式正確。只有設(shè)置了對(duì)齊方式,我們定義的框架才不會(huì)出現(xiàn)錯(cuò)位問(wèn)題。
預(yù)覽效果
在沒(méi)有設(shè)置對(duì)齊的情況下預(yù)覽頭部的效果可能會(huì)出現(xiàn)混亂。通過(guò)設(shè)置`float`命令后,可以看到頭部各部分按照設(shè)定的方式正確顯示。
底部定義
最后,讓我們定義底部部分的樣式:
```css
header_b {
width: 968px;
height: 20px;
background-color: 3CF;
float: left;
}
```
查看效果
通過(guò)以上設(shè)置,您可以看到頭部和底部部分被成功劃分并顯示出不同的樣式。學(xué)會(huì)這些基礎(chǔ)知識(shí),相信您已經(jīng)邁出了成為DW大神的第一步! 繼續(xù)努力學(xué)習(xí),您一定能夠掌握更多高級(jí)技巧,打造出令人印象深刻的網(wǎng)頁(yè)作品!