Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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

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


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



2. 設計目的

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

3. 設計主題

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

蒐集優良參考範例,並提出修改方案
以photoshop製作:
(1)首頁http://www.most.gov.twhttp://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



4. 製作步驟


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

7.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案PSD及JPG
上傳至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)製作心得:

學號



5. 注意事項


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


6. Adobe Creative Cloud


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

將完成的檔案PSD及JPG
上傳至Adobe Creative Cloud

體驗雲端共享PSD的便利。



7. 作業繳交


1.製作連結提案模擬,上傳網址為
http://mepopedia.com/~web103-2c/hw05/hw05-1025445XXX


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



8. 上課影音


網頁視覺提案作業講解





上傳Adobe CC 教學








Edited 4 time(s). Last edit at 05/08/2015 10:14PM by JinJin.
(編輯記錄)

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

(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)製作心得: 不難 需要的是耐心跟時間

1025445072 王人永



Edited 4 time(s). Last edit at 05/13/2015 07:35PM by 1025445072.
(編輯記錄)

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

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

1025445069 古珮儒



Edited 2 time(s). Last edit at 05/13/2015 11:20PM by 1025445072.
(編輯記錄)

(1)原網站名稱及網址: 教育部
(2)參考網站網址與網站名稱: Lamo 3
(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)原網站名稱及網址:LE CENTRE POMPIDOU
(2)參考網站網址與網站名稱:K2
(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 廖敏君



Edited 1 time(s). Last edit at 05/18/2015 01:06AM by 小累.
(編輯記錄)

作業網址: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 黃淯婷



Edited 1 time(s). Last edit at 05/13/2015 09:06PM by 黃淯婷.
(編輯記錄)

作業網址: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 林侑慶



Edited 1 time(s). Last edit at 05/14/2015 11:26AM by Natoby.
(編輯記錄)

作業網址: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 梁奕堯



Edited 1 time(s). Last edit at 06/10/2015 10:18PM by 邊緣人.
(編輯記錄)

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

(6)製作心得:

1025445090 鍾婷玟



Edited 1 time(s). Last edit at 05/28/2015 02:35AM by 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 陳怡融



Edited 1 time(s). Last edit at 05/19/2015 08:43PM by 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)網站網站網址及主題: Rose House
(2)參考網站網址與網站名稱:Aunt Stella
(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 陳曉琪



Edited 1 time(s). Last edit at 05/22/2015 03:34PM by CHEN CHICHI.
(編輯記錄)

作業網址: 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 鄭喬薰



Edited 1 time(s). Last edit at 06/10/2015 03:50PM by 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 張郁



Edited 1 time(s). Last edit at 06/11/2015 12:29AM by 詠月吾熹.
(編輯記錄)

作業網址: 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謝秉宇



Edited 1 time(s). Last edit at 06/12/2015 05:48PM by 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 陳盛倫