|
今天我們來學(xué)習(xí)用 Web 標(biāo)準(zhǔn)的方法來制作 Google 首頁（中文）。Google 首頁一直是用 table 布局的。我們把 Google 首頁用 PrtScr 截屏，作為制作時的設(shè)計稿參考，并且不打開 Google 首頁查看其源代碼——就當(dāng)它不存在。這樣和真實項目工作比較接近。
第一部分、HTML 的構(gòu)建（基于XHTML Transitional）
從設(shè)計稿上看到的內(nèi)容，去揣摩結(jié)構(gòu)。因為整個頁面內(nèi)容較少，容易理解，但也碰到了我們的第一個問題：是用 <p> 標(biāo)簽還是 <div>？各自代表著 paragraph 和 division，原則上說，這個頁面上沒有任何的段落存在，所以不應(yīng)該用 <p>。但這里涉及到一個問題，拋開樣式表顯示的話，用 <p> 更加的清晰，因為默認 <div> 的 margin 和 padding 值都為零。好吧，用 <p> 還是用 <div> 是一個個人喜好問題，但是原則上應(yīng)當(dāng)用后者。在本例中也使用后者。開始找個稱手的編輯器寫 HTML ：
<div><strong>junchenwu@gmail.com</strong> | <a href="ig">個性化主頁</a> | <a href="MyAccount">我的帳戶</a> | <a href="logout">退出</a></div>
<div><img src="http://www.google.com/intl/zh-CN_ALL/images/logo.gif" alt="Google" /></div>
這包括頭部的登陸狀態(tài)和中間的大 Logo。我們先不增加任何樣式 id 和 class。
然后我們看到中間有“網(wǎng)頁 圖片 資訊 論壇 更多 »”這些鏈接。怎么做？一般就兩種寫法，看個人喜好。把這幾個鏈接寫一行里面或者寫在一個 ul 里面，如下：
<div><strong>網(wǎng)頁</strong> <a href="pic">圖片</a> <a href="info">資訊</a> <a href="group">論壇</a> <a href="more"><strong>更多 »</strong></a></div>
或者：
<ul>
<li><strong>網(wǎng)頁</strong></li>
<li><a href="pic">圖片</a></li>
<li><a href="info">資訊</a></li>
<li><a href="group">論壇</a></li>
<li><a href="more"><strong>更多 »</strong></a></li>
</ul>
這兩種寫法各有什么優(yōu)缺點呢？這里一共有 5 項，第一項是加粗的文字，其余 4 項是鏈接。如果使用第一種寫法對于樣式的控制就顯得力不從心，比如控制這 5 項之間的間距；如果使用第二種寫法，那么在脫離樣式的情況下，分了 5 行顯示。這里我把缺點都寫出來，根據(jù)本例情況，我們還是選擇第一種寫法，這樣要控制樣式就需要在每一項前后增加無意義的 <span>。
我們先繼續(xù)往下寫，遇到了搜索表單以及邊上的高級搜索等三個鏈接。先寫哪一個？看上去是平級的啊。這個時候最好問一下產(chǎn)品設(shè)計師的本意。我們在這里先寫表單。如下：
<form action="" method="post">
<div><input type="text" size="55" title="Google 搜索" /></div>
<div><button type="submit">Google 搜索</button><button>手氣不錯</button></div>
<div><label><input type="radio" name="t" checked="checked" /> 搜索所有網(wǎng)頁</label> <label><input type="radio" name="t" /> 中文網(wǎng)頁</label> <label><input type="radio" name="t" /> 簡體中文網(wǎng)頁</label></div>
</form>
注意給每一項 radio button 添加一個 label，具體的效果大家可以自行測試一下。另外這里采用了 label 包含的寫法，也可以寫成 <label for="foo"> 針對 id 為 foo 的 label </label>。怎么寫這也是看個人喜好的。
接下來是高級搜索等三個鏈接，以及底部的版權(quán)信息等，代碼如下：
<div><a href="advanced_search">高級搜索</a> <a href="pref">使用偏好</a> <a href="lang">語言工具</a></div>
<div><a href="ad">廣告計劃</a> - <a href="all">Google 大全</a> - <a href="en">Google.com in English</a></div>
<div>©2007 Google</div>
到這里我們基本完成了 Google 首頁的 HTML 構(gòu)建，這里是樣例文件，待會兒我們還會再修整一部分代碼。
出處：藍色理想
責(zé)任編輯：blue
上一頁 下一頁 Web 標(biāo)準(zhǔn)實踐——Google 的首頁 [2]
◎進入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
第 1 頁 Web 標(biāo)準(zhǔn)實踐——Google 的首頁 [1]
第 2 頁 
