[作業01]DIV與CSS3練習--基本單欄網頁版型 1. 課堂範例2. 作業說明2.1 DIV架構與尺寸分析2.2 HTML的架構語法2.3 CSS基礎語法2.3.1 CSS 動畫2.4 加入 CSS3效果之語法參考（請務必修正為符合主題之設計）2.5 作業上傳與回覆3. 上課影音本週請同學複習基礎的網頁設計概念，重新練習html與css 以色塊為主的基本單欄網頁版型為基礎，加上其他使用過的功能，並配合CSS3語法，使網頁看起來更活潑！ [hr] 1. 課堂範例 http://mepopedia.com/~jinjin/ex/hw01/ [hr] 2. 作業說明 參照講義 [url=http://mepopedia.com/forum/read.php?804,16481]利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url] 自行選擇主題，製作以DIV架構搭配CSS的基本網頁，請注意字體大小、整體質感與配色 1. DIV架構與尺寸分析 1.以DIV建構網頁基本架構 以下為最基本的網站排版架構 利用Div標籤與CSS建立單純色塊的網頁範例的對照即為 2. HTML的架構語法 [color=#663300]範例內容僅供參考，主題及內文請自行設定後填入，不要跟範例內容一樣，後續風格與配色請以主題為主，設計出具有質感之相對應網頁[/color] 網頁主題請自行更改 利用Div標籤與CSS建立基本單欄網頁版型 單純色塊的講解 利用Div標籤與CSS建立基本網頁版型，以全國比較文學會議 一、Div標籤與CSS 在早期瀏覽器以IE為主的網頁設計時代，大多以表格(TABLE)或頁框(FRAME)，來製作網頁主要的定位與架構，但是隨著上網習慣的改變，網路速度的需求、網頁跨瀏覽器的問題以及行動上網的迅速發展等，目前網頁設計的架構，多半以DIV搭配CSS為設計主流，以Div標籤來建立網頁區塊，區分各個主要頁面做為主要的排版架構，搭配CSS語法來美化網頁，以往的網頁美化設定大多直接寫在HTML網頁本身，現在則分開以HTML為架構設定，CSS為美化設定，一個建築網頁架構，一個美化網頁。 二、單欄版型的範例 第一個進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。 這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。 三、DIV架構與尺寸分析 第一個進入Dreamweaver的例子，將以全國比較文學會議網站為例，作為輔助說明，使同學們更加輕鬆的進入網頁排版的世界。 這是一個很單純的單欄版型的網頁，因為內容單純，故以單欄來設計。 │中國科技大學 ‧ 視覺傳達設計系 │ 電話: 02-29313416 │ 03-6991111 │ │地址：新竹校區：303-01 新竹縣湖口鄉中山路三段530號 │台鐵北湖車站步行三分鐘到校 │最佳瀏覽環境：IE6.0.FIRE FOX 2.0以上版本 │ 最佳瀏覽解析度：1024X768 以上 │ Designed by 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 [hr] 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%; } } [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] 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/~css108b/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] 3. 上課影音 [練習一] DIV與CSS練習--以色塊為主的基本單欄網頁版型（2018/09/27課堂版本） https://youtu.be/vSpHaQFZANs [hr] CSS3基礎語法練習 https://youtu.be/TM6wtac-LCc 完整講義專頁 https://mepopedia.com/~jinjin/webdesign/ http://mepopedia.com/forum/read.php?2814,89977,89977#msg-89977 Sat, 24 Oct 2026 20:56:29 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2814,89977,90096#msg-90096 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90096#msg-90096 2.設計概念與製作心得： 網頁設計很難
3.何謂HTML、DIV及CSS:
HTML主要結構檔案
DIV是區塊用法
CSS是可以美化網頁設計的編輯
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.cute.edu.tw/
5.期待這門課的學習成果與收穫為何?
希望學到很多]]> 1075445048 108-1《中國》竹視傳二B-進階網頁設計 Wed, 23 Oct 2019 10:25:14 +0800 http://mepopedia.com/forum/read.php?2814,89977,90095#msg-90095 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90095#msg-90095 2.設計概念與製作心得：以活動做為主視覺，而去延生
3.何謂HTML、DIV及CSS:
HTML是網頁設計的主要【柱】檔案
DIV是一種區塊用法
CSS是視覺編輯方面的程式語言
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.tv-tokyo.co.jp/anime/boruto/special/
簡單顏色活力
5.期待這門課的學習成果與收穫為何?
加油~]]> 1075445058 108-1《中國》竹視傳二B-進階網頁設計 Wed, 23 Oct 2019 10:16:56 +0800 http://mepopedia.com/forum/read.php?2814,89977,90088#msg-90088 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90088#msg-90088 2.設計概念與製作心得：好難
3.何謂HTML、DIV及CSS:
html是網路設計裡的語言程式結構設計
css是美術編輯方面的程式語言
HTML DIV 標籤用法從以前僅用來標示一個網頁區塊到現在直接用來做網頁排版，這都是因為 CSS 技術的進步與普即所至，如果要靈活運用
HTML DIV 標籤就要從最基本的語法開始學習，這樣才知道如何在 DIV 標籤內加入樣式設計，熟悉 DIV 區塊的用法之後，幾乎可以大幅度的取代
傳統 Table 的排版方式，本篇就從基本語法以及幾個常見的 DIV 應用範例實際操作給各位看。
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.instagram.com/
5.期待這門課的學習成果與收穫為何?
好難]]> 1075445032 108-1《中國》竹視傳二B-進階網頁設計 Tue, 22 Oct 2019 22:34:27 +0800 http://mepopedia.com/forum/read.php?2814,89977,90054#msg-90054 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90054#msg-90054 2.設計概念與製作心得：
「七武士」這部電影是影史的經典，黑白的畫面使作品更有味道。放入的兩張圖片都是以菊千代為主角，讓畫面更加有趣。
3.何謂HTML、DIV及CSS:
HTML網頁的底，DIV標籤，CSS設計
4.附上至少一個覺得設計很有質感的網站，並說明原因:
https://www.ndc.co.jp/cn/works/mm-package_201809/
網站的動畫、排版都非常有質感。
5.期待這門課的學習成果與收穫為何?
可以學習網頁設計相關知識。]]> 宛如 108-1《中國》竹視傳二B-進階網頁設計 Wed, 09 Oct 2019 11:41:40 +0800 http://mepopedia.com/forum/read.php?2814,89977,90053#msg-90053 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90053#msg-90053
2.設計概念與製作心得：
設計概念：夏天的藍天白雲，營造出舒適感和悠閒感。
心得：有種升級的感覺。

