Re: [ 作業06] jQuery動態換頁效果

週三, 五月 3. 2017

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

(2)製作心得:搞導覽列的圖片搞很久,雖然中途有點想放棄,因為一直做錯重來,結束之後成就感蠻高的,希望可以學到更多關於這種的,我很喜歡(:D 謝謝老師;)

Re: [作業05] jQuery動態網頁初探-fadein

週三, 五月 3. 2017

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445195
(2)製作心得: 我只在第一頁上加了效果,覺得還挺簡單的。

Re: [ 作業06] jQuery動態換頁效果

週三, 五月 3. 2017

(1)作業網址:http://mepopedia.com/~css105-2c/hw06/hw06-1045445102

(2)製作心得:動態的效果非常好玩,我很喜歡

Re: [作業04]網頁排版設計 -以Photoshop製作Mockup與Prototype

週三, 五月 3. 2017

1.須修改網站 : http://www.kfcclub.com.tw/
修改地方:
左側導覽列下面太空
2.優良網站名稱及網址:http://www.pizzahut.com.tw/
導覽列很清楚
顏色讓人看了很有食慾

Re: [ 作業06] jQuery動態換頁效果

週三, 五月 3. 2017

(1)作業網址:http://mepopedia.com/~css105-2c/hw06/hw06-1045445045

(2)製作心得:很開心學到新的網頁效果

Re: [ 作業06] jQuery動態換頁效果

週三, 五月 3. 2017

(1)作業網址:http://mepopedia.com/~css105-2c/hw06/hw06-1045445015
(2)製作心得: 學了新的網頁設計 讓網頁也更加活潑生動有趣了~~!

Re: [ 作業06] jQuery動態換頁效果

週三, 五月 3. 2017

(1)作業網址:http://mepopedia.com/~css105-2b/hw06/hw06-1045445062

(2)製作心得:肚子好餓~X(

Re: [ 作業06] jQuery動態換頁效果

週三, 五月 3. 2017

(1)作業網址:http://mepopedia.com/~css105-2c/hw06/hw06-1045445069
(2)製作心得: 學會了jQuery動態換頁效果讓我的網頁變有趣了~ 滑起來

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

週三, 五月 3. 2017

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

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

Re: [ 作業06] jQuery動態換頁效果

週三, 五月 3. 2017

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

(2)製作心得:動態的效果非常有趣,也讓網頁整體的感覺多了互動感.
^_^

演講題目:指數科技,奇點未來

週三, 五月 3. 2017

週末Let's go!分享大師視野 106年度春季-人工智慧

時間:106/05/05(五)14:00~16:00 **13:30開放入場**

演講者:國立臺北科技學互動設計系 葛如鈞教授

演講題目:指數科技,奇點未來

地點:國立自然科學博物館 生命科學廳B1多用途劇場

**目前線上報名尚未額滿,歡迎來電或來信報名或請於活動當天直接到現場報名**
報名方式:
1. 電話報名:04-23226940分機519 鄭小姐,時間:週一至週五 09:00~17:00,活動當天請直接到現場報名。
2. 電子信箱報名:masterview2012@gmail.com,請檢附姓名、聯絡方式及報名場次,並收到回覆才算報名成功。

**提供以下直播服務,收看現場演講實況**
臉書粉絲專頁直播 https://goo.gl/pKtXx7 (請點選直撥中影片)
YouTube直播 https://goo.gl/8QoSfT (請點選直撥中影片)
直播網站平臺 http://ppt.cc/LmJQs

若有任何問題,也請不吝與我聯繫,謝謝。

助理 鄭琼馨 敬上 館內分機519
週末Let's go!分享大師視野

Re: [作業04]網頁排版設計 -以Photoshop製作Mockup與Prototype

週三, 五月 3. 2017

需修改網站:http://www.ukiyoeproject.com/
色彩計畫需要好好調整一番啊,上面一排感覺太繽紛不適合
圖片像跑馬燈一樣一直跑讓人很躁鬱呢,還是只有我是這樣
下方資訊及外部連結稍嫌擁擠

優良網站名稱及網址:http://tf-corp.co.jp/hiiki
操作及效果都很流暢
資訊清楚
看完真的餓
很餓

Re: [作業05] jQuery動態網頁初探-fadein

週三, 五月 3. 2017

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445141
(2)製作心得:還不賴r

Re: [ 作業06] jQuery動態換頁效果

週三, 五月 3. 2017

(1)作業網址:http://mepopedia.com/~css105-2b/hw06/hw06-1045445095

(2)製作心得:覺得這特效蠻好玩的,但想再加一頁發現不知道怎麼加~~~

Re: [作業05] jQuery動態網頁初探 -fadein

週三, 五月 3. 2017

(1)作業網址:http://mepopedia.com/~css105-2b/midterm/midterm-1045445092

(2)製作心得: 第一次將 jQuery動態用在作業中覺得很新鮮也很有趣~

學號:1045445092