創建簡單的響應式HTML5模版 - fengyuqing－IT工程師數位筆記本

文章出處

HTML5目前發展勢頭良好，已經逐漸得到大部分瀏覽器不同程度的支持。許多web開發者也已經學習到了不少關于HTML 5的基礎知識并開始試圖使用HTML 5制作網頁。與此同時，目前基于響應式的網頁設計理念也得到了廣泛的認同，開發者在開發基于HTML 5的網頁時，如果能創建響應式的頁面，則會增色不少，特別是能適配各類移動終端。在本文中，讀者將學習到如何創建一個簡單的響應式HTML 5模版。本文的讀者需要有一點HTML 5的基礎知識。

創建良好的HTML 5模版的特征有：

新的特性應該只是基于HTML、CSS、DOM和Javscript
減少使用外部插件（如Flash）
良好的容錯設計
使用更多的標簽而不是太多的腳本
HTML 5應該是和設備無關的
開發過程應該是可視化的

在本文中，使用Adobe Macromedia Dreamweaver進行開發

步驟1 創建空白的HTML 5模版

首先，我們創建一個空白的模版，代碼很簡單，如下所示：

<!DOCTYPE HTML> 
<html> 
<head> 
<title></title> 
</head> 
 
<body> 
</body> 
 
</html>

步驟2 增加HTML 5新標簽

HTML 5中新增加了不少標簽，如：

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section

在頁面模版中，我們需要確保每個區域都能正確地對齊，因此需要使用HEADER、NAVIGATION、 CONTENT、 SIDEBAR和Footer這些標簽。代碼如下所示：

<!DOCTYPE HTML> 
<html> 
<head> 
<title></title> 
</head> 
 
<body> 
<div id="wrapper"> 
 
<!—開始區域 --> 
<header></header> 
<nav></nav> 
<section class="content"></section> 
<aside class="sidebar"></aside> 
<footer></footer> 
<!—結束區域--> 
 
</div> 
</body> 
 
</html>

讀者可能留意到這里使用的div id=”wrapper”，這個是稍候用來做meida query的時候調整全局CSS樣式調整用的
步驟3 往HTML 5標簽中增加代碼
a) 首先往標題中增加如下代碼：

<header> 
<hgroup> 
　<h1 class="site-title"><a href="#">Simple HTML5 Template</a></h1></hgroup> 
</header>

b) 往<nav>導航標簽中添加如下代碼，這樣很方便地構件了一個簡單的頁面分類導航：

<nav> 
 
<ul> 
 
<li><a href="#">Home</a></li> 
 
<li><a href="#">About</a></li> 
 
<li><a href="#">Parent Page</a> 
 
<ul> 
 
<li><a href="#">Child One</a></li> 
 
<li><a href="#">Child Two with child</a> 
 
<ul> 
 
<li><a href="#">Child One</a></li> 
 
<li><a href="#">Child Two</a></li> 
 
<li><a href="#">Child Three</a></li> 
 
</ul> 
 
</li> 
 
<li><a href="#">Child Three</a></li> 
 
</ul> 
 
</li> 
 
<li><a href="#">Contact</a></li> 
 
</ul> 
 
</nav>

b) 使用<article>標簽來描述每一個要展示的內容實體,比如要展示的是多篇文章列表,其中的每一篇文章的具體內容就可以使用<article>標簽了。如下代碼所示：

<section class="content"> 
<!—文章１--> 
<article class="post"> 
<h1 class="post-title"><a href=#">This is a title for post</a></h1> 
<!-- 文章元數據--> 
<div class="entry post-meta"> 
<span class="post-author">Richard KS</span> 
<span class="post-date">20th March 2013</span> 
<span class="post-category">Tutorials</span> 
<span class="post-tag">HTML5, CSS3 and Responsive</span> 
<span class="post-comment">10 Comments</span> 
</div> 
<!-- 文章的內容 content --> 
<div class="entry post-content"> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s 
</div> 
</article> 
<!—文章1結束--> 
</section>

d) 添加<aside class=’sidebar’>標簽

HTML5提供的<aside>元素標簽用來表示當前頁面或文章的附屬信息部分，可以包含與當前頁面或主要內容相關的引用、側邊欄、廣告、nav元素組，以及其他類似的有別與主要內容的部分。

根據目前的規范，<aside>元素有兩種使用方法：

1 被包含在<article>中作為主要內容的附屬信息部分，其中的內容可以是與當前文章有關的引用、詞匯列表等。

2 在<article>之外使用，作為頁面或站點全局的附屬信息部分；最典型的形式是側邊欄(sidebar)，其中的內容可以是友情鏈接、附屬導航或廣告單元等。

代碼如下：

<aside class="sidebar"> 
<ul class="widget-sidebar"> 
 
<!-- some sample list --> 
<li class="widget widget_categories"> 
<h3 class="widget-title">Categories</h3> 
<ul> 
<li><a href="#">Category 1</a></li> 
<li><a href="#">Category 2</a></li> 
<li><a href="#">Parent Category</a> 
<ul class="children"> 
<li><a href="#">Child One</a></li> 
<li><a href="#">Child Two</a> 
<ul class="children"> 
<li><a href="#">Grandchild One</a></li> 
<li><a href="#">Grandchild Two</a></li> 
<li><a href="#">Grandchild Three</a></li> 
</ul> 
</li> 
<li><a href="#">Child Three</a></li> 
</ul> 
</li> 
<li><a href="#">Category 3</a></li> 
</ul> 
</li> 
 
<!-- some sample text block --> 
<li class="widget widget_text"> 
<h3 class="widget-title">Text</h3> 
<div class="textwidget"> 
Lorem Ipsum is simply dummy text of the printing and typesetting industry. 
</div> 
</li> 
 
</ul> 
</aside>

