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

Advanced

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

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

1. 期中作業說明


請參考期中前之講義製作

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



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

並請回覆:

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




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



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

(2)網站主題:Indi Maverick

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

關於INDI(index):包含他的自我介紹還有創作路程。

繪畫創作(painting):作品有動物、男人、女人,以及隨意的手繪。

相關連結(related):關於他的網站,使觀者更能了解這個插畫家的資訊。

作品集(works):獨一無二的作品,集結成的精華。

影片欣賞(video):以日常的創作,所製作的短篇影音還有故事介紹。

(2)設計對象:大眾

(3)色彩計畫:以藍綠色系為主,加上深淺變化,達到一致性的視覺效果。

(4)風格設定、預期成效:因為INDI的作品都有種神秘的氛圍,所以選擇用藍綠色做主
色,背景與幾何元素都和他的畫風息息相關,風格可以說是配合他的特色,而預期效
果是希望觀者瀏覽這個網頁後,能感受那種神秘的意境,進入奇幻的世界,也對INDI
有更多的認識,並喜歡他的作品。

(5)製作心得:完成這次期中作業後,可以發現自己越來越熟練,對Dreamweaver的功
能更熟悉了,能夠看得懂語法對應的效果為何,也能運用以前所學的經驗,來加在新
的作業上,使整體看起來更豐富,當然美感也很重要,所以總是一邊做一邊思考如何
呈現是最好看,最有質感的,最後希望自己在每一次的作業上都能更進步。

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1025445158
(2)網站主題: AYA KATO介紹
(3)導覽列選項/分類項目(對應檔名):
首頁 index.html
作者介紹 about.html
影片欣賞 profile.html
作品介紹 works.html
外部連結 link.html
(2)設計對象: 大眾
(3)色彩計畫: 以深色為主
(4)風格設定、預期成效: 有一點神祕感
(5)製作心得: 很難,花了很多時間

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445107
(2)網站主題: 星巴克
(3)導覽列選項/分類項目(對應檔名):
首頁 index.html
咖啡豆 coffeeben.html
產品介紹 about.html
門市 Stores.html
外部連結 link.html
(2)設計對象: 大眾
(3)色彩計畫: 以綠色為主
(4)風格設定 : 簡約
(5)製作心得: 雖然很複雜又麻煩但學到很多



Edited 1 time(s). Last edit at 06/15/2017 01:25PM by ffga3307.
(編輯記錄)

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

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445119
(2)網站主題: ONE OK ROCK
(3)導覽列選項/分類項目(對應檔名):
HOME/index.html
ABOUT/about.html
Tour/Tour.html
VIDEOS/VIDEOS.html
MUSIC/MUSIC.html
(2)設計對象: 喜歡音樂的孩子們
(3)色彩計畫:黑白為主的色系
(4)風格設定、預期成效: 一個日本樂團 搖滾音樂風格,希望喜歡one ok rock的朋友們喜歡~
(5)製作心得: 覺得很開心 玩音樂的孩子不會變壞哦,重點是做完了成就感湧上來ㄚㄚㄚ~

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445089
(2)網站主題: Alice's Adventures in Wonderland
(3)導覽列選項/分類項目(對應檔名):
1-Lewis carroll-卡絡爾:Alice's簡介
2-Authors-作者介紹:有Anthony browne&Lewis carroll
3-Synopsis-簡介:介紹書中部分內容
4-Class Story-經典故事:連結故事內容
5-Video Story-影音故事
(2)設計對象:對繪本有興趣的
(3)色彩計畫:大自然又帶點奇幻世界
(4)風格設定、預期成效:做出和以往可愛形象的繪本有不同的感覺~
(5)製作心得: 該知道的語法更熟悉了些spinning smiley sticking its tongue out

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

(2)網站主題: mister Donut

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

首頁 - index.html

產品介紹 - work.html

我們的堅持 - links.html

最新消息 - new.html

宣傳影片 - movie.html

(2)設計對象: 喜歡甜點的大眾

(3)色彩計畫:以暖色系為主

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

