Div+css制作HTML靜態(tài)頁流程
之前有個朋友跟我說,做頁面的時候沒有思路,不知道該怎么布局,怎樣快速的根據(jù)設(shè)計圖制作出HTML靜態(tài)頁面,用什么工具比較合適等等。下面就把我個人的一個制作的方法分享一下:
一.畫架構(gòu)圖(要根據(jù)后臺調(diào)用的習慣來畫,一般分為三大塊兒,頭部,中間內(nèi)容區(qū),footer部分)
PS:寫備注很重要,所以一定要養(yǎng)成寫備注的好習慣哦??!
如果是比較復(fù)雜的頁面那么架構(gòu)(布局)圖對于新手來說是很重要的,首先你需要根據(jù)設(shè)計稿畫出輪廓,標出大小,間距等。比如這是一個企業(yè)站:
頭部(***X***)
Banner(***X***)
企業(yè)新聞(***X***)
產(chǎn)品簡介(***X***)
什么什么(***X***)
Footer(***X***)
他們之間的間距(***X***)
這些都做完了那么你的網(wǎng)站的結(jié)構(gòu)也就出來了,那么就開始寫內(nèi)容吧!
1. 首先是聲明和head部分,這個不用寫,直接復(fù)制就行。要注意的就是TITLE和編碼部分,編碼根據(jù)公司要求改掉就行,title千萬別忘了改。
2. 接下來就是我們畫好的結(jié)構(gòu)圖了,先是三個div,頭部,中間內(nèi)容區(qū),footer部分。然后中間的內(nèi)容區(qū)又分成兩塊兒,上和下,上面是banner,下面又分成三塊兒左、中、右。這樣框架就出來了,也不會出現(xiàn)什么預(yù)覽的時候布局亂了的問題。(使用margin和paddind的時候注意別忘了減掉對應(yīng)的值)
二.CSS(層疊樣式表)部分
1. 首先有一個公用的CSS文件
2. 廣告部分的CSS
3. 特殊效果的CSS
4. 文字樣式文件
5. ........
PS:寫這么多的樣式文件主要是為了讀取速度快而且以后修改的時候方便,哪塊兒需要修改直接找到對應(yīng)的樣式表文件就可以了。如果CSS樣式很少的話那么可以寫成兩個或是一個文件。如果是一個大的網(wǎng)站那么你想想那么多的css寫在一個文件中,肯定影響速度。
三.制作所用軟件方面
前期建議使用Adobe Dreamweaver,先進有代碼提示(糾正錯誤),第二有可視視圖可以參考。做起來容易一些,但是建議慢慢的要把代碼提示關(guān)掉(Ctrl+U),等你做的多了就什么軟件都無所謂了,隨便一個文本編輯器+瀏覽器就能搞定了。