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

1. 作業說明

請參考[期末作業說明] 專題網站製作--以網站新人王為例
http://mepopedia.com/forum/read.php?2428,75914

網站新人王網站
http://2015.netking.tw

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

[hr]

2. 企劃大綱

請於第十六週前回覆
企劃大綱的內容製作

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

[hr]

3. 說明

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

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

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

[hr]

4. 回覆項目

1.作業網址：

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

[hr]
企劃大綱

1.網站主題：
2.內容大綱：
3.主要對象(分析)：
4.網頁架構圖(樹狀圖)：
5.網頁版型設計圖
6.色彩規劃：
7.歷屆得獎分析(至少三組)

[hr]

5. 評分標準

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

1.作業網址： http://mepopedia.com/~css104-2a/final/final-1035445094

2.網站主題： 台灣鬼屋
3.網站架構（導覽） :


4.內容描述：台灣由北到南的5大景點鬼屋
5.風格設計：黑暗
6.組員名單，工作分配：
094 陳欣函 製作網頁
196 葉至洋 收集資料 html

7.個人製作心得：很麻煩 有很多語法找不到問題出在哪裡



(編輯記錄)

1.作業網址：http://mepopedia.com/~css104-2a/final/final-1035445088
2.網站主題： 台南之旅
3.網站架構（導覽）


4.內容描述： 將台南分成五區個別介紹古蹟、小吃
5.風格設計： 復古風格
6.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
HTML製作：073許孟涵
HTML製作、各項資料、圖片：088邱巧妮
插圖繪製、HTML CSS製作、動態效果：178梁尹菱
視覺規劃、HTML CSS設計：184邱品蓉

7.個人製作心得： 動態 jQuery 燈箱效果好困難......


企劃大綱

1.網站主題： 台南之旅
2.內容大綱： 將台南之旅分成中西區、北區、安平區、安南區、南區、仁德區來介紹。
3.主要對象(分析)： 對台南小吃、景點有興趣的人。
4.網頁架構圖(樹狀圖)：
5.網頁版型設計圖：
(1)首頁

(2)內頁

6.色彩規劃： 簡約，以淺色系為主、加上咖啡色的文字
7.歷屆得獎分析(至少三組)
(1)夜市遊樂町
優點: 他將大部分夜市裡玩樂的東西縮小成了可愛的符號，將他們各項分類，利用了縮時的影片和相片轉換，清楚表達他們的網頁目的，還設計了網友票選推薦，十分的新穎，頁面也很簡潔明瞭，分類的簡介也做得蠻詳細的，在最下方也做了頁面的轉換紐，十分方便。
缺點: 覺得介紹的東西少了一點，覺得圖片轉換的地方顏色有一點不是很搭，覺得在點轉換的時候如果可以連外框的顏色也一起變換的話會更好。

(2)BRT 台中PAPAGO
優點：網站整體看起來很活潑，圖片簡單可愛。
交通資訊很清楚，因為台中有搭公車10公里免費，所以民眾搭公車更為盛行，會是個實用的網站。站內也介紹了台中很多知名景點，把台中介紹的淋漓盡致，很詳細，圖片排版我也很喜歡。
缺點：其他地方都有改字體，如果用細明體的部份也換一下，覺得應該會更好。
網站的單頁面有點過長，如果能分頁，閱讀上會更便利。

(3)大山北月
優點：從首頁開始就很有感覺，雖然背景是白底卻不會覺得單調，而且很清爽，
圖片的動態效果也很活潑，有音樂，跟網站的感覺很配，插圖很可愛，
字體也很搭。資訊清晰沒有過多的累贅文字，會讓人想看完。
缺點：有些地方的圖片過大超出瀏覽範圍，連單張都無法完整看見，可以再縮小一些。


組員： 1035445073許孟涵、1035445088邱巧妮、1035445178梁尹菱、1035445184邱品蓉



(編輯記錄)

1.網站主題： 南寮
2.內容大綱： 自己設計地圖
3.主要對象(分析)： 喜歡南寮這地方
4.網頁架構圖(樹狀圖)： http://imgur.com/hxY2fnV
5.網頁版型設計圖

6.色彩規劃： 以海洋藍綠為主

