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

Advanced

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

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

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


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

1. 作業目的

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

[hr]

2. 作業說明

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

[hr]

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/~css104-2b/hw02/hw02-1035445XXX 。

並請回覆:

(1)作業網址:
(2)網站主題/網站名稱:
(3)分類項目:
(4)對象:
(5)色彩計畫:
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)

(8)製作心得:

學號

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

4. 學長姐範例


http://mepopedia.com/~web103-2a/hw02/hw02-1025445205/
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/

(1)作業網址 http://mepopedia.com/~css104-2b/hw02/hw02-1035445113
(2)網站主題/網站名稱: Ro-Kyu-Bu
(3)分類項目: 作業
(4)對象: 評分表
(5)色彩計畫: 粉色
(6)風格設定、網頁看點、預期成效: 介紹,可愛,無
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體 12~25pt不等
標題級數、文章標題級數、內文級數(font-size)(單位px) →請按右鍵css內容
(8)製作心得: 解讀所有CSS花了不少時間/hw0211335445666



Edited 3 time(s). Last edit at 03/08/2016 03:30PM by 1035445113.
(編輯記錄)

1035445209

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445209
(2)網站主題/網站名稱:義大利美食文化之旅
(3)分類項目: 義大利之旅.義大利美食文化.義大利美食.義大利特色美食.義大利美食相關連結
(4)對象:愛好義大利美食文化
(5)色彩計畫: 橘褐色
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)

(8)製作心得:還在設計設定階段



Edited 1 time(s). Last edit at 03/08/2016 03:26PM by fishtime.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445131/
(2)網站主題/網站名稱: 咖啡屋
(3)分類項目: 首頁,歷史,介紹,分享,連結
(4)對象: 喝咖啡的人
(5)色彩計畫: 以成熟溫和為主
(6)風格設定、網頁看點、預期成效: 以咖啡色為主
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體
標題級數:35px
文章標題級數:20px
內文級數(font-size):14px

(8)製作心得: 感覺比較有趣,網頁看起來也比較多內容

1035445131



Edited 2 time(s). Last edit at 03/08/2016 03:37PM by 吳寶蓉.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445044
(2)網站主題/網站名稱: 臘腸狗種類介紹
(3)分類項目: 首頁、臘腸狗介紹、照顧臘腸狗、訓練臘腸狗、臘腸狗連結
(4)對象: 喜愛臘腸狗的人
(5)色彩計畫: 以咖啡色、黃色系
(6)風格設定、網頁看點、預期成效: 以咖啡色系為主
(7)請整理以下數值:
字體設定(font-family):微軟正黑體


(8)製作心得:了解喜愛臘腸狗,我家就有一隻,非常可愛

學號 1035445044

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445002
(2)網站主題/網站名稱:柴犬
(3)分類項目: 首頁、歷史、特徵及性格、柴犬種類、相關作品
(4)對象:各個年齡層
(5)色彩計畫:以柴犬身上的顏色去配置
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px) :標題20px 文章:12 內文:12
(8)製作心得:語法多到讓我眼花撩亂



Edited 3 time(s). Last edit at 03/11/2016 02:40PM by 1034445002.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1035445158
(2)網站主題/網站名稱: 網站名稱叫作花花世界,介紹各種花的知識。
(3)分類項目:首頁(index.html)、賞花花季(youth.html)、花的花語(florid.html)、插花美學(art.html)、送花禁忌(give.html)
(4)對象:不論各行各業或各個年齡層,只要喜歡花或對花有興趣的人為主要對象。
(5)色彩計畫:依照花的粉色系為主要基底色調,用粉色系做層次的變化。
(6)風格設定、網頁看點、預期成效:風格設定偏向柔和的粉色系,像是粉嫩的花綻放,材質依不同的肌理拼貼,營造出網頁的層次感,網頁的內容有關於各種在日常生活中都用的到的有趣花知識,是這個網頁的看點,預期成效希望網頁能營造出花朵甜蜜綻放的感覺,讓瀏覽者像是置身在花園中,而在網頁內容裡又能學到知識。
(7)請整理以下數值:
字體設定(font-family) :微軟正黑、sans-serif
標題級數: 24
文章標題級數: 20
內文級數(font-size):12
(單位px)
(8)製作心得:這次的網頁設計是做不同的版型,語法變得更多了,有很多按鈕與div的設定,但只要看的懂語法之間關聯性的設定,就不會這麼複雜了。

學號:1035445158



Edited 1 time(s). Last edit at 03/08/2016 04:05PM by 1035445158.
(編輯記錄)

1035445218 柯惠文

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445218
(2)網站主題/網站名稱: 海底總動員2
(3)分類項目: 首頁
(4)對象: 青少年~成年
(5)色彩計畫: 以沉穩的深藍色表現大海,加上白色搭配增加活潑感。
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)  主要為黑體
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:26、文章標題:14、內文:12
(8)製作心得: 想要有設計感,但目前看起來背景有點花。

1035445104 李恩慈

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445104
(2)網站主題/網站名稱: 走進文化藝術之都
(3)分類項目: 首頁
(4)對象:對了解文化有興趣的人
(5)色彩計畫: 以橘、酒紅色系
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)  主要為sans-serif
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:25、文章標題:20、內文:12
(8)製作心得: 想要有神祕感的配色,但俄羅斯傳統圖驣用在網頁設計上有點花。

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445152
(2)網站主題/網站名稱: 法國傳統麵包
(3)分類項目: 首頁 麵包種類 分辨麵包 麵包小常識 相關連結
(4)對象:對傳統法國麵包有興趣的人
(5)色彩計畫: 麵包烤出來的顏色(金黃色?)
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)  主要為sans-serif
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:28、文章標題:20、內文:12
(8)製作心得: 重複的地方接的不是很好。
希望是在介紹麵包的感覺有傳達出來。



Edited 1 time(s). Last edit at 03/10/2016 08:15PM by 1035445152.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1035445134/
(2)網站主題/網站名稱: cmeocollective
(3)分類項目:NEW(index.html)、SHOP(about.html)、BLOG(profile.html)、ABOUT(works.html)、CONTACT(link.html)
(4)對象:喜愛小眾設計師品牌服飾的人群
(5)色彩計畫:從圖片到背景做出相同色調間的變化
(6)風格設定、網頁看點、預期成效:想走簡約大方的風格,作為宣傳服飾品牌
(7)請整理以下數值:
字體設定(font-family) :微軟正黑、sans-serif
標題級數: 24
文章標題級數: 20
內文級數(font-size):12
(單位px)
(8)製作心得:這次網頁新增了許多跟以往不同的語法,希望能扎實掌握css語法運用的基本功

1035445134 廖瑋琦

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1025445234/
(2)網站主題/網站名稱: QOO酷兒
(3)分類項目:
(4)對象:年輕人.小朋友
(5)色彩計畫:主要運用藍色.綠色.橘色
(6)風格設定、網頁看點、預期成效:運用藍色.綠色.橘色給人活潑.溫暖
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)

(8)製作心得: 大多數時間在設計配色,總覺怎樣都配不好。

學號 1025445234

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445200
(2)網站主題/網站名稱:手帳DIARY
(3)分類項目:
(4)對象:只要是對手帳有興趣的人
(5)色彩計畫:藍色
(6)風格設定、網頁看點、預期成效:以沉穩的藍色系為主
(7)請整理以下數值:
字體設定(font-family)  微軟正黑體
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:25、文章標題:20、內文:12
(8)製作心得: 主要還是在配色這方面,花的時間比較久

(1)作業網址: [url=http://mepopedia.com/~css104-2b/hw02/hw02-1035445176/]http://mepopedia.com/~css104-2b/hw02/hw02-1035445176/[/url]
(2)網站主題/網站名稱: 風起
(3)分類項目: 風起 起風了 創作 劇照 影片
(4)對象: 喜歡宮崎駿的大家
(5)色彩計畫: 以藍色調為主
(6)風格設定、網頁看點、預期成效: 全都藍藍的~~~
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體
標題級數:24px
文章標題級數:36px
內文級數(font-size):14px

(8)製作心得: 看起來比以前做的網站漂亮~

1035445176

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445041
(2)網站主題/網站名稱:樂團
(3)分類項目: 首頁 音樂 影片 連結
(4)對象:音樂人
(5)色彩計畫: 黑白
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)  主要為sans-serif
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:28、文章標題:20、內文:12
(8)製作心得: 不錯

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445041
(2)網站主題/網站名稱:樂團
(3)分類項目: 首頁 音樂 影片 連結
(4)對象:音樂人
(5)色彩計畫: 黑白
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:28、文章標題:20、內文:12
(8)製作心得: 不錯

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445074
(2)網站主題/網站名稱:抽象派 (之前主題式咖啡 後來改了)
(3)分類項目:
(4)對象:喜愛抽象派的
(5)色彩計畫:深藍色
(6)風格設定、網頁看點、預期成效:以藍色系為主
(7)請整理以下數值:
微軟正黑體
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:24、文章標題:20、內文:12
(8)製作心得: 調整 CSS用好久 用到 好煩



Edited 2 time(s). Last edit at 03/28/2016 07:43PM by 1035445074.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445206
(2)網站主題/網站名稱:番茄
(3)分類項目: 首頁,歷史,品種,食用,料理
(4)對象: 喜歡番茄的人
(5)色彩計畫: 以番茄為主色
(6)風格設定、簡潔、明瞭
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體

(8)製作心得:因為是自己喜歡的水果,所以是以輕鬆的心情來製作

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1035445107
(2)網站主題/網站名稱: 好萊塢
(3)分類項目: 好萊塢/電影/加州/洛杉磯/奧斯卡
(4)對象: 愛好美國電影文化
(5)色彩計畫: 黃橙色系
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)

(8)製作心得: 覺得進展還算順利,目前還會再修改。

1035445107

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445011
(2)網站主題/網站名稱:貓的報恩
(3)分類項目:
(4)對象:喜歡貓的
(5)色彩計畫:藍色
(6)風格設定:以藍色和白色簡單的色,再加上貓的剪影
(7)請整理以下數值:
字體設定:微軟正黑體
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:24、文章標題:20、內文:14
(8)製作心得: 在背景那邊花的時間比較久,也要想要怎麼用。做完心情好

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445098
(2)網站主題/網站名稱:宮崎駿與他的動畫
(3)分類項目: 介紹頁 動畫簡介 吉普立工作室 手稿 網站連結
(4)對象:對宮崎駿的畫風和動畫有興趣的大人及小孩
(5)色彩計畫:想要表現出一點夢幻的顏色,但是目前還沒有感覺出來
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)  主要為sans-serif
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:25、文章標題:15、內文:12
(8)製作心得:目前看了之後覺得整體來說還是很雜,找不到重點,之後會慢慢修改。

(1)作業網址 http://mepopedia.com/~css104-2b/hw02/hw02-1035445026
(2)網站主題/網站名稱:千鳥紋Chidori Pattern
(3)分類項目:首頁 關於 淵源 欣賞 連結
(4)對象:喜愛格子紋的女生
(5)色彩計畫:灰階
(6)風格設定、網頁看點、預期成效:風格設定淡雅
(7)請整理以下數值:
字體設定(font-family) :
微軟正黑體 12~25pt不等
標題級數:20px 內文12~14px
(8)製作心得:看了很久的語法

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445194/
(2)網站主題/網站名稱: Within Temptation
(3)分類項目: 首頁 成員介紹 音樂專輯 樂隊歷史 外部連結
(4)對象: 一般大眾
(5)色彩計畫: 暖色系,以暗紅色為主,黑灰為輔
(6)風格設定、網頁看點、預期成效: 低調華麗的感覺,哥特風格
(7)請整理以下數值:
字體設定(font-family)
標題級數(24)、文章標題級數(20)、內文級數(12)


(8)製作心得: 想風格跟配色,繪製背景,花了比較多時間,

1035445194



Edited 1 time(s). Last edit at 03/16/2016 11:00PM by 1035445194.
(編輯記錄)

1035445140 饒瑾瀓

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445140
(2)網站主題/網站名稱: 熊本熊
(3)分類項目: 首頁
(4)對象:對熊本有興趣的人
(5)色彩計畫: 以黑色白色為主
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)  主要為sans-serif
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:25、文章標題:20、內文:12
(8)製作心得:不太會弄背景圖 總是一半一半的

1035445086

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445086
(2)網站主題/網站名稱:plain-me 改變你的穿搭品味
(3)分類項目: clothing. new in. 專欄好文.shoes.accessories
(4)對象:對於服裝搭配有興趣者
(5)色彩計畫: 以較為典雅的色系來搭配
(6)風格設定: 文青派
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)

