[作業05] 網頁美感排版設計 1. 網頁美感排版設計參考講義2. 設計目的3. 設計主題4. 製作步驟5. 注意事項6. Adobe Creative Cloud7. 作業繳交8. 上課影音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-2c/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] http://mepopedia.com/forum/read.php?2562,80774,80774#msg-80774 Sun, 25 Oct 2026 18:42:12 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2562,80774,82117#msg-82117 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,82117#msg-82117

(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]]> 1035445060 104-2《中國》竹視傳二C-進階網頁設計 Sun, 19 Jun 2016 19:31:55 +0800 http://mepopedia.com/forum/read.php?2562,80774,82061#msg-82061 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,82061#msg-82061
(1)原本網站網址及主題：http://www.katyperry.com/news/
(2)參考網站網址與網站名稱：http://coldplay.com/news/
(3)色彩計畫：陽光感覺
(4)風格特色：年輕時尚
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數：12pt
h3文章標題級數：10pt

(6)製作心得：困難

學號：1015445210]]> 1015445256 104-2《中國》竹視傳二C-進階網頁設計 Thu, 16 Jun 2016 18:03:02 +0800 http://mepopedia.com/forum/read.php?2562,80774,81992#msg-81992 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81992#msg-81992
按鈕: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]]> 1035445141 104-2《中國》竹視傳二C-進階網頁設計 Thu, 16 Jun 2016 08:03:33 +0800 http://mepopedia.com/forum/read.php?2562,80774,81991#msg-81991 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81991#msg-81991
(1)原本網站網址及主題：http://bts.ibight.com/album.php

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

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

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

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

(6)製作心得： 沒

學號 :1035445087]]> lilyred 104-2《中國》竹視傳二C-進階網頁設計 Thu, 16 Jun 2016 07:00:21 +0800 http://mepopedia.com/forum/read.php?2562,80774,81985#msg-81985 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81985#msg-81985
*按鈕:mas馬絲馬絲 / 學院風

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

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

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

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

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

(6)製作心得： 無

學號 :1035445183]]> fishmus 104-2《中國》竹視傳二C-進階網頁設計 Thu, 16 Jun 2016 04:29:25 +0800 http://mepopedia.com/forum/read.php?2562,80774,81978#msg-81978 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81978#msg-81978
(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]]> 珮璇 104-2《中國》竹視傳二C-進階網頁設計 Thu, 16 Jun 2016 02:03:09 +0800 http://mepopedia.com/forum/read.php?2562,80774,81970#msg-81970 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81970#msg-81970
(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]]> 1035445081 104-2《中國》竹視傳二C-進階網頁設計 Thu, 16 Jun 2016 01:23:07 +0800 http://mepopedia.com/forum/read.php?2562,80774,81930#msg-81930 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81930#msg-81930
*按鈕：首頁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]]> apple70825 104-2《中國》竹視傳二C-進階網頁設計 Wed, 15 Jun 2016 22:22:59 +0800 http://mepopedia.com/forum/read.php?2562,80774,81906#msg-81906 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81906#msg-81906
*按鈕: 哈燒據點、燒味食足、哈燒好康報、燒肉話題、好站連結

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

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

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

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

(5)請整理以下數值:

字體設定:微軟正黑體

標題級數 :26px

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

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

學號 :1035445057]]> 1035445057 104-2《中國》竹視傳二C-進階網頁設計 Wed, 15 Jun 2016 12:48:41 +0800 http://mepopedia.com/forum/read.php?2562,80774,81778#msg-81778 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81778#msg-81778
*按鈕: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]]> yun0221 104-2《中國》竹視傳二C-進階網頁設計 Mon, 13 Jun 2016 19:10:23 +0800 http://mepopedia.com/forum/read.php?2562,80774,81773#msg-81773 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81773#msg-81773
(1)原本網站網址及主題：http://www.wooplanet.com/
(2)參考網站網址與網站名稱：https://www.joyce-shop.com/
(3)色彩計畫：極簡黑白點綴少許粉和藍綠
(4)風格特色：簡約線條
(5)請整理以下數值：
字體設定(font-family) 微軟正黑體
大標題h1:30px
內文級數(font-size) 12px

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

學號：1035445150]]> 李家欣 104-2《中國》竹視傳二C-進階網頁設計 Mon, 13 Jun 2016 18:31:47 +0800 http://mepopedia.com/forum/read.php?2562,80774,81763#msg-81763 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81763#msg-81763
(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]]> 季妍 104-2《中國》竹視傳二C-進階網頁設計 Mon, 13 Jun 2016 15:58:28 +0800 http://mepopedia.com/forum/read.php?2562,80774,81731#msg-81731 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81731#msg-81731
(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]]> 小小豪 104-2《中國》竹視傳二C-進階網頁設計 Sun, 12 Jun 2016 17:11:23 +0800 http://mepopedia.com/forum/read.php?2562,80774,81712#msg-81712 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81712#msg-81712
*按鈕:產品情報、門市情報、企業情報、我們的堅持、甜甜圈樂園

