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

Advanced

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

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

1. 作業說明


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

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

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

[hr]

2. 企劃大綱


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

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

[hr]

3. 說明


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

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

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

[hr]

4. 回覆項目


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

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

[hr]
企劃大綱

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

[hr]

5. 評分標準


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

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

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

● 作業網址:
大溪-街角遇見博物館-公有館:http://mepopedia.com/~css105-2c/final/final-1045445117
大溪-街角遇見博物館-街角館:http://mepopedia.com/~css105-2c/final/final-1045445189

1.網站主題:大溪-街角遇見博物館

2.內容大綱:網站呈現大溪記憶,木藝生活等故事,街角館顧名思義即為在巷道中的博物館,回首大
溪悠久的發展歷史,孕育了古街、古蹟,傳統技藝及生活在大溪的人們的生活文化,也將探尋這百年
小鎮的歷史故事,街角館所展出的除了當地的生活民情,也將大溪的文化得以傳承延續。
● 主題內容:大溪街角館文話故事、各個街角館展出其特色及樣貌、相關藝文活動及展覽資訊、在地
傳統技藝與現代的融合,公有館時光故事、美照敘事及相關資訊。

3.主要對象(分析):大眾,讓大溪在地的街角館,在旅客的瀏覽下增添印象,也將大溪故事得已留傳。

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

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


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


5.網頁版型設計圖:大溪-街角遇見博物館將分成兩個主題,分別為公有館及街角館兩部分,內容將一
同蒐集,兩個主題使用不同版型,藉此可嘗試不同版面。
● 大溪-街角遇見博物館-公有館參考版型網址:http://www.tooplate.com/live/2078-adventure
● 大溪-街角遇見博物館-街角館參考版型網址:http://www.tooplate.com/live/2077-modern-town

6.色彩規劃:

大溪-街角遇見博物館-公有館: 整體和街角館氛圍較不相同,公有館展現的是流年下的紀念品,時光
所留下的足跡,因此整體色調打造懷舊風格,暖色調氛圍的相片,彷彿述說著當年的光采,色調如下
白-主色,呈現簡潔風格,與棕色搭配,如同黑瓦白牆,彼此襯托
棕色-營造歷史氛圍,與建築色調調和
橘色-點綴用色
文字則為棕灰色,較為清楚並與標題色呼應,整體如午後陽光灑落,溫暖而舒服的情調,時光依然在
歷史風光的大溪鎮中留下屬於在地的印記。

大溪-街角遇見博物館-街角館: 因為街角館是屬於比較新也比較特別的名詞,所以我用了年輕的顏色
去呈現。原來版型的配色其實也很年輕,是橘色的,但是感覺少了點文藝氣息,所以我改成了藍綠調
的顏色。圖片基本上是以飽和度較高的為主,但是在各別介紹街角館時因為一張圖不足以代表整個街
角館,文字佔的部分也比較重,所以調整了飽和度讓圖不會太過搶眼。

7.歷屆得獎分析:

(1)食尚大學:http://www.foosion.tw/
● 首頁動畫明白呈現網站主題,採用全版面,搭上簡單字句,畫面大方得體,主題性強。
● 內容圍繞在台灣從古至今飲食文化,以「美食大學」呈現各類台灣飲食豐富,也藉由區塊分成不同美
食大項,搭配簡潔插畫,內容清楚也呼應整體版面簡潔性。
● 點擊各個學院皆有相映主圖,並帶著視線而下,條列該品項系別,清楚了解台灣代表性美食。

(2)低碳好好行7投日月潭:http://itwgreentour.com.tw/#know
● 首頁以圖片撥放呈現網站主題、說明,採用全版面,logo(設計過的小圖案)有在透明度上做調整, 讓
底下的連續撥放圖及說明文字與logo呈現無違和的感覺。
● 內容分為:活動方法、景點介紹(又有細分自行車環湖、祈福許願等行程)、自己製作明信片、 領獎
勵等。
● 風格屬於可愛大眾型態,也有很多小圖示,增加趣味性,字形也比較粗、圓;配色比較鮮豔、 底圖也
有小小的幾何圖形(但是不明顯)。
● 點擊地點有詳細的交通資訊及地圖,這裡的資訊是黑字、看起來有點不符合原本的風格; 寄送卡片的
選項跟瀏覽網頁的民眾有所互動,是很有趣的,而且步驟透過網頁指引的非常簡單。

(3)大山北月:http://www.bighillnorthmoon.tw/cafe/
● 首頁設計清新自然,雖然不是以全版設計,營造舒服悠閒氛圍,搭上風景變換,如同用照片講述在地
故事,色調和諧。
● 精神欄位使用箭頭引導,可變換圖片,觀看生態館主題精神,外框採用手繪樹幹,手繪風格營造童趣。
● 印象的欄位使用內拉式圖片排列,整體版面固定,只有內裡圖片下拉,效果甚好,點擊相片可見大圖
及圖片故事敘述,生動有趣。
● 字的級數挺大,顏色分明豐富,可營造童趣感,也方便閱讀。

8.個人製作心得:

● 育如: 這次的作業我是用修改版型的方式做,要記的東西沒有像之前的多,只要認得、找得到就好。
但我有發現小巧思,就是分享欄的icon我們之前教的都是找圖示放進去連結,但免費版型居然有個像程
式庫的東西,只要打上社群軟體的名稱就有他的icon了還蠻特別的。我覺得這次的嘗試有成長的感覺,
脫離老師的教學影片、講義,用我們所學的語法去解決問題,一開始真的覺得好多好難改,不過做到後
面會有得心應手的感覺,尤其是成就感之後真的加倍耶!
這次的作業除了學到網頁的知識外,連思考的方式也有些改進:以前我總是認為會語法就好了,東西也
沒有經過太多的消化就放上去,這次好好的思考想做這個網頁的原因、還有去體驗過街角館後把自己所
見所聞寫下來,前前後後去了四次大溪,終於有身為大溪人的感覺了。謝謝這項作業,也讓我認識我的
家鄉現在在做的改變,也謝謝志豪都會幫忙回覆,最後謝謝老師這一年的指導❤❤❤

● 志豪:很快的,我們即將為二年級畫下一個句點,在這一年中,網頁設計是所有課程中持續性高的課
從最初的音樂歌詞美化版面,到現在的網頁製作,能夠在練習中看見自己對於網頁課程的熟悉度及設計
思維的改變,本次的期末作業就是我們對於這堂課的成果發表,從找尋資料、現場拍照,到實際製作,
我們有了第一次完整的網頁原創性作品,雖然是改造已寫好的版型,並沒有想像中容易,除了整體的協
調性,須修改一個文字的CSS也需要找尋一段時間,這也是在製作過程中的樂趣,色彩配置需要多次嘗
試,能逐漸掌握自己想呈現的氛圍,也藉由這次期末作業的發表,讓大家了解大溪除了有名的和平路老
街,也有曾經為大溪仕紳居住的生活圈-靜謐的新南老街,也是遊客較少行訪的歷史街道,以及由日治時
期所建造的普濟路旁分佈的建築群,在歷史的洗禮下,大溪正不斷的寫出新故事,有著許多值得我們探
訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,在歷史的足跡中描繪未來,話說與育如合
作,在製作過程中也是一件有趣的事,她是很有想法的女生,能夠把自己的小清新風格帶入任何地方,
身為大溪人的她,和她合作也很有意義,我是一個喜愛大溪的中壢人,她則是一個有個人風格的大溪人
彼此都在更加瞭解大溪美好的事物,感謝和她共同完成我們的期末發表,也感謝老師這一年來的教導,
網頁設計如同大海般千變萬化,我想,加以摸索必能感受這其中的樂趣,感謝本次製作過程中大家的建
議與修正,合作愉快。smiling bouncing smileysmiling bouncing smileysmiling bouncing smiley

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如



