Re: [作業05] 網頁美感排版設計

1. 網頁美感排版設計參考講義

請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770

[hr]

2. 設計目的

1.了解以photoshop製作mockup的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧

3. 設計主題

1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁 http://www.most.gov.tw （http://www.moc.gov.tw）
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)

http://www.most.gov.tw/newwp.aspx?act=Detail&id=29c94e68bc7243b0a9fd2ff5103d37a9&ctunit=31&ctnode=42&mp=1
http://www.moc.gov.tw/information_250_35497.html
http://event2.culture.tw/NCO/portal/Registration/C0103MAction?actId=50005

(4)列表頁(加分)
http://www.most.gov.tw/wlp.aspx?CtUnit=31&mp=1&CtNode=42
http://www.moc.gov.tw/informationlist_250.html

[hr]

4. 製作步驟

1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.存成html，並上傳至ＦＴＰ，於hw05中

7.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud

6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：

作業網址：

(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得：

學號

[hr]

5. 注意事項

1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。

[hr]

6. Adobe Creative Cloud

請至http://www.adobe.com/tw/
註冊帳號

將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud

體驗雲端共享ＰＳＤ的便利。

[hr]

7. 作業繳交

1.製作連結提案模擬，上傳網址為
http://mepopedia.com/~css104-2a/hw05/hw05-1035445XXX

2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud

[hr]

8. 上課影音

網頁視覺提案作業講解



[hr]
上傳Adobe CC 教學



[hr]

截圖軟體
http://soft8ware.com/Graphic/2/455.html#ecms

[hr]
(1)原網站名稱及網址： [url=http://www.kh.edu.tw/]高雄市教育部網站-英文版[/url]
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： [url=http://www.ok-studios.de/home/]OK-Studios[/url]

[hr]

1) 原本的網站:
http://www.shop2000.com.tw/mf/home
因為圖片太多,大小不一,版面有些混亂,網頁顏色普通,字體,行距分別不大,難以閲讀.沒有主視覺,重要資料不能夠突出

2) 參考網站網址：
https://www.aromebakery.com.hk/tc/category_detail.asp?type=all
商品顯示清楚簡潔,版面分類簡單清析,配色令人感覺清新自然,字體清楚,標題及內文容易閲讀



(編輯記錄)

1.請選擇一需要修改的網站，並列出需要修改的原因

http://www.horse.com.tw/index.htm
網頁主體部份太狹窄，標題文字的陰影也用得過強，可能做成閱讀上的不便；另外，指向選項的時候雖然有跳出選單，可是鼠標與選項文字都沒有改變，可能做成混淆。


其他下面的部份我不是很懂……今天聽完課我再補。

1) 原本的網站:
https://tw.bid.yahoo.com/tw/2092072041-category.html?.r=1462167879&hpp=hp_category_2092072041
有字又有圖很不清楚很亂

2) 參考網站網址：
http://www.eststore.tw/
商品圖片清楚簡潔,版面分類很棒看到自己喜歡的即可點開,

1) 原本的網站:
http://petbird.tw/article5497.html
排版沒有設計感，又雜亂

2) 參考網站網址：
http://www.moricaca.com/
簡潔又有設計感

(1)首頁

View post on imgur.com

(2)滑鼠移過的效果 (線上訂購)

View post on imgur.com

(3)進入後的至少其中一子頁。(線上訂購)

View post on imgur.com

並請回覆：

作業網址：http://mepopedia.com/~css104-2a/hw05/hw05-1035445211

(1)網站網站網址及主題：http://www.twtmtea4cake.com.tw/
(2)參考網站網址與網站名稱：http://www.zhanlu-coffee.com/
(3)色彩計畫：咖啡、黑、白
(4)風格特色：優雅、時尚
(5)請整理以下數值：
字體設定(font-family) 14pt
h1,h2標題級數 16pt 21pt
h3文章標題級數 18pt
內文級數(font-size)(單位px) 12pt
區塊內與區塊間的距離(padding)(margin)(單位px) 170
網站寬度(width)(單位px) 1274

(6)製作心得： 終於做完
學號:1035445211



(編輯記錄)

1) 原本的網站:
http://www.dramaq.biz/
太雜亂WWW

2) 參考網站網址：
http://www.monikakulinska.pl/
https://www.eyescream.com.tw/
商品圖片清楚簡潔,版面分類很棒

學號：10355445115



