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

Advanced

[期中作業] HTML與CSS應用--網站實作

[期中作業] HTML與CSS應用--網站實作

1. 期中作業說明


請參考期中前之講義製作

須具備
1.以課堂練習架構修改為一全新內容的網站。
2.每個連結都要有內容(導覽頁不可直接外連網站)
3.注意配色、設計質感、排版、字體、行間、字體大小等細節,設一一具有設計質感的網站。
4.需有CSS3的效果(圓角,陰影,漸層,透明度等),但不可過於誇張。



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

並請回覆:

(1)作業網址:
(2)網站主題:
(3)導覽列選項/分類項目(對應檔名):
(2)設計對象:
(3)色彩計畫:
(4)風格設定、預期成效:
(5)製作心得:




請於期中考週完成繳交,準時繳交作業,逾期不後。





Edited 1 time(s). Last edit at 03/27/2017 08:32PM by JinJin.
(編輯記錄)

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

(2)網站主題:Ελληνική Δημοκρατία

(3)導覽列選項/分類項目:

●Introduction:為首頁,主要說明希臘簡介,包含地理位置、簡述、其它頁面連結等

●history:主要介紹希臘歷史發展簡述,及旅遊景點相關網站(維基百科、官方網站)。

●tourism:希臘旅遊景點概述,當然,這些景點不能完全代表希臘的風景或當地生活
民情,而是較富盛名、耳熟能詳的必去景點之一。

●story:希臘神話故事人物,連結希臘神話相關網站。

●Video:希臘相關視頻,如旅遊指南,聖托里尼島風光、米洛斯島、 拉格尼西海灘,
雅典衛城等旅遊影音。

(4)設計對象:大眾

(5)色彩計畫:

文字:藍色系

NO.1 -NO.2:主題色彩:湖藍、白、淺藍色系-營造萬里晴空、蔚藍大海的氛圍,色彩取
自希臘聖托里尼島藍頂,整體配合風景意象。

NO.3:主題色彩:暖橘、白、呈現夕陽風光, 象徵夜晚即將來臨的黃昏,將大海染的金
黃,閃耀而溫暖人心,為旅遊過程增添一道獨特的風景。

NO.4-NO.5:主題色彩:灰藍、白、夜幕將至,金黃光芒逐漸退去,轉而灰藍,即將預告
夜晚的到來,並做為網頁至尾聲的色彩,整體沉穩雅緻。

(6)風格設定、預期成效: 簡潔、悠閒、藍天、大海
希望觀者在閱覽內容時,能彷彿置身於愛琴海岸,並帶著輕鬆的心情閱
覽,能讓心中動起想前往希臘一趟的念頭~~~

(7)製作心得:藉由上次功課練習,也讓自己有機會調整版面,這次版面簡潔許多,因
此在頁面上用顏色使網頁變化豐富,不同色彩營造不同氛圍,和圖文搭配和諧,從上
學期開始,配色是製作網頁時需要一直協調的,但也在製作過程對色彩、版面配置等
稍顯熟練,期中後的作業練習似乎和以往上的不同,也期待可以玩不同版型,投入在
一件事裡,是一件幸福的感受,在過程中能玩出趣味,這讓我知道,想持續的做某件
事,就先愛上它吧~自己將會有不同的心情與感觸。



Edited 7 time(s). Last edit at 03/31/2017 10:06PM by 松本.豪.
(編輯記錄)

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

(2)網站主題:日日田職務所

(3)導覽列選項/分類項目:

●歡迎來到日日田:這是首頁,我們可以先看到header有職務所的標準字和logo,這個部份我是直接變成一張圖的方式,我想這樣比起標題直接打上日日田職務所還要更有趣,而且點選它可以直接回到首頁;再來就是content的部分可以看到職務所裡面設計師所繪製的工作室外觀 ,這張圖也有被刻成印章呢,在它旁邊是可以讓人更快了解日日田的小短句;接下來就是最新消息是連結到活動花絮的地方,這部分我蠻想學習怎加動態的效果進去;最後就是一些可以連結的小區塊,不過我覺得很可惜的是我所了解的內容太少了,連結明明上面就有了,這樣有點累贅的感覺。

●關於日日田:這裡有準備一些我們常常被問到的問題,包含我一開始也很好奇,我認為這樣的方式會比一些基本資料更接近我們一些。在連結的地方我都是連結到職務所的臉書,畢竟職務所沒有官方網站,這些資料也是我在各個地方收集而來的。上面的標題有些符號是打出來的,有些是自己用圖片放的,這樣的活用讓我覺得腦袋有升級的感覺。
●設計師介紹:裡面就是我們可愛的設計師了。點選裡面的小標題可以建立與他們聯絡的窗口,我在這部分想學可以放入很多作品的製作方式,希望老師有機會可以教教我。如果滑鼠移到設計師的照片可以變換他們的作品,但是我覺得有些人不會移動到那去,有什麼方法是可以讓人比較容易注意到的嗎?

●活動花絮:這裡有二個部分。一個是活動的照片+連結,二是報導的連接+小介紹,這裡沒有什麼難度,不過我也希望可以有更好的展示活動相片的方式。

●聯絡我們:有我們的聯絡方式、粉絲專頁連結。我比較想用名片的方式呈現。

(4)設計對象: 對這個地方感興趣的年輕人

(5)色彩計畫:
我運用的顏色是帶灰色的綠色,除了呼應日日田的田以外,也希望給人沉穩的感受。然後也運用了白色希望是有文青的質感。

