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

Advanced

Change History

Message: [作業01] DIV與CSS3練習--基本單欄網頁版型

Changed By: JinJin
Change Date: October 02, 2019 08:21AM

[作業01] DIV與CSS3練習--基本單欄網頁版型
本週請同學複習基礎的網頁設計概念,重新練習html與css
以色塊為主的基本單欄網頁版型為基礎,加上其他使用過的功能,並配合CSS3語法,使網頁看起來更活潑!

[hr]
<h2>課堂範例</h2>
http://mepopedia.com/~jinjin/ex/hw01/

[hr]
<h2>作業說明</h2>
參照講義
[url=http://mepopedia.com/forum/read.php?804,16481]利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]
自行選擇主題,製作以DIV架構搭配CSS的基本網頁,請注意字體大小、整體質感與配色

<h3>DIV架構與尺寸分析</h3>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/2-01.png" border="0">

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/2-02.png" border="0">

<h3> HTML的架構語法</h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣,後續風格與配色請以主題為主,設計出具有質感之相對應網頁[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>網頁主題請自行更改</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="網頁設計筆記。">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">

<h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解

</div>

<div id="content">

利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議
<h3>一、Div標籤與CSS</h3>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以Div標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。
<h3>二、單欄版型的範例</h3>
第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。
<h3>三、DIV架構與尺寸分析</h3>
第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。

</div>

<div id="footer">

│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:新竹校區:303-01 新竹縣湖口鄉中山路三段530號 │台鐵北湖車站步行三分鐘到校 <br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by

</div>

</div>
</body>
</html>
</xmp>

<h3>CSS基礎語法</h3>
<xmp>

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#212663; /*背景色設定*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
color: #C6C6C6; /*文字顏色設定*/
border: 6px solid #003; /*網頁做外框的設定*/
}

#header{
background-color:#069;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#D7E1FF; /*背景色設定*/
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#666; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#069;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
}

h3{
font-size:18px;
color:#5B63C4;
}
</xmp>

由以上雛形,加入CSS3效果

<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

[hr]
<h4>CSS 動畫</h4>

只需要定義兩個部份:1. 動畫的最初及結尾 2. 動畫轉變的方式。
1.設定 CSS 動畫
2.使用 @keyframes 設定動畫關鍵影格
animation-duration:設定整個動畫播放一次的時間長度。
animation-name:設定 @keyframes at-rule 所使用的動畫名稱。
在關鍵影格的部份則是使用百分比來指定動畫在每個時間點呈現的方式,0% 代表動畫一開始播放的起始點,而 100% 則代表動畫的結尾

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

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

[hr]
更多CSS動畫說明可參考:
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Animations/Using_CSS_animations

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

<h3>加入 CSS3效果之語法參考(請務必修正為符合主題之設計)</h3>
<xmp>
@charset "UTF-8";
/* CSS Document */

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family: 'Noto Sans TC', sans-serif;

body {
font-family:"Noto Sans TC", sans-serif;
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#C5305D;
background-image: url(img/back.jpg)
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
color: #C6C6C6; /*文字顏色設定*/
border: 20px solid #F46A8D;
border-radius: 20px 0px 50px 10px;
}

#header{
background-color:#F46A8D;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
background-color: rgba(247,239,241,0.7);
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#000; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
border-radius: 20px 0px;
margin:20px;
box-shadow:3px 3px 10px #333;
}
#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#F46A8D;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
text-shadow: 1px 1px 1px #000000;
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

h3{
font-size:18px;
color:#C5305D;
}

img{
border-radius: 20px 0px;
}

