<h2>概述</h2>
HTML網頁的描述是由上到下，逐行的方式顯示，HTML5之前要製作區塊內容都是用div標籤來設計，但在HTML5中新增文件結構功能，讓網頁能以區塊的形式呈現。
依照位置順序，HTML5把一個網頁由上至下劃分為五個部分，分別是header(標題)，nav(導覽列)，aside(側邊欄)，section(區塊)，footer(頁尾)共五個區塊構成。
L5與CSS--網頁版型--雙欄式與三欄式版型解說</b>
http://youtu.be/nl4TJ4MsFHI
<iframe width="853" height="480" src="//www.youtube.com/embed/nl4TJ4MsFHI?rel=0" frameborder="0" allowfullscreen></iframe>
order="0" allowfullscreen></iframe>
[hr]
<b>HTML5與CSS--網頁版型--雙欄式與三欄式版型解說</b>
http://youtu.be/nl4TJ4MsFHI
<iframe width="853" height="480" src="//www.youtube.com/embed/nl4TJ4MsFHI?rel=0" frameborder="0" allowfullscreen></iframe>
[hr]
<h2>網頁版型的語法</h2>
本範例以HTML與CSS於同一檔案撰寫的方式製作
雙欄式網頁版型：http://mepopedia.com/~jinjin/web/hw07-102/
[IMG]http://i.imgur.com/JElFVds.jpg[/IMG]
<h3>雙欄式網頁版型</h3>
<xmp><!DOCTYPE html>
<html>
<head>
<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>
</head>
<body>
<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>
</body>
</html></xmp>
[hr]
<h3>三欄式網頁版型</h3>
本範例以HTML與CSS分開檔案撰寫的方式製作
三欄式網頁版型：http://mepopedia.com/~jinjin/web/hw07-102/index-3.html
<img width="100%" src="http://i.imgur.com/ODpBzoc.jpg" border="0">
將以下HTML5語法複製於index-3.html的檔案
<h4>HTML5部分</h4>
<xmp><!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>三欄式網頁版型</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<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>
</body>
</html></xmp>
<h4>CSS部分</h4>
將以下CSS語法，複製於style.css檔案中，與前述index-3.html放置於同一資料夾中
<xmp>@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;
}</xmp>
[hr]
<h2>特別注意</h2>
1.高度原則上以內容為主，若有設定高度須加上padding之上下高度為實際高度。
2.寬度設定也須加上padding左右之寬度為實際寬度。
[hr]
