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

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

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

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/~web103-2a/hw02/hw02-1025445XXX 。

並請回覆：

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

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

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/



(編輯記錄)

(1)作業網址：



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web103-2a/hw02/hw02-1025445214/
(2)網站主題/網站名稱： 玩命關頭
(3)分類項目: 首頁-劇情簡介-人物介紹-車型-相關影集
(4)對象： 所有人
(5)色彩計畫： 黑色風格
(6)風格設定、網頁看點、預期成效： 劇情介紹 讓大家更想看這部影集
(7)製作心得：眼睛有點花,可是越做越熟練了 哈哈

1025445214

(1)作業網址：http://mepopedia.com/~web103-2a/midterm/midterm-1025445196/
(2)網站主題/網站名稱： GAP
(3)分類項目: 首頁 關於 商品 線上購物 各家門市
(4)對象：喜歡牛仔褲的人
(5)色彩計畫： 簡約
(6)風格設定、網頁看點、預期成效： 簡約 讓人看得懂
(7)製作心得：然花了很多時間研究，也不斷從做，但是做完很有成就感，自己也很喜歡。

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445055/
(2)網站主題/網站名稱： Katy Perry / Katy Perry My Hopes And Dreams
(3)導覽列：首頁、生平及成名之路、歷年專輯、暢銷歌曲、Katy Perry網站連結
(4)對象： 地球人+大護士+29 29 +小瑜
(5)色彩計畫： Katy最喜歡的紫色加上白色陪襯
(6)風格設定、網頁看點、預期成效： 簡約色塊風格、看Katy Perry、預期招攬更多Katy Cat
(7)請整理以下數值：
字體設定(font-family) 其實還沒決定
標題級數、文章標題級數、內文級數(font-size)(單位px) 其實還沒決定
區塊內與區塊間的距離(padding)(margin)(單位px) 其實還沒決定
網站寬度(width)(單位px) 依視窗大小而變
(8)製作心得： Katy Perry超棒棒

1025445055

(1)作業網址： [url=http://mepopedia.com/~web103-2a/hw02/hw02-1025445133]http://mepopedia.com/~web103-2a/hw02/hw02-1025445133[/url]
(2)網站主題/網站名稱： 魔法科高校的劣等生/魔法科高校的劣等生
(3)分類項目: 首頁、人物簡介、劇情介紹、影音欣賞、官網連結
(4)對象：喜愛帶有科幻風動畫的觀眾
(5)色彩計畫： 藍色科幻風
(6)風格設定、網頁看點、預期成效：科幻風、新世代魔法、讓更多人對此動畫感興趣
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) -[u]還沒訂好[/u]
(8)製作心得：背景圖是自己畫的，它們比看起來更花一點時間

1025445133

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445049/
(2)網站主題/網站名稱： Minnie Mouse's World/米妮老鼠
(3)分類項目:首頁-介紹米妮
(4)對象：愛好米妮者
(5)色彩計畫：紅色系為主
(6)風格設定、網頁看點、預期成效：點點風格、介紹米妮、可以讓米妮愛好者更有興趣
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得：雖然不太會但一步一步看著影片慢慢做還是做出來了，很開心頗有成就感呵呵

1025445049

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445064/
(2)網站主題/網站名稱： Five Nights at Freddy's
(3)分類項目: 首頁 、故事內容、角色介紹、遊戲攻略、相關影片
(4)對象： 喜好恐怖遊戲的玩家
(5)色彩計畫： 黑、灰、白
(6)風格設定、網頁看點、預期成效：黑暗、恐怖的感覺帶點雜雜的詭異氣氛
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px) ?
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) ?
(8)製作心得： 不知不覺就弄成這樣了 看久也不知道好不好~~至少上半部還可以看XD
學號 1025445064

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445124/
(2)網站主題/網站名稱： HELLO KITTY
(3)分類項目: KITTY，家人&朋友，桌布分享，LINE貼圖，APP介紹
(4)對象： 喜歡KITTY的人
(5)色彩計畫： 藍 透明風
(6)風格設定、網頁看點、預期成效： 可愛插畫，活潑，讓人看了心情很好
(7)請整理以下數值：
字體設定(font-family) 微軟正黑體
標題級數、文章標題級數、內文級數(font-size)(單位px) 標題14px 內文10px
區塊內與區塊間的距離(padding)(margin)(單位px) 還會再微調
網站寬度(width)(單位px)
(8)製作心得： 很有成就感
學號 1025445124

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445079/
(2)網站主題/網站名稱：HIKARI SHIMODA 下田ひかり
(3)分類項目: 首頁 、簡介、作者介紹、圖片、展覽分享
(4)對象：喜歡此畫風.此插畫家的人
(5)色彩計畫： 黑、灰、粉
(6)風格設定、網頁看點、預期成效：簡單舒服
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 還會調
(8)製作心得：製作時間蠻快的 算順利吧
學號 1025445079

