今天我們來(lái)學(xué)習(xí)用 Web 標(biāo)準(zhǔn)的方法來(lái)制作 Google 首頁(yè)（中文）。Google 首頁(yè)一直是用 table 布局的。我們把 Google 首頁(yè)用 PrtScr 截屏，作為制作時(shí)的設(shè)計(jì)稿參考，并且不打開(kāi) Google 首頁(yè)查看其源代碼——就當(dāng)它不存在。這樣和真實(shí)項(xiàng)目工作比較接近。

第一部分、HTML 的構(gòu)建（基于XHTML Transitional）

　　從設(shè)計(jì)稿上看到的內(nèi)容，去揣摩結(jié)構(gòu)。因?yàn)檎麄�(gè)頁(yè)面內(nèi)容較少，輕易理解，但也碰到了我們的第一個(gè)問(wèn)題：是用 <p> 標(biāo)簽還是 <div>？各自代表著 paragraph 和 division，原則上說(shuō)，這個(gè)頁(yè)面上沒(méi)有任何的段落存在，所以不應(yīng)該用 <p>。但這里涉及到一個(gè)問(wèn)題，拋開(kāi)樣式表顯示的話，用 <p> 更加的清楚，因?yàn)槟�認(rèn) <div> 的 margin 和 padding 值都為零。好吧，用 <p> 還是用 <div> 是一個(gè)個(gè)人喜好問(wèn)題，但是原則上應(yīng)當(dāng)用后者。在本例中也使用后者。開(kāi)始找個(gè)稱手的編輯器寫 HTML ：


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

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


或者：


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

　　我們先繼續(xù)往下寫，碰到了搜索表單以及邊上的高級(jí)搜索等三個(gè)鏈接。先寫哪一個(gè)？看上去是平級(jí)的啊。這個(gè)時(shí)候最好問(wèn)一下產(chǎn)品設(shè)計(jì)師的本意。我們?cè)谶@里先寫表單。如下：


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

　　接下來(lái)是高級(jí)搜索等三個(gè)鏈接，以及底部的版權(quán)信息等，代碼如下：


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

第二部分、樣式表

　　我們采用直接把樣式寫在 head 里面的方式，較為簡(jiǎn)單也方便演示。首先我們看到除了頭部的登陸狀態(tài)，其余部分都是居中對(duì)齊的，并且發(fā)現(xiàn)字體是 Arial，默認(rèn)文字大小為 13 px。我們?cè)?head 區(qū)域增加以下樣式：


　　這里使用了 px 這個(gè)絕對(duì)單位。關(guān)于絕對(duì)單位和相對(duì)單位，網(wǎng)上相關(guān)文章很多，并且也一直是 Web 前臺(tái)的熱門話題，本文簡(jiǎn)單起見(jiàn)，直接使用絕對(duì)單位。

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


　　之后的搜索表單，我們碰到了樣式化的難點(diǎn)，首先作為搜索的 size 為 55 的輸入框從布局上來(lái)說(shuō)是絕對(duì)居中的，而右側(cè)高級(jí)搜索那三項(xiàng)的寬度加上輸入框在內(nèi)并不是絕對(duì)居中。也就是說(shuō)視覺(jué)上，高級(jí)搜索那三項(xiàng)偏右了。如下圖所示：


　　這里我們使用絕對(duì)定位的方法來(lái)處理它（在 HTML 中將高級(jí)搜索這三項(xiàng)的內(nèi)容放入 form 之內(nèi)）：


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


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


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

　　本例的最終代碼還能夠有進(jìn)一步的優(yōu)化，做法每個(gè)人習(xí)慣不同，希望本文能夠幫助到大家。

懌飛補(bǔ)充：
　　1、對(duì)于“?”使用代碼“＆raquo;”來(lái)代替;
　　2、label寫法推薦寫成 <label for="foo"> 針對(duì) id 為 foo 的 label </label>。因?yàn)?lt;label><input />xxxxx</label>只有在FF等對(duì)標(biāo)準(zhǔn)支持很好的瀏覽器里才顯示正常，在IE6中無(wú)法顯示正常的效果。
　　3、對(duì)于strong，需要重點(diǎn)顯示出來(lái)的內(nèi)容，可以使用strong，而對(duì)于布局里需要區(qū)分主次點(diǎn)的部分，就寫到樣式里，比如分類的一級(jí)分類為粗體，二級(jí)分類為一般字體……，其實(shí)strong對(duì)于搜索引擎優(yōu)化也有一定的作用，搜索引擎會(huì)優(yōu)先strong的內(nèi)容，而寫在樣式里就不會(huì)有這樣的效果！