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

Advanced

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

[作業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,並上傳至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)製作心得:

學號

[hr]

5. 注意事項


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

[hr]

6. Adobe Creative Cloud


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

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

體驗雲端共享PSD的便利。

[hr]

7. 作業繳交


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


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



Edited 1 time(s). Last edit at 04/14/2016 11:00AM by JinJin.
(編輯記錄)

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445129

*按鈕:悅湯溫泉 旅店介紹 房型介紹

(1)原本網站網址及主題:http://happyspa.yibnb.net/room1.htm 悅湯溫泉行館

(2)參考網站網址與網站名稱:http://www.season5inn.com.tw/room1.htm 第五季國際旅店

(3)色彩計畫:以淡藍色及橘色呈現出旅店的感覺

(4)風格特色:以圖片排列

(5)請整理以下數值:字體設定:12~18px h1,h2標題級數 :50px/14px

內文級數:14px 網站寬度:960px

(6)製作心得: 第一次用Photoshop做網頁,新的體驗。

學號 :1035445129



Edited 2 time(s). Last edit at 05/12/2016 01:14AM by 1035445129.
(編輯記錄)

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445035

(1)原本網站網址及主題:http://www.nike-store.com.tw/gallery--n,%E8%97%A4%E5%8E%9F%E6%B5%A9-grid.html?
(2)參考網站網址與網站名稱:http://www.nike.com/tw/zh_tw/
(3)色彩計畫:黑灰白
(4)風格特色:簡約、年輕、時尚
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數:9pt
h3文章標題級數:9pt

(6)製作心得:很美好

學號:1035445035

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445006

*按鈕:桃園市府介紹 認識桃園 觀光旅遊 桃園市政府

(1)原本網站網址及主題:http://www.tycg.gov.tw/ch/index.jsp?popflag=Y 桃園市政府

(2)參考網站網址與網站名稱:http://www.hito-bbq.com.tw/ 田季發爺燒肉

(3)色彩計畫:黑灰白簡單呈現

(4)風格特色:圖文並茂

(5)請整理以下數值:

字體設定:魏碑體/微軟正黑體

h1,h2,h3標題級數:145px/48px/30px

內文級數:15~20px 網站寬度:960px

(6)製作心得:新鮮spinning smiley sticking its tongue out

學號:1035445006



Edited 1 time(s). Last edit at 05/21/2016 02:10PM by 1035445006.
(編輯記錄)

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445066

*按鈕:悅湯溫泉 旅店介紹 房型介紹

(1)原本網站網址及主題:http://truecolor.mu/mj116/profile.html mj116官網

(2)參考網站網址與網站名稱:http://shop.eminem.com/ 國外繞舌之神阿姆官網

(3)色彩計畫:黑到爆比黑社會還黑
(4)風格特色:饒舌饒到爆

(5)請整理以下數值:字體設定:我不會看ㄟ但是我真的很努力做


(6)製作心得:有一天小明去釣魚.他釣到一隻章魚.他說我要把你烤來吃.章魚說掰脫不要把我烤來吃.小明說你答對一個問題我就不把你烤來吃.
章魚就說快考我吧快考我吧.章魚就被烤來吃了!!!!

學號 :1035445066

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445147



(1)原本網站網址及主題:http://www.ucla.edu/athletics

(2)參考網站網址與網站名稱:http://www.hermitagemuseum.org/wps/portal/hermitage/?lng=zh
(3)色彩計畫:UCLA主色調
(4)風格特色:鮮明

(5)請整理以下數值:字體設定:16


(6)製作心得:還有好大一段路

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445159/index.html

*按鈕:

(1)原本網站網址及主題:http://www.tfam.museum/index.aspx?ddlLang=zh-tw 台北市立美術館

(2)參考網站網址與網站名稱:http://www.lovfee.com/ LOVFEE

(3)色彩計畫:黑灰白

(4)風格特色:圖片排列 有彩色點綴

(5)請整理以下數值:字體設定:14~26px h1,h2標題級數 :74px/44px (儲存網頁用時,縮小成60%)

內文級數:14px 網站寬度:960px

(6)製作心得: 這算是以前圖片製作網站嗎~~~感覺比用寫的簡單哈哈哈

學號 :1035445159



Edited 1 time(s). Last edit at 06/01/2016 10:26PM by 陳怡安安你好.
(編輯記錄)

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445054

(1)網站網站網址及主題:http://www.mybbq.com.tw 神牛| 本格派.炭火日式燒肉
(2)參考網站網址與網站名稱: http://www.mo-tto.com.tw/ 牧島燒肉 MOTTO YAKINIKU
(3)色彩計畫: 使用神牛的logo的紅色為主體調
(4)風格特色: 簡單豐富
(5)請整理以下數值:
字體設定(font-family)
大標題h1:46px 中標題h2:26px
小標題h3:18px
內文級數(font-size) 12px
網站寬度(width)(單位px) 960px

