Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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

1. 概述


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

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



2. 上課影片


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





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





3. 網頁版型的語法


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

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

http://i.imgur.com/JElFVds.jpg

1. 雙欄式網頁版型


<!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>


2. 三欄式網頁版型


本範例以HTML與CSS分開檔案撰寫的方式製作

三欄式網頁版型:http://mepopedia.com/~jinjin/web/hw07-102/index-3.html



將以下HTML5語法複製於index-3.html的檔案

1. HTML5部分


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

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


4. 特別注意


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





Edited 1 time(s). Last edit at 04/24/2014 01:22PM by JinJin.
(編輯記錄)