1. 概述
HTML網頁的描述是由上到下，逐行的方式顯示，HTML5之前要製作區塊內容都是用div標籤來設計，但在HTML5中新增文件結構功能，讓網頁能以區塊的形式呈現。
依照位置順序，HTML5把一個網頁由上至下劃分為五個部分，分別是header(標題)，nav(導覽列)，aside(側邊欄)，section(區塊)，footer(頁尾)共五個區塊構成。
[hr]
2. 上課影片
2014/4/22 2A
HTML5與CSS--網頁版型--雙欄式版型解說
http://youtu.be/pJ0NniIkkts
[hr]
HTML5與CSS--網頁版型--雙欄式與三欄式版型解說
http://youtu.be/nl4TJ4MsFHI
[hr]
3. 網頁版型的語法
本範例以HTML與CSS於同一檔案撰寫的方式製作
雙欄式網頁版型：http://mepopedia.com/~jinjin/web/hw07-102/
[IMG]http://i.imgur.com/JElFVds.jpg[/IMG]
1. 雙欄式網頁版型
<![CDATA[<!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>]]>
[hr]
2. 三欄式網頁版型
本範例以HTML與CSS分開檔案撰寫的方式製作
三欄式網頁版型：http://mepopedia.com/~jinjin/web/hw07-102/index-3.html
將以下HTML5語法複製於index-3.html的檔案
1. HTML5部分
<![CDATA[<!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>]]>
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;
}]]>
[hr]
4. 特別注意
1.高度原則上以內容為主，若有設定高度須加上padding之上下高度為實際高度。
2.寬度設定也須加上padding左右之寬度為實際寬度。
[hr]
Edited 1 time(s). Last edit at 04/24/2014 01:22PM by JinJin.
(
編輯記錄)
