[作業08] 優良設計網站蒐集與分析

Re: [作業] 優良設計網站蒐集與分析

1015445201 — Mon, 07 Jan 2013 16:45:13 +0800

1.分析範例網站網址： http://www.starbucks.com/

2.網站名稱及主題：擁有超過30種綜合與單品的咖啡豆、手工製作的濃縮混合飲品、TAZO茶、一系列的罐裝星冰樂飲品、一系列專屬的星巴克咖啡機器設備、咖啡豆沖泡機與磨豆機、新鮮烘烤的糕點、一系列的冰淇淋、一系列的巧克力、三明治、沙拉、咖啡馬克杯與用品、音樂唱片和各類型禮品。

3.主要消費族群：注重生活品味的白領階級。

4.設計風格：舒適典雅。

5.色彩分析：
[img]http://i.imgur.com/iaZSt.jpg[/img]
6.版面分析：
網站width(寬)961、height(高)949
[img]http://i.imgur.com/IOCnU.jpg[/img]
[img]http://i.imgur.com/fZgL2.jpg[/img]
7.跨瀏覽器問題與分析：
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
於不同瀏覽器觀察無差異。

學號：　1015445201

Re: [作業] 優良設計網站蒐集與分析

1015445270 — Mon, 07 Jan 2013 11:19:19 +0800

1.分析範例網站網址：http://www.lacuz.com/
2.網站名稱及主題：Lacuz泰式料理
3.主要消費族群：喜歡或想嘗試泰式料理的人
4.設計風格：以黑、深紅、土黃搭配出唯美的古典味
5.色彩分析：
[img]http://i.imgur.com/K69tj.jpg[/img]

6.版面分析：
[img]http://i.imgur.com/3FwsV.jpg[/img]

(1).網站width：1663px、height：781px、margin：0、padding：0

7.跨瀏覽器問題與分析：沒有問題

學號： 1015445270

Re: [作業] 優良設計網站蒐集與分析

1015445206 — Sun, 06 Jan 2013 21:30:03 +0800

1.分析範例網站網址：http://www.lavendercottage.com.tw/lavender_login.php
2.網站名稱及主題：歡迎來到薰衣草森林
3.主要消費族群：喜歡薰衣草的人喜歡親近大自然的人喜愛夢幻或手做的人
4.設計風格甜美可愛具設計感
5.色彩分析粉紅淡黃紫
6.版面分析
首頁分析
[img]http://i.imgur.com/t0lwq.jpg[/img]
分頁1
[img]http://i.imgur.com/qukNK.jpg[/img]
分頁2
[img]http://i.imgur.com/4gJaZ.jpg[/img]
6.版面分析
(1).網站1349px X 620px
(2)網站雙欄語法
[img]http://i.imgur.com/6GvHI.jpg[/img]

7.跨瀏覽器問題與分析
都可以

Re: [作業] 優良設計網站蒐集與分析

1015445208 — Mon, 31 Dec 2012 09:44:15 +0800

1.分析範例網站：http://japan.videoland.com.tw/channel/natume/natume.html

2.網站名稱及主題：夏目友人帳

3.設計風格:黑色微美

4.色彩分析:黑色、藍色

5.版面分析:簡單、讓人一目了然

6.跨瀏覽器問題與分析:使用IE FireFox Google 都可以使用

Re: [作業] 優良設計網站蒐集與分析

1015445269 — Sat, 29 Dec 2012 23:46:46 +0800

1.分析範例網站網址;http://www.starbucks.com.tw/home/index.jspx
2.網站名稱及主題;starbucks
3.主要消費族群;不分族群
4.設計風格;背景以白底黑字為主,放置多量產品之圖片,看來簡潔大方容易瀏覽觀看
5.色彩分析
[img]http://imgur.com/LIfYZ[/img]
6.版面分析
[img]http://imgur.com/s4LAI[/img]
[img]http://imgur.com/zgnmU[/img]
(1).網站width(寬);100%、height(高):auto、margin;auto、padding;0px
7.跨瀏覽器問題與分析;並無差異

學號：1015445269

Re: [作業] 優良設計網站蒐集與分析

1015445240 — Sat, 29 Dec 2012 01:12:38 +0800

