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

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

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

[hr]

2. 設計目的

1.解讀與思考設計主題如何透過網頁形式表現
2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧

3. 設計主題

請選擇一需要修改的網站，並列出需要修改的原因
或以科技部，或文化部等網站為修改範例
http://www.most.gov.tw
http://www.moc.gov.tw

蒐集優良參考範例，並提出修改方案
以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/~web103-2c/hw05/hw05-1025445XXX

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

[hr]

8. 上課影音

網頁視覺提案作業講解



[hr]
上傳Adobe CC 教學



[hr]



(編輯記錄)

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445072/

(1)原網站名稱及網址： [url=http://www.moc.gov.tw/]文化部[/url]
(2)參考網站網址與網站名稱： [url=http://www.seymourpowell.com/]seymourpowell[/url]
(3)色彩計畫：藍色系
(4)風格特色： 簡單風格
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 18
h3文章標題級數 18
內文級數(font-size)(單位px) 10
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 900px

(6)製作心得： 不難 需要的是耐心跟時間

1025445072 王人永



(編輯記錄)

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445069

(1)原網站名稱及網址：[url=http://event.moc.gov.tw/mp.asp?mp=1]全國藝文活動資訊系統網[/url]
(2)參考網站網址與網站名稱：[url=http://www.m.dxmonline.com/]大小創意[/url]
(3)色彩計畫：較鮮豔豐富的
(4)風格特色： 簡單 明瞭
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 18
h3文章標題級數 18
內文級數(font-size)(單位px) 10
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 1000px

1025445069 古珮儒



(編輯記錄)

(1)原網站名稱及網址： [url=http://www.ntpc.edu.tw/web/Home?command=display&page=flash]教育部[/url]
(2)參考網站網址與網站名稱： [url=http://www.lamo3.com.tw/Shop/]Lamo 3[/url]
(3)色彩計畫：糖果色
(4)風格特色： 可愛有個性
(5)請整理以下數值：
字體設定(font-family) harlow Solid Italic 標楷體
h1,h2標題級數 18
h3文章標題級數 21
內文級數(font-size)(單位px) 10
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 1250px

1025445063 洪筠真

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445153/
(1)原網站名稱及網址：[url=https://www.centrepompidou.fr/fr/Le-Centre-Pompidou#667]LE CENTRE POMPIDOU[/url]
(2)參考網站網址與網站名稱：[url=http://www.k2.pl/#!/en/main/]K2[/url]
(3)色彩計畫：暗色系
(4)風格特色： 成熟穩重有藝術感
(5)請整理以下數值：
字體設定(font-family) harlow Solid Italic 微軟正黑
h1,h2標題級數 18
h3文章標題級數 21
內文級數(font-size)(單位px) 10
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 最大
(6)製作心得： 有點搞到霧煞煞~
1025445153 廖敏君



(編輯記錄)

作業網址：http://mepopedia.com/~web103-2c/hw05/hw05-1025445060


(1)原網站名稱及網址： 文化部
(2)參考網站網址與網站名稱：http://www.doeasy.com.tw/latest/layout-01/index.html
(3)色彩計畫：白灰色簡單色系
(4)風格特色： 簡單風格
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 18
h3文章標題級數 18
內文級數(font-size)(單位px) 9
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 900px

製作心得：連結不知道怎麼連回首頁


1025445060 黃淯婷



(編輯記錄)

作業網址：http://mepopedia.com/~web103-2c/hw05/hw05-1025445048

(1)原網站名稱及網址： http://www.tcap.taipei/
(2)參考網站網址與網站名稱：http://www.berkeley.edu/
(3)色彩計畫：簡單色
(4)風格特色： 簡單 明瞭
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 18
h3文章標題級數 18
內文級數(font-size)(單位px) 10
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 1000px

1025445048 林侑慶



(編輯記錄)

作業網址：http://mepopedia.com/~web103-2c/hw05/hw05-1025445051

(1)原網站名稱及網址：
(2)參考網站網址與網站名稱：http://www.berkeley.edu/
(3)色彩計畫：簡單
(4)風格特色： 乾淨
(5)請整理以下數值：
字體設定(font-family) 黑體


1025445051 林芳伃

(1)原網站名稱及網址：http://library.hchcc.gov.tw/ch/index.asp
(2)參考網站網址與網站名稱：http://urschool.org/#!/
(3)色彩計畫：鮮豔、很跳的顏色
(4)風格特色：塊狀版面、簡單拼接
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數 40px
h3文章標題級數 30px
內文級數(font-size)(單位px)12px
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 900px

(6)製作心得：

1025445138 梁奕堯



(編輯記錄)

作業網址：http://mepopedia.com/~web103-2c/hw05/hw05-1025445111


(1)原網站名稱及網址：http://www.feds.com.tw/store/?lang=tw&store=24
(2)參考網站網址與網站名稱：http://www.re-design.com.tw/works.php
(3)色彩計畫：logo的色系、白色
(4)風格特色： 簡單明瞭
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 14
h3文章標題級數 13
內文級數(font-size)(單位px) 9
區塊內與區塊間的距離(padding)(margin)(單位px) 15px
網站寬度(width)(單位px) 1300px

製作心得：步驟有點多


1025445111 莊于萱

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445090/

(1)網站網站網址及主題： [url=http://www.my.org.tw/]青年期刊[/url]
(2)參考網站網址與網站名稱： http://www.getcorpus.com/
(3)色彩計畫： 參考網站的色系、深灰 淺灰 桃紅
(4)風格特色： 簡單明瞭
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得：

1025445090 鍾婷玟



(編輯記錄)

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445018/
(1)原網站名稱及網址：高雄市立美術館
(2)參考網站網址與網站名稱：http://wag.ca/
(3)色彩計畫：藍.綠色系
(4)風格特色： 幾何簡單風格
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 18
h3文章標題級數 16
內文級數(font-size)(單位px) 10
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 1300px

(6)製作心得： 雖然不會很難 但是做蠻久的

1025445018 陳怡融



(編輯記錄)

作業網址：

(1)原網站名稱及網址：聖瑪莉 http://www.sunmerry.com.tw/articles/category/brand-story.html
(2)參考網站網址與網站名稱：charmcitycakes http://www.charmcitycakes.com/home
(3)色彩計畫：柔和的顏色
(4)風格特色： 簡單 明瞭
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 18
h3文章標題級數 18
內文級數(font-size)(單位px) 10
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 1000px

1025445180 謝芷寧

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445135/

(1)網站網站網址及主題： [url=http://r.search.yahoo.com/_ylt=A8tUwY4Sv1xVPm8Ak11r1gt.;_ylu=X3oDMTE0MTJjZThuBGNvbG8DdHcxBHBvcwMxBHZ0aWQDVklQVFcxNV8xBHNlYwNzcg--/RV=2/RE=1432170386/RO=10/RU=http%3a%2f%2fwww.rosehouse.com%2frosehouse%2findex.php/RK=0/RS=GyGlzEbXktQkiiniGbvSpGhdZC0-]Rose House[/url]
(2)參考網站網址與網站名稱：[url=http://www.auntstella.com/]Aunt Stella[/url]
(3)色彩計畫： 貴族藍 古典金
(4)風格特色： 高貴
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得： 我寧願打HTML語法

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445039/
(1)原網站名稱及網址：http://www.farglory-realty.com.tw/building.php?building_id=57
(2)參考網站網址與網站名稱：http://yorozu-karino.com
(3)色彩計畫：企業標準色藍色/白色
(4)風格特色：專業簡潔乾淨
(5)請整理以下數值：
字體設定(font-family)Arial
h1,h2標題級數36
h3文章標題級數36
內文級數(font-size)(單位px)26
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 最大
(6)製作心得：雖然花比較多時間但學到新的東西
1025445039 何佳霖

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445015/

(1)原網站名稱及網址： 復仇者聯盟2http://marvel.com/
(2)參考網站網址與網站名稱： 博物http://www.artic.edu/
(3)色彩計畫： 紅-主色 白-搭配色
(4)風格特色： 科技感
(5)請整理以下數值：
字體設定(font-family) 細明體 黑體
h1,h2標題級數 45 ,18
h3文章標題級數 12
內文級數(font-size)(單位px) 12
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 1902px

(6)製作心得：
很酷的快速方法

1025445015 陳曉琪



(編輯記錄)

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445030

(1)原網站名稱及網址：Chappie Offical Movie
(2)參考網站網址與網站名稱：http://marvel.com/movies
(3)色彩計畫： 灰暗科技
(4)風格特色： 簡單 明瞭
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 18
h3文章標題級數 18
內文級數(font-size)(單位px) 10
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 1000px

1025445030 王泰然

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445123

(1)原網站名稱及網址：國立自然科學博物館
(2)參考網站網址與網站名稱：http://www.skybrud.dk/kontakt
(3)色彩計畫：灰藍白
(4)風格特色： 簡單
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 36
h3文章標題級數 18
內文級數(font-size)(單位px) 10
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 1200px

製作心得：需要花些時間和耐心來完成它。

1025445123姚育慈

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445129/
(1)原網站名稱及網址：http://www.post.gov.tw/post/internet/Group/index.jsp?ID=14258708637195中華郵政
(2)參考網站網址與網站名稱：http://www.haibara.co.jp
(3)色彩計畫：白和綠
(4)風格特色： 簡單明瞭
(5)請整理以下數值：
字體設定(font-family) harlow Solid Italic 微軟正黑
h1,h2標題級數 18
h3文章標題級數 21
內文級數(font-size)(單位px) 10
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 最大
(6)製作心得： 學到更不一樣做網頁的方式
1025445129王嬿婷

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445102/

(1)原網站名稱及網址： 文化部
(2)參考網站網址與網站名稱： http://www.diehlgroup.com/
(3)色彩計畫：灰黑色系加點藍色
(4)風格特色： 簡約風
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 24
h3文章標題級數 12
內文級數(font-size)(單位px) 8
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 1347px

(6)製作心得： 還可以但是要用時間來完成他

1025445102 邱筱惠

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445045/

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

(6)製作心得： 用腦

1025445045 饒文欣

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445006/

(1)原網站名稱及網址： 高雄市立圖書總館 http://www.ksml.edu.tw/mainlibrary/index.aspx
(2)參考網站網址與網站名稱： PAZZO http://www.pazzo.com.tw/#smfp=5
(3)色彩計畫：灰色系
(4)風格特色： 簡單風格
(5)請整理以下數值：
字體設定(font-family) 文鼎中鋼筆行楷
h1,h2標題級數 29
h3文章標題級數 20
內文級數(font-size)(單位px) 13.5
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 900px

(6)製作心得：不會很難但很麻煩~~(換頁在認識總館~)

1025445006 鄭喬薰



(編輯記錄)

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445141/

(1)原網站名稱及網址： 教育部
(2)參考網站網址與網站名稱： seymourpowell
(3)色彩計畫：黃綠色系
(4)風格特色： 簡約風格
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 18

h3文章標題級數 18

內文級數(font-size)(單位px) 10

區塊內與區塊間的距離(padding)(margin)(單位px) 20px

網站寬度(width)(單位px) 900px

(6)製作心得：恩 還蠻有趣的

1025445141 王心仁

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445120/

(1)原網站名稱及網址： 文化部 http://www.moc.gov.tw/
(2)參考網站網址與網站名稱：pazzo http://www.pazzo.com.tw/
(3)色彩計畫：白色 灰色 粉紅
(4)風格特色： 簡潔
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數 36
h3文章標題級數 30
內文級數(font-size)(單位px) 12
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 1440px

(6)製作心得： 要有耐心

1025445120

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445132
(1)原網站名稱及網址：http://web.hsinchu.gov.tw/livestock/
(2)參考網站網址與網站名稱：https://mixpanel.com/
(3)色彩計畫：白和綠
(4)風格特色： 簡單 乾淨
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數 18
h3文章標題級數 32
內文級數(font-size)(單位px) 12
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 最大
(6)製作心得： 可以做自己喜歡的版型 覺得可以做得更好

1025445132 羅雅嫚

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445192

(1)原網站名稱及網址：臺北好設計 Taipei Good Design : http://www.taipeixdesign.taipei/news_list.asp
(2)參考網站網址與網站名稱：KODZ : https://www.kodz.com.tw/
(3)色彩計畫：白灰色系
(4)風格特色： 簡單風格
(5)請整理以下數值：
字體設定(font-family) 微軟黑體
標題級數 20
內文級數(font-size)(單位px) 14
網站寬度(width)(單位px) 1411px

(6)製作心得： 編排需要很多時間與耐心.................

1025445192 黃婷萱

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445147

(1)原網站名稱及網址：大阪歷史博物館/http://www.mus-his.city.osaka.jp/index.html
(2)參考網站網址與網站名稱： 吾穀茶糧/http://www.siidcha.com/
(3)色彩計畫：日式，首頁為藍綠色為主
(4)風格特色： 日式風格
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 40
h3文章標題級數 28
內文級數(font-size)(單位px) 21
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 1363px
(6)製作心得： 只能說要有耐心

1025445147 張郁



(編輯記錄)

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445198/

(1)原網站名稱及網址： 超際品牌設計
(2)參考網站網址與網站名稱： http://www.88vision.com/index.html
(3)色彩計畫：鮮明色系
(4)風格特色： 簡單風格
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 18
h3文章標題級數 18
內文級數(font-size)(單位px) 20
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 1920*1024

(6)製作心得： 不難 需要的是耐心跟時間

1025445198謝秉宇



(編輯記錄)

作業網址： http://mepopedia.com/~web103-2c/hw05/hw05-1025445099/
file:///C:/Users/user/Desktop/hw05-1025445099/movie.html
(因CC版不會使用影像地圖作連結出去所以老師您要我存成JPG的方式因此有兩個網址)

(1)原網站名稱及網址： 科技部
(2)參考網站網址與網站名稱： http://www.csidea.net.tw/portfolio01-3.htm
(3)色彩計畫：藍色系
(4)風格特色： 俐落
(5)請整理以下數值：
字體設定(font-family) 黑體
h1,h2標題級數 18
h3文章標題級數 18
內文級數(font-size)(單位px) 10
區塊內與區塊間的距離(padding)(margin)(單位px) 20px
網站寬度(width)(單位px) 900px

(6)製作心得： 用PS排了很久也有AI去畫出物件再丟進PS儲存為網頁用

1025445099 陳盛倫