Edited 24 time(s). Last edit at 06/21/2017 10:32PM by 松本.豪.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2c/final/final-1045445162
2.網站主題: 客家‧桐花祭
3.內容描述: 想讓人認識客家族群結合桐花一起描述跟讓人認識他們之間的關係和希望能讓人想認識他們的資訊、只有一點點也好>x<!
4.風格設計: 想使用半插畫半穿插攝影照片的風格,想表現出輕快閱讀的感覺,讓人不會覺得死板
5.組員名單:張雅虹 1045445162
6.個人製作心得:抱歉老師,其實我還有很多很多的東西沒做完TTTTTTTTTTTTTTT先交半成品連自己都沒有覺得做得很好TOT而且雖然說是半成品但還有很多資料沒有整理跟放上去,都在研究語法中時間慢慢耗掉了TT研究的過程真的是需要時間慢慢累積起來的,但是我這次沒有抓好時間跟前置準備作業比想像中花了更多的力氣和時間在上面orz而且因為自己又不想把這樣的作品做得太爛,太龜毛導致現在還是做不完!!!!!!!啊啊啊啊啊而且做好的部分我也覺得對我來說沒有到「好」還是想修改,但時間TTTTTTTTTT
目前研究出來的語法之間是加了HTML之後原本的設定有些跑掉了所以還需要再研究一下&原本內文字體是英文字看起來很美,但改成中文字體就有點不所措還有不知道該抓哪個部分下去修改,很多都是我沒抓好需要的時間才變這樣嗚嗚嗚想一頭去撞豆腐(。

企劃大綱

1.網站主題:

客家‧桐花祭(Design:Neuron HTML)
參考版型: http://www.tooplate.com/live/2085-neuron

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

【客家‧桐花祭】(index.html)
【客家文化】(single-post.html←(hakka.html))
【桐花祭】(single-post.html←flower.html)
【話客家】(about.html←meethakka.html)
【客家與桐花】(contact.html)
【五月雨】(imgallery.html)

3.內容大綱:

介紹客家部分文化跟每年固定舉辦桐花祭之間的關係(五月客家桐花祭),同時也讓大基本瞭解一下客家人的習俗跟以前的表演藝術。

4.主要對象(分析):

大眾、賞花的民眾、想了解客家文化的人

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



6.網頁版型設計圖wireframe




7.色彩規劃:

白─桃紅、綠─咖啡、加進一些舒適的藍作為相互的色調,希望整體是帶點清新風格的網頁色彩,給人輕鬆閱覽的感覺。

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

1.食尚大學>>http://www.foosion.tw/
有動圖的onepage,會讓人引起興趣去看一下接下來會出現什麼!
用色都是色塊和簡單的小圖icon,文字也不會讓人看的繁雜冗長,整體很乾淨輕快不會對眼睛造成負擔。
介紹簡潔有力,取名也讓人感覺可愛。
網頁文字描述想朝著這部份發展><><><至於有些小缺點的部分我覺得是標題字某些部分可以再粗一點點!

2.O'big禮物地圖>>http://www.obig.com.tw/
他的版面設計很有趣,是國外信封的風格,也可以讓觀賞者直接帶入那種情緒在裡面。
字體大小跟配圖漸層覺得搭配得剛剛好,大方跟字體變化有秩序。
點進去內文導覽列是直式的蠻有趣的,查詢的點在旁邊也分類的很清楚。
最有趣的地方我認為是地圖更新日誌下拉式的部分,很好玩!!!!

3.夜色台北>>http://www.taiwanonly.tw/index.html
整體網頁營造出跟夜晚的夜色相同的感受,也很喜歡他的特殊字體設計。
網頁的配色相當有質感,導覽列也是不干擾主題式的簡潔、但也有大方俐落的風格。
影片和照片都很厲害的感覺,有聲有色,雖然是跳出式的燈箱設計但讓人感覺很不一樣。

4.台灣字崛>>http://www.words.tw/
一點進去慢慢淡入的字體效果很有質感,字體選用跟大小也有種井然有序的感覺。
圖案居多,字反而在首頁沒有特別去做介紹,不過圖的雙色表現很簡單卻也很有力量,呼應主題跟logo。
它的內容是我五個看下來最喜歡的!透明度和照片色調都很統一,而且標題設計也有復刻的質感。
整體看起來很舒服,排版上也很舒適,雖然有些說明文字是跟著內文去調整,但小筆電會覺得又有些太小了點,不過很喜歡這種質感的表現。

5.大山北月>>http://www.bighillnorthmoon.tw/cafe/
有點偏插畫方式的呈現但同時也有攝影照片輔助,網站也想要朝著類似這種感覺走~
首頁有一個配字起來感覺有山林的壯闊感(?),裡面的資料豐富,雖然圖片感覺有點解析度不足><
字體很有特色!有點像手寫字很童趣。


>>>>>這些網頁的Title都有自己設計一個logo加在上面,看起來又增添不少專業的質感。

9.組員:張雅虹 1045445162



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

1.作業網址:http://mepopedia.com/~css105-2c/final/final-1025445061
2.網站主題: 澎湖PENGHU
3.內容描述: 澎湖景點美食介紹
4.風格設計: 簡單舒服
5.組員名單:1025445061
6.個人製作心得:東西好多看了眼睛很花,花很多時間做

企劃大綱
1.網站主題:PENGHU 台灣的離島 / 澎湖
2.網站架構(導覽列名稱與檔名):
首頁(index.html)
介紹(about.html)
景點美食(blog.html)
地圖(contact.html)
3.內容大綱:澎湖六鄉景點、美食介紹。歷史、位置、交通、地圖等介紹。
4.主要對象(分析): 想認識澎湖的人
5.網頁架構圖(樹狀圖)
6.網頁版型設計圖
7.色彩規劃:藍、白清爽的色調
8.歷屆得獎分析(至少三組) :
古早味鹹酸甜 : http://retrospective.idv.tw/
古早味風格很有氣氛,色調讓人感覺溫暖懷舊。

食尚大學:http://www.foosion.tw/
頁面看起來簡單又不失美感,還能算是哪種食物學院,很有趣。

夜色台北:http://www.taiwanonly.tw/index.html
整個用影片的方式來做,很有創意很少見,所以很吸引我。



Edited 2 time(s). Last edit at 06/22/2017 11:22AM by 1025445061.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2c/final/final-1045445069/
2.網站主題: 妖!妖!妖!獸
3.內容描述: 介紹台灣妖怪
4.風格設計: 用可愛插畫的方式,用深紅與深灰當主要顏色
5.組員名單:
1045445069 鄭百惠: 資料收集、HTML CSS修改、版面修改
1045445141 殷啟元: 資料收集、視覺規劃、CSS語法尋找、妖怪插畫
6.個人製作心得:

百惠:因為台灣妖怪的資料真的不多,努力的找啊找啊,到了半夜找到紅衣小女孩真的會很怕,還好我有不怕的隊友。讚
在修改的時候,有時候可能不小心刪掉甚麼,版型整個跑掉就很崩潰,最後還是找不到怪獸分類的地方。
啟元:雖然最後成果跟本來想的完全不一樣,不過沒有關係還是一樣棒,語法很難找,消夜很好吃,
早晨的太陽很美,臥蠶好像曬成古銅色了呢。

1.網站主題: 台灣妖怪

2.內容大綱: 大多數的人都比較知道日本妖怪,所以想讓大家了解台灣妖怪。

3.主要對象(分析): 想了解台灣妖怪的人

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




5.網頁版型設計圖
版型參考: http://www.graphberry.com/products/preview/pluton-single-page-bootstrap-html-template

6.色彩規劃:
插畫可愛風格

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

1.醋咪ㄟ流行語-http://www.slangmosa.tw/
很有趣的網頁,有各種流行語的小球球,還可以讓人登入可以新增新的流行語,超有趣的。

2.夜色台北 - http://www.taiwanonly.tw/index.html
一點進去真的帶出台北夜晚的感覺,用影片的方式呈現夜晚每個時段的台北,就如副標題寫的親如現場般體驗。

3.台灣字崛-http://www.words.tw/
打開網頁有種高雅的感覺,喜歡慢慢滑下去旁邊圖片也慢慢淡入的感覺,感覺很有質感。

8.組員名單(學號) 1045445069 鄭百惠 1045445141 殷啟元 沒有組長



Edited 7 time(s). Last edit at 06/22/2017 03:03AM by 1045445069.
(編輯記錄)

1.網站主題: 台灣傳統技藝

作業網址:http://mepopedia.com/~css105-2c/final/final-1045445102

2.內容大綱: 台灣在地特有的技藝

3.主要對象(分析):想了解台灣民俗活動的活動

4.網頁架構圖(樹狀圖):
[img]http://i.imgur.com/0j9UKzY.jpg?1[/img]


5.網頁版型設計圖 :
[img]http://i.imgur.com/Rai31o8.png[/img]

6.色彩規劃:
以白色為主給人清楚明瞭,簡單大方的感覺

7.歷屆得獎分析(至少三組)
1.花蓮旅人誌 << http://www.hl-net.com.tw/
● 首頁呈現網站主題,主題性強。
●內容清楚了解花蓮在地人事物,反應整體版面的清晰,給人一種文青的感覺。
●點擊各個主體皆有清楚介紹,清楚了解花蓮的特色。

(2)和風北投 • 行腳踏查< ● 以圖片呈現網站主題,採用全版面。
●瞭解北投文化歷史,景點,和故事,清楚明瞭的介紹
●網頁的形式更讓人了解北投了

(3)古早味鹹酸甜<< http://retrospective.idv.tw/
● 風格形成一種復古的感覺
●網頁應用台灣古早風味呈現背景音樂也十分有趣
● 還出現了許多小巧思,讓人想深入了解台灣的古早時代

8.組員名單(學號) 1045445084 蔡承蓉 1045445102 陳柔安



Edited 7 time(s). Last edit at 06/21/2017 08:49PM by 1045445102.
(編輯記錄)

網址:http://mepopedia.com/~css105-2c/final/final-1045445198

網站主題: Republic of China Armed Forces

內容大綱: 軍事史與裝備簡介

主要對象(分析): 對軍事方面有興趣想要挺進的各位

網頁架構圖暨板型設計圖:
http://i.imgur.com/niV2IDP.jpg

版型: http://www.free-css.com/free-css-templates/page198/digital-team

色彩規劃:無 順其自然(被改一班動整師氣炸了乾脆放棄整編)

歷屆得獎分析(至少三組)
1.http://www.slangmosa.tw :嗯.....這樣整個做完再看的難度不高(我不會評論啊..
2:http://www.obig.com.tw/map.php 這個我喜歡 他是持續在運作的分享網站 資料豐富 瀏覽順暢 只是有點雜
3:http://www.foosion.tw/ 開頭居然有影片但跟我找的版型好像 感覺沒難度

心得:快累死了 我投降 快把我斃了

製造時間:整夜



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

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

2.網站主題: 菜市場 Taiwan market

3.內容描述: 現代人越來越不喜歡去菜市場了,但我們覺得菜市場是最能代表台灣的地方。
我們用照片說故事,跟你說菜市場的優點,讓你再次喜歡菜市場。
介紹台灣菜市場文化及市場裡的特點,利用照片的方式來呈現想給人了解的東西,配上文字,讓大家了解市場文化與他特別的地方。

4.風格設計:
整體風個走簡單,用綠色與深灰色作為主要配色,綠色是因為在菜市場最常見就是綠了,深灰是不想搶過圖片的顏色。
我們照片是自己去拍攝,並且採局部彩色的方式,我們想說的故事,想給你看的重點將會是利用局部彩色呈現,凸顯主題也更清楚明瞭。

5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
視覺規劃、CSS設計、文案:036邱珮瑋
HTML、動態效果、版面移動刪減:003朱盈穎
照片拍攝與修圖:036邱珮瑋、003朱盈穎



6.個人製作心得:

036邱珮瑋
菜市場真的是最能代表台灣的地方啊~
在做導覽列上的菜市場三個字時一直在考慮要用什麼風格製作,最後選擇了這種雙色有點類似潑墨的作法配合明體smiling bouncing smiley
在改內容(圖片跟文案時)其實偶爾會不小心拉到旁邊的預覽框等等,就會一直跑掉亂掉,搞到有點小崩潰,
但最後改出我們要的感覺時,真的很高興,因為做出了一個我覺得能拿給別人看的網頁,
也可以把我們眼中的菜市場用網頁呈現給別人看,我們用照片說故事給看網頁的人聽,
讓他人了解我們對於菜市場的想法,這種感覺好棒cool smiley,btw我超喜歡我們照片呈現的方式啊(局部彩色)!!!!!!!。

003朱盈穎
一剛開始看到版型好漂亮、會動耶~(*´▽`*)就衝動的說要改這個版型,殊不知將檔案下載下來時,看到檔案數量頭都昏了。
而且第一次嘗試改動圖片時,圖片一整個大亂跳,之後就受不了跟老師求助,感謝老師給個比較不會發生意外的作法,原本其實沒有想改動這麼多版面的,但範例網站有些真的是我們不需要的版面,所以就刪刪刪d=(´▽`)=b
範例網站有些像小ICON的東西,去看了一下程式碼卻發現它是字型讓我超級懊惱的(ノдヽ),原本只想說改個小圖片就行,結果那個小ICON我們直接砍掉,研究它太花時間了.....

------

企劃大綱

1.網站主題: 菜市場(市場文化)
2.網站架構(導覽列名稱與檔名)
首頁、動機、關於、故事、聽說、調查、聯絡
因為是 onepage所以都在同一檔案 index.html

3.內容大綱:
介紹台灣菜市場文化及市場裡的特點,利用照片的方式來呈現想給人了解的東西,配上文字,讓大家了解市場文化與他特別的地方。
我們照片是自己去拍攝,並且採局部彩色的方式,我們想說的故事,想給你看的重點將會是利用局部彩色呈現,凸顯主題也更清楚明瞭。

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

5.網頁架構圖(樹狀圖):
[img]http://i.imgur.com/ohiUohU.jpg[/img]

6.網頁版型設計圖wireframe
範例版型:http://www.free-css.com/assets/files/free-css-templates/preview/page205/multi/#prettyPhoto

7.色彩規劃: 利用無彩色(黑灰白)三色下去做為主色調,因為不想搶過照片的顏色,也能營造舒適的感受(可能會隨照片主色調去配色)。

8.歷屆得獎分析(至少三組)
1. 夜色台北 - http://www.taiwanonly.tw/index.html
網頁呈現超有質感,尤其是夜色台北四個字,把整個網頁的氣氛都帶出來,用影片的方式呈現,讓人更加了解自己要訴說什麼。
網頁的排版也很整齊,簡單的排版,讓人覺得舒服。
2.宜蘭百工藝師 - http://www.ilanartist.idv.tw/
內容介紹的非常詳細,內容超級豐富,但整體頁面的美感我覺得我個人沒有很喜歡,而且用一個一個圖片的方式去分割每個區塊我覺得太過於死板板的,雖然是個很正經的主題但還是稍嫌死板,如果活潑一點會更好,但內容把所有藝師做得很詳細,很棒。
3.古早味鹹酸甜 - http://retrospective.idv.tw/
整體運用剪貼風格形成一種手札且復古的感覺,網頁主標題也用了應對古早台灣的霓虹燈來凸顯主題。
用鹹、酸、甜作為分類依據,下面的小筆記本給了小地圖及一些還存在的古早味柑仔店,點到細項時還會有詳細的小地圖從右邊或左邊滑動入場。


組員:1045445036 邱珮瑋 1045445003 朱盈穎



Edited 7 time(s). Last edit at 06/21/2017 08:13PM by Peiwei.
(編輯記錄)

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

2.網站主題: About Cat

3.內容描述: 介紹貓咪種類習性等,也介紹哪裡可以更加了解甚至能到侯峒

4.風格設計: 既簡單卻不失可愛

5.組員名單:1045445042 林若庭 1045445006 許華芳 沒有組長
工作分配(視覺規劃、HTML CSS設計、動態效果):
圖片文字為許華芳,其餘網站架構上為林若庭

6.個人製作心得:
本來有找到一個不錯的參考版型,但他過於複雜....就放棄了.....
我們只是想把背景色改掉,就花了15分鐘再找...最終還是沒找到.................
而這個版型較為簡單,容易尋找,但還是找不到他的icon,想改成自己的圖示。

企劃大綱
1.網站主題:About the cat

2.網站架構(導覽列名稱與檔名):
Home (首頁)
About (敘述我們了解的貓)
Sort(外部連結、圖庫找尋、關於貓村)
Photo(身旁貓咪分享)
Contact(Get in touch with us)

3.內容大綱:想讓大家更了解貓咪

4.主要對象(分析): 主要對象為喜歡貓的以及想了解的人

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




6.網頁版型設計圖 :http://www.free-css.com/free-css-templates/page211/bocor

7.色彩規劃:簡單可愛風格,不失雅緻

8.歷屆得獎分析(至少三組) :
古早味鹹酸甜 :http://retrospective.idv.tw/
大山北月:http://www.bighillnorthmoon.tw/cafe/
瘋樂!!!骰進Taiching:http://funtaichung.idv.tw/

另外參考:http://fumeancats.talk.tw/(黃阿瑪)


9.組員名單(學號)
1045445042林若庭,1045445006許華芳



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

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

2.網站主題:台灣歷史

3.內容描述: 介紹日據時代的台灣。

4.風格設計: 一種混亂的戰場感覺。

5.組員名單: 1045445147 高尚宇

6.個人製作心得: 搞了好久終於看懂裡面的語法了,從中學到非常多。


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

(1)Slang Formosa(醋咪ㄟ流行語):http://www.slangmosa.tw/
● 滑輪效果,首頁明白呈現網站想要給人的東西,採用滑動式全版面與字句的簡單設計,畫面乾淨,主題性強。
●簡約風格,圓球式設計內容以從古至今的各式流行語,呈現台灣豐富的鄉土名情。
●和字體輸入的設計別具趣味,視線能自然地跟著畫面滑動,輸入法的設計別具趣味,台灣流行語的想法充分表達該網頁的目的,清楚了解台灣文化。

(2)食尚大學:http://www.foosion.tw/
● 首頁設計以大圖示清新表達出強烈的主題性,全版設計的感覺給人舒服自在,顏色再加上食物的各式變化搭上晃動的景頭呈現身歷其境的感覺。
●欄位使用單向搜索的功能,變換圖片方便觀看樣式。

(3)低碳好好行 7 投日月潭 :http://itwgreentour.com.tw/
●風格屬於方便大眾閱覽的型態,很多趣味的小圖示,和可愛風格的吉祥物讓人在觀看時能心情愉快,字形,圓,配色也和主題相吻合。
●資訊配置透過網頁指引的非常簡單。 點擊圖示都會有貼心的詳細的交通資訊及地圖,



Edited 1 time(s). Last edit at 06/22/2017 01:37AM by alan19970722.
(編輯記錄)

1.網站主題: 台灣部分區域介紹

2.內容大綱: 中英文介紹 三個區域介紹

3.主要對象(分析):台灣人和會看英文的人

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


5.網頁版型設計圖 :
http://www.templatemo.com/tm-481-elevate

6.色彩規劃:冷色調

7.歷屆得獎分析(至少三組)
http://itwgreentour.com.tw 內容豐富 分頁很多 點進去一個分頁之後 還有很多的內容 色彩也配置的很好

http://www.foosion.tw 這個感覺雖然簡單,但是首頁的動畫感覺很強,動態的感覺得很好,配色也很漂亮

http://www.slangmosa.tw 網頁最底下的動態互動很厲害!連結有影片還有#關鍵字連結,很難想像要怎麼做的xd 而且網站很有趣,把台灣的世代流行語都放進去了~

8.組員名單(學號) :1045445019 王思媗

=========
1.作業網址:http://mepopedia.com/~css105-2c/final/final-1045445019/

2.網站主題: 台灣部分區域介紹

3.內容描述: 各地基本介紹 小吃 甜點 幾個較著名的景點 照片 意見提供

4.風格設計:沈穩 文青

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

6.個人製作心得: 版面時常會亂跑掉,以為回不去所以很著急,還好後來都有回復原狀,整體來說並不難,但是可能是自己挑到簡單的版型了,但是很喜歡整體的感覺,可能沒什麼質感,但是很用心

========


1.網站主題: 台灣部分區域介紹

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

基隆中文介紹(index.html)
宜蘭中文介紹(enil.html)
花蓮中文介紹(hw.html)
台南中文介紹(tainan.html)

基隆英文介紹(enkee.html)
宜蘭英文介紹(il.html)
花蓮英文介紹(enhw.html)
台南英文介紹(entai.html)




3.內容大綱:各地基本介紹 小吃 甜點 幾個較著名的景點 照片 意見提供

4.主要對象(分析): 台灣人 和看得懂英文的人

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


6.網頁版型設計圖wireframe :
http://www.templatemo.com/tm-481-elevate

7.色彩規劃: 冷色調 白灰

8.歷屆得獎分析(至少三組)
http://itwgreentour.com.tw 內容豐富 分頁很多 點進去一個分頁之後 還有很多的內容 色彩也配置的很好

http://www.foosion.tw 這個感覺雖然簡單,但是首頁的動畫感覺很強,動態的感覺得很好,配色也很漂亮

http://www.slangmosa.tw 網頁最底下的動態互動很厲害!連結有影片還有#關鍵字連結,很難想像要怎麼做的xd 而且網站很有趣,把台灣的世代流行語都放進去了~



Edited 5 time(s). Last edit at 06/23/2017 01:50PM by sharon111688.
(編輯記錄)

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

2.網站主題: 西安
3.內容描述: 關於西安的一些簡單介紹
4.風格設計: 清新
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 1045445195張燁楠
6.個人製作心得: 雖然我的網站可能會沒有其他同學的做的好,但我也是盡了我最大的努力完成的。
企劃大綱
1.網站主題: 西安
2.網站架構(導覽列名稱與檔名)
西安简介(index.html)
西安地理(about.html)
西安交通(hw.html)
西安景点(xian.html)
西安美食(food.html)
西安照片(photo.html)
3.內容大綱:
4.主要對象(分析):
5.網頁架構圖(樹狀圖):
6.網頁版型設計圖wireframe
7.色彩規劃:
8.歷屆得獎分析(至少三組)



Edited 1 time(s). Last edit at 06/22/2017 12:38AM by 1045445195.
(編輯記錄)

作業網址:http://mepopedia.com/~css105-2c/final/final-1045445015

1.網站主題: 南寮
2.內容大綱: 簡約的南寮風情以及介紹

3.主要對象(分析): 大眾 希望來到南寮漁港的朋友們 能夠欣賞到南寮風景的美與景色

4.網頁架構圖(樹狀圖): [img]
[/img]

5.網頁版型設計圖 http://www.free-css.com/free-css-templates/page211/bocor

6.色彩規劃: 每一頁都以不同的情境來做以色彩的色調與變化
以簡單舒服的柔色調 來襯托大自然散發出的舒適與親近的和諧


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

1.大山北月:http://www.bighillnorthmoon.tw/cafe/
整體版明很有趣味性 字體也很可愛 有童趣風格的感覺
讓人感到舒適的視覺效果

2.夜色台北 :http://www.taiwanonly.tw/index.html
內容的介紹 讓人看了也感受到夜晚時分的生活型態
版面的字體也相當有設計感 內容的配色與排版也讓人覺得很簡潔又有質感
內容的影片也讓我感到十分佩服 跳窗的燈箱設計也別有一番風味的感受

3.歲月時分:http://timeline.tw/
我覺得內容及插畫的部分都讓我感到很有趣!
插花很有自己的風格 排版與設計添加了趣味性
並讓整體的網頁型態充滿了活潑的感覺
也深入體會到內容提及到的當下的心情與感受

心得
這次的作業使用的版型,他原本比較簡單東西也比較沒有那麼多
所以我們增加了很多的東西,去找出他的CSS來做更多的變化,
雖然有些真的找得比較久,不過最後會很有成就感,也增加趣味的彈跳視窗
使畫面更活潑一點 也增加了一些色調 不會讓畫面顯得單調~
每一張照片也都是自己拍的然後再去經過PS去修去改 雖然好多張唷!不過慢慢地改完 整體的美感也呈現了!!!
這次的檔案比較大 不過還好很順利上傳完整 !
謝謝老師這一年辛苦的指導 我覺得我們學到好多呢!!!
然後我們最後也有修改老師在課堂上給我們的建議以及需要修正的地方~~~~smiling smiley)))))


8.組員名單(學號) 1045445015王宜雯 1045445033許敬杰



Edited 6 time(s). Last edit at 06/25/2017 12:48AM by 王宜雯.
(編輯記錄)

企劃大綱
1.網站主題:北埔老街
2.內容大綱: 介紹北埔在地人文與當地名產。
3.主要對象(分析): 對於旅遊與文化有興趣者
4.網頁架構圖(樹狀圖):
5.網頁版型設計圖 : https://html5up.net/ethereal
6.色彩規劃: 純樸的紅磚色彩為主色調象徵當地鄉土民情,輔色墨綠色 為擂茶代表色
\
7.歷屆得獎分析(至少三組)
http://retrospective.idv.tw/ 古早味鹹酸甜

使用的色調為黃色像是泛黃的紙質,再藉由小時候常吃的糖果餅乾的包裝使得配色鮮豔豐富,讓整體版面顯得生動有趣,趣味性高,彷彿令人重溫懷念的孩提時代。

http://www.words.tw/ 台灣字掘
版面風格簡潔有力,用色單純有種穩健踏實之感,更能凸顯字體的美感,文案簡明扼要,整體的設計很到位。


http://www.taiwanonly.tw/6pm.html 夜色台北

題材選用很特別,是以影片的方式分別記錄人們各時段的生活,而且也十分得貼近我們的日常,完整得呈現了台北的夜景。

8.組員名單(學號) : 1045445081 張譽瀚

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

2.網站主題: 北埔老街
3.內容描述: 介紹北埔當地名產與古蹟。
4.風格設計: 使用各種照片讓觀看者看到大大小小的北埔街景藉此能感受到身歷其中之感
5.組員名單:1045445081 張譽瀚
6.個人製作心得: 製作過程中,在參考版型上發現了許多小技巧以及程式碼應用方式,也發現到除了上課所教的技巧以及對於網頁架構的認識,還有就是實作過程中,思考著網頁版型是怎麼設計的,為什麼會這樣使用程式碼,修改的過程中有一種牽一髮動全身的感覺,可能不小心選錯甚麼或是調整甚麼,都會有一些摸不著頭緒的變動,哪邊有問題必須自己去找出問題在哪,然而這方面是我花了最多時間去推敲摸索的,卻也是我滿有成就感的部分,做得越多自己對於網頁的理解又加深了許多。



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

企劃大綱

1.網站主題: 新竹x巷弄x甜點
2.網站架構

3.內容大綱:
介紹新竹巷弄裡的甜點店,隱藏在小巷子不起眼的甜點店,卻能成功吸引人群前來朝聖。
有些人為了它,不顧一切,只為了嘗一口它的美味。

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

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

6.網頁版型設計圖
範例版型:

7.色彩規劃: 櫻花淡粉色調配上鵝蛋黃,營造出少女的感覺,簡約又不失優雅。

8.歷屆得獎分析(至少三組)
1食尚大學:http://www.foosion.tw/
首頁看了讓人很餓,尤其是晚上看的時候,非常符合主題。
非常喜歡內容裡分類的學院,可以感受到台灣小吃文化種類豐富
搭配插圖有畫龍點睛的效果,最後還有類似與點開網頁的人有互動(問你是哪種學院的人)覺得這樣的設計會讓人記憶猶新很難忘記
2. 夜色台北 - http://www.taiwanonly.tw/index.html
一點開會動的首頁用機車的大燈模糊表現很讓人投入在夜晚的街道氛圍
標題的字體設計的很酷,很喜歡
內容的小標題裡面寫幾點在做什麼這樣的表達方式不同以往,設計果然就是要這樣抓住大家的目光
1.花蓮旅人誌 << http://www.hl-net.com.tw/
● 有貼心提示用滾輪滑動,而且是左右的,覺得新鮮
●因為我自己是花蓮人,看他的介紹覺得都有把當地一些特色表達的很好
●圖片跑出來的方式很新鮮,像往前走一樣

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

2.網站主題:鶯歌陶瓷老街

3.內容描述:希望來到鶯歌陶瓷老街的大家,可以認識陶瓷及製作方法

4.風格設計: 簡約風

5.組員名單: 1045445099簡瑜萱

6.個人製作心得: 花了很多的時間來製作,好多好複雜的語法,可以再做得更好。


--------------------------------------------------------------------------------------------------------------------


1.網站主題: 鶯歌陶瓷老街

2.內容大綱: 介紹鶯歌老街

3.主要對象(分析): 大眾(希望來到鶯歌陶瓷老街的大家,可以認識陶瓷及製作 方法)

4.版型參考:http://www.free-css.com/free-css-templates/page211/bocor

5.網頁架構圖(樹狀圖):http://imgur.com/RrxPr0M

6.網頁版型設計圖 http://imgur.com/lHlX7Iy


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


1.大山北月:http://www.bighillnorthmoon.tw/cafe/
整體利用插畫及選用比較親近的字體,右下方同時還能播放
音樂,讓人帶入大自然的感覺,裡面的資料豐富

2.夜色台北 :http://www.taiwanonly.tw/index.html
以影片的方式,記錄著人們個個時段的作息,字體設計以及
配色,帶給我們融入夜晚的台北,首頁以影片模糊的方式,
就好像自己站在台北的馬路上

3.食尚大學:http://www.foosion.tw/
簡約的風格,是以動態效果呈現,看起來更有變化,而內容
是除了點進去後有詳細介紹外,還能以登入的方式看自己是
哪種學院。多增加了趣味感

4.瘋樂!!!骰進Taiching:
以大富翁的方式,介紹台中的景點,每骰到的景點都有介紹
及紀念品,讓要第一次去台中旅行的大家,可以先好好認識
一下台中,也好像在回憶玩大富翁的時光,增加逗趣的感覺



Edited 1 time(s). Last edit at 06/22/2017 07:26AM by 簡瑜萱.
(編輯記錄)

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

2.網站主題:達悟族

3.內容大綱:達悟族的介紹

4.主要對象(分析): 大眾(能更了解達悟族的文化)
5.網頁架構圖(樹狀圖):

6.網頁版型設計圖:

7.色彩規劃:
主要以藍白為主,象徵達悟族人與大自然密不可分的關係
8.歷屆得獎分析(至少三組)

(1)Slang Formosa(醋咪ㄟ流行語):http://www.slangmosa.tw/
整體畫面還蠻乾淨的,而且內容非常有趣,都是年輕人會使用
的流行用語,還有一些很可愛的互動設計。

(2)歲月十分:http://timeline.tw/
內容非常的豐富,設計上是以插畫的風格為主,視覺上感覺很有
趣,全部看完之後給人一種歲約如縮的感覺。

(3)台灣字崛:http://www.words.tw/
配色相當的簡單舒服給人一種文青的感覺,畫面中穿插一些插圖
增添些許趣味感

9.組員:林怡利 1045445150



Edited 6 time(s). Last edit at 06/21/2017 10:07PM by 1045445150.
(編輯記錄)

1.網站主題: 台灣夜市

2.內容大綱: 介紹台灣的夜市跟一些台灣特有美食及飲料

3.主要對象(分析): 看得懂中文的比如中國、香港、澳門等外地人。

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

5.網頁版型設計圖wireframe

6.色彩規劃:傍晚與星空的橘藍黑白

7.歷屆得獎分析(至少三組)
大山北月:http://www.bighillnorthmoon.tw/cafe/
音樂與圖片配合的恰好、插畫等些文字也讓人感到溫暖。

夜色台北:http://www.taiwanonly.tw/index.html
感覺真的在夜晚的台北遊歷一樣,有一種身如其境的感覺。

瘋樂!!!骰進Taiching:http://funtaichung.idv.tw/
以骰子遊樂的感覺來遊歷台中,感覺童趣,顏色等也能讓小孩感受喜愛。

[hr]

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

2.網站主題:台灣夜市
3.內容描述: 介紹台灣的夜市跟一些台灣特有美食及飲料
4.風格設計: 用夜色與傍晚的背景襯托台灣的美食跟夜市。
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 1015445216 陳依婷
6.個人製作心得: 其他科的期末也同時卡在這周顯得整理作業有些手忙腳亂,加上工作忙跟一些家庭因素,可能會有一些不完整之處,不過還是盡力了,部分圖片也是找授權的,光是處理圖片大小跟檔名就花了不少時間。



Edited 1 time(s). Last edit at 06/15/2017 12:35AM by sp39678910.
(編輯記錄)

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



1.網站主題: 新竹市美食

2.網站架構(導覽列名稱與檔名)
新竹市美食 (index.html)
新竹市文化 (about.html)
鹹食 (gallery.html)
甜食 (gallery1.html)
最喜愛三家美食 (blog.html)

3.內容大綱:
介紹我們所認為的新竹市美食,會用許多的照片來呈現
裡面的細節會畫圖案來增加活潑感與豐富的感覺
文字內容會以我們的感受與想法來表達.

4.主要對象(分析):
大眾、初次來訪新竹市的人們,讓他們可以在肚子餓時可以參考.

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



6.網頁版型設計圖:



7.色彩規劃:
用知名建築的顏色做為參考,使用橘黃與暗紅的色彩.

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

1.時尚大學 http://www.foosion.tw/

我很喜愛吃美食! 這網站主題理所當然的超喜歡~! 把各種食物分成學院超可愛的~~
封面的圖製作成影片讓人有種自己也在當下的感覺! 讓我肚子好餓...
網頁編排上很清楚明瞭,不繁雜!

2.低碳好好行 7頭日月潭 http://itwgreentour.com.tw/

整體看起來非常活潑 、顏色繽紛,有讓旅行的開心與歡樂感表現出來~
裡面的圖案都好可愛! 還有可以互動的東西覺得很有趣! 資訊也非常豐富.

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

看起來很有穿越時空回到以前古早年代的感覺! 完美呈現了懷舊感,很有氣氛.
特別的排版方式讓我覺得很特別,背景擺滿了各種古早味糖果,非常豐富
資訊很簡單明瞭 、清楚.

9.組員:廖芳如 1045445135 劉家瑄 1045445105



Edited 2 time(s). Last edit at 06/22/2017 10:57AM by 廖芳如.
(編輯記錄)

1.網站主題: 湖口老街
網站網址:http://mepopedia.com/~css105-2c/final/final-1045445212/about.html

2.內容大綱:介紹老街美食文化等

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

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


5.網頁版型設計圖


6.色彩規劃:簡約

7.歷屆得獎分析(至少三組)
大山北月:http://www.bighillnorthmoon.tw/cafe/
音樂與圖片配合的好。

夜色台北:http://www.taiwanonly.tw/index.html
感覺真的在夜晚的台北遊歷一樣。

瘋樂!!!骰進Taiching:http://funtaichung.idv.tw/
感覺童趣,顏色等也能讓小孩感受喜愛。

8.組員名單
1045445212 劉芸瑄



Edited 5 time(s). Last edit at 06/27/2017 04:03PM by 1045445212.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2c/final/final-1045445180/2076_zentro/

2.網站主題:陽明山國家公園

3.內容大綱: 介紹詳明山的好山好水

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

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


6.網頁版型設計圖 :http://www.tooplate.com/live/2076-zentro



7.色彩規劃:簡約

8.風格設計: 大自然

9.組員名單:簡資容only me 1045445180

10.個人製作心得: 覺得快近視了

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

(1) 醋咪ㄟ流行語 - http://www.slangmosa.tw/
超喜歡有可愛的互動設計,而且還有中英文,很適合老外害年輕人使用

(2) 聽見,福 爾 摩沙 - http://listento.tw/
用音樂當為基底的網頁很特別,有新的體會

(3)夜色台北 - http://www.taiwanonly.tw/index.html
用影片的方式呈現,真的很台北哈哈哈,字體和影片也配得很讚



Edited 5 time(s). Last edit at 06/21/2017 03:02AM by 時尚時尚最時尚.
(編輯記錄)

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

2.網站主題:澎湖旅遊手冊
3.內容描述:介紹澎湖的經典美食跟景點
4.風格設計:明亮 清爽 海洋
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 1045445057沈正薇
6.個人製作心得:我覺得我選的版型好像跟別人的比起來太單調了一點....可是我很喜歡這個版型 看了很舒服 只是能放上去的資訊有限有點可惜,如果有機會會想把這個主題更擴大去做一個,因為我好像沒看到什麼人做澎湖這個主題的。感謝老師跟幫助我的同學<3。


企劃大綱

1.網站主題:澎湖旅遊手冊
2.網站架構:全頁index.html
3.內容大綱:主要是介紹澎湖的知名景點跟經典美食,還有提供旅遊的交通資訊、路線提供。
4.主要對象(分析): 觀光客
5.網頁架構圖(樹狀圖):http://imgur.com/siIkVbN
6.網頁版型設計圖wireframe:http://imgur.com/sZ86ZA3
7.色彩規劃: 白 藍 海洋跟簡單的感覺
8.歷屆得獎分析:

「歲月時分」第11屆 第一名 :http://timeline.tw/
我一進去的時候他就說“請使用鍵盤的方向鍵來瀏覽本站以獲得最佳效果。”原來是因為他的主題角色跟背景都是會動的,而且是像幫娃娃換衣服那樣,只是每一頁是說一個人從小到老的模樣,很精緻又很可愛,然後他還可以選背景,背景也都是台北有名的景點,非常有趣。

「Slang Formosa(醋咪ㄟ流行語)」第15屆第一名 http://www.slangmosa.tw/
很酷!他拿我們現在最常使用的網路用語,搭配英文翻譯,應該是想要讓外國人看得懂我們這些人平常到底在網路上都在說什麼,然後他網頁裡面的小動畫都做得很精緻,我很喜歡!

「古早味鹹酸甜」第七屆佳作:http://retrospective.idv.tw/
我最喜歡這個了!雖然背景音樂很俗,可是真的有夠適合的,小動畫做的好可愛,每一個按鈕都很用心去做,很喜歡這種風格,很可愛又很精緻。



Edited 5 time(s). Last edit at 06/21/2017 06:01PM by weiwei.
(編輯記錄)

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

2.網站主題: 平溪老街

3.內容描述: 平溪的簡介,旅遊資訊,交通方式

4.風格設計: 溫馨溫暖

5.組員名單:1045445174林宣妤

6.個人製作心得:花了很長的時間研究及找資料,網頁整體算滿意。

企劃大綱
1.網站主題:平溪老街

2.網站架構(導覽列名稱與檔名):
平溪老街  home.html
平溪之美 services.html
我愛平溪 about.html
平溪特色 works.html
歡迎來平溪 process.html
最愛平溪 pricing.html
平溪 blog.html
旅途愉快 contact.html

3.內容大綱:平溪的簡介,旅遊資訊,交通方式

4.主要對象(分析): 所有觀光客

5.網頁架構圖(樹狀圖): http://imgur.com/a/ByEaB

6.網頁版型設計圖 :http://imgur.com/a/v7jNV

7.色彩規劃:橘黃暖色調

8.歷屆得獎分析(至少三組) :
夜色台北 : http://www.taiwanonly.tw/index.html
網頁整體排版清晰有質感,配色很有現代感,內容放入了許多影片,可以看見台北人的生活,覺得這樣的設計很創新。

大山北月:http://www.bighillnorthmoon.tw/cafe/
網頁中有許多精緻好看的插畫,內文中還搭配語音導覽的功能,貼心又有創意,很適合親子共同觀賞的網站。

台灣字崛:http://www.words.tw/
主題挑選的很有創意,整體網頁風格給人一種很文青的感覺,使用的效果都極具張力。

9.組員名單(學號)1045445174林宣妤



Edited 10 time(s). Last edit at 06/21/2017 05:36PM by 1045445174.
(編輯記錄)

1.網站主題:網美養成記
2.內容大綱: 現在流行網美,網美盛行的年代,想要介紹台灣的網美流行的食物是什麼,流行的餐廳在哪,讓各位想成為網美的人,近一步的了解
3.主要對象(分析):想成為網美的普妹
4.網頁架構圖(樹狀圖):



5.網頁版型設計圖:



6.色彩規劃:小清新
7.歷屆得獎分析:
8.組員名單: 廖曉玄 1045445217、鄧曉青 1045445045



Edited 4 time(s). Last edit at 06/27/2017 02:48PM by JinJin.
(編輯記錄)

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

2.網站主題: 新竹之美
3.內容描述:照片
4.風格設計: 大圖
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):1045445108范易祺
6.個人製作心得: 我都矇逼了

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

2.網站主題: 台灣-霹靂布袋戲
3.內容描述: 布袋戲是台灣的文創之一,雖然很多人對此不了解,但其實在布袋戲裡面可以看到關於很多東西,
像是文言文的對白語文描述等增加自己的語文能力,還有木偶的精雕細琢,身上的服飾等,都要花費浩大工程。
4.風格設計: 簡單的風格,因為布袋戲本身就是多樣花俏的,所以圖片的選擇上以單色為主,再以各派系做分別。
5.網頁架構圖(樹狀圖):

6.個人製作心得: 布袋戲是台灣的文創之一,雖然很多人對此不了解,
但因為家父喜歡看、在從小耳濡目染的情況下,我也慢慢喜歡上了布袋戲,所以才做此網頁。
即被別人笑,我也還是會自豪地說,這是我喜歡的東西,也是我跟爸爸溝通之一的橋梁。
7.色彩規劃:多使用暗紅色系及清楚明瞭的色系,讓人一眼分明。

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

1.網站主題: 今天ㄔ什麼 ?
2.內容大綱: 介紹我們吃過的台灣美食

3.主要對象(分析): 大眾 希望有人看了我們的網頁 因此想要去吃那些美食

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

5.網頁版型設計圖 http://www.tooplate.com/view/2082-pure-mix

6.色彩規劃: 簡約 小清新 主要使用黑色和白色做搭配 不想用太多顏色搶過美食照的鋒頭


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

1.古早味鹹酸甜 http://retrospective.idv.tw/
一打開這個網頁就被它可愛又充滿復古風味的頁面所吸引 背景音樂也很有趣

2.夜色台北 http://www.taiwanonly.tw/index.html
讓人可以更加瞭解台北夜晚的樣子 內頁的配色簡約有質感 logo設計的很好看

3.食尚大學 http://www.foosion.tw/
首頁以影片的方式呈現讓人有身歷其境的感覺 內頁排版乾淨整潔 照片拍得讓人食指大動

8.組員名單(學號) 1045445009謝昀珈 1045445030呂子綺



Edited 1 time(s). Last edit at 06/22/2017 01:59AM by 呂子綺.
(編輯記錄)

1.作業網址:http://mepopedia.com/~css105-2c/final/final-1045445051/
2.網站主題: 台灣夜市遊
3.內容描述: 台灣夜市的各種介紹
4.風格設計: 簡單質感
5.組員名單:1045445051 曾慶恩
6.個人製作心得:很有趣,但又很麻煩,許多東西還是搞不太清楚。

企劃大綱
1.網站主題:台灣夜市遊
2.網站架構(導覽列名稱與檔名):
首頁(index.html)
介紹(about.html)
影片(blog.html)
3.內容大綱:台灣夜市、美食介紹。夜市介紹、位置、交通、地圖等介紹。
4.主要對象(分析): 來台灣旅遊的人
5.網頁架構圖(樹狀圖)
6.網頁版型設計圖
7.色彩規劃:黑色調
8.歷屆得獎分析(至少三組) :
古早味鹹酸甜 : http://retrospective.idv.tw/
個人風格強烈,畫面讓人回想許多老一輩的回憶,音樂的氣氛很懷舊,
但可惜的一點是畫面太雜,找按紐非常不便。

食尚大學:http://www.foosion.tw/
頁面簡單,看起來非常清爽,各式小吃都有專門設計別稱,非常用心。

夜色台北:http://www.taiwanonly.tw/index.html
影片設計的網頁很少見,但又有跟主題相搭配,整體的氣氛營造的非常優秀。

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

2.網站主題:蘭嶼

3.內容描述: 簡單樸實的設計來做蘭嶼的網站再適合不過了

4.風格設計: 蔚藍的大海彷彿圍繞在你身邊有種身歷其境的感覺~~~~

5.組員名單:1045445177郭智綺

6.個人製作心得:雖然我的網站比別人看起來簡單但她語法有是很多,很多明明是圖片但她遽然沒有實體途徑讓我找起來非常費工夫,找得相當辛苦。

企劃大綱
1.網站主題:平溪老街

2.網站架構(導覽列名稱與檔名):
蘭嶼
about
ETHNICITY
LANDSCAPE
CONTACT

同一檔案index.html

3.內容大綱:蘭嶼介紹 人文風景交通連結資訊

4.主要對象(分析): 所有觀光客

5.網頁架構圖(樹狀圖): http://imgur.com/a/F7nJy

6.網頁版型設計圖 :http://imgur.com/a/CSdcS

7.色彩規劃:藍色調

8.歷屆得獎分析(至少三組) :
1.台灣字崛>>http://www.words.tw/
整體走清新復古感,善用文字筆畫與顏色對比打造出別如其他風格的網站,是一組非常喜歡的組合風格

2.夜色台北 - http://www.taiwanonly.tw/index.html
看見介紹還以為是紅燈區,點進去缺非現截然不同,講的是各個時間的台灣人通常在做些甚麼覺得很有趣~~~~

3.古早味鹹酸甜 - http://retrospective.idv.tw/
整體的風格顯現出了台灣特色零食這讓台灣人覺得回味,而板曼也善用這些小物達到一個童趣的效果。
9.組員名單(學號)1045445177郭智綺

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

2.網站主題:艋舺龍山寺

3.內容大綱:龍山寺的介紹

4.主要對象(分析): 大眾(能更了解龍山寺的文化)
5.網頁架構圖(樹狀圖):http://imgur.com/a/ZsyXN

6.網頁版型設計圖: http://www.templatemo.com/tm-486-new-event

7.色彩規劃:
主要以黑灰為主,介紹關於龍山寺
8.歷屆得獎分析(至少三組)

(1)Slang Formosa(醋咪ㄟ流行語):http://www.slangmosa.tw/
整體畫面還蠻乾淨的,而且內容非常有趣,都是年輕人會使用
的流行用語,還有一些很可愛的互動設計。

(2)歲月十分:http://timeline.tw/
內容非常的豐富,設計上是以插畫的風格為主,視覺上感覺很有
趣,全部看完之後給人一種歲約如縮的感覺。

(3)台灣字崛:http://www.words.tw/
配色相當的簡單舒服給人一種文青的感覺,畫面中穿插一些插圖
增添些許趣味感

9.組員:黃森宜 1045445186 蔡薰緯1045445054 徐楚翔1025445159

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

2.網站主題:台灣著名景點介紹

3.內容大綱:台灣景點的介紹

4.主要對象(分析): 大眾(想了解台灣著名景點的人)
5.網頁架構圖(樹狀圖):
http://imgur.com/a/odusP
6.網頁版型設計圖:
http://imgur.com/xo3Xq8U
7.色彩規劃:
以白底帶給人一種簡潔明亮的感覺,再帶入花的底圖也不會太花俏
8.歷屆得獎分析(至少三組)

(1)台灣字崛:http://www.words.tw/history.html
想不到研究字也可以變成一個網站
而且項目還可以分得這麼細
自行製作的小圖也很用心
(2)夜色台北:http://www.taiwanonly.tw/6pm.html#
這個網頁有趣的地方不在於複雜精美的排版
而是整個用影片呈現再加上另外的文字敘述
最後還有台灣的宵夜文化及獨特的便利商店24小時現象

