- 相關(guān)推薦
如何布局網(wǎng)頁主體
導(dǎo)語：網(wǎng)頁的設(shè)計(jì)中主體的架構(gòu)是體現(xiàn)設(shè)計(jì)師水平的一步，同時(shí)也是初學(xué)者必過一個(gè)技術(shù)門檻，通過DIV+CSS布局可以擺脫表格布局的桎梏，實(shí)現(xiàn)靈活控制各個(gè)網(wǎng)頁版塊。以下提供簡(jiǎn)單的主體布局。
1、首先編輯HTML代碼，輸入網(wǎng)頁內(nèi)容，通過DIV容器劃分出各個(gè)版塊。此處將主體分為左右兩欄，使用800px寬度頁面。
2、然后在外部樣式表中加入CSS樣式，使用浮動(dòng)效果使頁面居中浮動(dòng)，同時(shí)此處的左側(cè)寬度和右側(cè)寬度應(yīng)該盡量遵循一定的美術(shù)比例，一般使用黃金比例。800px固定寬度的參考比例為：800px=475px(左)+295px(右)+30px(自適應(yīng))。
3、接著編輯右側(cè)導(dǎo)航或者簡(jiǎn)介，使用無序列表來創(chuàng)建。并且在CSS樣式表中調(diào)整樣式，此處在標(biāo)題處加入下劃線強(qiáng)調(diào)出內(nèi)容。
4、到此，通過DIV+CSS創(chuàng)建的主體架構(gòu)基本出來了。但是要進(jìn)一步完善，可以在網(wǎng)頁中插入圖片，調(diào)整margin,padding等盒子模型，實(shí)現(xiàn)網(wǎng)頁的美化。
注意事項(xiàng)
圖片需要在PS下美化調(diào)整大小才能加入網(wǎng)頁
自學(xué)經(jīng)驗(yàn)，僅供參考。
【如何布局網(wǎng)頁主體】相關(guān)文章：
Dreamweaver如何利用層布局網(wǎng)頁07-19
網(wǎng)頁布局方式07-16
網(wǎng)頁的排版與布局08-26
網(wǎng)頁布局基礎(chǔ)08-10