Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

Change History

Message: [講義] 進階網頁設計-課程介紹

Changed By: JinJin
Change Date: March 01, 2018 12:38AM

[講義] 進階網頁設計-課程介紹
進階網頁設計延續網頁設計html+css的製作方式
加入css3的進階語法、javascript動態語法,RWD響應式網頁設計、以及不同的版型練習
並深度賞析現有網站的設計風格,養成網頁美感分析的能力

期中作業以個人獨立完成OnePage的RWD響應式網頁為主
期末作業以分組製作多頁的RWD主題式網站,以參加網站新人王為目標

每個單元皆會有講義整理,搭配課後練習作業,供同學課後複習,請善加利用。

<h2>[作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型</h2>
CSS3初探,加入css3語法的練習

作業參考
(1) http://mepopedia.com/~web103-2a/hw01/hw01-102/
(2) http://mepopedia.com/~css105-2b/hw01/hw01-1045445017/
(3) http://mepopedia.com/~web105-2c/hw01/hw01-1045445117-1/
(4) http://mepopedia.com/~web105-2c/hw01/hw01-1045445189-2/
(5) http://mepopedia.com/~css105-2c/hw01/hw01-1045445036/
(6) http://mepopedia.com/~css104-2b/hw01/hw01-1035445170/
(7) http://mepopedia.com/~css104-2c/hw01/hw01-1035445057/


[hr]
<h2>[作業02] 網頁美感排版設計</h2>
1.[url=http://mepopedia.com/forum/read.php?804,75770][講義] 網頁美感排版設計[/url]
以photoshop製作網頁版型Mockup,以提案為主的視覺型設計

範例:http://mepopedia.com/~jinjin/webclass/TaiwanMuseum/

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

(2)
作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445017
(1)原網站名稱及網址:
佳樂精緻蛋糕專賣店 http://www.cakeking.com.tw/front/bin/home.phtml
GOVIDA http://www.godiva.com.tw/twcht/

(3)
作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445189/
1.須修改網站: http://www.adasoap.com.tw/
2.優良網站名稱及網址: http://japan-leather-pride.com/#top

[hr]
<h2>[作業03]EDM/電子報製作 </h2>
範例
(1) http://mepopedia.com/~jinjin/webclass/edm1.html
(2) http://mepopedia.com/~jinjin/webclass/edm2.html
(3) http://mepopedia.com/~jinjin/webclass/edm-3.html


[hr]
<h2>[作業04]RWD網站初探 </h2>
範例
(1) http://www.tooplate.com
(2) http://www.dreamtemplate.com
(3) https://themehunt.com
(4) http://www.free-css.com
(5) https://html5up.net
(6) https://www.wowthemes.net

線上架站平台
(1) https://www.wix.com
(2) https://zh-tw.wordpress.com
(3) https://www.weebly.com/?lang=zh_TW
(4)https://www.pixnet.net

[hr]
<h2>[期中作業]OnePage網頁製作 </h2>
範例
(1) http://www.cute.edu.tw/dvcd/lieyu/
(2) http://www.cute.edu.tw/dvcd/master/
(3) http://ccnt1.cute.edu.tw/cpland/4e/
(4) http://mepopedia.com/~css105-2a/lion_candy/

作業參考
http://mepopedia.com/~css105-2c/final/final-1045445036/
http://mepopedia.com/~css105-2c/final/final-1045445117/
http://mepopedia.com/~css105-2c/final/final-1045445069/
(1) http://mepopedia.com/~css105-2b/final/final-1045445017/
http://mepopedia.com/~css105-2b/final/final-1045445035/
http://mepopedia.com/~css105-2c/final/final-1045445189/
http://mepopedia.com/~css105-2b/final/final-1045445062/run-charity-lite/theme-runcharity/

<h2>[期末作業]RWD專題網站製作 </h2>
RWD專題網站製作 </h2>
[hr]
<h2>[期中作業]OnePage網頁製作 </h2>
範例
(1) http://www.cute.edu.tw/dvcd/lieyu/
(2) http://www.cute.edu.tw/dvcd/master/
(3) http://ccnt1.cute.edu.tw/cpland/4e/
(4) http://mepopedia.com/~css105-2a/lion_candy/

作業參考
http://mepopedia.com/~css105-2c/final/final-1045445036/
http://mepopedia.com/~css105-2c/final/final-1045445117/
http://mepopedia.com/~css105-2c/final/final-1045445069/
http://mepopedia.com/~css105-2b/final/final-1045445017/
http://mepopedia.com/~css105-2b/final/final-1045445035/
http://mepopedia.com/~css105-2c/final/final-1045445189/
http://mepopedia.com/~css105-2b/final/final-1045445062/run-charity-lite/theme-runcharity/

<h2>[期末作業]RWD專題網站製作 </h2>
範例
(1) http://www.cute.edu.tw/dvcd/qionglin/
(2) http://www.mepopedia.com/~jinjin/buzzwordstar/
Changed By: JinJin
Change Date: March 01, 2018 12:35AM

[講義] 進階網頁設計-課程介紹
進階網頁設計延續網頁設計html+css的製作方式
加入css3的進階語法、javascript動態語法,RWD響應式網頁設計、以及不同的版型練習
並深度賞析現有網站的設計風格,養成網頁美感分析的能力

期中作業以個人獨立完成OnePage的RWD響應式網頁為主
期末作業以分組製作多頁的RWD主題式網站,以參加網站新人王為目標

每個單元皆會有講義整理,搭配課後練習作業,供同學課後複習,請善加利用。

<h2>[作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型</h2>
CSS3初探,加入css3語法的練習

作業參考
http://mepopedia.com/~web103-2a/hw01/hw01-102/
(1) http://mepopedia.com/~web102-c/hw01/hw01-1015445243/
(2) http://mepopedia.com/~css104-2a/hw01/hw01-1035445130/
(3) http://mepopedia.com/~css104-2b/hw01/hw01-1035445170/
(4) http://mepopedia.com/~css104-2b/hw01/hw01-1035445209/
(5) http://mepopedia.com/~css104-2c/hw01/hw01-1035445057/
(6) http://mepopedia.com/~css104-2c/hw01/hw01-1035443128/

[hr]
[hr]
<h2>[作業02] 網頁美感排版設計</h2>
1.[url=http://mepopedia.com/forum/read.php?804,75770][講義] 網頁美感排版設計[/url]
以photoshop製作網頁版型Mockup,以提案為主的視覺型設計

範例:http://mepopedia.com/~jinjin/~webclass/TaiwanMuseum/

2.作業參考
(1) http://mepopedia.com/~web103-2a/hw01/hw01-102/
(2) http://mepopedia.com/~css105-2b/hw01/hw01-1045445017/
(3) http://mepopedia.com/~web105-2c/hw0/

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


[hr]
<h2>[作業02] 網頁美感排版設計</h2>
1.[url=http://mepopedia.com/forum/read.php?804,75770][講義] 網頁美感排版設計[/url]
以photoshop製作網頁版型Mockup,以提案為主的視覺型設計

範例:http://mepopedia.com/~jinjin/webclass/TaiwanMuseum/

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

(2)
作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445017
(1)原網站名稱及網址:
佳樂精緻蛋糕專賣店 http://www.cakeking.com.tw/front/bin/home.phtml
GOVIDA http://www.godiva.com.tw/twcht/

(3)
作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445189/
1.須修改網站: http://www.adasoap.com.tw/
2.優良網站名稱及網址: http://japan-leather-pride.com/#top

[hr]
<h2>[作業03]EDM/電子報製作 </h2>
範例
(1) http://mepopedia.com/~jinjin/webclass/edm1.html
(2) http://mepopedia.com/~jinjin/webclass/edm2.html
(3) http://mepopedia.com/~jinjin/webclass/edm-3.html


[hr]
<h2>[作業04]RWD網站初探 </h2>
範例
(1) http://www.tooplate.com
(2) http://www.dreamtemplate.com
(3) https://themehunt.com
(4) http://www.free-css.com
(5) https://html5up.net
(6) https://www.wowthemes.net

線上架站平台
(1) https://www.wix.com
(2) https://zh-tw.wordpress.com
(3) https://www.weebly.com/?lang=zh_TW
(4)https://www.pixnet.net

[hr]
<h2>[期中作業]OnePage網頁製作 </h2>
範例
(1) http://www.cute.edu.tw/dvcd/lieyu/
(2) http://www.cute.edu.tw/dvcd/master/
(3) http://ccnt1.cute.edu.tw/cpland/4e/
(4) http://mepopedia.com/~css105-2a/lion_candy/

作業參考
http://mepopedia.com/~css105-2c/final/final-1045445036/
http://mepopedia.com/~css105-2c/final/final-1045445117/
http://mepopedia.com/~css105-2c/final/final-1045445069/
(1) http://mepopedia.com/~css105-2b/final/final-1045445017/
http://mepopedia.com/~css105-2b/final/final-1045445035/
http://mepopedia.com/~css105-2c/final/final-1045445189/
http://mepopedia.com/~css105-2b/final/final-1045445062/run-charity-lite/theme-runcharity/

<h2>[期末作業]RWD專題網站製作 </h2>
[hr]
<h2>[期中作業]OnePage網頁製作 </h2>
範例
(1) http://www.cute.edu.tw/dvcd/lieyu/
(2) http://www.cute.edu.tw/dvcd/master/
(3) http://ccnt1.cute.edu.tw/cpland/4e/
(4) http://mepopedia.com/~css105-2a/lion_candy/

作業參考
http://mepopedia.com/~css105-2c/final/final-1045445036/
http://mepopedia.com/~css105-2c/final/final-1045445117/
http://mepopedia.com/~css105-2c/final/final-1045445069/
http://mepopedia.com/~css105-2b/final/final-1045445017/
http://mepopedia.com/~css105-2b/final/final-1045445035/
http://mepopedia.com/~css105-2c/final/final-1045445189/
http://mepopedia.com/~css105-2b/final/final-1045445062/run-charity-lite/theme-runcharity/

<h2>[期末作業]RWD專題網站製作 </h2>
範例
(1) http://www.cute.edu.tw/dvcd/qionglin/
(2) http://www.mepopedia.com/~jinjin/buzzwordstar/

Original Message

作者: JinJin
Date: March 01, 2018 12:25AM

[講義] 進階網頁設計-課程介紹
進階網頁設計延續網頁設計html+css的製作方式
加入css3的進階語法、javascript動態語法,RWD響應式網頁設計、以及不同的版型練習
並深度賞析現有網站的設計風格,養成網頁美感分析的能力

期中作業以個人獨立完成OnePage的RWD響應式網頁為主
期末作業以分組製作多頁的RWD主題式網站,以參加網站新人王為目標

每個單元皆會有講義整理,搭配課後練習作業,供同學課後複習,請善加利用。

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


CSS3初探,加入css3語法的練習

作業參考
http://mepopedia.com/~web103-2a/hw01/hw01-102/
(1) http://mepopedia.com/~web102-c/hw01/hw01-1015445243/
(2) http://mepopedia.com/~css104-2a/hw01/hw01-1035445130/
(3) http://mepopedia.com/~css104-2b/hw01/hw01-1035445170/
(4) http://mepopedia.com/~css104-2b/hw01/hw01-1035445209/
(5) http://mepopedia.com/~css104-2c/hw01/hw01-1035445057/
(6) http://mepopedia.com/~css104-2c/hw01/hw01-1035443128/

[hr]
[hr]

[作業02] 網頁美感排版設計


1.[url=http://mepopedia.com/forum/read.php?804,75770][講義] 網頁美感排版設計[/url]
以photoshop製作網頁版型Mockup,以提案為主的視覺型設計

範例:http://mepopedia.com/~jinjin/~webclass/TaiwanMuseum/

2.作業參考
(1) http://mepopedia.com/~web103-2a/hw01/hw01-102/
(2) http://mepopedia.com/~css105-2b/hw01/hw01-1045445017/
(3) http://mepopedia.com/~web105-2c/hw0/hw01-1035445057/


[hr]

[作業02] 網頁美感排版設計


1.[url=http://mepopedia.com/forum/read.php?804,75770][講義] 網頁美感排版設計[/url]
以photoshop製作網頁版型Mockup,以提案為主的視覺型設計

範例:http://mepopedia.com/~jinjin/webclass/TaiwanMuseum/

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

(2)
作業網址:http://mepopedia.com/~css105-2b/hw04/hw04-1045445017
(1)原網站名稱及網址:
佳樂精緻蛋糕專賣店 http://www.cakeking.com.tw/front/bin/home.phtml
GOVIDA http://www.godiva.com.tw/twcht/

(3)
作業網址:http://mepopedia.com/~css105-2c/hw04/hw04-1045445189/
1.須修改網站: http://www.adasoap.com.tw/
2.優良網站名稱及網址: http://japan-leather-pride.com/#top

[hr]

[作業03]EDM/電子報製作


範例
(1) http://mepopedia.com/~jinjin/webclass/edm1.html
(2) http://mepopedia.com/~jinjin/webclass/edm2.html
(3) http://mepopedia.com/~jinjin/webclass/edm-3.html


[hr]

[作業04]RWD網站初探


範例
(1) http://www.tooplate.com
(2) http://www.dreamtemplate.com
(3) https://themehunt.com
(4) http://www.free-css.com
(5) https://html5up.net
(6) https://www.wowthemes.net

線上架站平台
(1) https://www.wix.com
(2) https://zh-tw.wordpress.com
(3) https://www.weebly.com/?lang=zh_TW
(4)https://www.pixnet.net

[hr]

[期中作業]OnePage網頁製作


範例
(1) http://www.cute.edu.tw/dvcd/lieyu/
(2) http://www.cute.edu.tw/dvcd/master/
(3) http://ccnt1.cute.edu.tw/cpland/4e/
(4) http://mepopedia.com/~css105-2a/lion_candy/

作業參考
http://mepopedia.com/~css105-2c/final/final-1045445036/
http://mepopedia.com/~css105-2c/final/final-1045445117/
http://mepopedia.com/~css105-2c/final/final-1045445069/
(1) http://mepopedia.com/~css105-2b/final/final-1045445017/
http://mepopedia.com/~css105-2b/final/final-1045445035/
http://mepopedia.com/~css105-2c/final/final-1045445189/
http://mepopedia.com/~css105-2b/final/final-1045445062/run-charity-lite/theme-runcharity/

[期末作業]RWD專題網站製作


[hr]

[期中作業]OnePage網頁製作


範例
(1) http://www.cute.edu.tw/dvcd/lieyu/
(2) http://www.cute.edu.tw/dvcd/master/
(3) http://ccnt1.cute.edu.tw/cpland/4e/
(4) http://mepopedia.com/~css105-2a/lion_candy/

作業參考
http://mepopedia.com/~css105-2c/final/final-1045445036/
http://mepopedia.com/~css105-2c/final/final-1045445117/
http://mepopedia.com/~css105-2c/final/final-1045445069/
http://mepopedia.com/~css105-2b/final/final-1045445017/
http://mepopedia.com/~css105-2b/final/final-1045445035/
http://mepopedia.com/~css105-2c/final/final-1045445189/
http://mepopedia.com/~css105-2b/final/final-1045445062/run-charity-lite/theme-runcharity/

[期末作業]RWD專題網站製作


範例
(1) http://www.cute.edu.tw/dvcd/qionglin/
(2) http://www.mepopedia.com/~jinjin/buzzwordstar/