(3)大山北月:http://www.bighillnorthmoon.tw/cafe/
整個讓人非常有童趣的感覺
手繪的風格可愛
每張照片再按進去還有文字說明及小插圖很用心

9.組員:黃品涵 1045445018

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

2.網站主題:桃園市中壢區
3.內容描述: 介紹中壢
4.風格設計: 穩重不一樣的中壢
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果):
6.個人製作心得: 中壢不像大家認識的一樣無聊


企劃大綱

1.網站主題:桃園市中壢區
2.網站架構(導覽列名稱與檔名)
3.內容大綱: 名產.關於.美食.景點.交通
4.主要對象(分析):不認識中壢的人
5.網頁架構圖(樹狀圖):
6.網頁版型設計圖wireframe
7.色彩規劃:
8.歷屆得獎分析(至少三組)

1.作業網址:http://mepopedia.com/~css105-2c/final/final-1055999320
2.網站主題: 新竹十七公里海岸線
3.內容描述: 主要介紹了新竹十七公里海岸線有哪些風景,租自行車的電話,地理位置......
4.風格設計:簡約
5.組員名單,工作分配(視覺規劃、HTML CSS設計、動態效果): 廬姍娜 1055999320,全部工作
6.個人製作心得: 曉jin老師,最後一堂課我沒法去上啦!!因為我馬上就要回大陸去了,所以我得趕緊在回去前環個島!!你會原諒我的對吧!我有把期末作業做完哦.......拜託千萬不要把我當掉~~
啊然後沒想到居然能交的出期末作業!!雖然做的時候真的有點頭疼!不過不過,回大陸之後還是可以和我的同學們炫耀我學過網頁設計了哈哈哈~

1.作業網址:http://mepopedia.com/~css105-2c/final/final-1045445144
2.網站主題:台灣本土劇
3.內容描述:介紹台灣本土劇
4.風格設計:簡約風格,白色為底用圖片增加豐富性
5.組員名單:1045445144黃湘涵
6.個人製作心得:
一邊做一邊看了好多本土劇,做一做自己都想笑,第一頁是用本土劇的梗圖做成的,笑了好久,雖然過程遇到了很多困難,但是的很開心!!!


1.網站主題: 台灣本土劇

2.內容大綱: 本土劇的起源,常播本土劇的電視台、常出現的演員

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

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




5.網頁版型設計圖
版型參考: https://html5up.net/uploads/demos/big-picture/

6.色彩規劃:簡約的風格搭配許多圖來豐富畫面。底色以白色為主。


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

1.大山北月- http://www.bighillnorthmoon.tw/cafe/
他的一些細節方面我覺得很好看,還有加上他自己的插畫配音樂,整個感覺很舒服。

2.夜色台北 - http://www.taiwanonly.tw/index.html
很喜歡這種用影片呈現網頁的感覺,很少見,彷彿讓人也很貼近生活的感覺。

3. HiIsland 純淨之島-http://www.hiisland.idv.tw/#
我覺得他的風格非常可鰻吸引人的,裡面的圖都很精巧有趣,但是標誌不太明顯,可能看的人會不知道哪裡有標誌。


8.組員名單(學號) 104544144黃湘涵

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

2.網站主題:為你而在
3.內容描述:電影介紹及十份景點美食介紹
4.風格設計: 簡單舒服
5.組員名單:1045445075、1045445153、1045445201
6.個人製作心得:好多東西眼睛很花,花了好多時間。

企劃大綱
1.網站主題:為你而在 Time.Waiting.For you
2.網站架構(導覽列名稱與檔名):
主頁 bocor-index.html
分頁面 1.hw07-1045445075-index.html
2.十分寮導覽列-hw07-1045445075-index.html

3.內容大綱:為你而在電影介紹、拍攝十份景點、介紹。位置、交通、地圖等。
4.主要對象(分析):想來十份與看過此微電影想到此一遊的人。
5.網頁架構圖(樹狀圖)
6.網頁版型設計圖
7.色彩規劃:清新大地綠色調
8.歷屆得獎分析(至少三組) :
1.夜色台北 - http://www.taiwanonly.tw/index.html
一點進去真的帶出台北夜晚的感覺,很特別。

2.和風北投 • 行腳踏查 - http://imagetaiwan.net.tw/#
以圖片呈現網站主題,採用全版面。 瞭解北投文化歷史,景點,和故事,清楚明瞭的介紹,網頁的形式更讓人了解北投了

3.低碳好好行 7 投日月潭 :http://itwgreentour.com.tw/
風格是方便大眾閱覽的型態,很多趣味的小圖示,和可愛風格的吉祥物讓人在觀看時能心情愉快。



Edited 2 time(s). Last edit at 06/22/2017 12:08PM by 1045445075.
(編輯記錄)

1.作業網址:file:///C:/Users/user/Desktop/final-1045445120/index.html
2.網站主題: 高雄旅遊指南
3.內容描述: 高雄景點遊樂 美食 住宿推薦
4.風格設計: 簡約
5.組員名單:1045445120
6.個人製作心得:花了很多時間才做完

企劃大綱
1.網站主題:高雄旅遊指南
2.網站架構(導覽列名稱與檔名):
首頁(index.html)
介紹(about.html)
景點美食(blog.html)
3.內容大綱:高雄景點、美食介紹。住宿、行程、好康等介紹。
4.主要對象(分析): 想來高雄遊玩的人
5.網頁架構圖(樹狀圖)
6.網頁版型設計圖
7.色彩規劃:白、灰簡單的色調

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

2.網站主題: 花蓮

3.內容描述: 介紹花蓮的景點與美食

4.風格設計: 風格簡潔明瞭,以綠色為主

5.組員名單:1045445129黃靖家

---------------------------------------------------------------------------------

6.個人製作心得:這次的期末真的好難,摸索很久

企劃大綱

1.網站主題: 花蓮

2.網站架構(導覽列名稱與檔名)
花蓮、景點、地圖、美食、聯絡我們

3.內容大綱: 介紹花蓮的景點與美食,花蓮是個很美的地方,希望大家都能看到

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

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

6.網頁版型設計圖

7.色彩規劃:以黑灰白三色做為主色調,因為照片多以綠藍為主,不想顯得很複雜

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

2.網站主題: 新竹x巷弄x甜點店
3.內容描述: 用個人畫的小插圖-解剖兔帶大家一探新竹巷弄內隱藏的美味甜點
4.風格設計: 簡約的鵝蛋黃色~讓人有優閒暖陽的感覺
5.個人製作心得: 網頁設計真的好難,雖然自己完成到這個程度覺得比不上其他人,但已經盡力了ˊˋ
謝謝過程中一職指導我的同學和老師,讓我沒有放棄QQ

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

1.網站主題: 大稻埕
2.內容大綱: 介紹大稻埕的歷史跟特色、周邊商圈。
3.主要對象(分析):想了解大稻埕或對大稻埕的歷史有興趣的人
4.網頁架構圖(樹狀圖):
5.網頁版型設計圖
6.色彩規劃: 黑、白、灰、大地色系、橘褐色調。
風格設計: 懷舊感中帶有現代感
7.歷屆得獎分析(至少三組)
台北捷運一日遊:
http://love3f.kyjhome.com/theme.html
主題清楚,版面乾淨,小細節有許多小巧思

大山北月:
http://www.bighillnorthmoon.tw/cafe/
很有設計者自己的風格,用色有童趣感,將整個網站的氣憤營造的可愛又溫馨,沒有現在許多網站自以為豐富但其實會讓人眼花撩亂的設計。

悠遊台灣澎湖之美
http://www.yoyotaiwan.tw/
網站資源豐富,排版設計清楚明瞭且有設計感,配色有時尚感,icon設計也很有趣。


8.組員名單(學號) :1045445138

個人製作心得:從一開始完全看不懂語法到現在可以自己改出一個網站(雖然大部分是用舊有版型改的),這一年學網頁設計算是痛苦中又帶有很大的收穫,讓自己又多學了一項技能。