(8)製作心得:還有很多分頁未完成 尚需再調整內容

1035445149 詹前緯

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445149
(2)網站主題/網站名稱:ONLY NY
(3)分類項目: 首頁
(4)對象: 年輕人
(5)色彩計畫: 簡單的色彩,搭配服飾。
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)  主要為黑體
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:26、文章標題:14、內文:12
(8)製作心得: 我覺得這次做完,能以簡單的風格表現。

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1035445032
(2)網站主題 / 網站名稱:Nicolas Monterrat 的介紹 / Nicolas Monterrat
(3)分類項目:Home(index.html)、About(about.html)、Works(works.html)、Film(film.html)、Links(link.html)
(4)對象:想認識Nicolas Monterrat對超現實作品有興趣的。
(5)色彩計畫:低調的色系符合Monterrat的作品。
(6)風格設定、網頁看點、預期成效:風格是以復古低調的色系及紋理去平衡主角的作品,網頁看點是法國攝影師/動畫師Nicolas Monterrat的搞怪GIF,我預期會有有趣的動畫成效,讓人看了會覺得很好玩。
(7)請整理以下數值:
字體設定(font-family) :微軟正黑、sans-serif
標題級數: 24
文章標題級數: 20
內文級數(font-size):12
(單位px)
(8)製作心得:這次的跟以往的差別比較大,除了語法變多,還有增加了設定跟背景的版型,我覺得難度又增加了,要多加油才行。

1035445032

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445170
(2)網站主題/網站名稱:楓之谷
(3)分類項目: 遊戲 童年 回憶
(4)對象:曾經玩過楓之谷的朋友
(5)色彩計畫:自然的顏色
(6)風格設定:大部分是以藍色為主,但還是會加一些其他顏色做細節
(7)請整理以下數值:
字體設定:微軟正黑體
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:24、文章標題:20、內文:12
(8)製作心得: 背景用超久的~~~~~~還好終於最後用好了YA

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445053
(2)網站主題/網站名稱:原住民文化
(3)分類項目: 原形畢露.原封不动.原頭活水.原源不絕
(4)對象:有興趣了解原住民文化的人
(5)色彩計畫: 用繽紛的顏色去做配色
(6)風格設定: 用圖騰去做設定
(7)請整理以下數值:
字體設定(font-family)
(7)請整理以下數值:
字體設定(font-family) :微軟正黑、sans-serif
標題級數: 24
文章標題級數: 20
內文級數(font-size):12

(8)製作心得:製作了一個獨一無二的網頁覺得比之前更進一步了。



Edited 1 time(s). Last edit at 03/15/2016 02:45AM by 1035445053.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445155
(2)網站主題/網站名稱:皮克斯
(3)分類項目: 首頁 關於製作 幕後人員 電影作品 外部連結
(4)對象:對皮克斯有興趣的人
(5)色彩計畫: 偏藍
(6)風格設定、網頁看點、預期成效:偏向藍色系
(7)請整理以下數值:
字體設定(font-family)  主要為sans-serif
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:28、文章標題:20、內文:12
(8)製作心得: 還可以

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445059
(2)網站主題/網站名稱:探險活寶
(3)分類項目: 人物介紹、故事、分級
(4)對象:大眾
(5)色彩計畫: 藍色系
(6)風格設定、網頁看點、預期成效: 帥氣可愛
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)

(8)製作心得:好累喔

1035445137 周李銘
(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445137
(2)網站主題/網站名稱: VETEMENTS
(3)分類項目: 首頁
(4)對象: 青少年~成年
(5)色彩計畫: 用黑灰白來表現
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)  主要為黑體
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:26、文章標題:14、內文:12
(8)製作心得: 想要有設計感,但是背景有點單調

1035445191 翁瑱真

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445191
(2)網站主題/網站名稱: 遇見幾米
(3)分類項目: 首頁、關於幾米、出版作品、展覽裝置、外部連結
(4)對象:喜歡看繪本和溫馨風插畫的人
(5)色彩計畫:想盡量用白和藍色傳達簡單的感覺
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family) 微軟正黑體
標題級數 28

