WEB標準實踐 - Google首頁

來源:互聯網
上載者:User
web|web標準|Google

今天我們來學慣用 Web 標準的方法來製作 Google 首頁(中文)。Google 首頁一直是用 table 布局的。我們把 Google 首頁用 PrtScr 截屏,作為製作時的設計稿參考,並且不開啟 Google 首頁查看其原始碼——就當它不存在。這樣和真實項目工作比較接近。

第一部分、HTML 的構建(基於XHTML Transitional)

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

<div><strong>junchenwu@gmail.com</strong> | <a href="ig">個人化首頁</a> | <a href="MyAccount">我的帳戶</a> | <a href="logout">退出</a></div>
<div><img src="/UploadPic/2007-4/200741154434687.gif" alt="Google" /></div>

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

然後我們看到中間有“網頁 圖片 資訊 論壇 更多 »”這些連結。怎麼做?一般就兩種寫法,看個人喜好。把這幾個連結寫一行裡面或者寫在一個 ul 裡面,如下:

<div><strong>網頁</strong> <a href="pic">圖片</a> <a href="info">資訊</a> <a href="group">論壇</a> <a href="more"><strong>更多 »</strong></a></div>

或者:

<ul>
<li><strong>網頁</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>

這兩種寫法各有什麼優缺點呢?這裡一共有 5 項,第一項是加粗的文字,其餘 4 項是連結。如果使用第一種寫法對於樣式的控制就顯得力不從心,比如控制這 5 項之間的間距;如果使用第二種寫法,那麼在脫離樣式的情況下,分了 5 行顯示。這裡我把缺點都寫出來,根據本例情況,我們還是選擇第一種寫法,這樣要控制樣式就需要在每一項前後增加無意義的 <span>。

我們先繼續往下寫,遇到了搜尋表單以及邊上的進階搜尋等三個連結。先寫哪一個?看上去是平級的啊。這個時候最好問一下產品設計師的本意。我們在這裡先寫表單。如下:

<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" /> 搜尋所有網頁</label> <label><input type="radio" name="t" /> 中文網頁</label> <label><input type="radio" name="t" /> 簡體中文網頁</label></div>
</form>

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

接下來是進階搜尋等三個連結,以及底部的著作權資訊等,代碼如下:

<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 構建,這裡是範例檔案,待會兒我們還會再修整一部分代碼。

[1] [2] 下一頁



相關文章

Alibaba Cloud 10 Year Anniversary

With You, We are Shaping a Digital World, 2009-2019

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。