[作業05 ] 網頁美感排版設計 1. 網頁美感排版設計參考講義2. 設計目的3. 設計主題4. 製作步驟5. 注意事項6. Adobe Creative Cloud7. 作業繳交8. 上課影音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/forum/read.php?2430,75792,75792#msg-75792 Mon, 21 Sep 2026 20:44:12 +0800 Phorum 5.2.7 http://mepopedia.com/forum/read.php?2430,75792,76849#msg-76849 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76849#msg-76849 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 陳盛倫]]> 碩碩 103-2《中國》竹視傳二C-進階網頁設計 Thu, 02 Jul 2015 01:30:34 +0800 http://mepopedia.com/forum/read.php?2430,75792,76586#msg-76586 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76586#msg-76586
(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謝秉宇]]> 1025445198 103-2《中國》竹視傳二C-進階網頁設計 Fri, 12 Jun 2015 17:48:23 +0800 http://mepopedia.com/forum/read.php?2430,75792,76537#msg-76537 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76537#msg-76537
(1)原網站名稱及網址：
(2)參考網站網址與網站名稱：http://www.berkeley.edu/
(3)色彩計畫：簡單
(4)風格特色： 乾淨
(5)請整理以下數值：
字體設定(font-family) 黑體


1025445051 林芳伃]]> 王嬿婷 103-2《中國》竹視傳二C-進階網頁設計 Thu, 11 Jun 2015 04:28:36 +0800 http://mepopedia.com/forum/read.php?2430,75792,76518#msg-76518 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76518#msg-76518
(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 王心仁]]> 1025445141 103-2《中國》竹視傳二C-進階網頁設計 Thu, 11 Jun 2015 00:45:47 +0800 http://mepopedia.com/forum/read.php?2430,75792,76510#msg-76510 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76510#msg-76510
(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 張郁]]> 詠月吾熹 103-2《中國》竹視傳二C-進階網頁設計 Thu, 11 Jun 2015 00:28:47 +0800 http://mepopedia.com/forum/read.php?2430,75792,76505#msg-76505 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76505#msg-76505
(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 黃婷萱]]> 黃婷萱 103-2《中國》竹視傳二C-進階網頁設計 Thu, 11 Jun 2015 00:19:22 +0800 http://mepopedia.com/forum/read.php?2430,75792,76504#msg-76504 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76504#msg-76504 (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 羅雅嫚]]> yaman 103-2《中國》竹視傳二C-進階網頁設計 Thu, 11 Jun 2015 00:17:17 +0800 http://mepopedia.com/forum/read.php?2430,75792,76496#msg-76496 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76496#msg-76496
(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]]> 1025445120 103-2《中國》竹視傳二C-進階網頁設計 Wed, 10 Jun 2015 23:16:35 +0800 http://mepopedia.com/forum/read.php?2430,75792,76466#msg-76466 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76466#msg-76466
(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 鄭喬薰]]> 1025445006 103-2《中國》竹視傳二C-進階網頁設計 Wed, 10 Jun 2015 15:22:30 +0800 http://mepopedia.com/forum/read.php?2430,75792,76450#msg-76450 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76450#msg-76450
(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 饒文欣]]> wen sin 103-2《中國》竹視傳二C-進階網頁設計 Wed, 10 Jun 2015 00:00:37 +0800 http://mepopedia.com/forum/read.php?2430,75792,76437#msg-76437 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76437#msg-76437
(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 邱筱惠]]> 筱 103-2《中國》竹視傳二C-進階網頁設計 Tue, 09 Jun 2015 21:47:38 +0800 http://mepopedia.com/forum/read.php?2430,75792,76396#msg-76396 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76396#msg-76396 (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王嬿婷]]> 王嬿婷 103-2《中國》竹視傳二C-進階網頁設計 Mon, 08 Jun 2015 21:10:59 +0800 http://mepopedia.com/forum/read.php?2430,75792,76228#msg-76228 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76228#msg-76228
(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姚育慈]]> Yuchi 103-2《中國》竹視傳二C-進階網頁設計 Wed, 27 May 2015 22:27:27 +0800 http://mepopedia.com/forum/read.php?2430,75792,76213#msg-76213 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76213#msg-76213
(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 王泰然]]> 1025445030 103-2《中國》竹視傳二C-進階網頁設計 Wed, 27 May 2015 17:37:51 +0800 http://mepopedia.com/forum/read.php?2430,75792,76115#msg-76115 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76115#msg-76115
(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 陳曉琪]]> CHEN CHICHI 103-2《中國》竹視傳二C-進階網頁設計 Thu, 21 May 2015 11:46:05 +0800 http://mepopedia.com/forum/read.php?2430,75792,76100#msg-76100 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76100#msg-76100 (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 何佳霖]]> cici 103-2《中國》竹視傳二C-進階網頁設計 Thu, 21 May 2015 01:30:37 +0800 http://mepopedia.com/forum/read.php?2430,75792,76098#msg-76098 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76098#msg-76098
(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語法]]> 艾希 103-2《中國》竹視傳二C-進階網頁設計 Thu, 21 May 2015 01:09:53 +0800 http://mepopedia.com/forum/read.php?2430,75792,76096#msg-76096 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76096#msg-76096
(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 謝芷寧]]> 謝芷寧 103-2《中國》竹視傳二C-進階網頁設計 Thu, 21 May 2015 00:44:38 +0800 http://mepopedia.com/forum/read.php?2430,75792,76060#msg-76060 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76060#msg-76060 (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 陳怡融]]> 1025445018 103-2《中國》竹視傳二C-進階網頁設計 Tue, 19 May 2015 20:34:57 +0800 http://mepopedia.com/forum/read.php?2430,75792,76039#msg-76039 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,76039#msg-76039
(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 鍾婷玟]]> 1025445090 103-2《中國》竹視傳二C-進階網頁設計 Tue, 19 May 2015 04:06:30 +0800 http://mepopedia.com/forum/read.php?2430,75792,75956#msg-75956 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,75956#msg-75956

