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

Advanced

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

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



1. 課堂範例


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



2. 作業說明


參照講義
利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例
自行選擇主題,製作以DIV架構搭配CSS的基本網頁,請注意字體大小、整體質感與配色

1. DIV架構與尺寸分析


1.以DIV建構網頁基本架構

以下為最基本的網站排版架構


利用Div標籤與CSS建立單純色塊的網頁範例的對照即為


2. HTML的架構語法


範例內容僅供參考,主題及內文請自行設定後填入,不要跟範例內容一樣,後續風格與配色請以主題為主,設計出具有質感之相對應網頁

<!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>

3. CSS基礎語法


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; }
由以上雛形,加入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



1. CSS 動畫



只需要定義兩個部份: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%;
}
}



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



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;



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


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




5. 作業上傳與回覆


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



學長姐作業參考
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/




3. 上課影音


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





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


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




Edited 5 time(s). Last edit at 10/02/2019 08:21AM by JinJin.
(編輯記錄)

1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-1075445036
2.設計概念與製作心得:至今怎麼修改都不知道為什麼還是讓網頁很慢
3.何謂HTML、DIV及CSS: HTML網頁的程式、DIV為標籤、CSS是讓網頁有設計
4.附上至少一個覺得設計很有質感的網站,並說明原因 :https://blossomingjuice.com/ 很唯美的網站 也很喜歡他的架構
5.期待這門課的學習成果與收穫為何? 希望能扎實的學習到網頁的技術



Edited 1 time(s). Last edit at 10/02/2019 08:21AM by JinJin.
(編輯記錄)

