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

Advanced

Change History

Message: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

Changed By: JinJin
Change Date: September 19, 2017 09:36PM

[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div>
<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><!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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

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



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<b>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

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

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: October 18, 2016 08:14PM

[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title>

<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><!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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

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



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<b>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

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

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: March 17, 2016 09:57AM

[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title>

<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><!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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!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建立基本網頁版 │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
型,以全國比較文學會議
<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>
</xmp>



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<b>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

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

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: October 07, 2015 10:28PM

[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title>

<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><!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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!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建立基本網頁版 │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
型,以全國比較文學會議
<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>
</xmp>



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<b>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

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

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: March 05, 2015 11:14AM

[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title>

<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><!DOCTYPE html>
<html>
<head>
<title>學號-以色塊建構的網頁單欄排版</title>
<link <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解
</div>

<div id="content">
<p>利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議</p>
<h3>一、Div標籤與CSS</h3>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by
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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!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建立基本網頁版 │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
型,以全國比較文學會議
<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>
</xmp>



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<b>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

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

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: October 14, 2014 08:46PM

[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web100a/hw02/hw02-sample/[/color]</b>
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title>

<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><!DOCTYPE html>
<html>
<head>
<title>學號-以色塊建構的網頁單欄排版</title>
<link <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解
</div>

<div id="content">
<p>利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議</p>
<h3>一、Div標籤與CSS</h3>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by
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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!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建立基本網頁版 │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
型,以全國比較文學會議
<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>
</xmp>



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<b>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

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

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: September 28, 2012 09:28PM

[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web100a/hw02/hw02-sample/[/color]</b>
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title>

<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><!DOCTYPE html>
<html>
<head>
<title>學號-以色塊建構的網頁單欄排版</title>
<link <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解
</div>

<div id="content">
<p>利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議</p>
<h3>一、Div標籤與CSS</h3>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by
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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!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建立基本網頁版 │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
型,以全國比較文學會議
<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>
</xmp>



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<b>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
backg<h2>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h2>

http://youtu.be/4T7yrtgy3us

<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h2>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h2>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
round-color:#212663; /*背景色設定*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header{
background-color:#069;
height: 150px; /*高度設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#D7E1FF; /*背景色設定*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#069;
}

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: March 24, 2012 01:31PM

[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web100a/hw02/hw02-sample/[/color]</b>
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title>

<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><! <h3>一、Div標籤與CSS</h1>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h1>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h1>
DOCTYPE html>
<html>
<head>
<title>學號-以色塊建構的網頁單欄排版</title>
<link <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解
</div>

<div id="content">
<p>利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議</p>
<h3>一、Div標籤與CSS</h3>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by
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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!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建立基本網頁版 │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
型,以全國比較文學會議
<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>
</xmp>



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<b>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
backg<h2>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h2>

http://youtu.be/4T7yrtgy3us

<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h2>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h2>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!round-color:#212663; /*背景色設定*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header{
background-color:#069;
height: 150px; /*高度設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#D7E1FF; /*背景色設定*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#069;
}

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: March 16, 2012 06:10PM

[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web100a/hw02/hw02-sample/[/color]</b>
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title>

<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><! <h2>一、Div標籤與CSS</h2>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h2>二、單欄版型的範例</h2>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h2>三、DIV架構與尺寸分析</h2>
<h3>一、Div標籤與CSS</h1>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h1>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h1>
DOCTYPE html>
<html>
<head>
<title>學號-以色塊建構的網頁單欄排版</title>
<link <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解
</div>

<div id="content">
<p>利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議</p>
<h3>一、Div標籤與CSS</h3>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by
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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!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建立基本網頁版 │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
型,以全國比較文學會議
<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>
</xmp>



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<bh2{
font-size:18px;
color:#5B63C4;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>
>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
backg<h2>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h2>

http://youtu.be/4T7yrtgy3us

<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h2>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h2>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!round-color:#212663; /*背景色設定*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header{
background-color:#069;
height: 150px; /*高度設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#D7E1FF; /*背景色設定*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#069;
}

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: October 22, 2011 06:25PM

[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以
往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web100a/hw02/hw02-sample/[/color]</b>
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title>

<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><! <h2>一、Div標籤與CSS</h2>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h2>二、單欄版型的範例</h2>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h2>三、DIV架構與尺寸分析</h2>
<h3>一、Div標籤與CSS</h1>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h1>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h1>
DOCTYPE html>
<html>
<head>
<title>學號-以色塊建構的網頁單欄排版</title>
<link <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解
</div>

<div id="content">
<p>利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議</p>
<h3>一、Div標籤與CSS</h3>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by
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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!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建立基本網頁版 │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
型,以全國比較文學會議
<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>
</xmp>



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<bh2{
font-size:18px;
color:#5B63C4;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
backg<h2>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h2>

http://youtu.be/4T7yrtgy3us

<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h2>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h2>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!round-color:#212663; /*背景色設定*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header{
background-color:#069;
height: 150px; /*高度設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#D7E1FF; /*背景色設定*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#069;
}

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: October 22, 2011 06:18PM

[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。
跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以。
往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web100a/hw02/hw02-sample/[/color]</b>
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title>

<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><! <h2>一、Div標籤與CSS</h2>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h2>二、單欄版型的範例</h2>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h2>三、DIV架構與尺寸分析</h2>
<h3>一、Div標籤與CSS</h1>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h1>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h1>
DOCTYPE html>
<html>
<head>
<title>學號-以色塊建構的網頁單欄排版</title>
<link <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解
</div>

<div id="content">
<p>利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議</p>
<h3>一、Div標籤與CSS</h3>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by
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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!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建立基本網頁版 │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
型,以全國比較文學會議
<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>
</xmp>



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<bh2{
font-size:18px;
color:#5B63C4;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
backg<h2>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h2>

http://youtu.be/4T7yrtgy3us

<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h2>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h2>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!round-color:#212663; /*背景色設定*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header{
background-color:#069;
height: 150px; /*高度設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#D7E1FF; /*背景色設定*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#069;
}

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: October 17, 2011 01:30PM

[講義] 02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]

[color=#663300]一、Div標籤與CSS[/color]


在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。
跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以Div標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以。
往的網頁設計大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為風格設定,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


[color=#663300]二、單欄版型的範例[/color]


第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web100a/hw02/hw02-sample/[/color]

http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]


[color=#663300]三、DIV架構與尺寸分析[/color]


1.以DIV建構網頁基本架構

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


2.尺寸規劃設定
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



[color=#663300]四、以單純的HTML與CSS架構的方法[/color]


以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

[步驟1] 建立新的html檔,命名為 index.html 並加入下面內容:


<div id="wrapper"> <br /> <div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</title><br /> <link rel="stylesheet" href="style.css" media="screen" /><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> </head><br /> <body><br /> <div id="wrapper"> <br /> <div id="header"></div><br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div><br /> </body><br /> </html><br />


[步驟3] 加入文字之後的完整的HTML的架構語法


[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<br /> <!DOCTYPE html><br /> <html><br /> <head><br /> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</title><br /> <br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div>


[步驟2] 加入完整的HTML的架構語法則為


<! <h2>一、Div標籤與CSS</h2><br /> <p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p><br /> <h2>二、單欄版型的範例</h2><br /> <p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。<br /> 這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p><br /> <h2>三、DIV架構與尺寸分析</h2><br /> <h3>一、Div標籤與CSS</h1><br /> <p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p><br /> <h3>二、單欄版型的範例</h1><br /> <p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。<br /> 這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p><br /> <h3>三、DIV架構與尺寸分析</h1><br /> DOCTYPE html><br /> <html><br /> <head><br /> <title>學號-以色塊建構的網頁單欄排版</title><br /> <link <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1><br /> 單純色塊的講解<br /> </div><br /> <br /> <div id="content"> <br /> <p>利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議</p><br /> <h3>一、Div標籤與CSS</h3><br /> <p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p><br /> <h3>二、單欄版型的範例</h3><br /> <p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。<br /> 這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p><br /> <h3>三、DIV架構與尺寸分析</h3><br /> <p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。<br /> 這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p><br /> </div><br /> <br /> <div id="footer"><br /> │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br><br /> │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br><br /> │最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by <br /> rel="stylesheet" href="style.css" media="screen" /><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> </head><br /> <body><br /> <div id="wrapper"> <br /> <div id="header"></div><br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div><br /> </body><br /> </html><br />


[步驟3] 加入文字之後的完整的HTML的架構語法


[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<br /> <!DOCTYPE html><br /> <html><br /> <head><br /> <title>學號-以色塊建構的網頁單欄排版</title><br /> <link rel="stylesheet" href="style.css" media="screen" /><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> </head><br /> <body><br /> <div id="wrapper"> <br /> <div id="header"><br /> <br /> <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1><br /> 單純色塊的講解<br /> <br /> </div><br /> <br /> <div id="content"> <br /> <br /> 利用Div標籤與CSS建立基本網頁版 │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br><br /> 型,以全國比較文學會議<br /> <h3>一、Div標籤與CSS</h3><br /> 在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以Div標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。<br /> <h3>二、單欄版型的範例</h3><br /> 第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。<br /> 這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。<br /> <h3>三、DIV架構與尺寸分析</h3><br /> 第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。<br /> 這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。<br /> <br /> </div><br /> <br /> <div id="footer"><br /> <br /> │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br><br /> │地址:新竹校區:303-01 新竹縣湖口鄉中山路三段530號 │台鐵北湖車站步行三分鐘到校 <br><br /> │最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by <br /> <br /> </div><br /> <br /> </div><br /> </body><br /> </html><br />



[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定


命名為 style.css

font-size:18px;
color:#5B63C4;
}




參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。

基本的尺寸設定為:

#wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> }<br /> <br /> #header {<br /> height: 150px; /*高度設定為150px*/<br /> }<br /> <br /> #content {<br /> /* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/<br /> }<br /> <br /> #footer {<br /> /*可不用設定寬度和高度,由文字來決定*/<br /> }



[步驟 5] 背景色background-color設定之後的語法:


基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<br /> <br /> body {<br /> margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/<br /> backg<h2>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h2><br /> <br /> http://youtu.be/4T7yrtgy3us<br /> <br /> <iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe><br /> <br /> [hr]<br /> <br /> <br /> <h2>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h2><br /> <br /> http://youtu.be/PX50f0hkovA<br /> <br /> <iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe><br /> <br /> [hr]<br /> <br /> <br /> <h2>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h2><br /> <br /> http://youtu.be/jkzsZXfdjVU<br /> <br /> <iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe><br /> <br /> <br /> [hr]<br /> <br /> <br /> 完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?<br /> <br /> 製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例<br /> <br /> 還可以參考以前同學的範例喔!<br /> <br /> http://mepopedia.com/~web100b/hw02/hw02-1001445055/<br /> <br /> http://mepopedia.com/~web100b/hw02/hw02-1001445042/<br /> <br /> http://mepopedia.com/~web100b/hw02/hw02-1001445022/<br /> <br /> http://mepopedia.com/~web100b/hw02/hw02-1001445123/<br /> <br /> http://mepopedia.com/~web100b/hw02/hw02-1001445083/<br /> <br /> http://mepopedia.com/~web100b/hw02/hw02-1001445095/<br /> <br /> http://mepopedia.com/~web100b/hw02/hw02-1001445077/<br /> <br /> http://mepopedia.com/~web100a/hw02/hw02-1001445015/<br /> <br /> http://mepopedia.com/~web100a/hw02/hw02-1001445118/<br /> <br /> http://mepopedia.com/~web100a/hw02/hw02-1001445021/<br /> <br /> 大家一起加油囉!round-color:#212663; /*背景色設定*/<br /> }<br /> <br /> #wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> }<br /> <br /> #header{<br /> background-color:#069;<br /> height: 150px; /*高度設定*/<br /> }<br /> <br /> #content {<br /> /*可不用設定寬度和高度,由文字來決定*/<br /> background-color:#D7E1FF; /*背景色設定*/<br /> }<br /> <br /> #footer {<br /> /*可不用設定寬度和高度,由文字來決定*/<br /> background-color:#069; <br /> }<br /> <br />




[步驟 6] 最後加入文字font和內距padding設定之後的語法:


<br /> <br /> body {<br /> margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/<br /> background-color:#212663; /*背景色設定*/<br /> }<br /> <br /> #wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> font-family: "微軟正黑體", Arial, Helvetica, sans-serif;<br /> color: #C6C6C6; /*文字顏色設定*/<br /> border: 6px solid #003; /*網頁做外框的設定*/<br /> }<br /> <br /> #header{<br /> background-color:#069;<br /> height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/<br /> padding:20px; /*內距設定*/<br /> }<br /> <br /> #content {<br /> /*可不用設定寬度和高度,由文字來決定高度*/<br /> background-color:#D7E1FF; /*背景色設定*/<br /> font-size: 14px; /*字體大小*/<br /> line-height: 2em; /*字體行間為兩個字距*/<br /> color:#666; /*文字顏色設定*/<br /> padding: 30px; /*文字與#content間的內距*/<br /> }<br /> <br /> #footer {<br /> /*可不用設定寬度和高度,由文字來決定高度*/<br /> background-color:#069; <br /> font-size: 12px; /*文字尺寸設定*/<br /> line-height: 1.5em; /*文字行高設定為1.5字高*/<br /> color: #FFF; /*文字顏色設定*/<br /> padding: 20px; /*內距設定*/<br /> }<br /> <br /> h1{<br /> font-size:30px;<br /> color:#FFF;<br /> }<br /> <br /> h3{<br /> font-size:18px;<br /> color:#5B63C4;<br /> }<br />



參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計


[hr]

影音教學


以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定



http://youtu.be/4T7yrtgy3us

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!

[hr]


利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定



http://youtu.be/PX50f0hkovA



[hr]


利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定



http://youtu.be/jkzsZXfdjVU




[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: October 12, 2011 10:51AM

[講義] 02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。
跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以。
往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web100a/hw02/hw02-sample/[/color]</b>
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title>

<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><! <h2>一、Div標籤與CSS</h2>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h2>二、單欄版型的範例</h2>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h2>三、DIV架構與尺寸分析</h2>
<h3>一、Div標籤與CSS</h1>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h1>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h1>
DOCTYPE html>
<html>
<head>
<title>學號-以色塊建構的網頁單欄排版</title>
<link <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解
</div>
height: 80px; /*高度設定為 80px*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

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

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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

h2{
font-size:18px;
color:#5B63C4;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>

<div id="content">
<p>利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議</p>
<h3>一、Div標籤與CSS</h3>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by
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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!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建立基本網頁版 │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
型,以全國比較文學會議
<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>
</xmp>



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<bh2{
font-size:18px;
color:#5B63C4;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
backg<h2>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h2>

http://youtu.be/4T7yrtgy3us

<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h2>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h2>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!round-color:#212663; /*背景色設定*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header{
background-color:#069;
height: 150px; /*高度設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#D7E1FF; /*背景色設定*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#069;
}

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: October 11, 2011 05:31PM

[講義] 02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
<b>[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]</b>

<h2>[color=#663300]<b>一、Div標籤與CSS</b>[/color]</h2>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。
跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<b>Div標籤</b>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以。
往的網頁設計大多直接寫在HTML網頁本身,現在則分開以<b>HTML為架構設定,CSS為風格設定</b>,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


<h2>[color=#663300]<b>二、單欄版型的範例</b>[/color]</h2>
第一個利用Div標籤與CSS建立基本單欄網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

<b>[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web100a/hw02/hw02-sample/[/color]</b>
http://mepopedia.com/~web101c/hw02/hw02-sample/[/color]</b>


<h2>[color=#663300]<b>三、DIV架構與尺寸分析</b>[/color]</h2>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


<b>2.尺寸規劃設定</b>
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



<h2>[color=#663300]<b>四、以單純的HTML與CSS架構的方法</b>[/color]</h2>
以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

<h3>[步驟1] <b>建立新的html檔,命名為 index.html 並加入下面內容:</b> </h3>
<xmp><div id="wrapper">
<div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>視傳一AB-學號-以色塊建構的網頁單欄排版</title>

<div id="content"></div>
<div id="footer"></div>
</div></xmp>


<h3><b>[步驟2] 加入完整的HTML的架構語法則為</b></h3>
<xmp><! <h2>一、Div標籤與CSS</h2>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h2>二、單欄版型的範例</h2>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h2>三、DIV架構與尺寸分析</h2>
<h3>一、Div標籤與CSS</h1>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h1>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h1>
DOCTYPE html>
<html>
<head>
<title>學號-以色塊建構的網頁單欄排版</title>
<link <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解
</div>
height: 80px; /*高度設定為 80px*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

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

</xmp>




<h3><b>[步驟 6] 最後加入文字font和邊界padding設定之後的語法:</b></h3>
<xmp>

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

h2{
font-size:18px;
color:#5B63C4;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>
<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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

h2{
font-size:18px;
color:#5B63C4;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>
<div id="content">
<p>利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議</p>
<h3>一、Div標籤與CSS</h3>
<p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p>
<h3>二、單欄版型的範例</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
<h3>三、DIV架構與尺寸分析</h3>
<p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p>
</div>

<div id="footer">
│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by
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"></div>
<div id="content"></div>
<div id="footer"></div>
</div>
</body>
</html>
</xmp>


<h3><b>[步驟3] 加入文字之後的完整的HTML的架構語法</b></h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<xmp>
<!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建立基本網頁版 │地址:台北校區:116-95台北市文山區興隆路三段56號 2樓 │<br>
型,以全國比較文學會議
<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>
</xmp>



<h3><b>[步驟4] 為了設定尺寸,則需另開新的CSS檔案來設定</b></h3>
命名為 style.css

<bh2{
font-size:18px;
color:#5B63C4;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b>

基本的<b>尺寸</b>設定為:

<xmp>#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header {
height: 150px; /*高度設定為150px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
}</xmp>



<h3><b>[步驟 5] 背景色background-color設定之後的語法:</b></h3>
基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<xmp>

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
backg<h2>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h2>

http://youtu.be/4T7yrtgy3us

<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h2>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h2>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h2>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!round-color:#212663; /*背景色設定*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
}

#header{
background-color:#069;
height: 150px; /*高度設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#D7E1FF; /*背景色設定*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#069;
}

</xmp>




<h3><b>[步驟 6] 最後加入文字font和內距padding設定之後的語法:</b></h3>
<xmp>

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;
}
</xmp>



<b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>


[hr]
<h2>影音教學</h2>
以下針對上面的講義

分成三個影片檔來說明,如果不清楚的部分可以參照搭配講義與影音研讀:

[hr]

<h3>利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定</h3>

http://youtu.be/4T7yrtgy3us

http://mepopedia.com/~web100b/hw02/hw02-1001445055/

http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445095/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!<iframe width="850" height="462" src="http://www.youtube.com/embed/4T7yrtgy3us?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定</h3>

http://youtu.be/PX50f0hkovA

<iframe width="850" height="462" src="http://www.youtube.com/embed/PX50f0hkovA?rel=0" frameborder="0" allowfullscreen></iframe>

[hr]


<h3>利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定 </h3>

http://youtu.be/jkzsZXfdjVU

<iframe width="850" height="462" src="http://www.youtube.com/embed/jkzsZXfdjVU?rel=0" frameborder="0" allowfullscreen></iframe>


[hr]


完整看完課程說明後,是不是可以自己製作利用Div標籤與CSS建立基本單欄網頁版型呢?

製作完畢,請將檔案上傳,並回覆在[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

還可以參考以前同學的範例喔!

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/


http://mepopedia.com/~web100b/hw02/hw02-1001445042/

http://mepopedia.com/~web100b/hw02/hw02-1001445022/

http://mepopedia.com/~web100b/hw02/hw02-1001445123/

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

http://mepopedia.com/~web100b/hw02/hw02-1001445077/

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

http://mepopedia.com/~web100a/hw02/hw02-1001445118/

http://mepopedia.com/~web100a/hw02/hw02-1001445021/

大家一起加油囉!
Changed By: JinJin
Change Date: October 11, 2011 12:44PM

[講義] 02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
Changed By: JinJin
Change Date: October 11, 2011 11:39AM

[講義] 02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
Changed By: JinJin
Change Date: October 11, 2011 11:35AM

[講義] 02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
Changed By: JinJin
Change Date: October 11, 2011 11:32AM

[講義] 02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
Changed By: JinJin
Change Date: October 11, 2011 11:29AM

[講義] 02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

Original Message

作者: JinJin
Date: October 11, 2011 10:54AM

[講義] 02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
[color=#999900]利用Div標籤與CSS建立基本網頁版型,以單純色塊為例[/color]

[color=#663300]一、Div標籤與CSS[/color]


在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。
跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以Div標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以。
往的網頁設計大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為風格設定,一個建築網頁架構,一個塑造網頁美感。

傳統式的TABLE版型 http://www.ntu.edu.tw/ http://www.sinhua.gov.tw/
現代流行的DIV版型 http://www.tfam.museum/ http://www.cute.edu.tw/


[color=#663300]二、單欄版型的範例[/color]


第一個利用Div標籤與CSS建立基本單欄[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-01.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


2.尺寸規劃設定

做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-04.jpg[/IMG]

四、以單純的HTML與CSS架構的方法
網頁版型的例子,將單純色塊的網頁設計為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
利用色塊的配色,也可以輕鬆的設計具有質感的網頁,請大家發揮創意,但用單純的配色,完成一個具有不同DIV架構的網頁吧。

[color=#669900]利用Div標籤與CSS建立單純色塊的網頁範例
http://mepopedia.com/~web100a/hw02/hw02-sample/[/color]

http://m
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]



[color=#663300]四、以單純的HTML與CSS架構的方法[/color]



以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

[步驟1] 建立新的html檔,命名為 index.html 並加入下面內容:



<div id="wrapper"> <br /> <div id="header"></div><br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div>


[步驟2] 加入完整的HTML的架構語法則為



<!DOCTYPE html><br /> <html><br /> <head><br /> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</title><br /> <link rel="stylesheet" href="style.css" media="screen" /><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> </head><br /> <body><br /> <div id="wrapper"> <br /> <div id="header"></div><br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div><br /> </body><br /> </html><br />


[步驟3] 加入文字之後的完整的HTML的架構語法



epopedia.com/~web101c/hw02/hw02-sample/[/color]


[color=#663300]三、DIV架構與尺寸分析[/color]


1.以DIV建構網頁基本架構

以下為最基本的網站排版架構

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-06.jpg[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-color.jpg[/IMG]


2.尺寸規劃設定
做設計任何網頁之前,在規畫好版面之後,就必須設定版面尺寸,以做為後續設計的依據。

[IMG]http://i1136.photobucket.com/albums/n481/parkparkyang/div-layout-05.jpg[/IMG]
[IMG]http://mepopedia.com/~jinjin/web/img/2-01.png[/IMG]

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為

[IMG]http://mepopedia.com/~jinjin/web/img/2-02.png[/IMG]



[color=#663300]四、以單純的HTML與CSS架構的方法[/color]


以上的DIV架構,直接以HTML的語法可寫成以下語法

步驟如下:

[步驟1] 建立新的html檔,命名為 index.html 並加入下面內容:


<div id="wrapper"> <br /> <div id="header"></div> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</title><br /> <link rel="stylesheet" href="style.css" media="screen" /><br /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"><br /> </head><br /> <body><br /> <div id="wrapper"> <br /> <div id="header"></div><br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div><br /> </body><br /> </html><br />


[步驟3] 加入文字之後的完整的HTML的架構語法


[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣[/color]

<br /> <!DOCTYPE html><br /> <html><br /> <head><br /> <title>視傳一AB-學號-以色塊建構的網頁單欄排版</title><br /> <br /> <div id="content"></div><br /> <div id="footer"></div><br /> </div>


[步驟2] 加入完整的HTML的架構語法則為


<! <h2>一、Div標籤與CSS</h2>body {<br /> margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/<br /> background-color:#212663; /*背景色設定*/<br /> }<br /> <br /> #wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> border: 6px solid #003; /*網頁做外框的設定*/<br /> }<br /> <br /> #header {<br /> background-color:#069; /*背景色設定*/<br /> height: 150px; /*高度設定*/<br /> }<br /> <br /> #content {<br /> /*可不用設定寬度和高度,由文字來決定*/<br /> background-color:#D7E1FF;<br /> }<br /> <br /> #footer {<br /> /*可不用設定寬度和高度,由文字來決定*/<br /> background-color:#069; /*背景色設定*/ <br /> }<br /> <xmp><br /> <br /> <br /> <br /> <br /> <h3><b>[步驟 6] 最後加入文字font和邊界padding設定之後的語法:</b></h3><br /> <br /> <xmp><br /> <br /> body {<br /> margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/<br /> background-color:#212663; /*背景色設定*/<br /> }<br /> <br /> #wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> font-family: "微軟正黑體", Arial, Helvetica, sans-serif;<br /> color: #C6C6C6; /*文字顏色設定*/<br /> border: 6px solid #003; /*網頁做外框的設定*/<br /> }<br /> <br /> #header {<br /> background-color:#069;<br /> height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/<br /> padding:20px; /*內距設定*/<br /> }<br /> <br /> #content {<br /> /*可不用設定寬度和高度,由文字來決定*/<br /> background-color:#D7E1FF; /*背景色設定*/<br /> font-size: 14px; /*字體大小*/<br /> line-height: 2em; /*字體行間為兩個字距*/<br /> color:#666; /*文字顏色設定*/<br /> padding: 30px; /*文字與#content間的內距*/<br /> }<br /> <br /> #footer {<br /> /*可不用設定寬度和高度,由文字來決定*/<br /> background-color:#069; <br /> font-size: 12px; /*文字尺寸設定*/<br /> line-height: 1.5em; /*文字行高設定為1.5字高*/<br /> color: #FFF; /*文字顏色設定*/<br /> padding: 20px; /*內距設定*/<br /> }<br /> <br /> h1{<br /> font-size:30px;<br /> color:#FFF;<br /> }<br /> <br /> h2{<br /> font-size:18px;<br /> color:#5B63C4;<br /> }<br /> <xmp><br /> <br /> <br /> <br /> <b>參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計</b>



參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計

height: 130px; /*高度設定為130px*/
}

#content {
/* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/
}

#footer {
height: 80px; /*高度設定為 80px*/
}



[步驟 5] 背景色background-color設定之後的語法:



基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<br /> <br /> body {<br /> margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/<br /> background-color:#212663; /*背景色設定*/<br /> }<br /> <br /> #wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> }<br /> <br /> #header{<br /> background-color:#069;<br /> height: 150px; /*高度設定*/<br /> }<br /> <br /> #content {<br /> /*可不用設定寬度和高度,由文字來決定*/<br /> background-color:#D7E1FF; /*背景色設定*/<br /> }<br /> <br /> #footer {<br /> /*可不用設定寬度和高度,由文字來決定*/<br /> background-color:#069; <br /> }<br /> <br />




[步驟 6] 最後加入文字font和邊界padding設定之後的語法:



<br /> <br /> body {<br /> margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/<br /> background-color:#212663; /*背景色設定*/<br /> }<br /> <br /> #wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> font-family: "微軟正黑體", Arial, Helvetica, sans-serif;<br /> color: #C6C6C6; /*文字顏色設定*/<br /> border: 6px solid #003; /*網頁做外框的設定*/<br /> }<br /> <br /> #header{<br /> background-color:#069;<br /> height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/<br /> 瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p><br /> <h2>二、單欄版型的範例</h2><br /> <p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。<br /> 這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p><br /> <h2>三、DIV架構與尺寸分析</h2><br /> <h3>一、Div標籤與CSS</h1><br /> <p>在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以<strong>Div標籤</strong>來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化<br /> 命名為 style.css<br /> <br /> <b>單欄網頁若為指定寬度,只要設定在最外層的 DIV (#wrapper)即可。</b><br /> <br /> 基本的<b>尺寸</b>設定為:<br /> <br /> <xmp>#wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> }<br /> <br /> #header {<br /> height: 150px; /*高度設定為150px*/<br /> }<br /> <br /> #content {<br /> /* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper),所以可不用設定寬度*/<br /> }<br /> <br /> #footer {<br /> height: 80px; /*高度設定為 80px*/<br /> }



[步驟 5] 背景色background-color設定之後的語法:



基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<br /> <br /> body {<br /> margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/<br /> background-color:#212663; /*背景色設定*/<br /> }<br /> <br /> #wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> }<br /> <br /> #header{<br /> background-col /*可不用設定寬度和高度,由文字來決定*/<br /> background-color:#D7E1FF; /*背景色設定*/<br /> font-size: 14px; /*字體大小*/<br /> line-height: 2em; /*字體行間為兩個字距*/<br /> color:#666; /*文字顏色設定*/<br /> padding: 30px; /*文字與#content間的內距*/<br /> }<br /> <br /> #footer {<br /> /*可不用設定寬度和高度,由文字來決定*/<br /> background-color:#069; <br /> font-size: 12px; /*文字尺寸設定*/<br /> line-height: 1.5em; /*文字行高設定為1.5字高*/<br /> color: #FFF; /*文字顏色設定*/<br /> padding: 20px; /*內距設定*/<br /> }<br /> <br /> h1{<br /> font-size:30px;<br /> color:#FFF;<br /> }<br /> <br /> h2{<br /> font-size:18px;<br /> color:#5B63C4;<br /> }<br />



參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計or:#069;
height: 150px; /*高度設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#D7E1FF; /*背景色設定*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定*/
background-color:#069;
}






[步驟 6] 最後加入文字font和邊界padding設定之後的語法:



<br /> 定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。</p><br /> <h3>二、單欄版型的範例</h1><br /> <p>第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。<br /> 這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。</p><br /> <h3>三、DIV架構與尺寸分析</h1><br /> DOCTYPE html><br /> <html><br /> <head><br /> <title>學號-以色塊建構的網頁單欄排版</title><br /> <link <h1>利用Div標籤與CSS建立基本單欄網頁版型</h1><br /> 單純色塊的講解<br /> </div><br /> height: 80px; /*高度設定為 80px*/<br /> }



[步驟 5] 背景色background-color設定之後的語法:


基本版面和尺寸設定好之後,可以開始做底色(background-color)的配置,以CSS的語法直接填入,我們就完成了一個基本的頁面設定,接下來就可以做內容的文字編排了。


設置底色(background-color)、文字與設定最外框的CSS語法:

<br /> <br /> body {<br /> margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/<br /> background-color:#212663; /*背景色設定*/<br /> }<br /> <br /> #wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> }<br /> <br /> #header{<br /> background-color:#069;<br /> height: 150px; /*高度設定*/<br /> }<br /> <br /> #content {<br /> /*可不用設定寬度和高度,由文字來決定*/<br /> background-color:#D7E1FF; /*背景色設定*/<br /> }<br /> <br /> #footer {<br /> /*可不用設定寬度和高度,由文字來決定*/<br /> background-color:#069; <br /> }<br /> <br />




[步驟 6] 最後加入文字font和邊界padding設定之後的語法:


<br /> <br /> body {<br /> margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/<br /> background-color:#212663; /*背景色設定*/<br /> }<br /> <br /> #wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> font-family: "微軟正黑體", Arial, Helvetica, sans-serif;<br /> color: #C6C6C6; /*文字顏色設定*/<br /> border: 6px solid #003; /*網頁做外框的設定*/<br /> }<br /> <br /> #header{<br /> background-color:#069;<br /> height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/<br /> padding:20px; /*內距設定*/<br /> }<br /> <br /> #content {<br /> /*可不用設定寬度和高度,由文字來決定高度*/<br /> background-color:#D7E1FF; /*背景色設定*/<br /> font-size: 14px; /*字體大小*/<br /> line-height: 2em; /*字體行間為兩個字距*/<br /> color:#666; /*文字顏色設定*/<br /> padding: 30px; /*文字與#content間的內距*/<br /> }<br /> <br /> #footer {<br /> /*可不用設定寬度和高度,由文字來決定高度*/<br /> background-color:#069; <br /> font-size: 12px; /*文字尺寸設定*/<br /> line-height: 1.5em; /*文字行高設定為1.5字高*/<br /> color: #FFF; /*文字顏色設定*/<br /> padding: 20px; /*內距設定*/<br /> }<br /> <br /> h1{<br /> font-size:30px;<br /> color:#FFF;<br /> }<br /> <br /> h2{<br /> font-size:18px;<br /> color:#5B63C4;<br /> }<br />



參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計

[步驟 6] 最後加入文字font和內距padding設定之後的語法:


<br /> <br /> body {<br /> margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/<br /> background-color:#212663; /*背景色設定*/<br /> }<br /> <br /> #wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> font-family: "微軟正黑體", Arial, Helvetica, sans-serif;<br /> color: #C6C6C6; /*文字顏色設定*/<br /> border: 6px solid #003; /*網頁做外框的設定*/<br /> }<br /> <br /> #header{<br /> background-color:#069;<br /> height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/<br /> padding:20px; /*內距設定*/<br /> }<br /> <br /> #content {<br /> /*可不用設定寬度和高度,由文字來決定高度*/<br /> background-color:#D7E1FF; /*背景色設定*/<br /> font-size: 14px; /*字體大小*/<br /> line-height: 2em; /*字體行間為兩個字距*/<br /> color:#666; /*文字顏色設定*/<br /> padding: 30px; /*文字與#content間的內距*/<br /> }<br /> <br /> #footer {<br /> /*可不用設定寬度和高度,由文字來決定高度*/<br /> background-color:#069; <br /> font-size: 12px; /*文字尺寸設定*/<br /> line-height: 1.5em; /*文字行高設定為1.5字高*/<br /> color: #FFF; /*文字顏色設定*/<br /> padding: 20px; /*內距設定*/<br /> }<br /> <br /> h1{<br /> font-size:30px;<br /> color:#FFF;<br /> }<br /> <br /> h2{<br /> font-size:18px;<br /> color:#5B63C4;<br /> }<br />



參考講義語法設定,如此就完成一個以DIV加CSS的單純色塊單欄的網頁設計

利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議


一、Div標籤與CSS


在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以Div標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。


二、單欄版型的範例


第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。


三、DIV架構與尺寸分析


第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。