今天我們來學習用 Web 標準的方法來制作 Google 首頁（中文）。Google 首頁一直是用 table 布局的。我們把 Google 首頁用 PrtScr 截屏，作為制作時的設計稿參考，并且不打開 Google 首頁查看其源代碼——就當它不存在。這樣和真實項目工作比較接近。

第一部分、HTML 的構建（基于XHTML Transitional）

　　從設計稿上看到的內容，去揣摩結構。因為整個頁面內容較少，輕易理解，但也碰到了我們的第一個問題：是用 <p> 標簽還是 <div>？各自代表著 paragraph 和 division，原則上說，這個頁面上沒有任何的段落存在，所以不應該用 <p>。但這里涉及到一個問題，拋開樣式表顯示的話，用 <p> 更加的清楚，因為默認 <div> 的 margin 和 padding 值都為零。好吧，用 <p> 還是用 <div> 是一個個人喜好問題，但是原則上應當用后者。在本例中也使用后者。開始找個稱手的編輯器寫 HTML ：


　　這包括頭部的登陸狀態和中間的大 Logo。我們先不增加任何樣式 id 和 class。

　　然后我們看到中間有“網頁 圖片 資訊 論壇 更多 ?”這些鏈接。怎么做？一般就兩種寫法，看個人喜好。把這幾個鏈接寫一行里面或者寫在一個 ul 里面，如下：


或者：


　　這兩種寫法各有什么優缺點呢？這里一共有 5 項，第一項是加粗的文字，其余 4 項是鏈接。假如使用第一種寫法對于樣式的控制就顯得力不從心，比如控制這 5 項之間的間距；假如使用第二種寫法，那么在脫離樣式的情況下，分了 5 行顯示。這里我把缺點都寫出來，根據本例情況，我們還是選擇第一種寫法，這樣要控制樣式就需要在每一項前后增加無意義的 <span>。

　　我們先繼續往下寫，碰到了搜索表單以及邊上的高級搜索等三個鏈接。先寫哪一個？看上去是平級的啊。這個時候最好問一下產品設計師的本意。我們在這里先寫表單。如下：


　　注重給每一項 radio button 添加一個 label，具體的效果大家可以自行測試一下。另外這里采用了 label 包含的寫法，也可以寫成 <label for="foo"> 針對 id 為 foo 的 label </label>。怎么寫這也是看個人喜好的。

　　接下來是高級搜索等三個鏈接，以及底部的版權信息等，代碼如下：


　　到這里我們基本完成了 Google 首頁的 HTML 構建，這里是樣例文件，待會兒我們還會再修整一部分代碼。

第二部分、樣式表

　　我們采用直接把樣式寫在 head 里面的方式，較為簡單也方便演示。首先我們看到除了頭部的登陸狀態，其余部分都是居中對齊的，并且發現字體是 Arial，默認文字大小為 13 px。我們在 head 區域增加以下樣式：


　　這里使用了 px 這個絕對單位。關于絕對單位和相對單位，網上相關文章很多，并且也一直是 Web 前臺的熱門話題，本文簡單起見，直接使用絕對單位。

　　然后我們逐步增加其他樣式：


　　之后的搜索表單，我們碰到了樣式化的難點，首先作為搜索的 size 為 55 的輸入框從布局上來說是絕對居中的，而右側高級搜索那三項的寬度加上輸入框在內并不是絕對居中。也就是說視覺上，高級搜索那三項偏右了。如下圖所示：


　　這里我們使用絕對定位的方法來處理它（在 HTML 中將高級搜索這三項的內容放入 form 之內）：


　　最后我們加上底部鏈接和版權信息部分的樣式：


　　在瀏覽器里面預覽并且微調一下各個數值，這樣就完成了 Google 首頁的制作。最終效果及源文件：


　　這在 Firefox 1.5 下測試，與 Google 首頁沒有任何像素的差異。在 IE 下會有一些像素上的差異，這就是各個瀏覽器的兼容性問題，留給大家自行處理了。本系列以后會有專門的文章討論這些問題。

　　本例的最終代碼還能夠有進一步的優化，做法每個人習慣不同，希望本文能夠幫助到大家。

懌飛補充：
　　1、對于“?”使用代碼“＆raquo;”來代替;
　　2、label寫法推薦寫成 <label for="foo"> 針對 id 為 foo 的 label </label>。因為<label><input />xxxxx</label>只有在FF等對標準支持很好的瀏覽器里才顯示正常，在IE6中無法顯示正常的效果。
　　3、對于strong，需要重點顯示出來的內容，可以使用strong，而對于布局里需要區分主次點的部分，就寫到樣式里，比如分類的一級分類為粗體，二級分類為一般字體……，其實strong對于搜索引擎優化也有一定的作用，搜索引擎會優先strong的內容，而寫在樣式里就不會有這樣的效果！