web重構技巧與常見問題的解決方法
一、 xhtml+CSS 技巧篇
●在重構也面之前要做的準備：
1.拿一張PSD效果圖,必需是PSD的這樣的話你就可以自己更加隨意的做切片；
2.先把PSD不做切片生成一個網頁,取名為index_psd.html(這個頁面做參考用)；
3. 在準備幾個必要的資料夾images(放圖片) 、css(放css樣式檔)、js(放js檔)；
●準備工作做好以後，先分析整個頁面的結構。分析頁面的結構要先整體再部分，先看頁面中最大的板塊是怎樣關聯的是上下並列還是左右平鋪。看清了頁面的大板塊結構，就可以建立頁面最基礎的幾個區塊了。例如我們的頁面試上中下結構，這時就可以寫：
<div id=”header”></div>//放也面頭與導覽等
<div id=”content”></div>//頁面的主題內容
<div id=”footer”></div>//頁面腳版權聲明等等
●寫css的時候就需要使用index_psd.html這個文件了，用DW打開這個文件，選擇視圖模式，可以透過拉輔助線，來測量各個區塊的長寬為設置CSS提供參考，這樣做的好處就是重構出來的頁面可以精確到1像素。
●每寫好一個區塊就要用IE和ff測試下效果，以便及時發現問題及時解決，在各個區塊沒內容的時候最好給他們都加上背景色。
●寫好大的板塊後，再分析大板塊裡面的內容，同樣的道理也是先整體再部分，例如內容頁面看起來是左右兩個板塊，這個時候我們可以把程式碼寫為：
<div id=”header”></div>//放也面頭與導覽等
<div id=”content”>//頁面的主題內容
<div class=”content-2-1”></div>//左邊
<div class=”content-2-2”></div>//右邊
</div>
<div id=”footer”></div>//頁面腳版權聲明等等
其中content-2-1中的2表是分兩欄，2-1表示左欄，2-2表示右欄這樣的分欄方式可以使自己查看頁面代碼的時候更加直觀，分好多欄的時候這個優勢更加明顯。
●新聞列表，文章列表等等最好使用：
<ul>
<li>新聞標題1< >
<li>新聞標題2< >
…………
<li>新聞標題n< >
</ul>
●欄位清單加描述的最好用：
<dl>
<dt>欄1</dt>
<dl>欄1描述</dl>
<dt>欄2</dt>
<dl>欄2描述</dl>
</dl>
●在CSS檔案定義的最開始最好加上如下語句
body,html{ height:100%; }
*{ margin:0px; padding:0px; }
●最好能為大的區塊設定overflow:：hidden，這樣可以確保容器不被撐開，從而破壞整個頁面的佈局。
二、 DIV+CSS 問題篇
1. IE6意外空白問題：
在並列的幾個小區塊橫鋪在一個大區塊中的時候，本來小區塊寬度的和等於大區塊的寬度，在FF等其他瀏覽器中沒問題，可是在IE6中就是有一個區塊顯示不出來要不就被擠到下面去了。這時候可以設定小區塊的css 為display：inline。如果這個辦法還不行那就把各區塊的寬度減少1到2個像素。
2． IE6重影問題：
有時在IE6中在一個大DIV結束的底端老出現div內容結尾幾個字符的重複，在FF等其他瀏覽器裡面就不會出現。解決這個問題有兩個方法：1）刪除註解；2）在這個DIV的後面填加<div class=”clear”></div> 定義clear的CSS樣式為：
.clear {
font-size: 1px;
clear: both;
visibility: hidden;
width: 1px;
}
建議使用第二種方法，如果把註解去掉的話程式碼的可讀性就受到影響了。
3． IE6無法居中的問題：
一般情況下只要給一個div（設其id為1）設定css樣式：margin:0px auto;就可以讓這個div在盛放它的容器（設其id為0）中居中了，它們的結構如下：
<div id=”0”>
<div id=”1”> … </div>
</div>
但是IE6就不行。這時候可以為div0的css設定：text-align: center;
4. IE6有連結的圖片有意外邊框出現
在IE6中有時有連結的圖片會有一個難看的邊框出現，這個是由<a>引起的，這個時候可以設定透過在CSS中設定a { border:0px;}來消除。
5． FF中DIV裡面的內容出軌
有時在IE中看很正常的內容在FF中卻看到DIV裡面的東西跑到外面了，這種情況在div有邊框的時候尤其明顯。這是因為div在IE中設定了高度後，如果div裡面的內容如果高於div的時候，div會自動增加。但FF就沒有這麼靈活，只要限定了高度就不會自己改變。這時可以透過重設高度來解決這個問題，也可以把高度設為自動。
6． FF中區域意外消失
在IE中很正常的佈局在FF中卻有一個區域消失了，這個問題在頁面的最下角版權區塊經常出現。這個時候可以透過給這個區域添加：clear:both;來解決。
其他的問題暫時想不起來了，在重構的過程中總會有一些莫名奇妙的問題，只要善於思考，不厭其煩的測試，或是到網上查找，總會找到解決辦法的。每一個問題的解決都是一個不小的收穫。