Re: [作業 ] 優良設計網站蒐集與分析
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設定
(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]
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
3.http://mepopedia.com/forum/read.php?1173,27997※[/color]
========================================================================================
1.分析範例網站網址：http://www.jeanco.com.tw/cht/who.html
2.網站名稱及主題：JUNTAPE 知音紙膠帶
3.主要消費族群：喜愛紙膠帶的各年齡層人
4.設計風格 簡單易懂的風格搭配藍綠色當底色讓人有一種文青的感覺
5.色彩分析
6.版面分析
[img]https://scontent-b-pao.xx.fbcdn.net/hphotos-xap1/t31.0-8/s960x960/10687530_1013282865355977_5689053653096309959_o.jpg[/img]
(1).網站width(寬)、height(高)、margin、padding分析
網站width(寬)926、height(高)169
margi-bottom: 0px; margin-left: 0px; argin-right: 0px; margin-top: 0px;、padding: 0
(2)網站雙欄語法(於google離覽器中，按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：
[img]https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpa1/v/t1.0-9/10868178_1013309202020010_2785278822522912379_n.jpg?oh=b9b4baa2713389d5deb656a9330f540d&oe=5501C16C&__gda__=1429935622_8ad3f634e8680a533b78e193332d830c[/img]
7.跨瀏覽器問題與分析
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
(若在不同瀏覽器上有發現不同的呈現情形，可以加註)
1025445072 王人永
2.網站名稱及主題：JUNTAPE 知音紙膠帶
3.主要消費族群：喜愛紙膠帶的各年齡層人
4.設計風格 簡單易懂的風格搭配藍綠色當底色讓人有一種文青的感覺
5.色彩分析
6.版面分析
[img]https://scontent-b-pao.xx.fbcdn.net/hphotos-xap1/t31.0-8/s960x960/10687530_1013282865355977_5689053653096309959_o.jpg[/img]
(1).網站width(寬)、height(高)、margin、padding分析
網站width(寬)926、height(高)169
margi-bottom: 0px; margin-left: 0px; argin-right: 0px; margin-top: 0px;、padding: 0
(2)網站雙欄語法(於google離覽器中，按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：
[img]https://fbcdn-sphotos-c-a.akamaihd.net/hphotos-ak-xpa1/v/t1.0-9/10868178_1013309202020010_2785278822522912379_n.jpg?oh=b9b4baa2713389d5deb656a9330f540d&oe=5501C16C&__gda__=1429935622_8ad3f634e8680a533b78e193332d830c[/img]
7.跨瀏覽器問題與分析
(於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出)
(若在不同瀏覽器上有發現不同的呈現情形，可以加註)
1025445072 王人永
1.分析範例網站網址： http://www.casadelcacao.com/html/news/index.aspx
2.網站名稱及主題： Casa Del Cacao 可可府巧克力專賣店
3.主要消費族群： 喜愛吃巧克力的消費者
4.設計風格： 利用簡單的曲線和精美圖案設計的網站
5.色彩分析： 主要是以藍色系列為主，加上一點點的藍綠色和些許的白色做點綴
6.版面分析：
(1).網站width(寬) 996px、height(高)307px、padding:0px
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
(2)網站雙欄語法(於google離覽器中，按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：
學號： 1025445060 黃淯婷
2.網站名稱及主題： Casa Del Cacao 可可府巧克力專賣店
3.主要消費族群： 喜愛吃巧克力的消費者
4.設計風格： 利用簡單的曲線和精美圖案設計的網站
5.色彩分析： 主要是以藍色系列為主，加上一點點的藍綠色和些許的白色做點綴
6.版面分析：
(1).網站width(寬) 996px、height(高)307px、padding:0px
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
(2)網站雙欄語法(於google離覽器中，按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：
學號： 1025445060 黃淯婷
Edited 1 time(s). Last edit at 12/17/2014 02:16AM by 黃淯婷.
(編輯記錄)
1.分析範例網站網址：http://chunshuitang.com.tw/index.php
2.網站名稱及主題：春水堂
3.主要消費族群： 適合每種族群
4.設計風格 有中式味道的人物及背景
5.色彩分析
6.版面分析
首頁會被動態背景吸引，整個色調讓人感到清爽愉快，最新消息在首頁能讓消費者清楚看到。
進入其他頁面，左方有垂直導覽列，背景也是動態圖，網站內容介紹得很詳細。
(1).主頁尺寸與margin設定
#layout {
height：911px;
position: relative;
width：；1600px;
}
(2)網站雙欄語法
清單項目製作
7.跨瀏覽器問題與分析
於IE7,googlechrome瀏覽器皆沒問題
1025445015 陳曉琪
2.網站名稱及主題：春水堂
3.主要消費族群： 適合每種族群
4.設計風格 有中式味道的人物及背景
5.色彩分析
6.版面分析
首頁會被動態背景吸引，整個色調讓人感到清爽愉快，最新消息在首頁能讓消費者清楚看到。
進入其他頁面，左方有垂直導覽列，背景也是動態圖，網站內容介紹得很詳細。
(1).主頁尺寸與margin設定
#layout {
height：911px;
position: relative;
width：；1600px;
}
(2)網站雙欄語法
清單項目製作
7.跨瀏覽器問題與分析
於IE7,googlechrome瀏覽器皆沒問題
1025445015 陳曉琪
1.分析範例網站網址： http://www.lg.com/tw
2.網站名稱及主題： 韓國品牌LG台灣的官方網站
3.主要消費族群： 年輕人至老年人
4.設計風格 ： 簡潔易懂，讓人一下就明白自己想要看到的商品在哪
5.色彩分析： 主要是以白色為準，以及LOGO的顏色來表達網站本身的色彩
6.版面分析 ：
(1).網站width(寬)、height(高)、margin、padding分析
網站width(寬)1583、height(高)2372
;margin: 0 px、padding: 0 px
(2)網站雙欄語法(於google離覽器中，按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：
7.跨瀏覽器問題與分析
於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出
於不同瀏覽器觀察都沒有差異。
1025445102 邱筱惠
2.網站名稱及主題： 韓國品牌LG台灣的官方網站
3.主要消費族群： 年輕人至老年人
4.設計風格 ： 簡潔易懂，讓人一下就明白自己想要看到的商品在哪
5.色彩分析： 主要是以白色為準，以及LOGO的顏色來表達網站本身的色彩
6.版面分析 ：
(1).網站width(寬)、height(高)、margin、padding分析
網站width(寬)1583、height(高)2372
;margin: 0 px、padding: 0 px
(2)網站雙欄語法(於google離覽器中，按F12或於要檢查的部分右鍵檢查元素觀察)(是否有學過)(加分題)：
7.跨瀏覽器問題與分析
於不同瀏覽器(IE6,IE7,IE8,firefox,googlechrome)的觀察與問題提出
於不同瀏覽器觀察都沒有差異。
1025445102 邱筱惠