1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-1075445037
2.設計概念與製作心得:我真的盡力了q
3.何謂HTML、DIV及CSS: HTML網頁的基底(?、DIV一個跟html很像的東西嗎、CSS網頁的樣式設計(?
4.附上至少一個覺得設計很有質感的網站,並說明原因 :https://www.surpriselab.com.tw/thegreattipsy/index.html /(這個網站的圖搭配文字以及網頁滑動的感覺而且有遠近感我很喜歡)
5.期待這門課的學習成果與收穫為何? 希望我能不要被當



Edited 3 time(s). Last edit at 10/02/2019 08:21AM by JinJin.
(編輯記錄)

1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-1075445085
2.設計概念與製作心得:我個人蠻喜歡靈異街11號這部連續劇,
他的這首片頭曲的歌詞也讓我想到那些老榮民們,有幾段歌詞也很符合連續劇本身。
3.何謂HTML、DIV及CSS:HTML編輯內容,DIV當標籤,CSS設計頁面。
4.附上至少一個覺得設計很有質感的網站,並說明原因 https://vvg.com.tw (整體十分簡潔、乾淨、舒適。)
5.期待這門課的學習成果與收穫為何? 學到更多新的關於網頁的程式設計語言。



Edited 1 time(s). Last edit at 10/02/2019 08:21AM by JinJin.
(編輯記錄)

1.網址:http://file.mepopedia.com/~css108a/hw01/hw01-1055445133
2.設計概念與製作心得:
「七武士」這部電影是影史的經典,黑白的畫面使作品更有味道。放入的兩張圖片都是以菊千代為主角,讓畫面更加有趣。
3.何謂HTML、DIV及CSS:
HTML網頁的底,DIV標籤,CSS設計
4.附上至少一個覺得設計很有質感的網站,並說明原因:
https://www.ndc.co.jp/cn/works/mm-package_201809/
網站的動畫、排版都非常有質感。
5.期待這門課的學習成果與收穫為何?
可以學習網頁設計相關知識。

1.網址: http://file.mepopedia.com/~css108b/hw01/hw01-1075445076
2.設計概念與製作心得:希望能夠更精進
3.何謂HTML、DIV及CSS:HTML網頁的程式、DIV為標籤、CSS是讓網頁有設計
4.附上至少一個覺得設計很有質感的網站,並說明原因,網站:https://foop.cestec.jp/en(乾淨.舒適.清新)
5.期待這門課的學習成果與收穫為何?希望能夠融入

1.網址: http://file.mepopedia.com/~css108b/hw01/hw01-1055440119
2.設計概念與製作心得:這個服飾品牌每季都會有不同的風格,秋天的配色。
3.何謂HTML、DIV及CSS: HTML網站內容、DIV區塊標籤、CSS網站美編
4. https://yifangtea.com.tw/ 瀏覽便捷,一目了然
5.期待這門課的學習成果與收穫為何? 希望能做自己的網站,記錄生活。



Edited 1 time(s). Last edit at 10/02/2019 12:11PM by 1055440119.
(編輯記錄)

1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-1075445023/
2.設計概念與製作心得:做完覺得有成就感
3.何謂HTML、DIV及CSS: HTML網頁的程式、DIV當標籤、CSS是讓網頁有設計
4.附上至少一個覺得設計很有質感的網站,並說明原因 :https://www.oneday.com.tw/ 簡單 乾淨 有質感
5.期待這門課的學習成果與收穫為何? 希望能歐趴

1.網址:http://file.mepopedia.com/~css108a/hw01/hw01-1075445045/
2.設計概念與製作心得:因為太想喝黑糖珍珠鮮奶,所以做了這個主題的網頁,非一芳手搖飲業配文,沒有贊助,飲料自費拍攝。顏色配色是以黑糖色所以都偏暗色。
3.何謂HTML、DIV及CSS:HTML可以編輯設計出網頁,加入所有HTML語言可支援的方式,例如表格、表單、圖片、文字、連結、程式等等。DIV視為一種標籤,給他名稱之後用CSS去做排版,可以浮動 陰影 等做變化。CSS作編排,可以計設出多層次和陰影等效果及其他特效,簡單說CSS是個美化網頁的語法。
4.附上至少一個覺得設計很有質感的網站,並說明原因:https://www.youtube.com 簡單明瞭的網頁,讓各種年齡層都會使用。
5.期待這門課的學習成果與收穫為何?希望能比上學期學得更扎實、學多一點技巧,做得更有質感的網頁,對自己以及未來都有所幫助。

1.網址: http://file.mepopedia.com/~css108b/hw01/hw01-1055443132
2.設計概念與製作心得:介绍新竹市的迎曦门;有点难
3.何謂HTML、DIV及CSS: HTML是网页的程式、DIV是其標籤、CSS是让网页有設計感
4.附上至少一個覺得設計很有質感的網站,並說明原因:http://wow.blizzard.cn/landing 能结合此游戏的故事场景内容,让玩家有身临其境感
5.期待這門課的學習成果與收穫為何? 为毕业专题

1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-1075445031
2.設計概念與製作心得:以古風為主題下去設計
3.何謂HTML、DIV及CSS:HTML編輯,DIV標籤,CSS設計
4.附上至少一個覺得設計很有質感的網站,並說明原因
http://yagri.com.tw/
網站製作的簡潔可愛不雜亂,很容易知道介紹的主題方向。
5.期待這門課的學習成果與收穫為何?學會如何製作

1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-1075445073
2.設計概念與製作心得:固定背景搞超久,後來發現原來是圖片太小
3.何謂HTML、DIV及CSS: HTML網頁、DIV區域、CSS美化編輯
4.附上至少一個覺得設計很有質感的網站,並說明原因 :https://blossomingjuice.com乾淨簡單舒適
5.期待這門課的學習成果與收穫為何? 希望可以更進步

1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-1075445073
2.設計概念與製作心得:固定背景搞超久,後來發現原來是圖片太小
3.何謂HTML、DIV及CSS: HTML網頁、DIV區域、CSS美化編輯使用
4.附上至少一個覺得設計很有質感的網站,並說明原因 :https://blossomingjuice.com乾淨簡單舒適
5.期待這門課的學習成果與收穫為何? 希望可以更進步

1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-1075445005
2.設計概念與製作心得:做完很開心
3.何謂HTML、DIV及CSS:一個是框架、一個是區塊、一個是設計
4.附上至少一個覺得設計很有質感的網站,並說明原因
https://www.dayungs.com/ 簡潔明瞭
5.期待這門課的學習成果與收穫為何?
能做出比上學期還要有質感的網頁

1.網址: http://file.mepopedia.com/~css108a/hw01/hw01-1075445007/
2.設計概念與製作心得:改顏色改得很痛苦,一直找不到
3.何謂HTML、DIV及CSS: 網頁 ,區域性,美化設計
4.附上至少一個覺得設計很有質感的網站,並說明原因
https://pier-2.khcc.gov.tw/home03.aspx?ID=20&IDK=3 簡單,不會太過複雜
5.期待這門課的學習成果與收穫為何? 可以設計出更有質感的東西,有許未來會有用