div+css網(wǎng)站首頁(yè)布局實(shí)例教程

1、DIVCSS：網(wǎng)站首頁(yè)布局實(shí)例教程：網(wǎng)站首頁(yè)布局實(shí)例教程第一步：頁(yè)面布局與規(guī)劃第一步：頁(yè)面布局與規(guī)劃在網(wǎng)頁(yè)制作中，有許多的術(shù)語(yǔ)，例如：CSS、HTML、DHTML、XHTML等等。在下面的文章中我們將會(huì)用到一些有關(guān)于HTML的基本知識(shí)，而在你學(xué)習(xí)這篇入門教程之前，請(qǐng)確定你已經(jīng)具有了一定的HTML基礎(chǔ)。下面我們就開(kāi)始一步一步使用DIVCSS進(jìn)行網(wǎng)頁(yè)布局設(shè)計(jì)吧。所有的設(shè)計(jì)第一步就是構(gòu)思，構(gòu)思好了，一般來(lái)說(shuō)還需要用PhotoShop或Fire

2、Wks(以下簡(jiǎn)稱PS或FW)等圖片處理軟件將需要制作的界面布局簡(jiǎn)單的構(gòu)畫(huà)出來(lái)，以下是我構(gòu)思好的界面布局圖。下面，我們需要根據(jù)構(gòu)思圖來(lái)規(guī)劃一下頁(yè)面的布局，仔細(xì)分析一下該圖，我們不難發(fā)現(xiàn)，圖片大致分為以下幾個(gè)部分：1、頂部部分，其中又包括了LOGO、MENU和一幅Banner圖片；2、內(nèi)容部分又可分為側(cè)邊欄、主體內(nèi)容；3、底部，包括一些版權(quán)信息。有了以上的分析，我們就可以很容易的布局了，我們?cè)O(shè)計(jì)層如下圖:├#Header頁(yè)面頭部├#Page

3、Body頁(yè)面主體│├#Sidebar側(cè)邊欄│└#MainBody主體內(nèi)容└#Footer頁(yè)面底部至此，頁(yè)面布局與規(guī)劃已經(jīng)完成，接下來(lái)我們要做的就是開(kāi)始書(shū)寫(xiě)HTML代碼和CSS。第二步：寫(xiě)入整體層結(jié)構(gòu)和第二步：寫(xiě)入整體層結(jié)構(gòu)和CSS接下來(lái)我們?cè)谧烂嫘陆ㄒ粋€(gè)文件夾，命名為“DIVCSS布局練習(xí)”，在文件夾下新建兩個(gè)空的記事本文檔，輸入以下內(nèi)容：無(wú)標(biāo)題文檔這是XHTML的基本結(jié)構(gòu)，將其命名為index.htm，另一個(gè)記事本文檔則命名為css.

4、css。下面，我們?cè)跇?biāo)簽對(duì)中寫(xiě)入DIV的基本結(jié)構(gòu)，代碼如下：[col=#aaaaaa][col][col=#aaaaaa][col][col=#aaaaaa][col][col=#aaaaaa][col][col=#aaaaaa][col][col=#aaaaaa][col]為了使以后閱讀代碼更簡(jiǎn)易，我們應(yīng)該添加相關(guān)注釋，接下來(lái)打開(kāi)css.css文件，寫(xiě)入CSS信息，代碼如下：基本信息bodyfont:12pxTahomamargin: