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

Advanced

Change History

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

Changed By: 松本.豪
Change Date: June 21, 2017 10:32PM

Re: [期末作業]專題網站設計
● 作業網址:
大溪-街角遇見博物館-公有館:http://mepopedia.com/~css105-2c/final/final-1045445117
大溪-街角遇見博物館-街角館:http://mepopedia.com/~css105-2c/final/final-1045445189

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

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

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

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

● 大溪-街角遇見博物館-公有館網頁架構圖
<img width="80%" src="http://i.imgur.com/EC5iczZ.jpg" border="0">

● 大溪-街角遇見博物館-街角館網頁架構圖
<img width="80%" src="http://i.imgur.com/layoK9P.jpg" border="0">

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也需要找尋一段時間,這也是在製作過程中的樂趣,色彩配置需要多次嘗
試,能逐漸掌握自己想呈現的氛圍,也藉由這次期末作業的發表,讓大家了解大溪除了有名的和平路老
街,也有曾經為大溪仕紳居住的生活圈-靜謐的新南老街,也是遊客較少行訪的歷史街道,以及由日治時
期所建造的普濟路旁分佈的建築群,在歷史的洗禮下,大溪正不斷的寫出新故事,有著許多值得我們探
訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,在歷史的足跡中描繪未來,話說與育如合
作,在製作過程中也是一件有趣的事,她是很有想法的女生,能夠把自己的小清新風格帶入任何地方,
身為大溪人的她,和她合作也很有意義,我是一個喜愛大溪的中壢人,她則是一個有個人風格的大溪人
彼此都在更加瞭解大溪美好的事物,感謝和她共同完成我們的期末發表,也感謝老師這一年來的教導,
網頁設計如同大海般千變萬化,我想,加以摸索必能感受這其中的樂趣,感謝本次製作過程中大家的建
議與修正,合作愉快。


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

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

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如
Changed By: 松本.豪
Change Date: June 21, 2017 10:29PM

Re: [期末作業]專題網站設計
● 作業網址:
大溪-街角遇見博物館-公有館:http://mepopedia.com/~css105-2c/final/final-1045445117
大溪-街角遇見博物館-街角館:http://mepopedia.com/~css105-2c/final/final-1045445189

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

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

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

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

● 大溪-街角遇見博物館-公有館網頁架構圖
<img width="80%" src="http://i.imgur.com/EC5iczZ.jpg" border="0">

● 大溪-街角遇見博物館-街角館網頁架構圖
<img width="80%" src="http://i.imgur.com/layoK9P.jpg" border="0">

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

育如:

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


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

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


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

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

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如
Changed By: 松本.豪
Change Date: June 21, 2017 10:22PM

Re: [期末作業]專題網站設計
● 作業網址:
大溪-街角遇見博物館-公有館:http://mepopedia.com/~css105-2c/final/final-1045445117
大溪-街角遇見博物館-街角館:http://mepopedia.com/~css105-2c/final/final-1045445189

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

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

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

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

● 大溪-街角遇見博物館-公有館網頁架構圖
<img width="80%" src="http://i.imgur.com/EC5iczZ.jpg" border="0">

● 大溪-街角遇見博物館-街角館網頁架構圖
<img width="80%" src="http://i.imgur.com/layoK9P.jpg" border="0">

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

育如:

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


9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如
身為大溪人的她,和她合作也很有意義,我是一個喜愛大溪的中壢人,她則是一個有個人風格的大溪人
彼此都在更加瞭解大溪美好的事物,感謝和她共同完成我們的期末發表,也感謝老師這一年來的教導,
網頁設計如同大海般千變萬化,我想,加以摸索必能感受這其中的樂趣,感謝這製作過程中大家的建議
與修正,合作愉快。


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

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


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

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

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如
Changed By: 松本.豪
Change Date: June 21, 2017 10:14PM

Re: [期末作業]專題網站設計
● 作業網址:
大溪-街角遇見博物館-公有館:http://mepopedia.com/~css105-2c/final/final-1045445117
大溪-街角遇見博物館-街角館:http://mepopedia.com/~css105-2c/final/final-1045445189

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

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

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

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

● 大溪-街角遇見博物館-公有館網頁架構圖
<img width="80%" src="http://i.imgur.com/EC5iczZ.jpg" border="0">

● 大溪-街角遇見博物館-街角館網頁架構圖
<img width="80%" src="http://i.imgur.com/layoK9P.jpg" border="0">

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

育如:

志豪:很快的,我們即將為二年級畫下一個句點,在這一年中,網頁設計課程是課程中持續性高的課程
從最初的音樂歌詞美化版面,到現在的網頁製作,能夠在練習中看見自己對於網頁課程的熟悉度及設計
思維的改變,本次的期末作業就是我們對於這堂課的成果發表,從找尋資料、現場拍照,到實際製作,
我們有了第一次完整的網頁原創性作品,雖然是改造已寫好的版型,並沒有想像中容易,除了整體的協
調性,須修改一個文字的CSS也需要找尋一段時間,這也是在製作過程中的樂趣,色彩配置需要多次嘗
試,能逐漸掌握自己想呈現的氛圍,也藉由這次期末作業的發表,讓大家了解大溪除了有名的和平路老
街,也有曾經為大溪仕紳居住的生活圈-靜謐的新南老街,也是遊客較少行訪的歷史街道,以及由日治時
期所建造的普濟路旁分佈的建築群,在歷史的洗禮下,大溪正不斷的寫出新故事,有著許多值得我們探
訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如
訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,在歷史的足跡中描繪未來,話說與育如合
作,在製作過程中也是一件有趣的事,她是很有想法的女生,能夠把自己的小清新風格帶入任何地方,


9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如身為大溪人的她,和她合作也很有意義,我是一個喜愛大溪的中壢人,她則是一個有個人風格的大溪人
彼此都在更加瞭解大溪美好的事物,感謝和她共同完成我們的期末發表,也感謝老師這一年來的教導,
網頁設計如同大海般千變萬化,我想,加以摸索必能感受這其中的樂趣,感謝這製作過程中大家的建議
與修正,合作愉快。


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

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


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

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

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如
Changed By: 松本.豪
Change Date: June 21, 2017 10:10PM

Re: [期末作業]專題網站設計
作業網址:
-公有館:http://mepopedia.com/~css105-2c/final/final-1045445117
大溪-街角遇見博物館-街角館:http://mepopedia.com/~css105-2c/final/final-1045445189
5-2c/final/final-1045445189

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

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

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

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

● 大溪-街角遇見博物館-公有館網頁架構圖
<img width="80%" src="http://i.imgur.com/EC5iczZ.jpg" border="0">

● 大溪-街角遇見博物館-街角館網頁架構圖
<img width="80%" src="http://i.imgur.com/layoK9P.jpg" border="0">

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

育如:

志豪:很快的,我們即將為二年級畫下一個句點,在這一年中,網頁設計課程是課程中持續性高的課程
從最初的音樂歌詞美化版面,到現在的網頁製作,能夠在練習中看見自己對於網頁課程的熟悉度及設計
思維的改變,本次的期末作業就是我們對於這堂課的成果發表,從找尋資料、現場拍照,到實際製作,
我們有了第一次完整的網頁原創性作品,雖然是改造已寫好的版型,並沒有想像中容易,除了整體的協
調性,

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如
調性,須修改一個文字的CSS也需要找尋一段時間,這也是在製作過程中的樂趣,色彩配置需要多次嘗
試,能逐漸掌握自己想呈現的氛圍,也藉由這次期末作業的發表,讓大家了解大溪除了有名的和平路老
街,也有曾經為大溪仕紳居住的生活圈-靜謐的新南老街,也是遊客較少行訪的歷史街道,以及由日治時
期所建造的普濟路旁分佈的建築群,在歷史的洗禮下,大溪正不斷的寫出新故事,有著許多值得我們探
訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,在歷史的足跡中描繪未來,話說與育如合
作,在製作過程中也是一件有趣的事,她是很有想法的女生,能夠把自己的小清新風格帶入任何地方,