(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 莊于萱]]> 1025445111 103-2《中國》竹視傳二C-進階網頁設計 Thu, 14 May 2015 00:20:14 +0800 http://mepopedia.com/forum/read.php?2430,75792,75953#msg-75953 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,75953#msg-75953 (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 梁奕堯]]> 邊緣人 103-2《中國》竹視傳二C-進階網頁設計 Wed, 13 May 2015 23:12:38 +0800 http://mepopedia.com/forum/read.php?2430,75792,75952#msg-75952 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,75952#msg-75952
(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 林侑慶]]> Natoby 103-2《中國》竹視傳二C-進階網頁設計 Wed, 13 May 2015 22:50:21 +0800 http://mepopedia.com/forum/read.php?2430,75792,75929#msg-75929 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,75929#msg-75929

(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 黃淯婷]]> 黃淯婷 103-2《中國》竹視傳二C-進階網頁設計 Tue, 12 May 2015 19:06:35 +0800 http://mepopedia.com/forum/read.php?2430,75792,75877#msg-75877 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,75877#msg-75877 (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 廖敏君]]> 小累 103-2《中國》竹視傳二C-進階網頁設計 Thu, 07 May 2015 21:27:29 +0800 http://mepopedia.com/forum/read.php?2430,75792,75868#msg-75868 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,75868#msg-75868 (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 洪筠真]]> Annie真 103-2《中國》竹視傳二C-進階網頁設計 Thu, 07 May 2015 09:54:16 +0800 http://mepopedia.com/forum/read.php?2430,75792,75860#msg-75860 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,75860#msg-75860
(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 古珮儒]]> 1025445072 103-2《中國》竹視傳二C-進階網頁設計 Wed, 06 May 2015 23:35:08 +0800 http://mepopedia.com/forum/read.php?2430,75792,75859#msg-75859 Re: [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,75859#msg-75859
(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 王人永]]> 1025445072 103-2《中國》竹視傳二C-進階網頁設計 Wed, 06 May 2015 23:20:43 +0800 http://mepopedia.com/forum/read.php?2430,75792,75792#msg-75792 [作業05 ] 網頁美感排版設計 http://mepopedia.com/forum/read.php?2430,75792,75792#msg-75792
  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.解讀與思考設計主題如何透過網頁形式表現
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]]]> JinJin 103-2《中國》竹視傳二C-進階網頁設計 Wed, 29 Apr 2015 22:53:52 +0800