Change History

[期末作業說明] 專題網站製作[hr]

<h2>作業說明</h2>
請參考[期末作業說明] 專題網站製作--以網站新人王或全國慈善/科技/人文網頁設計比賽為例


<h3>參考網址</h3>
2019年全國慈善/科技/人文網頁設計比賽暨行動APP創作比賽
https://www.cpmah.org.tw/2019/announcement-2019app.html

2019網頁設計比賽得獎名單
https://www.cpmah.org.tw/2019/20190911.html?showall=&start=2

1.2017-第16屆新人王網站設計大賽 http://2017.netking.tw
2.2016-第15屆新人王網站設計大賽 http://2016.netking.tw
3.2015-第14屆新人王網站設計大賽 http://2015.netking.tw
4.2014-第13屆新人王網站設計大賽 http://2014.netking.tw 發掘台灣新亮點
5.2013-第12屆新人王網站設計大賽 http://2013.netking.tw 台灣讚起來，讓全世界看見（行銷台灣）
6.2012-第11屆新人王網站設計大賽 http://2012.netking.tw 戀戀故鄉，點亮台灣
7.2011-第10屆新人王網站設計大賽 http://2011.netking.tw 建國一百，幸福台灣
8.2010-第9屆新人王網站設計大賽 http://2010.netking.tw 發掘台灣的故事
[hr]


請設計自己有興趣的主題或與台灣有關的主題
如：景點，小吃，行業，廟宇，風俗，文化，故事....等。

<h2>期末範例</h2>
<b>上課期末作業範例線上瀏覽</b>
<a href="http://mepopedia.com/~jinjin/web/final/" target="_blank'><b>http://mepopedia.com/~jinjin/web/final/</b></a>