1.分析範例網站網址：http://www.tkec.com.tw/
2.網站名稱及主題：燦坤
3.主要消費族群：要買電器產品的人
4.設計風格：有3C資訊的風格
5.色彩分析
[img]http://i.imgur.com/QPu7K.jpg?1[/img]
白色為主色，藍色和黃色為輔助色
6.版面分析
(1)width(寬)：1349px height(高)：3300px margin：0 padding：0
(2)網站雙欄語法
[img]http://i.imgur.com/bkXir.jpg?1[/img]
7.跨瀏覽器問題與分析
IE6,IE7,IE8,firefox,googlechrome都可以

1015445240

Re: [作業] 優良設計網站蒐集與分析

1015445232 — Sat, 29 Dec 2012 00:00:25 +0800

1.分析範例網站網址： http://www.leofoo.com.tw/village/Info.aspx
2.網站名稱及主題：六福村

3.主要消費族群：喜歡玩遊樂設施或水的人
4.設計風格以白色和真實玩樂時的照片為主，字體用咖啡色，而加上後面淺色的背景插畫，帶來輕鬆自在的感覺
5.色彩分析 [img]http://i.imgur.com/KvUxz.jpg[/img]

6.版面分析 [img]http://i.imgur.com/wmkSQ.jpg[/img]
[img]http://i.imgur.com/uOx8Q.jpg[/img]

