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

[作業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-2b/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?2561,80854,80854#msg-80854 Mon, 24 Aug 2026 18:05:24 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2561,80854,81804#msg-81804 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81804#msg-81804
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介

(1)原本網站網站網址及主題：新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱：歐嬤德式美食 http://www.oma-de.com/
(3)色彩計畫：藍色主，白色輔
(4)風格特色：穩重
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數 30
h3文章標題級數 30
內文級數(font-size)(單位px)18
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px) 1422

(6)製作心得：比想像中煩

學號 1035445194]]> 1035445194 104-2《中國》竹視傳二B-進階網頁設計 Mon, 13 Jun 2016 22:16:36 +0800 http://mepopedia.com/forum/read.php?2561,80854,81803#msg-81803 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81803#msg-81803
按鈕首頁與商品情報

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

(6)製作心得：媽呀好難

學號 1035445029]]> 1035445029 104-2《中國》竹視傳二B-進階網頁設計 Mon, 13 Jun 2016 22:16:10 +0800 http://mepopedia.com/forum/read.php?2561,80854,81737#msg-81737 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81737#msg-81737 (2)參考網站網址與網站名稱：http://www.hana-no-babaroa.com/ 花のババロア havaro

(3)色彩計畫：白色搭配LOGO的深綠色
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：

學號:1035445191]]> 翁瑱真 104-2《中國》竹視傳二B-進階網頁設計 Sun, 12 Jun 2016 22:58:37 +0800 http://mepopedia.com/forum/read.php?2561,80854,81693#msg-81693 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81693#msg-81693
作業網址: 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《中國》竹視傳二B-進階網頁設計 Sat, 11 Jun 2016 04:04:57 +0800 http://mepopedia.com/forum/read.php?2561,80854,81686#msg-81686 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81686#msg-81686
(1)網站網站網址及主題：http://weekly.marbo.com.tw/萬寶週刊
(2)參考網站網址與網站名稱：http://www.kate-global.net/tw/ KATE
(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得：很有挑戰性

學號 1035445206]]> 王文筠 104-2《中國》竹視傳二B-進階網頁設計 Fri, 10 Jun 2016 22:52:17 +0800 http://mepopedia.com/forum/read.php?2561,80854,81685#msg-81685 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81685#msg-81685
按鈕首頁與商品情報

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

(6)製作心得：媽呀好難

學號 1035445029]]> 1035445029 104-2《中國》竹視傳二B-進階網頁設計 Fri, 10 Jun 2016 22:42:32 +0800 http://mepopedia.com/forum/read.php?2561,80854,81557#msg-81557 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81557#msg-81557 (2)參考網站網址與網站名稱：http://www.vanstaiwan.com/ VANS
(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：

學號:1035445149]]> 1035445149 104-2《中國》竹視傳二B-進階網頁設計 Wed, 01 Jun 2016 22:23:47 +0800 http://mepopedia.com/forum/read.php?2561,80854,81452#msg-81452 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81452#msg-81452
(1)網站網址及主題：太和工房 http://www.0800290290.com.tw/ion/index.htm
(2)參考網站網址與網站名稱：thermomug http://thermomug.com/

(3)色彩計畫：因為是保溫瓶的網頁，所以希望大部分的色彩可以呈現純淨的白色。
(4)風格特色：預呈現水的純淨與保溫瓶的功能，風格特色希望呈現保溫瓶的功能性與畫面的統一性。

(5)請整理以下數值：
字體設定(font-family) :微軟正黑，Adobe 明體，Arial
h1標題級數: 60px
h3文章標題級數:28px
內文級數(font-size)(單位px) :12px
區塊內與區塊間的距離(padding)(margin)(單位px): padding: 30px 243px 30px 75px 、margin:auto
網站寬度(width)(單位px) :900px

(6)製作心得：用PS排版真的很費工夫，但看到原本很醜的網頁煥然一新，就覺得很有成就感。
1035445158]]> 1035445158 104-2《中國》竹視傳二B-進階網頁設計 Mon, 23 May 2016 00:04:07 +0800 http://mepopedia.com/forum/read.php?2561,80854,81386#msg-81386 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81386#msg-81386 (2)參考網站網址與網站名稱：https://www.plain-me.com/ plain me

