[講義] 進階網頁設計-單元課程整理 1. [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型2. [作業02] HTML與CSS練習--首頁實作篇3. [作業03] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 4. [作業04] HTML與CSS練習-- 內頁實作篇--其他頁面完成5. [期中作業] HTML與CSS練習--網站實作6. [作業05] 網頁美感排版設計7. [作業06] jQuery動態網頁初探-fadein 8. [ 作業07] jQuery動態換頁效果9. [作業08] HTML/CSS/jQuery物件小動畫、燈箱效果10. [期末作業] 專題網站設計進階網頁設計延續網頁設計html+css的製作方式 加入css3的進階語法，以及不同的版型練習 並深度賞析現有網站的設計風格，養成網頁美感分析的能力 期末作業以分組製作動態網站，以參加網站新人王為目標 每個單元皆會有講義整理，搭配課後練習作業，講義內有語法及影音複習檔，供同學課後複習，請善加利用。 [hr] 1. [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型 1.[url]http://mepopedia.com/forum/read.php?2428,74366[/url] 2.作業參考 http://mepopedia.com/~web103-2a/hw01/hw01-102/ (1) http://mepopedia.com/~web102-c/hw01/hw01-1015445243/ (2) http://mepopedia.com/~web103-2a/hw01/hw01-1025445058/ (3) http://mepopedia.com/~web103-2a/hw01/hw01-1025445178/ (4) http://mepopedia.com/~web103-2a/hw01/hw01-1025445073/ [hr] 2. [作業02] HTML與CSS練習--首頁實作篇 1.[url=http://mepopedia.com/forum/read.php?804,43670][講義] HTML與CSS練習--首頁實作篇[/url] 2.作業參考 http://mepopedia.com/~web102-c/hw03/hw03/ (1) http://mepopedia.com/~web102-c/midterm/midterm-1015445215/ (2) http://mepopedia.com/~web102-c/midterm/midterm-1015445212/ (3) http://mepopedia.com/~web102-c/midterm/midterm-1015445219 (4) http://mepopedia.com/~web103-2a/hw02/hw02-1025445205/ [hr] 3. [作業03] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 1.[url=http://mepopedia.com/forum/read.php?804,44612][講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 [/url] 2.作業參考 http://mepopedia.com/~jinjin/web/hw04a/works.html (1) http://mepopedia.com/~web103-2b/hw03/hw03-1025445005/ (2) http://mepopedia.com/~web103-2a/hw03/hw03-1025445205/222222.html [hr] 4. [作業04] HTML與CSS練習-- 內頁實作篇--其他頁面完成 1.[url=http://mepopedia.com/forum/read.php?804,44848 ][講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探[/url] 2.作業參考 http://mepopedia.com/~jinjin/web/hw05a/link.html (1) http://mepopedia.com/~web103-2a/hw04/hw04-1025445001/links.html (2) http://mepopedia.com/~web103-2b/hw04/hw04-1025445005/04 (3) http://mepopedia.com/~web103-2b/hw04/hw04-1025445062/link.html [hr] 5. [期中作業] HTML與CSS練習--網站實作 作業參考 (1) http://mepopedia.com/~web103-2b/hw04/hw04-1025445005/indexD.html (2) http://mepopedia.com/~web102-a/midterm/hw03_1015445024/ (3) http://mepopedia.com/~web102-c/midterm/midterm-1015445219 [hr] 6. [作業05] 網頁美感排版設計 1.[url=http://mepopedia.com/forum/read.php?804,75770][講義] 網頁美感排版設計[/url] 2.作業參考 (1) (1)原網站名稱及網址： 高雄市教育部網站-英文版 作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005 (2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/ (2) 網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/ (1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html (2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/ (3) 作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/ (1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp (4) 作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073 (1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/ (2)參考網站網址與網站名稱： http://www.devildessert.com/ [hr] 7. [作業06] jQuery動態網頁初探-fadein 1.[url=http://mepopedia.com/forum/read.php?1497,45619 ][講義] jQuery講義 [/url] 2.作業參考 (1) http://mepopedia.com/~web103-2b/hw06/hw06-1025445005/ (2) http://mepopedia.com/~web103-2a/hw06/hw06-1025445205/ [hr] 8. [ 作業07] jQuery動態換頁效果 1.[url=http://mepopedia.com/forum/read.php?804,76063 ][講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 [/url] 2.作業參考 (1) http://mepopedia.com/~web103-2b/hw07/hw07-1025445005 [hr] 9. [作業08] HTML/CSS/jQuery物件小動畫、燈箱效果 1.[url=http://mepopedia.com/forum/read.php?804,46224 ][講義]FunTaipei HTML/CSS/jQuery 動態效果分析 [/url] 作業參考 (1) http://mepopedia.com/~web103-2b/hw08/hw08-1025445005/ (2) http://mepopedia.com/~web103-2b/hw08/hw08-1025445062/ (3) http://mepopedia.com/~web102-c/hw08/hw08-1015445243/ (4) http://mepopedia.com/~web102-c/hw08/hw08-1015445218/ (5) http://mepopedia.com/~web102-c/hw08/hw08-1015445231/ (6) http://mepopedia.com/~web102-a/hw08/hw08-1015445006/ (7) http://mepopedia.com/~web102-a/hw08/hw07-1015445001/ (8) http://mepopedia.com/~web102-c/hw08/hw08-1015445219/ [hr] 10. [期末作業] 專題網站設計 1.[url=http://mepopedia.com/forum/read.php?2428,75914 ][期末作業說明] 專題網站製作--以網站新人王為例[/url] 2.作業參考 節識臺灣 http://mepopedia.com/~web102-a/final/final-1015445002/taiwan 台灣健康五小吃 http://mepopedia.com/~web103-2b/final/final-1025445005 剝皮寮介紹 http://mepopedia.com/~web102-a/final/0519BPL/0519BPL/Bopiliao.html 黃鶯出谷 絕妙鶯歌 http://mepopedia.com/~web102-c/final/final-1015445218 平溪線http://mepopedia.com/~web102-c/final/final-1015445215 ReStart HZOO 重新啟動 http://mepopedia.com/~web103-2a/final/final-1025445043 相府香城(板橋府中介紹) http://mepopedia.com/~web103-2a/final/final-1025445055/ 羅東遊 http://mepopedia.com/~web103-2b/final/final-1025445044 台灣國家公園 http://mepopedia.com/~web103-2b/final/final-1025445029 第四度空間 http://mepopedia.com/~web103-2a/final/final-1025445205/ 樂遊風城 http://mepopedia.com/~web103-2c/final/final-1025445015 珍動台灣_Rare animals in Taiwan http://mepopedia.com/~web103-2c/final/final-1025445117 http://mepopedia.com/forum/read.php?2560,79946,79946#msg-79946 Wed, 26 Aug 2026 19:55:25 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2560,79946,79946#msg-79946 [講義] 進階網頁設計-單元課程整理 http://mepopedia.com/forum/read.php?2560,79946,79946#msg-79946
  1. 1. [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型
  2. 2. [作業02] HTML與CSS練習--首頁實作篇
  3. 3. [作業03] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果
  4. 4. [作業04] HTML與CSS練習-- 內頁實作篇--其他頁面完成
  5. 5. [期中作業] HTML與CSS練習--網站實作
  6. 6. [作業05] 網頁美感排版設計
  7. 7. [作業06] jQuery動態網頁初探-fadein
  8. 8. [ 作業07] jQuery動態換頁效果
  9. 9. [作業08] HTML/CSS/jQuery物件小動畫、燈箱效果
  10. 10. [期末作業] 專題網站設計
進階網頁設計延續網頁設計html+css的製作方式
加入css3的進階語法，以及不同的版型練習
並深度賞析現有網站的設計風格，養成網頁美感分析的能力

期末作業以分組製作動態網站，以參加網站新人王為目標

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

[hr]

1. [作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型


1.[url]http://mepopedia.com/forum/read.php?2428,74366[/url]

2.作業參考
http://mepopedia.com/~web103-2a/hw01/hw01-102/
(1) http://mepopedia.com/~web102-c/hw01/hw01-1015445243/
(2) http://mepopedia.com/~web103-2a/hw01/hw01-1025445058/
(3) http://mepopedia.com/~web103-2a/hw01/hw01-1025445178/
(4) http://mepopedia.com/~web103-2a/hw01/hw01-1025445073/

[hr]

2. [作業02] HTML與CSS練習--首頁實作篇


1.[url=http://mepopedia.com/forum/read.php?804,43670][講義] HTML與CSS練習--首頁實作篇[/url]

2.作業參考
http://mepopedia.com/~web102-c/hw03/hw03/
(1) http://mepopedia.com/~web102-c/midterm/midterm-1015445215/
(2) http://mepopedia.com/~web102-c/midterm/midterm-1015445212/
(3) http://mepopedia.com/~web102-c/midterm/midterm-1015445219
(4) http://mepopedia.com/~web103-2a/hw02/hw02-1025445205/

[hr]

3. [作業03] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果


1.[url=http://mepopedia.com/forum/read.php?804,44612][講義] HTML與CSS練習--內頁實作篇--資料整理--以DIV製作表格效果 [/url]

2.作業參考
http://mepopedia.com/~jinjin/web/hw04a/works.html
(1) http://mepopedia.com/~web103-2b/hw03/hw03-1025445005/
(2) http://mepopedia.com/~web103-2a/hw03/hw03-1025445205/222222.html

[hr]

4. [作業04] HTML與CSS練習-- 內頁實作篇--其他頁面完成


1.[url=http://mepopedia.com/forum/read.php?804,44848 ][講義] HTML與CSS練習--內頁實作篇--其他頁面完成與CSS3初探[/url]

2.作業參考
http://mepopedia.com/~jinjin/web/hw05a/link.html
(1) http://mepopedia.com/~web103-2a/hw04/hw04-1025445001/links.html
(2) http://mepopedia.com/~web103-2b/hw04/hw04-1025445005/04
(3) http://mepopedia.com/~web103-2b/hw04/hw04-1025445062/link.html


[hr]

5. [期中作業] HTML與CSS練習--網站實作



作業參考
(1) http://mepopedia.com/~web103-2b/hw04/hw04-1025445005/indexD.html
(2) http://mepopedia.com/~web102-a/midterm/hw03_1015445024/
(3) http://mepopedia.com/~web102-c/midterm/midterm-1015445219

[hr]

6. [作業05] 網頁美感排版設計


1.[url=http://mepopedia.com/forum/read.php?804,75770][講義] 網頁美感排版設計[/url]

2.作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/

(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/

(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp

(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.com/

[hr]

7. [作業06] jQuery動態網頁初探-fadein


1.[url=http://mepopedia.com/forum/read.php?1497,45619 ][講義] jQuery講義 [/url]

2.作業參考
(1) http://mepopedia.com/~web103-2b/hw06/hw06-1025445005/
(2) http://mepopedia.com/~web103-2a/hw06/hw06-1025445205/

[hr]

8. [ 作業07] jQuery動態換頁效果


1.[url=http://mepopedia.com/forum/read.php?804,76063 ][講義] FunTaipei HTML 網頁架構分析(1)-jQuery動態換頁效果 [/url]

2.作業參考
(1) http://mepopedia.com/~web103-2b/hw07/hw07-1025445005


[hr]

9. [作業08] HTML/CSS/jQuery物件小動畫、燈箱效果



1.[url=http://mepopedia.com/forum/read.php?804,46224 ][講義]FunTaipei HTML/CSS/jQuery 動態效果分析 [/url]
作業參考
(1) http://mepopedia.com/~web103-2b/hw08/hw08-1025445005/
(2) http://mepopedia.com/~web103-2b/hw08/hw08-1025445062/
(3) http://mepopedia.com/~web102-c/hw08/hw08-1015445243/
(4) http://mepopedia.com/~web102-c/hw08/hw08-1015445218/
(5) http://mepopedia.com/~web102-c/hw08/hw08-1015445231/
(6) http://mepopedia.com/~web102-a/hw08/hw08-1015445006/
(7) http://mepopedia.com/~web102-a/hw08/hw07-1015445001/
(8) http://mepopedia.com/~web102-c/hw08/hw08-1015445219/


[hr]

10. [期末作業] 專題網站設計


1.[url=http://mepopedia.com/forum/read.php?2428,75914 ][期末作業說明] 專題網站製作--以網站新人王為例[/url]

2.作業參考
節識臺灣 http://mepopedia.com/~web102-a/final/final-1015445002/taiwan
台灣健康五小吃 http://mepopedia.com/~web103-2b/final/final-1025445005
剝皮寮介紹 http://mepopedia.com/~web102-a/final/0519BPL/0519BPL/Bopiliao.html
黃鶯出谷 絕妙鶯歌 http://mepopedia.com/~web102-c/final/final-1015445218
平溪線http://mepopedia.com/~web102-c/final/final-1015445215
ReStart HZOO 重新啟動 http://mepopedia.com/~web103-2a/final/final-1025445043
相府香城(板橋府中介紹) http://mepopedia.com/~web103-2a/final/final-1025445055/
羅東遊 http://mepopedia.com/~web103-2b/final/final-1025445044
台灣國家公園 http://mepopedia.com/~web103-2b/final/final-1025445029
第四度空間 http://mepopedia.com/~web103-2a/final/final-1025445205/
樂遊風城 http://mepopedia.com/~web103-2c/final/final-1025445015
珍動台灣_Rare animals in Taiwan http://mepopedia.com/~web103-2c/final/final-1025445117]]> JinJin 104-2《中國》竹視傳二A-進階網頁設計 Sun, 14 Feb 2016 01:29:09 +0800