1. 概述
HTML網頁的描述是由上到下，逐行的方式顯示，HTML5之前要製作區塊內容都是用div標籤來設計，但在HTML5中新增文件結構功能，讓網頁能以區塊的形式呈現。
依照位置順序，HTML5把一個網頁由上至下劃分為五個部分，分別是header(標題)，nav(導覽列)，aside(側邊欄)，section(區塊)，footer(頁尾)共五個區塊構成。
2. 網頁版型的語法
本範例以HTML與CSS於同一檔案撰寫的方式製作
雙欄式網頁版型：
http://mepopedia.com/~jinjin/web/hw07-102/
![http://i.imgur.com/JElFVds.jpg]()
1. 雙欄式網頁版型
<![CDATA[
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>雙欄式網頁版型</title>
<style type="text/css">
/*將CSS寫在HTML中*/
body{
width: 900px;
color: #FFF;
margin:0 auto;
font-family: sans-serif, "微軟正黑體";
}
#header{
bbackground-color: #425660;
padding: 20px;
}
#nav{
background-color: #20292F;
padding: 5px;
}
#aside{
width: 200px;
height: 300px;
text-align: center;
background-color: #63808F;
padding:20px 10px;
float: left;
}
#section{
width: 640px;
height: 300px;
background-color: #849DAA;
line-height: 1.5em;
padding: 20px;
float: right;
}
#footer{
padding:20px;
background-color: #425660;
clear: both;
}
h1{
font-family: sans-serif, "微軟正黑體";
font-size: 18px;
color: #FFF;
text-align: center;
}
</style>
<header id="header">
<h1>HEADER 標題</h1>
</header>
<nav id="nav">
<h1>NAV 導覽列</h1>
</nav>
<aside id="aside">
<h1>ASIDE 側邊</h1>
</aside>
<section id="section">
<h1>SECTION 區塊</h1>
</section>
<footer id="footer">
<h1>FOOTER 頁尾</h1>
</footer>
]]>
2. 三欄式網頁版型
本範例以HTML與CSS分開檔案撰寫的方式製作
三欄式網頁版型：
http://mepopedia.com/~jinjin/web/hw07-102/index-3.html
![]()
將以下HTML5語法複製於index-3.html的檔案
1. HTML5部分
<![CDATA[
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>三欄式網頁版型</title>
<link href="style.css" rel="stylesheet" type="text/css">
<header id="header">
<h1>HEADER 標題</h1>
</header>
<nav id="nav">
<h1>NAV 導覽列</h1>
</nav>
<aside id="aside1">
<h1>ASIDE 左側邊</h1>
</aside>
<section id="section">
<h1>SECTION 區塊</h1>
</section>
<aside id="aside2">
<h1>ASIDE 右側邊</h1>
</aside>
<footer id="footer">
<h1>FOOTER 頁尾</h1>
</footer>
]]>
2. CSS部分
將以下CSS語法，複製於style.css檔案中，與前述index-3.html放置於同一資料夾中
<![CDATA[@charset "utf-8";
body{
width: 900px;
color: #FFF;
margin:0 auto;
font-family: sans-serif, "微軟正黑體";
}
#header{
background-color: #425660;
padding: 20px;
}
#nav{
background-color: #20292F;
padding: 5px;
}
#aside1{
width: 150px;
height: 300px;
text-align: center;
background-color: #63808F;
padding:20px 10px;
float: left;
}
#aside2{
width: 150px;
height: 300px;
text-align: center;
background-color: #63808F;
padding:20px 10px;
float: right;
}
#section{
width: 520px;
height: 300px;
background-color: #849DAA;
line-height: 1.5em;
padding: 20px;
float: left;
}
#footer{
padding:20px;
background-color: #425660;
clear: both;
}
h1{
font-family: sans-serif, "微軟正黑體";
font-size: 18px;
color: #FFF;
text-align: center;
}]]>
3. 特別注意
1.高度原則上以內容為主，若有設定高度須加上padding之上下高度為實際高度。
2.寬度設定也須加上padding左右之寬度為實際寬度。