[url=http://mepopedia.com/~jinjin/web/final.zip]<b>上課期末範例下載</b>[/url]
<hr>
<h2>參考講義</h2>
1.<a href="http://mepopedia.com/forum/read.php?804,90180" target="_blank"><b>[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video</b></a>
2.<a href="http://mepopedia.com/forum/read.php?804,90193" target="_blank"><b>[講義] RWD多頁網頁編輯 (二) 圖片列表頁 / 文章頁</b></a>
3.<a href="http://mepopedia.com/forum/read.php?2814,90206" target="_blank"><b>[講義] RWD多頁網頁編輯 (三) 介紹頁面《關於我們》/ 頂圖微動畫設定</b></a>
3.<a href="http://mepopedia.com/forum/read.php?2814,90206" target="_blank"><b>[講義] RWD多頁網頁編輯 (三) 介紹頁面《關於我們》/ 頂圖微動畫設定</b>
4.<a href="http://mepopedia.com/forum/read.php?804,90217" target="_blank"><b>[講義] RWD多頁網頁編輯 (四) 相簿設定 / 聯絡我們</b>
5.<a href="http://mepopedia.com/forum/read.php?804,90222" target="_blank"><b>[講義] Google Fonts 網路中文字型應用</b></a>

持續新增...

<b>所有網站內容須為原創
包含文字、照片及插圖
若為他人之文字或圖片請務必取得授權並註明來源</b>
[color=#CC0066]＊未依照要求，期末作業不及格＊[/color]

<h2>進度規劃</h2>
第十一週11/20　RWD網頁實作 navigation/dropdown/sub-menu/video
第十二週12/27　RWD網頁實作/列表頁/內容頁/
第十三週12/04　RWD首頁-Slider輪播與animation微動畫/Google Fonts網路中文字型應用
第十四週12/11　RWD-相簿設定【繳交企劃大綱】
第十五週12/18　RWD多頁網站製作/案例分析/問題討論
第十六週01/25　期末作業/RWD多頁專題網站製作-繳交、報告與檢討
第十七週01/01　1/1(三)開國紀念日放假
第十八週01/08　期末考週-期末檢討-分數確認
[hr]
<h2>企劃大綱</h2>
請於第十四週12/11前回覆
企劃大綱的內容製作

1.網站主題：
2.內容大綱(導覽列/中文/檔名)：
3.主要對象(分析)：
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：
7.組員名單(學號）
8.資料分析

[hr]
<h2>說明</h2>
盡可能地將本學期學習的技術應用於其中
仍須<b>以視覺美感為主</b>，設計頁數請盡量至少以<b>十頁以上</b>為主
設計上若有困難，請找老師討論

<b>每週上課確實依照進度製作，期末即可完成期末作業</b>

[color=#CC0066]第十六週上課前製作完成，課堂報告評分
＊期末若未出席及繳交作業，期末成績以零分計算＊[/color]

將資料夾命名為 final-學號(組長)，以ＦＴＰ上傳至final資料夾
作業網址為
A班：http://file.mepopedia.com/~css108a/final/final-1075445XXX
B班：http://file.mepopedia.com/~css108b/final/final-1075445XXX

[hr]
<h2>製作完成後回覆項目</h2>
製作完成後，請在企劃內容前編輯加入以下內容：

1.作業網址：
A班：http://file.mepopedia.com/~css108a/final/final-1075445XXX
B班：http://file.mepopedia.com/~css108b/final/final-1075445XXX

2.網站主題：
3.內容描述：
4.風格設計：
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
6.個人製作心得：

(請編輯於企劃之前)

[hr]
<h2>評分標準</h2>
1.視覺美感、創意
2.內容技巧，是否有應用所學技巧
3.網頁架構（ＨＴＭＬ＋ＣＳＳ）網頁效能
4.網頁內容完整性、原創性
5.工作分配之項目

[hr]
上傳圖片可使用
http://imgur.com/

若寬度太寬，請使用以下語法，將圖片網址帶入：
<xmp><img width="100%" src="圖片網址" border="0">
</xmp>
[hr]
<h2>網頁架構參考</h2>
<img width="100%" src="http://i.imgur.com/tXPqg75.jpg" border="0">

[img]http://i.imgur.com/0j9UKzY.jpg?1[/img]

● 大溪-街角遇見博物館-公有館網頁架構圖
<img width="80%" src="http://i.imgur.com/EC5iczZ.jpg" border="0">

● 大溪-街角遇見博物館-街角館網頁架構圖
<img width="80%" src="http://i.imgur.com/layoK9P.jpg" border="0">

<h2>上課影音</h2>
[講義] RWD多頁網頁編輯 (二) 網頁架構 / 列表頁 / 內容頁 /期末作業講解
https://youtu.be/K5Eol6qjXCE
<iframe width="800" height="400" src="https://www.youtube.com/embed/K5Eol6qjXCE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[期末作業說明] 專題網站製作[hr]

作業說明

請參考[期末作業說明] 專題網站製作--以網站新人王或全國慈善/科技/人文網頁設計比賽為例

參考網址

2018年全國慈善/科技/人文網頁設計比賽暨行動APP創作比賽
https://www.2019年全國慈善/科技/人文網8.html
2017網頁設計比賽得獎名單
https://www.cpmah.org.tw��設計比賽7/20160903.html
2018網頁設計比賽得獎名單
https://www.cpmah.org.tw/2018/2018��行動APP創作比賽
.org.tw/2019/announcement-2019app.html

2019網頁設計比賽得獎名單
https://www.cpmah.org.tw/2019/20190911.html?showall=&start=2

1.2017-第16屆新人王網站設計大賽 http://2017.netking.tw
2.2016-第15屆新人王網站設計大賽 http://2016.netking.tw
3.2015-第14屆新人王網站設計大賽 http://2015.netking.tw
4.2014-第13屆新人王網站設計大賽 http://2014.netking.tw 發掘台灣新亮點
5.2013-第12屆新人王網站設計大賽 http://2013.netking.tw 台灣讚起來，讓全世界看見（行銷台灣）
6.2012-第11屆新人王網站設計大賽 http://2012.netking.tw 戀戀故鄉，點亮台灣
7.2011-第10屆新人王網站設計大賽 http://2011.netking.tw 建國一百，幸福台灣
8.2010-第9屆新人王網站設計大賽 http://2010.netking.tw 發掘台灣的故事
[hr]


請設計自己有興趣的主題或與台灣有關的主題
如：景點，小吃，行業，廟宇，風俗，文化，故事....等。

期末範例

上課期末作業範例線上瀏覽
[講義] RWD多頁網頁編輯 (一) skin / navigation / Menu / video
2.[講義] RWD多頁網頁編輯 (二) 圖片列表頁 / 文章頁
3.[講義] RWD多頁網頁編輯 (三) 介紹頁面《關於我們》/ 頂圖微動畫設定
3.[講義] RWD多頁網頁編輯 (三) 介紹頁面《關於我們》/ 頂圖微動畫設定
4.[講義] RWD多頁網頁編輯 (四) 相簿設定 / 聯絡我們
5.[講義] Google Fonts 網路中文字型應用

持續新增...

所有網站內容須為原創
包含文字、照片及插圖
若為他人之文字或圖片請務必取得授權並註明來源
[color=#CC0066]＊未依照要求，期末作業不及格＊[/color]

進度規劃

第十一週11/20　RWD網頁實作 navigation/dropdown/sub-menu/video
第十二週12/27　RWD網頁實作/列表頁/內容頁/
第十三週12/04　RWD首頁-Slider輪播與animation微動畫/Google Fonts網路中文字型應用
第十四週12/11　RWD-相簿設定【繳交企劃大綱】
第十五週12/18　RWD多頁網站製作/案例分析/問題討論
第十六週01/25　期末作業/RWD多頁專題網站製作-繳交、報告與檢討
第十七週01/01　1/1(三)開國紀念日放假
第十八週01/08　期末考週-期末檢討-分數確認
[hr]

企劃大綱

請於第十四週12/11前回覆
企劃大綱的內容製作

1.網站主題：
2.內容大綱(導覽列/中文/檔名)：
3.主要對象(分析)：
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：
7.組員名單(學號）
8.資料分析

[hr]

說明

盡可能地將本學期學習的技術應用於其中
仍須以視覺美感為主，設計頁數請盡量至少以十頁以上為主
設計上若有困難，請找老師討論

每週上課確實依照進度製作，期末即可完成期末作業

[color=#CC0066]第十六週上課前製作完成，課堂報告評分
＊期末若未出席及繳交作業，期末成績以零分計算＊[/color]

將資料夾命名為 final-學號(組長)，以ＦＴＰ上傳至final資料夾
作業網址為
A班：http://file.mepopedia.com/~css108a/final/final-1075445XXX
B班：http://file.mepopedia.com/~css108b/final/final-1075445XXX

[hr]

製作完成後回覆項目

製作完成後，請在企劃內容前編輯加入以下內容：

1.作業網址：
A班：http://file.mepopedia.com/~css108a/final/final-1075445XXX
B班：http://file.mepopedia.com/~css108b/final/final-1075445XXX

2.網站主題：
3.內容描述：
4.風格設計：
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
6.個人製作心得：

(請編輯於企劃之前)

[hr]

評分標準

1.視覺美感、創意
2.內容技巧，是否有應用所學技巧
3.網頁架構（ＨＴＭＬ＋ＣＳＳ）網頁效能
4.網頁內容完整性、原創性
5.工作分配之項目

[hr]
上傳圖片可使用
http://imgur.com/

若寬度太寬，請使用以下語法，將圖片網址帶入：
<img width="100%" src="圖片網址" border="0"> <br />
[hr]

網頁架構參考

[img]http://i.imgur.com/0j9UKzY.jpg?1[/img]

● 大溪-街角遇見博物館-公有館網頁架構圖


● 大溪-街角遇見博物館-街角館網頁架構圖

上課影音

[講義] RWD多頁網頁編輯 (二) 網頁架構 / 列表頁 / 內容頁 /期末作業講解
https://youtu.be/K5Eol6qjXCE