[講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 1. [color=#663300]一、Div標籤與CSS[/color]2. [color=#663300]二、單欄版型的範例[/color]3. [color=#663300]三、DIV架構與尺寸分析[/color]4. [color=#663300]四、以單純的HTML與CSS架構的方法[/color]4.1 [步驟1] 建立新的html檔，命名為 index.html 並加入下面內容： 4.2 [步驟2] 加入完整的HTML的架構語法則為4.3 [步驟3] 加入文字之後的完整的HTML的架構語法4.4 [步驟4] 為了設定尺寸，則需另開新的CSS檔案來設定4.5 [步驟 5] 背景色background-color設定之後的語法：4.6 [步驟 6] 最後加入文字font和內距padding設定之後的語法：5. 影音教學5.1 利用Div標籤與CSS建立基本單欄網頁版型--第一步驟-基本概念說明與html基本DIV標籤設定5.2 利用Div標籤與CSS建立基本單欄網頁版型--第二步驟-Html架構及內容設定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 並加入下面內容： 2. [步驟2] 加入完整的HTML的架構語法則為 學號-以色塊建構的網頁單欄排版 3. [步驟3] 加入文字之後的完整的HTML的架構語法 [color=#663300]範例內容僅供參考，主題及內文請自行設定後填入，不要跟範例內容一樣[/color] 學號-以色塊建構的網頁單欄排版 利用Div標籤與CSS建立基本單欄網頁版型 單純色塊的講解 利用Div標籤與CSS建立基本網頁版型，以全國比較文學會議 一、Div標籤與CSS 在早期瀏覽器以IE為主的網頁設計時代，大多以表格(TABLE)或頁框(FRAME)，來製作網頁主要的定位與架構，但是隨著上網習慣的改變，網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等，目前網頁設計的架構，多半以DIV搭配CSS為設計主流，以Div標籤來建立網頁區塊，區分各個主要頁面做為主要的排版架構，搭配CSS語法來美化網頁，以往的網頁美化設定大多直接寫在HTML網頁本身，現在則分開以HTML為架構設定，CSS為美化設定，一個建築網頁架構，一個美化網頁。 二、單欄版型的範例 第一個進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。 這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。 三、DIV架構與尺寸分析 第一個進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。 這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。 │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │ │地址：新竹校區：303-01 新竹縣湖口鄉中山路三段530號 │台鐵北湖車站步行三分鐘到校 │最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by 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/ 大家一起加油囉！ http://mepopedia.com/forum/read.php?804,16481,16481#msg-16481 Mon, 27 Jul 2026 19:44:37 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?804,16481,86515#msg-86515 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86515#msg-86515 1055445086 網頁設計與語法（HTML/CSS） Thu, 23 Nov 2017 11:18:57 +0800 http://mepopedia.com/forum/read.php?804,16481,86486#msg-86486 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86486#msg-86486 1055445010 網頁設計與語法（HTML/CSS） Wed, 22 Nov 2017 23:31:32 +0800 http://mepopedia.com/forum/read.php?804,16481,86485#msg-86485 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86485#msg-86485 1055445010 網頁設計與語法（HTML/CSS） Wed, 22 Nov 2017 23:31:14 +0800 http://mepopedia.com/forum/read.php?804,16481,86380#msg-86380 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86380#msg-86380
(2).請回答以下問題：
1.製作主題 :田園風
2.欲呈現之配色風格： 暖色
3..有無遇到的問題?: 沒有
4.製作感想 :配色的時候很開心]]> wuyujie 網頁設計與語法（HTML/CSS） Thu, 16 Nov 2017 09:40:19 +0800 http://mepopedia.com/forum/read.php?804,16481,86346#msg-86346 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86346#msg-86346
1.製作主題: Daft Punk
2.配色風格：金屬感
3.有無遇到的問題：無
4.製作感想：我是先做好作業2才回去把作業1搞好的~覺得其實沒有很難就是複雜]]> misoomisooo 網頁設計與語法（HTML/CSS） Wed, 15 Nov 2017 11:33:11 +0800 http://mepopedia.com/forum/read.php?804,16481,86258#msg-86258 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86258#msg-86258 老師我ㄉ第一個作業找不到回應的地方所以我也交來02ㄌ]]> 1055445010 網頁設計與語法（HTML/CSS） Sat, 11 Nov 2017 03:51:11 +0800 http://mepopedia.com/forum/read.php?804,16481,86257#msg-86257 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86257#msg-86257
1.製作主題: 穿出嘻哈世代的潮流態度
2.配色風格：粉色馬卡龍
3.有無遇到的問題：無
4.製作感想：比上一次順利太多了]]> 邱翊淇 網頁設計與語法（HTML/CSS） Sat, 11 Nov 2017 03:16:03 +0800 http://mepopedia.com/forum/read.php?804,16481,86256#msg-86256 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86256#msg-86256 1055445010 網頁設計與語法（HTML/CSS） Sat, 11 Nov 2017 03:10:57 +0800 http://mepopedia.com/forum/read.php?804,16481,86142#msg-86142 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,86142#msg-86142 surgyebs 網頁設計與語法（HTML/CSS） Thu, 02 Nov 2017 10:31:32 +0800 http://mepopedia.com/forum/read.php?804,16481,83099#msg-83099 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,83099#msg-83099


