[作業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.將ＨＴＭＬ與ＣＳＳ語法分別貼上後，修改ＨＴＭＬ與ＣＳＳ語法。
6.將資料夾命名為 hw02-學號，以ＦＴＰ上傳至hw02資料夾
作業網址為http://mepopedia.com/~css104-2c/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-2c/hw02/hw02-1035445102
(2)網站主題/網站名稱： kanahei 插畫家介紹
(3)分類項目: 作者介紹/相關圖書/周邊商品/貼圖
(4)對象： 所有人
(5)色彩計畫： 溫暖治癒的淡橘色系
(6)風格設定、網頁看點、預期成效： 治癒可愛的風格；網頁看點，介紹大家常用的貼圖作家，除了貼圖以外的作品；預期可以帶給大家不一樣的感官
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)



(8)製作心得： 很療癒~上次講完後就做得比較順利了!

學號 1035445102



(編輯記錄)

(1)作業網址： http://mepopedia.com/~css104-2c/hw02/hw02-1035445078
(2)網站主題/網站名稱： 卡通頻道
(3)分類項目: 卡通動畫 節目
(4)對象： 人類們
(5)色彩計畫： 酷
(6)風格設定：酷
　網頁看點：酷
　預期成效： 酷
(7)請整理以下數值：
　字體設定(font-family) ： "微軟正黑體", Sylfaen
　標題級數：24px
　文章標題級數：14px
　內文級數(font-size)(單位px)：12px

(8)製作心得： 酷很難

學號 1035445078



(編輯記錄)

(1)作業網址： http://mepopedia.com/~css104-2c/hw02/hw02-1035445111
(2)網站主題/網站名稱：宮崎駿
(3)分類項目: 首頁 作者簡介 劇情介紹 影片分享 相關連結
(4)對象： 對於宮崎駿感興趣的人
(5)色彩計畫： 綠色
(6)風格設定、網頁看點、預期成效：輕鬆純真
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px) 12~16

(8)製作心得： 不難，但是做完很有成就感

(1)作業網址： http://mepopedia.com/~css104-2c/hw02/hw02-1035445207
(2)網站主題/網站名稱： Ladurée馬卡龍
(3)分類項目: index about flavor video shop
(4)對象： 少女
(5)色彩計畫： 淺灰x桃粉
(6)風格設定、網頁看點、預期成效： 走一個粉嫩路線
(7)請整理以下數值：
字體設定(font-family) - 微軟正黑體
標題級數 - 32
文章標題級數 - 14
內文級數 - 10 (單位px)
(8)製作心得： 太累了我要大睡三天。

學號 1035445207



(編輯記錄)

(1)作業網址： http://mepopedia.com/~css104-2c/hw02/hw02-1025445189
(2)網站主題/網站名稱： 崖上的波妞
(3)分類項目: 卡通動畫/電影
(4)對象： 天真的孩童
(5)色彩計畫： 波妞的顏色+底是海的顏色
(6)風格設定：希望以波妞的整體及動畫風格
　網頁看點：結合「崖上的波妞」大致的資料
　預期成效：
(7)請整理以下數值：
　字體設定(font-family) ： "微軟正黑體", Sylfaen
　標題級數：24px
　文章標題級數：14px
　內文級數(font-size)(單位px)：12px

(8)製作心得： 底圖及配色是本次最難的

學號 1025445189

(1)作業網址： http://mepopedia.com/~css104-2c/hw02/hw02-1035445147
(2)網站主題/網站名稱： 無印良品
(3)分類項目: 品牌
(4)對象： 消費者
(5)色彩計畫： 舒服放鬆自然
(6)風格設定：淡色
　
(7)請整理以下數值：
　字體設定(font-family) ： "微軟正黑體", Sylfaen
　標題級數：24px
　文章標題級數：14px
　內文級數(font-size)(單位px)：12px

(8)製作心得： 還行



(編輯記錄)

(1)作業網址：http://mepopedia.com/~css104-2c/hw02/hw02-1035445129

(2)網站名稱：凱斯‧哈林

(3)分類項目：首頁 生平介紹 作品介紹 展覽分享 外部連結

(4)對象：喜歡普普風格與藝術的人

(5)色彩計畫：用紅、黃、藍、黑、白

(6)風格設定：模仿凱斯哈林配色及手繪風格 網頁看點：首頁有許多最新公告

(7)請整理以下數值(字體設定font-family) 標題24級數、文章標題14級數、內文10級數

(8)製作心得：這學期的版面跟以往不同豐富及多元，讓版面不在單調，更多的互動性。