.box{
width: 150px;
background: rgba(69,90,56,1.00);
padding: 30px;
font-size: 20px;
color: aliceblue;
-webkit-animation: cssAnimation 3.2121s 7 ease;
-moz-animation: cssAnimation 3.2121s 7 ease;
-o-animation: cssAnimation 3.2121s 7 ease;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-o-keyframes cssAnimation {
from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
</xmp>

補充說明:
目前的瀏覽器幾乎都支援CSS3,因此通常不需要再另外寫瀏覽器相容的設定。
不同對應寫法介紹如下:
-moz-對應 Firefox,
-webkit-對應 Safari and Chrome
-o- 對應 Opera
-ms- 對應 Internet Explorer

<hr>

<h3>作業上傳與回覆</h3>
製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

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

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

<b>完整講義專頁
https://mepopedia.com/~jinjin/webdesign/</b>
1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-107544XXXX
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

<b>完整講義專頁
https://mepopedia.com/~jinjin/webdesign/</b>
Changed By: JinJin
Change Date: September 25, 2019 08:51AM

[作業01] DIV與CSS3練習--基本單欄網頁版型
本週請同學複習基礎的網頁設計概念,重新練習html與css
以色塊為主的基本單欄網頁版型為基礎,加上其他使用過的功能,並配合CSS3語法,使網頁看起來更活潑!

[hr]
<h2>課堂範例</h2>
http://mepopedia.com/~jinjin/ex/hw01/

[hr]
<h2>作業說明</h2>
參照講義
[url=http://mepopedia.com/forum/read.php?804,16481]利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]
自行選擇主題,製作以DIV架構搭配CSS的基本網頁,請注意字體大小、整體質感與配色

<h3>DIV架構與尺寸分析</h3>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/2-01.png" border="0">

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/2-02.png" border="0">

<h3> HTML的架構語法</h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣,後續風格與配色請以主題為主,設計出具有質感之相對應網頁[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>網頁主題請自行更改</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="網頁設計筆記。">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">

<h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解

</div>

<div id="content">

利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議
<h3>一、Div標籤與CSS</h3>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以Div標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。
<h3>二、單欄版型的範例</h3>
第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。
<h3>三、DIV架構與尺寸分析</h3>
第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。

</div>

<div id="footer">

│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:新竹校區:303-01 新竹縣湖口鄉中山路三段530號 │台鐵北湖車站步行三分鐘到校 <br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by

</div>

</div>
</body>
</html>
</xmp>

<h3>CSS基礎語法</h3>
<xmp>

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#212663; /*背景色設定*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
color: #C6C6C6; /*文字顏色設定*/
border: 6px solid #003; /*網頁做外框的設定*/
}

#header{
background-color:#069;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#D7E1FF; /*背景色設定*/
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#666; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#069;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
}

h3{
font-size:18px;
color:#5B63C4;
}
</xmp>

由以上雛形,加入CSS3效果

<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

[hr]
<h4>CSS 動畫</h4>

只需要定義兩個部份:1. 動畫的最初及結尾 2. 動畫轉變的方式。
1.設定 CSS 動畫
2.使用 @keyframes 設定動畫關鍵影格
animation-duration:設定整個動畫播放一次的時間長度。
animation-name:設定 @keyframes at-rule 所使用的動畫名稱。
在關鍵影格的部份則是使用百分比來指定動畫在每個時間點呈現的方式,0% 代表動畫一開始播放的起始點,而 100% 則代表動畫的結尾

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

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

[hr]
更多CSS動畫說明可參考:
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Animations/Using_CSS_animations

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

<h3>加入 CSS3效果之語法參考(請務必修正為符合主題之設計)</h3>
<xmp>
@charset "UTF-8";
/* CSS Document */

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family: 'Noto Sans TC', sans-serif;

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#C5305D;
background-image: url(img/back.jpg)
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
color: #C6C6C6; /*文字顏色設定*/
border: 20px solid #F46A8D;
border-radius: 20px 0px 50px 10px;
}

#header{
background-color:#F46A8D;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
background-color: rgba(247,239,241,0.7);
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#000; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
border-radius: 20px 0px;
margin:20px;
box-shadow:3px 3px 10px #333;
}
#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#F46A8D;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
text-shadow: 1px 1px 1px #000000;
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

h3{
font-size:18px;
color:#C5305D;
}

img{
border-radius: 20px 0px;
}

.box{
width: 150px;
background: rgba(69,90,56,1.00);
padding: 30px;
font-size: 20px;
color: aliceblue;
-webkit-animation: cssAnimation 3.2121s 7 ease;
-moz-animation: cssAnimation 3.2121s 7 ease;
-o-animation: cssAnimation 3.2121s 7 ease;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-o-keyframes cssAnimation {
from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
</xmp>

補充說明:
目前的瀏覽器幾乎都支援CSS3,因此通常不需要再另外寫瀏覽器相容的設定。
不同對應寫法介紹如下:
-moz-對應 Firefox,
-webkit-對應 Safari and Chrome
-o- 對應 Opera
-ms- 對應 Internet Explorer

<hr>

<h3>作業上傳與回覆</h3>
製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

1.網址:
8a/hw01/hw01-107544XXXX
o Sans TC", sans-serif;
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#C5305D;
background-image: url(img/back.jpg)
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
color: #C6C6C6; /*文字顏色設定*/
border: 20px solid #F46A8D;
border-radius: 20px 0px 50px 10px;
}

#header{
background-color:#F46A8D;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
background-color: rgba(247,239,241,0.7);
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#000; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
border-radius: 20px 0px;
margin:20px;
box-shadow:3px 3px 10px #333;
}
#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#F46A8D;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
text-shadow: 1px 1px 1px #000000;
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

h3{
font-size:18px;
color:#C5305D;
}

img{
border-radius: 20px 0px;
}

