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

Advanced

[期中作業] HTML與CSS練習--網站實作

[期中作業] HTML與CSS練習--網站實作

1. 期中作業說明


請參考期中前之講義製作
http://mepopedia.com/~jinjin/web/hw05a/link.html

須具備
1.以課堂練習架構修改為一全新內容的網站。
2.每個連結都要有內容
3.注意配色、設計質感、排版、字體、行間、字體大小等細節,設一一具有設計質感的網站。
4.至少有一頁面需有CSS3的效果,但不可過於誇張。



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

並請回覆:

(1)作業網址:
(2)網站主題:
(2)對象:
(3)色彩計畫:
(4)風格設定、預期成效:
(5)製作心得:
學號



請於規定時間準時繳交作業,逾期不後。





Edited 1 time(s). Last edit at 04/14/2014 08:43PM by JinJin.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445213
(2)網站主題:Sodagreen蘇打綠
(2)對象:Sodagreen蘇打綠粉絲
(3)色彩計畫:簡單不單調、文青
(4)風格設定、預期成效:風格走的是跟蘇打綠一樣的簡約風,比預期的好些。
(5)製作心得: 進階的網頁比一年級的難了些,但製作過程有些小困難有請同學幫忙,之後就做的非常順利。
學號 1015445213

1005445160 - 王思博

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1005445160
(2)網站主題:阿甘妙世界
(3)對象:喜歡阿甘妙世界的人
(4)色彩計畫:暗色系
(5)風格設定、預期成效:有簡單的感覺,可以方便了解阿甘妙世界的資訊。
(6)製作心得: 努力地摸索和嘗試才可以了解架設網頁的構造,連結很煩。

(1)作業網址: http://mepopedia.com/~web102-c/midterm/midterm-1015445206
(2)網站主題: 客家本色
(2)對象: 客家人或對客家文化有興趣的人
(3)色彩計畫: 客家的鮮豔色調
(4)風格設定、預期成效: 純樸
(5)製作心得: 終於靠自己 做出了網頁 哈哈 很爽

1015445206

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445203
(2)網站主題:ZEDGE
(2)對象:喜歡免費欣賞及下載圖片、鈴聲、主題的電腦使用者
(3)色彩計畫:粉紅色系
(4)風格設定、預期成效:簡單、清新的風格,希望能讓使用者看得很舒服
(5)製作心得:很喜歡使用CSS3的效果,比原先未使用的頁面好看很多,感覺更有質感,不過為了CSS3有花一點時間去了解如何使用,使用到新學習到的東西感覺很棒!

學號 1015445203 梁誠翎

(1)作業網址: http://mepopedia.com/~web102-c/midterm/midterm-1015445215
(2)網站主題: Coldplay (酷玩樂團)
(2)對象: 喜歡酷玩樂團或是喜歡聽西洋歌曲的人
(3)色彩計畫: 灰色系
(4)風格設定、預期成效: 極簡風格,整體感看起來簡單乾淨
(5)製作心得:很多語法,頭昏眼花狀態下還是努力做完了,之後若有做修改或改善再重新上傳

1015445215

(1)作業網址: http://mepopedia.com/~web102-c/midterm/midterm-1015445234
(2)網站主題:百年的新娘
(2)對象: 喜歡此劇的人
(3)色彩計畫: 神祕感
(4)風格設定、預期成效:神秘的氛圍,整體乾淨
(5)製作心得: 最近喜歡的韓劇做起來特別有fu.
學號 1015445234

(1)作業網址:
http://mepopedia.com/~web102-c/midterm/midterm-1015445207

(2)網站主題:芋圓柚子 OEURstudio
(2)對象: 喜歡看實況的人

(3)色彩計畫: 暖色調.白色.灰色
(4)風格設定、預期成效:清爽.可愛。預期效果自己很滿意ww