(2).請回答以下問題：
1.製作主題 :PSYCHOPASS 心靈判官
2.欲呈現之配色風格：以PSYCHOPASS動漫主視覺顏色作為主題
3..有無遇到的問題:有，一開始以為主題要和作業1一樣，還有因為自己想做連結的頁面，後來還是算了。
4.製作感想 :美賣]]> dj520136 網頁設計與語法（HTML/CSS） Wed, 30 Nov 2016 12:02:41 +0800 http://mepopedia.com/forum/read.php?804,16481,83038#msg-83038 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,83038#msg-83038


(2).請回答以下問題：
1.製作主題 :馴龍高手
2.欲呈現之配色風格：以冷色調作為主題
3..有無遇到的問題:還好
4.製作感想 :做完了覺得開心]]> 1045445077 網頁設計與語法（HTML/CSS） Thu, 24 Nov 2016 10:02:15 +0800 http://mepopedia.com/forum/read.php?804,16481,82993#msg-82993 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,82993#msg-82993 2.呈現風格：繽紛可愛

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

4.製作感想：耶 終於步用熬夜ㄌ]]> H224488882 網頁設計與語法（HTML/CSS） Wed, 23 Nov 2016 01:24:41 +0800 http://mepopedia.com/forum/read.php?804,16481,82747#msg-82747 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,82747#msg-82747


(2).請回答以下問題：
1.製作主題 :庫洛魔法使
2.欲呈現之配色風格：以粉色系的色彩大大家的眼前場聲衝擊
3..有無遇到的問題:在程式碼方面比較困難
4.製作感想 :覺得很有成就感~~~]]> 1045445177 網頁設計與語法（HTML/CSS） Wed, 02 Nov 2016 11:48:31 +0800 http://mepopedia.com/forum/read.php?804,16481,82741#msg-82741 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,82741#msg-82741
1.製作主題:愛麗絲夢遊仙境
2.呈現風格：我所使用的顏色都是愛麗絲夢遊仙境所看的見的配色

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

4.製作感想：現在都看得懂了~~~~~]]> 1045445177 網頁設計與語法（HTML/CSS） Wed, 02 Nov 2016 11:21:37 +0800 http://mepopedia.com/forum/read.php?804,16481,82733#msg-82733 Re: [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,82733#msg-82733 loveelise1021 網頁設計與語法（HTML/CSS） Wed, 02 Nov 2016 09:34:34 +0800 http://mepopedia.com/forum/read.php?804,16481,16481#msg-16481 [講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例 http://mepopedia.com/forum/read.php?804,16481,16481#msg-16481
  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/

大家一起加油囉！]]> JinJin 網頁設計與語法（HTML/CSS） Tue, 11 Oct 2011 10:54:02 +0800