如何使用簡單的代碼設計RWD網頁 — RWD教學
- 需要知識：基本HTML5、基本CSS3
- 需要工具：HTML編輯器和Web瀏覽器
越來越多人只用手機和平板上網買東西、查詢資料、學習。根據2018年智慧型設備統計，智慧型手機的使用率在全球將會達到61.2%。預計2019年會再次成長，達到63.4%的使用率。
資料來源：https://www.statista.com/statistics/284202/mobile-phone-internet-user-penetration-worldwide/
在某些尚未更新的網站上，你能發現在使用手機瀏覽網站時，文字太小、連結很難點擊，頁面需要不停放大、縮小，才能找到你喜歡的資訊，這對用戶體驗非常糟糕。
Google也建議我們使用響應式網頁設計(RWD)的最佳做法，也就是幫所有的網頁都用HTML切版，並利用CSS3優化網站在不同大小設備上的表現。Google希望看到你是“一個網站”，而不是很“多個”針對不同設備的“獨立網站”，Google也獎賞具備RWD功能的網站並給予更多曝光量。
為什麼RWD這麼重要?
RWD切版的目的是為了提供用戶最佳的網站體驗，無論你使用什麼類型的設備瀏覽網頁，都能完美呈現出網站本身要表達的內容，不需要一直調整大小、平移。
有許多框架可以用來做RWD切版，像是Skeleton、Bootstrap、Foundation等等。如果你對於RWD很陌生，就先從了解這些框架的基本概念吧 ！
這次RWD教學的目標
這篇文章的目的是幫助你使用HTML5和CSS3構建基本的RWD主頁，利用”media queries(媒體設備查詢)“的CSS指令，幫助網站頁面在不同設備中完美適應。
教程步驟
設定區塊
在本教程我們使用基本的HTML5元素<header>，<nav>，<section>，<aside>和<footer>。其中我們會講解如何構造一個簡易的頁面內容結構，以及從header到footer的HTML元素排列。
我們還使用了兩個圖像：HTML頁面左上角的trlip-header.jpg以及頁面中間出現的大圖。((圖像文件放置網站資料夾的目錄中
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"/> <title>響應式網站-基本Code</title> </head> <body> <!—重要的是添加一個文檔包裝div，它保存 應該出現在任何設備的視口中的正文容器中的所有內容 --> <div id="wrapper"> <!— 頁首區塊開始 --> <header> <h1>JUMKITE</h1> <!— 選單開始 --> <nav> <ul> <li><a href="#" title="Home">首頁</a></li> <li><a href="#" title="About">關於JUMKITE</a></li> <li><a href="#" title="Work">服務項目</a></li> <li><a href="#" title="Contact">聯絡方式</a></li> </ul> </nav> <!— 選單結束 --> <!--- 插入一張網站的banner大圖 --> <div id="banner"> <img src="wp-content/uploads/2018/05/man-working-on-his-laptop-computer-picjumbo-com.jpg" alt="banner" /> </div> <!--- banner區塊結束 --> <!--- 頁首區塊結束 --> </header> <!---主要內容區塊開始 --> <section id="main"> <h2>關於JUMKITE</h2> <p>"如果您需要架設一個網站，我們保證您的網站在所有設備上都能達成一致性，並針對您的客戶族群使用習慣做不同的改變，讓您的網站能發揮出最大的效益，抓住每個客戶的心，讓他們再也離不開您的網站！我們相信許多雇主剛踏入網路行銷的領域中有許多疑惑，並不清楚我們將如何推廣您的生意，我們擁有最友善的客服機構，在您充滿疑惑的時候，能夠第一時間滿足您的需求、解決您的疑惑，並達成共識。我們保證每一位客戶的方案都是完全客製化的，不論是網頁設計、SEO優化，甚至是制定網路行銷策略，我們都將站在您的角度規劃這一切，透過產業分析、行銷心理學，我們將幫助您制定出最適合您的客製化方案。"</p> </section> <!--- 主要內容區塊結束 --> <!--- 右邊內容區塊開始 --> <aside> <h2>我們的任務</h2> <p>"合箏透過最新的網路行銷技術，成熟的搜索引擎優化（SEO）系統幫助客戶增加自然搜尋流量。很高興您選擇與合箏合作，我們能將您的網站變成網路企業中的佼佼者，讓您的網站推廣到那些需要您提供的產品、服務的地方，藉此幫助用戶找到您，使您的網站獲得應有的曝光率。將訪客轉化為客戶並最大限度的提高業績，所需的不僅僅是流量，這就是為什麼我們提供網路行銷服務，合箏能在”轉化路徑的每個階段“實現訪客的最大價值。我們整合一切，從最開始的形象設計、SEO優化，到之後的品牌行銷策略。我們把誠信放在首要位置，我們希望帶給客戶的不只是業績，還有笑容。 </p> </aside> <!--- 右邊內容區塊結束 --> <!--- 頁尾區塊開始 --> <footer> Copyright © 2018 jumkite.com, Inc. All rights reserved. EMAIL: <a href="mail:jumkite@gmail.com">jumkite@gmail.com</a> PHONE: <a href="tel:+000-000-0000">000-000-0000</a> </footer> <!--- 頁尾區塊結束 --> <!-- 關閉文檔 --> </div> </body> </html>
在較舊的瀏覽器中使RWD正常運行
舊的瀏覽器需要一些幫助來處理RWD頁面。版本9之前的Internet Explorer版本不允許在不使用JavaScript的情況下對未知元素（如HTML5）進行樣式選配。IE版本6-8不識別media queries(媒體設備查詢)。
-
- HTML5Shiv是由Sjoerd Visscher創建的一種JavaScript解決方法，可在版本9之前的Internet Explorer版本中對HTML5元素進行樣式設置。
-
- Polyfill是一個快速和輕量級的，可幫助IE 6-8瀏覽器識別媒體查詢。
在</title>標記之後，將以下HTML5Shiv和響應代碼添加到index.html文件中。（請注意，respond.min.js已經位於rwd-tutorial目錄下的文件夾中。
<!-- HTML5 Shiv --允許在版本9之前的Internet Explorer版本中對HTML5元素進行樣式設置，不允許在未使用JavaScript的情況下對未知元素進行樣式設置-->
<!--[if lt IE 9]>
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!--允許IE6-8瀏覽器識別媒體查詢-->
<script type="text/javascript" src="scripts/respond.min.js"></script>
保存index.html。在瀏覽器中預覽該文件。
所有內容顯示為左對齊。這是因為我們尚未加入任何CSS，並將其應用於HTML5代碼。
為頁面佈局和元素樣式添加CSS
使用您的HTML編輯器，打開位於rwd-tutorial目錄下styles文件夾中的名為stylesheet.css的文件。
檢查CSS聲明
有些事情要注意：
| a） wrapper margin: auto; | 將包裝div中包含的所有內容作為一個組集中 |
| b）wrapper max-width: 920px; | 阻止網站內容在超大型監視器上無法控制 |
| c）main float:left; | 將主要內容部分與左側對齊 |
| d）aside float:right; | 對齊佈局中右列的內容。 |
| e）#goTo | 此聲明僅用於手機導航。 本教程稍後會詳細介紹。 |
/* Reset
------------------------------------------------------------ */
* { margin: 0; padding: 0; }
html { overflow-y: scroll;}
body { background:#ffffff; font-size: 13px; color: #666666; font-family: Arial, helvetica, sans-serif;}
ol, ul { list-style: none; margin: 0;}
ul li { margin: 0; padding: 0;}
h1 { margin-bottom: 10px; color: #111111;}
a, img { outline: none; border:none; color: #000; font-weight: bold; text-transform: uppercase;}
p { margin: 0 0 10px; line-height: 1.4em; font-size: 1.2em;}
img { display: block; margin-bottom: 10px;}
aside { font-style: italic; font-size: 0.9em;}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
display: block;
}
/* Structure */
#wrapper {
width: 96%;
max-width: 920px;
margin: auto;
padding: 2%;
}
#main {
width: 60%;
margin-right: 5%;
float: left;
}
aside {
width: 32%;
float: right;
background: #fae1bd;
padding: 1%;
}
footer {
float: left;
clear:left;
margin-top: 15px;
margin-bottom: 15px;
width: 100%;
height:auto;
border-top: 3px solid #da000e;
padding-top:1%;
}
/* Logo H1 */
header h1 {
height: 70px;
width: 160px;
float: left;
display: block;
background: url(../images/tulip-header.jpg) 0 0 no-repeat;
text-indent: -9999px;
color: #000000;
}
/* Nav */
header nav {
float: right;
margin-top: 40px;
}
header nav li {
display: inline;
margin-left: 15px;
}
#goTo {
display: none;
}
#goTo li {
background: #f7b0b0;
}
/* Banner */
#banner {
float: left;
margin-bottom: 15px;
width: 100%;
}
#banner img {
width: 100%;
}
注意：對於不在背景中使用的圖像，最好將img聲明的property：value設置為width：100％。這將確保非背景圖像可以在每個設備上正確縮放。
7.將以下鏈接添加到index.html（在</ title>元素之後）以將樣式表聲明連接到HTML5頁面：
<link href="wp-content/themes/twentyseventeen/assets/css/stylesheet.css" type="text/css" rel="stylesheet">
8. 保存index.html。在瀏覽器中預覽該文件。
佈局現在結構化並且內容樣式正確。
設置視口
為各種設備優化的RWD頁面必須在文檔頭部包含元視口元素。一個中繼檢視區標記指示在不同的設備如何控制頁面的尺寸和縮放瀏覽器。
9.使用HTML編輯器，將以下代碼添加到index.html中，緊跟在</ title>元素之後：
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0" />
屬性width = device-width指示頁面與設備無關像素中的屏幕寬度相匹配。
屬性initial-scale = 1指示瀏覽器在CSS像素與設備無關像素之間建立1：1關係，而不考慮設備方向。
屬性minimum-scale = 1.0，maximum-scale = 1.0也可用於控制用戶縮放視口內容的能力。
10.保存index.html。
添加媒體查詢
11.使用您的HTML編輯器，從rwd-tutorial目錄下的styles文件夾中打開stylesheet.css文件。在#banner img聲明之後，將以下代碼複製並粘貼到CSS文件的底部。
/* Media Queries */
@media screen and (max-width: 480px) {
#goTo {
display: block;
}
header nav, #main, aside {
float: left;
clear: left;
margin: 0 0 10px;
width: 100%;
}
header nav li {
margin: 0;
background: #efefef;
display: block;
margin-bottom: 3px;
}
header nav a {
display: block;
padding: 10px;
text-align: center;
}
}
該@media規則是用來定義不同的媒體類型/設備的不同樣式規則。在這種情況下，我們要求具有480px或更小視口的任何設備使用這些樣式聲明來格式化和設置導航欄內容的樣式。標題中的導航菜單現在將在手機上以不同的方式顯示。
透過遵守這些媒體查詢規則，手機版選單將垂直顯示每個選單按鈕，並以灰色背景顯示。
保存stylesheet.css文件，重整桌面瀏覽器中的index.html文件，縮小瀏覽器窗口的大小，直到它寬度不到480px。然後，你會看到一個與桌面版本完全不同的移動設備選單。
為移動電話版本的頁面添加“轉到主要內容”鏈接
在stylesheet.css中的媒體查詢規則中，我們編寫了goTo 的ID規則，它應該顯示在寬度小於480px的設備上。
#goTo {
display: block;
}
我們將在首頁的頂部添加一個連結到主要內容區域。這能幫助移動用戶透過點擊連結直接帶到主要內容區域，不需要滑動介面。
注：此鏈接不會顯示在視頻寬度大於480像素的設備上。
1.使用你的HTML編輯器，打開index.html。
2.將以下內容複製並粘貼到<header>元素後面的代碼中：
<nav id="goTo">
<ul>
<li>
<a href="#main" title="Go to Main Content">Go to Main Content</a>
</li>
</ul>
</nav>
3.保存index.html文件，然後在桌面瀏覽器中刷新該文件。
4.減小桌面瀏覽器窗口的大小，直到它至少為480像素。然後，您應該看到頁面頂部的轉到主內容鏈接。
測試RWD網站
一旦您的RWD網站正式在伺服器上加載，你可以使用一個測試工具來檢查網站是否具備RWD功能，名為The Responsinator的線上測試工具，分別以不同設備測試您的響應式網站功能。
總結
在看完這篇文章後，你應該已經對HTML5和CSS3的響應式設計有了初步認知。
但請別停止學習！在資訊爆炸的時代，技術變化非常快速。電腦、平板、智慧型手機、筆記型電腦…多種智慧型設備不停在開發新產品，如果你的HTML5和CSS3結構足以跟上最新設備，並完美呈現網站內容，才能超越競爭對手！
合箏網路行銷桃園–更多關於行銷教學、網頁設計觀念、SEO教學，延伸閱讀：
網站跳出率太高?7種改善移動用戶體驗的方法
如何打造吸引人的網站?3個2018年網站必備功能
2018年網站設計趨勢，企業絕對需要了解！
是時候抓住這個機會了！開始在網路上整合資源、行銷曝光，讓你的企業發光發熱，我們能幫助你做到這一點！歡迎到聯絡頁面，寫信讓我們知道你的需求！
