Re: [作業09] 優良設計網站蒐集與分析
1. 優良網站分析
請每位同學於12/21前，至少選擇一個優良網站分析(越多越好)
參考範例製作，回覆於此篇文章，註明：
1.分析範例網站：
2.網站名稱及主題：
3.設計風格
4.色彩分析
5.版面分析
[color=#666600](1).網站width(寬)、height(高)、margin、padding分析
(2)網站雙欄語法(按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：[/color]
6.跨瀏覽器問題與分析
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
(若在不同瀏覽器上有發現不同的呈現情形，可以加註)
班級：
學號：
[hr]
2. 範例分析
1. 範例網站：
http://www.j-period.com/jp/2. 網站名稱：J-period
從日本全國嚴選的日式餐具到精美擺飾
融合日本古典美與現代時尚美，提倡全新和風的品牌。不受時代潮流左右的日本之美與精神性，帶領現代生活進入嶄新的舒適生活樣式。
3. 設計風格：
簡約的日式風格，以黑灰白為主色調，漢字以細黑體字應為以羅馬字為主，重點輔以粗體，優雅的簡潔的編排，襯托出古典時尚感。
4. 色彩分析
5. 版面分析
富有層次的導覽設計，值得學習，於右上有主要的導覽列，做為整個網站的主要內容架構。
首頁以圖片輪替的FLASH動畫呈現，讓瀏覽者欣賞最新的產品。
進入內容後，則於主導覽列下方出現麵包屑導航，使瀏覽者輕易的了解所處的網頁層級與所在。
離開首頁，進入其他頁面後，左方則彈性的出現垂直導覽列，顯示並連結更細部的訊息或產品介紹頁面，使網站的內容更加豐富與深入。
某些內容較單純的頁面(如：Concept)則無導覽列，僅出現標題及右側主內容。
(1).主頁尺寸與margin設定
(2).網站雙欄語法
(按F12或於要檢查的部分右鍵檢查元素觀察)：
右上方主導覽列的語法
[IMG]http://i556.photobucket.com/albums/ss1/whc915/webna-1.jpg[/IMG]
雙欄左側垂直導覽列的語法
以
<dl>
<dt></dt>
<dd>
<ul>
<li></li>
</ul>
</dd>
</dl>
清單項目製作
[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]
6. 跨瀏覽器問題與分析
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
於不同瀏覽器觀察無差異。
========================================================================================
[color=#CC0099]※也可參考[WEB] 優良設計網站蒐集與分析：http://mepopedia.com/forum/read.php?804,15323※[/color]
========================================================================================
Edited 11 time(s). Last edit at 12/11/2011 01:05AM by HP.
(編輯記錄)
1.分析範例網站： http://www.bydeux.com/
2.網站名稱及主題： bydeux 韓國拍賣網站
3.設計風格 以黑白為主色調，簡單、樸實
4.色彩分析
5.版面分析
(1) width:240px margin0 position:absolute
6.跨瀏覽器問題與分析
都可使用
班級：視傳一Ｂ
學號：1001445008
2.網站名稱及主題： bydeux 韓國拍賣網站
3.設計風格 以黑白為主色調，簡單、樸實
4.色彩分析
5.版面分析
(1) width:240px margin0 position:absolute
6.跨瀏覽器問題與分析
都可使用
班級：視傳一Ｂ
學號：1001445008
2. 範例分析
1. 範例網站：
http://www.zeze.tw/index.html
2. 網站名稱：ZeZe
ZEZE是一家新進駐台灣的抹茶專賣店，希望將日本特有的抹茶文化帶進台灣，讓台灣的消費族群在國內也能享受日式風格的飲品以及抹茶的健康概念。
3. 設計風格：
簡單的風格，因為是抹茶專賣店，整體是用白色與抹茶綠與灰色帶出整體色調。
4. 色彩分析
5. 版面分析
(首頁)版面分析:
內頁(主打商品)版面分析
主打商品 內容項目製作
[IMG]http://i1120.photobucket.com/albums/l485/Aoi930727/-4-02-02.jpg[/IMG]
用IE與 Google觀看沒問題
(老師我快瘋掉了 改了好幾次圖片大小 但是一直跑出去ORZ.........................)
MEPOERs said:
1. 範例網站：
http://www.zeze.tw/index.html
2. 網站名稱：ZeZe
ZEZE是一家新進駐台灣的抹茶專賣店，希望將日本特有的抹茶文化帶進台灣，讓台灣的消費族群在國內也能享受日式風格的飲品以及抹茶的健康概念。
3. 設計風格：
簡單的風格，因為是抹茶專賣店，整體是用白色與抹茶綠與灰色帶出整體色調。
4. 色彩分析
5. 版面分析
(首頁)版面分析:
內頁(主打商品)版面分析
主打商品 內容項目製作
[IMG]http://i1120.photobucket.com/albums/l485/Aoi930727/-4-02-02.jpg[/IMG]
用IE與 Google觀看沒問題
(老師我快瘋掉了 改了好幾次圖片大小 但是一直跑出去ORZ.........................)
Edited 7 time(s). Last edit at 12/21/2011 04:15PM by 骸蒼Aoi.
(編輯記錄)
MEPOERs said:
JinJin: 拍拍!你可以用這個圖片語法，就不會超出去了，<img width=100% src=圖片網址 />
骸蒼Aoi: 嗚嗚 老師他變成奇怪的顏色QAQ
JinJin: 你把圖存成RGB看看!
1.分析範例網站：http://www.lafete.com.tw/ENG/index.html
2.網站名稱及主題：LAFELE 法月 當代法式料理
3.設計風格 :首頁以暗色系來突顯優雅的質感,
而內容則利用大量的紅色以及部分黑色,
使得畫面顯得更有質感,也帶點餐廳的溫馨感。
4.色彩分析
5.版面分析
.網站 width 980px height 640px margin 0
6. 跨瀏覽器問題與分析
使用IE瀏覽器,firefox,googlechrome看這個網站都沒問題~
班級:視傳一A
學號:1001445080
MEPOERs said:
2.網站名稱及主題：LAFELE 法月 當代法式料理
3.設計風格 :首頁以暗色系來突顯優雅的質感,
而內容則利用大量的紅色以及部分黑色,
使得畫面顯得更有質感,也帶點餐廳的溫馨感。
4.色彩分析
5.版面分析
.網站 width 980px height 640px margin 0
6. 跨瀏覽器問題與分析
使用IE瀏覽器,firefox,googlechrome看這個網站都沒問題~
班級:視傳一A
學號:1001445080
Edited 7 time(s). Last edit at 12/21/2011 11:13AM by Marissa Yeh.
(編輯記錄)
MEPOERs said:
Marissa Yeh: 老師,我的圖片有時出得來有時又出不來,是哪裡出了問題了嗎??
Marissa Yeh: 老師,沒事了,我搞定了 ~~ YA !!!
JinJin: good!
1.分析範例網站：
http://www.apple.com/tw/
2.網站名稱：
蘋果公司台灣官方網站
3.設計風格：
利用簡單的黑灰白色調去營造科技感,字體以中黑體為主,且利用少許的紅色字體標示出重點
4.色彩分析：
5.版面分析：
width：980px
height：918px
margin：18px auto
padding：0
6.跨瀏覽器問題與分析
IE6-8、firefox、google瀏覽器觀看皆無差異也沒有問題
班級：視傳一A
學號：1001445118
http://www.apple.com/tw/
2.網站名稱：
蘋果公司台灣官方網站
3.設計風格：
利用簡單的黑灰白色調去營造科技感,字體以中黑體為主,且利用少許的紅色字體標示出重點
4.色彩分析：
5.版面分析：
width：980px
height：918px
margin：18px auto
padding：0
6.跨瀏覽器問題與分析
IE6-8、firefox、google瀏覽器觀看皆無差異也沒有問題
班級：視傳一A
學號：1001445118
Edited 1 time(s). Last edit at 12/20/2011 11:48PM by 連竟成.
(編輯記錄)
1.分析範例網站：http://www.isabelle.com.tw/
2.網站名稱及主題：ISABELLE 伊莎貝爾｜喜餅 伴手禮
3.設計風格：簡約的法國浪漫古典風格，曲線造型裝飾畫面，使用紫、金、白，呈現優雅、高貴的氣息。
4.色彩分析：
5.版面分析：
(1).網站width(寬)、height(高)、margin、padding分析
mainContent {
width: 1000px;
height: auto;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
}
(2)網站雙欄語法(按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：
6.跨瀏覽器問題與分析
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
(若在不同瀏覽器上有發現不同的呈現情形，可以加註)
使用IE,Firefox,Google Chrome瀏覽皆相同呈現效果。
班級：視傳一B
學號：1001445049
2.網站名稱及主題：ISABELLE 伊莎貝爾｜喜餅 伴手禮
3.設計風格：簡約的法國浪漫古典風格，曲線造型裝飾畫面，使用紫、金、白，呈現優雅、高貴的氣息。
4.色彩分析：
5.版面分析：
(1).網站width(寬)、height(高)、margin、padding分析
mainContent {
width: 1000px;
height: auto;
margin: 0 auto 0 auto;
padding: 0 0 0 0;
}
(2)網站雙欄語法(按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：
6.跨瀏覽器問題與分析
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
(若在不同瀏覽器上有發現不同的呈現情形，可以加註)
使用IE,Firefox,Google Chrome瀏覽皆相同呈現效果。
班級：視傳一B
學號：1001445049
Edited 3 time(s). Last edit at 01/05/2012 02:07PM by lilac.
(編輯記錄)
1. 分析範例網站： http://greges.jp/
2. 網站名稱及主題： HOTEL GREGES
3. 設計風格： 簡約的風格，以灰白為主色調
4. 色彩分析：
5. 版面分析：
(1) 網站 width="" height=""
6.跨瀏覽器問題與分析
使用了 IE 、火狐、 Google 瀏覽器觀看這個網站沒問題
班級:視覺傳達設計系1A
學號:1001445076
2. 網站名稱及主題： HOTEL GREGES
3. 設計風格： 簡約的風格，以灰白為主色調
4. 色彩分析：
5. 版面分析：
(1) 網站 width="" height=""
6.跨瀏覽器問題與分析
使用了 IE 、火狐、 Google 瀏覽器觀看這個網站沒問題
班級:視覺傳達設計系1A
學號:1001445076
Edited 1 time(s). Last edit at 12/26/2011 09:10PM by 1001445076.
(編輯記錄)
1.分析範例網站：http://www.fontomas.com/
2.網站名稱及主題： 個人設計網站
3.設計風格 以橘色為主色調，加上整齊排版，視覺上活潑中帶有秩序感。
[img]http://i1118.photobucket.com/albums/k607/shiyi1126/123.jpg[/img]
[img]http://i1118.photobucket.com/albums/k607/shiyi1126/321-1.jpg[/img]
6. 跨瀏覽器問題與分析
使用IE瀏覽器和Google瀏覽器看這個網站沒問題!
班級:視傳一A
學號:1001445124
2.網站名稱及主題： 個人設計網站
3.設計風格 以橘色為主色調，加上整齊排版，視覺上活潑中帶有秩序感。
[img]http://i1118.photobucket.com/albums/k607/shiyi1126/123.jpg[/img]
[img]http://i1118.photobucket.com/albums/k607/shiyi1126/321-1.jpg[/img]
6. 跨瀏覽器問題與分析
使用IE瀏覽器和Google瀏覽器看這個網站沒問題!
班級:視傳一A
學號:1001445124
1.分析範例網站：http://www.kikukawa.com.tw/default.asp
2.網站名稱及主題：菊川日式料理
3.設計風格 :以暗色系來表現整體的典雅
4.色彩分析
色彩分析
![]()
5.版面分析
.網站 width 950px height 580px margin 0
6. 跨瀏覽器問題與分析
使用IE瀏覽器,firefox,googlechrome看這個網站都沒問題
班級:視傳一A
學號:1001445019
Teacher : Sorry 我遲交了
2.網站名稱及主題：菊川日式料理
3.設計風格 :以暗色系來表現整體的典雅
4.色彩分析
色彩分析
5.版面分析
.網站 width 950px height 580px margin 0
6. 跨瀏覽器問題與分析
使用IE瀏覽器,firefox,googlechrome看這個網站都沒問題
班級:視傳一A
學號:1001445019
Teacher : Sorry 我遲交了
1.分析範例網站：http://www.iheartdropdead.com/
2.網站名稱及主題：DROP DEAD
3.設計風格 無彩色 圖片又很繽紛
4.色彩分析
5.版面分析
(1).網站width: auto、height: 550px
6.跨瀏覽器問題與分析
班級：視傳1A
學號：1001445088
2.網站名稱及主題：DROP DEAD
3.設計風格 無彩色 圖片又很繽紛
4.色彩分析
5.版面分析
(1).網站width: auto、height: 550px
6.跨瀏覽器問題與分析
班級：視傳1A
學號：1001445088
Edited 1 time(s). Last edit at 12/28/2011 11:55AM by chingching.
(編輯記錄)
1. 分析範例網站：http://cafe-ole.jp/
2.網站名稱及主題：グリコ乳業 カフェオーレ
3.設計風格 以暖色系為主色調，簡單、可愛
4.色彩分析：
[/IMG]
5.版面分析：
[IMG]http://i1103.photobucket.com/albums/g464/green801110/02_02.jpg[/IMG]
[IMG]http://i1103.photobucket.com/albums/g464/green801110/03.jpg[/IMG]
[IMG]http://i1103.photobucket.com/albums/g464/green801110/04-1.jpg[/IMG]
班級：視傳一A
學號：1001445013
2.網站名稱及主題：グリコ乳業 カフェオーレ
3.設計風格 以暖色系為主色調，簡單、可愛
4.色彩分析：
[/IMG]
5.版面分析：
[IMG]http://i1103.photobucket.com/albums/g464/green801110/02_02.jpg[/IMG]
[IMG]http://i1103.photobucket.com/albums/g464/green801110/03.jpg[/IMG]
[IMG]http://i1103.photobucket.com/albums/g464/green801110/04-1.jpg[/IMG]
班級：視傳一A
學號：1001445013
1.分析範例網站：http://www.lightpublicity.co.jp/index.html
2.網站名稱及主題：設計公司網站
3.設計風格 簡約風
4.色彩分析
5.版面分析
6.跨瀏覽器問題與分析
ok
班級：視傳1A
學號：1001445060
2.網站名稱及主題：設計公司網站
3.設計風格 簡約風
4.色彩分析
5.版面分析
6.跨瀏覽器問題與分析
ok
班級：視傳1A
學號：1001445060