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

週四, 三月 1. 2018

經過了一個寒假,為了讓大家回復記憶,請先複習基礎的網頁設計概念
以色塊為主的基本單欄網頁版型為基礎,加上其他使用過的功能,並配合CSS3語法,使網頁看起來更活潑!

網頁基礎複習


[url=http://mepopedia.com/forum/read.php?804,41760][講義] HTML & CSS網頁基礎複習整理[/url]

[hr]

課堂範例


http://mepopedia.com/~jinjin/ex/hw01/

[hr]

作業說明


參照講義
[url=http://mepopedia.com/forum/read.php?804,16481]利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]

自行選擇主題,製作以DIV架構搭配CSS的基本網頁,請注意字體大小、整體質感與配色

可參考http://www.css3maker.com/
適當加入CSS3效果


圓角:border-radius: 20px; (請自行放入適當位置並改變數值)
區塊陰影:box-shadow:5px 5px 5px #000000;(請自行放入適當位置並改變數值)
文字陰影:text-shadow: 1px 1px 1px #000000;(請自行放入適當位置並改變數值)
透明度: rgba(102,153,255,0.5)
RGBA是代表Red(红色) Green(綠色) Blue(藍色)和 Alpha,Alpha 0代表透明、1代表不透明,請自行改變數值)
透明度:opacity: 0.5;(設定的元素有50%的透明度,請自行放入適當位置並改變數值)
線性漸層:background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#866400), to(#FF4E28));(請自行放入適當位置並改變數值)
放射漸層:background:-webkit-gradient(radial, 165 0, 0, 220 -257, 465, from(#866400), to(#FF4E28));(請自行放入適當位置並改變數值)
漸層語法:http://mepopedia.com/forum/read.php?844,17157

製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

1.網址:http://mepopedia.com/~web106-2c/hw01/hw01-105xxxxxxx
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
作業參考
(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]

上課影音



CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc


作業一課堂講解
http://youtu.be/TnaMIVYyf4Y



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

週四, 三月 1. 2018

經過了一個寒假,為了讓大家回復記憶,請先複習基礎的網頁設計概念
以色塊為主的基本單欄網頁版型為基礎,加上其他使用過的功能,並配合CSS3語法,使網頁看起來更活潑!

網頁基礎複習


[url=http://mepopedia.com/forum/read.php?804,41760][講義] HTML & CSS網頁基礎複習整理[/url]

[hr]

課堂範例


http://mepopedia.com/~jinjin/ex/hw01/

[hr]

作業說明


參照講義
[url=http://mepopedia.com/forum/read.php?804,16481]利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]

自行選擇主題,製作以DIV架構搭配CSS的基本網頁,請注意字體大小、整體質感與配色

可參考http://www.css3maker.com/
適當加入CSS3效果


圓角:border-radius: 20px; (請自行放入適當位置並改變數值)
區塊陰影:box-shadow:5px 5px 5px #000000;(請自行放入適當位置並改變數值)
文字陰影:text-shadow: 1px 1px 1px #000000;(請自行放入適當位置並改變數值)
透明度: rgba(102,153,255,0.5)
RGBA是代表Red(红色) Green(綠色) Blue(藍色)和 Alpha,Alpha 0代表透明、1代表不透明,請自行改變數值)
透明度:opacity: 0.5;(設定的元素有50%的透明度,請自行放入適當位置並改變數值)
線性漸層:background:-webkit-gradient(linear, 80% 20%, 10% 21%, from(#866400), to(#FF4E28));(請自行放入適當位置並改變數值)
放射漸層:background:-webkit-gradient(radial, 165 0, 0, 220 -257, 465, from(#866400), to(#FF4E28));(請自行放入適當位置並改變數值)
漸層語法:http://mepopedia.com/forum/read.php?844,17157

製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

1.網址:http://mepopedia.com/~web106-2b/hw01/hw01-105xxxxxxx
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
作業參考
(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]

上課影音



CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc


作業一課堂講解
http://youtu.be/TnaMIVYyf4Y



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

週四, 三月 1. 2018

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

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

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

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

[作業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/
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/