8.組員名單(學號）
115林佳琦
031蔡尚璇
130陳晏庭
217蔣婷婷


1.作業網址： http://mepopedia.com/~css104-2a/final/final-1035445115/home.html

2.網站主題： 南寮
3.網站架構（導覽）
4.內容描述： 南寮小風景
5.風格設計： 簡單淡雅踏入海中
6.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)： 所有人一起想一起做不分你我
7.個人製作心得： 總歸一句話，努力不懈才值得。



(編輯記錄)

作業網址：http://mepopedia.com/~css104-2a/final/final-1035445228
1.網站主題： 住民
2.內容大綱： 介紹原住民的文化
3.主要對象(分析)： 喜歡原住民文化的朋友
4.網頁架構圖(樹狀圖)：[img]http://i.imgur.com/2xwJtZP.jpg[/img]
5.網頁版型設計圖 [img]http://i.imgur.com/Bg5LR4S.jpg[/img]
[img]http://i.imgur.com/7gi9duR.jpg[/img]
6.色彩規劃： 以多色為主

8.組員名單(學號）
1035445037古金玉
1035445064林旆瑀
1035445228張振豪



(編輯記錄)

1.作業網址： http://mepopedia.com/~css104-2a/final/final-1035445157/index.html

2.網站主題：Welcome to Taichung
3.內容大綱：介紹台中的景點與美食
4.主要對象(分析)： 想去台中玩樂的人
5.風格設計：簡單明瞭
色彩規劃： 用綠色帶出自然 平靜的感覺
6.網站架構（導覽）
http://i.imgur.com/pqZ4q8K.jpg
7.網頁版型設計圖
首頁：
http://i.imgur.com/JZ7qgMK.png
分頁
http://i.imgur.com/4fXrtcM.jpg
8.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：

組員：
1035445157 徐磊
1035445142 李奕賢
1035445151 高浩宸
1035445166 馬亞辰

工作分配：
視覺規劃：徐磊 / 高浩宸
HTML CSS設計：徐磊 / 李奕賢 / 馬亞辰
動態效果：徐磊 / 高浩宸

9.個人製作心得：
一開始覺得蠻難的，比較瞭解之後就覺得簡單多了
10.歷屆得獎分析(至少三組)
BRT 台中PAPAGO
http://www.ibrt.tw/
整個網頁都很清楚，資料也很詳細，畫面豐富 是一個非常好的網站。

大山北月
http://www.bighillnorthmoon.tw/cafe/
整體都是插畫的風格很可愛，不過也因為內文用手寫的比較不易閱讀。

歲月時分
http://timeline.tw/
這也是用插畫的風格，以人的幼年到老年來分類覺得很可愛，不過內容有點簡陋。

1.作業網址： http://mepopedia.com/~css104-2a/final/final-1045245001/index.html
2.網站主題：海底世界知多少?
3.網站架構 http://imgur.com/DSHOyKe
4.內容描述： 海底世界的不同知識
5.風格設計： 用海底世界作為背景介紹不同種類的海洋動物
6.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)： 1045245001方彩晶
7.個人製作心得： 好難一堆程式碼,我花了好久才看懂,幸而不負眾望成功完成了這個網頁,
在背景圖和動物的圖花了不少時間畫.能夠完成是很滿足.希望之後還有機會學習更多.



網頁架構圖(樹狀圖)： http://imgur.com/DSHOyKe
網頁版型設計圖 :向下滑動
色彩規劃：主要用藍色色系配合海底的顏色
歷屆得獎分析(至少三組)

BRT 台中PAPAGO
http://www.ibrt.tw/
用了公車的路線設計吸引人們遊覧台中,成功介紹台中的景點和乘車方法
插畫吸引了不少讀者

台灣包車網‧包車遊台灣
http://www.baoche.tw/
資料詳細,背景色吸引目光,圖片齊全


夜市遊樂町
http://www.night-market.tw/?ckattempt=1
簡單明瞭介紹夜市,能吸引人留意,字體鮮明易讀



(編輯記錄)

1.作業網址：http://mepopedia.com/~css104-2a/final/final-1035445211

2.網站主題： 野柳風情
3.主要對象(分析)：野柳觀光客，和有興趣的人。
4.網站架構（導覽）

首頁

分頁

5.內容描述： 野柳公園、生態、人文、奇景、美食介紹
6.風格設計： 可愛、簡約、清新
7.色彩規劃：藍色、綠色、灰色、咖啡色
8.組員名單
1035445211 劉雅軒
1035445214蘇庭萱
1035445079羅苡嘉

9.工作分配
1035445214蘇庭萱 : 奇景 、圖片(視覺規劃、HTML CSS設計、動態效果) 、所有文字資料、標題字、報告
1035445211 劉雅軒 : 首頁、野柳公園、生態、人文、美食(視覺規劃、HTML CSS設計、動態效果) 、圖片、背景草圖
1035445079羅苡嘉 : 灰色背景ai、給建議、美食的文字

10.個人製作心得：
做非常疲累加眼花 ...╮(╯v╰)╭ ...終於做完了~!!!

11歷屆得獎分析(至少三組)
BRT 台中PAPAGO
http://www.ibrt.tw/
動線有趣，網頁整體規劃完整、一致性、現代化，圖案討喜，資料豐富。

台灣字崛
http://www.words.tw/
畫面簡潔日常給人舒適的感覺，有各種點擊效果，頁面滑動效果，整體一致又有變化性。

夜市遊樂町 一銅遊夜市
http://www.night-market.tw/
滑鼠效果有趣，內容完整，有互動性，圖案好看，整體簡潔有趣。



(編輯記錄)

1.作業網址： http://mepopedia.com/~css104-2a/final/final-1035445001/index1.html

2.網站主題： 萬華
3.網站架構（導覽）

View post on imgur.com

4.內容描述：
首頁

View post on imgur.com

內頁1

View post on imgur.com

分頁1

View post on imgur.com

燈箱與動畫

View post on imgur.com

5.風格設計： 以古色古香的猛家煮為主題加以延伸
6.組員名單
1035445001 劉耘圻
1035445163 傅泰誠
工作分配
視覺規劃、HTML-傅泰誠
CSS設計、動態效果-劉耘圻
7.個人製作心得：邊做邊玩邊學習,更加了解有關萬華以及網頁



(編輯記錄)

1.作業網址： http://mepopedia.com/~css104-2a/final/final-1035445097

2.網站主題： 台北植物園導覽
3.網站架構（導覽） :


4.內容描述：介紹台北植物園園區與周遭環境和歷史
5.風格設計：簡單和水墨的風格
6.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
097林語揚html.css 046 顏汝亦 收集資料.視覺規劃
025 吳晉廷收集資料.css 202 張洺碩 動態效果
208 趙冠泓 收集資料 html

7.個人製作心得：很麻煩 有很多語法找不到問題出在哪裡

1.作業網址：http://mepopedia.com/~css104-2a/final/final-1035445061/

2.網站主題： 艋舺導覽
3.網站架構（導覽） :
http://imgur.com/6lCDbG5

4.內容描述：介紹艋舺的景點
5.風格設計：粉色艋舺
6.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
1035445061方莉

7.個人製作心得：終於做完期末最後一項作業了 真是可喜可賀可喜可樂

1.網站主題： 新竹美食
2.內容大綱： 設計地圖與介紹
3.主要對象(分析)： 新竹特色美食
4.網頁架構圖(樹狀圖)：
5.網頁版型設計圖
6.色彩規劃：

