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

Advanced

1045445104

[作業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)設定滑鼠移過的效果,其他頁面將陸續完成。
3.因後續作業須持續完成其他它作業,請先設定好一特定主題後開始製作,並考慮其設計美感以及配色、風格與主題搭配之關係。

[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/~css105-2b/hw02/hw02-1045445XXX 。

並請回覆:

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445XXX
(2)網站主題/網站名稱:
(3)分類項目(導覽列):
(4)對象:
(5)色彩計畫:
(6)風格設定、網頁看點、預期成效:
(7)製作心得:


[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

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445089
(2)網站主題/網站名稱: Alice's Adventures in Wonderland
(3)分類項目(導覽列):
01-Lewis carroll卡洛爾
02-Authors作者介紹
03-Synopsis簡介
04-Class Story經典故事
05-Video Story影音故事
(4)對象:喜歡繪本的
(5)色彩計畫: 大自然又帶點幻想奇怪的世界
(6)風格設定、網頁看點、預期成效: 和故事內容結合每張圖和不同章節都有不一樣的感覺,
這本繪本有很多圖,圖中有很多可以找的小圖,比一般繪本更有趣,預期成果可以在網上看到更不一樣的故事
(7)製作心得:愛麗絲夢遊仙境有很多種版本,選了一個比較不一樣的畫風,特別又帶點陰森奇幻的感覺

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445008
(2)網站主題/網站名稱: The Most Delicious Food
(3)分類項目(導覽列):
01- Home 首頁
02- Menu 菜單
03- Offer 優惠
04- Comment 評論
05- Contact Us 聯繫我們
(4)對象:愛吃西餐的朋友
(5)色彩計畫: 高級浪漫美味舒適的感覺
(6)風格設定、網頁看點、預期成效:想做出高級牛排餐館的感覺,查看了一些美食網站,也查了一下牛排的一些特色,做出來自己滿喜歡的!!覺得有浪漫風味
(7)製作心得:帶著浪漫風味的牛排網站,晚上邊做邊找資料看了一堆牛排圖片超餓的!!做出來自己滿喜歡的超開心smiling bouncing smiley smiling bouncing smiley smiling bouncing smiley

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

(2)網站主題/網站名稱:Indi Maverick

(3)分類項目(導覽列):
關於INDI:包含他的自我介紹還有創作路程。
履歷介紹:工作經驗、獲獎紀錄,以及技能。
繪畫創作:作品有動物、男人、女人,以及隨意的手繪。
作品集:獨一無二的作品,集結成的精華。
影片連結:以日常的創作,所製作的短篇影音。

(4)對象:大眾

(5)色彩計畫:以藍綠色系為主,加上深淺變化,達到一致性的視覺效果。

(6)風格設定、網頁看點、預期成效:
風格設定:藍綠色有神祕的感覺,很適合Indi這個插畫家的繪畫風格。
網頁看點:背景與插畫家的圖,帶來的氣氛與意境。
預期效果:有自己的個性和獨特風格,並讓觀看的人更想認識這個插畫家。

(7)製作心得:這次的主題想了比較久,因為想擺脫以往較甜美的網頁風格,所
以找了很多插畫家的資料,也因此認識很多畫家的插畫,最後選出自己喜歡的來
做主題,過程中一邊做一邊看老師的教學影片,所以沒有什麼問題,完成後,自
己很喜歡這樣的樣式,也學到了新的網頁技巧。

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445035
(2)網站主題/網站名稱:AnnStudio
(3)分類項目(導覽列):首頁 Ann Studio簡介 作品介紹 經歷分享 外部連結
(4)對象:設計系學生
(5)色彩計畫: 深色為主
(6)風格設定、網頁看點、預期成效: 以簡約為主
(7)製作心得:剛開始覺得還很容易,只是修改網頁。做了之後才覺得很難。

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445110
(2)網站主題/網站名稱: Daniela Volpari Illustration 義大利插畫家
(3)分類項目(導覽列): 首頁. 簡介. 作品. 心得. 外部連結
(4)對象: 給有興趣的愛好者
(5)色彩計畫:以歐洲傳統的色彩,帶有點復古
(6)風格設定、網頁看點、預期成效:偏向粉色,且帶有華麗的質感,和插畫家的圖做一個結合,
營造一種復古的色調,搭配插畫的整體性
(7)製作心得:在製作過程中參考了比較多畫作的色彩,想盡量的詮釋出來

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445125
(2)網站主題/網站名稱: カボチャ料理.南瓜料理
(3)分類項目(導覽列):
◆ 南瓜超營養
◆ 流口水不負責
◆ 看著食譜做
◆ 看影片更容易
◆ 更多南瓜
(4)對象:大眾
(5)色彩計畫: 南瓜配色(黃和橘)
(6)風格設定、網頁看點、預期成效:
想以介紹南瓜的料理為主,介紹其南瓜的營養價值,使觀看者能夠有想要嘗試製作南瓜料理的心情~
(7)製作心得:因為喜歡吃南瓜所以一邊看一邊做,做得很開心spinning smiley sticking its tongue out
每次都會想挑戰不同風格和製作方式所以總是很專心地做,一不小心又熬夜了smileys with beer
製作上遇到問題都會一直反覆檢查或照查資料,很累人,但下次製作時就會記取教訓,反而越做越順手。

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445095
(2)網站主題/網站名稱:樂高
(3)分類項目(導覽列): 首頁 歷史介紹 電視電影 影片連結
(4)對象: 所有熱愛樂高族群
(5)色彩計畫:鮮豔 活潑
(6)風格設定、網頁看點、預期成效:
色塊 簡單
https://www.lego.com/en-us/life


(7)製作心得:本來以為改一些風格就好,發現蠻難的。



Edited 4 time(s). Last edit at 04/06/2017 01:33AM by 1045445095.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445062
(2)網站主題/網站名稱: 沖繩
(3)分類項目(導覽列):
index-首頁
scene-景點介紹
play-遊玩
traffic-交通
link-連結

(4)對象:大眾
(5)色彩計畫:藍藍的
(6)風格設定、網頁看點、預期成效:
(7)製作心得:CSS增加很多,需要花時間一個個慢慢找



Edited 1 time(s). Last edit at 03/29/2017 06:27PM by 1045445062.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445161
(2)網站主題/網站名稱 : 爭鮮

(3)分類項目(導覽列):
關於爭鮮
產品介紹
壽司公仔介紹
爭鮮偶動畫
各國爭鮮

(4)對象: 大眾
(5)色彩計畫:溫暖刺激胃口的色彩

(6)風格設定、網頁看點、預期成效:

風格
溫暖簡潔

網頁看點
背景採鮭魚生魚片repeat / 導覽列以鮪魚生魚片來當底
讓人感覺很想馬上爭鮮一下

預期成效
讓更多人瞭解爭鮮的產品,以及爭鮮的經營理念品牌人偶
故事,更深層的瞭解爭鮮,以刺激消費。

(7)製作心得:
對區域相對的英文有點陌生,修改找相對區塊的時候會比較費時。
Filezilla不穩定,很常連接失敗,會影響到努力做完的好心情...



Edited 1 time(s). Last edit at 03/23/2017 09:47AM by 1045445161.
(編輯記錄)

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

(2)網站主題/網站名稱:mister Donut ( 甜甜圈專賣店 )

(3)分類項目(導覽列):
首頁-mister Donut簡介、各國分店以及市場趨勢
產品介紹-甜甜圈樣品(圖)
我們的堅持-介紹如何製作出屬於我們品牌好吃的甜甜圈祕笈
最新消息-近期會推出的新口味或活動
宣傳影片-電視廣告

(4)對象:喜愛吃甜點的大眾

(5)色彩計畫:橙橘、紅、淺粉、白、深綠、咖啡

(6)風格設定: 為了符合mister Donut 的形象,顏色以店牌主要色彩橙橘、紅色為主,
內文部分則是以粉白色去做搭配,文字是用咖啡、深綠,使整體畫面清楚明瞭,風格
排版則都是以簡約為主~

(7)製作心得:除了header的部分卡住之外,大致上都還做得滿順利,
希望一次又一次的練習,可以越來越上手~~

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

(2)網站主題/網站名稱:探險活寶

(3)分類項目(導覽列):
首頁-探險活寶的由來
故事介紹-描述阿寶老皮的探險
人物介紹-介紹裡面的主角 配角
圖片分享
影片連結

(4)對象:兒童

(5)色彩計畫:藍色 白色

(6)風格設定: 活潑

(7)製作心得:跟著老師的步驟 覺得很順利

作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445188
(2)網站主題/網站名稱:剪紙藝術

(3)分類項目(導覽列):
剪紙介紹Paper cuts.
藝術家Artist
相關網站Web site.
設計創作design
影音教學video

(4)對象:大眾

(5)色彩計畫: 紅色跟粉色

(6)風格設定:風格採用紅色調,東方紅色代表喜氣,而剪紙的紙也多為紅色。
網頁看點:背景都是用剪紙來做稱底,讓整體看起來有種喜氣洋洋的感覺。
預期成效: 希望可以讓看過的人對剪紙有近一步的了解,也明白這項藝術
運用在設計上是非常有質感的呈現。


(7)製作心得:
在調色上非常苦惱,雖然早就決定要以紅色當主色調,但在內容的區塊還
是要有些層次感,讓我配色花了非常多時間,也發現多了非常多的類別,
讓我在調整的時候都有點找不太到,但製作出來整體還算滿意,有達到我
想呈現出來的氛圍。

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445026
(2)網站主題/網站名稱:第十四道門(Coraline)
(3)分類項目:介紹、腳色、劇情、製作過程、主體色彩
(4)對象:喜歡電影的人
(5)色彩計畫:溫馨的冷色
(6)風格設定、網頁看點、預期成效:
網頁上方的小花是電影中女主角家中的壁紙,整體想營造出溫馨又帶有鬱悶感的色彩
讓看過這部電影的人,看到此網頁又能感受到強烈的壓迫感
(7)製作心得:參考了很多片中色彩強烈的畫面

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445080
(2)網站主題/網站名稱 : 黃阿瑪的後宮生活

(3)分類項目(導覽列):
首頁
貓咪介紹
圖片欣賞
影片分享
外部連結

(4)對象: 大眾
(5)色彩計畫:暖色系

(6)風格設定、網頁看點、預期成效:

風格
溫暖可愛

網頁看點
以貓咪可愛的模樣吸引觀眾

預期成效
讓大家都可以知道後宮裡的七隻可愛的貓咪

(7)製作心得:
這次又學到一個新的架構也學到了很多語法
希望可以學更多

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

(2)網站主題/網站名稱: 阿甘妙世界 The Amazing World of Gumball

(3)分類項目(導覽列): 首頁、故事介紹、人物介紹、圖片分享、影片連接。

(4)對象:喜愛卡通的朋友們。

(5)色彩計畫:粉嫩系為主 。

(6)風格設定、網頁看點、預期成效:簡單明瞭。

(7)製作心得:進行調色稍微卡住了下,但後來順利調成了,太久沒做有點生疏。

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445182
(2)網站主題/網站名稱 : Suzy's zoo

(3)分類項目(導覽列):
首頁
介紹
圖片
周邊
外部連結

(4)對象: all
(5)色彩計畫:粉色

(6)風格設定、網頁看點、預期成效:

風格
粉色系萌萌ㄉ

網頁看點
梨花熊很受少女歡迎

預期成效
讓大家更了解梨花熊和他的朋友

(7)製作心得:
配色選很久 直到滿意才肯結束
所以在選色方面花蠻多時間滴

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445149
(2)網站主題/網站名稱 : cerruti1881

(3)分類項目(導覽列):
首頁
重要歷程
西裝
配件
精神

(4)對象: all
(5)色彩計畫:藍灰調

(6)風格設定、網頁看點、預期成效:

風格
男性成熟風

網頁看點
多了解時尚品牌風格

預期成效
大家多學習精品的風格

(7)製作心得:
西裝資料其實沒預期的多,要找很久。花很多時間在搜尋資料跟翻譯外國網站

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445029
(2)網站主題/網站名稱: 小熊學校
(3)分類項目(導覽列):
01-首頁
02-故事介紹
03-作者介紹
04-系列繪本
05-外部連結
(4)對象:給喜歡日本插畫的人
(5)色彩計畫: 可愛柔和的色調
(6)風格設定、配色與圖案都與小熊學校插畫有關連,可愛又柔和的搭配
(7)製作心得:這次的網頁比較與以往不太一樣但也不會很難蠻好上手的!

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445155
(2)網站主題/網站名稱: 大力水手
(3)分類項目(導覽列):
01-首頁
02-故事介紹
03-人物介紹
04-圖片分享
05-外部連結
(4)對象:一起回憶小時候的卡通
(5)色彩計畫: 紅藍白
(6)風格設定、配色與圖案都與大力水手有關連
(7)製作心得:這次的網頁比較與以往不太一樣 謝謝朋友的教導



Edited 1 time(s). Last edit at 03/28/2017 11:08PM by 1045445155.
(編輯記錄)

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

(2)網站主題/網站名稱:植劇場

(3)分類項目(導覽列):
首頁、單元劇系列、演員陣容、電視劇歌曲、幕後花絮

(4)對象:喜愛植劇場的電視劇觀眾

(5)色彩計畫:選擇綠色系來配合「植」這一字

(6)風格設定、網頁看點、預期成效:
植劇場是一系列培育新人的單元劇,所以利用小幼苗來代表影視圈的新生力。
透過此網站的介紹能夠讓觀眾看到跟以往不同的戲劇類型,也能夠讓觀眾認識這些新人,期許他們成為新一代的大勢演員。

(7)製作心得:雖然只是把內容給改寫,但是這次的CSS語法略顯多一些,在調整的部分上會混亂。

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

(2)網站主題/網站名稱: 日本の桜
(3)分類項目(導覽列):
TOP(index)
所謂櫻花(about)
關於賞櫻(hanami)
櫻花料理(eat)
其他櫻花(other)

(4)對象: 喜歡櫻花的大眾
(5)色彩計畫: 配合櫻花以粉色系為主,使用日本傳統色調配色
(6)風格設定、網頁看點、預期成效:
風格設定>>粉粉嫩嫩、日式和風
網頁看點>>櫻花主題
預期成效>>可以獲得櫻花的相關知識
(7)製作心得:
CSS語法變好多啊有點難找,但找到位置後就知道怎麼改了
好險沒忘光
然後櫻花好美R,想去賞櫻

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445119
(2)網站主題/網站名稱:
ONE OK ROCK
(3)分類項目(導覽列):
HOME
ABOUT
Tour
VIDEOS
MUSIC
(4)對象:喜歡音樂的孩子們
(5)色彩計畫: 黑白為主的色系
(6)風格設定、網頁看點、預期成效:
樂團 搖滾音樂風格,希望喜歡one ok rock的朋友們喜歡
(7)製作心得: 覺得很開心 玩音樂的孩子不會變壞,一開始作有些語法都看不懂 研究好久才懂哈哈

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445053
(2)網站主題/網站名稱:Ace of diamond鑽石王牌
(3)分類項目(導覽列):
index(故事大綱)
about(登場角色)
music(主題曲)
show(聲優出席活動)
movie(舞台劇)

(4)對象: 喜歡棒球的
(5)色彩計畫: 藍色調
(6)風格設定、網頁看點、預期成效: 青春藍色調、更了解這部棒球作品。
(7)製作心得: 搞好久阿首頁ˇ~ˇ背景還會再改的....!

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

(2)網站主題/網站名稱: 為美好的世界獻上祝福!

(3)分類項目(導覽列):
01- 首頁
02- 主要人物
03- 作品介紹
04- 主題曲
05- 動畫線上看

(4)對象:喜歡動漫的人

(5)色彩計畫:以水之女神阿克婭水藍色為主要配色

(6)風格設定、網頁看點、預期成效: 簡單色塊,及清晰資訊,讓人能很快找到自己想要的區域與資訊,簡單的介紹讓人能夠稍微了解此作品,並進而點取更多的系列作品及網路商城。

(7)製作心得:一步一腳印,探險感覺十足。

(2)網站主題/網站名稱:周杰倫
(3)分類項目(導覽列): 首頁 故事 電影 圖片連結
(4)對象: 周董迷
(5)色彩計畫:單純
(6)風格設定、網頁看點、預期成效:
簡單 純樸

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445137
(2)網站主題/網站名稱:周杰倫
(3)分類項目(導覽列): 首頁 故事介紹 電影介紹 圖片連結
(4)對象: 周董迷
(5)色彩計畫:黑灰
(6)風格設定、網頁看點、預期成效:
純樸 簡單

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

[color=#003366](2)網站主題/網站名稱:陳大天

(3)分類項目(導覽列):
介紹、演出、音樂、主持、影片

(4)對象:想了解陳大天的任何人
(5)色彩計畫:以藍綠色系為主,然後用橘色以及綠色作為搭配,配合他宣傳的衣服色系
(6)風格設定、網頁看點、預期成效:
風格設定:活潑有趣
網頁看點:讓人了解陳大天
預期效果:希望去瀏覽的人能夠真正了解

(7)製作心得:這次想了很久才決定這個主題,雖然我不是很迷他,不過基本上算是喜歡。
但是在改老師的板上我用了很多的時間,比較沒那麼順,不過所幸做好了,覺得開勳><
[/color]

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

(2)網站主題/網站名稱:converse

(3)分類項目(導覽列):
converse 男款 女款 兒童 店鋪

(4)對象:喜歡converse的人
(5)色彩計畫:成熟色彩
(6)風格設定、網頁看點、預期成效:
風格設定:簡易
網頁看點:讓大家了解converse
預期效果:希望讓大家更清楚converse

(7)製作心得:這次想了很久才決定這個主題,雖然我不是很迷他,不過基本上算是喜歡。
但是在改老師的板上我用了很多的時間,比較沒那麼順,不過所幸做好了,覺得開勳><

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445092
(2)網站主題/網站名稱: BRUNCH 英倫早午餐
(3)分類項目(導覽列):
◆ BRUNCH!
◆ 今天吃甚麼?
◆ 廚房我作煮
◆ 餐餐四季
◆ 精采部分
(4)對象:大眾
(5)色彩計畫: 英國藍色和書裡有的藍綠色來搭配
(6)風格設定、網頁看點、預期成效:
介紹英倫早午餐,希望能夠讓大家在美好的週末早晨吃到自己動手做的美味早午餐。
(7)製作心得:在這次作業的過程中遇到了一些不知道該如何改的東西上,一一地找出解決方法後就有比較順利了。
但一開始在配色上面還是有點困擾,配了好多的顏色才找到適合自己網頁主題風格的色彩。
看著美味的早午餐,做著做著都開始覺得圖片看起來好好吃grinning smiley

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445074
(2)網站主題/網站名稱: 關於蔬食;好朋友?

(3)分類項目(導覽列):
◎愛好蔬食
◎料理達人
◎知識你來猜
◎推薦書籍
◎觀看教學

(4)對象: 大眾

(5)色彩計畫:主要以蔬菜顏色配色整個版面,利用鮮豔及暗色調顏色做調和的搭配。

(6)風格設定、網頁看點、預期成效:
風格設定: 利用深紫色跟綠色做組合,蔬食意味著鄉村的感覺。
網頁看點: 店家評價人氣高且教學影片,具有吸引人的氛圍。
預期成效: 能呈現鄉村做菜的輕鬆感,自己下廚健康充滿自信心。

(7)製作心得: 這次的網頁主題想了很久,但這個主題我很喜歡
以往都是做電影、歌星、店家,這次自己蒐集了資料,
最後做出了類似鄉村風的風格,過程中,雖然常常精神不振,
錯亂很多次,但有老師的影片跟教學,最後成功了。

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445077
(2)網站主題/網站名稱:馴龍高手
(3)分類項目(導覽列):
◎Hiccup&Toothless
◎相遇的開始
◎信任的培養
◎預告觀賞
◎他們的相親相愛

(4)對象:喜愛夢工廠或是動畫系列電影的人
(5)色彩計畫:用淡色系為主
(6)風格設定、網頁看點、預期成效:
風格設定: 利用深藍色與淺灰藍,放上主題照
網頁看點: 有電影劇照以及故事番外片吸引更多人點閱。
預期成效: 讓多人更了解動畫電影的迷人之處。

(7)製作心得: 真的很喜歡這部動畫,不管看幾次都不膩,電影配樂也很愛
所以才想讓更多人知道這部電影。



Edited 1 time(s). Last edit at 04/19/2017 09:18PM by 1045445077.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445056
(2)網站主題/網站名稱: 日本插畫家-Maori Sakai
(3)分類項目(導覽列):
01-首頁
02-插畫家介紹
03-風格介紹
04-作品欣賞
05-影片連結
(4)對象:面對許多生活壓力的大家
(5)色彩計畫: 很舒服的糖果色系
(6)風格設定、網頁看點、預期成效:配合插畫,走清新的路線。
(7)製作心得:感覺又做得比以前好了。很有成就感

1、作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445170
2、網站主題/網站名稱:張懸‧焦安溥
3、分類項目:
  PG1 首頁
  PG2 關於
  PG3 音樂生涯
  PG4 社會議題參與
  PG5 video
對象:喜歡聽音樂的你
色彩計畫:黑、灰、白
風格設定、網頁看點、預期成效:簡單、叛逆,帶出張懸有個性的那一面。
製作心得:做的很開心啊,畢竟是自己喜歡的歌手。只是作業拖太晚交了,老師SOR.

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445086
(2)網站主題/網站名稱: 李鍾碩
(3)分類項目(導覽列):
01- 首頁
02- 個人介紹
03- 戲劇介紹
04- 畫報欣賞
05- 影片連結
(4)對象:喜歡李鍾碩的粉絲們
(5)色彩計畫: 灰白
(6)風格設定、質感路線
(7)製作心得:滿好上手

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445065
(2)網站主題/網站名稱: 少女前線
(3)分類項目(導覽列): 官網首頁 角色 影片 遊戲內容 服務條款
(4)對象: 玩家
(5)色彩計畫: 暗色系
(6)風格設定、暗色系帶點警戒色的感覺
(7)製作心得: 很開心

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445113
(2)網站主題/網站名稱:愛吃鬼巧達
(3)分類項目(導覽列):
首頁
故事介紹
人物介紹
圖片分享
外部連結
(4 )對象:孩童
(5)色彩計畫: 淺色活潑
(6)風格設定、網頁看點、預期成效: 給孩童一種活潑可愛的感覺
(7)製作心得: 製作完很有成就感

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445107
(2)網站主題/網站名稱:Starbucks Coffee
(3)分類項目(導覽列):首頁 Starbucks Coffee咖啡豆 產品 分布 外部連結
(4)對象:各個族群
(5)色彩計畫: 以綠色黑色白色為主
(6)風格設定 : 以簡約為主
(7)製作心得:以為真的很困難 可是做久了之後也就習慣了

1045445104

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445104
(2)網站主題/網站名稱: Vans - OFF THE WALL
(3)分類項目(導覽列):
01- 首頁
02- 故事
03- 鞋款
04- Vans台灣據點
05- 名人穿搭
(4)對象:喜好街頭文化穿著的人
(5)色彩計畫: 簡單俐落的感覺
(6)風格設定、網頁看點、預期成效:想做出有個性的感覺
(7)製作心得:黑紅配色沒有我想像中的好搭配

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1045445122
(2)網站主題/網站名稱:Microsoft Surface
(3)分類項目(導覽列):
01-Surface-首頁
02-Surface Studio 桌上型電腦
03-Surface Book 變形筆記型電腦
04-Surface Pro 4 變形平板電腦
05-Video 產品影音
(4)對象:追求新型科技產品的人
(5)色彩計畫: 沉穩灰階
(6)風格設定、網頁看點、預期成效: 清爽,直觀。

(7)製作心得:科技感就是簡約,低調跟藍色吧。

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

(2)網站主題:陰陽師

(3)導覽列選項/分類項目(對應檔名):
首頁–index.html
遊戲介紹–game.html
角色介紹–character.html
式神介紹-shikigami.html
特色玩法–play.html
下載連結–download.html

(2)設計對象:查陰陽師資訊的人
(3)色彩計畫:深藍、淺藍、黃

(4)風格設定:帶點日式傳統的感覺
(5)製作心得:覺得很有趣,但是我很早就做完結果忘記交,這樣就很不有趣了..

(1)作業網址:http://mepopedia.com/~css105-2b/hw02/hw02-1025445158
(3)分類項目(導覽列):
首頁
簡介
作者
圖片分享
外部連結
(4 )對象:大眾
(5)色彩計畫: 黑色系
(6)風格設定、網頁看點、預期成效: 可以給人神秘感
(7)製作心得: 越來越難