(6)風格設定、預期成效: 乾淨、文青,可以呈現出職務所帶給人的感受。
(7)製作心得:這次想學的更多了!找到自己喜歡的主題就會想認真的去做、去表現、去設計。我覺得跟一年級剛開始那種只為了做出來老師教的內容、改改小東西卻沒有認真的想「設計」網頁的心態有很大的不同。我還記得在工作室做這項作業時,老闆稱讚我的配色不錯我偷偷開心了一下呢!網頁設計感覺越來越有趣了,而且成就感會在按下即時的時候跑出來smileys with beer

並請回覆:

(1)作業網址:
http://mepopedia.com/~css105-2c/midterm/midterm-1045445009
(2)網站主題/網站名稱: 庫洛魔法使//庫洛魔法異世界
(3)分類項目(導覽列):
庫洛魔法使:她是首頁-任何的最新消息都會在他的首頁公布
主要人物:人物介紹拉~都是歐霸跟歐尼
劇情介紹:主角的奇幻冒險故事
劇場版;就是電影版拉~有很多在原故事裡看不到的故事喔
精彩花絮:美美的童年回憶~
(4)對象: 大眾
(5)色彩計畫: 粉嫩色調為主
(6)風格設定、網頁看點、預期成效:
粉嫩嫩少女心爆炸
激起大家的共鳴,畢竟這是經典中的經典阿~
讓心情差的人都能回想起天真美好的童年
(7)製作心得:
這一次東西超極多可是可是呢
做出來還是超有成就感的拉~

(1)作業網址:
http://mepopedia.com/~css105-2c/midterm/midterm-1045445141
(2)網站主題/網站名稱:Twitch
(3)分類項目(導覽列):
關於:首頁-概略介紹
歷史:緣起/前身
影片:Twitch相關/熱門/私心
實況主:實況主/私心
連結:Twitch相關
(4)對象: 大眾
(5)色彩計畫: 紫色
(6)風格設定、網頁看點、預期成效:
維持Twitch一貫的紫色系
(7)製作心得:
老實說這一次沒有花很多心力在這上面,所以只有簡略的做,在色彩計畫及編排上並無多做設計。