(編輯記錄)

1) 原本的網站:

http://dessertking.pixnet.net/blog/category/1414398
很普通

2) 參考網站網址：

http://www.sweetemily.com.tw/about_us.html
清幽美

學號：10355445037

作業網址：http://mepopedia.com/~css104-2a/hw05/hw05-1035445145

(1)網站網站網址及主題：基隆市政府
http://www.klcg.gov.tw/home.jsp?mserno=201502120003&serno=200710020002&menudata=KlcgMenu&contlink=klcg/content/introduction.jsp&level2=Y
覺得這個網站不夠清楚 而且版面比較傳統
(2)參考網站網址與網站名稱：https://www.world-d.tw/about.php
這個網站很有設計感 也很清楚 很乾淨整齊
(3)色彩計畫：
(4)風格特色： 簡單乾淨
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離200(padding)(margin)(單位px)
網站寬度960(width)(單位px)

(6)製作心得： 排版的時候比較麻煩

學號：1035445145



(編輯記錄)

1) 原本的網站:


2) 參考網站網址：
http://www.91toy.com.tw/
整體上看起來是舒服

(1)首頁，

View post on imgur.com

(2)滑鼠移過的效果，(會員中心)

View post on imgur.com

(3)進入後的至少其中一子頁。(關於)

View post on imgur.com

並請回覆：

作業網址：http://mepopedia.com/~css104-2a/hw05/hw05-1035445214

(1)網站網站網址及主題：
(2)參考網站網址與網站名稱： http://www.asto-food.com.tw/
(3)色彩計畫：白色、灰色、 粉色
(4)風格特色：簡潔可口可愛
(5)請整理以下數值：
字體設定(font-family) 10pt
h1,h2標題級數 16pt 18pt
h3文章標題級數 18pt
內文級數(font-size)(單位px) 12pt
區塊內與區塊間的距離(padding)(margin)(單位px) 170
網站寬度(width)(單位px) 1420

(6)製作心得： ...╮(╯v╰)╭

1) 原本的網站:
http://shop.mvp-icecream.com.tw/index.asp
太過繁瑣，沒什麼重點，不夠吸引人

2) 參考網站網址：
http://www.asto-food.com.tw/
以圖為主容易吸引人



學號：1035445214



(編輯記錄)

) 原本的網站:
http://www.ftd.com.tw/flower/front/bin/home.phtml
雜亂無章

2) 參考網站網址：
http://www.feeling18c.com/
版面清晰，也叫好尋找想要東西。

(1)首頁，

(2)滑鼠移過的效果，(dpi雜誌)

(3)進入後的至少其中一子頁。(dpi雜誌)


作業網址：http://mepopedia.com/~css104-2a/hw05/hw05-1035445088

(1)網站網站網址及主題： 以dpiX小學校的購物網站來修改。
(2)參考網站網址與網站名稱：
dpiX小學校
http://buy.ezship.com.tw/street/fb_store_main.jsp?store_id=ezship_hlxk&strCatLevel1=
屈臣氏
http://www.watsons.com.tw/
(3)色彩計畫：咖啡色、白色
(4)風格特色：簡約、整齊排列
(5)請整理以下數值：
字體設定(font-family) 14pt
h1,h2標題級數 20pt 20pt
h3文章標題級數 20pt
內文級數(font-size)(單位px) 14pt
區塊內與區塊間的距離(padding)(margin)(單位px) 150px
網站寬度(width)(單位px) 1270px

(6)製作心得：PS製作艱難... 繼續努力

學號：1035445088

1) 原本的網站:
http://buy.ezship.com.tw/street/fb_store_main.jsp?store_id=ezship_hlxk&strCatLevel1=
太單調,可以再多一點設計感。

2) 參考網站網址：
https://store.line.me/home/zh-Hant
http://www.watsons.com.tw/
清晰整齊,畫面更豐富。

學號：1035445088



(編輯記錄)

原本的網站 :

中間內文的部分太過突兀，一些細節的部分不太適合。
:
http://www.louisacoffee.com.tw/

作業網址：

http://mepopedia.com/~css104-2a/hw05/hw05-1035445097

(1)網站網站網址及主題： 路易莎咖啡LOUISA COFFEE


(2)參考網站網址與網站名稱：

http://www.lamourfou.be/en

(3)色彩計畫： 以咖啡的色調為主

(4)風格特色： 美式風格的網站