9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如身為大溪人的她,和她合作也很有意義,我是一個喜愛大溪的中壢人,她則是一個有個人風格的大溪人
彼此都在更加瞭解大溪美好的事物,感謝和她共同完成我們的期末發表,也感謝老師這一年來的教導,
網頁設計如同大海般千變萬化,我想,加以摸索必能感受這其中的樂趣,感謝這製作過程中大家的建議
與修正,合作愉快。


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

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


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

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

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如
Changed By: 松本.豪
Change Date: June 21, 2017 09:58PM

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

-2c/final/final-1045445189

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

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

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

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

● 大溪-街角遇見博物館-公有館網頁架構圖
<img width="80%" src="http://i.imgur.com/EC5iczZ.jpg" border="0">

● 大溪-街角遇見博物館-街角館網頁架構圖
<img width="80%" src="http://i.imgur.com/layoK9P.jpg" border="0">

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.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如
的級數挺大,顏色分明豐富,可營造童趣感,也方便閱讀。

8.個人製作心得:

育如:

志豪:很快的,我們即將為二年級畫下一個句點,在這一年中,網頁設計課程是課程中持續性高的課程
從最初的音樂歌詞美化版面,到現在的網頁製作,能夠在練習中看見自己對於網頁課程的熟悉度及設計
思維的改變,本次的期末作業就是我們對於這堂課的成果發表,從找尋資料、現場拍照,到實際製作,
我們有了第一次完整的網頁原創性作品,雖然是改造已寫好的版型,並沒有想像中容易,除了整體的協
調性,

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如調性,須修改一個文字的CSS也需要找尋一段時間,這也是在製作過程中的樂趣,色彩配置需要多次嘗
試,能逐漸掌握自己想呈現的氛圍,也藉由這次期末作業的發表,讓大家了解大溪除了有名的和平路老
街,也有曾經為大溪仕紳居住的生活圈-靜謐的新南老街,也是遊客較少行訪的歷史街道,以及由日治時
期所建造的普濟路旁分佈的建築群,在歷史的洗禮下,大溪正不斷的寫出新故事,有著許多值得我們探
訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,在歷史的足跡中描繪未來,話說與育如合
作,在製作過程中也是一件有趣的事,她是很有想法的女生,能夠把自己的小清新風格帶入任何地方,


9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如身為大溪人的她,和她合作也很有意義,我是一個喜愛大溪的中壢人,她則是一個有個人風格的大溪人
彼此都在更加瞭解大溪美好的事物,感謝和她共同完成我們的期末發表,也感謝老師這一年來的教導,
網頁設計如同大海般千變萬化,我想,加以摸索必能感受這其中的樂趣,感謝這製作過程中大家的建議
與修正,合作愉快。


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

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


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

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

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如
Changed By: 松本.豪
Change Date: June 21, 2017 09:47PM

Re: [期末作業]專題網站設計
-2c/final/final-1045445189

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

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

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

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

● 大溪-街角遇見博物館-公有館網頁架構圖
<img width="80%" src="http://i.imgur.com/EC5iczZ.jpg" border="0">

● 大溪-街角遇見博物館-街角館網頁架構圖
<img width="80%" src="http://i.imgur.com/layoK9P.jpg" border="0">

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.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如的級數挺大,顏色分明豐富,可營造童趣感,也方便閱讀。

8.個人製作心得:

育如:

志豪:很快的,我們即將為二年級畫下一個句點,在這一年中,網頁設計課程是課程中持續性高的課程
從最初的音樂歌詞美化版面,到現在的網頁製作,能夠在練習中看見自己對於網頁課程的熟悉度及設計
思維的改變,本次的期末作業就是我們對於這堂課的成果發表,從找尋資料、現場拍照,到實際製作,
我們有了第一次完整的網頁原創性作品,雖然是改造已寫好的版型,並沒有想像中容易,除了整體的協
調性,

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如調性,須修改一個文字的CSS也需要找尋一段時間,這也是在製作過程中的樂趣,色彩配置需要多次嘗
試,能逐漸掌握自己想呈現的氛圍,也藉由這次期末作業的發表,讓大家了解大溪除了有名的和平路老
街,也有曾經為大溪仕紳居住的生活圈-靜謐的新南老街,也是遊客較少行訪的歷史街道,以及由日治時
期所建造的普濟路旁分佈的建築群,在歷史的洗禮下,大溪正不斷的寫出新故事,有著許多值得我們探
訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,在歷史的足跡中描繪未來,話說與育如合
作,在製作過程中也是一件有趣的事,她是很有想法的女生,能夠把自己的小清新風格帶入任何地方,


9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如身為大溪人的她,和她合作也很有意義,我是一個喜愛大溪的中壢人,她則是一個有個人風格的大溪人
彼此都在更加瞭解大溪美好的事物,感謝和她共同完成我們的期末發表,也感謝老師這一年來的教導,
網頁設計如同大海般千變萬化,我想,加以摸索必能感受這其中的樂趣,感謝這製作過程中大家的建議
與修正,合作愉快。


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

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


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

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

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如
Changed By: 松本.豪
Change Date: June 21, 2017 09:37PM

Re: [期末作業]專題網站設計
-2c/final/final-1045445189

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

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

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

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

● 大溪-街角遇見博物館-公有館網頁架構圖
<img width="80%" src="http://i.imgur.com/EC5iczZ.jpg" border="0">

● 大溪-街角遇見博物館-街角館網頁架構圖
<img width="80%" src="http://i.imgur.com/layoK9P.jpg" border="0">

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.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如的級數挺大,顏色分明豐富,可營造童趣感,也方便閱讀。

8.個人製作心得:

育如:

志豪:很快的,我們即將為二年級畫下一個句點,在這一年中,網頁設計課程是課程中持續性高的課程
從最初的音樂歌詞美化版面,到現在的網頁製作,能夠在練習中看見自己對於網頁課程的熟悉度及設計
思維的改變,本次的期末作業就是我們對於這堂課的成果發表,從找尋資料、現場拍照,到實際製作,
我們有了第一次完整的網頁原創性作品,雖然是改造已寫好的版型,並沒有想像中容易,除了整體的協
調性,

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如調性,須修改一個文字的CSS也需要找尋一段時間,這也是在製作過程中的樂趣,色彩配置需要多次嘗
試,能逐漸掌握自己想呈現的氛圍,也藉由這次期末作業的發表,讓大家了解大溪除了有名的和平路老
街,也有曾經為大溪仕紳居住的生活圈-靜謐的新南老街,也是遊客較少行訪的歷史街道,以及由日治時
期所建造的普濟路旁分佈的建築群,在歷史的洗禮下,大溪正不斷的寫出新故事,有著許多值得我們探
訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,在歷史的足跡中描繪未來,話說與育如合
作,在製作過程中也是一件有趣的事,她是很有想法的女生,能夠把自己的小清新風格帶入任何地方,


9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如身為大溪人的她,和她合作也很有意義,我是一個喜愛大溪的中壢人,她則是一個有個人風格的大溪人
彼此都在更加瞭解大溪美好的事物,感謝和她共同完成我們的期末發表,也感謝老師這一年來的教導,
網頁設計如同大海般千變萬化,我想,加以摸索必能感受這其中的樂趣,感謝這製作過程中大家的建議
與修正,合作愉快。


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

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


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

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

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如
Changed By: 松本.豪
Change Date: June 21, 2017 09:32PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: June 12, 2017 10:10PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 25, 2017 11:20PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 25, 2017 11:19PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 25, 2017 11:17PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 25, 2017 11:12PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 04, 2017 02:48PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 04, 2017 02:31PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 04, 2017 09:11AM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 03, 2017 11:07PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 03, 2017 11:07PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 03, 2017 11:06PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 03, 2017 11:04PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 03, 2017 08:35PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 03, 2017 08:23PM