3.何謂HTML、DIV及CSS:
HTML是一種描述文件結構的語法。
DIV是一種區塊用法。
CSS是美術編輯方面的程式語言。

4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.managertoday.com.tw/
分類明確，東西豐富但不會眼花撩亂。

5.期待這門課的學習成果與收穫為何?
練習排版與讓人看了舒服的網頁。]]> 1055440093 108-1《中國》竹視傳二B-進階網頁設計 Wed, 09 Oct 2019 03:54:20 +0800 http://mepopedia.com/forum/read.php?2814,89977,90052#msg-90052 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90052#msg-90052 2.設計概念與製作心得：這個服飾品牌每季都會有不同的風格，我很喜歡他們的廣告，所以用這次秋天的配色來做網頁。
3.何謂HTML、DIV及CSS: HTML網站內容、DIV區塊標籤、CSS網站美編
4. https://yifangtea.com.tw/ 瀏覽便捷，一目了然
5.期待這門課的學習成果與收穫為何? 希望能做自己的網站，記錄生活。]]> 1055440119 108-1《中國》竹視傳二B-進階網頁設計 Wed, 09 Oct 2019 00:34:21 +0800 http://mepopedia.com/forum/read.php?2814,89977,90049#msg-90049 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90049#msg-90049 2.設計概念與製作心得：
做完很有成就感
3.何謂HTML、DIV及CSS:
HTML是網頁設計的主要結構檔案
DIV是區塊用法
CSS是可以美化網頁設計的編輯
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.100.com.tw/
簡單 清新 明瞭
5.期待這門課的學習成果與收穫為何?
網頁設計更加進步]]> 1075445054 108-1《中國》竹視傳二B-進階網頁設計 Tue, 08 Oct 2019 21:58:21 +0800 http://mepopedia.com/forum/read.php?2814,89977,90043#msg-90043 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90043#msg-90043 2.設計概念與製作心得:
3.何謂HTML、DIV及CSS:網頁術語
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.pinterest.com/
使用很簡單，且很多圖片
5.期待這門課的學習成果與收穫為何?學好網頁]]> 1075445080 108-1《中國》竹視傳二B-進階網頁設計 Tue, 08 Oct 2019 00:43:52 +0800 http://mepopedia.com/forum/read.php?2814,89977,90042#msg-90042 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90042#msg-90042
2.設計概念與製作心得：