(6)製作心得:感覺在模擬網站很有趣

學號 1035445054

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445102

*按鈕:首頁/訊息

(1)原本網站網址及主題:http://www.nmh.gov.tw/zh/index.htm 國立歷史博物館

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

(3)色彩計畫:以粉色及深桃紅色給人一總輕鬆感

(4)風格特色:以圖片排列

(5)請整理以下數值:字體設定:12px h1,h2標題級數 :px12~20px

內文級數:12px 網站寬度:960px

(6)製作心得: 第一次用Photoshop做網頁,感覺腦袋快爆了

學號 :1035445102

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445024

*按鈕:imaginedragons黑色標題 Photos

(1)原本網站網址及主題:https://www.imaginedragonsmusic.com/ 迷幻樂團官網

(2)參考網站網址與網站名稱:http://www.htc.com/tw/ htc官網

(3)色彩計畫:白灰黑
(4)風格特色:簡約

(5)請整理以下數值:內文:6PT 小標:8PT 標題:12PT

(6)製作心得:心力交瘁

學號 :1035445024

1035445093

作業網址: http://mepopedia.com/~css104-2c/hw05/hw05-1035445093

按鈕 首頁 與 藍海灣地圖

(1)原本網站網址及主題: 旗艦藍海灣 http://www.bluebay.com.tw/
(2)參考網站網址與網站名稱:星巴克 http://www.starbucks.com.tw/home/index.jspx

(3)色彩計畫: 藍色系海洋配色
(4)風格特色: 夏天海洋風
(5)製作心得:好玩又有趣



Edited 1 time(s). Last edit at 06/11/2016 04:05AM by a27417944.
(編輯記錄)

作業網址: http://mepopedia.com/~css104-2c/hw05/hw05-1035445216
*按鈕:"進入貓空","貓空纜車"
(1)網站網站網址及主題: http://www.gondola.taipei/貓空纜車
(2)參考網站網址與網站名稱: http://www.xn--y6v848h.tw/極鮮火鍋
(3)色彩計畫: 以天空的顏色做搭配
(4)風格特色: 排版簡單而豐富
(5)請整理以下數值: 沒辦法從老師那個方法看到,因為不完全是PS做的
(6)製作心得: 做的很累,做到一半還當機結果檔案都還沒存,根本重新來過!!

學號:1035445216

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445051

*按鈕:產品情報、門市情報、企業情報、我們的堅持、甜甜圈樂園

(1)原本網站網址及主題:http://www.misterdonut.com.tw/index.html 統一Mister Donut

(2)參考網站網址與網站名稱:http://www.camacafe.com/ cama現烘咖啡專門店

(3)色彩計畫:因為現在mister donut至再推抹茶季,所以網頁風個都是以抹茶色為主。

(4)風格特色:圖片排列

(5)請整理以下數值:

字體設定:微軟正黑體

h1,h2標題級數 :30px、20px

內文級數:14px~16px 網站寬度:1348px

(6)製作心得:不是很會photoshop,做的很慢,但是做完非常開心~~

學號 :1035445051

作業網址: http://mepopedia.com/~css104-2c/hw05/hw05-1035445186/

(1)網站網站網址及主題: 義美食品官網
(2)參考網站網址與網站名稱: krispykreme http://www.krispykreme.com.tw/
(3)色彩計畫: 綠色、米白色
(4)風格特色: 義美感
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數
h3文章標題級數 10px
內文級數(font-size)(單位px) 12px
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 1902px

(6)製作心得: 義美有些包裝真的很義美.....................

學號 1035445186

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445150

(1)原本網站網址及主題:http://www.wooplanet.com/
(2)參考網站網址與網站名稱:https://www.joyce-shop.com/
(3)色彩計畫:極簡黑白點綴少許粉和藍綠
(4)風格特色:簡約線條
(5)請整理以下數值:
字體設定(font-family) 微軟正黑體
大標題h1:30px
內文級數(font-size) 12px

(6)製作心得:不用一直調整語法好開心

學號:1035445150

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445048

*按鈕:imaginedragons黑色標題 Photos

(1)原本網站網址及主題:http://www.coco-tea.com/ COCO

(2)參考網站網址與網站名稱:http://www.dayungs.com.tw/web/大苑子

(3)色彩計畫:白/橘
(4)風格特色:簡單明瞭

(5)請整理以下數值:內文:9PT 小標:12PT 標題:24PT

(6)製作心得: PS好久但4還好沒很難

學號 :1035445048



Edited 1 time(s). Last edit at 06/13/2016 07:14PM by yun0221.
(編輯記錄)

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445057

*按鈕: 哈燒據點、燒味食足、哈燒好康報、燒肉話題、好站連結

(1)原本網站網址及主題:http://www.yakiyan.com/index.html 原燒