風格: mister Donut 是以橘、紅兩色作為他們的招牌,
所以我的主要色彩也是配合招牌顏色,內文部分再去以較暖色調的粉、
淺黃去做搭配,使整體符合甜甜圈香甜好吃的感覺~

預期效果:希望大眾看到這個網站,能夠更加了解 mister Donut 的相關資訊,
並且能夠喜歡上它的產品。

(5)製作心得: 每一次的練習都使自己越來越上手,製作時間也減少許多,
也沒有遇到什麼太大的問題了 !

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445188
(2)網站主題:剪紙藝術

(3)導覽列選項/分類項目(對應檔名):
剪紙介紹-index
藝術家-artist
相關網站-website.
設計創作-design
影音教學-video

(2)設計對象:大眾

(3)色彩計畫:紅色及粉色

(4)風格設定、預期成效:
風格設定:以剪紙為主,主色調為紅色,剪紙當背景,帶出東方喜氣的感覺,每一頁的都有
不同的設定,讓每一頁都不會過於雷同。
預期成效:除了對剪紙有近一步了解外,也希望可以讓更多人明白,剪紙這項藝術有無限的發展可能,
套用在任何設計上都是非常有質感的。

(5)製作心得:這次的網頁作業又有了更多的變化,而且製作時間也比以往快,對語法也有更進一步
的認識,希望每頁都有不同的表現方式,所以總是想要在弄點變化,也算是一種突破,期待之後的
每一次作業都能學到更多東西,好讓網頁有更多變化。



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

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

(2)網站主題:植劇場

(3)導覽列選項/分類項目(對應檔名):
首頁–index.html
單元劇系列–about.html
演員陣容–profile.html
電視劇歌曲–works.html
幕後花絮–link.html
當初檔名忘記改我也就懶得改了

(2)設計對象:喜愛植劇場的電視劇觀眾

(3)色彩計畫:選擇綠色系來配合「植」這一字

(4)風格設定、預期成效:植劇場是一系列培育新人的單元劇,所以利用小幼苗來代表影視圈的新生力。
透過此網站的介紹,能夠讓觀眾看到跟以往不同的戲劇類型,也能夠讓觀眾認識這些新人,期許他們成為新一代的大勢演員。

(5)製作心得:這五頁內容全部做完,CSS語法也多了很多出來,在調整的時候找了很久,非常頭昏眼花。

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

(2)網站主題: The Most Delicious Food

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

01- Home 首頁
02- Menu 菜單
03- Offer 優惠
04- Film 影片
05- Contact Us 聯繫我們

(2)設計對象: 愛吃西餐的朋友

(3)色彩計畫: 高級浪漫美味舒適的感覺

(4)風格設定、預期成效: 網頁看點、預期成效:想做出高級牛排餐館的感覺,查看了一些美食網站,也查了一下牛排的一些特色,做出來自己滿喜歡的!!覺得有浪漫風味

(5)製作心得: 很開心完成了這個網站,看了口水直流的每個夜晚值得了!!!smileys with beersmileys with beerhot smiley

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

(2)網站主題:黃阿瑪的後宮生活

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

首頁-index
貓咪介紹- cat
圖片欣賞-picture
影片分享-video
外部連結-link

(2)設計對象:大眾

(3)色彩計畫:暖色系

(4)風格設定、預期成效:
風格設定:用暖色系的顏色使網頁有溫馨可愛的感覺裡面也使用了貓掌圖案以及後宮們照片把貓咪可愛的面呈現出來
預期成效:希望可以透過我做的網站了解後宮中七隻貓的生活

(5)製作心得:現在做起網站越來越有成就感,而且比較不會出現問題,這次又學到了另一種網頁形式~~~

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

(2)網站主題: Daniela Volpari Illustration 義大利插畫家

(3)導覽列選項/分類項目(對應檔名):
index-首頁. works-插畫簡介. links-關於作品. Feelings-插畫創作. link-相關連結

(2)設計對象:讓喜歡這個風格的大眾,對這位藝術家的作品有更深刻的印象 ,
可以透過這個網也來認識這位丹妮拉Volpari藝術家的繪畫風格。

(3)色彩計畫:以歐洲傳統的色彩,帶有點復古

(4)風格設定、預期成效: 偏向粉色,且帶有華麗的質感,和插畫家的圖做一個結合,
營造一種復古的色調,搭配插畫的整體性

(5)製作心得: 在製作過程中參考了比較多畫作的色彩,想盡量的詮釋出來,
製作過程中會盡量將網頁顏色和插畫的風格做結合,在製作過程中,
自己也能深入的瞭解這位藝術家所創作的作品。

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445044
(2)網站主題: 探險活寶
(3)導覽列選項/分類項目(對應檔名):
1-index 首頁
2-story 故事介紹
3-character 人物介紹
4-picture 圖片分享
5-video 影片連結
(2)設計對象:兒童
(3)色彩計畫:藍色系
(4)風格設定、預期成效:跟探險活寶主角 阿寶 相關的顏色
(5)製作心得:很順利

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

(2)網站主題:小熊學校

(3)導覽列選項/分類項目(對應檔名):
首頁–index.html
故事介紹–about.html
系列繪本–works.html
作者介紹-writer.html
外部連結–link.html

(2)設計對象:喜愛日本可愛插畫的人
(3)色彩計畫:選擇用繪本大部分的配色作主色 (粉綠 粉黃色系)

(4)風格設定:以溫和的對比色做搭配,做出可愛風格的網頁
(5)製作心得:製作過程中常常因為一個步驟而全部重新開始,雖然很累但做得很開心!

(1)        作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445002
(2)網站主題: 日本の桜
(3)導覽列選項/分類項目(對應檔名):
TOP(index.html)
所謂櫻花(about.html)
關於賞櫻(hanami.html)
櫻花料理(eat.html)
其他櫻花(other.html)

(2)設計對象:喜歡櫻花的人
(3)色彩計畫:櫻花系、粉色調+日本的和風配色
(4)風格設定、預期成效:
風格>>櫻花、粉嫩、和風
成效>>讓瀏覽網頁的人更進一步認識櫻花,以及相關其他知識
(5)製作心得:
櫻花好美,料理看起來好好吃
其實做網頁也滿好玩的,但是很麻煩,不過做完會有成就感

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

(2)網站主題:Suzy's Zoo

(3)導覽列選項/分類項目(對應檔名):
首頁–index.html
介紹–Introduction.html
圖片–photos.html
新聞-news.html
影片欣賞–video.html

(2)設計對象:all of
(3)色彩計畫:粉嫩粉嫩黃色系的感覺spinning smiley sticking its tongue out

(4)風格設定:走可愛的風格tongue sticking out smiley
(5)製作心得:雖然有些忘記了 但是翻翻筆記還是可以找的到 雖然做了很久 但完成了還是很有成就感! thumbs up

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

(2)網站主題:cerruit1881

(3)導覽列選項/分類項目(對應檔名):
首頁–index.html
重要歷程–one.html
西裝–two.html
配件-four.html
精神–five.html

(2)設計對象:上班族,主管
(3)色彩計畫: deep blue

(4)風格設定:西裝成熟穩重的感覺
(5)製作心得:越來越得心應手,結合以前的網頁,讓網站更多元

(1)作業網址:http://mepopedia.com/~css105-2b/midterm/midterm-1045445155
(2)網站主題:大力水手

(3)導覽列選項/分類項目(對應檔名):
首頁–index.html
故事介紹–story.html
人物介紹–people.html
圖片分享-picture.html
外部連結–link.html

(2)設計對象:懷舊童年卡通
(3)色彩計畫: 以卡通配色為主

(4)風格設定:大力水手
(5)製作心得:結合以前學的,完整網頁

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

(2)網站主題:陰陽師

(3)導覽列選項/分類項目(對應檔名):
首頁–index.html
遊戲介紹–game.html
角色介紹–character.html
式神介紹-shikigami.html
特色玩法–play.html
下載連結–download.html

(2)設計對象:查陰陽師資訊的人
(3)色彩計畫:深藍、淺藍、黃

(4)風格設定:帶點日式傳統的感覺
(5)製作心得:花了很多時間做,做完很有成就感!

(1) 作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445050
(2)網站主題: 日本の桜
(3)導覽列選項/分類項目(對應檔名):
CONVERSE(index.html)
男款(boy.html)
女款(girl.html)
兒童(child.html)
店鋪(shop.html)

(2)設計對象:全部
(3)色彩計畫:黑白土色
(4)風格設定、預期成效:
風格>簡易風
成效>讓大家更了解
(5)製作心得:終於做完了 真有成就感



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

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445071
(2)網站主題: 藍色海洋的傳說
(3)導覽列選項/分類項目(對應檔名):
1-index 首頁
2-actor 演員陣容
3-Synopsis 劇情介紹
4-Soundtrack 原聲帶
5-video 影片欣賞
(2)設計對象:年輕人
(3)色彩計畫:藍色系
(4)風格設定、海洋的色彩
(5)製作心得:很難

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


(2)網站主題: 好吃的壽司在爭鮮spinning smiley sticking its tongue out
(3)導覽列選項/分類項目(對應檔名):
index.html 首頁
sushi.html 菜單
dolls.html 吉祥物
animation.html 偶動畫
international.html 各國爭鮮


(2)設計對象:愛吃壽司的人
(3)色彩計畫:橘色咖啡色暖色調
(4)風格設定、預期成效:想要讓大家更了解爭鮮是在做神麼之外,
更想讓大家了解的是爭鮮的一些吉祥物故事品牌經營理念等等...
因為我覺得太可愛了 > <
(5)製作心得:終於把期中做完了覺得開心,可以去吃一波爭鮮了! ! !
這次的期中比上學期好上手。

作業網址
http://mepopedia.com/~css105-2b/midterm/midterm-1045445095

(2)網站主題: LEGO
(3)導覽列選項/分類項目(對應檔名): 首頁 歷史介紹 電視電影 相關影片 外部連結
(2)設計對象: 大眾 &所有熱愛樂高族群
(3)色彩計畫: 鮮豔 活潑
(4)風格設定、預期成效:
以色塊呈現
預期讓別人能更了解它的歷史和最近的活動
(5)製作心得: 覺得這次最難的是配色與排版,如何讓畫面看起來更活潑有趣,又讓人好閱讀。
但認識蠻多語法的smiling smiley

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

(2)網站主題:南瓜料理❤

(3)導覽列選項/分類項目(對應檔名):
南瓜超營養–index.html
流口水不負責–about.html
看著食譜做–profile.html
看影片更容易–video.html
更多南瓜–link.html

(2)設計對象:想嘗試南瓜料理但無從下手的人或是對南瓜料理有興趣的人

(3)色彩計畫:使用橘色和黃色的色系 呼應南瓜的顏色 讓網站整體盡量有明亮溫暖的感覺

(4)風格設定、預期成效:
以南瓜的橘黃色呈現色彩,網頁盡量以豐富的資訊呈現,使觀賞者能得到龐大的資訊量以及興趣,進而對南瓜料理感興趣。

(5)製作心得:好累啊 可是做出來的速度超快的 能感受到自己正不斷進步哈哈哈 smileys with beer

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445053
(2)網站主題: ace of diamond
(3)導覽列選項/分類項目(對應檔名):
index-故事簡介
about-登場人物
music-主題曲
show-舞台劇
movie-聲優出席活動

