[講義] 單元課程練習整理

每個單元皆會有講義整理，搭配課後練習作業，講義內有語法及影音複習檔，供同學課後複習，請善加利用。

[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



(編輯記錄)