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

Advanced

Change History

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

Changed By: JinJin
Change Date: March 08, 2017 08:27PM

[作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型 (新增CSS3練習)
經過了一個寒假,為了讓大家回復記憶,請先複習基礎的網頁設計概念

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

[hr]
<h2>課堂範例</h2>
http://mepopedia.com/~web103-2a/hw01/hw01-102

[hr]
<h2> 盒子模型/區塊模型(Box Model)</h2>
參考以下網址,並牢記下圖 盒子模型/區塊模型(Box Model)
http://mepopedia.com/forum/read.php?844,15917

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/img]

[hr]
以及盒子與盒子(元素與元素)之間的關係

<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">

<b><<重要!熟記元素與元素之間的關係>></b>

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

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

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

圓角: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/~css104-2a/hw01/hw01-103xxxxxxx
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
範例:
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]
<h2>上課影音</h2>

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

<iframe width="853" height="480" src="https://www.youtube.com/embed/TnaMIVYyf4Y?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>
1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-104xxxxxxx
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
範例:
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]
<h2>上課影音</h2>

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

<iframe width="853" height="480" src="https://www.youtube.com/embed/TnaMIVYyf4Y?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>
Changed By: JinJin
Change Date: March 02, 2017 09:53AM

[作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型 (新增CSS3練習)
經過了一個寒假,為了讓大家回復記憶,請先複習基礎的網頁設計概念

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

[hr]
<h2>課堂範例</h2>
http://mepopedia.com/~web103-2a/hw01/hw01-102

[hr]
<h2> 盒子模型/區塊模型(Box Model)</h2>
參考以下網址,並牢記下圖 盒子模型/區塊模型(Box Model)
http://mepopedia.com/forum/read.php?844,15917

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/img]

[hr]
以及盒子與盒子(元素與元素)之間的關係

<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">

<b><<重要!熟記元素與元素之間的關係>></b>

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

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

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

圓角: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));(請自行放入適當位置並改變數值)


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

並回覆於此篇文章

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

[hr]
範例:
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]
<h2>上課影音</h2>

2015 03 05作業一課堂講解
http://youtu.be/TnaMIVYyf4Y
MIVYyf4Y
法:http://mepopedia.com/forum/read.php?844,17157

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

並回覆於此篇文章

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

[hr]
範例:
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]
<h2>上課影音</h2>

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

<iframe width="853" height="480" src="https://www.youtube.com/embed/TnaMIVYyf4Y?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-104xxxxxxx
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
範例:
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]
<h2>上課影音</h2>

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

<iframe width="853" height="480" src="https://www.youtube.com/embed/TnaMIVYyf4Y?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>
Changed By: JinJin
Change Date: February 28, 2017 04:12PM

[作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型 (新增CSS3練習)
經過了一個寒假,為了讓大家回復記憶,請先複習基礎的網頁設計概念

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

[hr]
<h2>課堂範例</h2>
http://mepopedia.com/~web103-2a/hw01/hw01-102

[hr]
<h2> 盒子模型/區塊模型(Box Model)</h2>
參考以下網址,並牢記下圖 盒子模型/區塊模型(Box Model)
http://mepopedia.com/forum/read.php?844,15917

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/img]

[hr]
以及盒子與盒子(元素與元素)之間的關係

<img width="100%" src="http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-03.gif" border="0">

<b><<重要!熟記元素與元素之間的關係>></b>

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

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

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

);(請自行放入適當位置並改變數值)
放射漸層:background:-webkit-gradient(radial, 165 0, 0, 220 -257, 465, from(#866400), to(#FF4E28));(請自行放入適當位置並改變數值)


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));(請自行放入適當位置並改變數值)


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

並回覆於此篇文章

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

[hr]
範例:
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]
<h2>上課影音</h2>

2015 03 05作業一課堂講解
http://youtu.be/TnaMIVYyf4Y
法:http://mepopedia.com/forum/read.php?844,17157

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

並回覆於此篇文章

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

[hr]
範例:
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]
<h2>上課影音</h2>

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

<iframe width="853" height="480" src="https://www.youtube.com/embed/TnaMIVYyf4Y?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>1.網址:http://mepopedia.com/~css105-2a/hw01/hw01-104xxxxxxx
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
範例:
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]
<h2>上課影音</h2>

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

<iframe width="853" height="480" src="https://www.youtube.com/embed/TnaMIVYyf4Y?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

Original Message

作者: JinJin
Date: February 21, 2017 10:28PM

[作業01] DIV與CSS複習--以色塊為主的基本單欄網頁版型 (新增CSS3練習)
經過了一個寒假,為了讓大家回復記憶,請先複習基礎的網頁設計概念

網頁基礎複習


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

[hr]

課堂範例


http://mepopedia.com/~web103-2a/hw01/hw01-102

[hr]

盒子模型/區塊模型(Box Model)


參考以下網址,並牢記下圖 盒子模型/區塊模型(Box Model)
http://mepopedia.com/forum/read.php?844,15917

[img]http://i1136.photobucket.com/albums/n481/parkparkyang/box-moddle-01.gif[/img]

[hr]
以及盒子與盒子(元素與元素)之間的關係



<<重要!熟記元素與元素之間的關係>>

[hr]

作業說明


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

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

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


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));(請自行放入適當位置並改變數值)


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

並回覆於此篇文章

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

[hr]
範例:
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]

上課影音



2015 03 05作業一課堂講解
http://youtu.be/TnaMIVYyf4Y
法:http://mepopedia.com/forum/read.php?844,17157

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

並回覆於此篇文章

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

[hr]
範例:
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]

上課影音



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

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

[hr]
範例:
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]

上課影音



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