(5)請整理以下數值：

字體設定(font-family)

導覽列級數 13 pt

h1級數 48 pt

網站寬度(width) 1257 px

(6)製作心得：

比較好看的網站感覺都是以攝影或插畫的底圖，讓整個網站看起來乾淨簡單為主。

學號

1035445097

原本的網站:
http://www.uforadio.com.tw/
資訊比較不明確

參考網站網址與網站名稱：
http://www.bbc.co.uk/radio
參考BBC電台網站

(1)網站主題:飛碟聯播網

(2)作業網址:
http://mepopedia.com/~css104-2a/hw05/hw05-1035445217/index.html

(3)色彩計畫：藍色為主 搭配白色與灰紫色
(4)風格特色：清新簡潔
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數 14
h3文章標題級數 12
內文級數(font-size)10
網站寬度(width)1348

(6)製作心得：資訊越多版面越難排

學號 1035445217



(編輯記錄)

1) 原本的網站:

http://www.hotel-toyo.jp/cn/access.html
過於單調，沒有什麼設計感

2) 參考網站網址：

http://bunkahostel.jp/zh/
簡單，清楚，有設計感

1) 原本的網站:

http://www.ruten.com.tw/

有點雜亂，顏色太多

2) 參考網站網址：

http://www.obdesign.com.tw/

較乾淨整齊

學號：10355445073

1) 原本的網站:

https://tw.bid.yahoo.com/

有點凌亂 排版不一

2) 參考網站網址：

https://www.hm.com/tw/

簡單明瞭

學號：10355445124

作業網址：http://mepopedia.com/~css104-2a/hw05/hw05-1035445157

(1)網站網站網址及主題：http://www.moricaca.com/
(2)參考網站網址與網站名稱： 森果香
(3)色彩計畫：白色、咖啡色、黃色
(4)風格特色：簡單明瞭
(5)請整理以下數值：
字體設定(font-family) 10pt
h1,h2標題級數 30pt ?pt
h3文章標題級數 15pt
內文級數(font-size)(單位px) 15pt
區塊內與區塊間的距離(padding)(margin)(單位px) 0的樣子哈哈哈哈
網站寬度(width)(單位px) 1000px
(6)製作心得：有點麻煩

1) 原本的網站:
http://petbird.tw/article5497.html
排版沒有設計感，又雜亂

2) 參考網站網址：
http://www.moricaca.com/
簡潔又有設計感



學號：1035445157

1. 原本的網站:

http://www.books.com.tw/

死板，無趣

2. 參考網站網址：

http://yp21c.com/sse/shop/ssebook.html

配色強烈，卻簡單

學號：10355445121

並請回覆：

作業網址：http://mepopedia.com/~css104-2a/hw05/hw05-1035445169

(1)網站網站網址及主題：http://www.1010apothecary.com.tw/brand.php?id=4&cat=115
此網站色調較為單調,在排版上較沒有明顯的分類。
(2)參考網站網址與網站名稱：http://www.yankeecandle.com.tw/Default.aspx
yankeecandle的網站以圖與色塊來呈現,給人較活潑的感覺。
(3)色彩計畫：以草綠色為主色調搭配其他較為鮮明暖色的色彩。
(4)風格特色：活潑 、時尚
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得： 看了好久終於做完了!!!!!!!!!!!!無限感動
學號:1035445169

(1)首頁


(2)滑鼠移過的效果 (臉部系列)


(3)進入後的至少其中一子頁。(臉部系列)


並請回覆：

作業網址：http://mepopedia.com/~css104-2a/hw05/hw05-1035445130

(1)網站網站網址及主題：http://shop.thebodyshop.com.tw/product_category.php?store_type_sn=130&category_sn=900&sort_by=top_sale&page=2#div_middle
(2)參考網站網址與網站名稱：http://www.superlovers.fr/#home
(3)色彩計畫：粉紅系列
(4)風格特色：甜美
(5)請整理以下數值：
字體設定(font-family) 12pt
h1,h2標題級數 12pt 63pt
區塊內與區塊間的距離(padding)(margin)(單位px) 90
網站寬度(width)(單位px) 1500

(6)製作心得： 第一次做 所以花蠻久的時間
學號:1035445130



(編輯記錄)

作業網址：http://mepopedia.com/~css104-2a/hw05/hw05-1035445001

按鈕/首頁 關於


