HTML頁面編寫的點點感受小結
2024-08-30 08:34:23
供稿：網友
進入口碑也已經有三四個月的時間了，感覺在工作過程中收獲最大的是在編寫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，那就盡量不這樣做。
上面的開發步驟因人而已，偶是喜歡并且習慣這樣的一個思索開發過程，正在體驗它的樂趣。
