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

Advanced

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

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

1. 作業說明


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

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

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



2. 企劃大綱


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

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



3. 說明


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

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

將資料夾命名為 final-學號(組長),以FTP上傳至final資料夾
作業網址為http://mepopedia.com/~css105-2b/final/final-1045445XXX



4. 回覆項目


1.作業網址:http://mepopedia.com/~css105-2b/final/final-1045445XXX

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



企劃大綱

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



5. 評分標準


1.視覺美感
2.內容技巧,是否有應用所學技巧
3.網頁架構(HTML+CSS)網頁效能 jQuery
4.網頁內容完整性、原創性
4.工作分配之項目



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

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

1.作業網址:http://mepopedia.com/~css105-2b/final/final-1045445017

2.網站主題: Night market

3.內容描述:介紹台灣的夜市,小吃、娛樂、起源、文化、歷史等。

4.風格設計:黑色的底表現出夜晚的意象,暖色系則代表小吃的色彩,並以現代感的設計風格表現夜
市文化,整體為簡約風。

5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
江欣頤

6.個人製作心得:
做出來後覺得效果很好,雖然是套用版型的,但是很多地方有在自己重改重設計,比較花時間的是去
拍照、查資料和整理,不過這也讓我更了解自己做的網頁內容為何,去了解了一個關於台灣的文化,
我認為也很值得。


企劃大綱
1.網站主題:Night market
參考版型:http://www.tooplate.com/live/2075-digital-team

2.網站架構(導覽列名稱與檔名)
首頁
各大夜市
人氣指數
推薦店家
特色小吃
美食介紹
各家地址

3.內容大綱:
介紹台灣各個夜市的文化、美食等,讓人更了解台灣夜市的魅力,以及他的獨特性,並知道每個夜市
的差別,可以選擇自己偏愛的夜市,最後提供每家的地址讓人更加明瞭。

4.主要對象(分析):
大眾、喜愛夜市的人。

5.網頁架構圖(樹狀圖):


6.網頁版型設計圖wireframe:


7.色彩規劃:
主要是黑色的背景,代表夜市的景色和襯托圖片,而因為小吃主要是橙黃色,所以再以部分的暖色系
作輔助,整體以簡潔為主。

8.歷屆得獎分析(至少三組):
Slang Formosa(醋咪ㄟ流行語)http://www.slangmosa.tw/
他的版型是簡約的風格,但內容相當有趣,主要是介紹現代人的獨特用詞,這也非常代表台灣,因為
台灣的確有很多新奇的語言,且不斷更新,整體來看是很現代又充滿趣味性的網頁設計。

食尚大學 http://www.foosion.tw/
也是簡約的風格,但主圖是動態效果,看起來更有變化,還有以學校的方式來做食物的分類,搭配可
愛的小圖示,也很創新,而內容是除了點進去後有詳細介紹外,還能以登入的方式看自己是哪種學院。

原來那有趣.HiTribe http://www.hitribe.idv.tw/
主要是介紹食安問題,內容豐富又很多,能看出是有細心去調查的,導覽列的部分點進去後有很多資
訊,版面也是乾淨俐落,底部的圖案設計很活潑可愛。

9.組員名單:
江欣頤 1045445017



Edited 5 time(s). Last edit at 06/15/2017 01:11AM by lemon2016.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2b/final/final-1045445149

2.網站主題:基隆

3.內容描述: 基隆景點、名稱由來、特色小吃&名產

4.風格設計: 簡約粉嫩,吸引想了解基隆的年輕朋友。

5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
149 HTML.文字內容
050.029 攝影取景主題大綱
182.155 CSS.視覺規劃

6.個人製作心得:
分工合作,有志者事竟成


企劃大綱

1.網站主題: 基隆
2.網站架構(導覽列名稱與檔名) :
首頁---------------------------------------HOME
廟口 --------------------------------------About Keelung
潮境公園---------------------------------Contact us
海科館
海角樂園
望幽谷
中正公園
外木山
白米甕炮台
星空草原
地圖
推薦小吃
名產

3.內容大綱:
讓大眾能更了解雨都的美,網站內有眾多小吃景點可供參考,也有地圖不怕迷路。

4.主要對象(分析):
年輕族群,想去基隆1日遊的大眾。

5.網頁架構圖(樹狀圖):

基隆---------------------------------------------X----HOME
----------------------------------------------------------About us
廟口 潮境公園 海科館---------------------------Contact us

海角樂園 望幽谷 中正公園

外木山 白米甕炮台 星空草園

地圖 推薦小吃 名產

Contact us


6.網頁版型設計圖wireframe :

點擊圖片能跳出內容為主,簡潔明瞭不複雜

7.色彩規劃:
粉嫩的色調、明亮的網站,適合愛旅遊的年輕族群。

8.歷屆得獎分析(至少三組) :
1.食尚大學 http://www.foosion.tw/
2.2016年-古早味鹹酸甜: http://retrospective.idv.tw/
3.大山北月http://www.bighillnorthmoon.tw/cafe/

1.網站主題: 台灣雨都(基隆)
http://mepopedia.com/~css105-2b/final/final-1045445035

2.內容大綱: 介紹台灣雨都(基隆)的旅遊文化。

3.主要對象(分析): 基隆外地客、觀光客

4.網頁架構圖(樹狀圖):http://i.imgur.com/trDXhSs.jpg

5.網頁版型設計圖 :作業8 延伸設計 http://www.tooplate.com/view/2084-zipper

6.色彩規劃: 咖啡色調

7.歷屆得獎分析(至少三組) :

1. http://listento.tw/

2.http://www.bighillnorthmoon.tw/cafe/

3.http://timeline.tw/

8.組員名單(學號):1045445035黃思涵



Edited 2 time(s). Last edit at 06/14/2017 11:13PM by 1045445035.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2b/final/final-1045445146

企劃大綱
1.網站主題:一起找餐去
2.參考版型:作業07

3.網站架構(導覽列名稱與檔名)
首頁(組圖)
早餐的重要(圖文解說)
早餐店資訊(燈箱效果)
美味早餐(圖片/開啟瀏覽器視窗)
主餐介紹(燈箱效果)
副餐介紹(燈箱效果)

4.內容大綱:台灣的早餐店比鄰皆是,我們將推薦美味又便宜的早餐給各位做選擇,早餐很重要,是一整天活力的來源,千萬不要餓肚子喔!
5.主要對象(分析):大眾

6.網頁架構圖(樹狀圖):


7.網頁版型設計圖wireframe :


8.色彩規劃:可愛插畫風格,讓大家能夠有食慾

9.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
1045445068 葉怡萱:視覺規劃 美食攝影 插圖 小物件
1045445146 李嘉儀:HTML CSS設計 動態效果 插圖 小物件

10.個人製作心得:
花了很多的時間來製作,全部的插圖都是自己畫的,雖然還是很作業7的感覺,但是我們已經盡最大的努力了。

組員:068葉怡萱、146李嘉儀



Edited 3 time(s). Last edit at 06/22/2017 06:34AM by smile103520.
(編輯記錄)

作業網址 : http://mepopedia.com/~css105-2b/final/final-1045445062/run-charity-lite/theme-runcharity/

1.網站主題:新竹迎曦門

2.內容大綱:介紹迎曦門的歷史、周邊(護城河公園、新竹火車站、州廳、當地美食歷史(貢丸、肉圓、米粉)

3.主要對象(分析):想了解新竹的人

參考網頁:http://wowthemes.net/preview/index.php?theme=runcharitylitehtml

4.網頁架構圖(樹狀圖):


5.網頁版型設計圖 :


6.色彩規劃:紅磚色為主


7.歷屆得獎分析(至少三組)


8.組員名單(學號)1045445062        1045445125



Edited 7 time(s). Last edit at 06/19/2017 06:50PM by 1045445062.
(編輯記錄)

1.網站主題: Taoyuan Metro桃園國際機場捷運

作業網址:http://mepopedia.com/~css105-2b/final/final-1045445089


參考版型: http://www.free-css.com/free-css-templates/page209/linuji


2.網站架構(導覽列名稱與檔名)
index.html-機捷首頁
about.html-關於我們
gallery.html-觀光景點
features.html-站站風光
contact.html-捷運路線
blank.html-聯繫我們

3.內容大綱: 機場捷運各站資訊/照片

4.主要對象(分析): 喜歡風景/逛街/捷運迷

5.網頁架構圖(樹狀圖):


6.網頁版型設計圖 :



7.色彩規劃: 和捷運識別系統相近的紫色

8.歷屆得獎分析(至少三組)
(1)2013年-Listen To Taiwan: http://listento.tw/
主題和網頁風格有趣,也用了舊式傳統播放機,很有復古風味,
內容是在台灣常出現但都是不被注意的聲音,很有特色。

(2)2014年-大山北月: http://www.bighillnorthmoon.tw/cafe/
很適合親子遊玩的地方,木製桌椅能回味學生時期,還有語音導覽很用心。

(3)2016年-古早味鹹酸甜: http://retrospective.idv.tw/
傳統柑仔店現在愈來愈少見,介紹很多好吃的食物,各地柑仔店位置
音樂跟主題也很搭,真的有古早味的感覺。

9.組員:1045445089黃宜萱



Edited 4 time(s). Last edit at 06/21/2017 09:28PM by 089.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2b/final/final-1045445122

2.網站主題:台灣科技產業

3.內容描述: 介紹台灣設計與半導體公司

4.風格設計: windows morden

5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):