(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：

學號:1035445176]]> star0106w 104-2《中國》竹視傳二B-進階網頁設計 Mon, 16 May 2016 18:05:29 +0800 http://mepopedia.com/forum/read.php?2561,80854,81293#msg-81293 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81293#msg-81293
(1)網站網站網址及主題：http://www.library.ntpc.gov.tw/新北市立圖書館
這個網站配色太過螢光，雖然想顯現年輕人活力的感覺，
但是他的條列部分太雜，很難找到。
(2)參考網站網址與網站名稱: http://www.westside-union.com/ 西聯設計工作室
這個網站除了配色方面很沉穩，他的條列方面也分配得很恰當
，想找甚麼內容很輕易就能找到。

(3)色彩計畫：以藍紫系為主
(4)風格特色：以新北地區風景來結合
(5)請整理以下數值：
字體設定(font-family)
h1標題級數 :24px
內文級數(font-size)(單位px) :16px

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

網站寬度(width)(單位px) :1902px

(6)製作心得：許要搜尋很多資料

學號 1035445098]]> 1035445098 104-2《中國》竹視傳二B-進階網頁設計 Tue, 10 May 2016 00:50:23 +0800 http://mepopedia.com/forum/read.php?2561,80854,81292#msg-81292 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81292#msg-81292 (1)網站網站網址及主題：http://www.kmfa.gov.tw/home01.aspx?ID=1 [ 高雄市立美術館 ]
(2)參考網站網址與網站名稱：http://comlier.jp/ [ comlier ]
(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：

學號 1035445032]]> yii_ 104-2《中國》竹視傳二B-進階網頁設計 Tue, 10 May 2016 00:31:04 +0800 http://mepopedia.com/forum/read.php?2561,80854,81282#msg-81282 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81282#msg-81282 (2)參考網站網址與網站名稱：http://nipponcolors.com/

(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：

學號：1035445134]]> 1035445134 104-2《中國》竹視傳二B-進階網頁設計 Mon, 09 May 2016 22:16:25 +0800 http://mepopedia.com/forum/read.php?2561,80854,81280#msg-81280 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81280#msg-81280 (2)參考網站網址與網站名稱：北麓草水 http://www.hokurokusousui.com/

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

(6)製作心得：]]> 1035445200 104-2《中國》竹視傳二B-進階網頁設計 Mon, 09 May 2016 21:43:48 +0800 http://mepopedia.com/forum/read.php?2561,80854,81275#msg-81275 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81275#msg-81275 (2)參考網站網址與網站名稱： http://45th.worldkitchen.co.kr/

http://mepopedia.com/~css104-2b/hw05/hw05-1035445152/index.jpg
(圖片檔，首頁試做)

(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：]]> 1035445152 104-2《中國》竹視傳二B-進階網頁設計 Mon, 09 May 2016 21:01:51 +0800 http://mepopedia.com/forum/read.php?2561,80854,81271#msg-81271 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81271#msg-81271
(1)網站網站網址及主題：http://www.epochtimes.com/b5/nsc414.htm 大紀元新聞
(2)參考網站網址與網站名稱：http://www.dazeddigital.com/dazed100 Dazed100

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

(6)製作心得：

學號 1035445137]]> 2zzzcm 104-2《中國》竹視傳二B-進階網頁設計 Mon, 09 May 2016 20:30:12 +0800 http://mepopedia.com/forum/read.php?2561,80854,81267#msg-81267 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81267#msg-81267
(1)網站網站網址及主題：http://www.fhvs.ntpc.edu.tw/
(2)參考網站網址與網站名稱：http://www.pinkoi.com/?gclid=CIGXxJ3szMwCFZAAvAod5ccPzA 買設計
(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得：

學號 1035445086]]> 1035445086 104-2《中國》竹視傳二B-進階網頁設計 Mon, 09 May 2016 19:04:24 +0800 http://mepopedia.com/forum/read.php?2561,80854,81263#msg-81263 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81263#msg-81263