.box{
width: 150px;
background: rgba(69,90,56,1.00);
padding: 30px;
font-size: 20px;
color: aliceblue;
-webkit-animation: cssAnimation 3.2121s 7 ease;
-moz-animation: cssAnimation 3.2121s 7 ease;
-o-animation: cssAnimation 3.2121s 7 ease;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-o-keyframes cssAnimation {
from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
</xmp>

補充說明:
目前的瀏覽器幾乎都支援CSS3,因此通常不需要再另外寫瀏覽器相容的設定。
不同對應寫法介紹如下:
-moz-對應 Firefox,
-webkit-對應 Safari and Chrome
-o- 對應 Opera
-ms- 對應 Internet Explorer

<hr>

<h3>作業上傳與回覆</h3>
製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

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

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

<b>完整講義專頁
https://mepopedia.com/~jinjin/webdesign/</b>1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-107544XXXX
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

<b>完整講義專頁
https://mepopedia.com/~jinjin/webdesign/</b>
Changed By: JinJin
Change Date: September 23, 2019 03:49PM

[作業01] DIV與CSS3練習--基本單欄網頁版型
本週請同學複習基礎的網頁設計概念,重新練習html與css
以色塊為主的基本單欄網頁版型為基礎,加上其他使用過的功能,並配合CSS3語法,使網頁看起來更活潑!

[hr]
<h2>課堂範例</h2>
http://mepopedia.com/~jinjin/ex/hw01/

[hr]
<h2>作業說明</h2>
參照講義
[url=http://mepopedia.com/forum/read.php?804,16481]利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]
自行選擇主題,製作以DIV架構搭配CSS的基本網頁,請注意字體大小、整體質感與配色

<h3>DIV架構與尺寸分析</h3>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/2-01.png" border="0">

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/2-02.png" border="0">

<h3> HTML的架構語法</h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣,後續風格與配色請以主題為主,設計出具有質感之相對應網頁[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>網頁主題請自行更改</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="網頁設計筆記。">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">

<h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解

</div>

<div id="content">

利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議
<h3>一、Div標籤與CSS</h3>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以Div標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。
<h3>二、單欄版型的範例</h3>
第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。
<h3>三、DIV架構與尺寸分析</h3>
第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。

</div>

<div id="footer">

│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:新竹校區:303-01 新竹縣湖口鄉中山路三段530號 │台鐵北湖車站步行三分鐘到校 <br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by

</div>

</div>
</body>
</html>
</xmp>

<h3>CSS基礎語法</h3>
<xmp>

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#212663; /*背景色設定*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
color: #C6C6C6; /*文字顏色設定*/
border: 6px solid #003; /*網頁做外框的設定*/
}

#header{
background-color:#069;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#D7E1FF; /*背景色設定*/
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#666; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#069;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
}

h3{
font-size:18px;
color:#5B63C4;
}
</xmp>

由以上雛形,加入CSS3效果

<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

[hr]
<h4>CSS 動畫</h4>

只需要定義兩個部份:1. 動畫的最初及結尾 2. 動畫轉變的方式。
1.設定 CSS 動畫
2.使用 @keyframes 設定動畫關鍵影格
animation-duration:設定整個動畫播放一次的時間長度。
animation-name:設定 @keyframes at-rule 所使用的動畫名稱。
在關鍵影格的部份則是使用百分比來指定動畫在每個時間點呈現的方式,0% 代表動畫一開始播放的起始點,而 100% 則代表動畫的結尾

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

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

[hr]
更多CSS動畫說明可參考:
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Animations/Using_CSS_animations

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

<h3>加入 CSS3效果之語法參考(請務必修正為符合主題之設計)</h3>
<xmp>
@charset "UTF-8";
/* CSS Document */

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family: 'Noto Sans TC', sans-serif;

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#C5305D;
background-image: url(img/back.jpg)
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
color: #C6C6C6; /*文字顏色設定*/
border: 20px solid #F46A8D;
border-radius: 20px 0px 50px 10px;
}

#header{
background-color:#F46A8D;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
background-color: rgba(247,239,241,0.7);
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#000; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
border-radius: 20px 0px;
margin:20px;
box-shadow:3px 3px 10px #333;
}
#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#F46A8D;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
text-shadow: 1px 1px 1px #000000;
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

h3{
font-size:18px;
color:#C5305D;
}

img{
border-radius: 20px 0px;
}

.box{
width: 150px;
background: rgba(69,90,56,1.00);
padding: 30px;
font-size: 20px;
color: aliceblue;
-webkit-animation: cssAnimation 3.2121s 7 ease;
-moz-animation: cssAnimation 3.2121s 7 ease;
-o-animation: cssAnimation 3.2121s 7 ease;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-o-keyframes cssAnimation {
from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
</xmp>


<h3>作業上傳與回覆</h3>
製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

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

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

<b>完整講義專頁
https://mepopedia.com/~jinjin/webdesign/</b>
補充說明:
目前的瀏覽器幾乎都支援CSS3,因此通常不需要再另外寫瀏覽器相容的設定。
不同對應寫法介紹如下:
-moz-對應 Firefox,
-webkit-對應 Safari and Chrome
-o- 對應 Opera
-ms- 對應 Internet Explorer

<hr>

<h3>作業上傳與回覆</h3>
製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

1.網址:
o Sans TC", sans-serif;
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#C5305D;
background-image: url(img/back.jpg)
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
color: #C6C6C6; /*文字顏色設定*/
border: 20px solid #F46A8D;
border-radius: 20px 0px 50px 10px;
}

#header{
background-color:#F46A8D;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
background-color: rgba(247,239,241,0.7);
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#000; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
border-radius: 20px 0px;
margin:20px;
box-shadow:3px 3px 10px #333;
}
#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#F46A8D;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
text-shadow: 1px 1px 1px #000000;
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

