此篇內容全數收錄於光碟，提供五個小型的案例實作，示範本書第一篇至

第五篇所討論的技術應用。

第二十四章　版型設計

第二十五章　塗鴉板

第二十六章　便利貼

第二十七章　花漾美人寫真作品集

第二十八章　線上輕小說

第六篇

HTML5 完美風暴 PART 6

HTML5 完美風暴(第二版)

版型設計 24

24-2

HTML5 完美風暴

24.1 案例架構與功能導覽首 頁

最新消 息

系列叢 書

關於 我

與我連 絡

邊欄連 結

24.2 網頁實作<header ><aside ><footer >網頁主體內 容

SUMMARY

HTML5 完美風暴(第二版)

11.1　進入 HTML5 之前必須瞭解的事實

24-3

版型設計

HTML5 完美風暴 PART 1

第二十四章

HTML5 完美風暴(第二版)

版型設計 24

24-2

進入案例研究篇的第一個章節，將以一個小型的個人資訊網站，示範套用

HTML5語意元素的版型設計，提供實際的 HTML5 語意標籤運用示範。

24.1 案例架構與功能導覽此套樣板設計的目標在於介紹筆者個人出版作品與相關資訊，這個版型總共有六

個網頁檔案，下表列舉功能說明。

檔　案 導　覽 說　明

index.html 首頁 版型首頁。

news.html 最新消息 個人最新活動資訊。

category.html 系列叢書 出版圖書分類連結標示。

bookInfo.html － 各系列出版圖書清單列表。

about.html 關於我 作者個人經歷簡介。

contact.html 與我連絡 傳送資訊表單。

由於只是版型設計，因此這些網頁僅提供展示性質，所有的網頁均共用相同的導

覽功能，可以導覽至其中任何一頁，但是 bookInfo.hrml 這個網頁例外，它根據指

定的連結動態呈現特定分類的書籍清單。

HTML5 完美風暴(第二版) 24-3

24.1　案例架構與功能導覽

首頁

頁首

邊欄

頁尾頁首主體內容

導覽列

這是使用者進入的第一個網頁，頁面中間展示最新出版的三本圖書，也是首頁主

要呈現的內容，其它包含導覽列、邊欄以及頁尾則是共用的部分。

HTML5 完美風暴(第二版)

版型設計 24

24-4

最新消息

最新消息

透過點選頁首的「最新消息」連結進入此頁，套用相同的樣板，而畫面中央此次

呈現與個人動態有關的最新消息。

HTML5 完美風暴(第二版) 24-5

系列叢書

出版圖書分類清單

點選「系列叢書」連結出現此頁面，其中呈現四個方塊，分別連結至四類筆者現

在與過去出版過的圖書清單。

24.1　案例架構與功能導覽

HTML5 完美風暴(第二版)

版型設計 24

24-6

關於我

個人經歷介紹

點選「關於我」連結至此頁，除了網頁共同的內容之外，就是個人經歷的相關介

紹內容。

HTML5 完美風暴(第二版) 24-7

與我連絡

最後一個主要的網頁，提供使用者與作者個人聯繫的窗口，配置三個可供輸入的

文字方塊，以及傳送按鈕，由於只是版型示範，因此僅提供內容配置，沒有伺服

器端的連結溝通程式碼。

24.1　案例架構與功能導覽

HTML5 完美風暴(第二版)

版型設計 24

24-8

邊欄連結

這套版型中所有的網頁均共用相同的邊欄，而邊欄中除了作者個人的名片之外，

中間的系列叢書提供四個出版圖書分類的直接連接，這與首頁按下「系列叢書」

呈現的四個方塊連結相同，任意按下其中一項分類連結，可以連結至 bookInfo.

html 這個網頁，例如，接下來的畫面是按下「HTML5」出現的結果：

分類參數

畫面的左邊出現與此分類有關的系列叢書清單，按下其它系列連結顯示的是同一

個網頁，只是網址列參數改變，並調整出現的清單，例如下頁是「程式設計教

學」分類連結網頁畫面：

HTML5 完美風暴(第二版) 24-9

分類參數

此畫面是相同的網頁檔案 bookInfo.html ，只是根據分類參數顯示不同的書籍清單。

最後一塊則是與作者個人有關的網站連結，任意點擊其中的連結，可以顯示相關

的網站內容。

24.1　案例架構與功能導覽

HTML5 完美風暴(第二版)

版型設計 24

24-10

24.2 網頁實作實作的第一步是建立共用的內容區塊，將其切割成四個部分，並且以合適的標籤

進行配置：

完成標籤配置之後，接下來逐一建立各區塊內容，中間變動的部分稍後再談。

<header>

首先來看看 <header> 的部分，這一部分比較單純，建立所需的連結即可：