(5)製作心得:
終於做完拉!!!花了兩天的時間在做!設計都改了!完成後超爽阿!!!L(˙ U ˙

學號1015445207



Edited 1 time(s). Last edit at 04/14/2014 02:10AM by FF.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445201
(2)網站主題:森林戰士
(2)對象:大眾
(3)色彩計畫:以綠色色調為主
(4)風格設定:簡單清新的感覺
(5)製作心得:越做越熟悉,終於完成做出來了
學號 1015445201

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445232
(2)網站主題:柑橘
(2)對象:大眾
(3)色彩計畫:柔和
(4)風格設定、預期成效:簡潔
(5)製作心得: 越來越上手了,希望可以越來越好

1015445232

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445212
(2)網站主題:野獸冒險樂園
(2)對象:喜愛野獸冒險樂園的大人小孩
(3)色彩計畫:憂鬱舒適 藍藍綠綠
(4)風格設定、預期成效:瀏覽時舒服且明瞭 配色舒適
(5)製作心得: 更加了解了連結的部分也更順暢了 希望下次可以做出真正屬於自己的排版

grinning smiley
1015445212

1015445202

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445202
(2)網站主題:KIKO
(3)對象:水原希子的粉絲還有還不認識水原希子的人
(4)色彩計畫:粉色系
(5)風格設定、預期成效:有甜美個性的感覺,可以方便了解KIKO的資訊。
(6)製作心得: 越做越上手做完覺得好好玩

1015445257 管胤筑

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445257
(2)網站主題:天兵公園
(3)對象:喜歡天兵公園這部卡通的人
(4)色彩計畫:藍色系
(5)風格設定、預期成效:簡單 清晰 明瞭的感覺
(6)製作心得: 漸入佳境有越來越好的感覺

(1)作業網址: http://mepopedia.com/~web102-c/midterm/midterm-1015445252
(2)網站主題:Disney迪士尼-Dumbo小飛象
(2)對象: 喜愛迪士尼動畫,迪士尼陪伴成長
(3)色彩計畫: 活潑色彩
(4)風格設定、預期成效: 可愛
(5)製作心得:做完了做完了 smileys with beer
每一次都有新的語法可以學,感覺比之前做的豐富。
經過多次製作摸索,對語法有比較熟悉了。
1015445252

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445240
(2)網站主題:少女時代
(2)對象:喜歡少女時代的人
(3)色彩計畫:粉紅色、白色
(4)風格設定、預期成效:柔和風格
(5)製作心得:很喜歡她們的音樂,所以介紹她們,很高興完成一個完整的網頁,希望還能再學到更多。

1015445240

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445269
(2)網站主題:Happy Tree Friends開心樹朋友
(2)對象:十五歲以上
(3)色彩計畫:橘色黃色灰色做高短調
(4)風格設定:利用鮮明的橘黃色製造輕新的熱情感
(5)製作心得:有些地方想做得更與眾不同卻做不出來,語法寫得多有時候容易搞混。

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445233
(2)網站主題: Alice in Wonderland
(2)對象: 喜歡魔鏡夢遊的人
(3)色彩計畫: 神秘.森林.奇幻
(4)風格設定、預期成效: 有電影本身設定畫面的感覺,奇幻的世界
(5)製作心得: 終於做出來了終於做出來了終於做出來了啦
學號 1015445233



Edited 4 time(s). Last edit at 04/15/2014 01:20AM by wdcwxx4ea.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445223
(2)網站主題:NIKE JORDAN
(2)對象:喜愛NIKE JORDAN鞋的人
(3)色彩計畫:簡單暗灰白
(4)風格設定、預期成效:極簡瘋格,選擇暗灰色系
(5)製作心得:有越來越順手,雖然中間還是昱到小困難,但還是有解決

MEPOERs said:
JinJin: 連結有誤,請檢查修正
(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445218
(2)網站主題:jill's糖果店
(2)對象:喜歡吃糖果的人
(3)色彩計畫:粉橘紅色為主色、黃色為輔助色
(4)風格設定、預期成效:色彩繽紛、甜美感,讓人看了有暖暖甜甜的感覺。
(5)製作心得:
要設定一個主題然後一直延伸下去,
做到後來裡面的東西有點不知道該放甚麼,
第一次不是以原本就有的主題來作更改,
而是用自己想的主題來設計,
做完感覺真的很開心,
很想開間糖果店了呢>grinning smiley<
1015445218



Edited 1 time(s). Last edit at 04/15/2014 02:10AM by 1015445218.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445261
(2)網站主題:Skyrim
(2)對象:遊戲玩家
(3)色彩計畫:黑色系
(4)風格設定、預期成效:低調內斂.簡單
(5)製作心得:摸索了很久,但基本架構都更加了解,

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445228
(2)網站主題: 那朵花
(2)對象: 對這部動畫的人
(3)色彩計畫: 綠色 白
(4)風格設定、預期成效:清新
(5)製作心得: 又看一次預告跟在全部再看一次,媽呀眼睛流汗拉~ 然後實作部分其實只要找對地方就好(?
學號 1015445228

MEPOERs said:
JinJin: 某些連結有誤,請再檢查
(1)作業網址: http://mepopedia.com/~web102-c/midterm/midterm-1015445219
(2)網站主題:大好き(吃)eat!eat!eat!eat!
(2)對象: 給喜歡吃的人
(3)色彩計畫: 綠色系
(4)風格設定、預期成效: 插畫風格、希望能有舒服的感覺
(5)製作心得:本來想加進去可以有雙欄的
但是不知道為什麼變得很lag 就不用了sad smiley

1015445219

http://mepopedia.com/~web102-c/midterm/midterm-1015445243

(1)作業網址:
(2)網站主題:A咖傑森
(2)對象: 想認識她的人
(3)色彩計畫: 黃色 咖啡色系
(4)風格設定、預期成效: 成效就這樣~~看了就知道
(5)製作心得: 做到眼睛快脫窗了~~~
1015445243

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445222
(2)網站主題:Adidas愛迪達概念網頁
(2)對象:使用愛迪達運動品牌的人兒
(3)色彩計畫:藍色.綠色
(4)風格設定、預期成效:風格是清爽的感覺.不使用過多的色彩。
(5)製作心得: 進階的網頁比一年級的難了些,有些分頁不知道為啥改一改顏色不一樣,還需努力嗚嗚。




學號 1015445222

MEPOERs said:
JinJin: 某些連結有誤,請檢查修正
作業網址為http://mepopedia.com/~web102-c/midterm/midterm-1015445225

並請回覆:

(1)作業網址:
(2)網站主題: 神偷奶爸
(2)對象: 小屁孩
(3)色彩計畫: 蘭 白
(4)風格設定、預期成效: 色塊
(5)製作心得: 我ㄉ眼睛要蝦ㄌ!
學號

MEPOERs said:
JinJin: 某些連結有誤,請檢查修正
(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm_1005445052
(2)網站主題:Rover Shop流浪者商店
(2)對象:網拍買家
(3)色彩計畫:牛皮質感的絡黃色、皮革酒紅、印章塗鴉的復古黑
(4)風格設定、預期成效:採用波西米亞手繪風,以簡單、純樸、有質感的塗鴉來呈現,預期成效...還行,因為我還是覺得我的手繪處理不到那樣的感覺。
(5)製作心得:很想睡,不知為何我的Dreamweaver複製貼上語法的時候,他整個是列為同一排....沒有空格及換行。我花大部份的時間都在排版程式碼...當下我是一整個傻眼,因為論網頁設計,我最討厭的就是看語法。不料那天被語法這樣惡整,至少因為這樣我稍稍習慣語法,沒像之前那麼討厭它了。(我還是很討厭語法。)我很想趁沒那麼討厭它的時候好好學好網頁設計。

學號:1005445052



Edited 1 time(s). Last edit at 04/15/2014 09:17AM by 麥可.
(編輯記錄)

MEPOERs said:
JinJin: 某些連結有誤,請檢查修正
(1)作業網址: http://mepopedia.com/~web102-c/midterm/midterm-1015445254
(2)網站主題: 急診男女
(2)對象: 喜愛韓劇
(3)色彩計畫: 藍色系
(4)風格設定、預期成效:簡單 明瞭
(5)製作心得: 在過程中真的卡了好幾次,但做完頗有像一個網頁的很開心^^

(1)作業網址: http://mepopedia.com/~web102-c/midterm/midterm-1015445248
(2)網站主題: Lorde
(2)對象: 喜歡Lorde的粉絲或喜歡她音樂的人
(3)色彩計畫: 簡單,整體是舒服的
(4)風格設定、預期成效: 用簡單下去製作,讓人看的是舒服的
(5)製作心得: 剛開始做覺得有些困難,但製作到後面就越來越有成就感

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445208
(2)網站主題:mt紙膠帶
(2)對象:女性、喜愛手工創作
(3)色彩計畫:日式風
(4)風格設定、預期成效:很有手作日式風格
(5)製作心得:超超超超超超超超超超超超超開心,超喜歡紙膠帶,想分享紙膠帶的好,分享紙膠帶的應用



Edited 1 time(s). Last edit at 04/15/2014 04:09PM by 1015445208.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web102-c/midterm/midterm-1015445227
(2)網站主題: E'Z Chocolat
(2)對象: 喜歡E'Z Chocolat的巧克力
(3)色彩計畫: 簡單
(4)風格設定、預期成效:讓人進入巧克力的世界
(5)製作心得:剛做的時候覺得很複雜後來越做越熟悉。

MEPOERs said:
JinJin: profile.html配色再修正
(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445239
(2)網站主題:CLOT
(2)對象:CLOT消費者
(3)色彩計畫:酒紅以及簡單的白色
(4)風格設定、預期成效:以LOGO顏色做配色 與官網一樣簡單的風格
(5)製作心得: spinning smiley sticking its tongue out

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445271

(2)網站主題:咖啡元素

對象:年齡層在20~70歲

(3)色彩計畫:暖色系

(4)風格設定、預期成效:溫順柔和,帶一點高貴的感覺

(5)製作心得:需要摸索一段時間才會全部搞懂.




學號 1015445271

MEPOERs said:
JinJin: 路徑須修正
(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445214
(2)網站主題:醜比頭官方網站
(2)對象:喜歡醜比頭的人
(3)色彩計畫:粉嫩色系
(4)風格設定、預期成效:風格粉嫩的襯托出醜比頭色彩鮮豔多彩的概念
(5)製作心得: 進階的網頁比之前的複雜了一點但是摸很久還是OK的




學號 1015445214

(1)作業網址: http://mepopedia.com/~web102-c/midterm/midterm-1015445220/index.html
(2)網站主題: Zihling
(2)對象: 喜愛繪師"Zihling"的粉絲或是對有點華麗又有點詭異的洋娃娃風格感興趣的人
(3)色彩計畫: 以偏冷色調的湖水藍綠色搭配上甜美的粉色系
(4)風格設定、預期成效: 想呈現甜美中又帶一點淡淡憂鬱的氛圍
(5)製作心得: 雖然有一些比較細微的設定還是需要靠別人的教學,但是做完的時候真的很有成就感~
學號 1015445220

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445245
(2)網站主題:膽小狗英雄
(2)對象:童年有膽小狗英雄陪伴的人
(3)色彩計畫:簡單,帶點可怕的感覺
(4)風格設定、預期成效:有點尷尬的配色,但還不會說很難看
(5)製作心得: 多了一點點的難度,但一切還算是順利 。
只是家裡沒有CS6有些功能好像跑不出來..有點怪..但一切都還是ok的^^
學號 1015445245

MEPOERs said:
JinJin: 漸層標題區塊要再調整配色!
(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445226
(2)網站主題:Green Bubble
(2)對象:喜歡糖果的
(3)色彩計畫:以綠色調為主
(4)風格設定、預期成效:簡單乾淨
(5)製作心得: 有更瞭解一點
每頁都有完成可是傳上ftp開不了
上課帶檔繳交

MEPOERs said:
JinJin: 連結設定有誤喔!!請再檢查修正
(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445209
(2)網站主題:國蛋
(2)對象:國蛋
(3)色彩計畫:藍色系
(4)風格設定、預期成效:憂憂愁感 , 像是吃了迷幻藥 , 符合他的專輯
(5)製作心得:有了dw學起來較容易些 , 但學得還不夠精
學號: 1015445209

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445236
(2)網站主題:蛋堡
(2)對象:對蛋堡有興趣的人
(3)色彩計畫:簡潔黃色色塊
(4)風格設定、預期成效:嘻哈跳tone的風格
(5)製作心得: 雖然覺得很難 , 但是還是努力做出來了!
學號 1015445236

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445231
(2)網站主題:不幸少女
(2)對象:15歲以上
(3)色彩計畫:簡單
(4)風格設定、自我風格
(5)製作心得: 難
學號 1015445231

(1)作業網址:
http://mepopedia.com/~web102-c/midterm/midterm-1015445242
(2)網站主題: 美國隊長
(2)對象:電影迷
(3)色彩計畫: 紅黑藍
(4)風格設定、預期成效: 尊貴又帥氣的表現方法
(5)製作心得: 雖然沒有本來預期的效果與樣子 但是我覺得靠自己的拼湊加上同學一點幫助真的是很有成就感啦!
學號 1015445242

(1)作業網址: http://mepopedia.com/~web102-c/hw04/hw04-1015445221
(2)網站主題: 漢尼拔影集的推廣
(2)對象: 18歲以上 心智年齡成熟 喜歡看推理犯罪的人
(3)色彩計畫: 暗紅 亮紅 黑 灰 白
(4)風格設定、預期成效: http://www.nbc.com/hannibal
希望以喜歡影集的這種風格為發想,套用老師的版型進行變化

(5)製作心得: 終於有圖片原來是要插入影像
連結都重新設置過裡面暗藏玄機 smiling smiley
不斷觀看老師的教學影片終於做出來了 grinning smiley

學號 1015445221



Edited 2 time(s). Last edit at 04/22/2014 10:04PM by 姚少涵.
(編輯記錄)

(1)作業網址: http://mepopedia.com/~web102-c/midterm/midterm-1015445216/
(2)網站主題: LOG HORIZON
(2)對象: 喜歡這部動畫的
(3)色彩計畫: 冷色調
(4)風格設定、預期成效: 預定是清爽的風格但很多東西一直弄不出來....
(5)製作心得: 上排按鈕及標題的背景照著步驟還是弄不上去,最後真的沒辦法只好放棄||||
學號 1015445216

(1)作業網址: http://mepopedia.com/~web102-c/hw06/hw06-1015445246
(2)網站主題: 分歧者
(2)對象: 喜愛觀賞外國影集的人
(3)色彩計畫: 灰色系
(4)風格設定、預期成效: 整部影片多以灰色系讓人有科幻的感受。
(5)製作心得:遇到相當多瓶頸,還好感謝朋友的指導



Edited 4 time(s). Last edit at 06/26/2014 10:44AM by 1015445246.
(編輯記錄)

(1)作業網址:http://mepopedia.com/~web102-c/midterm/midterm-1015445264
(2)網站主題:幸運星
(2)對象:幸運星介紹
(3)色彩計畫:藍色調為主
(4)風格設定、預期成效:。
(5)製作心得:很複雜。
學號 1015445264

學號1015445229

(1)作業網址: http://mepopedia.com/~web102-c/midterm/midterm-1015445229
(2)網站主題: 明日邊界EDGE OF TOMORROW
(2)對象: 喜愛科幻電影及湯姆克魯斯的大家
(3)色彩計畫: 灰、黑、藍、金
(4)風格設定、預期成效:用現有的素材製造不一樣的質感
(5)製作心得:要配出適當顏色及有整理感相當不容易

(1)作業網址:http://mepopedia.com/~web102-c/hw06/hw06-1015445260/
(2)網站主題:女人30情定水舞間
(2)對象: 喜歡台灣戲劇 女人30情定水舞間 的影迷
(3)色彩計畫: 使用藍色系
(4)風格設定、預期成效:水舞間,所以運用了藍色系去做搭配,比預期的還可以
(5)製作心得:雖然有困難,但主題用自己喜歡的內容,做起來比較開心



Edited 1 time(s). Last edit at 06/26/2014 11:37AM by 1015445260.
(編輯記錄)