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

Advanced

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

請同學先複習基礎的網頁設計概念
以色塊為主的基本單欄網頁版型為基礎,加上其他使用過的功能,並配合CSS3語法,使網頁看起來更活潑!

1. 網頁基礎複習


[講義] HTML & CSS網頁基礎複習整理



2. 課堂範例


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



3. 作業說明


參照講義
利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例

自行選擇主題,製作以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




若若於練習中加入h1滑入的動畫,可加入以下CSS語法練習:

h1 {
animation-duration: 3s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}




Google語法補充
思源黑體
@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);

font-family: 'Noto Sans TC', sans-serif;

圓體
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);

font-family: ‘cwTeXYen’, sans-serif;



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

並回覆於此篇文章

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



作業參考
http://mepopedia.com/forum/read.php?2722,87650
http://mepopedia.com/forum/read.php?2723,87651
(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/





4. 上課影音


[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs





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




完整講義專頁
https://mepopedia.com/~jinjin/webdesign/




Edited 4 time(s). Last edit at 11/08/2018 10:45AM by JinJin.
(編輯記錄)

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

1.網址:http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445013
2.設計概念與製作心得:
原因很簡單因為那陣子去了地景藝術節所以才採用這個題材
3.何謂HTML、DIV及CSS:
HTML負責建構網頁的基本架構
DIV 是區塊的意思
CSS專門負責美化網頁的任務
4.附上至少一個覺得設計很有質感的網站,並說明原因
https://www.pinterest.com/ 簡潔明瞭
5.期待這門課的學習成果與收穫為何?
可以獨自作業,建立屬於自己的網站



Edited 1 time(s). Last edit at 11/08/2018 11:09AM by 1065445013.
(編輯記錄)

1.網址:http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121

2.設計概念與製作心得:
以電影哈利波特的風格作顏色上的搭配,想呈現有魔法的感覺,和上學期老師的教法不同,要花點時間去適應程式碼,所以花了很多時間製作,不過因為是自己喜歡的主題,做得蠻開心的

3.何謂HTML、DIV及CSS:
HTML可以建立網站的基本架構,DIV網頁裡的區塊像是header,content,footer,分成三個大區塊,在區塊內進行編排,CSS就像是負責美化網頁吧,作文字,顏色,大小等細微多變的調整

4.附上至少一個覺得設計很有質感的網站,並說明原因
http://www.don-guri.com/music/
這是高中時老師上課當作參考的一頁式網站,因為圖像加上音效的搭配比一般網站更豐富有趣,動態的圖像降吸引人觀看,也是我很喜歡的網站

5.期待這門課的學習成果與收穫為何?
複習之前所學的,能更快看懂並理解程式語法,
學到顏色背景可以透明,網站的主題風格配色編排整體都要注意

1.網址:http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445001
2.設計概念與製作心得: 製作米奇90周年的資料,有附上這次米奇90周年在台灣做哪些活動,有米奇捷運的介紹及圖片,也有付上親子頻道去參加活動的新聞,還有90周年的公仔組合,以及米奇Fun很大特展的資訊。
3.何謂HTML、DIV及CSS:
HTML:網站的基本架構
DIV:header、content,footer
CSS:依據個人想要的設計去美化網頁。
4.附上至少一個覺得設計很有質感的網站,並說明原因
https://www.moooi.com/
畫面簡單是以黑色對主色調,家具產品的照片具有美感還有質感,讓人忍不住看下去,網頁分類清楚且輪播圖也很清楚標示活動。
5.期待這門課的學習成果與收穫為何?
學到更進階的網頁資訊



Edited 2 time(s). Last edit at 01/15/2019 04:29PM by 1065445001.
(編輯記錄)

1.網址:http://ftp.mepopedia.com/~css107a/hw01/hw01-1045445241/
2.設計概念與製作心得:有趣
3.何謂HTML、DIV及CSS: 網頁
4.附上至少一個覺得設計很有質感的網站,並說明原因
https://www.apple.com/tw/
簡單明瞭好操作
5.期待這門課的學習成果與收穫為何?
希望對網頁更了解

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

1.網址: http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445009
2.設計概念與製作心得:健康概念,這是最簡單的作業QQ
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因 http://www.ainwoods.com/LOVESERIES?fbclid=IwAR1t5zwRZ1vYaHHNMNswL4L0wb4VPNfFz9R2HeFCddxbugv6lh1132-HQQw
黑色的背景配上照片很有質感~
5.期待這門課的學習成果與收穫為何? 製做我的小網站讚讚



Edited 1 time(s). Last edit at 01/14/2019 05:00PM by 1065445009.
(編輯記錄)

1.網址:http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445078
2.設計概念與製作心得: 我做我的偶像小松菜奈的演藝紀錄
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因 http://www.ainwoods.com/LOVESERIES?fbclid=IwAR1t5zwRZ1vYaHHNMNswL4L0wb4VPNfFz9R2HeFCddxbugv6lh1132-HQQw 很酷我抄襲1065445009
5.期待這門課的學習成果與收穫為何? 知道如何做網頁的基礎。