DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 前端技巧 >> HTML頁面編寫的點點感受小結
HTML頁面編寫的點點感受小結
編輯:前端技巧     
進入口碑也已經有三四個月的時間了,感覺在工作過程中收獲最大的是在編寫HTML頁面上,從視覺稿到網頁DEMO,沒辦法,基本都在做這樣的工作。從最初的wap整站、杭州首頁、bug需求到廣州首頁、上海首頁、店鋪大全等頁面改版,到當下的口碑卡頻道首頁改版的DEMO的編寫。心情從最初的煩躁、枯燥的調試到輕松自如,到當下的信手拈來、游刃有余,擺脫了IE6、7 Fuck bug的束縛,每次嘗試到不用寫一個hack來完成整個頁面布局的滋味,記憶猶新。

在公司同事中學到了不少的經驗,也總結出來了自己的一套開發步驟:

整體分析頁面布局
歸納統一、分類,切圖(CSS Sprites)
拆分模塊、規劃HTML結構、規劃並編寫CSS
組合成頁面(得益於YUI的頁面布局生成器組件)
第一步:整體分析頁面布局。
當拿到視覺稿的時候,不是著手去想怎麼編寫HTML、CSS代碼,而是先從整體上分析頁面的布局,觀察頁面各個模塊的間距差別、劃分header,body,footer、CSS Sprites、切圖事宜、頁面色調、背景如何設置等等,之後再細化到每個模塊的布局,從外到內,逐步細化。可以說,這一步是非常關鍵的,它給了下面將要進行的代碼編寫一個整體的框架布局。

第二步:歸納統一、分類,切圖(CSS Sprites)
整體分析過後,就是歸類、組合模塊的時候了。這一步還是的需要從整體來看,分析頁面哪些模塊的樣式相似(常見的就是ul列表,以及一些圖文編排),包括顏色、樣式、修飾、背景、寬度、padding、margin、border等等。將相似的模塊的樣式歸類,這為接下來編寫CSS代碼大有好處,可以最大化的精簡CSS代碼。

第三步:拆分模塊、規劃HTML結構、規劃並編寫CSS
在前期工作都做了之後,這步就改到了動手寫代碼的時候了,我喜歡將每個模塊或者列拆分開來編寫,這樣做的好處是我可以先不管整體布局,從HTML語意化的角度架構HTML結構,此時HTML代碼較少,在編寫CSS以及查看HTML代碼的時候不用花費太多時間了(痛恨HTML代碼多了,上下拉滾動條,累人!)

第四步:組合成頁面。
在每個模塊都編寫好之後,借助頁面布局生成器(幸虧有了它,效率第一啊!缺點是HTML結構復雜,-_-),將每個拆分的模塊整合起來,同時也清理CSS文件的代碼,整合CSS代碼也有一些些技巧的:在CSS Sprites裡設置HTML元素的背景的時候,把全部的元素都寫在一處:

/* background url */
.rhs-bd,.business-join h1,.yk-mod-content .business-join p a,.business-open-flow ul,.business-case-list ul li,
.kb-bank-toolbar ul,.kba-consumer h1,.kba-consumer h1,.kba-consumer ul li,.kba-new-join ul li,
.recommend-shop-list,.hot-sign,.search-merchant-bd{background:url(ka_bg.png) no-repeat;}

這樣相應的元素只需要設置background-position就OK了,代碼整潔,結構清晰,重構維護成本小。還有一點就是慎用margin,在IE6、7下margin會引發很多問題,所以在編寫CSS和規劃HTML布局的時候,需要考慮到需要使用margin還是使用padding,各有各的好處,margin能保持HTML結構比較簡潔,而padding原理是在當前HTML元素的子元素中設置padding來實現布局(當然也可以在當前元素下,但是它會改變寬度和高度,需要重新調整寬高)。所以我的經驗是:在模塊的HTML和CSS編寫方面,都會盡量使用padding,特別是涉及到float的時候,使用padding會避免很多問題。有句話說的好:既然明知道這樣做會引發bug,那就盡量不這樣做。

上面的開發步驟因人而已,偶是喜歡並且習慣這樣的一個思索開發過程,正在體驗它的樂趣。
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved