Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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-學號(組長),以FTP上傳至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.網頁架構(HTML+CSS)網頁效能 jQuery
4.工作分配之項目

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

2.網站主題: 台灣鬼屋
3.網站架構(導覽) :


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

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



Edited 2 time(s). Last edit at 06/13/2016 09:32PM by 1035445094.
(編輯記錄)

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邱品蓉



Edited 6 time(s). Last edit at 06/14/2016 01:33PM by 1035445088.
(編輯記錄)

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.個人製作心得: 總歸一句話,努力不懈才值得。



Edited 2 time(s). Last edit at 06/14/2016 12:16PM by kelly270.
(編輯記錄)

作業網址: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張振豪



Edited 1 time(s). Last edit at 06/23/2016 09:13PM by 1035445037.
(編輯記錄)

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
簡單明瞭介紹夜市,能吸引人留意,字體鮮明易讀



Edited 2 time(s). Last edit at 06/13/2016 08:59PM by 1045245001.
(編輯記錄)

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/
滑鼠效果有趣,內容完整,有互動性,圖案好看,整體簡潔有趣。



Edited 6 time(s). Last edit at 06/13/2016 05:48PM by 1035445211.
(編輯記錄)

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.個人製作心得:邊做邊玩邊學習,更加了解有關萬華以及網頁



Edited 2 time(s). Last edit at 06/13/2016 05:59PM by Togenick.
(編輯記錄)

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.個人製作心得:終於做完期末最後一項作業了 真是可喜可賀可喜可樂spinning smiley sticking its tongue outsmileys with beer

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 江宛宜



Edited 3 time(s). Last edit at 06/14/2016 01:28PM by 1035445205.
(編輯記錄)

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.個人製作心得:
好累



Edited 1 time(s). Last edit at 06/14/2016 12:36PM by xxxceline.
(編輯記錄)

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、自己拍攝



Edited 5 time(s). Last edit at 06/14/2016 02:20PM by isxdyj.
(編輯記錄)

Attachments:
開啟 | 下載 - 新竹-01.png (200.6 KB)
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
首頁的變換動畫很可愛,風格也非常統一,右邊的小車會隨著滾上滾下而有上下之變換,加添趣味
>>大山北月
很有官方網站的感覺,清晰簡潔,配搭可愛圖畫風格與手寫風字體,與豐富的資訊內客



Edited 1 time(s). Last edit at 06/14/2016 09:42PM by 1045245002.
(編輯記錄)

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

2.網站主題: 東勢林場
3.網站架構(導覽) :


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