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

Advanced

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

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

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

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

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


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]

2. [作業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]

3. [作業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]

4. [作業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]

5. [期中作業]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/

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


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



Edited 2 time(s). Last edit at 03/01/2018 12:38AM by JinJin.
(編輯記錄)