學號 1035445129

(1)作業網址：http://mepopedia.com/~css104-2c/hw02/hw02-1035445006

(2)網站名稱：阿爾卑斯山的少女

(3)分類項目：故事概述 主要人物 主題歌曲 催淚片段 真人翻拍

(4)對象：喜歡阿爾卑斯山的少女的美少女們

(5)色彩計畫：用粉色及咖啡色系列

(6)風格設定：以主角柔和的個性為配色主軸 網頁看點：故事概述有許多精彩集數蒐集

(7)請整理以下數值(字體設定font-family) 標題24級數、文章標題20級數、內文13級數

(8)製作心得：許多是自己設計的元素，更要求原創性，配色配的很開心，學到很多。

學號 1035445006



(編輯記錄)

(1)作業網址：http://mepopedia.com/~css104-2c/hw02/hw02-1035445216

(2)網站名稱：春田菜菜

(3)分類項目：作者 作品 精圖分享 好友 外部連結

(4)對象：喜歡少女漫畫的女生

(5)色彩計畫：藍藍粉淡粉淡 輕柔的感覺

(6)風格設定：輕柔為主 網頁看點：回憶國高中時期的漫畫

(7)請整理以下數值(字體設定font-family) 標題24級數、文章標題20級數、內文13級數

(8)製作心得：覺得比之前的都困難，淡簡單的稍作修改還是可以的!!

學號 1035445216

(1)作業網址： http://mepopedia.com/~css104-2c/hw02/hw02-1035445153
(2)網站主題/網站名稱： 乳酪 × 起士
(3)分類項目: 乳酪 × 首頁、乳酪 × 起士、乳酪 × 種類、乳酪 × 食譜、更多 × 乳酪
(4)對象： 喜歡乳酪的人
(5)色彩計畫： 咖啡色和黃色
(6)風格設定、網頁看點、預期成效：背景為木頭質感，像是裝乳酪的木桶
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px) 12~16

(8)製作心得： 不難，但是做完很有成就感

學號 1035445153



(編輯記錄)

(1)作業網址：http://mepopedia.com/~css104-2c/hw02/hw02-1035445033

(2)網站名稱：童年回憶-龍貓

(3)分類項目：首頁 作者簡介 劇情介紹 影片分享 相關連結

(4)對象：宮崎駿迷

(5)色彩計畫：綠色系

(6)風格設定：以樹葉顏色去配色 網頁看點：詳細的介紹龍貓這部動畫

(7)請整理以下數值(字體設定font-family) 標題24級數、文章標題20級數、內文13級數

(8)製作心得：有比較多自己的風格了，背景圖案也不是單調的圖片或是顏色而已

學號 1035445033

(1)作業網址：http://mepopedia.com/~css104-2c/hw02/hw02-1035445051

(2)網站名稱：小王子

(3)分類項目：首頁、 故事介紹、 圖片欣賞、經典名言、電影預告

(4)對象：好看的故事和電影

(5)色彩計畫：會以土色為色調是因為，作者在沙漠遇到小王子

(6)風格設定：以清淡，簡潔為主

(7)請整理以下數值(字體設定font-family) 標題24px、文章標題20px、內文13px

(8)製作心得：覺得配色很麻煩

學號 1035445051

(1)作業網址： http://mepopedia.com/~css104-2c/hw02/hw02-1035445054
(2)網站主題/網站名稱： Goose House
(3)分類項目: 音樂/樂團/歌手
(4)對象： 喜歡Goose House或喜歡日本樂團的人
(5)色彩計畫： 顏色多樣化
(6)風格設定：與團員的衣服色調相呼籲
　網頁看點：樂團Goose House的消息
　預期成效：
(7)請整理以下數值：
　字體設定(font-family) ： Arial, "微軟正黑體"
　標題級數：24px
　文章標題級數：18px
　內文級數(font-size)(單位px)：12px

(8)製作心得： 因為設定都做好了，所以配色變成一件很難的事，猶豫很久才決定要用什麼顏色

學號 1035445054

(1)作業網址：http://mepopedia.com/~css104-2c/hw02/hw02-1035445048

(2)網站名稱：熊本熊Kumamon

(3)分類項目：首頁 作者簡介 活動時間 官方網站 外部連結

(4)對象：熊本熊

(5)色彩計畫：以熊本熊身上的顏色去做配色及搭配，黑/白/紅

(6)風格設定：可愛/活潑

(7)請整理以下數值(字體設定font-family) 標題24px、文章標題20px、內文13px

(8)製作心得：覺得在色彩搭配上，很有趣

學號 1035445048