[期末作業] 專題網站設計

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

1. 作業說明

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

1. 參考網址

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]


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

2. 期末範例

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

持續新增...

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

4. 進度規劃

第十一週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]

5. 企劃大綱

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

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

[hr]

6. 說明

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

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

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

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

[hr]

7. 製作完成後回覆項目

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

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]

8. 評分標準

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

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

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

9. 網頁架構參考

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

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


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

10. 上課影音

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




(編輯記錄)

1.網站主題： 咖啡廳
2.內容大綱(導覽列/中文/檔名)：
3.主要對象(分析)： 喜歡貓咪、咖啡廳的吸貓者
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）： 沉穩色系
7.組員名單(學號） 1075445036、5037、5075
8.心得：有的網頁作好幾次了來是出不來（紅茶咖啡廳、食衣住行），甚至少好多東西，可是自己看就可以。
做的心很累，希望老師高抬貴手

http://file.mepopedia.com/~css108a/final/final-1075445036





(編輯記錄)

1.網站主題：餵食包Feeding Bag
2.內容大綱(導覽列/中文/檔名)：導覽列:1.美食介紹: (1)美食文章(2)優選部落客文章(3)美食攻略教學 2.美食DIY: (1)作法/食譜3.國際美食區: (1)亞洲區(2)歐洲區(3)美洲區 4.美食照片精選: (1)美食照(2)美食照片教學 5.與我聯絡: (1)聯絡我
3.主要對象(分析)：給喜愛到處吃美食、不知道從哪裡找美食的群眾
5.網頁架構圖(樹狀圖)：圖片網址:https://imgur.com/brbQN1U



6.色彩規劃(色調）：暖色系:橘色
7.組員名單(學號）:無分組

1.作業網址：
A班：http://file.mepopedia.com/~css108a/final/final-1075445045

2.網站主題：美食
3.內容描述：關於美食的介紹以及各地的美食。
4.風格設計：暖色調的橘色
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：無
6.個人製作心得：花了好幾個星期製作，才製作完成。



(編輯記錄)

1.網站主題：來自火星的歌手--華晨宇
2.內容大綱(導覽列/中文/檔名)：首頁/關於花花/專輯/照片/聯絡方式
3.主要對象(分析)：他的粉絲
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：主要以黑紅白色做搭配
7.組員名單(學號）無分組
8.資料分析

1.網站主題：My travel diary
2.內容大綱(導覽列/中文/檔名)：旅遊介紹首頁 / 旅遊推薦 / 最愛的景點 / 紀錄 / 聯絡方式
3.主要對象(分析)：喜歡旅行的人
5.網頁架構圖(樹狀圖)：https://imgur.com/a/LanwClf
6.色彩規劃(色調）：簡單的色調
7.組員名單(學號）無分組
8.資料分析:http://file.mepopedia.com/~css108a/final/final-1075445023
9.個人製作心得：能夠用自己拍的照片拿來做網頁覺得很棒



(編輯記錄)

1.網站主題：阿斯達年代記
2.內容大綱(導覽列/中文/檔名)：首頁、劇情，陣容、聯絡我們
3.主要對象(分析)：喜愛這個文化的人
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）：黑 白
7.組員名單(學號）:1075445005、1075445007，1075445015
8.資料分析http://file.mepopedia.com/~css108a/final/final-1075445005



(編輯記錄)

1.作業網址：
http://file.mepopedia.com/~css108b/final/final-1075445002

2.網站主題：世界公正全球貿易公司
3.內容描述：成立貿易公正平台
4.風格設計：普通風格
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：一個人製作
6.個人製作心得：原本是多頁製作，後來省時間無法做多頁。

1.網站主題:18歲的瞬間
2.內容大綱(導覽列/中文/檔名)：首頁/演員介紹/THE MOMENT/劇照/拍攝地點
3.主要對象(分析)劇迷
5.網頁架構圖(樹狀圖)：
6.色彩規劃(色調）： 粉藍白
7.組員名單(學號） 1075445073
8.心得：花好多時間，心很累哈哈
http://file.mepopedia.com/~css108a/final/final-1075445073