h3{
font-size:18px;
color:#C5305D;
}

img{
border-radius: 20px 0px;
}

.box{
width: 150px;
background: rgba(69,90,56,1.00);
padding: 30px;
font-size: 20px;
color: aliceblue;
-webkit-animation: cssAnimation 3.2121s 7 ease;
-moz-animation: cssAnimation 3.2121s 7 ease;
-o-animation: cssAnimation 3.2121s 7 ease;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-o-keyframes cssAnimation {
from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
</xmp>

補充說明:
目前的瀏覽器幾乎都支援CSS3,因此通常不需要再另外寫瀏覽器相容的設定。
不同對應寫法介紹如下:
-moz-對應 Firefox,
-webkit-對應 Safari and Chrome
-o- 對應 Opera
-ms- 對應 Internet Explorer

<hr>

<h3>作業上傳與回覆</h3>
製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

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

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

<b>完整講義專頁
https://mepopedia.com/~jinjin/webdesign/</b>1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-107544XXXX
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

<b>完整講義專頁
https://mepopedia.com/~jinjin/webdesign/</b>
Changed By: JinJin
Change Date: September 23, 2019 03:45PM

[作業01] DIV與CSS3練習--基本單欄網頁版型
本週請同學複習基礎的網頁設計概念,重新練習html與css
以色塊為主的基本單欄網頁版型為基礎,加上其他使用過的功能,並配合CSS3語法,使網頁看起來更活潑!

[hr]
<h2>課堂範例</h2>
http://mepopedia.com/~jinjin/ex/hw01/

[hr]
<h2>作業說明</h2>
參照講義
[url=http://mepopedia.com/forum/read.php?804,16481]利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]
自行選擇主題,製作以DIV架構搭配CSS的基本網頁,請注意字體大小、整體質感與配色

<h3>DIV架構與尺寸分析</h3>
<b>1.以DIV建構網頁基本架構</b>

以下為最基本的網站排版架構
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/2-01.png" border="0">

利用Div標籤與CSS建立單純色塊的網頁範例的對照即為
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/2-02.png" border="0">

<h3> HTML的架構語法</h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣,後續風格與配色請以主題為主,設計出具有質感之相對應網頁[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>網頁主題請自行更改</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="網頁設計筆記。">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">

<h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解

</div>

<div id="content">

利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議
<h3>一、Div標籤與CSS</h3>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以Div標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。
<h3>二、單欄版型的範例</h3>
第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。
<h3>三、DIV架構與尺寸分析</h3>
第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。

</div>

<div id="footer">

│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:新竹校區:303-01 新竹縣湖口鄉中山路三段530號 │台鐵北湖車站步行三分鐘到校 <br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by

</div>

</div>
</body>
</html>
</xmp>

<h3>CSS基礎語法</h3>
<xmp>

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#212663; /*背景色設定*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
color: #C6C6C6; /*文字顏色設定*/
border: 6px solid #003; /*網頁做外框的設定*/
}

#header{
background-color:#069;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#D7E1FF; /*背景色設定*/
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#666; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#069;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
}

h3{
font-size:18px;
color:#5B63C4;
}
</xmp>

由以上雛形,加入CSS3效果

<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

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

<h3>加入 CSS3效果之語法參考(請務必修正為符合主題之設計)</h3>
<xmp>
@charset "UTF-8";
/* CSS Document */

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family: 'Noto Sans TC', sans-serif;

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#C5305D;
background-image: url(img/back.jpg)
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
color: #C6C6C6; /*文字顏色設定*/
border: 20px solid #F46A8D;
border-radius: 20px 0px 50px 10px;
}

#header{
background-color:#F46A8D;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
background-color: rgba(247,239,241,0.7);
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#000; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
border-radius: 20px 0px;
margin:20px;
box-shadow:3px 3px 10px #333;
}
#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#F46A8D;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
text-shadow: 1px 1px 1px #000000;
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
dding-left: 0%;
h4>

只需要定義兩個部份:1. 動畫的最初及結尾 2. 動畫轉變的方式。
1.設定 CSS 動畫
2.使用 @keyframes 設定動畫關鍵影格
animation-duration:設定整個動畫播放一次的時間長度。
animation-name:設定 @keyframes at-rule 所使用的動畫名稱。
在關鍵影格的部份則是使用百分比來指定動畫在每個時間點呈現的方式,0% 代表動畫一開始播放的起始點,而 100% 則代表動畫的結尾

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

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

