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

Advanced

[作業02] HTML與CSS練習-- 首頁實作篇

1. HTML與CSS練習--首頁實作篇作業說明


請參考
[講義] HTML與CSS練習--首頁實作篇:http://mepopedia.com/forum/read.php?804,43670

1. 作業目的

1.進一步熟悉HTML與CSS
2.練習將視覺與語法結合
3.學習如何修改HTML與CSS語法



2. 作業說明

1.請以範例網站為基模,使用其排版概念,重新改編為一新的網站設計,除了架構一樣,其他資訊皆要更新。
2.製作:(1)完成首頁,(2)設定滑鼠移過的效果,其他頁面將陸續完成。



3. 作業步驟

1.參考http://mepopedia.com/~web102-c/hw03/hw03/
並以講義中的語法為參考http://mepopedia.com/forum/read.php?804,43670
2.重新設定一全新網站的主題,蒐集相關主題及內容資料
3.重新設定網站主題、使用對象、色彩計畫、圖片元素等。
4.製作背景圖片、整體色彩設定,標題及文字內容。
5.將HTML與CSS語法分別貼上後,修改HTML與CSS語法。
6.將資料夾命名為 hw02-學號,以FTP上傳至hw02資料夾
作業網址為http://mepopedia.com/~web103-2b/hw02/hw02-1025445XXX

並請回覆:

(1)作業網址:
(2)網站主題/網站名稱:
(3)分類項目:
(4)對象:
(5)色彩計畫:
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得:
學號



請於規定時間準時繳交作業,逾期不後。


4. 學長姐範例


http://mepopedia.com/~web102-c/midterm/midterm-1015445215/
http://mepopedia.com/~web102-c/midterm/midterm-1015445212/
http://mepopedia.com/~web102-c/midterm/midterm-1015445219

http://mepopedia.com/~web102-c/final/final-1015445212/



Edited 1 time(s). Last edit at 03/25/2015 09:30PM by JinJin.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445005
(2)網站主題: / Dessert B∞k /
(3)對象:喜好甜點、對烘焙有興趣的人
(4)色彩計畫:大地色
(5)風格設定、網頁看點、預期成效: 簡潔、一目了然、讓大眾輕鬆上手
(6)請整理以下數值:
字體設定(font-family) Arial, Helvetica, sans-serif、"微軟正黑體",sans-serif、Tahoma, Geneva, sans-serif、
標題級數、文章標題級數、內文級數(font-size)(單位px) 24px、16px、12px
區塊內與區塊間的距離(padding)(margin)(單位px) 10px、10px
網站寬度(width)(單位px) 800px
(7)製作心得:
越做越餓...
學號 1025445005



Edited 5 time(s). Last edit at 04/01/2015 01:10AM by rosezheng.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445008
(2)網站主題: banksy
(2)對象: 一般大眾
(3)色彩計畫: 活潑鮮明
(4)風格設定、網頁看點、預期成效: 活潑
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得: 好
學號 :1025445008

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445226
(2)網站主題: Karl Lagerfeld
(2)對象: 一般大眾
(3)色彩計畫: 黑,白
(4)風格設定、網頁看點、預期成效: 時尚,簡單
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:
學號 1025445226



Edited 2 time(s). Last edit at 03/31/2015 09:57PM by 1025445226.
(編輯記錄)

(1)作業網址:
(2)網站主題:日式點心
(2)對象: 一般大眾
(3)色彩計畫: 綠色 淡黃色 咖啡色
(4)風格設定、網頁看點、預期成效: 和風
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:
學號 1025445197

(1)作業網址:http://mepopedia.com/~web103-2b/hw02/hw02-1025445035/
(2)網站主題: 可愛動物
(2)對象: 一般大眾
(3)色彩計畫: 海洋
(4)風格設定、網頁看點、預期成效: 可愛插圖、了解生態、增加知識
(5)請整理以下數值:
字體設定(font-family) :微軟正黑體
標題級數、文章標題級數、內文級數(font-size) 12px(單位px)
區塊內與區塊間的距離(padding)(margin)20px(單位px)
網站寬度(width)auto(單位px)
(6)製作心得:很好玩
學號 1025445035



