【伯樂線上提示】：① 5月6日，谷歌開發者中心推出了一個 Web 開發最佳實踐手冊。伯樂線上資源頻道摘編該資源後，已邀請一些關注 Web 開發的朋友參與翻譯手冊。② 由於譯者朋友幾乎都是已在職，都是在工作之餘參與，每位的翻譯進度會不一樣（請理解），所以手冊中文版不會按照英文版章節順序釋出。③ 手冊中文版尚不完整，請不要轉載，謝謝合作。
【導讀】：內容是任何網站最重要的部分。因此，讓設計服務於內容，而不是設計決定內容。在這篇指南中，首先確定我們需要的內容，然後根據內容來建立結構，接著以簡單的線性佈局展示網頁。線性佈局在寬窄視口（ViewPort）方面具有良好效果。（注：ViewPort，視口、視覺視窗，即顯示區域）
本課內容：
- 建立網頁結構
- 向網頁新增內容
- 總結
建立網頁結構
確認我們的需求：
01 一塊描述我們高階產品 — “CS256：移動Web開發”教程–的區域
02 一個表單，用於收集對我們產品感興趣使用者的資訊
03 一段深入描述，以及視訊
04 一些實際課程產品中的圖片
05 一個資料表格，用來支援產品理念的資訊
學習重點
- 首先確定我們需要的內容
- 勾畫出資訊架構（IA）的窄、寬視口
- 建立內容頁面的骨架圖，無須樣式化
我們還分別從窄視口和寬視口出發，列出了粗略的資訊架構和佈局。
這很容易轉化成用於指導專案後續工作的網頁框架的粗略部分。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 |
<!doctype html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>CS256: Mobile Web development - structure</title> </head> <body> <div id="headline"> <h1></h1> <h2></h2> <div id="blurb"> <p></p> <ul> <li> </ul> </div> <form method="post" id="register"> </form> </div> <div id="section1"> <h2></h2> <p></p> <ul> <li> </ul> <video></video> </div> <div id="section2"> <h2></h2> <p></p> <div id="images"> <img> </div> </div> <div id="section3"> <h2></h2> <p></p> </div> <div id="footer"> <p></p> </div> </body> </html> |
向網頁新增內容
該網站的基本部分已經完成。我們清楚這部分及其要展示的內容，並且知道這部分在整個資訊架構中的各自位置。現在，我們開始擴建網站。
注意
- 之後新增樣式
建立標題和表單
標題和註冊申請表單是該頁面的關鍵部分，必須快速呈現給使用者。
新增標題僅需要幾行簡單的程式碼。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<div id="headline"> <div class="container"> <h1>Mobile Web Development</h1> <h2>Building Mobile Web Experiences</h2> <div id="blurb"> <p>So you've heard mobile is kind of a big deal, and you're not sure how to transform your traditional desktop-focused web apps into fast, effective multi-screen experiences.</p> <p>This course is designed to teach web developers what they need to know to create great cross-device web experiences.</p> <p>This course will focus on building mobile-first web apps, which will work across multiple platforms including:</p> <ul> <li>Android, <li>iOS, <li>and others. </ul> </div> <form method="post" id="register"> <h2>Register for the launch</h2> <label for="name">Name</label> <input type="text" name="name" id="name" placeholder="Thomas A Anderson" required /> <label for="email">Email address</label> <input type="email" name="email" id="email" placeholder="neo@example.com" required /> <label for="tel">Telephone</label> <input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required /> <input type="submit" value="Sign up"> </form> <br> </div> </div> |
我們還需要填充表單。表單簡易，用於蒐集使用者的名字、電話、回他們電話的恰當時間。
所有的表單應該具有標籤和placeholders（預期值的提示資訊），以便於使用者聚焦相應的元素，瞭解往其中應該填寫的內容，還有利於協助工具理解表單結構。名稱屬性不僅用於把表單值傳輸到伺服器，還用於瀏覽器針對使用者如何自動填寫表單問題上給出重要提示。
我們還新增了語義型別，使得使用者能夠更快、更簡單地在移動裝置上輸入內容。例如，當輸入電話號碼時，撥號鍵盤應恰好呈現在使用者眼前。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<form method="post" id="register"> <h2>Register for the launch</h2> <label for="name">Name</label> <input type="text" name="name" id="name" placeholder="Thomas A Anderson" required /> <label for="email">Email address</label> <input type="email" name="email" id="email" placeholder="neo@example.com" required /> <label for="tel">Telephone</label> <input type="tel" name="tel" id="tel" placeholder="(555) 555 5555" required /> <input type="submit" value="Sign up"> </form> |
相關資訊
瞭解更多關於如何建立酷炫的表單：
建立視訊和資訊區域
內容的視訊、資訊區域稍微複雜一些，包括了一個我們產品功能的專案符號列表，還包含一個展示我們產品服務於使用者的預留視訊。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<div id="section1"> <div class="container"> <h2>What will I learn?</h2> <p>After completing this class, you'll have built a web application with a first-class mobile experience.</p> <p>You'll understand what it takes to:</p> <ul> <li>build great web experiences on mobile devices</li> <li>use the tools you need to test performance</li> <li>apply your knowledge to your own projects in the future</li> </ul> <video controls poster="udacity.png"> <source src="udacity.mp4" type="video/mp4"></source> <source src="udacity.webm" type="video/webm"></source> <p>Sorry your browser doesn't support video. <a href="udacity.mov">Download the video</a>. </p> </video> <br> </div> </div> |
視訊通常以互動性較強的方式來描述內容，經常用來闡述一個產品或概念。
遵循最佳實踐原則，你可以輕鬆地在你的網站整合視訊：
- 新增controls屬性，方便人們播放視訊
- 新增poster圖片，提供內容預覽
- 新增多個<source>元素，以支援多種視訊格式
- 當視窗無法播放視訊時，新增帶視訊連結的文字，供人們下載視訊
1234567<video controls poster="udacity.png"><source src="udacity.webm" type="video/webm"></source><source src="udacity.mov" type="video/mov"></source><p>Sorry your browser doesn't support video.<a href="udacity.mov">Download the video</a>.</p></video>
相關資訊
瞭解更多關於網站使用視訊的最佳方式
建立圖片區域
沒有圖片的網站會略顯枯燥。有兩種型別的圖片：
- 內容圖片—嵌入文件的圖片，用於傳達其他內容資訊
- 樣式圖片—讓網站看起來更漂亮的圖片，包括背景圖片、圖案、漸變。我們將在下篇文章中講述。
圖片區域是內容圖片的集合。這些圖片出現在我們的產品中。
|
1 2 3 4 5 6 7 8 9 10 11 12 |
<div id="section2"> <div class="container"> <h2>Who will teach me?</h2> <p>The worlds leading mobile web developers.</p> <div id="images"> <img src="chriswilson.png" alt="Chris Wilson Course Instructor"> <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor"> <img src="seanbennett.png" alt="Sean Bennet Course Developer"> </div> <br> </div> </div> |
內容圖片對於傳達網頁的涵義有著至關重要的作用。想想報紙文章中使用的圖片吧。
|
1 2 3 4 5 |
<div id="images"> <img src="chriswilson.png" alt="Chris Wilson Course Instructor"> <img src="peterlubbers.png" alt="Peter Lubbers Course Instructor"> <img src="seanbennett.png" alt="Sean Bennet Course Developer"> </div> |
圖片設定成與螢幕寬度一樣寬。這個設定在移動裝置上行之有效，但在桌面程式中表現平平。我們將在響應式設計部分講述這個問題。
相關資訊
發現在內容中使用圖片的最佳實踐
新增資料列表部分
最後一部分是簡單的表格，用於列出產品的詳細統計資料。
表格僅限用於列表式資料，如資訊矩陣。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 |
<div id="section3"> <h2>Mobile. Why should I care?</h2> <p>It is huge. Everywhere.</p> <table> <caption> <p>Data from <a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-ww-monthly-201303-201403">StatsCounter</a></p> </caption> <thead> <tr> <th>Country</th> <th>Desktop share</th> <th>Tablet share</th> <th>Mobile share</th> </tr> </thead> <colgroup> <col span="1"> <col span="1"> <col span="1"> <col span="1"> </colgroup> <tbody> <tr> <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-IN-monthly-201303-201403">India</a></td> <td data-th="Desktop share">32%</td> <td data-th="Tablet share">1%</td> <td data-th="Mobile share">67%</td> </tr> <tr> <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-GB-monthly-201303-201403">GB</a></td> <td data-th="Desktop share">69%</td> <td data-th="Tablet share">13%</td> <td data-th="Mobile share">18%</td> </tr> <tr> <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-US-monthly-201303-201403">US</a></td> <td data-th="Desktop share">69%</td> <td data-th="Tablet share">9%</td> <td data-th="Mobile share">22%</td> </tr> <tr> <td data-th="Country"><a href="http://gs.statcounter.com/#desktop+mobile+tablet-comparison-CN-monthly-201303-201403">China</a></td> <td data-th="Desktop share">86%</td> <td data-th="Tablet share">4%</td> <td data-th="Mobile share">10%</td> </tr> </tbody> </table> <br> </div> |
新增頁尾
大部分網站需要一個頁尾，用來展示諸如條款和條件、免責宣告等內容，以及無須出現在頁面的主導航或主內容區域的其他內容。
在我們的網站中，我們將連結到使用條款和條件、聯絡頁面、以及我們的社交帳號。
|
1 2 3 4 5 |
<div id="footer"> <div class="container"> <p>We always need a footer.</p> </div> </div> |
總結
我們已經建立好了網站的大綱，確定了全部的主要框架元素。我們確信所有相關內容已經準備妥當，以滿足我們業務的需求。
你會發現，網頁現在看起來相當完美了，這是已經設計完的效果。內容是任何網站最重要的方面。我們需要確保擁有良好的資訊架構和堅實的資訊密度。這篇指南提供了優秀的建立網站基礎。我們將在下一篇指南中為內容設計樣式。