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

Advanced

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

網頁設計與語法（HTML/CSS） 文章列表 發表文章 PDF 列印（下載）
JinJin [ 站內寄信 / PM ]
[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）  100-1《中國》北視傳一A-網頁設計  100-1《中國》北視傳一B-網頁設計  100-2《中國》竹進視傳一A-網頁設計  101-1《中國》竹視傳一C-網頁設計  103-1《中國》竹視傳二A-網頁設計
  1. 1. [color=#663300]一、Div標籤與CSS[/color]
  2. 2. [color=#663300]二、單欄版型的範例[/color]
  3. 3. [color=#663300]三、DIV架構與尺寸分析[/color]
  4. 4. [color=#663300]四、以單純的HTML與CSS架構的方法[/color]
  5. 4.1 [步驟1] 建立新的html檔，命名為 index.html 並加入下面內容：
  6. 4.2 [步驟2] 加入完整的HTML的架構語法則為
  7. 4.3 [步驟3] 加入文字之後的完整的HTML的架構語法
  8. 4.4 [步驟4] 為了設定尺寸，則需另開新的CSS檔案來設定
  9. 4.5 [步驟 5] 背景色background-color設定之後的語法：
  10. 4.6 [步驟 6] 最後加入文字font和內距padding設定之後的語法：
  11. 5. 影音教學
  12. 5.1 利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定
  13. 5.2 利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定
  14. 5.3 利用Div標籤與CSS建立基本單欄網頁版型--第三步驟-CSS美化設定
[color=#999900]利用Div標籤與CSS建立基本網頁版型，以單純色塊為例[/color]

1. [color=#663300]一、Div標籤與CSS[/color]


在早期瀏覽器以IE為主的網頁設計時代，大多以表格(TABLE)或頁框(FRAME)，來製作網頁主要的定位與架構，但是隨著上網習慣的改變，網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等，目前網頁設計的架構，多半以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/


2. [color=#663300]二、單欄版型的範例[/color]


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

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


3. [color=#663300]三、DIV架構與尺寸分析[/color]


1.以DIV建構網頁基本架構

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

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

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

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



4. [color=#663300]四、以單純的HTML與CSS架構的方法[/color]


以上的DIV架構，直接以HTML的語法可寫成以下語法

步驟如下：

1. [步驟1] 建立新的html檔，命名為 index.html 並加入下面內容：


<div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div>

2. [步驟2] 加入完整的HTML的架構語法則為


<!DOCTYPE html> <html> <head> <title>學號-以色塊建構的網頁單欄排版</title> <link rel="stylesheet" href="style.css" media="screen" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> <div id="wrapper"> <div id="header"></div> <div id="content"></div> <div id="footer"></div> </div> </body> </html>

3. [步驟3] 加入文字之後的完整的HTML的架構語法


[color=#663300]範例內容僅供參考，主題及內文請自行設定後填入，不要跟範例內容一樣[/color]

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


4. [步驟4] 為了設定尺寸，則需另開新的CSS檔案來設定


命名為 style.css

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

基本的尺寸設定為：

#wrapper { width: 900px; /*寬度設定為900px*/ margin: auto; /*版面居中對齊*/ } #header { height: 150px; /*高度設定為150px*/ } #content { /* CSS 中 DIV 自己會長到上層 DIV100% 的寬度 (在這裡就是 #wrapper)，所以可不用設定寬度*/ } #footer { /*可不用設定寬度和高度，由文字來決定*/ }


5. [步驟 5] 背景色background-color設定之後的語法：


基本版面和尺寸設定好之後，可以開始做底色(background-color)的配置，以CSS的語法直接填入，我們就完成了一個基本的頁面設定，接下來就可以做內容的文字編排了。


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

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



6. [步驟 6] 最後加入文字font和內距padding設定之後的語法：


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


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


[hr]

5. 影音教學


以下針對上面的講義

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

[hr]

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



http://youtu.be/4T7yrtgy3us



[hr]


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



http://youtu.be/PX50f0hkovA



[hr]


3. 利用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/

大家一起加油囉！



Edited 19 time(s). Last edit at 09/19/2017 09:36PM by JinJin.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
loveelise1021 [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）
視傳2C 1045445186 黃森宜

推薦 / 評論　 分享到Facebook     回應文章 Quote
Attachments:
開啟 | 下載 - style.css (529 bytes)
開啟 | 下載 - index.html (4.2 KB)
邱翊淇 [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）
http://mepopedia.com/~web105-2c/hw02/hw02-1055445192

1.製作主題: 穿出嘻哈世代的潮流態度
2.配色風格：粉色馬卡龍
3.有無遇到的問題：無
4.製作感想：比上一次順利太多了

推薦 / 評論　 分享到Facebook     回應文章 Quote
1055445010 [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）
http://mepopedia.com/~web105-2c/hw02/hw02-1055445010
老師我ㄉ第一個作業找不到回應的地方所以我也交來02ㄌ

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445177 [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）
作業網址：http://mepopedia.com/~web105-2c/hw02/hw02-1045445177

1.製作主題:愛麗絲夢遊仙境
2.呈現風格：我所使用的顏色都是愛麗絲夢遊仙境所看的見的配色

3.有無遇到的問題：交作業實在是太複雜了到現在還是不清楚 要交兩個地方真的是沒辦法.... 而且其實我幾乎很快就都做完作業但是我都不知道邀交哪去就變成延遲...

4.製作感想：現在都看得懂了~~~~~

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445177 [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）
(1).作業網址:http://mepopedia.com/~web104-2c/hw02/hw02-1045445129



(2).請回答以下問題：
1.製作主題 :庫洛魔法使
2.欲呈現之配色風格：以粉色系的色彩大大家的眼前場聲衝擊
3..有無遇到的問題:在程式碼方面比較困難
4.製作感想 :覺得很有成就感~~~

推薦 / 評論　 分享到Facebook     回應文章 Quote
H224488882 [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）
http://mepopedia.com/~web105-2c/hw02/hw02-1045445177
2.呈現風格：繽紛可愛

3.有無遇到的問題：
雖然一開始覺得很複雜很難懂 不過後來還是做出來了 很有成就感

4.製作感想：耶 終於步用熬夜ㄌ

推薦 / 評論　 分享到Facebook     回應文章 Quote
1045445077 [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）
(1).作業網址:http://mepopedia.com/~web105-2c/hw02/hw02-1045445077



(2).請回答以下問題：
1.製作主題 :馴龍高手
2.欲呈現之配色風格：以冷色調作為主題
3..有無遇到的問題:還好
4.製作感想 :做完了覺得開心



Edited 1 time(s). Last edit at 11/24/2016 10:54AM by 1045445077.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
dj520136 [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）
(1).作業網址:http://mepopedia.com/~web105-2c/hw02/hw02-1045445123



(2).請回答以下問題：
1.製作主題 tongue sticking out smileySYCHOPASS 心靈判官
2.欲呈現之配色風格：以PSYCHOPASS動漫主視覺顏色作為主題
3..有無遇到的問題:有，一開始以為主題要和作業1一樣，還有因為自己想做連結的頁面，後來還是算了。
4.製作感想 :美賣

推薦 / 評論　 分享到Facebook     回應文章 Quote
surgyebs [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）
http://mepopedia.com/~web103-c/hw02/hw02-



Edited 1 time(s). Last edit at 11/02/2017 11:13AM by surgyebs.
(編輯記錄)

推薦 / 評論　 分享到Facebook     回應文章 Quote
1055445010 [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）
http://mepopedia.com/~web105-2c/hw02/hw02-1055445010

推薦 / 評論　 分享到Facebook     回應文章 Quote
misoomisooo [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）  1055445081
http://mepopedia.com/~web105-2c/hw02/hw02-1055445081

1.製作主題: Daft Punk
2.配色風格：金屬感
3.有無遇到的問題：無
4.製作感想：我是先做好作業2才回去把作業1搞好的~覺得其實沒有很難就是複雜

推薦 / 評論　 分享到Facebook     回應文章 Quote
wuyujie [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）
(1).作業網址 ：http://mepopedia.com/~css106-2a/hw02/hw02-1055445007

(2).請回答以下問題：
1.製作主題 :田園風
2.欲呈現之配色風格： 暖色
3..有無遇到的問題?: 沒有
4.製作感想 :配色的時候很開心

推薦 / 評論　 分享到Facebook     回應文章 Quote
1055445010 [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）  http://mepopedia.com/~web105-2c/hw02/hw02-1055445010
http://mepopedia.com/~web105-2c/hw02/hw02-1055445192

推薦 / 評論　 分享到Facebook     回應文章 Quote
1055445010 [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）
http://mepopedia.com/~web105-2c/hw02/hw02-1055445010

推薦 / 評論　 分享到Facebook     回應文章 Quote
1055445086 [ 站內寄信 / PM ]
Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

分類標籤: 網頁設計與語法（HTML/CSS）  1055445131
http://mepopedia.com/~web105-2c/hw02/hw02-1055445131

推薦 / 評論　 分享到Facebook     回應文章 Quote
Newer Topic Older Topic