(8)製作心得:
覺得比上次作業複雜和困難許多,很多字選色都要一層一層找,眼睛快花了,如果想把間距調大,版面就會跑掉.....真的是有些難度,很有挫折感

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445065
(2)網站主題/網站名稱:-------
(3)分類項目: 首頁/故事/腳色/起因/穿插
(4)對象:喜歡畫短篇故事的人
(5)色彩計畫: 紫色調居多/黑色
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定
標題級數、文章標題級數、內文級數(font-size)(單位px)

(8)製作心得:顏色還要調整跟預期的顏色有點差距


1035445065

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1035445071
(2)網站主題/網站名稱:少年同盟
(3)分類項目: 首頁、人物介紹、劇情大綱、圖片分享、推薦影音
(4)對象:喜歡校園搞笑漫畫的人
(5)色彩計畫:藍綠灰
(6)風格設定、網頁看點、預期成效:清新、水彩渲染
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
32、20、12
(8)製作心得:主題、風格設定與色彩搭配最需花時間思考

學號:1035445071

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1035461133
(2)網站主題/網站名稱: 愛吃鬼巧達
(3)分類項目: 首頁 故事簡介 人物介紹 製作相關 外部連結
(4)對象:喜歡這部可通的人
(5)色彩計畫:以巧達的顏色為主
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family) : 微軟正黑體, Arial
標題級數 : 24
文章標題級數 : 20
內文級數(font-size) : 12
(單位px)

(8)製作心得:

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1035445068
(2)網站主題/網站名稱: 企鵝家族
(3)分類項目: 首頁 故事簡介 腳色介紹 故事照片 相關影片
(4)對象:喜歡這個主題的人
(5)色彩計畫:以主題為配色
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family) : 微軟正黑體, Arial
標題級數 : 24
文章標題級數 : 20
內文級數(font-size) : 12
(單位px)

(8)製作心得: 覺得很麻煩又花時間,但很有成就感。

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1025445186
(2)網站主題/網站名稱:空之境界
(3)分類項目: 首頁,劇情大鋼,人物介紹,影片分享,官方網站
(4)對象: 動漫迷
(5)色彩計畫: 以深藍色為主
(6)風格設定、簡潔、明瞭
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體

(8)製作心得:網頁配置與編排方式有待琢磨

視傳3C 1025445186 彭韋豪

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1025445032
(2)網站主題/網站名稱:大型重機
(3)分類項目: 4種不同的重機交紹相關連結
(4)對象:喜歡重機的人
(5)色彩計畫: 金屬感
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)

(8)製作心得:還在設計設定階段

1035445014 林約瑟

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445014
(2)網站主題/網站名稱: Duga&Hook 插畫家
(3)分類項目: 首頁
(4)對象: 老少咸宜
(5)色彩計畫: 亮藍色與橘色的結合,有種8位元的氣氛
(6)風格設定、網頁看點、預期成效:
風格八位元
(7)請整理以下數值:
字體設定(font-family)  主要為黑體
標題級數、文章標題級數、內文級數(font-size)(單位px)
標題:26、文章標題:14、內文:12
(8)製作心得: 配合圖片做出的效果

(1)作業網址 http://mepopedia.com/~css104-2b/hw02/hw02-1035445029
(2)網站主題/網站名稱: フレデリック frederic
(3)分類項目: HOME/LIVE/BIO/VIDEO/GOODS
(4)對象: 喜歡他們的人
(5)色彩計畫: 藍藍綠綠灰灰
(6)風格設定、網頁看點、預期成效: 介紹他們
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體
(8)製作心得: 好像有點理解這是什麼了

(1)作業網址 http://mepopedia.com/~css104-2b/hw02/hw02-1035445125
(2)網站主題/網站名稱:蛋黃哥
(3)分類項目: 作業
(4)對象: 喜愛蛋黃哥的粉絲
(5)色彩計畫:黃色
(6)風格設定、網頁看點、預期成效;可愛、介紹
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體 12~25pt
標題級數、文章標題級數、內文級數(font-size)(單位px) →請按右鍵css內容
(8)製作心得: 還在學習各種排版方式

