Change History
Message: [講義] 網頁美感排版設計
Changed By: JinJin
Change Date: May 08, 2015 10:02PM
[講義] 網頁美感排版設計
Change Date: May 08, 2015 10:02PM
[講義] 網頁美感排版設計
<h2>網頁美感排版設計參考講義</h2>
請參考[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
<h2>設計目的</h2>1.解讀與思考設計主題如何透過網頁形式表現
2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧
[hr]
<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
體驗雲端共享ＰＳＤ的便利。
llscreen></iframe>
)網站網站網址及主題：
(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>
網頁視覺提案作業講解
<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>
PSD發想
http://blog.spoongraphics.co.uk/tutorials/how-to-create-a-sleek-grid-based-website-design
http://line25.com/tutorials/create-a-grid-based-web-design-in-html5-css3
http://www.psd2html.com
http://www.psd2html.com/blog
https://css-tricks.com
[hr]
熟讀學習網站
<b>W3Schools</b>
http://www.w3schools.com/
若欲javascript:editor_tools_handle_underline()加強自己網頁設計的能力，請同學每天花時間研讀網站上HTML與CSS的部分
必能增加自己的能力。
[hr]
<b>CssZenGarden</b>
http://www.csszengarden.com/
同樣的HTML，改變不同的CSS呈現不同的視覺樣貌
[hr]
推薦設計師
<b>Chris Spooner</b>
http://line25.com/
http://blog.spoongraphics.co.uk/
[hr]
<h2>博物館相關網站 </h2>
羅浮宮 http://www.louvre.fr/
大英博物館 http://www.britishmuseum.org/
大都會藝術博物館 http://www.metmuseum.org/
國家美術館 http://www.nationalgallery.org.uk/
梵蒂岡博物館 http://mv.vatican.va/3_EN/pages/MV_Home.html
泰特現代藝術館 http://www.tate.org.uk/
國立故宮博物院 http://www.npm.gov.tw/zh-TW/
國家藝廊 http://www.nga.gov/home.htm
龐畢度中心 http://www.cnac-gp.fr/
奧賽博物館 http://www.musee-orsay.fr/
維多利亞與艾伯特博物館 http://www.vam.ac.uk/
索菲亞王后國家藝術中心博物館 http://www.museoreinasofia.es/
現代藝術博物館 http://www.moma.org/
韓國國立中央博物館 http://www.museum.go.kr/site/main/index001
埃爾米塔日博物館 http://www.hermitagemuseum.org/
http://cloud.culture.tw
http://collections.culture.tw/Default.aspx
http://event.moc.gov.tw/mp.asp?mp=1
http://nrch.cca.gov.tw
http://masonry.desandro.com
http://www.queness.com/post/8287/8-magical-dynamic-and-fluid-layout-and-how-to-make-it
http://www.pixillion.com
http://dynamit.com
http://www.mksdarchitects.com
http://www.websterhall.com/timeline/
http://halcyon-theme.tumblr.com
[hr]
<h2>切版練習</h2>
檔案下載 http://d.pr/f/iqrv
切版雖然是較舊的技術，但仍然是必學的技術之一，可應用於與客戶提案或較小型及個人網站之用
[hr]
範例
http://mepopedia.com/forum/read.php?1651,42885
http://mepopedia.com/forum/read.php?1650,42884
[hr]
<h2>參考範本語法</h2>
HTML
<xmp><!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>作業五</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
</xmp>
[hr]
CSS
<xmp>@charset "utf-8";
/* CSS Document */
body{
margin: 0px;
}
#wrapper{
width: px;
margin: auto;
}
</xmp>
請參考[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
<h2>設計目的</h2>1.解讀與思考設計主題如何透過網頁形式表現
2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧
[hr]
<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
體驗雲端共享ＰＳＤ的便利。
llscreen></iframe>
)網站網站網址及主題：
(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>
網頁視覺提案作業講解
<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>
PSD發想
http://blog.spoongraphics.co.uk/tutorials/how-to-create-a-sleek-grid-based-website-design
http://line25.com/tutorials/create-a-grid-based-web-design-in-html5-css3
http://www.psd2html.com
http://www.psd2html.com/blog
https://css-tricks.com
[hr]
熟讀學習網站
<b>W3Schools</b>
http://www.w3schools.com/
若欲javascript:editor_tools_handle_underline()加強自己網頁設計的能力，請同學每天花時間研讀網站上HTML與CSS的部分
必能增加自己的能力。
[hr]
<b>CssZenGarden</b>
http://www.csszengarden.com/
同樣的HTML，改變不同的CSS呈現不同的視覺樣貌
[hr]
推薦設計師
<b>Chris Spooner</b>
http://line25.com/
http://blog.spoongraphics.co.uk/
[hr]
<h2>博物館相關網站 </h2>
羅浮宮 http://www.louvre.fr/
大英博物館 http://www.britishmuseum.org/
大都會藝術博物館 http://www.metmuseum.org/
國家美術館 http://www.nationalgallery.org.uk/
梵蒂岡博物館 http://mv.vatican.va/3_EN/pages/MV_Home.html
泰特現代藝術館 http://www.tate.org.uk/
國立故宮博物院 http://www.npm.gov.tw/zh-TW/
國家藝廊 http://www.nga.gov/home.htm
龐畢度中心 http://www.cnac-gp.fr/
奧賽博物館 http://www.musee-orsay.fr/
維多利亞與艾伯特博物館 http://www.vam.ac.uk/
索菲亞王后國家藝術中心博物館 http://www.museoreinasofia.es/
現代藝術博物館 http://www.moma.org/
韓國國立中央博物館 http://www.museum.go.kr/site/main/index001
埃爾米塔日博物館 http://www.hermitagemuseum.org/
http://cloud.culture.tw
http://collections.culture.tw/Default.aspx
http://event.moc.gov.tw/mp.asp?mp=1
http://nrch.cca.gov.tw
http://masonry.desandro.com
http://www.queness.com/post/8287/8-magical-dynamic-and-fluid-layout-and-how-to-make-it
http://www.pixillion.com
http://dynamit.com
http://www.mksdarchitects.com
http://www.websterhall.com/timeline/
http://halcyon-theme.tumblr.com
[hr]
<h2>切版練習</h2>
檔案下載 http://d.pr/f/iqrv
切版雖然是較舊的技術，但仍然是必學的技術之一，可應用於與客戶提案或較小型及個人網站之用
[hr]
範例
http://mepopedia.com/forum/read.php?1651,42885
http://mepopedia.com/forum/read.php?1650,42884
[hr]
<h2>參考範本語法</h2>
HTML
<xmp><!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>作業五</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="wrapper">
</div>
</body>
</html>
</xmp>
[hr]
CSS
<xmp>@charset "utf-8";
/* CSS Document */
body{
margin: 0px;
}
#wrapper{
width: px;
margin: auto;
}
</xmp>
Changed By: JinJin
Change Date: May 08, 2015 08:34AM
[講義] 網頁美感排版設計
Change Date: May 08, 2015 08:34AM
[講義] 網頁美感排版設計
Changed By: JinJin
Change Date: April 30, 2015 03:31PM
[講義] 網頁美感排版設計
Change Date: April 30, 2015 03:31PM
[講義] 網頁美感排版設計
Changed By: JinJin
Change Date: April 29, 2015 09:54PM
[講義] 網頁美感排版設計
Change Date: April 29, 2015 09:54PM
[講義] 網頁美感排版設計
Changed By: JinJin
Change Date: April 29, 2015 09:32AM
[講義] 網頁美感排版設計
Change Date: April 29, 2015 09:32AM
[講義] 網頁美感排版設計
Original Message
作者: JinJinDate: April 29, 2015 12:58AM
[講義] 網頁美感排版設計
網頁美感排版設計參考講義
請參考[講義] 網頁設計的美學原則：http://mepopedia.com/forum/read.php?804,42883
[講義] 以Photoshop製作網頁版型：http://mepopedia.com/forum/read.php?804,43354
[hr]
設計目的
1.解讀與思考設計主題如何透過網頁形式表現2.了解網頁實際內容與細節
3.觀察優良網站的設計原則
4.增強網頁排版的能力與技巧
[hr]
設計主題
請以文化部網站為範例(或其他類似較具規模之網站）http://www.moc.gov.tw
以photoshop製作：
(1)首頁http://www.moc.gov.tw
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
http://www.moc.gov.tw/information_250_35497.html
h2>設計主題以文化部網站為範例(或其他類似較具規模之網站）
http://www.moc.gov.tw
以photoshop製作：
(1)首頁http://www.moc.gov.tw
(2)滑鼠移過的效果
(3)進入後的至少其中一子頁(內頁，文章頁或活動頁等)
改範例(或其他需要修改設計之1.請分析文化部網站）
設計主題
請選擇一需量及網站，參考其排版與風格要修改的網站，並列出需要修改的原因
或以科技部，或文化部等網站為修改範例
http://www.most.gov.tw
http://www.moc.gov.tw
蒐集優良參考範例，並提出修改方案
以photoshop製作：
(1)首頁http://www.most.gov.tw （http://www.moc.g至少其中一子頁(內頁，文章頁或活動頁等)
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.請繪製草6.[color=#CC0066]完成後請保留原檔[/color](以方便日後修改)，並存成PDF檔以夾檔方式上傳，並將檔名命名為 hw02-學號.pdf 。
7.做簡易切版，並上傳至ＦＴＰ，於hw05中
圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.試著以格線系統重新排版，以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.[color=#CC0066]完成後請保留原檔[/color](以方便日後修改)，並存成PDF檔以夾檔方式上傳，並將檔名命名為 hw02-學號.pdf 。
7.做簡易切版，或將圖片製作簡易連結。存成html，並上傳至ＦＴＰ，於hw05中
8.請至http://www.adobe.com/tw/
草圖或選擇你認為值得學習的網站首頁作為練習對象，截圖置入photoshop當作背景。
5.以原參考網頁的版型與網頁資訊，重新以photoshop設計，包含標題文字、圖片、色彩。
6.存成html，並上傳至ＦＴＰ，於h(1)網站主題：
w05中
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]
注意事項
1.[color=#CC0066]排版比例、間距、字體大小、等請盡量以參考範本為主[/color]。
2.中文字體以微軟正黑、新細明體、標楷體為主，一般設定建議以微軟正黑為主，較具設計質感。
3.[color=#CC0066]網頁單位請務必以px標示，[/color]並注意整體網頁的寬度。
4.請於規定時間準時繳交作業，逾期不後。
[hr]
Adobe Creative Cloud
請至http://www.adobe.com/tw/
註冊帳號
將完成的檔案ＰＳＤ及ＪＰＧ
上傳至Adobe Creative Cloud
體驗雲端共享ＰＳＤ的便利。
)網站網站網址及主題：
(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]
上課影音
網頁視覺提案作業講解
[hr]
上傳Adobe CC 教學
[hr]
參考網站
PSD發想
http://blog.spoongraphics.co.uk/tutorials/how-to-create-a-sleek-grid-based-website-design
http://line25.com/tutorials/create-a-grid-based-切版雖然是較舊的技術，但仍然是必學的技術之一，可應用於較小型或個人的網站web-design-in-html5-css3
http://www.psd2html.com
http://www.psd2html.com/blog
https://css-tricks.com
[hr]
熟讀學習網站
W3Schools
http://www.w3schools.com/
若欲javascript:editor_tools_handle_underline()加強自己網頁設計的能力，請同學每天花時間研讀網站上HTML與CSS的部分
必能增加自己的能力。
[hr]
CssZenGarden
http://www.csszengarden.com/
同樣的HTML，改變不同的CSS呈現不同的視覺樣貌
[hr]
推薦設計師
Chris Spooner
http://line25.com/
http://blog.spoongraphics.co.uk/
[hr]
博物館相關網站
羅浮宮 http://www.louvre.fr/
大英博物館 http://www.britishmuseum.org/
大都會藝術博物館 http://www.metmuseum.org/
國家美術館 http://www.nationalgallery.org.uk/
梵蒂岡博物館 http://mv.vatican.va/3_EN/pages/MV_Home.html
泰特現代藝術館 http://www.tate.org.uk/
國立故宮博物院 http://www.npm.gov.tw/zh-TW/
國家藝廊 http://www.nga.gov/home.htm
龐畢度中心 http://www.cnac-gp.fr/
奧賽博物館 http://www.musee-orsay.fr/
維多利亞與艾伯特博物館 http://www.vam.ac.uk/
索菲亞王后國家藝術中心博物館 http://www.museoreinasofia.es/
現代藝術博物館 http://www.moma.org/
韓國國立中央博物館 http://www.museum.go.kr/site/main/index001
埃爾米塔日博物館 http://www.hermitagemuseum.org/
http://cloud.culture.tw
http://collections.culture.tw/Default.aspx
http://event.moc.gov.tw/mp.asp?mp=1
http://nrch.cca.gov.tw
http://masonry.desandro.com
http://www.queness.com/post/8287/8-magical-dynamic-and-fluid-layout-and-how-to-make-it
http://www.pixillion.com
http://dynamit.com
http://www.mksdarchitects.com
http://www.websterhall.com/timeline/
http://halcyon-theme.tumblr.com
[hr]
切版練習
檔案下載 http://d.pr/f/iqrv
切版雖然是較舊的技術，但仍然是必學的技術之一，可應用於與客戶提案或較小型及個人網站之用
[hr]
範例
http://mepopedia.com/forum/read.php?1651,42885
http://mepopedia.com/forum/read.php?1650,42884
[hr]
參考範本語法
HTML
[hr]
CSS
MEPO forum
is powered by Phorum.