進階網頁設計延續網頁設計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