[講義] HTML5與CSS--網頁版型設定

44. 概述

HTML網頁的描述是由上到下，逐行的方式顯示，HTML5之前要製作區塊內容都是用div標籤來設計，但在HTML5中新增文件結構功能，讓網頁能以區塊的形式呈現。

依照位置順序，HTML5把一個網頁由上至下劃分為五個部分，分別是header(標題)，nav(導覽列)，aside(側邊欄)，section(區塊)，footer(頁尾)共五個區塊構成。

---

45. 上課影片

2014/4/22 2A
HTML5與CSS--網頁版型--雙欄式版型解說
http://youtu.be/pJ0NniIkkts

---

HTML5與CSS--網頁版型--雙欄式與三欄式版型解說
http://youtu.be/nl4TJ4MsFHI

---

46. 網頁版型的語法

本範例以HTML與CSS於同一檔案撰寫的方式製作

雙欄式網頁版型：http://mepopedia.com/~jinjin/web/hw07-102/

1. 雙欄式網頁版型

<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部分

<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放置於同一資料夾中

@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; }

---

47. 特別注意

1.高度原則上以內容為主，若有設定高度須加上padding之上下高度為實際高度。
2.寬度設定也須加上padding左右之寬度為實際寬度。

---