Re: [期末作業]專題網站設計
Changed By: 松本.豪
Change Date: May 03, 2017 08:22PM

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

Original Message

作者: 松本.豪
Date: May 03, 2017 08:12PM

Re: [期末作業]專題網站設計
-2c/final/final-1045445189

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

2.內容大綱:網站呈現大溪記憶,木藝溪悠久的發展歷史,孕育了古街、古蹟,道中的博及生活在大溪的人們的生活文化,也將探尋
館,回首大
溪悠久的發展歷史,孕育了古街、古蹟,傳統技藝及生活在大溪的人們的生活文化,也將探尋這百年
小鎮的歷史故事,街角館所● 暫定內容:大溪街角館5.網頁版型設計圖

6.色彩規劃:

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

8.組員名單: 吳志豪 1045445117、劉育如 1045445189行腳地圖、各個街角館展出其特色及樣貌、相關藝文活動及展覽資訊、在地
傳統技藝與現代的融合。
展出的除了當地的生活民情,也將大溪的文化得以傳承延續。
● 主題內容:大溪街角館文話故事、各個街角館展出其特色及樣貌、相關藝文活動及大5.網頁版型設計圖:
5.網頁版型設計圖:大溪7.歷屆得獎分析(至少三組)

8.組員名單: 吳志豪 1045445117、劉育如 1045445189-街角遇見博物館將分食尚大學:http://www.foosion.tw/

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

8.組員名單: 吳志豪 1045445117、劉育如 成兩個主題,
溪-街角遇見博物館-街角館網頁架構圖
●大溪-街角遇見博物館-公有館網頁架構圖
美食大項,搭配簡潔插畫,內容清楚也呼應整體版面簡潔性。
●點擊各個學院皆有相映主圖,並帶著視線而下,條列該品項系別,清楚了解台灣代表性美食。

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

8.組員名單: 吳志豪 1045445117、劉育如 1045445189可嘗試不同版面。
●大溪-街角遇見博物館-公有館參考網址:
●大溪-街角遇見博物館-街角館參考網址:
dth="80%" src="http://i.imgur.com/EC5iczZ.jpg" border="0">

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


5.網頁版型設計圖:大溪-街角遇見博物館將分成兩個主題,分別為公有館及街角館兩部分,內容將一
同蒐集,兩個主題使用不同版型,藉此可嘗試不同版面。
●大溪-街角遇見博物館-公有館參考版型網址風格屬於可愛大眾型態,也有很多小圖示,增加趣味性,字形也比較粗、圓;配色比較鮮豔、底圖也有
小小的幾何圖形(但是不明顯)。
●點擊地點有詳細的交通資訊及地圖,這裡的資訊是黑字、看起來有點不符合原本的風格;寄送卡片的選項跟
瀏覽網頁的民眾有所互動,是很有趣的,而且步驟透過網頁指引的非常簡單。

8.組員名單: 吳志豪 1045445117、劉育如 1045445189●點擊地點有詳細的交通資訊及地圖,這裡的資訊是黑字、看起來有點不符合原本的風格; 寄送卡片的
選項跟瀏覽網頁的民眾有所互動,是很有趣的,而且步驟透過網頁指引的非常簡單。

8.組員名單: 吳志豪 1045445117、劉育如 1045445189:http://www.tooplate.com/live/2078-adventure
●大溪-街角遇見博物館-街角館參考版型網址:http://www.tooplate.com/live/2077-modern-town

6.色彩規劃:
溪故事得已留傳。

4.網頁架構圖(樹狀圖):
8.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館網頁架構圖


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