8.組員名單(學號）

169 簡郡誼
187 謝沅蓁
205 江宛宜

1.網站主題： 內灣
2.內容大綱： 自己設計地圖
3.主要對象(分析)： 喜歡內灣這地方
4.網頁架構圖(樹狀圖)：

5.網頁版型設計圖
6.色彩規劃：簡單乾淨的綠色

8.組員名單(學號）
148曾威郡
127蔡亦傑
172邱薏娟
145張子芸
3110劉家妤


1.作業網址：http://mepopedia.com/~css104-2a/final/final-1035445127/

2.網站主題： 內灣
3.網站架構（導覽）
4.內容描述： 內灣風情
5.風格設計： 可愛手繪風
6.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
視覺規劃：劉家妤、張子芸、邱薏娟
HTML CSS設計：曾威郡
動態效果：蔡亦傑
7.個人製作心得： 好累

1.作業網址： http://mepopedia.com/~css104-2a/final/final-1035445058

2.網站主題： FOOD
3.網站架構（導覽） :
http://imgur.com/P4MMxjc

4.內容描述：北中南下午茶
5.風格設計：閃亮亮
6.組員名單，工作分配：
058 吳柔葶 製作網頁
052 徐姿茜收集資料

7.個人製作心得：YES!

作業網址：http://mepopedia.com/~css104-2a/final/final-1035445187

網站主題： 新竹美食

內容大綱： 設計介紹/觀光景點/新竹美食/湖口美食/北湖美食

風格設計： 簡單明瞭、乾淨。

網頁架構圖(樹狀圖)：



工作分配(視覺規劃、HTML CSS設計、動態效果)：大家一起分工
組員名單(學號）
169 簡郡誼
187 謝沅蓁
205 江宛宜



(編輯記錄)

1.作業網址：
http://mepopedia.com/~css104-2a/final/final-1035445121/index.html

2.網站主題：
台東

3.網站架構（導覽）
[img]http://i.imgur.com/WRYMPDm.gif?1[/img]

4.內容描述：
台東旅遊資訊

5.風格設計：
自然

6.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
1035445121古茹喩 1035445124謝采軒

7.個人製作心得：
好累



(編輯記錄)

1.網站主題： 新竹玩翻天
2.內容大綱： 新竹遊玩地點設計
3.主要對象(分析)： 外地遊客
4.網頁架構圖(樹狀圖)：
5.網頁版型設計圖

6.色彩規劃： 簡單的配色

8.組員名單(學號）
067 范思閔
082 甄宥如
193 鍾維豪
199 鄧怡鈞


1.作業網址：http://mepopedia.com/~css104-2a/final/final-1035445082/index.html

2.網站主題： 新竹玩翻天
3.網站架構（導覽）
4.內容描述： 新竹遊玩勝地小吃
5.風格設計： 簡單明瞭
6.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)： 都是一起做
7.個人製作心得： 很累
8.照片來源：維基百科、google、自己拍攝



(編輯記錄)

1.網站主題：
世界神幻犬科名錄

2.內容大綱：
介紹全球各地來自不同國家傳說的犬科動物，包括神、魔、還有未知生物

3.主要對象(分析)：
對神怪、神話、還有傳說生物有興趣的人

4.網頁架構圖(樹狀圖)：
http://imgur.com/10F5sMY

5.網頁版型設計圖 ：
http://imgur.com/2HR2leA

6.色彩規劃：
暗色系配搭古舊卷軸風

8.組員名單(學號）
1045245002 李蒨誼

..........

1.作業網址：
http://mepopedia.com/~css104-2a/final/final-1045245002/

2.網站主題：
世界神幻犬科名錄

3.網站架構（導覽）
http://imgur.com/10F5sMY

4.內容描述：
介紹全球各地來自不同國家傳說的犬科動物，包括神、魔、還有未知生物

5.風格設計：
古色卷軸風格

6.組員名單，工作分配(視覺規劃、HTML CSS設計、動態效果)：
只有我自己一個<3

7.個人製作心得：
因為對台灣不熟、也沒有辦法在沒有朋友帶領的情況下自己去遊台灣，最後做了跟比賽完全無關、只是自己有興趣的題目。一開始感覺有點難，可是研究下去就會看到其實都只是小部份代碼而已，只要把一開始的設定都調好，剩下的就只有複制貼上，所以做到後來並不覺得難了。

8.照片來源：
自己畫的


歷屆得獎分析(至少三組) ：
>>台灣字崛
風格統一而簡潔，喜歡它不加修飾的感覺，互動效果也很棒，覺得每一個連結與按鈕點下去都不會無聊
>>BRT 台中PAPAGO
首頁的變換動畫很可愛，風格也非常統一，右邊的小車會隨著滾上滾下而有上下之變換，加添趣味
>>大山北月
很有官方網站的感覺，清晰簡潔，配搭可愛圖畫風格與手寫風字體，與豐富的資訊內客



(編輯記錄)

1.作業網址：http://mepopedia.com/~css104-2a/final/final-1035445103/

2.網站主題： 東勢林場
3.網站架構（導覽） :


4.內容描述：介紹東勢林場的生態
5.風格設計：簡約
6.組員名單，工作分配：
103 林于珊 製作網頁
055 吳孫儀 收集資料