[hr]
更多CSS動畫說明可參考:
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Animations/Using_CSS_animations

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

<h3>加入 CSS3效果之語法參考(請務必修正為符合主題之設計)</h3>
<xmp>
@charset "UTF-8";
/* CSS Document */

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family: 'Noto Sans TC', sans-serif;

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#C5305D;
background-image: url(img/back.jpg)
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
color: #C6C6C6; /*文字顏色設定*/
border: 20px solid #F46A8D;
border-radius: 20px 0px 50px 10px;
}

#header{
background-color:#F46A8D;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
background-color: rgba(247,239,241,0.7);
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#000; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
border-radius: 20px 0px;
margin:20px;
box-shadow:3px 3px 10px #333;
}
#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#F46A8D;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
text-shadow: 1px 1px 1px #000000;
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

h3{
font-size:18px;
color:#C5305D;
}

img{
border-radius: 20px 0px;
}

.box{
width: 150px;
background: rgba(69,90,56,1.00);
padding: 30px;
font-size: 20px;
color: aliceblue;
-webkit-animation: cssAnimation 3.2121s 7 ease;
-moz-animation: cssAnimation 3.2121s 7 ease;
-o-animation: cssAnimation 3.2121s 7 ease;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-o-keyframes cssAnimation {
from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
</xmp>


<h3>作業上傳與回覆</h3>
製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

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

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

<b>完整講義專頁
https://mepopedia.com/~jinjin/webdesign/</b>補充說明:
目前的瀏覽器幾乎都支援CSS3,因此通常不需要再另外寫瀏覽器相容的設定。
不同對應寫法介紹如下:
-moz-對應 Firefox,
-webkit-對應 Safari and Chrome
-o- 對應 Opera
-ms- 對應 Internet Explorer

<hr>

<h3>作業上傳與回覆</h3>
製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

1.網址:
o Sans TC", sans-serif;
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#C5305D;
background-image: url(img/back.jpg)
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
color: #C6C6C6; /*文字顏色設定*/
border: 20px solid #F46A8D;
border-radius: 20px 0px 50px 10px;
}

#header{
background-color:#F46A8D;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
background-color: rgba(247,239,241,0.7);
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#000; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
border-radius: 20px 0px;
margin:20px;
box-shadow:3px 3px 10px #333;
}
#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#F46A8D;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
text-shadow: 1px 1px 1px #000000;
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

h3{
font-size:18px;
color:#C5305D;
}

img{
border-radius: 20px 0px;
}

.box{
width: 150px;
background: rgba(69,90,56,1.00);
padding: 30px;
font-size: 20px;
color: aliceblue;
-webkit-animation: cssAnimation 3.2121s 7 ease;
-moz-animation: cssAnimation 3.2121s 7 ease;
-o-animation: cssAnimation 3.2121s 7 ease;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-o-keyframes cssAnimation {
from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
</xmp>

補充說明:
目前的瀏覽器幾乎都支援CSS3,因此通常不需要再另外寫瀏覽器相容的設定。
不同對應寫法介紹如下:
-moz-對應 Firefox,
-webkit-對應 Safari and Chrome
-o- 對應 Opera
-ms- 對應 Internet Explorer

<hr>

<h3>作業上傳與回覆</h3>
製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

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

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

<b>完整講義專頁
https://mepopedia.com/~jinjin/webdesign/</b>1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-107544XXXX
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

<b>完整講義專頁
https://mepopedia.com/~jinjin/webdesign/</b>
Changed By: JinJin
Change Date: September 16, 2019 01:58PM

[作業01] DIV與CSS3練習--基本單欄網頁版型
本週請同學複習基礎的網頁設計概念,重新練習html與css
以色塊為主的基本單欄網頁版型為基礎,加上其他使用過的功能,並配合CSS3語法,使網頁看起來更活潑!

[hr]
<h2>課堂範例</h2>
http://mepopedia.com/~jinjin/ex/hw01/

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

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

<b>可參考http://www.css3maker.com/
頁範例的對照即為
<img width="100%" src="http://mepopedia.com/~jinjin/web/img/2-02.png" border="0">

<h3> HTML的架構語法</h3>
[color=#663300]範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣,後續風格與配色請以主題為主,設計出具有質感之相對應網頁[/color]

<xmp>
<!DOCTYPE html>
<html>
<head>
<title>網頁主題請自行更改</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="網頁設計筆記。">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="wrapper">
<div id="header">

<h1>利用Div標籤與CSS建立基本單欄網頁版型</h1>
單純色塊的講解

</div>

<div id="content">

利用Div標籤與CSS建立基本網頁版型,以全國比較文學會議
<h3>一、Div標籤與CSS</h3>
在早期瀏覽器以IE為主的網頁設計時代,大多以表格(TABLE)或頁框(FRAME),來製作網頁主要的定位與架構,但是隨著上網習慣的改變,網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等,目前網頁設計的架構,多半以DIV搭配CSS為設計主流,以Div標籤來建立網頁區塊,區分各個主要頁面做為主要的排版架構,搭配CSS語法來美化網頁,以往的網頁美化設定大多直接寫在HTML網頁本身,現在則分開以HTML為架構設定,CSS為美化設定,一個建築網頁架構,一個美化網頁。
<h3>二、單欄版型的範例</h3>
第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。
<h3>三、DIV架構與尺寸分析</h3>
第一個進入Dreamweaver的例子,將以全國比較文學會議網站為例,作為輔助說明,使同學們更加輕鬆的進入網頁排版的世界。
這是一個很單純的單欄版型的網頁,因為內容單純,故以單欄來設計。

</div>

<div id="footer">

│中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │<br>
│地址:新竹校區:303-01 新竹縣湖口鄉中山路三段530號 │台鐵北湖車站步行三分鐘到校 <br>
│最佳瀏覽環境:IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度:1024X768 以上 │ Designed by

</div>

</div>
</body>
</html>
</xmp>

<h3>CSS基礎語法</h3>
<xmp>

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#212663; /*背景色設定*/
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
font-family: "微軟正黑體", Arial, Helvetica, sans-serif;
color: #C6C6C6; /*文字顏色設定*/
border: 6px solid #003; /*網頁做外框的設定*/
}

#header{
background-color:#069;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#D7E1FF; /*背景色設定*/
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#666; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
}

#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#069;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
}

