Change History

<h2>網頁美感排版設計參考講義</h2>
請參考[講義] 網頁美感排版設計：http://mepopedia.com/forum/read.php?804,75770

[hr]
<h2>設計目的</h2>1.解讀與思考設計主題如何透過網頁形式表現
2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧

<h2>設計主題</h2>請選擇一需要修改的網站，並列出需要修改的原因
或以科技部，或文化部等網站為修改範例
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]
<h2>製作步驟</h2>
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]
<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]

<b>1.製作連結提案模擬，上傳網址為
http://mepopedia.com/~web103-2a/hw05/hw05-1025445XXX</b>

2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud

[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]<h2>作業繳交</h2>
<b>1.製作連結提案模擬，上傳網址為
http://mepopedia.com/~web103-2a/hw05/hw05-1025445XXX</b>

2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud

[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://mepopedia.com/forum/read.php?804,75770

[hr]

設計目的

1.解讀與思考設計主題如何透過網頁形式表現
2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧

[hr]

設計主題

以科技部，或文化部等網站為修改範例(或其他類似較具規模之網站）

設計主題

以科技部，或文化部等網站為修改範例(或其他自選網站）

設計主題

以科技部，或文化部等網站為修改範例(或其他類似較具規模之網站）

設計主題

請選擇一需要修改的網站，並列出需要修改的原因
或以科技部，或文化部等網站為修改範例
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]

製作步驟

1.請分析文化部網站（或欲製作主題網站）風格與元素，並加以整理。
2.搜尋相關資料及網站，參考其排版與風格
3.下載[url=https://github.com/nathansmith/960-Grid-System/archive/master.zip]格線系統版型[/url]，並以photoshop軟體版本選用其中一種製作。
4.請繪製草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.試著以格線系統重新排版，以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。

6.[color=#CC0066]完成後請保留原檔[/color](以方便日後修改)，並存成PDF檔以夾檔方式上傳，並將檔名命名為 hw02-學號.pdf 。

7.做簡易切版，或將圖片製作簡易連結。存成html，並上傳至ＦＴＰ，於hw05中

8.請至http://www.adobe.com/tw/
�草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photo(1)網站主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字體設定(font-family)
h1,h2標題級數
h3文章標題級數
內文級數(font-size)(單位px)
區塊內與區塊間的距離(padding)(margin)(單位px)
網站寬度(width)(單位px)

(6)製作心得：

學號shop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.存成html，並上傳至ＦＴＰ，於h(1)原網站名稱及網址：
w05中

7.請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud

6.上傳
(1)首頁，(2)滑鼠移過的效果，(3)進入後的至少其中一子頁。
並請回覆：


2.請至http://www.adobe.com/tw/ 註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud

3.製作連結提案模擬，上傳網址為
http://mepopedia.com/~web103-2a/hw05/hw05-1025445XXX

2.請至http://www.adobe.com/tw/ 註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud

3.製作連結提案模擬，上傳網址為
http://mepopedia.com/~web103-2a/hw05/hw05-1025445XXX在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud

3.製作連結提案模擬，上傳網址為
http://mepopedia.com/~web103-2a/hw05/hw05-1025445XXX作業網址：

(1)網站網站網址及主題：
(2)參考網站網址與網站名稱：
(3)色彩計畫：
(4)風格特色：
(5)請整理以下數值：
字��保留PSD課堂製作
�新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。

[hr]

Adobe Creative Cloud3.製作連結提案模擬，上傳網址為
http://mepopedia.com/~web103-2a/hw05/hw05-1025445XXXedia.com/~web103-2a/hw05/hw05-1025445XXX

2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud

[hr]

上課影音

網頁視覺提案作業講解



[hr]
上傳Adobe CC 教學



[hr]

作業繳交

1.製作連結提案模擬，上傳網址為
http://mepopedia.com/~web103-2a/hw05/hw05-1025445XXX

2.請至http://www.adobe.com/tw/ 註冊帳號
在檔案內新增資料夾---學號姓名-進階網頁設計
將完成的檔案ＰＳＤ及ＪＰＧ，上傳至Adobe Creative Cloud

[hr]

上課影音

網頁視覺提案作業講解



[hr]
上傳Adobe CC 教學



[hr]