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

Advanced

[作業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




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

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




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

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

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

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



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


@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); } }

5. 作業上傳與回覆


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

並回覆於此篇文章

1.網址:
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 1 time(s). Last edit at 09/16/2019 01:58PM by JinJin.
(編輯記錄)