h3{
font-size:18px;
color:#5B63C4;
}
</xmp>

由以上雛形,加入CSS3效果

<b>參考http://www.css3maker.com/
字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
}

h3{
font-size:18px;
color:#5B63C4;
}
</xmp>

由以上雛形,加入CSS3效果

<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

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


border: 20px solid #F46A8D;
border-radius: 20px 0px 50px 10px;
}

#header{
background-color:#F46A8D;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
background-color: rgba(247,239,241,0.7);
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#000; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
border-radius: 20px 0px;
margin:20px;
box-shadow:3px 3px 10px #333;
}
#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#F46A8D;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
text-shadow: 1px 1px 1px #000000;
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

h3{
font-size:18px;
color:#C5305D;
}

img{
border-radius: 20px 0px;
}

.box{
width: 150px;
background: rgba(69,90,56,1.00);
padding: 30px;
font-size: 20px;
color: aliceblue;
-webkit-animation: cssAnimation 3.2121s 7 ease;
-moz-animation: cssAnimation 3.2121s 7 ease;
-o-animation: cssAnimation 3.2121s 7 ease;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-o-keyframes cssAnimation {
from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
</xmp>


<h3>作業上傳與回覆</h3>
入的動畫,可加入以下CSS語法練習:

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

[hr]
更多CSS動畫說明可參考:
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Animations/Using_CSS_animations

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

<h3>加入 CSS3效果之語法參考(請務必修正為符合主題之設計)</h3>
<xmp>
@charset "UTF-8";
/* CSS Document */

@import url(//fonts.googleapis.com/earlyaccess/notosanstc.css);
font-family: 'Noto Sans TC', sans-serif;

body {
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#C5305D;
background-image: url(img/back.jpg)
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
color: #C6C6C6; /*文字顏色設定*/
border: 20px solid #F46A8D;
border-radius: 20px 0px 50px 10px;
}

#header{
background-color:#F46A8D;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
background-color: rgba(247,239,241,0.7);
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#000; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
border-radius: 20px 0px;
margin:20px;
box-shadow:3px 3px 10px #333;
}
#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#F46A8D;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
text-shadow: 1px 1px 1px #000000;
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

h3{
font-size:18px;
color:#C5305D;
}

img{
border-radius: 20px 0px;
}

.box{
width: 150px;
background: rgba(69,90,56,1.00);
padding: 30px;
font-size: 20px;
color: aliceblue;
-webkit-animation: cssAnimation 3.2121s 7 ease;
-moz-animation: cssAnimation 3.2121s 7 ease;
-o-animation: cssAnimation 3.2121s 7 ease;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-o-keyframes cssAnimation {
from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
</xmp>


<h3>作業上傳與回覆</h3>
製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

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

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

<b>完整講義專頁
https://mepopedia.com/~jinjin/webdesign/</b>補充說明:
目前的瀏覽器幾乎都支援CSS3,因此通常不需要再另外寫瀏覽器相容的設定。
不同對應寫法介紹如下:
-moz-對應 Firefox,
-webkit-對應 Safari and Chrome
-o- 對應 Opera
-ms- 對應 Internet Explorer

<hr>

<h3>作業上傳與回覆</h3>
製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

1.網址:
o Sans TC", sans-serif;
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#C5305D;
background-image: url(img/back.jpg)
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
color: #C6C6C6; /*文字顏色設定*/
border: 20px solid #F46A8D;
border-radius: 20px 0px 50px 10px;
}

#header{
background-color:#F46A8D;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
background-color: rgba(247,239,241,0.7);
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#000; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
border-radius: 20px 0px;
margin:20px;
box-shadow:3px 3px 10px #333;
}
#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#F46A8D;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
text-shadow: 1px 1px 1px #000000;
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

h3{
font-size:18px;
color:#C5305D;
}

img{
border-radius: 20px 0px;
}

.box{
width: 150px;
background: rgba(69,90,56,1.00);
padding: 30px;
font-size: 20px;
color: aliceblue;
-webkit-animation: cssAnimation 3.2121s 7 ease;
-moz-animation: cssAnimation 3.2121s 7 ease;
-o-animation: cssAnimation 3.2121s 7 ease;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-o-keyframes cssAnimation {
from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}
</xmp>

補充說明:
目前的瀏覽器幾乎都支援CSS3,因此通常不需要再另外寫瀏覽器相容的設定。
不同對應寫法介紹如下:
-moz-對應 Firefox,
-webkit-對應 Safari and Chrome
-o- 對應 Opera
-ms- 對應 Internet Explorer

<hr>

<h3>作業上傳與回覆</h3>
製作完畢請上傳FTP
下載:http://filezilla-project.org/download.php?type=client

並回覆於此篇文章

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

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

<b>完整講義專頁
https://mepopedia.com/~jinjin/webdesign/</b>1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-107544XXXX
2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:
4.附上至少一個覺得設計很有質感的網站,並說明原因
5.期待這門課的學習成果與收穫為何?

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]
<h2>上課影音</h2>
[練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型(2018/09/27課堂版本)
https://youtu.be/vSpHaQFZANs
<iframe width="853" height="480" src="https://www.youtube.com/embed/vSpHaQFZANs?rel=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>

[hr]

CSS3基礎語法練習
https://youtu.be/TM6wtac-LCc
<iframe width="853" height="480" src="https://www.youtube.com/embed/TM6wtac-LCc?list=UUkDLlikN-EpFVFZKUGt3_8g" frameborder="0" allowfullscreen></iframe>

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

Original Message

作者: JinJin
Date: September 07, 2019 03:20PM

[作業01] DIV與CSS3練習--基本單欄網頁版型
本週請同學複習基礎的網頁設計概念,重新練習html與css
以色塊為主的基本單欄網頁版型為基礎,加上其他使用過的功能,並配合CSS3語法,使網頁看起來更活潑!

[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/
字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
}

h3{
font-size:18px;
color:#5B63C4;
}


由以上雛形,加入CSS3效果

參考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]

入的動畫,可加入以下CSS語法練習:

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

[hr]
更多CSS動畫說明可參考:
https://developer.mozilla.org/zh-TW/docs/Web/CSS/CSS_Animations/Using_CSS_animations

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

加入 CSS3效果之語法參考(請務必修正為符合主題之設計)


<br /> @charset "UTF-8";<br /> /* CSS Document */<br /> <br /> @import url(//fonts.googleapis.com/earlyaccess/notosanstc.css); <br /> font-family: 'Noto Sans TC', sans-serif; <br /> <br /> body {<br /> margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/<br /> background-color:#C5305D;<br /> background-image: url(img/back.jpg)<br /> }<br /> <br /> #wrapper {<br /> width: 900px; /*寬度設定為900px*/<br /> margin: auto; /*版面居中對齊*/<br /> color: #C6C6C6; /*文字顏色設定*/<br /> border: 20px solid #F46A8D;<br /> border-radius: 20px 0px 50px 10px;<br /> }<br /> <br /> #header{<br /> background-color:#F46A8D;<br /> height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/<br /> padding:20px; /*內距設定*/ <br /> }<br /> <br /> #content { <br /> background-color: rgba(247,239,241,0.7);<br /> font-size: 14px; /*字體大小*/<br /> line-height: 2em; /*字體行間為兩個字距*/<br /> color:#000; /*文字顏色設定*/<br /> padding: 30px; /*文字與#content間的內距*/<br /> border-radius: 20px 0px;<br /> margin:20px;<br /> box-shadow:3px 3px 10px #333;<br /> }<br /> #footer {<br /> /*可不用設定寬度和高度,由文字來決定高度*/<br /> background-color:#F46A8D; <br /> font-size: 12px; /*文字尺寸設定*/<br /> line-height: 1.5em; /*文字行高設定為1.5字高*/<br /> color: #FFF; /*文字顏色設定*/<br /> padding: 20px; /*內距設定*/<br /> }<br /> <br /> h1{<br /> font-size:30px;<br /> color:#FFF;<br /> text-shadow: 1px 1px 1px #000000;<br /> animation-duration: 1s;<br /> animation-name: slidein;<br /> }<br /> @keyframes slidein {<br /> from {<br /> padding-left: 100%;<br /> width: 300%;<br /> }<br /> to {<br /> padding-left: 0%;<br /> width: 100%;<br /> }<br /> }<br /> <br /> h3{<br /> font-size:18px;<br /> color:#C5305D;<br /> }<br /> <br /> img{<br /> border-radius: 20px 0px;<br /> }<br /> <br /> .box{<br /> width: 150px;<br /> background: rgba(69,90,56,1.00);<br /> padding: 30px;<br /> font-size: 20px;<br /> color: aliceblue;<br /> -webkit-animation: cssAnimation 3.2121s 7 ease;<br /> -moz-animation: cssAnimation 3.2121s 7 ease;<br /> -o-animation: cssAnimation 3.2121s 7 ease;<br /> }<br /> <br /> @-webkit-keyframes cssAnimation {<br /> from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }<br /> to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }<br /> }<br /> <br /> @-moz-keyframes cssAnimation {<br /> from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }<br /> to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }<br /> }<br /> <br /> @-o-keyframes cssAnimation {<br /> from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }<br /> to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }<br /> }<br />


作業上傳與回覆


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

並回覆於此篇文章

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

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]

上課影音


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


[hr]

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


完整講義專頁
https://mepopedia.com/~jinjin/webdesign/
補充說明:
目前的瀏覽器幾乎都支援CSS3,因此通常不需要再另外寫瀏覽器相容的設定。
不同對應寫法介紹如下:
-moz-對應 Firefox,
-webkit-對應 Safari and Chrome
-o- 對應 Opera
-ms- 對應 Internet Explorer




作業上傳與回覆


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

並回覆於此篇文章

1.網址:
o Sans TC", sans-serif;
margin: 0px; /*緊貼頂部(上下左右),沒有空隙*/
background-color:#C5305D;
background-image: url(img/back.jpg)
}

#wrapper {
width: 900px; /*寬度設定為900px*/
margin: auto; /*版面居中對齊*/
color: #C6C6C6; /*文字顏色設定*/
border: 20px solid #F46A8D;
border-radius: 20px 0px 50px 10px;
}