(1)作業網址 http://mepopedia.com/~css104-2b/hw02/hw02-1035445125
(2)網站主題/網站名稱:蛋黃哥
(3)分類項目: 作業
(4)對象: 喜愛蛋黃哥的粉絲
(5)色彩計畫:黃色
(6)風格設定、網頁看點、預期成效;可愛、介紹
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體 12~25pt
(8)製作心得: 還在學習各種排版方式

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445047
(2)網站主題/網站名稱: 宮崎駿介紹
(3)分類項目: 首頁、作品介紹介紹、相關作品、產品分享、影片連結
(4)對象: 一般民眾
(5)色彩計畫: 以水藍色跟深藍加白色
(6)風格設定、網頁看點、預期成效: 以藍色系為主
(7)請整理以下數值:
字體設定(font-family):微軟正黑體


(8)製作心得:喜歡宮崎駿那種充滿想像力的劇情跟那簡單線條的插畫

學號 1035445047

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1035445185
(2)網站主題/網站名稱:日本の點心
(3)分類項目:首頁、紅豆銅鑼燒、抹茶紅豆白玉、鯛魚燒、水信玄餅
(4)對象: 喜愛日式甜點的人
(5)色彩計畫:以柔和的綠色為主
(6)風格設定:日式甜點就會讓我想到抹茶,所以網頁的風格大多使用柔和的綠色調來呈現,希望呈現清新風格,又不會太單調
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體 14pt
(8)製作心得: 雖然網頁設計越來越難,但是可以美化自己的網頁,在其中也學習到很多東西,希望以後能學以致用


1035445185



Edited 1 time(s). Last edit at 04/13/2016 05:52PM by 1035445185 徐于庭.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css104-2b/midterm/midterm-1035445224/
(2)網站主題/網站名稱:無印良品
(3)分類項目: 首頁、衣料品 家具 生活雜物 食品
(4)對象: 一般民眾 以及 無印良品愛用者
(5)色彩計畫: 以咖啡色 米色 灰色 白色
(6)風格設定:清新讓人看起來舒服且一目了然
(7)請整理以下數值:
字體設定(font-family):微軟正黑體
(8)製作心得:製作的過程中 真的超難 但做完自己也蠻喜歡的。

學號 1035445224



Edited 1 time(s). Last edit at 04/13/2016 05:55PM by 1035445224.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445023/
(2)網站主題/網站名稱: 米老鼠Mickey Mouse
(3)分類項目:首頁、關於米老鼠、參與劇集、影片分享、外部連結
(4)對象:各種年齡層
(5)色彩計畫:主要橘紅、黃色、黑色
(6)風格設定、網頁看點、預期成效: 拿米老鼠身上的顏色來進行配色
(7)請整理以下數值:
字體設定(font-family) 微軟正黑體
標題級數:30px
文章標題級數:20px
內文級數(font-size):14px
(8)製作心得:
背景弄了好幾次,總算弄好了

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1035445080
(2)網站主題/網站名稱: 哈士奇
(3)分類項目:作業
(4)對象:喜歡哈士奇的人
(5)色彩計畫: 黑色與藍色
(6)風格設定、網頁看點、預期成效: 介紹、知識、不知
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)

(8)製作心得:很累~

學號 1035445080

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445005/
(2)網站主題/網站名稱:Christophe Lemaire
(3)分類項目: TOP / PROFILE /Christophe Lemaire & Sarah Lin-Tran / DISCOGRAPHY / FILM
(4)對象:喜歡此設計品牌之人
(5)色彩計畫: 白/灰
(6)風格設定、網頁看點、預期成效:還行
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)

(8)製作心得:

學號 1035445005