[size=small](1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445178/

(2)網站主題/網站名稱： Fly for fun 新飛飛ONLINE

(3)分類項目: :首頁/遊戲簡介/遊戲介紹/圖片分享/其他相關連結
(人物角色介紹/轉職 --- 到 轉升職業/點裝.......圖片介紹)

(4)對象： 國高中大學生

(5)色彩計畫： 以[color=#006666]藍綠色[/color](明度深到亮)為主,白色 及 米黃色為輔,讓畫面有乾淨典雅的感覺

(6)風格設定、網頁看點、預期成效：風格以乾淨簡單看得舒服為主

(7)請整理以下數值： (還沒整理好XDDD)
字體設定(font-family) 11px~14px
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin) 1.6 (單位px)
網站寬度(width) :

(8)製作心得：
其實我想很久要介紹什麼
介紹歌手,上學期也介紹了XD
最近我喜歡的歌手網站都有更新,做得還不錯,所以想做些其他的
那剛好前陣子玩的一個遊戲,他居然要結束營運了讓我萬般不捨
(雖然我並不是花很多錢在上面xDD) 不過也因為遊戲遇見了不少好人
為了紀念這個遊戲(畢竟我玩了四年),所以用他來當作一個結束
p.s而且我非常喜愛這款遊戲的設計方式及人物點裝設計(噴淚)

不過我還是轉手跑去玩美國伺服器了XD[/size]



[size=small]
學號 1025445178 / yo[/size]



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445073 。
(2)網站主題/網站名稱： 泰勒絲
(3)分類項目: 首頁.早期生活.音樂生涯.個人形象.作品風格
(4)對象： 泰勒絲
(5)色彩計畫： 深綠色為主色
(6)風格設定、網頁看點、預期成效：沉穩
(7)請整理以下數值：
字體設定(font-family) 11px~14px
標題級數、文章標題級數、內文級數(font-size)1.6 (單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得： 主題不知道要做啥，讓我很煩惱
學號1025445073

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445058
(2)網站主題/網站名稱： nicolettaceccoli
(3)分類項目: 首頁.FB專業.個人網頁.作者生平.作品風格
(4)對象： nicolettaceccoli
(5)色彩計畫：暗灰色
(6)風格設定、網頁看點、預期成效：神秘
(7)請整理以下數值：
字體設定(font-family) 11px~14px
標題級數、文章標題級數、內文級數(font-size)1.6 (單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得： 顏色配色弄好久
學號1025445058

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445070/
(2)網站主題/網站名稱： 團體/BIGBANG
(3)分類項目: 首頁、歷年經歷、成員介紹、音樂作品、熱門歌曲
(4)對象： 有再關注歌壇的夥伴們
(5)色彩計畫： 黃色與它的相近色
(6)風格設定：利用黃色帶出高貴的氛圍
網頁看點：BIGBANG的好歌
預期成效：希望大家一起掉進Fantastic Baby無限重播的地獄(?
(7)請整理以下數值：
字體設定(font-family) ：微軟正黑體
標題級數、文章標題級數、內文級數(font-size)：24、20、12px
區塊內與區塊間的距離(padding)(margin)：10px..?
網站寬度(width)：800px
(8)製作心得：
CSS設定很長一串，有時候要修改設定時會找不到在哪裡。
不過又學到了一個新的排板的樣式，還不賴！

1025445070

(1)作業網址：http://mepopedia.com/~web103-2a/hw02/hw02-1025445025/
(2)網站主題/網站名稱：甜點
(3)分類項目: 首頁-簡單介紹-布郎尼DIY-草莓蜜糖土司DIY-義式草莓奶酪DIY外接影片
(4)對象： 喜愛甜點的人
(5)色彩計畫：馬卡隆色
(6)風格設定、網頁看點、預期成效： 以舒服可愛的風格 影片DIY
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得：順利 但太多與髮會搞混

1025445025

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445040
(2)網站主題/網站名稱： 猫が大好きです。ΦωΦ
(3)分類項目: 首頁.喵喵介紹.喵喵簡介.喵喵分享.外部連結
(4)對象： nicolettaceccoli
(5)色彩計畫：粉色系
(6)風格設定、網頁看點、預期成效：療癒
(7)請整理以下數值：
字體設定(font-family) 11px~14px
標題級數、文章標題級數、內文級數(font-size)1.6 (單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) [color=#FF0000]不確定[/color]
(8)製作心得： 這是不確定的網頁，可能之後會打掉重做，怎樣做都不是自己想要的感覺，會再去試看看。
學號1025445058

(1)作業網址：http://mepopedia.com/~web103-2a/hw02/hw02-1025445199/
(2)網站主題/網站名稱：TSUJIRI辻利茶舗
(3)分類項目: 首頁/簡介/國際分店/商品介紹/連結
(4)對象： 喜歡抹茶的人
(5)色彩計畫：抹茶綠色漸層
(6)風格設定、網頁看點、預期成效： 綠色配色簡單不複雜
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得：在配色上很難搭配，語法太過複雜，有點搞不清楚哪裡是哪裡，還好有朋友的幫忙順利解決問題。

1025445199

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445115
(2)網站主題/網站名稱： 任時完
(3)分類項目: 首頁.歌手出道.演藝生活.照片分享.影音分享
(4)對象：喜歡的演員
(5)色彩計畫： 黑色三角.藍.桃紅
(6)風格設定、網頁看點、預期成效：一起看未生
(7)請整理以下數值：

(8)製作心得：用好久，因為一直忘，所以重看教學

1025445115



(編輯記錄)

[size=small](1)作業網址：http://mepopedia.com/~web103-2a/hw02/hw02-1025445001
(2)網站主題/網站名稱：歌手/鬼束千尋
(3)分類項目: 首頁、BIOGBAPHY、DISCOGRAPHY、MUSIC VIDEO、LINKS
(4)對象：喜歡日本流行歌曲的各位(ﾟ∀ﾟ)
(5)色彩計畫：黑、白、灰
(6)風格設定、網頁看點、預期成效：黑白極簡風、經典暢銷曲回顧、讓更多人認識鬼束千尋
(7)請整理以下數值：
字體設定(font-family)：微軟正黑體
標題級數、文章標題級數、內文級數(font-size)： 24、20、12px
區塊內與區塊間的距離(padding)(margin)：(?
網站寬度(width)：800px
(8)製作心得：
上學期的記憶全部被洗掉了(眼神死
所以很多語法都看不懂...
加上很一瞬間的這次超多的CSS，覺得混亂
但還是盡量的做出來了(淚

想要介紹誰想了很久，結果拖了很久才做...(對不起
但是能學到新的版型跟CSS很開心，
不過我還要慢慢的研究語法...不然我都會忘記那是甚麼...

1025445001[/size]



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web103-2a/hw02/hw02-1025445130
(2)網站主題/網站名稱： EXO = WE ARE ONE
(3)分類項目: NOTICE (首頁) ALBUM (專輯) MEMBER (成員) VIDEO (影片) PICTURE (照片)
(4)對象： 粉絲 迷妹
(5)色彩計畫：宇宙
(6)風格設定、網頁看點、預期成效： 讓人好奇
(7)請整理以下數值：
字體設定(font-family) 10-24
標題級數、文章標題級數、內文級數(font-size)20(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得： 嗚嗚...........
學號 1025445130

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445136
(2)網站主題/網站名稱： minecraft
(3)分類項目: 首頁、遊戲內容、伺服器和開發、版本進展、鏈接
(4)對象：minecraft新手與狂熱症患者
(5)色彩計畫： 一整個土風
(6)風格設定、網頁看點、預期成效：土土風、minecraft攻略、能清楚查詢攻略
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) -你等會兒
(8)製作心得：不管網頁有多好，只願每晚睡得早

(1)作業網址：http://mepopedia.com/~web103-2a/hw02/hw02-1025445046
(2)網站主題/網站名稱：艾可先生漢堡餐廳
(3)分類項目:首頁-最新消息-漢堡先生-三明治小姐-其他餐點
(4)對象：喜歡吃美式餐點的人
(5)色彩計畫：淡軍綠色系、咖啡色系、淡橘色系
(6)風格設定、網頁看點、預期成效：微微的美式插畫風，希望能讓瀏覽的人一看就垂延三尺的感覺。
(7)請整理以下數值：
字體設定(font-family)未定
標題級數、文章標題級數、內文級數(font-size)(單位px)未定
區塊內與區塊間的距離(padding)(margin)(單位px)未定
網站寬度(width)(單位px)未定
(8)製作心得：我覺得這次配色做得比之前好多了...其他還要繼續努力...

1025445046

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445043/
(2)網站主題/網站名稱：AMIT 2
(3)導覽列：HOME、ABOUT AMIT、UTOPIA WORLD TOUR、MV、OFFICAL PAGE
(4)對象： 沒聽中文歌的人
(5)色彩計畫：黑/白/紅
(6)風格設定、網頁看點、預期成效： 色塊撞色風格、AMIT新歌/畫面簡單、分享嚇死人好聽的新歌
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px) 5em / px / px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得： 因為聽到其中一首新歌質感很好，一直按重播沉醉其中，於是就做了，想做一個看起來大方舒服的網頁，語法比原來想像複雜很多，每一個語法都慢慢慢慢找了很久……

1025445043



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445091/
(2)網站主題/網站名稱：幾米的異想世界
(3)導覽列：最新消息、幾米123事、與幾米喝咖啡、會員專區、幾米商店街
(4)對象： 喜歡插畫的人
(5)色彩計畫：墨綠色系/灰藍色系/淡灰色系
(6)風格設定、網頁看點、預期成效：插畫風格，希望讓大家更認識幾米~
(7)請整理以下數值：
字體設定(font-family) "微軟正黑體"
標題級數、文章標題級數、內文級數(font-size)(單位px) 5em / 12px /10px
區塊內與區塊間的距離(padding)(margin)(0px)
網站寬度(width)(800px)
(8)製作心得：語法很複雜，做了很久~

1025445091

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445148
(2)網站主題/網站名稱： IKEA
(3)分類項目: IKEA家具介紹
(4)對象： 傢俱商品需求者
(5)色彩計畫： 藍、黃 IKEA logo本身的標準色
(6)風格設定、網頁看點、預期成效：色彩鮮明，簡約清新，一目了然
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得：剛開始前置作業較無趣，配色、版面的部分會比較願意花時間做調整
學號1025445148

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445223
(2)網站主題/網站名稱： 只是一個安靜的廚廚網站
(3)分類項目: 喬納森喬斯達-和迪奧的青春-奇妙的家族-一切的起源-替身使者
(4)對象： 喬納森廚【X
(5)色彩計畫： 紫色
(6)風格設定、網頁看點、預期成效：角色愛好偏向
(7)請整理以下數值：
字體設定(font-family) 當然是默認
標題級數、文章標題級數、內文級數(font-size)(單位px) 怎麼可能記得
區塊內與區塊間的距離(padding)(margin)(單位px) 淦沒注意
網站寬度(width)(單位px) 隨它啦
(8)製作心得： 喬納森真可愛啾咪~☆【淦
學號 1025445223

1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445097
(2)網站主題/網站名稱： 薰衣草森林
(3)分類項目: 薰衣草森林園區介紹
(4)對象： 觀光客
(5)色彩計畫： 用薰衣草本身的紫當作主題色
(6)風格設定、網頁看點、預期成效：主題為薰衣草,設計清新舒服,讓讀者一看就了解
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(單位px)
區塊與各表格的顏色修改,擺圖片,背景放照片.網站寬度
(8)製作心得：比起上學期覺得自己做的速度很慢,現在有越來越熟悉語法,做的速度變比較快,希望能繼續進步

視傳二A1025445097陳慶芳

(1)作業網址：http://mepopedia.com/~web103-2a/hw02/hw02-1025445139/
(2)網站主題/網站名稱：ハイキュー!!
(3)分類項目: HAIKYU-KARASUNO-ENEMY-TEAM-VIDEO
(4)對象： 15～25歲青少年
(5)色彩計畫： 橙白紅黑，大致上以橘色系為主
(6)風格設定、網頁看點、預期成效： 希望能讓大家喜歡上這部動漫，主色調使用與主角相同的色系。
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
打算等細部調整完之後在詳細
(8)製作心得：嗯，太久沒架網站開始生疏，摸了挺久狀態才回來的差不多，看起來應該還可以？

1025445139呂鍰慈

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445160
(2)網站主題/網站名稱：BEAUTY
(3)分類項目: 美容、化妝品、彩妝
(4)對象： 愛美族群
(5)色彩計畫：粉嫩色系
(6)風格設定、網頁看點、預期成效： 舒服的配色，吸引目光
(7)請整理以下數值：
字體設定(font-family) 微軟正黑體
標題級數、文章標題級數、內文級數(font-size)(單位px) 標題14px 內文10px
區塊內與區塊間的距離(padding)(margin)(單位px) 還會再微調
網站寬度(width)(單位px)
(8)製作心得：越學越多技巧，很有成就感
學號 1025445160

(1)作業網址：http://mepopedia.com/~web103-2a/hw03/hw03-1025445025
(2)本頁設計重點： 舒服
(3)製作心得： 一直亂掉
學號 1025445025

http://mepopedia.com/~web103-2a/hw02/hw02-1025445067/
豆豆先生Mr. Bean
首頁-人物介紹-遊戲-影片-照片
愛豆豆先生的人
有點可愛又有點成熟的色彩簡約風格
要走可愛但有質感的風格，然後可以立馬知道豆豆先生的可愛
字體設定14~30
標題級數、文章標題級數、內文級數14~30
區塊內與區塊間的距離未定
網站寬度未定
覺得很難，他都不出現我要的東西，然後下面四格的不知道怎麼弄成圓角....



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web103-2a/hw02/hw02-1025445100/
(2)網站主題/網站名稱：詩特莉
(3)分類項目: 首頁、品牌故事、美食佳餚、品牌堅持、外部連結
(4)對象：不同年齡層的女性
(5)色彩計畫：暖色系
(6)風格設定、網頁看點、預期成效：走溫馨雅緻風，讓人有回到家的溫暖感受，傳達詩特莉本身的理念。
(7)請整理以下數值：
字體設定(font-family) ：華康秀風體、王漢宗中仿宋繁
標題級數、文章標題級數、內文級數(font-size)(單位px) ：３４ｐｔ、１８ｐｘ、１４ｐｘ
區塊內與區塊間的距離(padding)(margin)(單位px)：３６ｐｘ
網站寬度(width)(單位px)：８００ｐｘ
(8)製作心得：我真的超喜歡詩特莉這個品牌，整個讓少女心爆發了，能做這個主題我很樂在其中
學號 １０２５４４５１００

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445187/
(2)網站主題/網站名稱：toy story
(3)分類項目:首頁，人物角色，劇情介紹，影片欣賞，相關連結
(4)對象： 喜歡玩具總動員的人
(5)色彩計畫：藍 黃
(6)風格設定、網頁看點、預期成效： 鮮明，明亮
(7)請整理以下數值：
字體設定(font-family) 微軟正黑體
標題級數、文章標題級數、內文級數(font-size)(單位px) 標題63px 內文18px
區塊內與區塊間的距離(padding)(margin)(單位px) 還會再微調
網站寬度(width)(單位px)
(8)製作心得： 容易一直搞混
學號 1025445187

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445202/
(2)網站主題/網站名稱：是誰住在深海裡的大鳳梨裡？
(3)導覽列：關於海綿寶寶、人物介紹、深海景點、深海遊戲、海綿寶寶電影及特集
(4)對象： 喜歡海綿寶寶的觀眾
(5)色彩計畫：和黃色/藍綠色系/咖啡色
(6)風格設定、網頁看點、預期成效：海綿寶寶風格，認識海綿寶寶
(7)請整理以下數值：
字體設定(font-family) "微軟正黑體"
標題級數、文章標題級數、內文級數(font-size)(單位px) 5em / 12px /10px
區塊內與區塊間的距離(padding)(margin)(0px)
網站寬度(width)(800px)
(8)製作心得：語法很複雜

1025445202 林彥希

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445076
(2)網站主題/網站名稱： 火影忍者
(3)分類項目: 首頁 人物角色 故事介紹 影片欣賞 影評分享
(4)對象： 喜歡火影的人
(5)色彩計畫： 以他的基本色配
(6)風格設定、網頁看點、預期成效： 讓喜歡的人更加了解 和更快連結想看的
(7)請整理以下數值：
字體設定(font-family) 還沒設好
標題級數、文章標題級數、內文級數(font-size)(單位px) 還在決定
區塊內與區塊間的距離(padding)(margin)(單位px) 決定中
網站寬度(width)(單位px) 網頁設定好
(8)製作心得： 有一點困難有遇到問題
學號 1025445076

(1)作業網址：http://mepopedia.com/~web103-2a/hw02/hw02-1025445031
(2)網站主題/網站名稱：加菲貓
(3)分類項目: 首頁/品種介紹/照片欣賞/電影介紹/作者介紹
(4)對象：喜愛動物的人
(5)色彩計畫：橘色系
(6)風格設定、網頁看點、預期成效： 鮮豔可愛的顏色+可愛貓照片
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得：在家做到一半有一些問題 還好到教室老師有教我

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445103/
(2)網站主題/網站名稱： RODY跳跳馬
(3)分類項目:首頁-介紹RODY
(4)對象：RODY購買者
(5)色彩計畫：灰白黃色為主
(6)風格設定、一目了然
(7)請整理以下數值：
字體設定 文字顏色 標題大小 標題色
(8)製作心得：雖然很難但我看老師的教學一點一點做出來了


1025445103 張秀安

(1)作業網址：http://mepopedia.com/~web103-2a/hw02/hw02-1025445109
(2)網站主題/網站名稱： 康熙來了
(3)分類項目: 首頁、主持人簡介、康熙活動、節目預告、外部連結
(4)對象： 大眾
(5)色彩計畫： 漸層
(6)風格設定、網頁看點、預期成效： 跟節目風格差不多
(7)請整理以下數值：
字體設定(font-family) 微軟正黑體
標題級數、文章標題級數、內文級數(font-size)(單位px) 標題25px 文章12px 內文12px
區塊內與區塊間的距離(padding)(margin)(單位px) 依網頁而定
網站寬度(width)(單位px) 還沒定
(8)製作心得：覺得越來越複雜，得專心地做，不然很容易忘記自己在做什麼
學號 1025445109

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445169
(2)網站主題/網站名稱： Barbapapa / Story of Barbapapa
(3)分類項目: 首頁、作者簡介、故事起源、故事人物、相關影音
(4)對象：給喜歡巴巴爸爸的人
(5)色彩計畫： 淡淡的風格
(6)風格設定、網頁看點、預期成效：簡單風、可愛的巴巴爸爸、希望能做更好
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得：花了很多心思找內容，想把整個網頁做到最好

(1)作業網址： http://mepopedia.com/~web103-2a/hw02/hw02-1025445175/
(2)網站主題/網站名稱： KOBITOS
(3)分類項目: home about story kobitos product
(4)對象： 小朋友
(5)色彩計畫：繽紛 鮮豔
(6)風格設定、網頁看點、預期成效：鮮豔可愛 點點風 讓大家認識醜比頭
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得： 背景圖一直用不好 但覺得灰色又很好看
學號 1025445175

(1)作業網址：http://mepopedia.com/~web103-2a/hw02/hw02-1025445184/
(2)網站主題/網站名稱：FRIENDY
(3)分類項目: 首頁-最新消息-美食菜單-用餐環境-店裡位置
(4)對象：喜好義式餐廳
(5)色彩計畫： 酒紅色
(6)風格設定、網頁看點、預期成效：製作一個依義式餐廳的官網
(7)請整理以下數值：
字體設定(font-family)
標題級數、文章標題級數、內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(8)製作心得：運用簡單的配色跟背景圖呈現

(1)作業網址：http://mepopedia.com/~web103-2a/hw02/hw02-1025445082
(2)網站主題/網站名稱：
(3)分類項目: 首頁、人物介紹、作品介紹、作品特色、連結
(4)對象：想了解草間彌生的人
(5)色彩計畫：白、紅色系
(6)風格設定、網頁看點、預期成效：草間彌生的點點風格。
(7)請整理以下數值： 標題、文章標題-25px，內文級數-15px，其餘視實作而定。
(8)製作心得：配色有猶豫，草間彌生的風格是高彩度的搭配，一直在小心不要讓自己的網頁看起來每個區塊顏色都很顯眼搶了主體。
學號 1025445082