Edited 2 time(s). Last edit at 03/31/2015 02:02AM by 駱亭均.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445128
(2)網站主題: 犯罪心理
(2)對象: 一般大眾
(3)色彩計畫: 紅黑系列
(4)風格設定、網頁看點、預期成效: 黑暗、沉重
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得: 可以從語法中瞭解每一個區塊相對位置就覺得網頁沒那麼可怕也比較容易懂的操作
學號 :1025445128

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445062
(2)網站主題: Safini TIRAMISU
(2)對象: 一般大眾
(3)色彩計畫: 都以提拉米蘇的色系
(4)風格設定、網頁看點、預期成效: 看起來有高級下午茶的味道
(5)請整理以下數值:
字體設定:文鼎出明體
大標題級數:30px
文章標題級數:22px
內文級數:12px
區塊內與區塊間的距離25px
上區塊與照片的內距15px
網站寬度800px
(6)製作心得: 有點緊張,光配色就搞好久==覺得自己的色感有待加強
學號 :1025445062



Edited 4 time(s). Last edit at 03/28/2015 01:42AM by julie1025445062.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445140
(2)網站主題:喵星人的小宇宙
(2)對象: 喜歡貓咪的群眾
(3)色彩計畫: 粉紅色 咖啡色
(4)風格設定、網頁看點、預期成效: 風格:粉嫩可愛 讓人們可以了解貓咪的可愛,還有其周邊相關的餐廳 影片和貓咪相關的彩繪,並且呼籲人們養寵物就要珍惜 不要棄養 ,領養代替購買不但可以減少流浪動物還可以抌救即將被安樂死的動物們
(5)請整理以下數值:
字體設定(font-family)
標題級數- h1:24px h2-25px h3-14px
文章標題級數h2-25px
內文級數10-14px(font-size)(單位px)
區塊內與區塊間的距離
header h1-25px
header .copy-35px
navi li a-10px
contents-20px
main-20px(padding)
(margin)(單位px)
網站寬度(width)800px(單位px)
(6)製作心得: 好多英文看得我眼花撩亂,經過一番奮戰之後,終於把背景給完成了,不過很多東西經過自己修修改改過後從無到有的感覺真得很開心,也覺得很有趣,希望這學期可以一步一步的變成網頁設計達人~~((想太遠 哈哈
學號1025445140



Edited 2 time(s). Last edit at 03/27/2015 07:50AM by 1025445140.
(編輯記錄)

(1)作業網址: C:\Users\User\Desktop\hw02-1025445197\index.html
(2)網站主題:日式點心屋
(2)對象: 一般大眾
(3)色彩計畫: 綠色 粉色 淡黃色
(4)風格設定、網頁看點、預期成效: 風格:美味可口讓人對日式點心有更深的了解
(5)請整理以下數值:
字體設定(font-family)
標題級數
文章標題級數
內文級數
區塊內與區塊間的距離

網站寬度(width)800px(單位px)
(6)製作心得:導覽列顏色不會換,點選時會有顏色跑不出來的問題。

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445225/
(2)網站主題/網站名稱: Mini Melts
(3)分類項目: 甜點
(4)對象:一般大眾
(5)色彩計畫:粉色、綠
(6)風格設定、網頁看點、預期成效:甜品清爽
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得:製作成功連結的效果滿有成就感的!
學號 1025445225



Edited 2 time(s). Last edit at 04/14/2015 11:00AM by 1025445225.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445071
(2)網站主題: 盛夏在墾丁
(2)對象: 一般大眾
(3)色彩計畫: 高彩度色彩
(4)風格設定、網頁看點、預期成效:青春有活力的,能感受到南國的熱情與美麗。
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:
還在努力....
學號 1025445071



Edited 1 time(s). Last edit at 04/08/2015 11:20AM by 1025445071.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445002
(2)網站主題: 中華一番
(3)對象: 一般大眾
(4)色彩計畫:紅藍白 小當家的顏色
(5)風格設定、網頁看點、預期成效: 紅藍對比效果 希望整體有東方配色的感覺
(6)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(7)製作心得:
老師我改變底色的做法用不起來,還在努力...希望之後把網頁用的再更完整一點

學號 1025445002

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445029
(2)網站主題:吉米
(2)對象: 一般大眾
(3)色彩計畫: 可愛溫馨暖色系
(4)風格設定、網頁看點、預期成效:簡單呈現
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得: 製作過程更了解CSS語法的設定,也能了解每個東西的位置。
學號 1025445029



Edited 1 time(s). Last edit at 03/31/2015 09:52PM by Jiawen.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445065
(2)網站主題:辛普森
(2)對象: 一般大眾
(3)色彩計畫: 黑色、黃色
(4)風格設定、網頁看點、預期成效: 可愛活潑
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:
學號 1025445065



Edited 1 time(s). Last edit at 04/01/2015 10:57AM by miho.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web103-2b/hw02/hw02-1025445182
(2)網站主題: 大阪京都遊
(2)對象: 想要去此地點旅遊的人
(3)色彩計畫: 大地色系或穩重色
(4)風格設定、網頁看點、預期成效:簡潔、日式
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:
學號 1025445182

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445044
(2)網站主題: 寵物兔的一天
(2)對象: 一般大眾
(3)色彩計畫: 溫和.舒服的馬卡龍色 和 暖色
(4)風格設定、網頁看點、預期成效: 活潑、舒適、可愛的
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:
學號 1025445044

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445167
(2)網站主題: 懶懶的貓貓
(2)對象: 一般大眾
(3)色彩計畫: 粉色系列
(4)風格設定、網頁看點、預期成效: 可愛 優雅 活潑
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:
學號 :1025445167

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445119
(2)網站主題: Krystal
(2)對象: 一般大眾
(3)色彩計畫: 紫色系
(4)風格設定、網頁看點、預期成效: 簡單
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:
學號 :1025445119

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445080
(2)網站主題: waa wei
(2)對象:waa的粉絲
(3)色彩計畫: 舒服的暗色系
(4)風格設定、網頁看點、預期成效: 簡單舒服
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得: 一開始有點不太懂,慢慢摸索後有更了解了一些!
學號 1025445080



Edited 1 time(s). Last edit at 04/01/2015 11:58AM by wenhui06.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445224
(2)網站主題:打造自己的幸福住所
(2)對象:想改善居住空間的人
(3)色彩計畫:暖色調(綠、白、橘)
(4)風格設定、網頁看點、預期成效:風格簡單舒適,打造屬於自己的家
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:
學號1025445224
雖然還不是很熟悉這個軟體,但是看著老師的講義及影片邊做,學習很多。



Edited 2 time(s). Last edit at 04/15/2015 11:09AM by 1025445224.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445083
(2)網站主題:張懸介紹
(2)對象: 一般大眾
(3)色彩計畫: 藍綠
(4)風格設定、網頁看點、預期成效: 質感,簡單
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得: 酷
學號 1025445083



Edited 1 time(s). Last edit at 04/01/2015 12:00PM by 丘中儀.
(編輯記錄)

1)作業網址:
(2)網站主題:皮革精品
(2)對象:大眾
(3)色彩計畫:黑白
(4)風格設定、網頁看點、預期成效:簡單
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:
學號1025445116

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445170/
(2)網站主題: 彩色馬卡龍
(2)對象: 喜歡甜點的人與一般民眾
(3)色彩計畫: 暖色系
(4)風格設定、網頁看點、預期成效: 感到幸福.溫暖
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得: 製作中~~~
學號 1025445170



Edited 1 time(s). Last edit at 04/01/2015 11:02AM by christy123.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web103-2b/hw02/hw02-1025445050/
(2)網站主題: 韓團防彈少年團介紹
(2)對象: 大眾
(3)色彩計畫: <墨綠背景><字體明亮為主>
(4)風格設定、網頁看點、預期成效: 學校黑板風
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:好玩^^
學號 :1025445050



Edited 1 time(s). Last edit at 03/31/2015 04:07AM by Rain.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445056
(2)網站主題: A-mei/A-mit
(2)對象: 一般大眾
(3)色彩計畫: 岩石
(4)風格設定、網頁看點、預期成效: 帶點壓迫性的簡潔畫面、白與黑的反差、還有些改進空間
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
(6)製作心得: 製作還算順手,不過製作前必須要想很多加收集許多資料,感覺有些麻煩。
學號 1025445056



Edited 1 time(s). Last edit at 03/29/2015 02:35PM by jo914321.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445041
(2)網站主題/網站名稱:卡通人物(奇奇蒂蒂)
(3)對象:一般大眾
(4) 色彩計畫:暗色系
(5) 風格設定、網頁看點、預期成效:可愛風格.簡潔有力
(6)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(7)製作心得:
學號1025445041



Edited 3 time(s). Last edit at 04/08/2015 11:22AM by 1025445041.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445020
(2)網站主題: 童話之森Forest the Fairy Tales
(2)對象: 一般大眾
(3)色彩計畫: 以淡淡的色系
(4)風格設定、網頁看點、預期成效: 看起來輕鬆,淡淡的水彩的感覺
(5)請整理以下數值:
字體設定:
大標題級數:
文章標題級數:
內文級數:
區塊內與區塊間的距離
上區塊與照片的內距
網站寬度
(6)製作心得:
學號 :1025445020

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445014
(2)網站主題: 草間彌生
(3)對象:熱愛點點的人
(4)色彩計畫: 紅白粉色
(5)風格設定、網頁看點、預期成效: 以點點簡約的方式,讓人一下可以知道作者草間彌生想呈現的想法
(6)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(7)製作心得:
難啊
學號 1025445014



Edited 1 time(s). Last edit at 03/31/2015 12:41AM by penny1114.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445134
(2)網站主題: 黑執事
(3)對象:想要了解黑執事漫畫內容
(4)色彩計畫: 黑白
(5)風格設定:如漫畫書本色彩一樣走黑色路線
(6)請整理以下數值:
字體設定(font-family)
標題級數:24px
文章標題級數:20px
內文級數(font-size):12px
區塊內與區塊間的距離(padding):10px 40px 10px 10px   (margin): 10px
網站寬度(width):800px
(7)製作心得:
還是有地方不懂 讓我有點想找老師一對一教學了

學號 1025445134



Edited 1 time(s). Last edit at 04/01/2015 12:32PM by 1025445134.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445068
(2)網站主題: Cartoon Network
(2)對象: 青少年
(3)色彩計畫: 活潑的色塊
(4)風格設定、網頁看點、預期成效: 活潑的風格、介紹卡通頻道讓大家更了解
(5)請整理以下數值:
字體設定:黑體
大標題級數:圖片
文章標題級數:20px
內文級數:12px
區塊內與區塊間的距離25px
上區塊與照片的內距15px
網站寬度760px
(6)製作心得: 覺得好玩 但是搞好久 語法還是有點難懂
學號 :1025445068

1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445131
(2)網站主題/網站名稱: 復古風格網
(3)對象: 喜愛復古風格
(4)色彩計畫:主要是以淡綠色跟淡藍色做出復古的感覺
(5)風格設定、網頁看點、預期成效: 氣質
(6)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(7)製作心得: 現在做的得心應手,可是想到之後全部教完,會是一個很大困難,希望自己能突破
學號 1025445131

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445092/
(2)網站主題/網站名稱: _Layout D◑sign_
(3)分類項目: 作品欣賞
(4)對象: 找靈感的人,欣賞者
(5)色彩計畫: 馬卡龍色
(6)風格設定、網頁看點、預期成效: 簡單可愛,設計,有靈感創作
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得: 老師問一下一個問題喔,就是我用完ai跟ps之後關掉再開dw就出現錯誤:16,然後我都要刪掉dw再重新下載,有什麼問題跟最好的方法嗎?
學號 1025445092

(1)作業網址:http://mepopedia.com/~web103-2b/hw02/hw02-1025445125
(2)網站名稱: DORAEMON
(3)對象:一般大眾
(4)色彩計畫:藍 白popedia.com/~web103-2b/hw02/hw02-1025445125
(2)網站主題/網
(5)風格設定、網頁看點、預期成效:運用哆啦A夢的風格,再加以介紹,讓人更了解哆啦A夢
(6)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(7)製作心得: 越做越上手
學號 1025445125

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025448040
(2)網站主題: 藍莓甜點食譜
(3)對象:喜好甜點、對烘焙有興趣的人
(4)色彩計畫:紫色、白色
(5)風格設定、網頁看點、預期成效: 可愛、一目了然
(6)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(7)製作心得:
覺得還是很有障礙
學號 1025448040

(1)作業網址:http://mepopedia.com/~web103-2b/hw03/hw03-1025445143/works.html
(2)網站主題/網站名稱:破銅爛鐵
(3)對象:喜愛銀飾的人
(4)色彩計畫:黑色、灰階
(5)風格設定、網頁看點、預期成效:酷酷的風格、一目瞭然
(6)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(7)製作心得:一開始會遇到很多困難,但不段嘗試就會知道該如何製作。

(1)作業網址:http://mepopedia.com/~web103-2b/hw02/hw02-1025435233
(2)網站主題:CNBLUE
(3)對象:一般大眾
(4)色彩計畫:活潑色彩主要藍.白色
(5)風格設定、網頁看點、預期成效: 簡單明瞭
(6)請整理以下數值:
字體設定(font-family) Arial, Helvetica, sans-serif、"微軟正黑體",sans-serif、Tahoma, Geneva, sans-serif、
標題級數、文章標題級數、內文級數(font-size)(單位px) 24px、16px、12px
區塊內與區塊間的距離(padding)(margin)(單位px) 10px、10px
網站寬度(width)(單位px) 800px
(7)製作心得:
原本覺得很困難煩躁,但是越做越上手,還需要再多多練習。



Edited 1 time(s). Last edit at 04/15/2015 11:51AM by 1025435233.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445155
(2)對象: 一般大眾
(3)色彩計畫: 橘 七彩 系列
(4)風格設定、網頁看點、預期成效: 觀樂 搞笑
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得: 雖然剛開始很難 現在上手了就覺得很簡單 開心
學號 :1025445155

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445164
(2)網站主題: MICHAEL KORS
(2)對象: 一般大眾
(3)色彩計畫: 時尚簡單
(4)風格設定、網頁看點、預期成效: 有品牌的形象
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得: 越來越進入狀況了
學號 :1025445164

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445176
(2)網站主題: 來自星星的你
(2)對象: 一般大眾
(3)色彩計畫: 星空
(4)風格設定、網頁看點、預期成效: 看了更了解劇中設定
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得: 不錯
學號 :1025445176

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025435227
(2)網站主題: Red Velvet
(2)對象: 一般大眾
(3)色彩計畫: 粉紅色
(4)風格設定、網頁看點、預期成效: 能更了解Red Velvet
(5)請整理以下數值:
字體設定(font-family)微軟正黑體
標題級數、文章標題級數、內文級數(font-size)(單位px)10px、14px
區塊內與區塊間的距離(padding)(margin)(單位px)20px、10px
網站寬度(width)(單位px)800px
(6)製作心得: 喜歡
1025435227

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445011
(2)網站主題/網站名稱:SNOOPY
(3)分類項目: SNOOPY、WOODSTOCK、CHARLIE BROWN、LUCY、LINUS
(4)對象: 喜愛史努比的人
(5)色彩計畫: 黑白、土耳其藍
(6)風格設定、網頁看點、預期成效:簡單
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得: 一開始摸索很久,但最後完成卻非常的有成就感耶smiling bouncing smileysmiling bouncing smileysmiling bouncing smileysmiling bouncing smileysmiling bouncing smiley
學號 1025445011

(1)作業網址:http://mepopedia.com/~web103-2b/midterm/midterm-1025445023/
(2)網站主題:Alice in Wonderland
(3)對象: 不限(全年齡)、喜歡愛麗絲和迪士尼的人
(4)色彩計畫:以愛麗絲作為主要配色
(5)風格設定、網頁看點、預期成效:乾淨清新、和主題相符
(6)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得:很難有看不懂英文eye rolling smiley每次語法都調好久都找不到angry smiley
學號 :10254450023

(1)作業網址: http://mepopedia.com/~web103-2b/midterm/midterm-1025445047/
(2)網站主題/網站名稱: HelloKitty
(3)分類項目: 首頁.基本資料.成長過程.周邊商品.影片
(4)對象: 喜愛HelloKitty的人
(5)色彩計畫: 粉色系列
(6)風格設定、網頁看點、預期成效: 夢幻女孩風格
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得: 一分耕耘一分收獲
學號 1025445047

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445086
(2)網站主題: Bingtai Jiang 薑餅乾
(2)對象: 喜愛插畫的人
(3)色彩計畫: 可愛卻不失質感
(4)風格設定、網頁看點、預期成效: 可愛、質感
(5)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得: 雖然一開始有點不知道該如何做下去,之後就越做越順,希望日後能更得心應手
學號 :1025445086

(1)作業網址:http://mepopedia.com/~web103-2b/hw02/hw02-1025445113/
(2)網站主題:pepe桑
(2)對象:一般大眾
(3)色彩計畫:橘黃/淺藍
(4)風格設定、網頁看點、預期成效:認識不同藝術創作
(5)請整理以下數值:
字體設定(font-family) :微軟正黑體
標題級數、文章標題級數、內文級數(font-size) 12px(單位px)
區塊內與區塊間的距離(padding)(margin)20px(單位px)
網站寬度(width)auto(單位px)
(6)製作心得:剛開始有點複雜,但還蠻好玩的
學號 1025445113

(1)作業網址:http://mepopedia.com/~web103-2b/midterm/midterm-1025445026
(2)網站主題:Hippo Hippo
(3)導覽列:河馬近親 河馬照片 河馬分布 河馬習性 河馬影片連結
(2)對象 :任何對荷馬有興趣的人
(3)色彩計畫: 河馬類似配色
(4)風格設定、網頁看點、預期成效:簡潔,河馬色
(5)製作心得:還是很多沒有做的完全的地方,因為自己還不是很熟悉,有些地方會跑掉橋很久還用不回來,希望以後可以進步,也可以設計出更有感覺的網頁。

學號 1025445026

1025445077儲徳君

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw-1025445077-02/
(2)網站主題/網站名稱: snoopy
(3)分類項目: 首頁 關於史努比 史努比的朋友 史努比的產品 相關影片
(4)對象: 喜歡史努比的人
(5)色彩計畫: 紫色
(6)風格設定、網頁看點、預期成效: 了解史努比
(7)請整理以下數值:
字體設定(font-family) 14
標題級數、文章標題級數、內文級數(font-size)(單位px) 還沒確認
區塊內與區塊間的距離(padding)(margin)(單位px) 還沒確認
網站寬度(width)(單位px) 還沒好
(8)製作心得: 很有成就感

(1)作業網址:http://mepopedia.com/~web103-2b/midterm/midterm-1025445089/
(2)網站主題:FABITORIA (2)對象:一般大眾
(3)色彩計畫:白 灰 膚色
(4)風格設定、網頁看點、預期成效:時尚品牌成列
(5)請整理以下數值:
字體設定(font-family) :微軟正黑體
標題級數、文章標題級數、內文級數(font-size) 12px(單位px)
區塊內與區塊間的距離(padding)(margin)20px(單位px)
網站寬度(width)auto(單位px)
(6)製作心得:剛開始有點複雜,但還蠻好玩的
學號 1025445089

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445200/
(2)網站主題/網站名稱: GODIVA

(3)分類項目: GODIVA 家族GODIVA 傳奇GODIVA 品質承諾GODIVA 全球專營店GODIVA 巧克力
(4)對象: 顧客
(5)色彩計畫: 黃/咖啡
(6)風格設定、網頁看點、預期成效: 簡約風
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得: 我愛吃巧克力

(1)作業網址: http://mepopedia.com/~web103-2b/hw02/hw02-1025445005
(2)網站主題:辛普森家庭
(3)對象:喜歡卡通的人
(4)色彩計畫:黃色
(5)風格設定、網頁看點、預期成效: 簡潔、一目了然、讓大眾輕鬆上手
(6)請整理以下數值:
字體設定(font-family) Arial, Helvetica, sans-serif、"微軟正黑體",sans-serif、Tahoma, Geneva, sans-serif、
標題級數、文章標題級數、內文級數(font-size)(單位px) 24px、16px、12px
區塊內與區塊間的距離(padding)(margin)(單位px) 10px、10px
網站寬度(width)(單位px) 800px
(7)製作心得:
目前蠻簡單的

Attachments:
開啟 | 下載 - index.html (2.8 KB)
開啟 | 下載 - style.css (4.4 KB)
開啟 | 下載 - navi.png (3.2 KB)