[作業01]DIV與CSS練習--以色塊為主的基本單欄網頁版型 1. 網頁基礎複習2. 課堂範例3. 作業說明4. 上課影音請同學先複習基礎的網頁設計概念 以色塊為主的基本單欄網頁版型為基礎，加上其他使用過的功能，並配合CSS3語法，使網頁看起來更活潑！ 1. 網頁基礎複習 [url=http://mepopedia.com/forum/read.php?804,41760][講義] HTML & CSS網頁基礎複習整理[/url] [hr] 2. 課堂範例 http://mepopedia.com/~jinjin/ex/hw01/ [hr] 3. 作業說明 參照講義 [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 [hr] 若若於練習中加入h1滑入的動畫，可加入以下CSS語法練習： h1 { animation-duration: 3s; animation-name: slidein; } @keyframes slidein { from { padding-left: 100%; width: 300%; } to { padding-left: 0%; width: 100%; } } [hr] 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; [hr] 製作完畢請上傳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.期待這門課的學習成果與收穫為何? [hr] 作業參考 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/ [hr] 4. 上課影音 [練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型（2018/09/27課堂版本） https://youtu.be/vSpHaQFZANs [hr] CSS3基礎語法練習 https://youtu.be/TM6wtac-LCc 完整講義專頁 https://mepopedia.com/~jinjin/webdesign/ http://mepopedia.com/forum/read.php?2758,88464,88464#msg-88464 Wed, 24 Jun 2026 19:28:57 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2758,88464,88894#msg-88894 Re: [作業01]DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2758,88464,88894#msg-88894 2.設計概念與製作心得： 我做我的偶像小松菜奈的演藝紀錄
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站，並說明原因 http://www.ainwoods.com/LOVESERIES?fbclid=IwAR1t5zwRZ1vYaHHNMNswL4L0wb4VPNfFz9R2HeFCddxbugv6lh1132-HQQw 很酷我抄襲1065445009
5.期待這門課的學習成果與收穫為何? 知道如何做網頁的基礎。]]> 1065445078 107-1《中國》竹視傳二A-進階網頁設計 Mon, 14 Jan 2019 17:12:36 +0800 http://mepopedia.com/forum/read.php?2758,88464,88892#msg-88892 Re: [作業01]DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2758,88464,88892#msg-88892 2.設計概念與製作心得：健康概念，這是最簡單的作業QQ
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站，並說明原因 http://www.ainwoods.com/LOVESERIES?fbclid=IwAR1t5zwRZ1vYaHHNMNswL4L0wb4VPNfFz9R2HeFCddxbugv6lh1132-HQQw
黑色的背景配上照片很有質感～
5.期待這門課的學習成果與收穫為何? 製做我的小網站讚讚]]> 1065445009 107-1《中國》竹視傳二A-進階網頁設計 Mon, 14 Jan 2019 16:52:05 +0800 http://mepopedia.com/forum/read.php?2758,88464,88608#msg-88608 Re: [作業01]DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2758,88464,88608#msg-88608 2.設計概念與製作心得：有趣
3.何謂HTML、DIV及CSS: 網頁
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.apple.com/tw/
簡單明瞭好操作
5.期待這門課的學習成果與收穫為何?
希望對網頁更了解]]> popo80049 107-1《中國》竹視傳二A-進階網頁設計 Thu, 08 Nov 2018 11:31:54 +0800 http://mepopedia.com/forum/read.php?2758,88464,88606#msg-88606 Re: [作業01]DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2758,88464,88606#msg-88606 2.設計概念與製作心得：
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何?]]> she lied 107-1《中國》竹視傳二A-進階網頁設計 Thu, 08 Nov 2018 11:13:33 +0800 http://mepopedia.com/forum/read.php?2758,88464,88599#msg-88599 Re: [作業01]DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2758,88464,88599#msg-88599 2.設計概念與製作心得：
原因很簡單因為那陣子去了地景藝術節所以才採用這個題材
3.何謂HTML、DIV及CSS:
HTML負責建構網頁的基本架構
DIV 是區塊的意思
CSS專門負責美化網頁的任務
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.pinterest.com/ 簡潔明瞭
5.期待這門課的學習成果與收穫為何?
可以獨自作業，建立屬於自己的網站]]> 1065445013 107-1《中國》竹視傳二A-進階網頁設計 Thu, 08 Nov 2018 10:56:05 +0800 http://mepopedia.com/forum/read.php?2758,88464,88598#msg-88598 Re: [作業01]DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2758,88464,88598#msg-88598 2.設計概念與製作心得： 製作米奇90周年的資料，有附上這次米奇90周年在台灣做哪些活動，有米奇捷運的介紹及圖片，也有付上親子頻道去參加活動的新聞，還有90周年的公仔組合，以及米奇Fun很大特展的資訊。
3.何謂HTML、DIV及CSS:
HTML：網站的基本架構
DIV：header、content，footer
CSS：依據個人想要的設計去美化網頁。
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.moooi.com/
畫面簡單是以黑色對主色調，家具產品的照片具有美感還有質感，讓人忍不住看下去，網頁分類清楚且輪播圖也很清楚標示活動。
5.期待這門課的學習成果與收穫為何?
學到更進階的網頁資訊]]> 1065445001 107-1《中國》竹視傳二A-進階網頁設計 Thu, 08 Nov 2018 10:55:44 +0800 http://mepopedia.com/forum/read.php?2758,88464,88596#msg-88596 Re: [作業01]DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2758,88464,88596#msg-88596
2.設計概念與製作心得：
以電影哈利波特的風格作顏色上的搭配,想呈現有魔法的感覺,和上學期老師的教法不同,要花點時間去適應程式碼,所以花了很多時間製作,不過因為是自己喜歡的主題,做得蠻開心的

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

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

5.期待這門課的學習成果與收穫為何?
複習之前所學的,能更快看懂並理解程式語法,
學到顏色背景可以透明,網站的主題風格配色編排整體都要注意]]> 1065445121 107-1《中國》竹視傳二A-進階網頁設計 Thu, 08 Nov 2018 10:52:53 +0800 http://mepopedia.com/forum/read.php?2758,88464,88595#msg-88595 Re: [作業01]DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2758,88464,88595#msg-88595 2.設計概念與製作心得：
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站，並說明原因
5.期待這門課的學習成果與收穫為何?]]> tp6m4p 107-1《中國》竹視傳二A-進階網頁設計 Thu, 08 Nov 2018 10:51:33 +0800 http://mepopedia.com/forum/read.php?2758,88464,88464#msg-88464 [作業01]DIV與CSS練習--以色塊為主的基本單欄網頁版型 http://mepopedia.com/forum/read.php?2758,88464,88464#msg-88464
  1. 1. 網頁基礎複習
  2. 2. 課堂範例
  3. 3. 作業說明
  4. 4. 上課影音
請同學先複習基礎的網頁設計概念
以色塊為主的基本單欄網頁版型為基礎，加上其他使用過的功能，並配合CSS3語法，使網頁看起來更活潑！

1. 網頁基礎複習


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

[hr]

2. 課堂範例


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

[hr]

3. 作業說明


參照講義
[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

[hr]

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

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

[hr]

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;
[hr]

製作完畢請上傳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.期待這門課的學習成果與收穫為何?

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



[hr]

4. 上課影音


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


[hr]

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




完整講義專頁
https://mepopedia.com/~jinjin/webdesign/]]> JinJin 107-1《中國》竹視傳二A-進階網頁設計 Wed, 26 Sep 2018 12:43:50 +0800