(2)參考網站網址與網站名稱:http://www.net-fashion.net/ NET

(3)色彩計畫:以原燒綠色做為整體色

(4)風格特色:圖片排列

(5)請整理以下數值:

字體設定:微軟正黑體

標題級數 :26px

內文級數:14px~16px 網站寬度:1510px

(6)製作心得:有點麻煩就是了.....

學號 :1035445057

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445162

*按鈕:首頁Mannes / 最新商品

(1)原本網站網址及主題:http://www.mannes.com.tw/v2/official

(2)參考網站網址與網站名稱:https://www.tokichoi.com.tw/

(3)色彩計畫:黑灰白簡單呈現

(4)風格特色:圖文並茂

(5)請整理以下數值:

字體設定: 蘋果儷中黑

標題級數:15.67px/12.5px

內文級數:15~24.9px 網站寬度: 1266px

(6)製作心得:累累

學號:1035445162



Edited 1 time(s). Last edit at 06/15/2016 10:23PM by apple70825.
(編輯記錄)

作業網址: http://mepopedia.com/~css104-2c/hw05/hw05-1035445081

(1)網站網站網址及主題: http://jimmypm.ehosting.com.tw/
(2)參考網站網址與網站名稱: http://pad.skyozora.com/
(3)色彩計畫: 黑灰
(4)風格特色: 區隔簡略
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 48
h3文章標題級數 9
內文級數(font-size)(單位px) 9
區塊內與區塊間的距離(padding)(margin)(單位px) 12
網站寬度(width)(單位px) 1020

(6)製作心得: 小麻煩

1035445081

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445171/

(1)網站網站網址及主題:http://www.dante.com.tw/pro_4_1.php?catId=30丹堤咖啡

(2)參考網站網址與網站名稱:http://www.minder.com.tw/明德速食園

(3)色彩計畫:植物的綠+褐

(4)風格特色:清新

(5)字體設定(font-family)

h1,h2標題級數 12px .10px

h3,h4文章標題級數 36px .24px

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

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

(6)製作心得:還算簡單

學號:1035445171

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445183

*按鈕:mas馬絲馬絲 / 學院風

(1)原本網站網址及主題:masmas.mymy.tw/item-new.html? 馬絲馬絲

(2)參考網站網址與網站名稱:http://www.stylemooncat.com.tw/貓咪曬月亮

(3)色彩計畫:簡約黑白
(4)風格特色:圖片排列

(5)請整理以下數值:字體設定:
標題級數 :30px/14px

內文級數:14px 網站寬度:960px

(6)製作心得: 無

學號 :1035445183

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445087

(1)原本網站網址及主題:http://bts.ibight.com/album.php

(2)參考網站網址與網站名稱:http://it.com/twitter

(3)色彩計畫:彩色
(4)風格特色:簡潔

(5)請整理以下數值:字體設定:
標題級數 :ˋ40px/16px

內文級數:16px 網站寬度:1343px

(6)製作心得: 沒

學號 :1035445087



Edited 1 time(s). Last edit at 06/16/2016 07:02AM by lilyred.
(編輯記錄)

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-103544141

按鈕:TW LOGO , 頁面介紹第一個 , 小牌子也有按鈕

(1)原本網站網址及主題:http://twice.jype.com/index.html TWICE

(2)參考網站網址與網站名稱: http://www.clockenflap.com/zh-hant/%E6%BC%94%E5%87%BA%E9%99%A3%E5%AE%B9/jannine-weigel 音樂網

(3)色彩計畫:以淡藍色及白色呈現出清新活潑的感覺

(4)風格特色:清爽風格,圖片為按鈕

(5)請整理以下數值:字體設定:20px h1,h2標題級數 :15px

內文級數:25px 網站寬度1200px

(6)製作心得:蠻有趣的~

學號 :1035445141

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1015445210

(1)原本網站網址及主題:http://www.katyperry.com/news/
(2)參考網站網址與網站名稱:http://coldplay.com/news/
(3)色彩計畫:陽光感覺
(4)風格特色:年輕時尚
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數:12pt
h3文章標題級數:10pt

(6)製作心得:困難

學號:1015445210

作業網址:http://mepopedia.com/~css104-2c/hw05/hw05-1035445060


(1)網站網站網址及主題: http://www.liberty.com.tw/ly/ 利百代網站
*按鈕: LOGO/首頁
(2)參考網站網址與網站名稱: http://www.pilot-pen.com.tw/ 百樂Pilot
(3)色彩計畫: 咖啡色為主
(4)風格特色: 圖文排列
(5)請整理以下數值:
字體設定(font-family)
h1,h2標題級數 14pt
h3文章標題級數 12pt
內文級數(font-size)(單位px) 5.5pt
網站寬度(width)(單位px) 1100px

(6)製作心得:感覺新鮮,不需要特別設語法

學號 1035445060