(1)作業網址:[url=http://mepopedia.com/~css104-2b/hw02/hw02-1035445017/index.html]http://mepopedia.com/~css104-2b/hw02/hw02-1035445017/index.html[/url]
(2)網站主題/網站名稱:霍爾的移動城堡
(3)分類項目: 首頁 人物介紹 故事介紹 製作過程 影片分享
(4)對象: 所有人
(5)色彩計畫: 藍色 白色
(6)風格設定、網頁看點、預期成效: 清爽簡潔
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體 12~25pt
標題級數、文章標題級數、內文級數(font-size)(單位px) →請按右鍵css內容
(8)製作心得: 很累~

(1)作業網址 http://mepopedia.com/~css104-2b/hw02/hw02-1035445222
(2)網站主題/網站名稱: 防彈少年團
(3)分類項目: 首頁 成團經歷 成員介紹 影音分享 外部連結
(4)對象: 喜歡此團體的人
(5)色彩計畫: 藍灰色
(6)風格設定、網頁看點、預期成效: 介紹團體
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體
(8)製作心得: 製作方法感覺更加快速



Edited 2 time(s). Last edit at 04/18/2016 10:46PM by yung yi.
(編輯記錄)

(1)作業網址 http://mepopedia.com/~css104-2b/hw02/hw02-1035445119
(2)網站主題/網站名稱: amazarashi
(3)分類項目: 首頁 成團經歷 成員介紹 影音分享 外部連結
(4)對象: 喜歡這團體 或是不了解這個團體的人
(5)色彩計畫: 濁色調
(6)風格設定、網頁看點、 預期成效: 介紹團體
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體
(8)製作心得: 覺得漸漸做出自己喜歡的感覺了

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1035445050/

(2)網站主題/網站名稱:台灣雷亞遊戲公司-手機/平板遊戲 DEEMO

(3)分類項目: 手機/平板/3C/劇情/插畫/音樂

(4)對象:小孩/青少年以上

(5)色彩計畫:配合主要登場角色以黑白色調為主

(6)風格設定、網頁看點、預期成效:ㄜ我都是照著挖ㄟ港賊走餒

(7)請整理以下數值:
字體設定(font-family) :使用 微軟正黑體.華康粗黑體.AR DARLING 14pt以上

(8)製作心得:這是一款我願意砸錢買正式版的手機遊戲,音樂很好聽,故事的劇情也很棒,
又是台灣的遊戲公司當然要支持一下啦~~~
語法用到我快要崩潰了,用盡我的生命在做作業,希望老師喜歡

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1025445118
(2)網站主題:mombrother
(3)導覽列選項:home shop about contact notice
(2)設計對象:一般大眾
(3)色彩計畫:灰色
(4)風格設定、預期成效:配色簡單清晰
(5)製作心得:很累
學號 1025445118

(1)作業網址: file:///C:/Users/User/Desktop/hw1035445182/index.html
(2)網站主題/網站名稱: VDL
(3)分類項目: ABOUT.PRODUCT.ARTIST.COLLECTION.VIDEO
(4)對象: 喜歡此韓國彩妝品牌的族群
(5)色彩計畫: 粉紅色為主 粉藍
(6)風格設定、網頁看點、預期成效: 粉嫩 柔和 利用今年最流行的粉紅和粉藍來呈現此彩妝品牌特色
(7)請整理以下數值:
字體設定(font-family)微軟正黑體
(8)製作心得: 老師你好 非常抱歉 因個人因素沒有準時上課及繳交作業 為來得及在周末前繳交期中作業 直接將整個網頁製作完畢並繳交到各個平時作業 希望老師能體諒並且給予評分機會 真的非常抱歉
視傳2B 1035445182

(1)作業網址:http://mepopedia.com/~css104-2b/hw02/hw02-1035445179
(2)網站主題:日本
(3)導覽列選項:首頁、歷史、特產、自然環境、連結
(2)設計對象:想去日本遊玩的人
(3)色彩計畫:粉色調
(4)風格設定、預期成效:粉嫩簡單
(5)製作心得:希望下次可以做的更好

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445056
(2)網站主題/網站名稱:FFO幻想神域
(3)分類項目: 遊戲特色、故事背景、職業介紹、源神介紹、外部連結
(4)對象:喜歡線上遊戲的玩家們
(5)色彩計畫: 清新的藍色
(6)風格設定、網頁看點、預期成效:
(7)請整理以下數值:
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)

(8)製作心得:弄好整體色彩花了很久的時間

(1)作業網址: http://mepopedia.com/~css104-2b/hw02/hw02-1035445077/
(2)網站主題/網站名稱: adidas
(3)分類項目: adidas/originals/Y-3/founder/link
(4)對象:熱衷adidas的青少年
(5)色彩計畫: 黑色,白色,灰色
(6)風格設定、網頁看點、預期成效:極簡的黑灰白風格
(7)請整理以下數值:
字體設定(font-family) :微軟正黑體
標題級數:40px
文章標題級數:18px
內文級數(font-size):14px

(8)製作心得: 了解更多


學號 1035445077