e) 加上最后的<footer>標簽，代碼為：

<footer> 
<div class="footer-left">Copyright@ 2013 HTML5.com</div> 
<div class="footer-right">Privacy Policy - About Us</div> 
</footer>

最后運行的效果如下：

步驟4 　增加CSS樣式
首先創建一個空白的樣式，如下：

<link href="style.css" rel="stylesheet" type="text/css">

然后在http://necolas.github.com/normalize.css/中下載這個css,然后將其內容復制到該空白的文件中代碼如下：

body { 
font-family: arial, sans-serif; 
font-size: 100%; /* best for all browser using em */ 
padding:0;  
margin:0; 
} 
 
*, html { line-height: 1.6em; } 
 
article img { width:auto; max-width:100%; height:auto; } 
 
.sidebar a, article a, header a, footer a { color: #C30; } 
header a { text-decoration: none; } 
 
#wrapper { 
font-size: 0.8em; /* 13px from 100% global font-size */ 
max-width: 960px; /* standard 1024px wide */ 
margin: 0 auto; 
} 
 
/* css for <header> */ 
header { 
    padding: 1em 0; 
    margin: 0px; 
    float: left; 
    width: 100%; 
} 
header hgroup { width: 100%; font-weight:normal; } 
 
 
/* css for <nav> */ 
nav { 
    display: block; 
    margin: 0 0 2em; 
    padding: 0px; 
    float: left; 
    width: 100%; 
    background-color: #181919; 
} 
nav ul ul {display: none;} 
nav ul li:hover > ul {display: block;} 
     
nav ul { 
    padding: 0; 
    list-style: none; 
    position: relative; 
    display: inline-table; 
    z-index: 9999; 
    margin: 0px; 
    float: left; 
    width: 100%; 
} 
nav ul:after {content: ""; clear: both; display: block;} 
 
nav ul li {float: left;} 
 
nav ul li:hover a {color: #fff;} 
 
nav ul li a { 
    display: block; 
    padding: 1em; 
    font-size: 1.125em; 
    color: #ccc; 
    text-decoration: none; 
    margin: 0px; 
    background-color: #000; 
    border-right: 1px solid #333; 
} 
nav ul li:last-of-type a {border-right: 1px solid transparent !important;} 
 
nav ul ul { 
    background: #5f6975; 
    border-radius: 0px; 
    padding: 0; 
    position: absolute; 
    top: 100%; 
    width: auto; 
    float: none; 
} 
nav ul li:hover { 
    background: #5f6975; 
    color: #FFF; 
} 
nav ul ul li a:hover { 
    background-color: #4b545f; 
} 
 
nav ul ul li { 
float: none; 
border-bottom: 1px solid #444240; 
position: relative; 
} 
 
nav ul ul li a { 
padding: 0.5em 1em; 
font-size: 1em; 
width:10em; 
color: #fff; 
}    
 
 
nav ul ul ul { 
position: absolute; left: 100%; top:0; 
} 
 
/* css for <section class='content'> */ 
section.content { width: 70%; float:left; } 
.content article { width:100%; float:left; padding: 0 0 1em; margin: 0 0 1em; border-bottom: 1px solid #ddd; } 
article .entry { clear:both; padding: 0 0 1em; } 
h1.post-title { font-size: 1.8em; margin:0; padding:0;} 
.entry.post-meta { color: #888; } 
.entry.post-meta span { padding: 0 1em 0 0; } 
.entry.post-content { font-size: 1.125em; margin:0; padding:0;} 
 
/* css for <aside class='sidebar'> */ 
aside.sidebar { width: 25%; float:right; } 
aside.sidebar ul { 
    width:100%; 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    list-style: none; 
} 
aside.sidebar ul li { 
    width:100%; 
    margin: 0px 0px 2em; 
    padding: 0px; 
    float: left; 
    list-style: none; 
} 
aside.sidebar ul li ul li { 
    margin: 0px 0px 0.2em; 
    padding: 0px; 
} 
aside.sidebar ul li ul li ul li { 
    margin: 0px; 
    padding: 0px 0px 0px 1em; 
    width: 90%; 
    font-size: 0.9em; 
} 
aside.sidebar ul li h3.widget-title { 
    width:100%; 
    margin: 0px; 
    padding: 0px; 
    float: left; 
    font-size: 1.45em; 
} 
 
/* css for <footer> */ 
footer { 
    width: 98%; 
    float:left; 
    padding: 1%; 
    background-color: white; 
    margin-top: 2em; 
} 
footer .footer-left { width: 45%; float:left; text-align:left; } 
footer .footer-right { width: 45%; float:right; text-align:right; }

步驟5 為移動應用使用@media query查詢
為了進行響應式設計，最佳的方案是使用@media query去進行查詢，在上面的CSS代碼中添加如下代碼：

/* ipad 768px */ 
@media only screen and (min-width:470px) and (max-width:770px){ 
body { background-color: red; } #wrapper { width:96%; font-size: 0.6875em; } 
section.content, aside.sidebar { width:100%; } 
} 
 
/* iphone 468px */ 
@media only screen and (min-width:270px) and (max-width:470px){ 
body { background-color: yellow; } #wrapper { width:96%; font-size: 0.6875em; } 
section.content, aside.sidebar { width:100%; } 
}

步驟6 增加jquery,modernizer和html5shiv到<head>標簽中
這里推薦使用Modernizr 和html5shiv，它們都是一個能在多種瀏覽器中通過運行各種腳本兼容運行支持大部分HTML 5標簽的插件。我們將它們和jQuery庫放在</head>標簽前，

代碼如下：

　<!--[if lt IE 9]> 
<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script> 
<![endif]--> 
<script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script> 
<script src="modernizr-latest.js" type="text/javascript"></script>