代碼: 選擇全部
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>視傳一AB-學號-網頁版面基本架構</title>
<link rel="stylesheet" href="style.css" media="screen" />
</head>
<body>
<div id="wrapper">
<div id="header"></div>
<div id="btn"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
代碼: 選擇全部
<!DOCTYPE html>
<html>
<head>
<title>學號-以色塊建構的網頁單欄排版</title>
<link rel="stylesheet" href="style.css" media="screen" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
</head>
<body>
<div id="wrapper">
<div id="header">
<h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解
</div>
<div id="content">
利用Div標籤與CSS建立基本網頁版型，以全國比較文學會議
<h3>一、Div標籤與CSS</h3>
在早期瀏覽器以IE為主的網頁設計時代，大多以表格(TABLE)或頁框(FRAME)，來製作網頁主要的定位與架構，但是隨著上網習慣的改變，網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等，目前網頁設計的架構，多半以DIV搭配CSS為設計主流，以Div標籤來建立網頁區塊，區分各個主要頁面做為主要的排版架構，搭配CSS語法來美化網頁，以往的網頁美化設定大多直接寫在HTML網頁本身，現在則分開以HTML為架構設定，CSS為美化設定，一個建築網頁架構，一個美化網頁。
<h3>二、單欄版型的範例</h3>
第一個進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。
<h3>三、DIV架構與尺寸分析</h3>
第一個進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。
</div>
<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址：新竹校區：303-01 新竹縣湖口鄉中山路三段530號 │台鐵北湖車站步行三分鐘到校 <br>
│最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by
</div>
</div>
</body>
</html>
代碼: 選擇全部
#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}
#header {
height: 150px; /*高度設定為150px*/
}
#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper)，所以可不用設定寬度*/
}
#footer {
/*可不用設定寬度和高度，由文字來決定*/
}
代碼: 選擇全部
body {
margin: 0px; /*緊貼頂部(上下左右)，沒有空隙*/
background-color:#212663; /*背景色設定*/
}
#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}
#header{
background-color:#069;
height: 150px; /*高度設定*/
}
#content {
/*可不用設定寬度和高度，由文字來決定*/
background-color:#D7E1FF; /*背景色設定*/
}
#footer {
/*可不用設定寬度和高度，由文字來決定*/
background-color:#069;
}
代碼: 選擇全部
body {
margin: 0px; /*緊貼頂部(上下左右)，沒有空隙*/
background-color:#212663; /*背景色設定*/
}
#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
color: #C6C6C6; /*文字顏色設定*/
border: 6px solid #003; /*網頁做外框的設定*/
}
#header{
background-color:#069;
height: 110px; /*高度設定，設定之高度加上下內距padding等時實際高度，110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}
#content {
/*可不用設定寬度和高度，由文字來決定高度*/
background-color:#D7E1FF; /*背景色設定*/
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#666; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
}
#footer {
/*可不用設定寬度和高度，由文字來決定高度*/
background-color:#069;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}
h1{
font-size:30px;
color:#FFF;
}
h3{
font-size:18px;
color:#5B63C4;
}