因為是我蠻喜歡的饒舌團體，最近也都聽他們的歌，

蠻開心可以幫他們弄個簡單的網頁。

3.何謂HTML、DIV及CSS:

html是網路設計裡的語言程式結構設計

css是美術編輯方面的程式語言

4.附上至少一個覺得設計很有質感的網站，並說明原因:

https://cc-work.com/w/corp/works

整個網業很整齊、乾淨，讓人看了很舒服。

5.期待這門課的學習成果與收穫為何?

會製作網頁很有成就感，雖然對於一個外系來說超難，

但自己摸索弄出一個網頁很開心。]]> 曾翊純 108-1《中國》竹視傳二B-進階網頁設計 Fri, 04 Oct 2019 14:54:59 +0800 http://mepopedia.com/forum/read.php?2814,89977,90038#msg-90038 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90038#msg-90038 2.設計概念與製作心得：做得越久似乎可以了解一些程式碼編輯方法
3.何謂HTML、DIV及CSS:
HTML是網頁設計的主要結構檔案
DIV是區塊用法
CSS是可以美化網頁設計的編輯
4.附上至少一個覺得設計很有質感的網站，並說明原因:
https://www.pinterest.ca/
簡易圓弧的LOGO與版面設計，給人一種親和力，而且排版乾淨整齊
5.期待這門課的學習成果與收穫為何?
希望我可以看懂程式碼，靠自己編輯整個網頁設計]]> 1075445096 108-1《中國》竹視傳二B-進階網頁設計 Wed, 02 Oct 2019 17:59:45 +0800 http://mepopedia.com/forum/read.php?2814,89977,90037#msg-90037 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90037#msg-90037 2.設計概念與製作心得：
進階網頁設計
讓之前的疑問獲得解答
後來還自行加入文字漸層 linear-gradient(角度,rgba1,rgba2,rgba3,rgba4)
雖然並不是從頭到腳自己打這串文字漸層
但我了解文字漸層的顏色必須是rgba 否則不會呈現
一張美麗大背景的表現方式 用固定是最完美的
3.何謂HTML、DIV及CSS:
HTML是個html標籤構成的純網頁
DIV是個區塊
CSS是讓網頁的一切整齊漂亮，甚至是有設計感的必學技巧
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.oxxostudio.tw/articles/201803/css-animation.html
極簡漂亮的導覽頁，只有開始往下瀏覽才會出現的FB Twitter等分享鍵
5.期待這門課的學習成果與收穫為何?
想做出更漂亮效果更豐富的網頁
一直想知道為什麼那些網站的背景又大又美
中心的卷軸又是透明的，可以透過透明的中心捲軸去欣賞背景
現在終於知道怎麼做了!]]> 1055461035 108-1《中國》竹視傳二B-進階網頁設計 Wed, 02 Oct 2019 17:16:46 +0800 http://mepopedia.com/forum/read.php?2814,89977,90035#msg-90035 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90035#msg-90035 2.設計概念與製作心得：「讓年輕人和後代了解過去，以過去展望未來的男人-張哲生」的主題，介紹過去代表是黑白的照片和顏色風格，主題圖片和背景圖片部分，有顯示參考資料，讓不同的世代文化達到平衡。
3.何謂HTML、DIV及CSS:HTML打網址語法、文字、DIV部分動靜態區塊、CSS顏色的符號語法。
4.附上至少一個覺得設計很有質感的網站，並說明原因：https://www.gvm.com.tw/article/42514、哲生博客 中華商場的興衰（1961-1992） https://jasonblog.tw/2013/07/history-of-chung-hua-market-bazaar-from-1961-to-1992.html，原因是有呈現部落格有動態感，呈現過去留下來的美好。
5.期待這門課的學習成果與收穫為何?身為自己是生錯、不符合自己的世代的人，達到世代的平衡，可以運用網路文章喚醒，不同的世代傳統思維，重新讓新世代年輕人重新思考，了解過去的文化，是新世代年輕人和後代子孫以後需要面臨的問題。]]> 1075445002-1 108-1《中國》竹視傳二B-進階網頁設計 Wed, 02 Oct 2019 11:35:31 +0800 http://mepopedia.com/forum/read.php?2814,89977,90033#msg-90033 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90033#msg-90033 2.設計概念與製作心得：背景難找圖片保釣
3.何謂HTML、DIV及CSS:網頁程式
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://shopee.tw/
介面使用起來很簡單
5.期待這門課的學習成果與收穫為何?有能力寫出網頁]]> 1075445048 108-1《中國》竹視傳二B-進階網頁設計 Wed, 02 Oct 2019 11:20:38 +0800 http://mepopedia.com/forum/read.php?2814,89977,90031#msg-90031 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90031#msg-90031 2.設計概念與製作心得：背景很常會不見
3.何謂HTML、DIV及CSS:網頁程式
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://zh.wikipedia.org/wiki/%E9%AC%BC%E6%BB%85%E4%B9%8B%E5%88%83
介面使用起來很簡單
5.期待這門課的學習成果與收穫為何?有能力寫出有質感的網頁
視傳2B 1075445072 朱廷翌]]> 1075445072 108-1《中國》竹視傳二B-進階網頁設計 Wed, 02 Oct 2019 10:28:33 +0800 http://mepopedia.com/forum/read.php?2814,89977,90028#msg-90028 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90028#msg-90028 2.設計概念與製作心得： 網頁設計很有趣
3.何謂HTML、DIV及CSS:
HTML是網頁設計的一個主要結構檔案
DIV是一種區塊用法
CSS是可以美化網頁設計的編輯
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.apple.com/jp/
5.期待這門課的學習成果與收穫為何?
希望學到很多語法]]> 1075445086 108-1《中國》竹視傳二B-進階網頁設計 Tue, 01 Oct 2019 21:10:31 +0800 http://mepopedia.com/forum/read.php?2814,89977,90027#msg-90027 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90027#msg-90027 2.設計概念與製作心得：這次主題的配色比較偏向暖色系，跟主題人物比較符合，而畫面用比較簡單的形式表現，讓畫面看起來較舒適
3.何謂HTML、DIV及CSS:
HTML可以編輯設計出網頁，也可以在網頁中加入所有可支援的方式，例如表格、表單、圖片、文字、連結、程式
DIV設定字、畫、表格等的擺放位置。
CSS使網頁更整齊，控制網頁中的字型.字體.大小.連結.表格.圖片
4.附上至少一個覺得設計很有質感的網站，並說明原因:https://www.niusnews.com/ 整體配色很療癒，介紹也都很仔細
5.期待這門課的學習成果與收穫為何?
希望上完課後能記住語法，學習到不同的指令]]> 1075445012 108-1《中國》竹視傳二B-進階網頁設計 Tue, 01 Oct 2019 20:44:57 +0800 http://mepopedia.com/forum/read.php?2814,89977,90025#msg-90025 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90025#msg-90025 2.設計概念與製作心得：
還可以設計動畫跟漸層很厲害~
3.何謂HTML、DIV及CSS:
HTML是網頁設計的主要結構檔案
DIV是一種區塊用法
CSS是美術編輯方面的程式語言
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.nicovideo.jp/?header
畫面看上去很乾淨~簡潔明瞭
5.期待這門課的學習成果與收穫為何?
希望能設計出一個屬於自己的網頁~]]> 1075445018 108-1《中國》竹視傳二B-進階網頁設計 Mon, 30 Sep 2019 23:35:38 +0800 http://mepopedia.com/forum/read.php?2814,89977,90024#msg-90024 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90024#msg-90024 2.設計概念與製作心得：
學會了一些小細節的語法，覺得頗有趣
3.何謂HTML、DIV及CSS:
HTML是網頁設計的主要結構檔案
DIV是一種區塊用法
CSS是是美術編輯方面的程式語言
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.tumblr.com/dashboard
整體排版十分簡潔、乾淨
5.期待這門課的學習成果與收穫為何?
更加了解網頁的語法]]> 1075445066 108-1《中國》竹視傳二B-進階網頁設計 Mon, 30 Sep 2019 21:56:41 +0800 http://mepopedia.com/forum/read.php?2814,89977,90021#msg-90021 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90021#msg-90021 2.設計概念與製作心得：動畫的部分有點搞不清楚，但完成好像還可以哈哈
3.何謂HTML、DIV及CSS:
HTML是網頁設計的主要結構檔案
DIV是區塊用法
CSS是可以美化網頁設計的編輯
4.附上至少一個覺得設計很有質感的網站，並說明原因:
https://www.youtube.com/?gl=TW&hl=zh-tw
簡單又明瞭!
5.期待這門課的學習成果與收穫為何?
希望我能夠吸老師上課的東西，更加熟練]]> 1075445024 108-1《中國》竹視傳二B-進階網頁設計 Mon, 30 Sep 2019 20:30:11 +0800 http://mepopedia.com/forum/read.php?2814,89977,90013#msg-90013 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90013#msg-90013 2.設計概念與製作心得：
利用小技巧讓網頁設計更有趣
3.何謂HTML、DIV及CSS:
HTML是網頁設計的一個主要結構檔案
DIV是一種區塊用法
CSS是可以美化網頁設計的編輯
4.附上至少一個覺得設計很有質感的網站，並說明原因
http://nipponcolors.com 各種漂亮的日本傳統色可以加以運用
5.期待這門課的學習成果與收穫為何?
精進自己的網頁設計]]> 1075445050 108-1《中國》竹視傳二B-進階網頁設計 Sat, 28 Sep 2019 23:15:53 +0800 http://mepopedia.com/forum/read.php?2814,89977,90011#msg-90011 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90011#msg-90011 2.設計概念與製作心得：以經典歌曲作為我的作品設計，利用背景圖可以襯托出一剪梅與甜蜜蜜的設計風格，編排上面也都用了透明度，看上去是有輕鬆簡單的感覺
3.何謂HTML、DIV及CSS:
html是網路設計裡的語言程式結構設計
css是美術編輯方面的程式語言
HTML DIV 標籤用法從以前僅用來標示一個網頁區塊到現在直接用來做網頁排版，這都是因為 CSS 技術的進步與普即所至，如果要靈活運用 HTML DIV 標籤就要從最基本的語法開始學習，這樣才知道如何在 DIV 標籤內加入樣式設計，熟悉 DIV 區塊的用法之後，幾乎可以大幅度的取代傳統 Table 的排版方式，本篇就從基本語法以及幾個常見的 DIV 應用範例實際操作給各位看。
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://maple-lodge.okgo.tw/#menu
5.期待這門課的學習成果與收穫為何?]]> 林旆瑀 108-1《中國》竹視傳二B-進階網頁設計 Fri, 27 Sep 2019 16:24:10 +0800 http://mepopedia.com/forum/read.php?2814,89977,90008#msg-90008 Re: [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,90008#msg-90008 2.設計概念與製作心得：背景很常會不見
3.何謂HTML、DIV及CSS:網頁程式
4.附上至少一個覺得設計很有質感的網站，並說明原因
https://www.apple.com/tw/
介面使用起來很簡單
5.期待這門課的學習成果與收穫為何?有能力寫出有質感的網頁]]> 1075445068 108-1《中國》竹視傳二B-進階網頁設計 Thu, 26 Sep 2019 23:14:51 +0800 http://mepopedia.com/forum/read.php?2814,89977,89977#msg-89977 [作業01]DIV與CSS3練習--基本單欄網頁版型 http://mepopedia.com/forum/read.php?2814,89977,89977#msg-89977
  1. 1. 課堂範例
  2. 2. 作業說明
  3. 2.1 DIV架構與尺寸分析
  4. 2.2 HTML的架構語法
  5. 2.3 CSS基礎語法
  6. 2.3.1 CSS 動畫
  7. 2.4 加入 CSS3效果之語法參考（請務必修正為符合主題之設計）
  8. 2.5 作業上傳與回覆
  9. 3. 上課影音
本週請同學複習基礎的網頁設計概念，重新練習html與css
以色塊為主的基本單欄網頁版型為基礎，加上其他使用過的功能，並配合CSS3語法，使網頁看起來更活潑！

[hr]

1. 課堂範例


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

[hr]

2. 作業說明


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

1. DIV架構與尺寸分析


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

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


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


2. HTML的架構語法


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

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

[hr]

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%;
}
}

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

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/~css108b/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]

3. 上課影音


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


[hr]

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


完整講義專頁
https://mepopedia.com/~jinjin/webdesign/]]> JinJin 108-1《中國》竹視傳二B-進階網頁設計 Sat, 07 Sep 2019 15:19:47 +0800