(1)網站網站網址及主題：國立歷史博物院 http://www.nmh.gov.tw/zh/index.htm
(2)參考網站網址與網站名稱： 濤靈感 http://pick.mydesy.com/
(3)色彩計畫：藍紅色系
(4)風格特色：莊嚴
(5)製作心得：學習別人網頁的技巧然後示範 很有趣

學號 1035445001



(編輯記錄)

1) 原本的網站:
http://www.arte.gov.tw/index.asp
字與圖太過花俏，造成背景與作品有些混淆

2) 參考網站網址：
http://theartmag.com/
版面分類清楚明瞭，風格和配色簡單，襯托作品

1) 原本的網站:
http://global.gmarket.co.kr/Home/Main
東西資訊太多，令人不太想去一一點閱

2) 參考網站網址：
http://www.united-f.com/
簡單反而更讓商品突出，反而能更明確知道商品。

學號：1035445046

作業網址：http://mepopedia.com/~css104-2a/hw05/hw05-1035445172

(1)網站網站網址及主題：義美
http://www.imeifoods.com.tw/
覺得這個網站很雜亂，而且很花
(2)參考網站網址與網站名稱：http://www.misterdonut.com.tw/itmProductIntelligenceList.html?form.categoryId=1000&leftMenuId=1010
覺得這個網站很可愛，也適合義美
(3)色彩計畫：以粉色為主，配合義美的顏色
(4)風格特色： 可愛
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數12
h3文章標題級數 12
內文級數(font-size)(單位px) 8
區塊內與區塊間的距離200(padding)(margin)(單位px)
網站寬度900(width)(單位px)

(6)製作心得；排版的時候花了很多時間

學號：1035445172

原本的網站 :

有點雜亂

https://rent.591.com.tw/

作業網址：

http://mepopedia.com/~css104-2a/hw05/hw05-1035445025

網站網站網址及主題： 591租屋網

參考網站網址與網站名稱：

http://www.htc.com/tw/

製作心得： (°ཀ°)

學號 : 1035445025

1) 原本的網站:
https://tw.bid.yahoo.com/
很亂

2) 參考網站網址：
http://www.asos.com/
清楚簡潔

學號：1035445121

1) 原本的網站:
https://tw.bid.yahoo.com/theme/man/main.html?co_servername=ayfp_ecm_aC160614_430_1a101cf&co_servername2=aC0614#M-M_M1_4
有點混亂,感覺非常的擠

2) 參考網站網址：
http://www.supremenewyork.com/
雖然是英文的,不過很簡潔,想要甚麼樣系列的都標示很清楚

作業網址：http://mepopedia.com/~css104-2a/hw05/hw05-1035445103/

(1)網站網站網址及主題：http://www.homebakery.com.tw/index.asp
(2)參考網站網址與網站名稱： http://www.fayalife.com.tw/products.htm
(3)色彩計畫：米黃色、藍色
(4)風格特色：休閒
(5)請整理以下數值：
字體設定(font-family)
h1標題級數 24
h3文章標題級數 14
內文級數(font-size)(單位px)12
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 1576

(6)製作心得：做完了 很開心

學號 1035445103

作業網址：http://mepopedia.com/~css104-2a/hw05/hw05-1035445010

(1)網站網站網址及主題：1588服飾網
http://www.1588.com.tw/index.php

網站首頁東西較少,較為單調 也沒有服飾幻燈片與熱賣商品介紹
(2)參考網站網址與網站名稱：多琳娜服飾
http://www.doreena.com.tw/

一進首頁有幻燈片也有最新消息與熱門商品 所有照片也有設計編排過
(3)色彩計畫： 簡約白色 搭配圖騰
(4)風格特色： 簡單乾淨
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離200(padding)(margin)(單位px)
網站寬度960(width)(單位px)

(6)製作心得： 排版的時候比較時希望能夠多點東西 可是卻又覺得太雜亂 有點難取捨

學號：1035445010

作業網址： http://mepopedia.com/~css104-2a/hw05/hw05-1035445055/

(1)網站網站網址及主題： http://www.shiseido.com.tw/
(2)參考網站網址與網站名稱： https://www.cupetit.com/
(3)色彩計畫： 用紫色和黃色做對比
(4)風格特色： 用對比的亮麗色彩來呈現商品的價值
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數 24
h3文章標題級數 18
內文級數(font-size)(單位px)12
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 1583

(6)製作心得： 好難

學號 1035445055