[講義] 單元課程練習整理 1. [作業01] 以HTML與CSS完成第一個網頁2. [作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例3. [作業03] 利用Div標籤與CSS建立基本網頁版型（圖片篇） 4. [作業04] 以CSS製作網頁導覽列5. [期中作業] 以單欄為主的網站設計6. [講義05] 繞圖排文與推文按鈕的應用7. [作業06] 表格的製作 8. [作業07] 以Float：浮動，製作雙欄網頁 9. [作業] 優良設計網站蒐集與分析10. [期末作業] 以雙欄為主的網站設計每個單元皆會有講義整理，搭配課後練習作業，講義內有語法及影音複習檔，供同學課後複習，請善加利用。 [hr] 1. [作業01] 以HTML與CSS完成第一個網頁 1.[url=http://mepopedia.com/forum/read.php?804,16668][講義01] 以HTML與CSS完成第一個網頁[/url] 2.作業參考 (1) http://mepopedia.com/~web103-a/hw01/hw01-1005445193/ (2) http://mepopedia.com/~web103-a/hw01/hw01-1025445151/ (3) http://mepopedia.com/~web103-c/hw01/hw01-1025443044/ [hr] 2. [作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例 1.[url=http://mepopedia.com/forum/read.php?804,16481][講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url] 2.作業參考 (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/ [hr] 3. [作業03] 利用Div標籤與CSS建立基本網頁版型（圖片篇） 1.[url=http://mepopedia.com/forum/read.php?804,16271][講義03] 利用Div標籤與CSS建立基本網頁版型（圖片篇）[/url] 2.作業參考 (1) http://mepopedia.com/~jinjin/web/hw03/ (2) http://mepopedia.com/~web103-a/hw03/hw03-1025445001/ (3) http://mepopedia.com/~web101c/hw03/hw03-1015445231/ (4) http://mepopedia.com/~web100-a/hw03/hw03-1006445010/ (5) http://mepopedia.com/~web101c/hw03/hw03-1015445203/ (6) http://mepopedia.com/~web101c/hw03/hw03-1015445243/Introduction.html [hr] 4. [作業04] 以CSS製作網頁導覽列 1.[url=http://mepopedia.com/forum/read.php?804,17032][講義04] 以CSS製作網頁導覽列[/url] 2.作業參考 [color=#0033CC]永遠的印象--莫內，範例網址：[/color] [color=#CC3366]1.透過CSS，以清單 ＜ul＞及＜li＞製作網頁導覽列[/color] http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列） http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列） [color=#CC3366]2.以圖片按鈕製作的導覽列[/color] http://mepopedia.com/~jinjin/web/hw04-2/　 (1) http://mepopedia.com/~web103-a/hw04/hw04-1025445040/ (2) http://mepopedia.com/~web103-a/hw04/hw04-1005445193/ (3) http://mepopedia.com/~web103-a/hw04/hw04-1025445064/ (4) http://mepopedia.com/~web103-a/hw04/hw04-1025445178/ (5) http://mepopedia.com/~web103-a/hw04/hw04-1025445001/ (6) http://mepopedia.com/~web101c/hw04/hw04-1015445243/ [hr] 5. [期中作業] 以單欄為主的網站設計 作業參考 (1) http://mepopedia.com/~web100b/midterm/midterm-1001445022/ (2) http://mepopedia.com/~web100b/midterm/midterm-1001445042/ (3) http://mepopedia.com/~web100a/midterm/midterm-1001445068/ (4) http://mepopedia.com/~web103-a/midterm/midterm-1025445001/ (5) http://mepopedia.com/~web103-a/midterm/midterm-1025445070/ (6) http://mepopedia.com/~web103-c/midterm/midterm-1025445069/ [hr] 6. [講義05] 繞圖排文與推文按鈕的應用 1.[url=http://mepopedia.com/forum/read.php?804,17878,17878][講義05] 繞圖排文與推文按鈕的應用[/url] 2.作業參考 (1) http://mepopedia.com/~jinjin/web/hw05/story.html [hr] 7. [作業06] 表格的製作 1.[url=http://mepopedia.com/forum/read.php?804,18062][講義06] 表格的製作 [/url] 2.作業參考 (1) http://mepopedia.com/~jinjin/web/hw06-ex/ (2) http://mepopedia.com/~web103-a/hw06/hw06-1025445001/ (3) http://mepopedia.com/~web103-a/hw06/hw06-1025445070/ (4) http://mepopedia.com/~web103-a/hw06/hw06-1025445040/ (5) http://mepopedia.com/~web103-a/hw06/hw06-1005445193/ [hr] 8. [作業07] 以Float：浮動，製作雙欄網頁 1.[url=http://mepopedia.com/forum/read.php?804,18255][講義07] 以Float：浮動，製作雙欄網頁[/url] 2.作業參考 (1) http://mepopedia.com/~jinjin/web/hw07/ (2) http://mepopedia.com/~web103-a/hw07/hw07-1005445193/ (3) http://mepopedia.com/~web103-a/hw07/hw07-1025445139/team.html (4) http://mepopedia.com/~web103-a/hw07/hw07-1005445195/ (5) http://mepopedia.com/~web103-a/hw07/hw07-1025445001/album.html (6) http://mepopedia.com/~web103-a/hw07/hw07-1025445040/ [hr] 9. [作業] 優良設計網站蒐集與分析 作業參考 (1) http://mepopedia.com/forum/read.php?2023,68211 [hr] 10. [期末作業] 以雙欄為主的網站設計 作業參考 (1) http://mepopedia.com/~web100b/final/final-1001445022/ (2) http://mepopedia.com/~web100b/final/final-1001445042/ (3) http://mepopedia.com/~web101c/final/final-1015445243/ http://mepopedia.com/~web101c/final/final-1015445243-1/ (4) http://mepopedia.com/~web103-a/final/final-1025445124/ (5) http://mepopedia.com/~web103-a/final/final-1025445055/ (6) http://mepopedia.com/~web103-a/final/final-1025445001/ (7) http://mepopedia.com/~web103-a/final/final-1025445040/ (8) http://mepopedia.com/~web103-a/final/final-1025445043/ (9) http://mepopedia.com/~web103-a/final/final-1005445193/ (10) http://mepopedia.com/~web103-a/final/final-1025445070/ (11) http://mepopedia.com/~web105-2c/final/final-1045445117/ http://mepopedia.com/forum/read.php?2023,67943 [hr] OnePage http://mepopedia.com/~css105-2b/final/final-1045445017/ http://mepopedia.com/~css105-2c/final/final-1045445117/ http://mepopedia.com/forum/read.php?804,84881 http://mepopedia.com/forum/read.php?2479,77136,77136#msg-77136 Sun, 31 May 2026 12:59:40 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2479,77136,77136#msg-77136 [講義] 單元課程練習整理 http://mepopedia.com/forum/read.php?2479,77136,77136#msg-77136
  1. 1. [作業01] 以HTML與CSS完成第一個網頁
  2. 2. [作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例
  3. 3. [作業03] 利用Div標籤與CSS建立基本網頁版型（圖片篇）
  4. 4. [作業04] 以CSS製作網頁導覽列
  5. 5. [期中作業] 以單欄為主的網站設計
  6. 6. [講義05] 繞圖排文與推文按鈕的應用
  7. 7. [作業06] 表格的製作
  8. 8. [作業07] 以Float：浮動，製作雙欄網頁
  9. 9. [作業] 優良設計網站蒐集與分析
  10. 10. [期末作業] 以雙欄為主的網站設計
每個單元皆會有講義整理，搭配課後練習作業，講義內有語法及影音複習檔，供同學課後複習，請善加利用。

[hr]

1. [作業01] 以HTML與CSS完成第一個網頁


1.[url=http://mepopedia.com/forum/read.php?804,16668][講義01] 以HTML與CSS完成第一個網頁[/url]

2.作業參考
(1) http://mepopedia.com/~web103-a/hw01/hw01-1005445193/
(2) http://mepopedia.com/~web103-a/hw01/hw01-1025445151/
(3) http://mepopedia.com/~web103-c/hw01/hw01-1025443044/

[hr]

2. [作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例


1.[url=http://mepopedia.com/forum/read.php?804,16481][講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]

2.作業參考
(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/

[hr]

3. [作業03] 利用Div標籤與CSS建立基本網頁版型（圖片篇）


1.[url=http://mepopedia.com/forum/read.php?804,16271][講義03] 利用Div標籤與CSS建立基本網頁版型（圖片篇）[/url]

2.作業參考
(1) http://mepopedia.com/~jinjin/web/hw03/
(2) http://mepopedia.com/~web103-a/hw03/hw03-1025445001/
(3) http://mepopedia.com/~web101c/hw03/hw03-1015445231/
(4) http://mepopedia.com/~web100-a/hw03/hw03-1006445010/
(5) http://mepopedia.com/~web101c/hw03/hw03-1015445203/
(6) http://mepopedia.com/~web101c/hw03/hw03-1015445243/Introduction.html

[hr]

4. [作業04] 以CSS製作網頁導覽列


1.[url=http://mepopedia.com/forum/read.php?804,17032][講義04] 以CSS製作網頁導覽列[/url]

2.作業參考
[color=#0033CC]永遠的印象--莫內，範例網址：[/color]
[color=#CC3366]1.透過CSS，以清單 ＜ul＞及＜li＞製作網頁導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04/　（滑入僅文字變色的導覽列）
http://mepopedia.com/~jinjin/web/hw04-1/　（滑入底色變色及文字置中的導覽列）

[color=#CC3366]2.以圖片按鈕製作的導覽列[/color]
http://mepopedia.com/~jinjin/web/hw04-2/　

(1) http://mepopedia.com/~web103-a/hw04/hw04-1025445040/
(2) http://mepopedia.com/~web103-a/hw04/hw04-1005445193/
(3) http://mepopedia.com/~web103-a/hw04/hw04-1025445064/
(4) http://mepopedia.com/~web103-a/hw04/hw04-1025445178/
(5) http://mepopedia.com/~web103-a/hw04/hw04-1025445001/
(6) http://mepopedia.com/~web101c/hw04/hw04-1015445243/

[hr]

5. [期中作業] 以單欄為主的網站設計



作業參考
(1) http://mepopedia.com/~web100b/midterm/midterm-1001445022/
(2) http://mepopedia.com/~web100b/midterm/midterm-1001445042/
(3) http://mepopedia.com/~web100a/midterm/midterm-1001445068/
(4) http://mepopedia.com/~web103-a/midterm/midterm-1025445001/
(5) http://mepopedia.com/~web103-a/midterm/midterm-1025445070/
(6) http://mepopedia.com/~web103-c/midterm/midterm-1025445069/

[hr]

6. [講義05] 繞圖排文與推文按鈕的應用


1.[url=http://mepopedia.com/forum/read.php?804,17878,17878][講義05] 繞圖排文與推文按鈕的應用[/url]

2.作業參考
(1) http://mepopedia.com/~jinjin/web/hw05/story.html

[hr]

7. [作業06] 表格的製作


1.[url=http://mepopedia.com/forum/read.php?804,18062][講義06] 表格的製作 [/url]

2.作業參考
(1) http://mepopedia.com/~jinjin/web/hw06-ex/
(2) http://mepopedia.com/~web103-a/hw06/hw06-1025445001/
(3) http://mepopedia.com/~web103-a/hw06/hw06-1025445070/
(4) http://mepopedia.com/~web103-a/hw06/hw06-1025445040/
(5) http://mepopedia.com/~web103-a/hw06/hw06-1005445193/

[hr]

8. [作業07] 以Float：浮動，製作雙欄網頁


1.[url=http://mepopedia.com/forum/read.php?804,18255][講義07] 以Float：浮動，製作雙欄網頁[/url]

2.作業參考
(1) http://mepopedia.com/~jinjin/web/hw07/
(2) http://mepopedia.com/~web103-a/hw07/hw07-1005445193/
(3) http://mepopedia.com/~web103-a/hw07/hw07-1025445139/team.html
(4) http://mepopedia.com/~web103-a/hw07/hw07-1005445195/
(5) http://mepopedia.com/~web103-a/hw07/hw07-1025445001/album.html
(6) http://mepopedia.com/~web103-a/hw07/hw07-1025445040/

[hr]

9. [作業] 優良設計網站蒐集與分析



作業參考
(1) http://mepopedia.com/forum/read.php?2023,68211


[hr]

10. [期末作業] 以雙欄為主的網站設計



作業參考
(1) http://mepopedia.com/~web100b/final/final-1001445022/
(2) http://mepopedia.com/~web100b/final/final-1001445042/
(3) http://mepopedia.com/~web101c/final/final-1015445243/
http://mepopedia.com/~web101c/final/final-1015445243-1/
(4) http://mepopedia.com/~web103-a/final/final-1025445124/
(5) http://mepopedia.com/~web103-a/final/final-1025445055/
(6) http://mepopedia.com/~web103-a/final/final-1025445001/
(7) http://mepopedia.com/~web103-a/final/final-1025445040/
(8) http://mepopedia.com/~web103-a/final/final-1025445043/
(9) http://mepopedia.com/~web103-a/final/final-1005445193/
(10) http://mepopedia.com/~web103-a/final/final-1025445070/
(11) http://mepopedia.com/~web105-2c/final/final-1045445117/

http://mepopedia.com/forum/read.php?2023,67943

[hr]
OnePage
http://mepopedia.com/~css105-2b/final/final-1045445017/
http://mepopedia.com/~css105-2c/final/final-1045445117/

http://mepopedia.com/forum/read.php?804,84881]]> JinJin 104-1《中國》竹視傳二A-網頁設計 Thu, 20 Aug 2015 00:13:25 +0800