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

[期末作業說明] 專題網站製作--以網站新人王為例[hr]

1. 作業說明

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

1. 參考網址

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

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]


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

可參考現有免費版型製作，須為多頁版型
http://mepopedia.com/forum/read.php?804,87785

所有網站內容須為原創
包含文字、照片及插圖
若為他人之文字或圖片請務必取得授權並註明來源


[hr]

2. 企劃大綱

請於第十三週5/24前回覆
企劃大綱的內容製作

1.網站主題：
2.內容大綱(導覽列/中文/檔名)：
3.參考版型:
4.主要對象(分析)：
5.網頁架構圖(樹狀圖)：
6.色彩規劃：
7.歷屆得獎分析(至少三組)
8.組員名單(學號）

[hr]

3. 說明

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

第十七週上課前製作完成，課堂報告評分
期末若未出席及繳交作業，期末成績以零分計算

將資料夾命名為 final-學號(組長)，以ＦＴＰ上傳至final資料夾
作業網址為http://mepopedia.com/~web106-2b/final/final-1055445XXX

[hr]

4. 回覆項目

1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445XXX

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

(請編輯於企劃之前)

[hr]

5. 評分標準

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

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

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


(編輯記錄)

企劃大綱
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445097
2.網站主題：吃貨小動物(自創品牌)
3.內容描述：自創品牌介紹
4.風格設計：實體照片與文字說明
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：個人製作。
6.個人製作心得:還不錯
期末回覆
1.網站主題:吃貨小動物(自創品牌)
2.內容大綱(導覽列/中文/檔名)：首頁唷/ 關於我(人物介紹、品牌故事、文創商品)/吃貨語錄
3.參考版型: 老師範例
4.主要對象(分析):老師範例
5.網頁架構圖(樹狀圖)： 關於我=人物介紹、品牌故事、文創商品=可愛貼紙、可愛胸章、可愛袋子
6.色彩規劃:插畫為主、暖色調
7.歷屆得獎分析(至少三組) :未參加
8.組員名單(學號）:1055445097



(編輯記錄)

企劃大綱
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445095
2.網站主題：DANIEL WANG 台北小角落
3.內容描述：首頁/公共空間推薦/分頁一覽 (推廣休閒景點)
4.風格設計：實際照片形塑台北之美與優閒。
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：個人製作。
6.個人製作心得：十分有趣，和ONEPAGE有很大不同，收穫良多。
期末回覆
1.網站主題：DANIEL WANG 台北小角落
2.內容大綱(導覽列/中文/檔名)：首頁/公共空間推薦/分頁一覽 (推廣休閒景點)
3.參考版型 : 授課範例。
4.主要對象(分析)：假日需要推薦去處的人們。
5.網頁架構圖(樹狀圖)：首頁(index)/公共空間推薦(news1-8)/分頁一覽(news) (可互相連結)
6.色彩規劃： 實照與橘白配色。
7.歷屆得獎分析(至少三組) : 暫無。
8.組員名單(學號）:1055445095

企劃大綱
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445146
2.網站主題: 學生旅遊
3.內容描述：首頁/故事內容/分頁一覽
4.風格設計：以多張照片襯托的旅遊集
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：個人製作。
6.個人製作心得：有些地方還是不太能習慣
1.網站主題：學途
2.內容大綱(導覽列/中文/檔名)：首頁/故事內容/分頁一覽 角色設定
3.參考版型 : 授課範例。
4.主要對象(分析)：分享自己的旅遊心得。
5. 色彩規劃：灰白色系。
6歷屆得獎分析(至少三組) : 暫無。
7.組員名單(學號）:1055445146 1055445140



(編輯記錄)

[ 企劃大綱 ]
1.作業網址 : http://mepopedia.com/~web106-2b/final/final-1055445056
2.網站主題 : CUTe 14TH. VCD
3.內容描述 : 系會首頁 / 關於我們 (介紹區)(日常照)(活動照)(迎新照)(影片區)
4.風格設計 : 以簡單又文青的配色去襯托出那些照片的豐富度
5.組員名單 / 工作分配 (視覺規劃 / HTML-CSS設計 / 動態效果) : 個人製作
6.個人製作心得 : 製作網頁還滿好玩的 謝謝 JinJin 的用心教導 !!
[ 期末回覆 ]
1.網站主題 : CUTe 14TH. VCD
2.內容大綱 (導覽列 / 中文 / 檔名) : 系會首頁 / 關於我們 (介紹區)(日常照)(活動照)(迎新照)(影片區)
3.參考版型 : 授課所教的範例
4.主要對象 (分析) : 想要更深入了解視傳系會的人們
5.網頁架構圖 (樹狀圖) : 首頁 (index) / 公共空間-介紹 / 分頁一覽-日常-活動-迎新-影片 (可連結)
6.色彩規劃 : 活動照片與文青白 / 灰 / 黑去做成搭配的顏色
7.歷屆得獎分析 (至少三組) : 尚無
8.組員名單 (學號) : 1055445056



(編輯記錄)

企劃大綱
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445104
2.網站主題：文化旅遊
3.內容描述：首頁-關於-區域分析--淺草-橫濱-六本木
4.風格設計：簡述地區優勢
5.組員名單: 天母陳奕迅
6.個人製作心得：版型之間的js與css無法配合 ㄑㄑ慘慘
期末回覆
1.網站主題：文化旅遊
2.內容大綱：首頁-關於-區域分析--淺草-橫濱-六本木
3.參考版型: 範例。
4.主要對象(分析)：想了解當地生態與歷史
5.網頁架構圖(樹狀圖)：首頁-關於-區域分析--淺草-橫濱-六本木
6.色彩規劃： 白 灰藍統調
7.歷屆得獎分析(至少三組) : 沒去找哭哭。
8.組員名單(學號）:1055445104

(未完成)

企劃大綱
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445104
2.網站主題：文化旅遊
3.內容描述：首頁-關於-區域分析--淺草-橫濱-六本木
4.風格設計：簡述地區優勢
5.組員名單: 天母陳奕迅
6.個人製作心得：版型之間的js與css無法配合 ㄑㄑ慘慘
期末回覆
1.網站主題：文化旅遊
2.內容大綱：首頁-關於-區域分析--淺草-橫濱-六本木
3.參考版型: 範例。
4.主要對象(分析)：想了解當地生態與歷史
5.網頁架構圖(樹狀圖)：首頁-關於-區域分析--淺草-橫濱-六本木
6.色彩規劃： 白 灰藍統調
7.歷屆得獎分析(至少三組) : 沒去找哭哭。
8.組員名單(學號）:1055445104

[ 企劃大綱 ]
1.作業網址 : http://mepopedia.com/~web106-2b/final/final-1055445052
2.網站主題 : 我與我的品牌
3.內容描述 : 介紹自己與自己的品牌的經歷
4.風格設計 : 簡單插畫
5.組員名單 / 工作分配 (視覺規劃 / HTML-CSS設計 / 動態效果) : 個人製作
6.個人製作心得 : 用盡人生力量去完成它了!! 眼睛差點沒掉出來 做網頁會越做越上癮!可是以後沒網頁課了傷心

[ 期末回覆 ]
1.網站主題 : 我與我的品牌
2.內容大綱 (導覽列 / 中文 / 檔名) : 首頁 / 介紹(作者簡介/品牌簡介) / 插畫 / 創作
3.參考版型 : 老師的範例
4.主要對象 (分析) : 喜歡插畫的孩子
5.網頁架構圖 (樹狀圖) : 首頁 (index) / 介紹(作者/品牌) / 插畫(圖文/人像) / 創作(商品)
6.色彩規劃 : 五顏六色 花花世界
7.歷屆得獎分析 (至少三組) : 無
8.組員名單 (學號) : 1055445052



(編輯記錄)

期末回覆
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445082
2.網站主題：花東之旅
3.內容描述： 個人旅遊感想
4.風格設計： 簡單俐落
5.組員名單： 自己一組
6.個人製作心得：對自己的作品還算滿意，沒想到自己也可以完成。

企劃大綱的內容製作
1.網站主題：花東之旅札記
2.內容大綱(導覽列/中文/檔名)：首頁/介紹(台灣東部/照片/花東地圖)
3.參考版型: 授課範例
4.主要對象(分析)：想去花東遊玩的旅人
5.網頁架構圖(樹狀圖)：首頁/介紹(台灣東部/照片/花東地圖)
6.色彩規劃：乾淨俐落。
7.歷屆得獎分析(至少三組) :尚未找尋。
8.組員名單(學號） 1055445082 自己



(編輯記錄)

期末回覆
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445191

2.網站主題：民生社區
3.內容描述： 介紹特色商店、景點
4.風格設計： 簡單
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果):個人製作

企劃大綱的內容製作
1.網站主題：民生社區
2.內容大綱(導覽列/中文/檔名)：HOME首頁/INFORMATION資訊/ABOUT關於/PHOTO照片
3.參考版型: 授課範例
4.主要對象(分析)：想去悠閒地方的人
5.網頁架構圖(樹狀圖)：
HOME首頁/INFORMATION資訊/ABOUT關於（INTRODUCE介紹/LANDSCAPE景觀/STORE商店–美好文具店、有時候紅豆餅、UnipapaX富錦樹、民生戲院）/PHOTO照片
6.色彩規劃：以藍色及綠色延伸
7.歷屆得獎分析(至少三組) :尚未找尋
8.組員名單(學號） 1055445191

企劃大綱
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445076/
2.網站主題：介紹貓咪
3.內容描述：介紹自己領養的流浪貓，推廣領養代替購買的理念，以及養貓的相關知識。
4.風格設計：實體照片及簡單的黑白配色。
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
組員：1055445076李珮瑄（相片調色、內文、視覺規劃、影片製作、插畫）、1055445007吳郁婕（插畫、HTML CSS設計）。
6.個人製作心得： 希望透過這個作業能夠讓大家更了解貓以及如何和貓相處。

期末回覆
1.網站主題：MM.MU
2.內容大綱(導覽列/中文/檔名)： introduce/story/get_along/life/health/kittens/cat_litter/feed/photos/Q&A
3.參考版型: https://html5up.net/dimension
4.主要對象(分析)：愛貓人士、想要養貓的人
5.網頁架構圖(樹狀圖)： introduce介紹/story故事/get_along日常如何相處/life居住環境/health醫療保健/kittens奶貓照顧/cat_litter貓砂/feed餵食/photos照片/Q&A問答
6.色彩規劃：實體照片及簡單的黑白配色。
7.歷屆得獎分析(至少三組) ：未參加
8.組員名單(學號）：1055445076 1055445007



(編輯記錄)

期末回覆
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445038

2.網站主題：彩墨軒工作室
3.內容描述： 介紹台灣3D彩繪
4.風格設計： 繪畫形式
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果):我自己><
眼睛都花了,有兩張大標圖傳上去後就不見變灰色

企劃大綱的內容製作
1.網站主題：彩墨軒工作室
2.內容大綱(導覽列/中文/檔名)：HOME首頁/INFORMATION資訊/ABOUT關於/PHOTO照片
3.參考版型: 授課範例
4.主要對象(分析)：台灣3D彩繪趴趴 GO
5.網頁架構圖(樹狀圖)：
HOME首頁/INFORMATION資訊/ABOUT關於（INTRODUCE介紹/THE FAIRY TALE WORLD童話故事/District地區–台中石岡、嘉義好美里、台中后里、雲林四湖）/PHOTO照片 狗的創作 (每張圖片都要點進去!)
6.色彩規劃：色彩鮮明
7.歷屆得獎分析(至少三組) :尚未找尋
8.組員名單(學號） 1055445038



(編輯記錄)

企劃大綱
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445071
2.網站主題：日常。攝影
3.內容描述：HOME/ABOUT/PHOTOGRAPHY/CONTACT
4.風格設計：用照片訴說故事
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：個人製作。
6.個人製作心得：
期末回覆
1.網站主題：日常。攝影
2.內容大綱(導覽列/中文/檔名)：HOME/ABOUT/PHOTOGRAPHY/CONTACT
3.參考版型 : 超6~授課範例。
4.主要對象(分析)：超6攝影師
5.網頁架構圖(樹狀圖)：Index /About /Photography (Page-List /Attractions - Jiufen /Wulai /Taichung /Kaohsiung /Tainan) /Contact
6.色彩規劃： 實照與橘白配色。
7.歷屆得獎分析(至少三組) : 暫無。
8.組員名單(學號）:1055445071

企劃大綱
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445014/index-move
2.網站主題：個人頻道
3.內容描述：生活介紹 影片 以及工具
4.風格設計：小複雜多元亂加壞掉
5.組員名單: 三畝史伯克 史承平 LUNSROT
6.個人製作心得：後期相簿有點小崩壞 有些就沒放了
期末回覆
1.網站主題：個人頻道
2.內容大綱：介紹一些個人的東西 和影片內容 旅遊介紹
3.參考版型: 範例。
4.主要對象(分析)：我自己
5.網頁架構圖(樹狀圖)：首頁-人物介紹-- TOKYOLOG 幾天的行程
6.色彩規劃： 亮色系
7.歷屆得獎分析(至少三組) : 沒去找哭哭。
8.組員名單(學號）:1055445014

企劃大綱的內容製作
1.網站主題：DIY手作蛋糕
2.內容大綱(導覽列/中文/檔名)： 首頁 。材料&製作方法=優格奶蓋、秒殺巧克力、老奶奶檸檬蛋糕。
製作過程&成品照=photos、一起動手做蛋糕、一起做蛋糕、蛋糕介紹。交通資訊=地圖
3.參考版型: 授課範例
4.主要對象(分析)：讓想DIY蛋糕的人更有方向
5.網頁架構圖(樹狀圖)： 首頁。材料&製作方法。製作過程&成品照。交通資訊
6.色彩規劃：馬卡龍色系
7.歷屆得獎分析(至少三組) 無
8.組員名單(學號） 1055445103、1055445148、1055445190

1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445103

2.網站主題： DIY手作蛋糕
3.內容描述： DIY蛋糕的過程與紀錄
4.風格設計： 甜美可愛
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)： 1055445103(材料&製作方法、HTML改拉頁) 1055445148(製作過程&成品照) 1055445190(首頁、交通資訊、LOGO、CSS、動態效果)
6.個人製作心得： 希望可以讓更多人可以對DIY蛋糕有興趣

企劃大綱
1.網站主題：珍其〔憶〕事
2.內容大綱(導覽列/中文/檔名)： 首頁/主要故事/腳色精靈/故事分鏡/
3.參考版型: 老師的範例
4.主要對象(分析)： 無
5.網頁架構圖(樹狀圖)：首頁/主要故事=我們不一樣、莉莉與巧巧、珍其〔憶〕事 /腳色精靈/故事分鏡/
6.色彩規劃： 橘色為主
7.歷屆得獎分析(至少三組) 無
8.組員名單(學號） 1055445178、1055445085
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445178

2.網站主題：珍其〔憶〕事
3.內容描述： 繪本天地
4.風格設計： 暖色調
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)： 1055445178(CSS)1055445085(視覺與動態)
6.個人製作心得：做完很棒啊

1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445089
2.網站主題：我的自我介紹
3.內容描述：都是我
4.風格設計：節儉風
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：個人製作。
6.個人製作心得:好
期末回覆
1.網站主題:我的自我介紹
2.內容大綱(導覽列/中文/檔名)：首頁 作品總集 作品放大檢視
3.參考版型: 老師範例
4.主要對象(分析):老師範例
5.網頁架構圖(樹狀圖)： 關於我=人物介紹 我的作品 作品放大
6.色彩規劃:簡潔有力
7.歷屆得獎分析(至少三組) :未參加
8.組員名單(學號）:1055445089

企劃大綱的內容製作
1.網站主題：童年
2.內容大綱(導覽列/中文/檔名)：
就是阿哈哈我的家人
3.參考版型: 授課範例
4.主要對象(分析)：關於自己 分享生活
5.網頁架構圖(樹狀圖)： 首頁 介紹自己
6.色彩規劃：簡單
7.歷屆得獎分析(至少三組) 無
8.組員名單(學號） 1055445092

1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445092

2.網站主題： 童年家人
3.內容描述： 成長紀錄與家人
4.風格設計： 簡單簡單哇哈哈
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)： 1055445092
6.個人製作心得：我也不知道 腦袋不見了 但很開心 作完的時候

1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445197

2.網站主題： 所見所聞
3.內容描述： 自己去過的地方
4.風格設計： 簡約，實用
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)： 自己
6.個人製作心得： 已完成，大家辛苦



(編輯記錄)

企劃大綱
1.作業網址：
2.網站主題：交通主題介紹
3.內容描述：烏來台車
4.風格設計：實體照片與文字說明
5.個人製作心得:很有成就感
期末回覆
1.網站主題:交通主題介紹
2.內容大綱(導覽列/中文/檔名)：首頁\臺車歷史\路線歷史\雲仙樂園纜車
3.參考版型: 老師範例
4.主要對象(分析):老師範例

5.網頁架構圖(樹狀圖)：首頁 \ 臺車歷史( 人力臺車歷史 \ 人力台車構造 \ 台車動力機械化 \ 新彩繪台車) \ 路線歷史( 現存路線 \ 廢止路線 \ 路線設備 )\ 雲仙樂園纜車( 雲仙樂園纜車歷史 \ 纜車車廂 \ 纜車鋼繩 )

6.色彩規劃:白底色
7.歷屆得獎分析(至少三組) :未參加



(編輯記錄)

期末回覆：
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445143
2.網站主題：視覺系樂團
3.內容描述：介紹視覺系樂團
5.組員名單:1055445143
6.個人製作心得：我做完了，我好棒

企劃大綱：
1.網站主題： 介紹視覺系樂團
2.內容大綱(導覽列/中文/檔名)：首頁/關於他們/個人介紹樂團/版權聲明
3.參考版型: 改老師的
4.主要對象(分析)：視覺系樂團的樂迷

5.網頁架構圖(樹狀圖)：
首頁/關於他們/個人介紹樂團/版權聲明

個人介紹樂團 -新世紀、新世代、次世代、特別提出

新世紀-ダウト、R指定

新世代-コドモドラゴン、アルルカン

次世代-LEETSPEAK MONSTERS

特別提出- LILITH-凛

6.色彩規劃：粉、白、黑
9.組員名單(學號）：1055445143



(編輯記錄)

作業網址：http://mepopedia.com/~web106-2b/final/final-1055445032
網站主題：自言自語的網站
參考版型: 範例
主要對象 (分析)：大學生的舒壓博君一笑
組員名單 (學號）:1055445032

期末回覆：
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445185
2.網站主題：即食趣
3.內容描述： 介紹吃過好吃的餐點、甜品、冰品
4.風格設計： 插畫搭配暖色調
5.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)： 個人製作
6.個人製作心得： 還不錯

企劃大綱：
1.網站主題： 即食趣
2.內容大綱(導覽列/中文/檔名)： 首頁/超好吃的美食
3.參考版型:
4.主要對象(分析)：喜歡覓食好吃的人們
5.網頁架構圖(樹狀圖)： 首頁/超好吃的美食-即食趣/超商冰品/餐館推薦/南部鹹食/南部甜食
6.色彩規劃：橘、白、綠、灰搭配
7.歷屆得獎分析(至少三組) ：無
8.組員名單(學號）：1055445185

期末回覆：
1.作業網址：http://mepopedia.com/~web106-2b/final/final-1055445068
2.網站主題：YAMAI（雅麥）
3.內容描述： 介紹當地景點 旅遊行程等
5.組員名單:1055445068/1055445176
6.個人製作心得： 阿...部分資訊不完整故有所刪減

企劃大綱：
1.網站主題： 雅麥（YAMAI）
2.內容大綱(導覽列/中文/檔名)：HOME/商家介紹/景點風光/年度活動慶典/遊玩行程/聯絡資訊
3.參考版型: 來源不明...？大部分為自行改寫
4.主要對象(分析)：喜愛原民、大自然、旅遊、露營之全國民眾

5.網頁架構圖(樹狀圖)：
HOME-商家介紹 \\\ 五峰獵人學校、進來看看商店、仙湖露營區、谷燕鱒魚場、鄉村甜柿園、戈巴倫露營區、麥格開心農場、青葉甜柿園
I
景點風光 \\\ 鬼澤山、鬼澤山步道、谷燕瀑布、麥巴來步道
I
年度活動慶典
I
遊玩行程 \\\ 共計六項行程一項行程一個分頁，由於行程名稱過長所以不打在這邊
I
聯絡資訊

6.色彩規劃：紅、黑、白為主色
9.組員名單(學號）：1055445068/1055445176



(編輯記錄)