<header> <div class="container"> <nav> <ul> <li><a href="index.html"><span>首頁 </span></a></li> <li><a href="news.html"><span>最新消息 </span></a></li> <li><a href="category.html"><span>系列叢書 </span></a></li> <li><a href="about.html"><span>關於我 </span></a></li> <li><a href="contact.html"><span>與我聯絡 </span></a></li> </ul> </nav> </div>

</header>

其中利用清單配置四個連結，然後透過 CSS 套用以橫式清單呈現。

HTML5 完美風暴(第二版) 24-11

<aside>

邊欄的 <aside> 配置作者個人名片以及相關出版品分類、網站資源連結，同樣

的，其中建立所需的連結內容：

<aside> <div id="logo"> <img src="images/kaohsu.png" /> </div> <section> <h1> <span>系列叢書</span></h1> <ul class="aside_list"> <li><a href="bookInfo.html?cat=html5"><span>HTML5</span></a></li> <li><a href="bookInfo.html?cat=prog"><span>程式設計教學</span></a></li> <li><a href="bookInfo.html?cat=net"><span>dot NET</span></a></li> <li><a href="bookInfo.html?cat=java"><span>Java</span></a></li> </ul> </section> <section> <h1> <span>網站連結</span></h1>

<ul class="aside_list"> <li><a href="http://www.kangting.tw"><span>康廷數位</span></a></li> <li><a href="http://html5.kangting.tw"> <span>康廷數位學院-HTML5</span></a></li> <li><a href="http://www.dotblogs.com.tw/kangting/"> <span>呂高旭 Blog</span></a></li>

</ul> </section>

</aside>

邊欄配置於 <aside> 標籤，並且透過兩個 <section> 配置所需的兩組連結，請特別

注意「系列叢書」中的四個連結，分別代表四種書籍分類，連結至 bookInfo.html

並且分別指定其所屬的分類參數。

<footer>

這個配置最簡單，提供版權宣告與相關的網頁製作資訊。

網頁主體內容

最後是網頁的主體內容，我們將其配置於 <section> 當中，當然你也可以選擇使用

<div> 標籤來組織這一個區塊的內容。其中根據不同的網頁進行相關的實作，由

於均是靜態內容，請讀者自行開啟本章專案檢視即可，這裡僅針對提供書籍分類

資訊的 bookInfo.html 進行討論，此網頁根據使用者點選的連結網址分類參數，動

態呈現部分內容，網頁的內容結構如下頁：

24.2　網頁實作

HTML5 完美風暴(第二版)

版型設計 24

24-12

<section id="html5" class="bookcat"> <h1> <span>HTML5 系列圖書 </span></h1> <div class="recent"> <ul class="r-list"> <li> <div> <div class="book-introduce"> <a href="…"> <img … /></a> <h4> HTML5 精要剖析 </h4> <p> HTML5 的入門書… </p> </div> </div> </li> <li> <div> <div class="book-introduce"> <a href="http://html5.kangting.tw"> <img class="bookimg" src="images/htmpps.jpg" /></a> <h4> HTML5 完美風暴 </h4> <p> 直擊 HTML5 核心… </p> </div> </div> </li> </ul> </div>

</section><section id="prog" class="bookcat"> <h1> <span>程式設計教學 </span></h1>

</section><section id="java" class="bookcat"> <h1> <span>Java 平台系列圖書 </span></h1>

//清單內容…</section><section id="net" class="bookcat"> <h1> <span>.NET 平台系列圖書 </span></h1>

//清單內容…</section>

利用 <section> 將所有的書籍分成四個類型，並且以 id 作為識別，礙於篇幅，僅

列舉第一個分類，為了動態顯示，預先透過 CSS 將 class 為 bookcat 的所有 <sec-

tion> 標籤內容隱藏：

HTML5 完美風暴(第二版) 24-13

section.bookcat{ display:none;

}

然後撰寫一支 JavaScript 程式 bookinfo.js ，內容如下：

window.onload = function () { var cats = ['html5', 'prog', 'net', 'java']; var urlString = window.location.toString(); var urls = urlString.split('?'); var cat = urls[1].split('=')[1]; if (urls[1]) { for (key = 0; key < cats.length; key++) { if (cats[key] == urls[1].split('=')[1]) { document.getElementById(cats[key]).style.display = 'inline'; } else { document.getElementById(cats[key]).style.display = 'none'; } } }

}

這支程式很簡單，在每一次網頁載入完成之後，根據所取得的 url 參數，動態切

換 display 樣式，最後將這支程式嵌入 bookInfo.html 即可。

SUMMARY本章的案例示範了 HTML5 語意標籤於建立網頁內容區塊的實際應用，讀者必須

瞭解的是，相關標籤的運用非常彈性，除了大原則的遵循之外，你可以根據自己

的風格建立專屬的標籤套用方式。

SUMMARY