#header{
background-color:#F46A8D;
height: 110px; /*高度設定,設定之高度加上下內距padding等時實際高度,110px+20px+20px=150px*/
padding:20px; /*內距設定*/
}

#content {
background-color: rgba(247,239,241,0.7);
font-size: 14px; /*字體大小*/
line-height: 2em; /*字體行間為兩個字距*/
color:#000; /*文字顏色設定*/
padding: 30px; /*文字與#content間的內距*/
border-radius: 20px 0px;
margin:20px;
box-shadow:3px 3px 10px #333;
}
#footer {
/*可不用設定寬度和高度,由文字來決定高度*/
background-color:#F46A8D;
font-size: 12px; /*文字尺寸設定*/
line-height: 1.5em; /*文字行高設定為1.5字高*/
color: #FFF; /*文字顏色設定*/
padding: 20px; /*內距設定*/
}

h1{
font-size:30px;
color:#FFF;
text-shadow: 1px 1px 1px #000000;
animation-duration: 1s;
animation-name: slidein;
}
@keyframes slidein {
from {
padding-left: 100%;
width: 300%;
}
to {
padding-left: 0%;
width: 100%;
}
}

h3{
font-size:18px;
color:#C5305D;
}

img{
border-radius: 20px 0px;
}

.box{
width: 150px;
background: rgba(69,90,56,1.00);
padding: 30px;
font-size: 20px;
color: aliceblue;
-webkit-animation: cssAnimation 3.2121s 7 ease;
-moz-animation: cssAnimation 3.2121s 7 ease;
-o-animation: cssAnimation 3.2121s 7 ease;
}

@-webkit-keyframes cssAnimation {
from { -webkit-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -webkit-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-moz-keyframes cssAnimation {
from { -moz-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -moz-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}

@-o-keyframes cssAnimation {
from { -o-transform: rotate(360deg) scale(0.651) skew(2deg) translate(-150px); }
to { -o-transform: rotate(4deg) scale(1) skew(1deg) translate(10px); }
}


補充說明:
目前的瀏覽器幾乎都支援CSS3,因此通常不需要再另外寫瀏覽器相容的設定。
不同對應寫法介紹如下:
-moz-對應 Firefox,
-webkit-對應 Safari and Chrome
-o- 對應 Opera
-ms- 對應 Internet Explorer




作業上傳與回覆


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

並回覆於此篇文章

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

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]

上課影音


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


[hr]

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


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

[hr]
學長姐作業參考
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445148/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445141/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445121/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445135/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445010/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1065445051/
http://ftp.mepopedia.com/~css107c/hw01/hw01-1045445021/
http://ftp.mepopedia.com/~css107a/hw01/hw01-1065445139/


[hr]

上課影音


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


[hr]

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


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