(2)製作心得： header的logo和icon能大一點嗎? 小小的很沒FU，太大又會突出header的白底(logo部分)

(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html

(3)色彩計畫：黑、藍
(4)風格特色：學校的FU
(5)請整理以下數值：
字體設定(font-family) 微軟正黑體
h1,h2標題級數 30~20px
h3文章標題級數 18px
內文級數(font-size)(單位px) 14px
區塊內與區塊間的距離(padding)(margin)(單位px) 3~5px
網站寬度(width)(單位px) 1764*2068

(6)製作心得：瘋]]> 1035445113 104-2《中國》竹視傳二B-進階網頁設計 Mon, 09 May 2016 16:16:52 +0800 http://mepopedia.com/forum/read.php?2561,80854,81212#msg-81212 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81212#msg-81212
作業網址: http://mepopedia.com/~css104-2b/hw05/hw05-1035445209 (只排出首頁)

(1)原本網站網址及主題：台灣e院 http://sp1.hso.mohw.gov.tw/doctor/Index1.php
(2)參考網站網址與網站名稱：面試.趣 http://interview.tw/

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

(6)製作心得：]]> fishtime 104-2《中國》竹視傳二B-進階網頁設計 Tue, 03 May 2016 23:19:24 +0800 http://mepopedia.com/forum/read.php?2561,80854,81199#msg-81199 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81199#msg-81199
(1)網站網站網址及主題： http://livestock.kcg.gov.tw/index.aspx 高雄動保處
我覺得這個網站的設計背景的漸層色用色太混濁，也沒有任何質感上得變化，
在header的圖片太多，讓人感覺很亂。
(2)參考網站網址與網站名稱: http://www.luckystarwine.com.tw/index.php?action=about 吉星酒棧
這個網站，在header的圖片上用得簡潔有力，讓人看起來很舒服，在背景有
質感上的變化，我覺得很不錯。

(3)色彩計畫：以藍綠色系為主
(4)風格特色：動保處的感覺
(5)請整理以下數值：
字體設定(font-family)
h1標題級數 :24px
內文級數(font-size)(單位px) :16px

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

網站寬度(width)(單位px) :1902px

(6)製作心得：有點麻煩

學號 1035445002]]> 1034445002 104-2《中國》竹視傳二B-進階網頁設計 Mon, 02 May 2016 19:14:58 +0800 http://mepopedia.com/forum/read.php?2561,80854,81138#msg-81138 Re: [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,81138#msg-81138 (2)參考網站網址與網站名稱：植光畝垂直農場 http://www.puregion.com.tw/

http://mepopedia.com/~css104-2b/hw05/hw05-1035445218

三頁面為首頁＋首頁右上角的導覽列＋首頁中間的世博館

(3)色彩計畫：因為是多色彩的網站所以以白色為底，再加上靛色營造出沉穩與知性的感覺。
(4)風格特色：簡約為主，分析了原網站的主要資訊為「主題館」及「活動」所以這兩部分將會有大面積的呈現。
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數 :18pt / 26pt
h3文章標題級數 :18pt
內文級數(font-size) ：10pt
區塊內與區塊間的距離(padding)(margin) 大約80px
網站寬度(width) 1898px

(6)製作心得： (和我的第三頁有關)不知道有沒有辦法可以調整進網頁時的位置。

1035445218]]> 柯惠文 104-2《中國》竹視傳二B-進階網頁設計 Mon, 25 Apr 2016 21:56:24 +0800 http://mepopedia.com/forum/read.php?2561,80854,80854#msg-80854 [作業05] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2561,80854,80854#msg-80854

1. 網頁美感排版設計參考講義
2. 設計目的
3. 設計主題
4. 製作步驟
5. 注意事項
6. Adobe Creative Cloud
7. 作業繳交
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-2b/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《中國》竹視傳二B-進階網頁設計 Mon, 18 Apr 2016 11:38:13 +0800