(1).網站width(寬):1024、height(高):750、margin:0、padding:0
(2)網站雙欄語法(於google離覽器中，按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：
[img]http://i.imgur.com/url1Q.jpg[/img]

7.跨瀏覽器問題與分析
使用IE6,IE7,IE8和googlechrome都沒有問題

學號：1015445232

Re: [作業] 優良設計網站蒐集與分析

1015445245 — Fri, 28 Dec 2012 21:55:31 +0800

1.分析範例網站網址： http://www.pooh-country.co.uk/

2.網站名稱及主題：Pooh Comer

介紹小熊維尼在英國的店家、旅館、咖啡館、和各個故事場地的介紹，還有很多當地的相關旅遊資訊
及商品的價位的告知和訂購

3.主要消費族群：喜愛小熊維尼的紛絲們

4.設計風格：趣味點帶有點古典感覺的普通網頁

5.色彩分析

[img]http://sphotos-b.ak.fbcdn.net/hphotos-ak-snc7/430927_142063712613352_1604480027_n.jpg[/img]

6.版面分析

[img]http://sphotos-h.ak.fbcdn.net/hphotos-ak-ash3/557527_142063822613341_811621425_n.jpg[/img]

(1).網站分析 : width：300 px、height：230 px、margin：auto、padding：o px

(2)網站雙欄語法：首頁的部分

7.跨瀏覽器問題與分析

(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)

IE6,IE7,IE8都正常 firefox 和 googlechrome 跑圖比較慢一點，其餘正常

學號：1015445245

Re: [作業] 優良設計網站蒐集與分析

1015445218 — Sun, 23 Dec 2012 23:25:08 +0800

1.分析範例網站網址：http://www.amo.com.tw/tw/default
2.網站名稱及主題：Amo阿默典藏蛋糕
「把簡單做到最好」是他們的企業哲學，產品雖然沒有令人驚艷的外表，但是卻有真切實在的用心，這就是阿默蛋糕。
3.主要消費族群：喜好蛋糕點的客人
4.設計風格：以簡單得設計手法來製作他們的網頁。
5.色彩分析 [img]http://imgur.com/ncPMP.jpg[/img]
6.版面分析
(1).網站width1903px、height 539px、margin 0、padding 0
(2)網站雙欄語法：
[img]http://imgur.com/euivM.jpg[/img]
右上主導列與法
[img]http://imgur.com/ICvfV.jpg[/img]
雙欄左側垂直導覽列的語法
[img]http://imgur.com/JWOvj.jpg[/img]

*不同形式的雙欄設計
[img]http://imgur.com/gHahn.jpg[/img]
語法
[img]http://imgur.com/DQULx.jpg[/img]
7.跨瀏覽器問題與分析

在不同瀏覽器觀察都無差異噢!

學號：1015445218

Re: [作業] 優良設計網站蒐集與分析

姚少涵 — Sat, 22 Dec 2012 21:01:29 +0800

1.分析範例網站網址：http://www.avrillavigne.com/us/home
2.網站名稱及主題：搖滾教主-艾薇兒
3.主要消費族群：喜歡搖滾音樂
4.設計風格春春搖滾黑暗
5.色彩分析
http://lf830206.imgur.com/all/
6.版面分析
http://imgur.com/ZHpNm
(1).網站width0px、height0px margin0px、padding0
pxposition: absolute; top: -10000px;
(2)網站雙欄語法
http://imgur.com/xfYRm
7.跨瀏覽器問題與分析
用瀏覽器IE6,IE7,IE8,firefox,googlechrom都可瀏覽

Re: [作業] 優良設計網站蒐集與分析

1015445213 — Mon, 17 Dec 2012 00:07:44 +0800

1.分析範例網站網址：http://forum.him.com.tw/forum_artist.asp?sid=2
2.網站名稱及主題： HIM華研國際音樂-S.H.E
華研音樂培養出好的音樂人，創造出更多好聽的音樂，也讓我們這些粉絲知道更多，自己喜歡的藝人一些行程及活動
3.主要消費族群：男女老少支持自己喜歡的藝人的粉絲
4.設計風格：整體以白、銀色為主要色調
　　　　　　讓人感覺有走自潮流尖端的時尚感
　　　　　　　　　　　　
5.色彩分析：

[img]http://i.imgur.com/Ygoq2.jpg?1[/img]

6.版面分析：(1) 網站 width：1349px、height：1336px、margin：0、padding：1

[img]http://i.imgur.com/z3ZBu.jpg[/img]

(2)http://i.imgur.com/zeW33.png?1
7.跨瀏覽器問題與分析
使用IE7 IE8 IE9 FireFox Google Chrome 都可以

Re: [作業] 優良設計網站蒐集與分析

blckdesign — Sun, 16 Dec 2012 23:32:16 +0800

1.分析範例網站：http://www.nybagelscafe.com/#
2.網站名稱及主題：貝果(http://www.nybagelscafe.com/#)
3.設計風格:美國普普藝術的剪貼風格
4.色彩分析:橘，咖啡
5.版面分析:還蠻讚的!有三行可以選擇!海有中間可以移動!另外部會太擠!!!
6.跨瀏覽器問題與分析
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
(若在不同瀏覽器上有發現不同的呈現情形，可以加註)

班級：視一C
學號： 1015445225

Re: [作業] 優良設計網站蒐集與分析

1015445203 — Sat, 24 Nov 2012 02:02:42 +0800

1.分析範例網站網址：http://www.kimberleyfanclub.com/bbs/index.php
2.網站名稱及主題：【陳芳語♥KIMBERLEY】國際後援會 - Kimberley International Fan Club
　　　　　　　　　這裡是一個支持Ｋｉｍｂｅｒｌｅｙ陳芳語的官方後援會，
　　　　　　　　　以粉紅色來代表Ｋｉｍｂｅｒｌｅｙ甜美可愛的感覺，
　　　　　　　　　是一個讓人看得很舒服的後援會論壇。
3.主要消費族群：支持Ｋｉｍｂｅｒｌｅｙ陳芳語的Fans。
4.設計風格：整體以白、粉紅色為主要色調；
　　　　　　讓人感覺溫馨與甜美，
　　　　　　像在吃糖果般甜蜜的滋味。　　　　　　
5.色彩分析：[URL=http://imgur.com/57S8U][IMG]http://i.imgur.com/57S8U.jpg[/IMG][/URL]
6.版面分析：(1) 網站 width：1583px、height：6259px、margin：5、padding：10
　　　　　　[URL=http://imgur.com/t1XmJ][IMG]http://i.imgur.com/t1XmJ.jpg[/IMG][/URL]　　　
　　　　　　(2) 網站雙欄語法：
　　　　　　主版面分析－[URL=http://imgur.com/GLkje][IMG]http://i.imgur.com/GLkje.png[/IMG][/URL]　
[URL=http://imgur.com/CqeJ0][IMG]http://i.imgur.com/CqeJ0.png[/IMG][/URL]
7.跨瀏覽器問題與分析
使用IE7 IE8 IE9 FireFox Google Chrome 都沒有問題：）

[作業08] 優良設計網站蒐集與分析

JinJin — Fri, 23 Nov 2012 14:21:37 +0800

1. 優良網站分析
2. 範例分析
2.1 範例網站：
2.2 網站名稱及主題：J-period
2.3 主要消費族群
2.4 設計風格：
2.5 色彩分析
2.6 版面分析
2.7 跨瀏覽器問題與分析

1. 優良網站分析

請每位同學於12/17前，至少選擇一個優良網站分析(越多越好)
以作為期末作業的參考

可下載附加檔案
並請參考以下的範例製作，回覆於此篇文章，註明：

1.分析範例網站網址：
2.網站名稱及主題：
3.主要消費族群：
4.設計風格
5.色彩分析
6.版面分析
[color=#666600](1).網站width(寬)、height(高)、margin、padding分析
(2)網站雙欄語法(於google離覽器中，按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：[/color]

7.跨瀏覽器問題與分析
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
(若在不同瀏覽器上有發現不同的呈現情形，可以加註)

學號：

[hr]

2. 範例分析

1. 範例網站：

http://www.j-period.com/jp/

2. 網站名稱及主題：J-period

從日本全國嚴選的日式餐具到精美擺飾
融合日本古典美與現代時尚美，提倡全新和風的品牌。不受時代潮流左右的日本之美與精神性，帶領現代生活進入嶄新的舒適生活樣式。

3. 主要消費族群

1.注重生活品味的白領階級
2.喜愛日式及東方品味的族群

4. 設計風格：

簡約的日式風格，以黑灰白為主色調，漢字以細黑體字應為以羅馬字為主，重點輔以粗體，優雅的簡潔的編排，襯托出古典時尚感。

5. 色彩分析

6. 版面分析

富有層次的導覽設計，值得學習，於右上有主要的導覽列，做為整個網站的主要內容架構。

首頁以圖片輪替的FLASH動畫呈現，讓瀏覽者欣賞最新的產品。

進入內容後，則於主導覽列下方出現麵包屑導航，使瀏覽者輕易的了解所處的網頁層級與所在。

離開首頁，進入其他頁面後，左方則彈性的出現垂直導覽列，顯示並連結更細部的訊息或產品介紹頁面，使網站的內容更加豐富與深入。

某些內容較單純的頁面(如：Concept)則無導覽列，僅出現標題及右側主內容。

(1).主頁尺寸與margin設定

#container { width: 860px; position: relative; margin: 0px auto; }

(2).網站雙欄語法
(按F12或於要檢查的部分右鍵檢查元素觀察)：

右上方主導覽列的語法

[IMG]http://i556.photobucket.com/albums/ss1/whc915/webna-1.jpg[/IMG]

雙欄左側垂直導覽列的語法

以

清單項目製作

[IMG]http://i556.photobucket.com/albums/ss1/whc915/webna-2.jpg[/IMG]

附註：
[size=small][color=#CC0066]麵包屑導航(BreadcrumbNavigation)[/color] 的概念來源於童話故事，它的作用是告訴訪問者他們目前在網站中的位置以及如何返回，麵包屑導航的意義在於明確告知用戶目前處於網站的何種位置，方便用戶通過該導航快速達到上級頁面。從用戶體驗角度講，這種導航的設計是建議在當前視窗打開的。

麵包屑導航一般都在導航的下面，形式一般為首頁 > 一級目錄名稱 > 二級目錄名稱 > 目前位置，儘量要把麵包屑導航的層次控制在四層以內，這樣也有利與搜尋引擎蜘蛛一層層往下爬。http://www.seohouse.org/seo-concepts-site-breadcrumbs.html[/size]

7. 跨瀏覽器問題與分析

(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)

於不同瀏覽器觀察無差異。

========================================================================================
[color=#CC0099]※並可參考[WEB] 優良設計網站蒐集與分析：
1.http://mepopedia.com/forum/read.php?804,18412
2.http://mepopedia.com/forum/read.php?804,15323※[/color]
========================================================================================