(2)設計對象: 大眾
(3)色彩計畫: 藍色調
(4)風格設定、預期成效: 青春藍色調、更了解這部棒球作品。
(5)製作心得: 做完好開心....!!!!ˇˇ (z

(1)作業網址:http://mepopedia.com/~css105-2b/midterm/midterm-1045445035
(2)網站主題: 虛構的設計工作室網站
(3)導覽列選項/分類項目(對應檔名):首頁 Ann Studio簡介 作品介紹 文章創作 外部連結
(2)設計對象: 設計工作室為設計對象
(3)色彩計畫: 黑 灰 白 深色調
(4)風格設定、預期成效: 以簡約風格作為設計
(5)製作心得: 太多連結會搞混

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445062
(2)網站主題:沖繩

(3)導覽列選項/分類項目(對應檔名):
index首頁
scene-景點介紹
play-遊玩體驗
traffic-交通資訊
movie-影片欣賞

(2)設計對象:大眾

(3)色彩計畫:藍藍的

(4)風格設定、預期成效: 輕鬆舒適


(5)製作心得:所有頁面都做完了,學到了很多css,但找css調整都需要點時間,改的時候總是鬼打牆hot smiley



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

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445077
(2)網站主題:馴龍高手

(3)導覽列選項/分類項目(對應檔名):
index-Hiccup&Toothless
Introduction-角色介紹
Photos-電影劇照
Voice-預告觀賞
music-音樂

(2)設計對象:大眾

(3)色彩計畫:灰、藍 淡色系色調

(4)風格設定、預期成效: 簡約,容易觀賞


(5)製作心得: 蠻好玩的,這次的沒有之前那麼複雜

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

(2)網站主題:bmw
(3)導覽列選項/分類項目(對應檔名):

首頁
性能表現
電氣系統
動力輸出
外部連結

(2)設計對象:大眾

(3)色彩計畫:以土黃為主
(4)風格設定、預期成效:這台車很有越野感覺

(5)製作心得:一直失敗 最終還是一 一擊破



Edited 3 time(s). Last edit at 04/20/2017 09:49AM by 1045445059.
(編輯記錄)

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

(2)網站主題:周杰倫

(3)導覽列選項/分類項目(對應檔名):
首頁–index.html
介紹–Introduction.html
故事–story.html
電影-movie.html
圖片–video.html

(2)設計對象:all of
(3)色彩計畫:灰紅

(4)風格設定:屌屌的
(5)製作心得:累死 深澳



Edited 1 time(s). Last edit at 04/20/2017 08:41AM by 陳柏叡1045445137.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445056
(2)網站主題: 日本插畫家-Maori Sakai
(3)導覽列選項/分類項目(對應檔名):
首頁/index.html
插畫家介紹/about.html
風格介紹/illustration.html
作品欣賞/works.html
影片連結/film.html
(2)設計對象: 大眾,大人小孩都適合
(3)色彩計畫:淺藍色 淺紫色系
(4)風格設定、預期成效: 配合插畫的風格,走清新可愛的路線。
(5)製作心得: 做完很有成就感,看著自己設計的網頁很開心~~

並請回覆:

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445074
(2)網站主題: 關於蔬食;好朋友?

(3)導覽列選項/分類項目(對應檔名):
◎愛好蔬食(index)
◎料理達人 (about)
◎知識你來猜(information)
◎推薦書籍(book)
◎觀看教學 (movie)

(2)設計對象:大眾

(3)色彩計畫:主要以蔬菜為配色計畫,整體鮮豔

(4)風格設定、預期成效: 風格設定: 利用深紫色跟綠色做組合,蔬食意味著鄉村的感覺。
預期成效: 能呈現鄉村做菜的輕鬆感,自己下廚健康充滿自信心。

(5)製作心得: 這次的網頁主題想了很久,但這個主題我很喜歡
以往都是做電影、歌星、店家,這次自己蒐集了資料,
最後做出了類似鄉村風的風格,過程中,雖然常常精神不振,
錯亂很多次,但有老師的影片跟教學,最後成功了。

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

(2)網站主題: BRUNCH 英倫早午餐

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

◆ BRUNCH! -index
◆ 今天吃甚麼? -about
◆ 廚房我作煮 -kitchen
◆ 餐餐四季 -four seasons
◆ 精采部分 -brilliant part

(2)設計對象:大眾

(3)色彩計畫:英國藍色和書裡有的藍綠色來搭配

(4)風格設定、預期成效:
風格設定:用了英國藍的顏色搭配一些藍綠色的搭配和英國國旗的顏色來呈現。
預期成效:希望可以透過這個網站讓大家在美好的週末早晨吃到自己動手做的美味早午餐。

(5)製作心得:雖然遇到了很多的問題,大部分都是連錯檔案,但大致上都有解決了。

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

(2)網站主題:陳大天
(3)導覽列選項/分類項目(對應檔名):

簡介-index.html

演出-show.html

音樂-music.html

主持-preside.html

影片-music.html

(2)設計對象:大眾

(3)色彩計畫:以藍綠色系為主,加上橘色以及綠色做襯托,做出整體協調坦

(4)風格設定、預期成效:風格以活潑俏皮為主希望能夠可以讓看的人輕鬆愉快,

(5)製作心得:完成這次期中作業後,真的對網頁設計有更多的了解,也熟悉了很多,覺得很開心 ><


1、作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445170
2、網站主題:張懸‧焦安溥
3、導覽列選項/分類選項:

  首頁_index
  關於_about
  音樂生涯_music
  社會議題參與_works
  video_video

  設計對象:喜歡音樂的你

  色彩計畫:黑、灰、白
  
  風格設定/預期效果:簡單,有個性。帶出她骨子裡的叛逆和灑脫不羈。也有用一些褐字,帶出他的浪漫、溫暖。

4、製作心得:第一次這麼想把一個網頁做好,可是要交作業前一天才再趕,所以有很多都沒做好,下個作業不會再拖到那麼晚才做了。



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

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

(2)網站主題:李鍾碩

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

首頁:關於他

介紹:他的演藝路程籍資料

戲劇介紹:關於他的戲劇。

畫報欣賞:他拍的雜誌照片

影片欣賞:關於他的影片

(2)設計對象:喜歡李鍾碩的粉絲

(3)色彩計畫:以灰白為主 營造它的酷酷風格

(4)風格設定、預期成效:用比較有質感的配色營造出他的風格加上大理石背景顯得比較有特色

(5)製作心得:終於做完期中了,比以前更熟練些,但製作過程中還是會有一點小問題,未來還要再學習

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

(2)網站主題:櫻花

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

首頁(index):網頁簡介

櫻花介紹(about):介紹各種櫻花

照片欣賞(profile):各種櫻花的照片

櫻花商品(works):介紹有關櫻花的商品

外部連結(link):連結到YouTube的影片

(2)設計對象:大眾

(3)色彩計畫: 以粉色系為主色。

(4)風格設定、預期成效:整個網頁營造一種粉嫩的感覺,背景用一些櫻花的向量圖排列所組成。

(5)製作心得:這次期中讓我遇到許多問題,但那些問題都解決了,並且也學習到新知識,感到很有成就感。

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445065
(2)網站主題: 少女前線
(3)導覽列選項/分類項目(對應檔名):
官網首頁index.html
角色 Character.html
影片 video.html
遊戲內容 4.html
服務條款 5.html
(2)設計對象: 玩家
(3)色彩計畫: 暗色系
(4)風格設定、預期成效: 有
(5)製作心得:開心

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445068
(2)網站主題: 阿甘妙世界
(3)導覽列選項/分類項目(對應檔名):
首頁/index.html
影集線上看/story.html
人物介紹/character.html
連結/links.html
影片連結/video.html
(2)設計對象:大人小孩都可以觀看
(3)色彩計畫:以淡橘色系為主
(4)風格設定、預期成效: 配合卡通走可愛的路線。
(5)製作心得: 做這網頁花了不少心力,終於解脫了

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

(2)網站主題:為這美好世界線上祝福

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

主要人物:對人物的簡單介紹

作品介紹:介紹此作品相關系列作品

主題曲:此作品的片頭曲與片尾曲等等。

動畫線上看:讓觀眾能夠在線上觀賞動畫。

(2)設計對象:動畫愛好者

(3)色彩計畫:以水藍色系為主,以輕盈感及活躍感為主,希望有種接近此作品的主要核心,輕鬆愉快的感覺。

(4)風格設定 :以輕盈感的色彩,簡單悠閒的氣氛為主要核心計畫。

(5)製作心得:覺得網頁設計很有趣,應該說從小就很喜歡這樣的設計,但自從國小之後就非常少接觸網頁設計,感覺又燃起了一種從新學習的感覺,很久沒有這樣得到新技能的感覺了。

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

(2)網站主題:OLIVIA

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

OLIVIA(index):關於奧莉薇的介紹及繪本。

Class Story(painting):繪本故事書介紹。

Related links(related):關於他的網站和商品連結。

Works coiiection(works):作者的插畫集。

Video(video):影片故事。

(2)設計對象:喜歡繪本的朋友

(3)色彩計畫:紅色系。

(4)風格設定、預期成效:以OLIVIA的紅色作為主色系,簡單為主。

(5)製作心得:很難,因為還沒修過基礎網頁,就直接修了進階,剛開始還看不懂,不過都有在看老師的影片,不懂再重複複習,有比一開始好很多。



Edited 1 time(s). Last edit at 04/22/2017 03:55PM by 鄭文茹.
(編輯記錄)

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

(2)網站主題:愛吃鬼巧達

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

首頁:index

故事介紹:an

人物介紹:coco

圖片分享:picture

影片分享:video

(2)設計對象:孩童

(3)色彩計畫:以鮮豔的色彩為主吸引孩童的注目與喜愛。

(4)風格設定:因為裏頭的人物主角顏色都是鮮明的,所以風格上也走覺可愛孩童會喜歡的路線但又不會太複雜。

(5)製作心得:完成這次期中作業後,很多語法還是會忘記不熟練加上要一邊做一邊思考如何
呈現是最好看所以還是覺得蠻困難的,希望自己在每一次的作業上都能讓自己更熟練。

1045445104

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445104
(2)網站主題: vans
(3)導覽列選項/分類項目(對應檔名):
首頁
故事
鞋款介紹
名人穿搭
Vans台灣據點
(2)設計對象: 喜歡街頭文化、流行品牌的人
(3)色彩計畫: 以黑紅為主
(4)風格設定 : 簡約
(5)製作心得:過程真得很辛苦,熬了很久,但成品出來的時候感覺達成小成就。



Edited 1 time(s). Last edit at 04/23/2017 06:36AM by paris0124.
(編輯記錄)

Coraline

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

(2)網站主題:Coraline

(3)導覽列選項/分類項目:
簡介:index
人物介紹:about
劇情介紹:links
製作過程:works
主體色彩:profile

(2)設計對象:喜歡黑色童話的人

(3)色彩計畫:主要用電影中的顏色,以陰鬱的氣氛作為整體的色彩與視覺感受。

(4)風格設定:陰鬱的感覺,讓人有壓力的顏色。

(5)製作心得:有些語法還是會搞混,所以又把一些教學影片重看一次,很想把版面做到最好,但有些設定還是找了很久都找不到,最喜歡劇情版面的感覺。

(1)作業網址: http://mepopedia.com/~css105-2b/midterm/midterm-1045445173
(2)網站主題: 聲之形
(3)導覽列選項/分類項目(對應檔名):
首頁 index.html
人物介紹 about.html
劇情介紹 story.html
電影原聲帶 music.html
預告欣賞 links.html
(2)設計對象:大眾
(3)色彩計畫: 粉色&春天色系(櫻花)
(4)風格設定: 柔和&感情偏向 融入電影
(5)製作心得: 前面做到覺得混亂到處碰瓶頸 不過還是讓它完成了spinning smiley sticking its tongue out

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

(2)網站主題:Microsoft Surface

(3)導覽列選項/分類項目(對應檔名):
01-Surface-首頁
02-Surface Studio 桌上型電腦
03-Surface Book 變形筆記型電腦
04-Surface Pro 4 變形平板電腦
05-Video 產品影音

(2)設計對象:追求新型科技產品的人

(3)色彩計畫:沉穩灰階,加上一點藍色點綴。

(4)風格設定、預期成效:清爽,直觀。

(5)製作心得:好幾次沒存到黨 ,檔名亂跑所以重做... 有點遲交 =ˇ=