5.網頁版型設計圖:大溪-街角遇見博物館將分成兩個主題,分別為公有館及街角館兩部分,內容將一
同蒐集,兩個主題使用不同版型,藉此可嘗試不同版面。
● 大溪-街角遇見博物館-公有館參考版型網址:http://www.tooplate.com/l●內容分為:活動方法、景點介紹(又有細分自行車環湖、祈福許願等行程)、自己製作明信片、 領獎
勵等。
●風格屬於可愛大眾型態,也有很多小圖示,增加趣味性,字形也比較粗、圓;配色比較鮮豔、 底圖也
有小小的幾何圖形(但是不明顯)。
●點擊地點有詳細的交通資訊及地圖,這裡的資訊是黑字、看起來有點不ive/2078-adventure
● 大溪-街角遇見博物館-街角館參考版型網址:http://www.tooplate.com/live/2077-modern-town

6.色彩規劃:

大溪-街角遇見博物館-公有館: 整體和所留下的足跡,因此整體色調打造懷舊風格,暖色調氛圍
街角館氛圍較不相同,公有館展現的是流年下的紀念品,時光
所留下的足跡,因此整體色調打造懷舊風格,暖色調氛圍的相片,彷彿述說著當年的光采,色調如下
白-主色,呈現簡潔風格,與棕色搭配,如同黑瓦白牆,彼此襯托
棕色-營造歷史氛圍,與建築色調調和
橘色-點綴用色
文字則為棕灰色,較為清楚並與標題色呼應,整體如午後陽光灑落,溫暖●精神欄位使用箭頭引導,可變換圖片,觀看生態館主題精神,外框採用手繪樹幹,手繪風格營造童趣。
● 印象的欄位使用內拉式圖片排列,整體版面固定,只有內裡圖片下拉,效果甚好,點擊相片可見大圖
及圖片故事敘述,生動有趣。
●字的級數挺大,顏色分明豐富,可營造童趣感,也方便閱讀。

8.組員名單: 情調,時 1045445117、鎮中留 1045445189下屬於在地的印記。

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

7.歷屆得獎分析:

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

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

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

8.個人製作心得:

育如:

志豪:很快的,我們即將為二年級畫下一個句點,在這一年中,網頁設計課程是課程中持續性高的課程
從最初的音樂歌詞美化版面,到現在的網頁製作,能夠在練習中看見自己對於網頁課程的熟悉度及設計
思維的改變,本次的期末作業就是我們對於這堂課的成果發表,從找尋資料、現場拍照,到實際製作,
我們有了第一次完整的網頁原創性作品,雖然是改造已寫好的版型,並沒有想像中容易,除了整體的協
調性,

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如調性,須修改一個文字的CSS也需要找尋一段時間,這也是在製作過程中的樂趣,色彩配置需要多次嘗
試,能逐漸掌握自己想呈現的氛圍,也藉由這次期末作業的發表,讓大家了解大溪除了有名的和平路老
街,也有曾經為大溪仕紳居住的生活圈-靜謐的新南老街,也是遊客較少行訪的歷史街道,以及由日治時
期所建造的普濟路旁分佈的建築群,在歷史的洗禮下,大溪正不斷的寫出新故事,有著許多值得我們探
訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,

9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如訪的文化街道與故事,推展大溪近百年來的發展與文化脈絡,在歷史的足跡中描繪未來,話說與育如合
作,在製作過程中也是一件有趣的事,她是很有想法的女生,能夠把自己的小清新風格帶入任何地方,


9.組員名單: 吳志豪 1045445117、劉育如 1045445189
● 大溪-街角遇見博物館-公有館-吳志豪
● 大溪-街角遇見博物館-街角館-劉育如身為大溪人的她,和她合作也很有意義,我是一個喜愛大溪的中壢人,她則是一個有個人風格的大溪人
彼此都在更加瞭解大溪美好的事物,感謝和她共同完成我們的期末發表,也感謝老師這一年來的教導,
網頁設計如同大海般千變萬化,我想,加以摸索必能感受這其中的樂趣,感謝這製作過程中大家的建議
與修正,合作愉快。


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

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


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

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

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