Change History
Message: [作業04]網頁排版設計-以Photoshop製作Mockup與Prototype
Changed By: JinJin
Change Date: April 13, 2017 08:01AM
[作業04]網頁排版設計-以Photoshop製作Mockup與Prototype
Change Date: April 13, 2017 08:01AM
[作業04]網頁排版設計-以Photoshop製作Mockup與Prototype
<h2>網頁美感排版設計參考講義</h2>
請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770
[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
<h2>設計目的</h2>
1.了解以photoshop製作mockup與Prototype的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧
<h2>設計主題</h2>
1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
[hr]
<h2>製作步驟</h2>
1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.將製作好之圖檔，置入dreamweaver，製作連結提案模擬
7.存成html，並上傳至ＦＴＰ，於hw05中
8.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：
作業網址：http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX</b>
作業網址：http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX</b>
2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud
[hr]
<b>以Photoshop製作網頁版型Mockup與Prototype</b>
範例：http://mepopedia.com/~jinjin/TaiwanMuseum/
作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/
(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/
(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp
(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.com/
作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html
作業網址：http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題： 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱： 歐嬤德式美食 http://www.oma-de.com/
[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
Awesome Screenshot
[hr]
請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770
[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
<h2>設計目的</h2>
1.了解以photoshop製作mockup與Prototype的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧
<h2>設計主題</h2>
1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
[hr]
<h2>製作步驟</h2>
1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.將製作好之圖檔，置入dreamweaver，製作連結提案模擬
7.存成html，並上傳至ＦＴＰ，於hw05中
8.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：
作業網址：http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX</b>
作業網址：http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX</b>
2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud
[hr]
<b>以Photoshop製作網頁版型Mockup與Prototype</b>
範例：http://mepopedia.com/~jinjin/TaiwanMuseum/
作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/
(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/
(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp
(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.com/
作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html
作業網址：http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題： 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱： 歐嬤德式美食 http://www.oma-de.com/
[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
Awesome Screenshot
[hr]
Changed By: JinJin
Change Date: April 05, 2017 03:09PM
[作業04]網頁排版設計-以Photoshop製作Mockup與Prototype
Change Date: April 05, 2017 03:09PM
[作業04]網頁排版設計-以Photoshop製作Mockup與Prototype
<h2>網頁美感排版設計參考講義</h2>
請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770
[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
<h2>設計目的</h2>
1.了解以photoshop製作mockup與Prototype的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧
<h2>設計主題</h2>
1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
[hr]
<h2>製作步驟</h2>
1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.將製作好之圖檔，置入dreamweaver，製作連結提案模擬
7.存成html，並上傳至ＦＴＰ，於hw05中
8.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：
作業網址：http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX</b>
作業網址：http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX</b>
2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud
[hr]
<b>以Photoshop製作網頁版型Mockup與Prototype</b>
範例：http://mepopedia.com/~jinjin/TaiwanMuseum/
作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/
(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/
(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp
(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.chttp://soft8ware.com/Graphic/2/455.html#ecms
[hr]om/
作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html
作業網址：http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題： 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱： 歐嬤德式美食 http://www.oma-de.com/
[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
Awesome Screenshot
[hr]
請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770
[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
<h2>設計目的</h2>
1.了解以photoshop製作mockup與Prototype的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧
<h2>設計主題</h2>
1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
[hr]
<h2>製作步驟</h2>
1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.將製作好之圖檔，置入dreamweaver，製作連結提案模擬
7.存成html，並上傳至ＦＴＰ，於hw05中
8.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：
作業網址：http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX</b>
作業網址：http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX</b>
2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud
[hr]
<b>以Photoshop製作網頁版型Mockup與Prototype</b>
範例：http://mepopedia.com/~jinjin/TaiwanMuseum/
作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/
(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/
(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp
(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.chttp://soft8ware.com/Graphic/2/455.html#ecms
[hr]om/
作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html
作業網址：http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題： 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱： 歐嬤德式美食 http://www.oma-de.com/
[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
Awesome Screenshot
[hr]
Changed By: JinJin
Change Date: April 05, 2017 02:49PM
[作業04]網頁排版設計-以Photoshop製作Mockup與Prototype
Change Date: April 05, 2017 02:49PM
[作業04]網頁排版設計-以Photoshop製作Mockup與Prototype
<h2>網頁美感排版設計參考講義</h2>
請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770
[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
<h2>設計目的</h2>
1.了解以photoshop製作mockup與Prototype的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧
<h2>設計主題</h2>
1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
[hr]
<h2>製作步驟</h2>
1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.將製作好之圖檔，置入dreamweaver，製作連結提案模擬
7.存成html，並上傳至ＦＴＰ，於hw05中
8.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：
作業網址：http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX</b>
作業網址：http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX</b>
2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud
[hr]
<b>以Photoshop製作網頁版型Mockup與Prototype[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
http://soft8ware.com/Graphic/2/455.html#ecms
[hr]</b>
範例：http://mepopedia.com/~jinjin/TaiwanMuseum/
作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/
(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/
(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp
(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.chttp://soft8ware.com/Graphic/2/455.html#ecms
[hr]om/
作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html
作業網址：http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題： 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱： 歐嬤德式美食 http://www.oma-de.com/
[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
Awesome Screenshot
[hr]
請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770
[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
<h2>設計目的</h2>
1.了解以photoshop製作mockup與Prototype的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧
<h2>設計主題</h2>
1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
[hr]
<h2>製作步驟</h2>
1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.將製作好之圖檔，置入dreamweaver，製作連結提案模擬
7.存成html，並上傳至ＦＴＰ，於hw05中
8.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：
作業網址：http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX</b>
作業網址：http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX</b>
2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud
[hr]
<b>以Photoshop製作網頁版型Mockup與Prototype[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
http://soft8ware.com/Graphic/2/455.html#ecms
[hr]</b>
範例：http://mepopedia.com/~jinjin/TaiwanMuseum/
作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/
(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/
(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp
(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.chttp://soft8ware.com/Graphic/2/455.html#ecms
[hr]om/
作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html
作業網址：http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題： 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱： 歐嬤德式美食 http://www.oma-de.com/
[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
Awesome Screenshot
[hr]
Changed By: JinJin
Change Date: March 29, 2017 09:11PM
[作業054]網頁排版設計-以Photoshop製作Mockup與Prototype
Change Date: March 29, 2017 09:11PM
[作業054]網頁排版設計-以Photoshop製作Mockup與Prototype
<h2>網頁美感排版設計參考講義</h2>
請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770
?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
hotoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
<h2>設計目的</h2>
1.了解以photoshop製作mockup與Prototype的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧
<h2>設計主題</h2>
1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
[hr]
<h2>製作步驟</h2>
1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.將製作好之圖檔，置入dreamweaver，製作連結提案模擬
7.存成html，並上傳至ＦＴＰ，於hw05中
8.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：
作業網址：http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX</b>
作業網址：http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX</b>
2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud
[hr]
<b>以Photoshop製作網頁版型Mockup與Prototype[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
http://soft8ware.com/Graphic/2/455.html#ecms
[hr]</b>
範例：http://mepopedia.com/~jinjin/TaiwanMuseum/
作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/
(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/
(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp
(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.chttp://soft8ware.com/Graphic/2/455.html#ecms
[hr]om/
作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html
作業網址：http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題： 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱： 歐嬤德式美食 http://www.oma-de.com/
[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
Awesome Screenshot
[hr]
請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770
?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
hotoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
<h2>設計目的</h2>
1.了解以photoshop製作mockup與Prototype的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧
<h2>設計主題</h2>
1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
[hr]
<h2>製作步驟</h2>
1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.將製作好之圖檔，置入dreamweaver，製作連結提案模擬
7.存成html，並上傳至ＦＴＰ，於hw05中
8.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：
作業網址：http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX</b>
作業網址：http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX</b>
2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud
[hr]
<b>以Photoshop製作網頁版型Mockup與Prototype[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
http://soft8ware.com/Graphic/2/455.html#ecms
[hr]</b>
範例：http://mepopedia.com/~jinjin/TaiwanMuseum/
作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/
(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/
(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp
(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.chttp://soft8ware.com/Graphic/2/455.html#ecms
[hr]om/
作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html
作業網址：http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題： 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱： 歐嬤德式美食 http://www.oma-de.com/
[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
Awesome Screenshot
[hr]
Changed By: JinJin
Change Date: March 28, 2017 08:13PM
[作業054]網頁排版設計-以Photoshop製作Mockup與Prototype
Change Date: March 28, 2017 08:13PM
[作業054]網頁排版設計-以Photoshop製作Mockup與Prototype
<h2>網頁美感排版設計參考講義</h2>
請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770
hotosh<h2>設計目的</h2>1.了解以photoshop製作mockup與Prototype的提案與展示op製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
<h2>設計目的</h2>
1.了解以photoshop製作mockup與Prototype的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧
<h2>設計主題</h2>
1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
[hr]
<h2>製作步驟</h2>
1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.將製作好之圖檔，置入dreamweaver，製作連結提案模擬
7.存成html，並上傳至ＦＴＰ，於hw05中
8.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：
作業網址：http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX</b>
作業網址：http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX</b>
2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud
[hr]
<b>以Photoshop製作網頁版型Mockup與Prototype[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
http://soft8ware.com/Graphic/2/455.html#ecms
[hr]</b>
範例：http://mepopedia.com/~jinjin/TaiwanMuseum/
作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/
(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/
(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp
(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.chttp://soft8ware.com/Graphic/2/455.html#ecms
[hr]om/
作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html
作業網址：http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題： 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱： 歐嬤德式美食 http://www.oma-de.com/
[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
Awesome Screenshot
[hr]
請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770
hotosh<h2>設計目的</h2>1.了解以photoshop製作mockup與Prototype的提案與展示op製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
<h2>設計目的</h2>
1.了解以photoshop製作mockup與Prototype的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧
<h2>設計主題</h2>
1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
[hr]
<h2>製作步驟</h2>
1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.將製作好之圖檔，置入dreamweaver，製作連結提案模擬
7.存成html，並上傳至ＦＴＰ，於hw05中
8.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：
作業網址：http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX</b>
作業網址：http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
<h2>注意事項</h2>
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]<h2>Adobe Creative Cloud</h2>
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
<h2>作業繳交</h2>
<b>1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX</b>
2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud
[hr]
<b>以Photoshop製作網頁版型Mockup與Prototype[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
http://soft8ware.com/Graphic/2/455.html#ecms
[hr]</b>
範例：http://mepopedia.com/~jinjin/TaiwanMuseum/
作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/
(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/
(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp
(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.chttp://soft8ware.com/Graphic/2/455.html#ecms
[hr]om/
作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html
作業網址：http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題： 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱： 歐嬤德式美食 http://www.oma-de.com/
[hr]
<h2>上課影音</h2>
網頁視覺提案作業講解
<iframe width="853" height="480" src="https://www.youtube.com/embed/coSjfbvd3uI" frameborder="0" allowfullscreen></iframe>
[hr]
上傳Adobe CC 教學
<iframe width="853" height="480" src="https://www.youtube.com/embed/HRqgbkHh1uE" frameborder="0" allowfullscreen></iframe>
[hr]
截圖軟體
Awesome Screenshot
[hr]
Original Message
作者: JinJinDate: March 28, 2017 08:13PM
[作業054]網頁排版設計-以Photoshop製作Mockup與Prototype
網頁美感排版設計參考講義
請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770
hotosh
設計目的
1.了解以photoshop製作mockup與Prototype的提案與展示op製作網頁版型：http://mepopedia.com/forum/read.php?804,43354[hr]
設計目的
1.了解以photoshop製作mockup與Prototype的提案與展示方式並實際製作。
2.解讀與思考設計主題如何透過網頁形式表現
3.了解網頁實際內容與細節
4.觀察優良網站的設計原則
5.增強網頁排版的能力與技巧
設計主題
1.請選擇一需要修改的網站，並列出需要修改的原因
2.蒐集優良參考範例，並提出修改方案
3.以photoshop製作：
(1)首頁
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
[hr]
製作步驟
1.請分析欲製作主題網站風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.以photoshop軟體選用其中一種參考版型製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.將製作好之圖檔，置入dreamweaver，製作連結提案模擬
7.存成html，並上傳至ＦＴＰ，於hw05中
8.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：
作業網址：http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
注意事項
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]
Adobe Creative Cloud
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
作業繳交
1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw05/hw05-1045445XXX
作業網址：http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX
(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)製作時請特別注意以下數值，並比較與平面排版之差異：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)
(6)製作心得：
[hr]
注意事項
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]
Adobe Creative Cloud
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
[hr]
作業繳交
1.將製作好之圖檔，置入dreamweaver，製作連結提案模擬，上傳網址為
http://mepopedia.com/~css105-2b/hw04/hw04-1045445XXX
2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud
[hr]
以Photoshop製作網頁版型Mockup與Prototype[hr]
上課影音
網頁視覺提案作業講解
[hr]
上傳Adobe CC 教學
[hr]
截圖軟體
http://soft8ware.com/Graphic/2/455.html#ecms
[hr]
範例：http://mepopedia.com/~jinjin/TaiwanMuseum/
作業參考
(1)
(1)原網站名稱及網址： 高雄市教育部網站-英文版
作業網址：http://mepopedia.com/~web103-2b/hw05/hw05-1025445005
(2)參考網站網址與網站名稱： OK-Studios http://www.ok-studios.de/home/
(2)
網站網址: http://mepopedia.com/~web103-2a/hw05/hw05-1025445064/
(1)原網站名稱及網址：http://www.dill.com.tw/hot-cn.html
(2)參考網站網址與網站名稱： http://www.organic-restaurant.com.tw/
(3)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445040/
(1)原網站名稱及網址：http://www.taiwancoffee.org/index.asp
(4)
作業網址：http://mepopedia.com/~web103-2a/hw05/hw05-1025445073
(1)原網站名稱及網址：http://www.tianzicake.com/chan-pin-jie-shao/chang-tiao-mi-yue-dan-gao/
(2)參考網站網址與網站名稱： http://www.devildessert.chttp://soft8ware.com/Graphic/2/455.html#ecms
[hr]om/
作業網址:http://mepopedia.com/~css104-2b/hw05/hw05-1035445113
(1)原本網站網址及主題：中國科技大學新竹校區 http://ccnt1.cute.edu.tw/hc/
(2)參考網站網址與網站名稱：http://www.u-tokyo.ac.jp/en/index.html
作業網址：http://mepopedia.com/~css104-2b/hw05/hw05-1035445194/
1.首頁(右上) 2. 古蹟巡禮 3.景點簡介
(1)原本網站網站網址及主題： 新竹市觀光旅遊網 http://tourism.hccg.org.tw/index.php
(2)參考網站網址與網站名稱： 歐嬤德式美食 http://www.oma-de.com/
[hr]
上課影音
網頁視覺提案作業講解
[hr]
上傳Adobe CC 教學
[hr]
截圖軟體
Awesome Screenshot
[hr]
MEPO forum
is powered by Phorum.