(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445033
(2)網站主題:角落生物 すみっコぐらし

(3)導覽列選項/分類項目:

●index:(首頁) 我使用很清楚的可愛風格及顏色,給人第一印象的視覺感,刺激觀賞著的興趣。

●about:(人物) 簡單並醒目的呈現,以非常基礎不花的方式,無負擔的讓觀賞者品味每個可愛的腳色們。

●tourism:(周邊) 互動式的吸引手法,使人有衝動購買的念頭,可愛的圖示之外還貼心地分享app供大家在第一時間了解新資訊。

●video:(宣傳) 各式新商品宣傳都在這裡,特地的尋找左上可供人選擇的按鍵,增加便利性以及多樣的選擇性,除此之外心動的觀賞者們皆可點擊下方萌物商品進一步的了解以及購買。

●story:(相關) 內容有サンエックス株式会社的詳細資料外,我也在其中提供桌布.貼圖以及最新成員等最新消息,讓角落迷們更加地為它瘋狂,如有喜歡サンエックス株式会社其他系列的觀賞者們,我也在此提供相關資訊福利歐!!

(4)設計對象:大人小孩男女老少 (大眾)

(5)色彩計畫:

可愛風格多數以(粉色)系為主,
在此我加入了需多中間色調(灰色),
也些字體則採用咖啡色(角落生物的邊線色)非常融洽不排斥的視覺感,
細小字使用藍色及灰色兩色互相搭配,具有統一感,個人認為非常適合

(6)風格設定、預期成效: 一定就是大大的分享這可愛的小東西,風格文字方面以簡單為主,背景花費的不少時間編排及控制平衡,希望觀賞者們多多的支持以及看見我付出的這些努力搂~

(7)製作心得:不斷不斷的練習之後,逐漸的越來越清楚使用的方法以及各個設定,在尋找過程中是最不容易的,我尋找了許多網站找了日本的官網後,花了許多時間解讀,從她每項按鍵以及網站各個物件都瀏覽過後,做出了這項作品,除此之外單單編排我就花了很長的時間,一直不斷地儲存刪除儲存在刪除,單單一個頁面就花費了許多小時修正,並請他人給意見再修正...一直重複,真的挺累人的,對於成果我還算滿意,希望老師及觀賞著們也注意到我的用心。

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

(2)網站主題:喵星達meow meow star

(3)導覽列選項/分類項目:

●關於喵星達(index):這是首頁的部分,主要是希望能夠讓大家一開始就了解這個網頁的主要目的,簡單的內容與描述概,還有一些關於他其他網站做的設計連結,都可以連結到其他網站來觀看唷!
●喵星少女(about):而這裡則是放一些他的手繪插畫以及貼紙與明信片(比較夢幻系的創作系列~~
●水彩插畫(color):這裡是屬於水彩的創作,我希望讓他更可愛一點,所以我上下的地方的熊熊照片在Fhotoshop去背景 然後插入在這個格式裡面,呈現別有一番的童趣在,而那些熊熊也是插畫家所繪畫的。
●人物肖像(human):這裡屬於設計師人物繪畫創作的風格分類。
●婚紗作品(dress):這裡是插畫家的婚紗照作品,除了喜歡畫畫的插畫家,同時也有在經營幫別人拍婚紗的工作,真的是多才多藝呀!!也有一些相關的資料跟資訊以及說明喔!!
(4)設計對象: 喜歡夢幻插畫的人~~~歡迎前來參觀

(5)色彩計畫:
比較粉嫩、文青和溫和協調的顏色 同時襯托插畫家的色彩表現。
(6)風格設定、預期成效:文青、簡單又不失可愛與討喜少女心的風格
(7)製作心得:每一次的網頁設計,都讓我越做越有成就感,做了一頁之後,就會想趕緊在繼續做下一頁,而且每次都可以找自己喜歡的主題來創作,就會增加自己的想像力,加入一些自己的風格,使整體網頁設計更讓人覺得成就,從中也獲益良多,有時候也可以找到新的訣竅與方法,一天天的練習,使我在操作上面更佳熟悉許多呢!!



Edited 2 time(s). Last edit at 04/06/2017 12:03AM by 王宜雯.
(編輯記錄)

回覆:
(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445003

(2)網站主題:
THE WALKING DEAD

(3)導覽列選項/分類項目(對應檔名):
首頁   index.html 美劇大綱及得獎介紹
帝國版圖 about.html 在正篇之外其它的番外或是談話性節目
角色介紹 cast.html 就是角色介紹,偷懶的只介紹一直沒死的元老角色(這世界太容易領便當了)
劇情簡介 episodes.html 說是大綱介紹但其實不該講的也講了(*-`ω´- )人
外部連結 link.html 慣例的官網跟一堆連結~BTW有額外大放送喔~~~

(2)設計對象: 美劇迷(((*°▽°*)八(*°▽°*)))♪
希望就算不是美劇迷也能去看看~

(3)色彩計畫:
紅+藍灰+灰+紅形成一種陰鬱的感覺,雖然想營造恐怖氛圍但又不想嚇到人,於是就用了一些白色的元素讓整體乾淨明亮了一些。

(4)風格設定、預期成效:
對於這個影集大家的觀念就是恐怖、血腥及暴力,但實際上角色之間的情感交流才是這部戲的精髓,希望能讓大家擺脫刻版印象。
完成時真的有種些微清新乾淨的感覺,不知道是不是我的錯覺(*´ェ`*)

(5)製作心得:
算是..好玩吧....途中想要試試看加 java script 但研究了好久,反反覆覆的改了好多次還是沒有跑出我要的效果,讓我好挫敗

回覆:
(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1025445061
(2)網站主題: 蠟筆小新
(3)導覽列選項/分類項目(對應檔名):
簡介  index.html
作品說明  work.html
人物介紹  character.html
劇場版  movie.html
春日部都市傳說  legend.html
(2)設計對象:喜歡或想多瞭解蠟筆小新的人
(3)色彩計畫: 暖色系。淡黃、黃橘、橘、白。
(4)風格設定、預期成效:想給人溫暖又活潑的感覺,背景也多加了一些插圖,希望看的人會覺得可愛又療癒也回想起這部卡通的美好。
(5)製作心得: 花了很久的時間做,遇到一些困難但幸好有講義不然都忘光,完成的時候很有成就感,而且能做自己喜歡的東西,覺得很有趣。

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445212/link.html
(2)網站主題: 鹿西小姐麵包坊
(3)導覽列選項/分類項目(對應檔名):
●商品專區-介紹一些好吃的馬卡龍,手工餅乾,麵包,蛋糕
●購買專區-講說如何用卡來購買好吃的食物
●門市據點-跟大家說如何購買,哪些地方有門市
●最新消息-跟大家說最新的活動,折扣,新商品
●企業情報- 說明商品來源,如何做出好吃的食物
(4)設計對象: 大眾
(5)色彩計畫: 用一些深咖啡色、淺咖啡色來呈現。
(6)風格設定、預期成效: 用這些色調,讓人看得很舒服,會覺得這些食物很美味
(7)製作心得: 找到自己有興趣的題目來做,不用死板板的一定要怎麼樣,以自己的美觀來設計,能有自己的風格,做完挺有成就感的。

(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445036/topp.html
(2)網站主題:魚乾Annie

(3)導覽列選項/分類項目(對應檔名):
我是首頁 index.html
魚乾介紹 about.html
紅石口袋 poke.html
好友群們 friend.html
影片連結 link.html

(2)設計對象:大眾

(3)色彩計畫:用魚乾人設的顏色---各層次的紫色加對比色黃色(橘色)還有一點白色

(4)風格設定、預期成效: 顯現出魚乾的特色於活潑感~讓人了解魚乾是誰,介紹她的經歷,把她介紹給更多人認識~

(5)製作心得:要製作出一個好的網頁真的不簡單,過程一直在思考怎麼把自己網頁變得豐富,把自己原有的風格再改過,
但似乎還是只能這樣(應該是自己的問題),過於簡單的顏色跟排版會顯得呆版,我要改進啊spinning smiley sticking its tongue out!!!!
謝謝老師這次又教了很多~我會繼續學習下去的!smileys with beer

我有修改一些小細節跟內容之類的, 我漸層真的有修改一點啦!!!!!但就是好像還是長那樣啊eye popping smiley
因為之前覺得底色很不明顯 沒辦法區隔的感覺 但太深又不好 所以在旁邊加了虛線想襯托一點框線出來~ (點進去就知道了哈哈)



Edited 3 time(s). Last edit at 04/14/2017 10:53PM by Peiwei.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445069
(2)網站主題: 天外奇蹟
(3)導覽列選項/分類項目(對應檔名):
首頁-就是首頁,天外奇蹟簡單介紹
劇情介紹-天外奇蹟的故事
人物介紹-天外奇蹟的角色簡單介紹,有圖片唷~可愛
10件秘密-10個天外奇蹟大家不知道的事情
手稿-皮克斯30周年天外奇蹟的部分手稿跟相關網站

(2)設計對象: 喜歡天外奇蹟的人
(3)色彩計畫: 藍藍的
(4)風格設定、預期成效:
可愛,可以讓人放鬆的感覺
讓大家了解天外奇蹟,喜歡上可愛的小羅或卡爾爺爺
(5)製作心得:
雖然想做出讓人放鬆的感覺,可是在做的時候一點也不放鬆,總覺得看語法都看到都快變亂碼了~
一點一點努力改,做完真的很開心,可是上傳網頁之後,看到css跑掉真的很難過很崩潰!

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

(2)網站主題:和服わふく

(3)導覽列選項/分類項目(對應檔名):
首頁 index.html
和服介紹 about.html
和服穿法教學 profile.html
圖片 works.html
外部連結 link.html

(2)設計對象:大眾 想了解和服的人

(3)色彩計畫:以和服樣式的素材背景圖片顏色為基礎,發展出藍與紫色調

(4)風格設定、預期成效: 簡單的風格,但帶些和服花朵圖案,所以不會過於單調. 想呈現一種成熟美的感覺

(5)製作心得:製作網頁真的很有趣!,製作的過程中可以學到很多新知識
雖然不懂的時候很辛苦,但成功用好後非常有成就感!
可以做自己喜歡和選擇的主題真的很開心
希望自己可以越來越進步,也非常謝謝老師用心的教導.

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

(2)網站主題:馬爾地夫

(3)導覽列選項/分類項目(對應檔名):

介紹(index)
歷史(about)
交通資訊(profile)
旅遊景點(works)
住宿資訊(link)

(2)設計對象: 大眾

(3)色彩計畫:淺色水藍風

(4)風格設定、預期成效: 因馬爾地夫本身就是個度假地區,所以就想走粉藍看起來舒適的顏色,而成效也還不賴。

(5)製作心得:好多css好多css好多css好多css好多css...........搞得我好亂啊

(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445051/index.html

(2)網站主題/網站名稱:ジョジョの奇妙な冒険

(3)分類項目:

首頁

書籍情報

跨媒體作品

外部連接

(4)對象:大眾

(5)色彩計畫:

●背景:海藍、純黑
●區塊:透明白
●內容-深淺黑白

(6)風格設定、網頁看點、預期成效:

風格設定:時尚時尚最時尚
網頁看點:條理分明
觀感營造:設計感、輕鬆瀏覽、
預期成效:一起JOJO吧~~~

(7)製作心得:很累,但很有成就感。

(1)作業網址:
http://mepopedia.com/~css105-2c/midterm/midterm-1045445019/index.html

(2)網站主題:
台灣旅遊指南

(3)導覽列選項/分類項目(對應檔名):
首頁 / index.himl
介紹 / about.html
天氣狀況 / weather.html
交通資訊 / trafic.html
外部連結 / link.html

(2)設計對象:
觀光客 、旅遊玩家

(3)色彩計畫:
冷靜的風格、冷灰色調 / 黑 白 灰

(4)風格設定、預期成效:
文青感、沒有達到我要的預期成效,可能技術上所學沒辦法達到我自己要的感覺,但是跟預期想到還是有80%滿意

(5)製作心得:
這次的風格色彩沒有像之前的那麼多色彩和活潑.....本來這次也想要活潑風格的,但是不知不覺就是這個走向XD
跟想像的有一點落差,但是還是有滿意~感覺這次變難了......有一些東西不是很行,這次的作業感覺沒有之前的美啊~

(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445198
(2)網站主題:Сою́з Сове́тских Социалисти́ческих Респу́блик
(3)導覽列選項/分類項目(對應檔名):
index-首頁
about-領導
profile-軍事
works-科技
link-文化
(2)設計對象:蘇聯迷
(3)色彩計畫:蘇聯軍旗配色 紅 黃 白
(4)風格設定、預期成效:同上
(5)製作心得: 很累 很麻煩 然後接下來更麻煩 又是必修 сука!

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445180
(2)網站主題: 關於蔬菜
(3)導覽列選項/分類項目(對應檔名):
in00 - 菜菜簡介
in01 - 菜菜好處
in02 - 菜菜食譜
in03 - 菜菜種類
in04 - 菜菜連結
(2)設計對象: 一般社會大眾
(3)色彩計畫: 綠綠的喔
(4)風格設定、預期成效: 希望大家都喜歡吃菜呢 !
(5)製作心得: 有點累

(1)作業網址:
http://mepopedia.com/~css105-2c/midterm/midterm-1045445018
(2)網站主題/網站名稱: 台北市兒童新樂園
(3)分類項目(導覽列):
關於我們:所有的公告都在那
遊樂設施:遊樂設施的介紹與注意事項
溫馨服務:樂園裡的服務項目介紹
劇場資訊;多個劇場表演介紹
美食商品:介紹樂園紀念品及美食專區
(4)對象: 大眾
(5)色彩計畫: 繽紛可愛色調為主
(6)風格設定、網頁看點、預期成效:
主要是想呈現一種童趣的風格,畢竟是個兒童樂園,希望大家看了之後,
小朋友會吵著要去玩,大朋友會揪大家一起去玩
(7)製作心得:
一開始真的覺得點麻煩,但是其實只要照著老師的步驟走
把第一頁跟第二頁用好後面就非常快速地完成了
做到停不下來的那種快hot smiley

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445105
(2)網站主題: 粉雪鬆餅屋
(3)導覽列選項/分類項目(對應檔名):
LeTAO首頁/ index.html 這頁首頁介紹LeTAO的關係企業
關於LeTAO/about.html 介紹LeTAO的由來和品牌的精神及對美味的堅持
禮品/profile.html 介紹店裡的禮品資訊
美味餐點/works.html 餐點的介紹
店鋪資訊/link.html 餐廳的位置和聯絡電話及營業時間
(2)設計對象: 大眾
(3)色彩計畫: 主要配色是以粉色調來呈現,希望以它的名稱粉雪來相呼應
(4)風格設定、預期成效: 主要是以粉嫩的感覺來呈現希望帶給大家一種舒適的感覺
(5)製作心得: 在製作的過程當中遇到了許多挫折,但是還是想盡辦法的突破這些困難!希望一次比一次的更加進步!謝謝老師這麼有耐心地指導我們!

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


(2)網站主題:一頁台北
(3)導覽列選項/分類項目(對應檔名):
首頁(index):電影類型簡介
劇情介紹(indey):電影劇情大綱介紹
演員介紹(indez):演員角色簡介
電影配樂(indea):電影原聲帶配樂
預告花絮(indeb):宣傳花絮

(2)設計對象:想看一頁台北的人
(3)色彩計畫: 黑色、粉紅色
(4)風格設定、預期成效: 希望可以呈現台北夜晚絢麗迷幻的感覺
(5)製作心得: 其實網頁不難,只要夠專注很快就能做完

作業網址http://mepopedia.com/~css105-2c/midterm/midterm-1045445217
(2)網站主題:加減乘除
(3)導覽列選項/分類項目(對應檔名):
首頁:簡單介紹主角
個人簡介:介紹他的經歷
專輯創作:簡單介紹他的專輯
影片分享:分享比較知名的MV
外部連結:分享其他歌曲的mv

(2)設計對象:一樣也喜歡紅髮艾德
(3)色彩計畫: 藍色深藍
(4)風格設定、預期成效: 超愛的ㄏ啊哈
(5)製作心得: 認真起來的話會比較簡單 做完特有成就感



Edited 2 time(s). Last edit at 04/20/2017 11:17AM by H224488882.
(編輯記錄)

作業網址為http://mepopedia.com/~css105-2c/midterm/midterm-1045445162

(2)網站主題:
日本的女性攝影師作品介紹

(3)導覽列選項/分類項目(對應檔名):
>>MENU(index.html):主頁連結、連到其他分頁去。
>>ABOUT(about.html):關於這位攝影師的相關介紹。
>>SERIES(series.html):有一系列經過報導的經典作品、也是因為這個報導才注意到她。
>>ART PICTURE(art.html):在他自己的部落格裡放的其他攝影作品。
>>BLOG(bloglink.html):相關連結。

(2)設計對象:大眾/喜歡攝影作品和設計的人
(3)色彩計畫: 比較沉穩、深沉的顏色&不想加入太多花俏的顏色。顯得整個畫面過於雜亂,襯底的圖案也盡量簡潔不搶到照片跟背景之間的視覺><
(4)風格設定、預期成效: 雖然是日本攝影師,但她的父母都是美國人,卻因為生長在日本這塊土地,而拍出了很多具日本風格的照片,想去了解也希望能讓大家多了解一位有個人風格的攝影師和喜歡上她的創作!
(5)製作心得:
製作了說長不長、說短也不短的時間,在探索每一個新功能的同時也因為增加了很多新的語法和嘗試效果很有成就感!希望自己下次能照著作業流程來TT不然落掉太多進度超級慌、朝下個作業努力了!!
想大叫說──我終於完成了啊啊啊啊啊!!!!!!!!!!!!!!!!←

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445120
(2)網站主題: 天兵公園
(3)導覽列選項/分類項目(對應檔名):
首頁-index
劇情介紹-about
人物介紹-profile
圖片分享-picture
影片連結-link
(2)設計對象: 熱愛天兵公園的朋友們
(3)色彩計畫: 粉藍
(4)風格設定、預期成效: 讓更多人更喜歡天兵公園
(5)製作心得: 每一次做完的網頁都覺得自己成長許多~

(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445174
(2)網站主題:科學動動腦
(3)導覽列選項/分類項目(對應檔名):
index-首頁
index2-太空天文
index3-地球動脈
index4-環境生態
index5-化學物語
(2)設計對象:學生
(3)色彩計畫:藍黑
(4)風格設定、預期成效:科技感
(5)製作心得: 蠻複雜的,做完成就感

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445027
(2)網站主題: 家庭教師
(3)導覽列選項/分類項目(對應檔名):
首頁-index.html
相關人物-meber.html
戒指介紹-Ring.html
音樂-muise.html
動畫片段-video.html
(2)設計對象: 大眾、喜愛家教的人們
(3)色彩計畫: 橘黃色系、熱血
(4)風格設定、預期成效: 想製作有讓人熱血的感覺,畢竟家教這動漫是少年漫畫,裡面少不了青春、成長類的,
所以想營造很振奮人心的感覺,而使用橘黃色調。
(5)製作心得: 其實全部做完還滿有成就感、滿好玩的,但全部做完有點小累xD

(1)作業網址:
http://mepopedia.com/~css105-2c/midterm/midterm-1045445045
(2)網站主題/網站名稱: I'm searching for something
(3)分類項目(導覽列):
首頁:介紹歌手以及近期活動
個人簡介:歌手介紹和生平
專輯介紹:歌手的歷年專輯
音樂分享:MV分享
得獎紀錄:出道以來的獎紀錄
(4)對象: 大眾
(5)色彩計畫: 粉色為主色調
(6)風格設定、網頁看點、預期成效:
配合專輯夢幻顏色來製作這個網頁
(7)製作心得:
這次也花了一些時間再用網頁,比起上學期這學期網頁看得懂一些語法因此有些許成就感。

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

(2)網站主題: fate grand order

(3)導覽列選項/分類項目(對應檔名):
1.home:網站首頁 遊戲介紹。
2.story:故事簡介。
3.servant:登場英靈介紹。
4.fate series:fate系列介紹。
5.video:動畫PV分享。

(2)設計對象: 大眾。

(3)色彩計畫: 深色 對應故事的主題屬於沉重。

(4)風格設定、預期成效: 風格有點陰沉 做完之後雖然有點感覺但還是有甚麼缺限。

(5)製作心得: 有待進步。

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


(2)網站主題:mr. bean
(3)導覽列選項/分類項目(對應檔名):
首頁(index):介紹 MR BEAN
關於(about):關於MR BEAN
歷史(history):MR BEAN歷史
照片(photo):MR BEAN照片
連結(link):影片

(2)設計對象:想看了解豆豆的人
(3)色彩計畫: 綠色
(4)風格設定、預期成效: 希望可以讓大家更喜歡豆豆
(5)製作心得: 其實不錯,頭有點暈



Edited 1 time(s). Last edit at 04/19/2017 05:26PM by 1045445102.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445201/01.html

(2)網站主題:plain me

(3)導覽列選項/分類項目(對應檔名):
1.介紹
2.服飾
3.鞋子
4.飾品配飾
5.居家生活

(2)設計對象: 大眾。

(3)色彩計畫: 深色 對應故事的主題屬於大地色系。

(4)風格設定、預期成效: 讓人有一種現代穿著的感覺

(5)製作心得: 很難



Edited 1 time(s). Last edit at 04/19/2017 07:07PM by 113039.
(編輯記錄)

(1)作業網址:
http://mepopedia.com/~css105-2c/midterm/midterm-1045445084/index.html
(2)網站主題/網站名稱:日日多肉~多肉植物分享
(3)分類項目(導覽列):
首頁:多肉介紹 分頁連結
(4)對象: 大眾
(5)色彩計畫: 想做出靜謐的感覺
(6)風格設定、網頁看點、預期成效:想呈現出自然 靜謐的感覺

(7)製作心得:
還是覺得好難啊!!!!!

(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445108
(2)網站主題:艾倫沃克
(3)導覽列選項/分類項目(對應檔名): 首頁 介紹一些事蹟
人物介紹
創作
影音分享
外部連結

(2)設計對象: 大眾
(3)色彩計畫: 黑灰白
(4)風格設定、預期成效: 灰色
(5)製作心得: 製作時間也是很久但我還有一些小小的問題,但我覺得當作完的那霎那好爽喔。

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

(2)網站主題: 水墨畫

(3)導覽列選項/分類項目(對應檔名): 首頁 文房四寶 中國水墨 日本水墨 相關影片

(2)設計對象: 大眾

(3)色彩計畫: 以紙的米色和毛筆字的黑作為搭配,呈現出古典優雅之感。

(4)風格設定、預期成效: 使用宣紙質感襯底,老舊泛黃的紙與黑色的毛筆字,如同古人在紙上寫字一般。

(5)製作心得: 熟了之後做起來也相對容易,只是編排上面需要再加強,期望自己的基礎可以扎實一些。

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445057
(2)網站主題: 只想告訴你
(3)導覽列選項/分類項目(對應檔名):
index_首頁
character_劇情介紹
plot_登場角色
video_音樂欣賞
related_相關連結
(因為製作中間出了差錯所以檔名也有點中文英文對不起來)
(2)設計對象: 大眾
(3)色彩計畫: 淡淡的藍色為主軸。
(4)風格設定、預期成效: 希望可以給人一種置於天空的那種清爽感,也帶著主題中那種初戀的感覺,輕飄飄的。
(5)製作心得: 我覺得網頁真的好麻煩啊...但是如果很堅持的把它做完,自己得到的就是一個買不到的成就感吧!

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445030
(2)網站主題: 金太妍
(3)導覽列選項/分類項目(對應檔名):
index 首頁
index1 個人介紹
index2 太蒂徐
index3 音樂作品
index4 代言廣告
(2)設計對象: 大眾
(3)色彩計畫: 粉嫩的顏色
(4)風格設定、預期成效: 希望可以給人看到這個網頁就覺得非常少女風,喜歡太妍這個女神
(5)製作心得: 我覺得做網頁很麻煩,但是做完真的很有成就感,可是不知道為什麼字會跑掉

1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445072
(2)網站主題/網站名稱: 閃電狼《Flash Wolves》

(3)分類項目(導覽列):

戰隊介紹 介紹閃電狼《Flash Wolves》 smileys with beer
選手資訊 介紹閃電狼《Flash Wolves》內ㄉ選手smiling bouncing smiley
相簿影音 閃電狼《Flash Wolves》相關的影片及照片
新聞報導 閃電狼《Flash Wolves》的相關新聞
相關產品 閃電狼《Flash Wolves》的相關廠品

(4)對象: 對英雄聯盟和電競有興趣的群眾

(5)色彩計畫: 採用Flash WolvesLOGO的藍色為主要,灰色為輔助色。
(6)風格設定、網頁看點、預期成效:
風格設定:因為閃電狼《Flash Wolves》的LOGO是以藍色為主,帶有沉著理性。畢竟是打電競的麻~
網頁看點:全部都是看點!!
預期成效:我已經用盡了洪荒之力。在不行我就.......あなたは、けものがお好きですか?!

(7)製作心得:做自己喜歡的題目真是開心,但是CSS樣式一直傲嬌很久!跟NL妹妹有得比!對於那些似懂非懂的程式碼,現在也跟他們妥協,井水不犯河水!你要是乖乖的給我置中,我就放你一條生路((大概吧....?
最後~~~~~修正了很久終於搞定了すごーい!

(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445195
(2)網站主題:绍兴

(3)導覽列選項/分類項目(對應檔名):
简介  index.html
历史改革 about.html
地理环境 profile.html
美食  works .html
旅游  link.html

(2)設計對象:大众

(3)色彩計畫:绍兴是水乡,所以用蓝色表达水。

(4)風格設定、預期成效:

(5)製作心得:开始以为很难,实际做起来感觉还可以,就是稍微麻烦了点。

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


(2)網站主題: 滾石愛情故事
(3)導覽列選項/分類項目(對應檔名):
index.html 首頁
Plot.html 單元劇系列
profile.html 演員陣容
Soundtrack.html 電視劇歌曲
movie.html 影音專區

(2)設計對象:喜歡這些歌曲的大眾

(3)色彩計畫:以灰白色為主調

(4)風格設定、預期成效:風格設定、網頁看點、預期成效:締造了無數膾炙人口的不朽情歌,陪伴了一代又一代的男男女女。每個人生命中的暗戀、初戀、熱戀、失戀,都有一首專屬主題曲。每個人帶著這些情歌,在KTV唱了又唱,聽了又聽,在心愛歌手的演唱會上大聲跟著唱和,百轉千迴,念念不忘。

(5)製作心得:終於把期中做完了覺得開心,CSS語法也多了很多出來,在調整的時候找了很久,非常的累阿阿阿

(1)作業網址: http://mepopedia.com/~css105-2c/midtern/midtern-1025445159
(2)網站主題: 包伯狄倫
(3)導覽列選項/分類項目(對應檔名):簡介 專輯說明 歌手介紹 諾貝爾文學獎致詞 歌手延伸
(2)設計對象:青少年
(3)色彩計畫: 紅跟黑
(4)風格設定、預期成效:做得不錯
(5)製作心得: 當更了解網頁的編排之後以及配色 讓自己除了更了解這位歌手之外 還可以多增進技能

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445186
(2)網站主題: ENMIEM
(3)導覽列選項/分類項目(對應檔名):
簡介
專輯說明
歌手介紹
歷年專輯
影音連結
(2)設計對象:青少年 以及對這位歌手有了解的人
(3)色彩計畫: 黑 灰 白
(4)風格設定、預期成效: 類似像攝影
(5)製作心得:還不夠好

(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445129
(2)網站主題:金石工坊
(3)導覽列選項/分類項目(對應檔名):
index-首頁
about-金石日報
profile-商品專區
works-店鋪索引
link-聯絡我們
(2)設計對象:所有人
(3)色彩計畫:黑、紅
(4)風格設定、預期成效:熱情神秘感
(5)製作心得:剛開始覺得很複雜,越做越上手,做完很有成就感

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1015445216
(2)網站主題: 劍靈

(3)導覽列選項/分類項目(對應檔名):
首頁:index
遊戲世界觀 - 介紹一些國家與陣營及重要角色:about
截圖分享 - 遊戲副本內容、社交:profile
影片欣賞 - 放些官方舞台劇或劇情、還有玩家自製的影片:works
官方連結 - 遊戲相關的網站的連結:LIST

(2)設計對象: 對遊戲不深入者
(3)色彩計畫: 黑灰白
(4)風格設定、預期成效: 以較簡約的黑灰白來呈現,比照遊戲些微灰暗的走向。
(5)製作心得: 圖的主角都是自己或朋友,說是介紹遊戲不如說像在自肥_(┐「εsmiling smiley_ 做的還蠻愉快的。

(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445177
(2)網站主題:台中觀光的資訊
(3)導覽列選項/分類項目(對應檔名):
index-首頁
about-景點
food-美食
stay-住宿
more-更多資訊
(2)設計對象:來台灣的日本觀光客
(3)色彩計畫:粉紅色調
(4)風格設定、預期成效:給予他們相當多年輕的資訊
(5)製作心得:做到越後面速度就越快也就是越上手啦~~~~~~~~

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

(2)網站主題:傳說對決

(3)導覽列選項/分類項目:

●故事起源:這是首頁的部分,主要是希望能夠讓人知道這是傳說的主要資訊
●人物介紹:這裡是放一些角色介紹
●新手角色:這裡是讓一些剛開始玩傳說的新手玩家能夠明白知道適用哪些角色比較好上手
●遊戲特色:主要是在說傳說的主要優點,為甚麼會讓玩家欲罷不能一玩再玩的原因
●遊戲影片:這邊都是在說關於傳說介紹比賽等等的影片
(4)設計對象: 喜歡傳說的一些玩家及新手玩家們

(5)色彩計畫:
比較暗色系,適合由喜裡面的顏色設定,也符合主題
(6)風格設定、預期成效:黑暗卻又刺激,讓想追求刺激的朋友們欲罷不能
(7)製作心得:每一次的網頁設計,都讓我越做越有成就感,做了一頁之後,就會想趕緊完成,而且因為是做自己喜歡的東西,就會越做越有動力可以繼續做下去,做完全部在看成品時會非常有成就感,同時在這中間也學習到很多架設網站的方法!!!

回覆:
(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445144

(2)網站主題:
飛天小女警
(3)導覽列選項/分類項目(對應檔名):
飛天首頁 index.html 飛天小女警歷史由來,還有放了連結能讓大家點進去直接看到飛天小女警的特展。
劇情介紹 plot.html 介紹飛天小女警的劇情
登場角色 who.html 大致角色介紹,有主要角色和親友角色和反派角色,介紹人物的底色分別用三種顏色區分開來,讓人看得更清楚明白~
影片連結 video.html 提供飛天小女警的電影大家看,還有懷舊的主題曲及片尾曲~
相關連結 link.html 飛天小女警特展的連結,和官方網站、周邊商品網站,還放了其他有趣的相關網站!!

(2)設計對象: 大眾(有看過的沒看過的小孩大人老人看了都會覺得可愛又有趣!!)

(3)色彩計畫:
粉紅+白+黃 為主要色系,粉紅色最多,想讓人覺得看起來很可愛,再加點黃色與白色襯托,就能在顯得更加活潑,整個就是充滿明亮,少女心的網頁阿~

(4)風格設定、預期成效:
對於這個卡通大家的想到的應該就是可愛、有趣、活潑、角色鮮明,雖然我本身喜歡可愛的東西但是卻不偏愛粉紅色,不過講到飛天小女警就覺得她好適合粉紅色阿~~不知不覺就用了粉紅色為主視覺!!配色方面也希望大家看了會喜歡!
(5)製作心得:
覺得好玩啊~~第一頁還很痛苦的做著,可是做到後面反而會想越放越多東西,想多多介紹飛天小女警給大家看,做到後面真的覺得蠻有趣的~這次作業感覺更有成就感了,過程中都是小問題蠻順利的,最煩的是我的電腦做到一半會突然當機太恐怖了!還好已經習慣做一點存一點了!!

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

(2)網站主題: 網球王子

(3)導覽列選項/分類項目(對應檔名):
1.index:首頁 網球王子簡介
2.about:青春學園 主要人物介紹
3.else:其他學園 配角介紹
4.competition:賽事
5.movue:相關影片

(2)設計對象: 對網球有興趣者

(3)色彩計畫: 藍黑色調

(4)風格設定、預期成效: 成熟運動風感人沉穩的感覺

(5)製作心得: 做非常之久 css太多很複雜

(1)作業網址:
http://mepopedia.com/~css105-2c/midterm/midterm-1055999320
(2)網站主題/網站名稱:陪安東尼度過漫長歲月
(3)分類項目(導覽列):
首頁
作品目錄
繪本欣賞
作者簡介
經典段句
(4)對象:對繪本有興趣的人
(5)色彩計畫:由於這本繪本的绘图充满童幻色彩,所以用了清新的暖色調。
(6)風格設定、網頁看點、預期成效:
風格設定:溫馨、充满童幻色彩
網頁看點:超治愈系的啦
預期成效:讓大家了解這本繪本在講什麼並且都想去買這本繪本來看
(7)製作心得:因為是斷斷續續湊時間做的所以也不記得花了多久的的時間,但是這是我第一次接觸dreamweaver這個軟件,好像有點難......但好像又還挺簡單的,額最重要的是這個軟件似乎挺有趣的......明明做的還挺爛的但我那些別系的室友都覺得我很厲害哎,嘻嘻嘻嘻

(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445075
(2)網站主題:饒舌歌手介紹
(3)導覽列選項/分類項目(對應檔名):
index-簡介
2-專輯說明
3-歌手介紹
4-歷年專輯
5-影音連結
(2)設計對象:喜歡饒舌的人
(3)色彩計畫:藍色色調
(4)風格設定、預期成效:簡單的美式風格
(5)製作心得:很有成就感 希望可以在精緻點

(1)作業網址:http://mepopedia.com/~css105-2c/midterm/midterm-1045445114/midterm-1045445114/eye.html
(2)網站主題/網站名稱:為了與你相遇
(3)分類項目(導覽列):
狗的品種
電影介紹
本片預告
最新消息
商品訊息
(4)對象:電影愛好者
(5)色彩計畫:藍
(6)風格設定:穩重
網頁看點
預期成效:電影分享
(7)製作心得: 覺得很難哈哈



Edited 1 time(s). Last edit at 04/20/2017 12:04PM by D1045445114.
(編輯記錄)

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

(2)網站主題:勤美學CMP Village

(3)導覽列選項/分類項目:
1.介紹-基本的簡介。
2.使命-創立此園區的初衷。
3.交通資訊
4.常設作品
5.聯絡我們

(4)設計對象:親子客群。

(5)色彩計畫: 粉色調暖色系適合親子同樂。

(6)風格設定、預期成效: 簡潔、悠閒、大地與陽光。
希望觀看者能感受這邊的清新悠閒,產生嚮往的感覺。

(7)製作心得:能夠自己從頭到尾都自己來,沒有尋求別人的幫助把它完成,好有成就感。

(1)作業網址: http://mepopedia.com/~css105-2c/midterm/midterm-1045445054
(2)網站主題: 吳克群
(3)導覽列選項/分類項目(對應檔名): 簡介 人物介紹 音樂創作 影音介紹 外部連結
(2)設計對象: 青少年
(3)色彩計畫: 黑跟黃
(4)風格設定、預期成效: 簡潔有力
(5)製作心得:時間偏長 但做出來的網頁滿喜歡的