(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]]> apple3246927 104-2《中國》竹視傳二C-進階網頁設計 Sat, 11 Jun 2016 17:39:28 +0800 http://mepopedia.com/forum/read.php?2562,80774,81706#msg-81706 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81706#msg-81706 *按鈕："進入貓空"，"貓空纜車"
(1)網站網站網址及主題： http://www.gondola.taipei/貓空纜車
(2)參考網站網址與網站名稱： http://www.xn--y6v848h.tw/極鮮火鍋
(3)色彩計畫： 以天空的顏色做搭配
(4)風格特色： 排版簡單而豐富
(5)請整理以下數值： 沒辦法從老師那個方法看到，因為不完全是PS做的
(6)製作心得： 做的很累，做到一半還當機結果檔案都還沒存，根本重新來過!!

學號：1035445216]]> hzpmp24 104-2《中國》竹視傳二C-進階網頁設計 Sat, 11 Jun 2016 10:21:39 +0800 http://mepopedia.com/forum/read.php?2562,80774,81694#msg-81694 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81694#msg-81694
作業網址: 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)製作心得：好玩又有趣]]> a27417944 104-2《中國》竹視傳二C-進階網頁設計 Sat, 11 Jun 2016 04:05:36 +0800 http://mepopedia.com/forum/read.php?2562,80774,81656#msg-81656 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81656#msg-81656
*按鈕:imaginedragons黑色標題 Photos

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

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

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

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

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

學號 :1035445024]]> 1035445024 104-2《中國》竹視傳二C-進階網頁設計 Thu, 09 Jun 2016 01:44:36 +0800 http://mepopedia.com/forum/read.php?2562,80774,81611#msg-81611 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81611#msg-81611
*按鈕:首頁/訊息

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

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

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

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

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

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

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

學號 :1035445102]]> 美珍 104-2《中國》竹視傳二C-進階網頁設計 Sun, 05 Jun 2016 22:35:44 +0800 http://mepopedia.com/forum/read.php?2562,80774,81607#msg-81607 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81607#msg-81607


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

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

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


(6)製作心得:還有好大一段路]]> 高永鈞 104-2《中國》竹視傳二C-進階網頁設計 Sun, 05 Jun 2016 14:36:29 +0800 http://mepopedia.com/forum/read.php?2562,80774,81542#msg-81542 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81542#msg-81542
(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]]> 1035445054 104-2《中國》竹視傳二C-進階網頁設計 Wed, 01 Jun 2016 01:58:21 +0800 http://mepopedia.com/forum/read.php?2562,80774,81496#msg-81496 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81496#msg-81496
*按鈕:

(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]]> 陳怡安安你好 104-2《中國》竹視傳二C-進階網頁設計 Sat, 28 May 2016 01:15:05 +0800 http://mepopedia.com/forum/read.php?2562,80774,81408#msg-81408 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81408#msg-81408
*按鈕:悅湯溫泉 旅店介紹 房型介紹

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

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

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

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


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

學號 :1035445066]]> 彭八羔子 104-2《中國》竹視傳二C-進階網頁設計 Tue, 17 May 2016 23:19:19 +0800 http://mepopedia.com/forum/read.php?2562,80774,81337#msg-81337 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81337#msg-81337
*按鈕：桃園市府介紹 認識桃園 觀光旅遊 桃園市政府

(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)製作心得：新鮮(:P)

學號：1035445006]]> 1035445006 104-2《中國》竹視傳二C-進階網頁設計 Thu, 12 May 2016 00:00:40 +0800 http://mepopedia.com/forum/read.php?2562,80774,81335#msg-81335 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,81335#msg-81335
*按鈕:悅湯溫泉 旅店介紹 房型介紹

(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]]> 1035445129 104-2《中國》竹視傳二C-進階網頁設計 Wed, 11 May 2016 21:50:15 +0800 http://mepopedia.com/forum/read.php?2562,80774,80774#msg-80774 [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2562,80774,80774#msg-80774
  1. 1. 網頁美感排版設計參考講義
  2. 2. 設計目的
  3. 3. 設計主題
  4. 4. 製作步驟
  5. 5. 注意事項
  6. 6. Adobe Creative Cloud
  7. 7. 作業繳交
  8. 8. 上課影音

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-2c/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]]]> JinJin 104-2《中國》竹視傳二C-進階網頁設計 Thu, 14 Apr 2016 00:01:47 +0800