122黃浩翔

6.個人製作心得:

期末做了兩個多禮拜,最後一個禮拜才趕出來的 。修修改改請教了很多同學....


企劃大綱
1.網站主題:台灣科技產業
參考版型:www.templatemo.com/tm-498-stimulus

2.網站架構(導覽列名稱與檔名)

首頁 -科技公司,分析市場,期許,新聞

3.內容大綱: 介紹台灣設計與半導體公司

4.主要對象(分析): 不分


組員名單

1045445122 黃浩翔

1.網站主題 風新竹
參考版型:http://www.tooplate.com/view/2043-green-ray
作業網址:http://mepopedia.com/~css105-2b/final/final-1045445137

2.網站架構(導覽列名稱與檔名)


人氣指數
推薦店家
特色小吃
美食介紹

3.內容大綱:
介紹新竹文化美食等,讓大家知道新竹有[很多美食,讓新竹擺脫美食沙漠的罪名
讓大家更了解新竹美食的魅力。

4.主要對象(分析):
大眾、喜歡旅遊和愛吃美食的人。

5.網頁架構圖(樹狀圖):
7.色彩規劃:
主要是新竹風景的背景,並且以多精緻照片排版增加豐富度,整體以簡潔為主。

8.歷屆得獎分析(至少三組):

食尚大學 http://www.foosion.tw/
簡約的風格,但食物呈現方式不是一般般的照片,而是影片以動呈現,讓人有小驚喜的感覺。
將食物得種類譬喻成學校的科系,以新穎特別的方式作為食物的分類,搭配的小icon讓人覺得有種小清新的感覺,
裡面的介紹也很詳細,是一個外觀好,也具有豐富內容的網站
瘋樂!!!骰進 Taiching http://funtaichung.idv.tw/#
是以互動方式的網頁,讓人像是在玩大富翁的在瀏覽網頁,因為大富翁是大家小時候玩的桌遊,給人一種親切的童趣感,
Slang Formosa(醋咪ㄟ流行語)http://www.slangmosa.tw/
他的版型是簡約的風格,但內容相當有趣,主要是介紹現代人的獨特用詞,這也非常代表台灣,因為
台灣的確有很多新奇的語言,且不斷更新,整體來看是很現代又充滿趣味性的網頁設計。

原來那有趣.HiTribe http://www.hitribe.idv.tw/
主要是介紹食安問題,內容豐富又很多,能看出是有細心去調查的,導覽列的部分點進去後有很多資
訊,版面也是乾淨俐落,底部的圖案設計很活潑可愛。
1045445104 彭珮倫
1045445137 陳柏叡



Edited 3 time(s). Last edit at 06/19/2017 02:09PM by 陳柏叡1045445137.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2b/final/final-1045445014

2.網站主題:
基隆小吃

3.內容描述:
介紹有關於基隆廟口較有名的夜市小吃

4.風格設計:
以台灣傳統紅色為主色調,黃、黑色為輔,搭配夜市小吃、夜市場景以及夜市小吃圖作為搭配,
使畫面具有整體性,簡單卻也有質感

5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
羅欣妮(個人)

6.個人製作心得:
其實幾乎都還挺順利的,我是沿用作業8的版型做的,
之後聽老師說一開始我的題目訂太大,內容不夠全面,
所以我把主題訂為''基隆廟口的小吃'',範圍較小,也比
較符何我版型的需求,介紹主要基隆有名的美食與歷史
等等,讓人能清楚知道基隆主要的有名小吃以及關於基
隆的故事smileys with beer

企劃大綱

*參考版型:http://www.tooplate.com/live/2076-zentro

1.網站主題:
基隆廟口夜市小吃

2.網站架構(導覽列名稱與檔名)
*Keelung
*Keelung snacks
*About Keelung
*Hot snacks
*CONEACT

3.內容大綱:
介紹台灣基隆廟口夜市主要有名的小吃,能讓觀光客或外地人更了解有關基隆小吃,
也能清楚知道來到廟口一定要吃哪幾種本地人推薦的美食。

4.主要對象(分析):外地人(中南部) /觀光客(外國人)

5.網頁架構圖(樹狀圖):



6.網頁版型設計圖wireframe


7.色彩規劃: 傳統紅色為主,黃、黑為輔

8.歷屆得獎分析(至少三組)

1.Slang Formosa(醋咪ㄟ流行語):http://www.slangmosa.tw/listCard/6/#
以逗趣簡單設計的方式告訴大眾現在流行語的使用方式與意思,
整體採簡約風但內容卻不失風趣,每個圈圈、按鈕點進去都有滑
動或是跳新頁面的效果,使進到這個網站的人印象深刻。

2.《o`big!》藏在巷弄禮的風雅小世界:http://www.obig.com.tw/
整體採用明信片有趣特別的方式去呈現,地圖指標還做了動態效果,
內容與排版也很豐富完善,很有自己的風格特色,使人為之一亮。

3古早味鹹酸甜 :http://retrospective.idv.tw/
不管是音樂的搭配,還是整體排版都令人有懷舊的感覺,
也很符合古早味這主題,設計也很可愛很有趣,中間圖片
的部分點出來還有做聲音的效果,還滿好玩的。

9.組員名單:
羅欣妮-1045445014



Edited 2 time(s). Last edit at 06/11/2017 04:17PM by janny.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2b/final/final-1045445188

2.網站主題:淡水

3.內容描述: 介紹淡水這個觀光勝地,包含美食、交通、古蹟、景點等...

4.風格設計: 簡單清爽的藍白黃配色

5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):

index-淡水→080張凱茵
about-古蹟→161湯若翎
gallery-景點→188莊惠欣
contact-美食→074簡依柔
traffic-交通→074簡依柔
照片修圖→071徐夣蔆、092陳婉儀

6.個人製作心得:

為了這次的網頁還特替跑了一趟淡水收集資料,發現淡水真的很好玩,而且也非常值得去深入了解他,
在製作上因為組員分工得宜,所以製作過程很順利,但語法太多要找真的很麻煩,還是希望可以做得更好。



企劃大綱
1.網站主題:淡水
參考版型:http://www.tooplate.com/live/2085-neuron

2.網站架構(導覽列名稱與檔名)
index-淡水
about-古蹟
gallery-景點
contact-美食
traffic-交通

3.內容大綱:
介紹淡水歷史、美食、景點等等...,讓人能更了解歷史悠久、名勝古蹟、山明水秀的淡水。

4.主要對象(分析): 大眾、觀光客

5.網頁架構圖(樹狀圖):


6.網頁版型設計圖wireframe

7.色彩規劃: 主要是以藍色、橘色、白色為主,代表淡水的海邊景色,及傍晚唯美的夕陽。

8.歷屆得獎分析(至少三組) :
夜色台北→http://www.taiwanonly.tw/index.html
 分析:首頁背景運用馬路車潮動態作為幻影,
應用了晚上夜色之美,首頁字體設計簡潔流利。
內容皆採用短片的方式,用影像及聲音感受,
說明不同時段的台北夜色之美。
/

歲月時分→http://timeline.tw/
分析:利用插畫及圖片方式製作此網站,每一個分頁
分別都不同主題,分別設定不同的服裝,用動態的方式瀏覽,
每頁下方還有詳細的資料可導覽。
/

大山北月→http://www.bighillnorthmoon.tw/cafe/
分析:首頁為動態方式,幾秒後會撥放不同圖片,
下方為導覽列,整體利用插畫及選用比較親近的字體,右下方
同時還能撥放輕音樂,優點的地方在於,不管開哪個介面,
都不會影響到音樂的撥放,內頁皆有動圖會滑入圖片,資料完整,
另外也有設定back,方便回到選項列。


組員名單

1045445071徐夢蔆
1045445074 簡依柔
1045445080張凱茵
1045445092 陳婉儀
1045445161湯若翎
1045445188莊惠欣



Edited 4 time(s). Last edit at 06/22/2017 01:05AM by 1045445188.
(編輯記錄)

1.網站主題: 鶯歌走走 作業網址:http://mepopedia.com/~css105-2b/final/final-1045445107
2.內容大綱:介紹鶯歌的在地文化與觀光美食
3.主要對象(分析):
4.色彩規劃:以紅白色為主
5.網站架構(導覽列名稱與檔名)
-首頁
-影片
-文化與由來
-美食
-景點
-交通
6.歷屆得獎分析(至少三組)
(1) http://listento.tw/
(2) http://retrospective.idv.tw/
(3) http://www.obig.com.tw/
7.組員 107 113



Edited 2 time(s). Last edit at 06/25/2017 12:27AM by ffga3307.
(編輯記錄)

。1.        網站主題:鶯歌陶博館
參考版型:作業七
2.網站架構(導覽列名稱與檔名)
首頁
本館建築
藝術園區
公共藝術
外部連接


3.內容大綱:
介紹臺灣第一座以陶瓷為主題的專業博物館。
4.主要對象(分析):
大眾、設計人。

5.網頁架構圖(樹狀圖):



6.網頁版型設計圖wireframe:



7.色彩規劃:
背景圍藍色色調與青花瓷的圖騰


8.歷屆得獎分析(至少三組):

聽見,福 爾 摩沙 http://listento.tw/
用很特別的手法,用聲音去體會台灣傳統的風情與文化。
大山北月http://www.bighillnorthmoon.tw/cafe/
背景搭配悠閒音樂,讓人有悠閒的感覺,整體很有一致性。
和風北投‧行腳踏查 http://imagetaiwan.net.tw/link.html
圖文並茂,看完這個網頁能更了解北投文化,而排版也很舒適。

9.組員名單:
鄒家昕1045445002
張家瑄 1045445095



Edited 5 time(s). Last edit at 06/05/2017 09:56PM by 1045445095.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2b/final/final-1045445002

1. 網站主題:鶯歌陶博館
參考版型:http://www.templatemo.com/tm-496-pipeline
2.網站架構(導覽列名稱與檔名)
首頁
本館建築
藝術園區
公共藝術
外部連接

3.內容大綱:
介紹臺灣第一座以陶瓷為主題的專業博物館。
4.主要對象(分析):
大眾、設計人。

5.網頁架構圖(樹狀圖):



6.網頁版型設計圖wireframe:



7.色彩規劃:
背景圍藍色色調與青花瓷的圖騰

8.歷屆得獎分析(至少三組):
聽見,福 爾 摩沙 http://listento.tw/
用很特別的手法,用聲音去體會台灣傳統的風情與文化。
大山北月http://www.bighillnorthmoon.tw/cafe/
背景搭配悠閒音樂,讓人有悠閒的感覺,整體很有一致性。
和風北投‧行腳踏查 http://imagetaiwan.net.tw/link.html
圖文並茂,看完這個網頁能更了解北投文化,而排版也很舒適。

9.組員名單:
鄒家昕1045445002
張家瑄 1045445095



Edited 3 time(s). Last edit at 06/25/2017 08:57PM by JinJin.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2b/final/final-1045445077
1.網站主題:侯硐貓村
參考版型:http://www.tooplate.com/view/2076-zentro
2.網站架構(導覽列名稱與檔名)
首頁
貓咪
侯硐簡介
風景
地圖


3.內容大綱: 侯硐貓村的風景
4.主要對象(分析):
喜歡貓的人

5.網頁架構圖(樹狀圖):



6.網頁版型設計圖wireframe:



7.色彩規劃:
簡約白與粉色系


8.歷屆得獎分析(至少三組):
Artsy
https://www.artsy.net/
網頁簡單,簡潔,編排整齊有序又不失藝術氣息
The Art of Noise
http://www.awardentries.org/award13/noiseamg/
用影片為首吸引人點閱,頁面簡單,線條設計讓人覺得舒適
Sagmeister & walsh.com
http://sagmeisterwalsh.com/
頁面簡單圖示有趣,滑鼠移到圖片上,字會隨著游標移動,黑白簡約風為底,有設計感。
9.組員名單:
鄧翊崎1045445077



Edited 2 time(s). Last edit at 06/21/2017 08:26PM by 1045445077.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2b/final/final-1045445152
參考版型: http://www.templatemo.com/tm-476-conquer

1.網站主題: 甯•寺
2.網站架構(導覽列名稱與檔名)
3.內容大綱:介紹台灣特有的廟宇,講解它的結構、格局、習俗、禁忌等等
4.主要對象(分析):讓想了解台灣廟宇的人看
5.網頁架構圖(樹狀圖):



6.網頁版型設計圖wireframe
7.色彩規劃: 咖啡、灰、白系列
8.歷屆得獎分析
.歲月時分 - http://timeline.tw/

很有趣、互動性高、而且很可愛、讓人為之一亮

.聽見,福爾摩沙 - http://listento.tw/

以聽覺輔佐畫面,表現出台灣特有的聲音、很特別的網站

.古早味鹹酸甜 - http://retrospective.idv.tw/

把台灣古早味的感覺做出來、輔佐以趣味的背景音樂、讓人覺得很有趣也很懷念

9.組員名單:
1045445152 李潔馨
1045445170 陳昱吟

.



Edited 3 time(s). Last edit at 06/25/2017 09:09PM by JinJin.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2b/final/final-1045445008

網站主題:九份
參考版型:http://www.tooplate.com/view/2076-zentro

2.網站架構(導覽列名稱與檔名)

首頁
傳統
美食
文化簡介
街景
如何去


3.內容大綱:
介紹台灣的九份的文化、美食等,讓人更了解九份是個出滿載地人情味的地方,以及他有很多元的文化,也能知道九份的街景很美麗,尤其是他的夜景和日出,常常有攝影師去拍攝,是個相當美麗的地方。


4.主要對象(分析):
男女老少皆可。


5.網頁架構圖(樹狀圖):

http://imageshack.com/a/img923/9264/qLWTyq.jpg


6.網頁版型設計圖wireframe:

http://imageshack.com/a/img923/7008/QHx9w0.jpg

7.色彩規劃:
主要是乾淨為主,白色背景為背景,底色帶有點復古紅棕的顏色。

8.歷屆得獎分析(至少三組):
食尚大學 http://www.foosion.tw/
整體風格很乾淨,也很簡約和一致性,在視覺上的色彩搭配 ,看起來很舒服,以圖像的方式介紹菜單,
內容也有很詳細的區分,覺得圖像很可愛,會讓人想點進去~


原來那有趣.HiTribe http://www.hitribe.idv.tw/
到覽列的內容很詳細,也很用心,感覺幾乎是一個完整的網站, 還有可愛的圖案做裝飾,背景用淡淡
的插圖襯托,找不出太多的漏洞,是很好的典範。


瘋樂!!!骰進 Taiching http://funtaichung.idv.tw/#
以遊戲的方式來介紹景點,覺得很有趣,並且搭配了音樂,會整個融入主題,介紹的景點也加上了
圖像化,讓人對內容介紹有更深刻的印象。




9.組員名單:
王嘉濃 1045445008
余郁婷 1045445110



Edited 2 time(s). Last edit at 06/14/2017 08:33PM by 1045445008.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2b/final/final-104544053

2.網站主題: 三峽老街
3.內容描述: 關於三峽老街的一切。
4.風格設計: 有點古早味帶點現代感。
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
026 : 照片修圖
053 : 內容、CSS
119 : 地圖規劃、交通資訊


6.團體製作心得:CSS好難找喔!!!(升天)

-----

1.網站主題: 三峽老街
參考版型 ─ http://shimabalife.jp/
2.內容大綱:
index : 關於三峽老街
delicacy : 店家與美食的推薦
attractions : 景點
map : 地圖

3.主要對象(分析):三峽老街觀光客

4.網頁架構圖(樹狀圖):
http://i.imgur.com/xMMELyF.jpg



5.網頁版型設計圖
http://i.imgur.com/mfSI12j.jpg





6.色彩規劃: 秘密♥

7.歷屆得獎分析(至少三組)
頭城老街:
http:[/url]//toucheng.yibnb.com/scenic.htm
呈現出小清晰又帶點溫馨感,
用了一些跨圖的排版格式和淡入的特效,
介紹住宿的內容皆採用幻燈片的方式,方便瀏覽,
顛覆了老街首頁的呆板印象。

7.歷屆得獎分析(至少三組)
頭城老街:
http://toucheng.yibnb.com/scenic.htm
呈現出小清晰又帶點溫馨感,
用了一些跨圖的排版格式和淡入的特效,
介紹住宿的內容皆採用幻燈片的方式,方便瀏覽,
顛覆了老街首頁的呆板印象。


內灣老街:http://163.29.3.94/neiwanrailline/Travel.html
打開首頁就有大自然芬多精圍繞在四週的感覺,
整體感受是環境美好空氣清晰,
設定幻燈片的方式瀏覽圖片,
每頁都有詳細的交通導覽資訊。

鶯歌老街:http://yingge.tw/
以鶯歌最主要的陶瓷特色為首頁的重頭戲,
作品排列整齊,作者及景點特別分為左右欄,
但還是有待加強QQ



8.組員名單(學號)
1045445026 王怡蘋
1045445053 陳雅琳
1045445119 蔡雨澄



Edited 5 time(s). Last edit at 06/22/2017 02:06AM by 1045445095.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2b/final/final-1025445231
2.網站主題:十年一夕

3.內容描述:介紹台灣的夕陽風景與時間地點。

4.風格設計:高對比

5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
吳柏穎,全部工作都我做。

6.個人製作心得:
感覺不錯啊

參考版型:https://html5up.net/big-picture

2.網站架構(導覽列名稱與檔名)
首頁
如何找到好景點
甚麼時候拍最好
更多臺灣夕陽

3.內容大綱:
介紹台灣夕陽風景

4.主要對象(分析):
孤單寂寞的人

5.網頁架構圖(樹狀圖):

6.色彩規劃:高對比,白底字



Edited 6 time(s). Last edit at 06/22/2017 10:06AM by 1025445231.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2b/final/final-1045445086

2.網站主題:探訪台南
3.內容描述: 介紹台南的景點.小吃
4.風格設計: 清新.簡約.白色的背景襯托台南的美食和景點。
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
1045445056 洪欣翎 :視覺規劃 資料蒐集 CSS設計
1045445086 芮薇珊:HTML.資料蒐集.動態效果
6.個人製作心得:
雖然只是套版型,但還是花蠻多時間在設計和找資料上,但製作出來的成果很滿意,雖然還是有不足的地方,
但整體很滿意,也藉由這次的作業更了解了台南的美食及景點。

企劃大綱

1.網站主題:探訪台南
參考版型:http://www.templatemo.com/templates/templatemo_476_conquer/#section2

2.網站架構(導覽列名稱與檔名)
台南首頁
熱門景點
在地小吃
聯繫我們
External
3.內容大綱:
介紹台南的美食及景點,讓遊客更加了解台南有什麼好玩好吃的。
增加大家想去台南的慾望。
4.主要對象(分析):
大眾.喜歡旅遊及吃美食的人。
5.網頁架構圖(樹狀圖):

6.網頁版型設計圖wireframe

7.色彩規劃:
首頁是以暖色(夕陽),而背景是白色,襯托台南美食及景點,
讓整體清新.然後按鈕用藍色.綠色.咖啡色,去點綴,不讓畫面單調。
8.歷屆得獎分析(至少三組)
Slang Formosa(醋咪ㄟ流行語) :
整體設計很有趣,畫面簡單清新,
他們還用一些按鈕的動畫跟視聽者互動,讓人瀏覽網頁不再單調,
很有想法的設計風格。但唯一的缺點大概就是風格跟字體很不搭。
古早味鹹酸甜 :
整體的設計是走復古路線,網頁也許多互動式的按鈕,雖然一開始不知道要怎麼點,
後來才發現製作者真的很用心,在處理圖片上一定花了不少功夫。
低碳好好行 7 投日月潭 :
整體是走很可愛的風個,內容很豐富,裡面的插圖也非常可愛。
每一頁都做得很用心。整體的風格很喜歡。

1.網站主題 新竹之美
參考版型:http://mepopedia.com/~web102-c/final/final-1015445215/
作業網址:http://mepopedia.com/~css105-2b/final/final-1045445050/

2.網站架構(導覽列名稱與檔名)


內灣
北埔
城隍廟
青青草原

3.內容大綱:
介紹新竹景點美景與各地美食

4.主要對象(分析):
喜歡出去旅遊的人

5.網頁架構圖(樹狀圖):
7.色彩規劃:
以新竹客家花布為底圖,來呼應新竹客家之美

8.歷屆得獎分析(至少三組):

和風北投‧行腳踏查 http://imagetaiwan.net.tw/hokutolite.html#
將北投得景點都講得很詳細,美感背景也處理得很舒服,介紹了北投的歷史與發展

歐弟桑的台灣慢遊筆記本 http://odie.tw/mixed-grid-gallery/
把全台灣他走過得地方都設計在自己的網頁裡,詳細的打出他去過的各個角落

蓮霧雄ㄟ黑金剛農場 https://www.lianwu.tw/
底圖都是黑灰色,來呼應黑金剛,覺得她的網頁很酷,除了介紹黑金剛蓮霧之外,也讓人認領蓮霧樹

1045445050 劉家豪

1.作業網址:http://mepopedia.com/~css105-2b/final/final-1045445185

2.網站主題:WELCOME TO TAICHUNG
3.內容描述:介紹台中美景及特色小吃下午茶伴手禮。
4.風格設計:台中的下山的美景當封面,以白色做基底,附上台中地點圖片及文字做介紹。
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 1045445185
6.個人製作心得:剛開始很順手但遇上自己家東西的時候會需要一些時間試比較多次。


企劃大綱

1.網站主題:WELCOME TO TAICHUNG
2.網站架構(導覽列名稱與檔名) :
首頁
景點
美食
麗寶
對台中的印象分享

3.主要對象(分析):喜愛旅遊及收尋美食的人

作業網址:http://mepopedia.com/~css105-2b/final/final-1045445131
1.網站主題:新竹動物園
參考版型:http://www.templatemo.com/live/templatemo_493_snapshot

2.網站架構(導覽列名稱與檔名)
首頁 -- index.html
導覽圖 -- map.html

3.內容大綱: 新竹動物園

4.主要對象(分析): 可能要去參觀的人

5.網頁架構圖(樹狀圖):



6.網頁版型設計圖wireframe:



7.色彩規劃: 大部分都用綠色,比較有大自然的感覺

8.歷屆得獎分析(至少三組):

9.組員名單: 詹炳偉 1045445131

作業網址:http://mepopedia.com/~css105-2b/final/final-1035461139

2.網站主題: 風的城市
3.內容描述: 介紹新竹的景點跟美食
4.風格設計: 白色底打配藍色與黃色,簡單的感覺
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 鄭文茹(一個人)
6.個人製作心得: 很難,很多語法看不懂

企劃大綱 
1.網站主題: 風的城市
參考版型http://www.tooplate.com/view/2077-modern-town

2.網站架構(導覽列名稱與檔名):
home
景點
美食 

3.內容大綱:介紹新竹的景點,不再是熟悉的城隍廟、東門城而已,美食也不再是熟悉的貢丸與米粉,新竹也有不一樣的景點跟美食。

4.主要對象(分析): 大眾

5.網頁架構圖(樹狀圖): 

6.網頁版型設計圖wireframe 

7.色彩規劃:白色、藍色 、黃色

8.歷屆得獎分析(至少三組) :
http://www.foosion.tw/
http://www.hitribe.idv.tw/
http://timeline.tw/
9.組員名單:1035461139鄭文茹



Edited 2 time(s). Last edit at 06/25/2017 07:12PM by 鄭文茹.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2b/final/final-1045445216

2.網站主題:高雄旗津
3.內容描述: 介紹高雄
4.風格設計: 繽紛圖片多
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 1045445216 / 1045445005 一起做
6.個人製作心得: 高雄旗津很好玩.會選擇高雄旗津是因為景點豐富.上山下海各種玩.食物也百百種.原本交通有google地圖.可是我們研究了很久還是失敗.所以改成純粹文字敘述.


企劃大綱

1.網站主題: 高雄旗津
2.網站架構(導覽列名稱與檔名)
3.內容大綱: 景點.美食.住宿.關於.交通
4.主要對象(分析):愛高雄的人
5.網頁架構圖(樹狀圖):
6.網頁版型設計圖wireframe
7.色彩規劃:

1.作業網址:http://mepopedia.com/~css105-2b/final/final-1045445XXX

2.網站主題: 台北西門町
3.內容描述: 介紹西門周遭歷史風景&藝術特色
4.風格設計: 現代西門文化特色
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):1045445065黃少凱-照片拍攝&樹狀圖,版型設計圖製作
1045445173宋家維-網頁製作
6.個人製作心得: 有了前面作業8的練習,這次做完比較不多遇到的瓶頸,但面對如此密麻的語法&css,我覺得需要有更多的認識。


企劃大綱

1.網站主題:台北西門町
2.網站架構(導覽列名稱與檔名)
(1) index.html - Home
(2) about.html - History
(3) services.html - The art
(4) testimonials.html - testimonials
(5) contact.html - Tell us
3.內容大綱:介紹現今西門的文化特色
4.主要對象(分析): 年輕,觀光族群
5.網頁架構圖(樹狀圖): http://i.imgur.com/wmUA26E.jpg
6.網頁版型設計圖wireframe http://i.imgur.com/kvDVX5q.jpg
7.色彩規劃: 自然景色+偏暗色調

1.作業網址:http://mepopedia.com/~css105-2b/final/final-1045445044

2.網站主題: 飛牛牧場
3.內容描述: 介紹那邊的動物
4.風格設計: 用圖片表示 一目瞭然
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):1045445044廖芫瑩
6.個人製作心得: 還是覺得寫那些程式做網頁的人很厲害

企劃大綱

1.網站主題:飛牛牧場
2.網站架構(導覽列名稱與檔名)

3.內容大綱:介紹那邊的動物
4.主要對象(分析): 年輕,觀光族群
5.網頁架構圖(樹狀圖):
6.網頁版型設計圖
7.色彩規劃: 自己拍攝的照片,底圖用黑色凸顯照片

作業網址:http://mepopedia.com/~css105-2b/final/final-1045448015/#home
1.網站主題: 台灣水果
2.內容大綱:台灣春夏秋冬世紀的水果。
3.主要對象(分析): 大眾
4.網頁架構圖(樹狀圖): 主頁春夏秋冬,春水果,夏水果,秋水果,冬水果
5.色彩規劃:偏亮色系,飽和度高
6..組員名單:1045448015