[color=#990000][期末作業] 以雙欄為主的網站設計[/color]

[hr]

1. 製作說明：

1.請參考期末之前教過的做法及講義，製作以雙欄(多欄)為主的網站。

2.題目自訂，可以延續期中作業的主題，也可以是全新的主題。

3.必須考慮設計風格與質感，並需自行設計圖片，製作網站內容。

4.需以Float浮動的方式建立雙欄(多欄)(不限定每頁都須雙欄)、DIV搭配CSS的方式完成，設定尺寸、字體、顏色等等。

5.至少需包含
(1).Table：表格→匯整資料，
(2)Float→繞圖排文，
(3)臉書、噗浪等推文設定，
(4)圖片跳窗連結，
(5)導覽列設定。


6.製作完成上傳至FTP


[hr]

2. 作業設計重點

[color=#CC0000](1)能自行設計以DIV與CSS製作的網站
(2)利用float設計雙欄網站
(3)利用項目清單設計導覽列
(4)利用自已設計的圖片、色彩搭配與字體設定等設計出具有質感的網頁[/color]

3. 評分標準與製作檢核

1.雙欄的製作(Float的使用)，不同的連結方式
2.HTML的正確架構(DIV的使用)
3.整體設計美感(CSS運用，風格及配色，字體設定、圖片製作)
4.導覽列的正確性(含導覽超連結)
5.表格、繞圖排文、推文等設定
6.HTML Title的設定，Footer的版權宣告
7.內容的完整性
8.製作說明

[hr]

4. 繳交作業方式

[color=#CC0066]1.製作完成後，檔案命名方式：[/color]

[color=#669900]期中作業FTP上的資料夾為：final

每位同學請將自己的資料夾命名為：final-學號
這個作業的網址則為:http://mepopedia.com/~web103-c/final/final-10254452XX

資料夾內含：
(1).首頁命名為index.html
(2).其他頁面請自行命名，但需注意命名為則，不可出現中文及全形字、特殊符號等等
(3).一個命名為style.css的css樣式檔
(4).存放圖檔的images資料夾

存放在 < final-學號 > 的資夾內[/color]


[color=#CC0066]2.全部完成後上傳至FTP[/color]

[color=#CC0066]3.依進度回覆本篇文章[/color]

[hr]

5. 回覆說明

[color=#0066CC]完成品[/color](1/13前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址：
(2).
1.製作作業的時間：
2.有無遇到的問題：
3.製作心得與感想：
4.本學期於網頁設計課程上的收穫：
[color=#CC0066]4.請務必在1/6前回覆，否則為遲交[/color]


[color=#0066CC]前置作業[/color](12/17)
(1)網站主題：
(2)導覽列架構設定

範例參考(可下載參考附檔的做法)：
[IMG]http://i556.photobucket.com/albums/ss1/whc915/webtree.jpg[/IMG]

(3)尺寸與架構設定

範例參考：
[IMG]http://i556.photobucket.com/albums/ss1/whc915/web-layout.jpg[/IMG]

(4)主要瀏覽族群：
(5)風格設定：
(6)主色調，輔助色調：
(7)製作動機：
(8)製作目的：
預期效果：

(8)資料蒐集分析

[color=#CC0099]◎設計優良網站(風格)列表與分析
[作業] 優良設計網站蒐集與分析 http://mepopedia.com/forum/read.php?2024,68212
並將網站分析於12/17前回覆於前述網址[/color]

◎相關網站列表與分析：


[hr]

6. 期末作業進度參考

第十二週12/03　題目及網站架構確定/版型、尺寸確定，資料蒐集與網站分析
第十三週12/10　資料蒐集與網站分析、圖片製作，內容建構
第十四週12/17　圖片製作，內容建構
第十五週12/24　檢討與修正
第十六週12/31　檢討與修正
第十七週01/07　細修、完成與上傳
第十八週01/14　期末作業發表與檢討 Presentation【期末作業】


[hr]
[color=#CC0066]進階參考：ubuntu網頁設計規範手冊 ubuntu Web Design Guidelines[/color]
http://design.ubuntu.com/web
下載：http://design.canonical.com/brand/D.%20Ubuntu%20Web%20Guidelines.pdf
[hr]

7. 學長姐作品參考

-

[size=small](1) 作業網址： http://mepopedia.com/~web100b/final/final-1001445022
(2).
　1. 製作作業的時間：超過二十四小時
　2. 有無遇到的問題：[color=#9999CC]同樣是跨瀏覽器的問題
　　　　　　　　　　還有關於 content 裡面的 L 跟 R 的問題
　　　　　　　　　　就算跟著老師的方法做也一樣不會跟著跑這樣[/color]
　　　　　　　　　　[color=#FF0000]這些問題已經從老師那裡得到解答，解決囉！：）[/color]
　3. 製作心得與感想：雙欄式的網頁真的困難重重
　　　　　　　　　　但很高興我能從這樣的網頁中學會自己克服困難、解決問題
　　　　　　　　　　做完之後很有成就感，很高興：）

-

(1) 網站主題：金在中／東方神起
(2) 導覽列架構設定：
[IMG]http://i.imgur.com/E8uEV.jpg[/IMG]
(3) 尺寸與架構設定：
[IMG]http://i.imgur.com/FUmdw.jpg[/IMG]
(4) 風格設定：簡約、華麗、精緻
(5) 主色調，輔助色調：紅、黑；白、飽和度不依的紅、灰，等
(6) 製作動機：
　　 　喜歡一個人不能只是看外表，很多人因為他的長相而喜歡他
　　 　哪天他的髮型換了，身材變了，沒有了原本的帥氣，就不喜歡了
　　 　最討厭這種人‥
(7) 製作目的：讓更多人認識金在中這個人

預期效果： 呈現擁有自我風格的雙欄式網頁[/size]

[hr]

1. 其他作品

http://mepopedia.com/~web100b/final/final-1001445042/
http://mepopedia.com/~web100b/final/final-1001445123/
http://mepopedia.com/~web100b/final/final-1001445004/index1.html
http://mepopedia.com/~web100b/final/final-1001445049/
http://mepopedia.com/~web100a/final/final-1001445021/
http://mepopedia.com/~web100a/final/final-1001445013/

http://mepopedia.com/forum/read.php?1173,27998

[hr]

=================================================
[color=#CC0066]※期末作業無論如何請一定要繳交，否則以期末以零分計※
※若經發現作業為直接複製同學檔案以零分計※[/color]
=================================================

http://youtu.be/JhWaXP7wCrI





(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445072
(2).
1.製作作業的時間：很多個禮拜
2.有無遇到的問題： style.css世連在一起的
3.製作心得與感想： 只要有上課基本上是都會
4.本學期於網頁設計課程上的收穫：很開心多學會了一個軟體 而且還能做出一個屬於自己的網頁









(1)網站主題： 蔡健雅
(2)導覽列架構設定

[img]https://fbcdn-sphotos-b-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/10850084_1013130948704502_1683170836213164828_n.jpg?oh=315a10b2dee08c6ba10d330979e5bbbc&oe=5506B4D4&__gda__=1426147204_9f334db9bf0a2f2405b2df2326ed04f7[/img]

(3)尺寸與架構設定
[img]https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/10445932_1013130952037835_4213444774695907691_n.jpg?oh=86e6076a0b9fbe62cb5589638bdad96f&oe=553DA76F&__gda__=1426851391_d584058b0a3d4749c2ed671f87ed4fac[/img]

(4)主要瀏覽族群： 喜歡蔡健雅的人
(5)風格設定： 簡單
(6)主色調，輔助色調： 白 黑 粉
(7)製作動機： 喜歡聽她的歌～
(8)製作目的： 給更多人聽到他的歌聲
預期效果： 簡單明瞭

(8)資料蒐集分析
http://www.k-arena.com.tw/project1.aspx?ser=194


1025445072王人永



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445141
(2).
1.製作作業的時間： super久
2.有無遇到的問題：影片嵌入不會用
3.製作心得與感想： 很有成就感
4.本學期於網頁設計課程上的收穫：學會很多東西 很有成就感
(1)網站主題： g dragon
(2)導覽列架構設定
(3)尺寸與架構設定
(4)主要瀏覽族群： 年輕族群
(5)風格設定： 流行
(6)主色調，輔助色調： 灰色系
(7)製作動機： 喜歡g dragon
(8)製作目的： 交作業
預期效果： 帥氣

(8)資料蒐集分析 http://www.ygfamily.com/artist/About.asp?LANGDIV=K&ATYPE=2&ARTIDX=10



1025445141 王心仁



(編輯記錄)

1025445096 徐琬凌

作業網址:http://mepopedia.com/~web103-c/final/final-1025445096

1.製作作業的時間：一天
2.有無遇到的問題：常常當機，搞得自己很緊張
3.製作心得與感想：有點成就感，而且內容是自己感興趣的東西，所以做得很開心
4.本學期於網頁設計課程上的收穫：學會很多事情

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025443044/
(2).
1.製作作業的時間： 2天
2.有無遇到的問題： 一半一半
3.製作心得與感想： 還需要再多熟練一點做起來比較順
4.本學期於網頁設計課程上的收穫：學會自己設計網頁做完一個完整的網頁
雖然做的不是很好，但會有成就感


網站主題： 米奇
導覽列架構設定
[img]https://fbcdn-sphotos-a-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/10891940_1529444603985624_7246562678171159020_n.jpg?oh=4a17a85dcc6a79aa22f59347547c8bdb&oe=552C06D5&__gda__=1425616108_d831dc65cb5af12e0aead2c59611bc43[/img]
(3)尺寸與架構設定
[img]https://scontent-a-ams.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/10858020_1523187117944706_8036979159431813447_n.jpg?oh=da99af27a7b15bfdefb372bbe57b27c3&oe=5542F15A[/img]
(4)主要瀏覽族群：喜愛米奇的人
(5)風格設定： 簡單明瞭
(6)主色調，輔助色調： 白 黑 紅
(7)製作動機： 經典卡通人物，大家都喜愛也都認識
(8)製作目的： 統整資料
預期效果：一眼就看得出米奇主色調

(8)資料蒐集分析
http://disney90.com.tw/


1025443044王薏茹



(編輯記錄)

(1) 作業網址 : http://mepopedia.com/~web103-c/final/final-1025445036

(2) 1.製作作業的時間 : 4天
2.有無遇到的問題 : 整個架構有點難
3.製作心得與感想 : 這次覺得比較難花了很久的時間才弄懂
4.本學期於網頁設計課程上的收穫 : 覺得對於網站的排版和色彩配色有慢慢進步

1025445036 李易達

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445120
(2).
1.製作作業的時間： 很久很久～～～～
2.有無遇到的問題： 應該沒有
3.製作心得與感想： 頭昏眼花 亂七八糟 複雜！
4.本學期於網頁設計課程上的收穫： 很雜但做完很開心 需要分析一切有點煩



(1)網站主題：flumpool
(2)導覽列架構設定
(3)尺寸與架構設定
[img]https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10338223_734388613319833_3618049492294404269_n.jpg?oh=0ea1bc65c23fe961417d494881f5a54c&oe=5547348F&__gda__=1426609637_c46203c9c2a9a9ef51f52ad69673e1e5[/img]




(4)主要瀏覽族群： 想看的人
(5)風格設定： 簡單
(6)主色調，輔助色調： 白 黑 粉
(7)製作動機： 喜歡
(8)製作目的： 想做
預期效果： 能做完就好～


1025445120



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web103-c/final/final-1025445069
(2).
1.製作作業的時間：1~兩天
2.有無遇到的問題：都還好 只是剛開始FOOTER一直歪掉 後來好了
3.製作心得與感想：很有成就感
4.本學期於網頁設計課程上的收穫： 從完全不會到現在能做出一個還滿像樣的網站 覺得很開心 學到新的東西



(1)網站主題： 電台司令radiohead
(2)導覽列架構設定
[img]https://fbcdn-sphotos-e-a.akamaihd.net/hphotos-ak-xaf1/v/t1.0-9/10343495_1013342545350009_7478531594898592021_n.jpg?oh=d091291fc1e70a15618e207b8784ac45&oe=54FA0601&__gda__=1430274742_563299c70836bcd790d621a24c9463d6[/img]

(3)尺寸與架構設定
[img]https://scontent-b-pao.xx.fbcdn.net/hphotos-xfp1/v/t1.0-9/10382816_1013342552016675_8179642729745414489_n.jpg?oh=53c9071746eb03e386b17c03b03f38e8&oe=5510DB4A[/img]

(4)主要瀏覽族群： 大眾
(5)風格設定： 簡約
(6)主色調，輔助色調：藍色 灰色 白色 黑色 紅色
(7)製作動機： 喜歡這個樂團
(8)製作目的： 統整資料
預期效果： 簡單明瞭

1025445069 古珮儒



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445060
(2).
1.製作作業的時間： 好幾個禮拜
2.有無遇到的問題： CSS一直會跑掉，但後來問老師有解決問題了
3.製作心得與感想： 雙欄比單欄難，語法太多有時會亂掉
4.本學期於網頁設計課程上的收穫：多學了一種軟體覺得還不錯 雖然有時真的感覺很難
但完成之後會很有成就感。







1) 網站主題：八三夭
(2) 導覽列架構設定：

(3) 尺寸與架構設定：

(4) 風格設定：簡單，質感
(5) 主色調，輔助色調：灰黑加上一點點藍綠色
(6) 製作動機：
　　 　因為最近很喜歡聽八三夭的音樂，因此想製作有關八三夭的網頁，
並且介紹一些好聽的歌曲。
(7) 製作目的：讓八三夭的歌能讓更多的人知道

預期效果： 呈現與八三夭符合的風格


1025445060 黃淯婷



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445153
(2).
1.製作作業的時間：很多個禮拜
2.有無遇到的問題：很多很複雜有點亂掉
3.製作心得與感想： 做完很有成就
4.本學期於網頁設計課程上的收穫：覺得學會這個可以賺很多錢


(1) 網站主題：selena gomez魅力非凡
(2) 導覽列架構設定：
[url=http://imgur.com/BCXxGck][img]http://i.imgur.com/BCXxGck.jpg[/img][/url]

(3) 尺寸與架構設定：
[url=http://imgur.com/ZZbvHXh][img]http://i.imgur.com/ZZbvHXh.jpg[/img][/url]

(4) 風格設定：簡約、黑色、精緻
(5) 主色調，輔助色調：黑、深紫、藍...寒色系等顏色。
(6) 製作動機：
　　 　因為很喜歡selena gomez，出生於美國得克薩斯州，美國女演員、歌手。
(7) 製作目的：讓更多人認識selena gomez的歌曲和許多影集。
預期效果： 簡約極致黑

1025445153 廖敏君



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445147
(2).
1.製作作業的時間： 二天多
2.有無遇到的問題：有點複雜
3.製作心得與感想： 雙欄比單欄難，也沒到我想要出現的東西
4.本學期於網頁設計課程上的收穫：有時覺得複雜，但完成時會有種成就感，雖然有時會出小差錯

(1)網站主題：ARASHI
(2)導覽列架構設定
網站主題：ARASHI
[img]http://i.imgur.com/K1YA1WO.jpg[/img]
(3)尺寸與架構設定
[img]http://i.imgur.com/pBBLBxC.jpg[/img]
(4)主要瀏覽族群：ARASHI的粉絲
(5)風格設定： 簡單明瞭
(6)主色調，輔助色調： 白 灰 黑 團員代表色
(7)製作動機：最近迷上的團體
(8)製作目的： 統整資料
預期效果：清楚明瞭

1025445147 張郁



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445051/



1.製作作業的時間： 4個小時吧
2.有無遇到的問題： 一直怪怪的,絕對要用 “Opera”瀏覽器才是正確的,用ie或其他網頁都怪怪的
3.製作心得與感想： 很充實但真的要打好基礎
4.本學期於網頁設計課程上的收穫： 很亂但作完很充實


(1)網站主題：The Dinner
(4)主要瀏覽族群： 喜歡吃brunch的人
(5)風格設定： 美式風格帶點日式風格
(6)主色調，輔助色調： 白 黑 紅 黃
(7)製作動機： 剛好在跟朋友約brunch
(8)製作目的： 想練習
預期效果：完整度好舊好


1025445051 林芳伃



(編輯記錄)

作業網址： http://mepopedia.com/~web103-c/final/final-1025445015
1.製作作業的時間： 每個晚上累積做出來的
2.有無遇到的問題： 無
3.製作心得與感想： 完成後很感動
4.本學期於網頁設計課程上的收穫：
　　網頁需要認真聽老師講解，也需要相當大的耐心和時間，對於自己做出來的成果也滿滿意的，感謝老師和同學指導。


(1)網站主題： Jessica & Krystal(韓國藝人姐妹)
(2)導覽列架構設定

(3)尺寸與架構設定

(4)主要瀏覽族群： 喜歡這對姊妹的粉絲
(5)風格設定： 個性、簡潔
(6)主色調，輔助色調： 深藍色、紅，灰白
(7)製作動機： 讓更多人瞭解她們
(8)製作目的： 瞭解做明星的辛苦，不是看似光鮮亮麗，實際上付出多倍的努力。
預期效果： 能呈現更清楚的資料給大家觀賞

(8)資料蒐集分析
http://www.avex.com.tw/fx/version04/
http://www.avex.com.tw/fx/version07/
這是F(x)團體其中兩張專輯的官方網站，都走個性、視覺化的感覺。


10254445015陳曉琪



(編輯記錄)

完成品(1/13前)
請將這項放置於文章最前面
(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445090/
(2).
1.製作作業的時間： 兩天吧
2.有無遇到的問題： 語法搞混
3.製作心得與感想： 完成一個偉大的網頁很滿足
4.本學期於網頁設計課程上的收穫： 有很大的收穫


前置作業(12/17)
(1)網站主題： Imagine Dragons
(2)導覽列架構設定[img]https://scontent-b-pao.xx.fbcdn.net/hphotos-xpa1/v/t1.0-9/10380319_859583470729464_2545068424518401824_n.jpg?oh=c3f5c6ed81703e6268abac1482b52aac&oe=553BB2FF[/img]
(3)尺寸與架構設定
[img]https://scontent-a-pao.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/10559730_859583447396133_8008408593659569770_n.jpg?oh=355c7cf9a4c9ff6323a1f3b11ea03030&oe=550A78BA[/img]
(4)主要瀏覽族群： 會喜歡音樂的人
(5)風格設定： Imagine Dragons風格
(6)主色調，輔助色調： 藍 紅 黃
(7)製作動機： 喜歡Imagine Dragons
(8)製作目的： 介紹給大家
預期效果： 簡單明瞭

1025445090 鍾婷玟



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445102
(2).
1.製作作業的時間：兩三個禮拜
2.有無遇到的問題： 有些語法不知道該是運用在哪
3.製作心得與感想： 看到完成品很有成就感，但是好累~
4.本學期於網頁設計課程上的收穫：有成就感，因為是從不會 到會，可以作出屬於自己的網頁感覺很棒。










(4) 風格設定：簡約、精緻
(5) 主色調，輔助色調：粉色、深紫、白色、粉色系等顏色。
(6) 製作動機：
　　 　因為喜歡韓國團體少女時代，剛好她們有出子團體Taetiseo，所以想介紹一下。
(7) 製作目的：讓更多人認識少女時代的子團體Taetiseo
預期效果： 整體簡約有子團體Taetiseo的特色

1025445102 邱筱惠



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web103-c/final/final-1025445198/Index.html
(2).
1.製作作業的時間：四天
2.有無遇到的問題： 崁入UTUBE影片搞的頭很大
3.製作心得與感想： 語法看到眼睛快花掉了
4.本學期於網頁設計課程上的收穫：真的要把語法搞懂還是要好好上課阿

(1)網站主題： 李宗盛
(2)導覽列架構設定



(4)主要瀏覽族群： 喜歡音樂者
(5)風格設定： 簡單
(6)主色調，輔助色調： 白 黑
(7)製作動機： 相信音樂能給人能量
(8)製作目的： 讓更多人知道李宗盛的經典
預期效果： 簡單明瞭



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445027
(2).
1.製作作業的時間： 兩天
2.有無遇到的問題： 圖繞文、表格顏色、標籤變更跑不出來
3.製作心得與感想： 想了很多主題 可是還是想用自己的貓
凌晨時刻比較容易完成
4.本學期於網頁設計課程上的收穫：能自己做網頁了
1025445027

(1)作業網址：http://mepopedia.com/~web103-c/final/final-1025445048
(2).
1.製作作業的時間： 一整天
2.有無遇到的問題： 在連結時會不小心疏忽,沒有連結好,還有在表格的地方比較做ㄉ不好
3.製作心得與感想： 完成安東的網頁,覺得很開心

4.本學期於網頁設計課程上的收穫：能自己看影片一步一步的做網頁很開心,覺得老師的影片很詳細,慢慢作會慢慢了解

1025445048 林侑慶

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445054/
(2).
1.製作作業的時間： 久到快吐
2.有無遇到的問題：表格製作比較難
3.製作心得與感想： 很有成就感
4.本學期於網頁設計課程上的收穫：學會很多東西
(1)網站主題：AKIAKANE-秋赤音
(2)導覽列架構設定
[img]http://i.imgur.com/COFp2AB.jpg[/img]
(3)尺寸與架構設定
[img]http://i.imgur.com/4rDVzCu.jpg[/img]
(4)主要瀏覽族群：想認識秋赤音與喜歡秋赤音的人
(5)風格設定： 簡單明瞭
(6)主色調，輔助色調： 紅.綠.藍
(7)製作動機：一直喜歡的繪師
(8)製作目的：讓更多人認識秋赤音
預期效果：鮮豔.簡單

1025445054 許雅筑



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1005448079
(2).
1.製作作業的時間：2天
2.有無遇到的問題：做了好多次一直做不好 所以銃做好多次
3.製作心得與感想： 好累
4.本學期於網頁設計課程上的收穫： 還是一樣好難





1005448079

(1)作業網址：http://mepopedia.com/~web103-c/final/final-1025445030
(2).
1.製作作業的時間：兩天
2.有無遇到的問題：圖片一直跑掉 還有內文很煩
3.製作心得與感想：很有成就感
4.本學期於網頁設計課程上的收穫： 從完全不會到現在能做出成品 很感動

(1)網站主題：REDBULL
(2)導覽列架構設定 (3)尺寸與架構設定


(4)主要瀏覽族群： 大眾
(5)風格設定： 簡約
(6)主色調，輔助色調：藍色 灰色 白色 黑色
(7)製作動機： 喜歡這個性質
(8)製作目的： 統整資料
預期效果： 簡單明瞭

1025445030 王泰然

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445126
(2).
1.製作作業的時間：1天
2.有無遇到的問題： 雙欄字體狂跑掉
3.製作心得與感想： 有點複雜
4.本學期於網頁設計課程上的收穫： 從無到有很有成就感





1025445126



(編輯記錄)

1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445129/im
(2).
1.製作作業的時間：1天 半
2.有無遇到的問題： 第二頁一直莫名其妙的連不起來
3.製作心得與感想： 複雜有點亂
4.本學期於網頁設計課程上的收穫：從一開始的不會到現在有點懂網頁的架構

http://mepopedia.com/~web103-c/final/final-1025445156

1.導覽列配色與風格設定：死魚眼 / 淺灰藍
2.有無遇到的問題：有
3.製作感想：非常花時間的作業
4.製作作業的時間：N小時

1025445156 蔡佳芬

完成品(1/13前)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445192
1.製作作業的時間：7小時
2.有無遇到的問題： 一不小心按錯什麼就全沒了.. 但最後做很順
3.製作心得與感想： 終於完成了 也做得很順只是需要很多時間去摸索 有點感動 ..
4.本學期於網頁設計課程上的收穫： 學到如何製作雙攔 也讓我更懂網頁

前置作業(12/17)
(1)網站主題： 優格女孩 郭采潔
(2)導覽列架構設定
[img]http://i.imgur.com/bl7vl75l.jpg[/img]

(3)尺寸與架構設定
[img]http://i.imgur.com/KIoOpkQl.jpg[/img]

(4)主要瀏覽族群： 喜歡郭采潔的粉絲
(5)風格設定： 簡約舒服
(6)主色調，輔助色調： 白 咖啡
(7)製作動機： 喜歡郭采潔
(8)製作目的： 讓更多人了解喜歡她
預期效果： 舒服 達到正確明瞭傳遞訊息
(8)資料蒐集分析 :http://www.amberkuo.net/



1025445192 黃婷萱



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445177
(2).
1.製作作業的時間：三天
2.有無遇到的問題： 有請教同學
3.製作心得與感想： 有成就感
4.本學期於網頁設計課程上的收穫：覺得很難









(1)網站主題： 小美人魚系列
(2)導覽列架構設定



(3)尺寸與架構設定


(4)主要瀏覽族群：小孩子
(5)風格設定： 可愛
(6)主色調，輔助色調： 藍色調
(7)製作動機： 喜歡
(8)製作目的：興趣
預期效果： 不錯




1025445177 吳永婷

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445117
(2).
1.製作作業的時間： 花了很多時間做 加起來應該有5天吧
2.有無遇到的問題： 有問題的地方 就看著老師的影片
3.製作心得與感想： 雖然過程中遇到蠻多問題的，但最後做好期末作業的當下， 真的有夠爽 ! ! ! !
4.本學期於網頁設計課程上的收穫： 真的學到了很多，只是網頁這個東西，真的要花很多時間與心思還有耐心。







(1)網站主題：THE▼NE 19941001 gb
(2)導覽列架構設定

[img]https://scontent-b.xx.fbcdn.net/hphotos-xap1/v/t1.0-9/10483693_727303307376508_4498298106633258767_n.jpg?oh=d9b571f157655241d77a9f06bcda53b8&oe=552B717B[/img]



(3)尺寸與架構設定

[img]https://fbcdn-sphotos-h-a.akamaihd.net/hphotos-ak-xap1/v/t1.0-9/1524977_727303304043175_2028215072057367256_n.jpg?oh=a365d04af271df783c6f0b03ccf195f4&oe=552CAC4A&__gda__=1429544707_12f32131de9afe9fcb9b0cf7c5082705[/img]


(4)主要瀏覽族群： 都可以
(5)風格設定： 主要用自己的東西來呈現
(6)主色調： 紅豆色、綠
(7)製作動機： 自己
(8)製作目的： 自己
預期效果： LUV

(8)資料蒐集分析



1025445117 黃振誠



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445045
(2).
1.製作作業的時間：一個禮拜
2.有無遇到的問題： 每天都煩惱
3.製作心得與感想： 真的很困難
4.本學期於網頁設計課程上的收穫： 做出成品很感動!





1025445045 饒文欣

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445108
(2).
1.製作作業的時間：一個禮拜
2.有無遇到的問題： 影片一開使出不來
3.製作心得與感想：雖然一開始做不出來，但做出來後很有成就感。
4.本學期於網頁設計課程上的收穫： 做出來後很感動，漸漸喜歡上網頁了。


1025445108 張惟婷

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445078
(2).
1.製作作業的時間：10天
2.有無遇到的問題： 前面東西都還跟著上期末後東西漸漸教得比較多 就有一點弱後的感覺 對東西都很陌生
3.製作心得與感想：跟朋友一起討論製作的感覺很好 做出來也真的很有成就感
4.本學期於網頁設計課程上的收穫：網頁設計這門課算我這學期真的有學到東西的一門課程 很有收穫 也很期待下學期的網業課 想學到更多的東西

1025445078 黃歆媛><

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445171
(2).
1.製作作業的時間： 豪久
2.有無遇到的問題：影片嵌入不會用
3.製作心得與感想： 終於好了
4.本學期於網頁設計課程上的收穫：COOL~
(1)網站主題： 迪士尼卡通人物
(2)導覽列架構設定


(3)尺寸與架構設定


(4)主要瀏覽族群： 老少咸宜
(5)風格設定： 簡單
(6)主色調，輔助色調： 淡色系
(7)製作動機： 喜歡迪士尼
(8)製作目的： 交作業
預期效果： 可愛

(8)資料蒐集分析 http://disney.lovesakura.com/toons.htm



1025445171 謝睿騏



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445180
(2).
1.製作作業的時間：一天
2.有無遇到的問題： 語法比較容易搞混
3.製作心得與感想： 做完很有成就感
4.本學期於網頁設計課程上的收穫：對於網頁設計更了解了也知道該怎麼去做

1025445180 謝芷寧

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445009
(2).
1.製作作業的時間：一整個下午
2.有無遇到的問題： 很容易跳來跳去，有時會不小心連錯
3.製作心得與感想： 超級有成就感的
4.本學期於網頁設計課程上的收穫：很開心也多了很多的基礎

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445150
(2).
1.製作作業的時間： 兩天
2.有無遇到的問題： 有
3.製作心得與感想： 很難但是做出來覺得很酷!
4.本學期於網頁設計課程上的收穫： 老師很用心 謝謝!

[img]https://fbcdn-sphotos-f-a.akamaihd.net/hphotos-ak-xpf1/v/t1.0-9/10426260_961005903917350_358543542064016792_n.jpg?oh=8c35213eb258109757ac512269a9035c&oe=5527BED3&__gda__=1428250130_a58e3c27fcfbedd4fae44e084f32047d[/img]

(4)主要瀏覽族群： 大眾
(5)風格設定： 沉穩
(6)主色調，輔助色調： 綠 黑 灰 藍
(7)製作動機： 喜歡鄧紫琪
(8)製作目的： 介紹喜歡的明星
預期效果： 好操作

視傳二C 1025445150 張曉萱



(編輯記錄)

[img]http://i.imgur.com/zB08NAq.jpg[/img]
[img]http://i.imgur.com/vbFBUr4.jpg[/img]
1)作業網址：http://mepopedia.com/~web103-c/final/final-1025445162
1.製作作業的時間：2天
2.有無遇到的問題：一直遇到奇怪的問題
3.製作心得與感想：很好玩
4.本學期於網頁設計課程上的收穫： 從完全不會到會架網頁感覺很有成就感

1025445162陸怡潔



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web103-c/final/final-1025445099
(2).
1.製作作業的時間：一到兩天
2.有無遇到的問題：有時候要找一下要改的顏色在哪一列的選項
3.製作心得與感想：感謝同學的協助 覺得痛哭流涕
4.本學期於網頁設計課程上的收穫：學到新東西是收穫 但真的很痛苦



(1)網站主題：Linkin Park
(2)導覽列架構設定
[img]https://fbcdn-sphotos-g-a.akamaihd.net/hphotos-ak-xaf1/v/t1.0-9/10922435_1087286361297069_4150416861432975483_n.jpg?oh=e1a1dc08c8751b6d3cbd951b0f247481&oe=552AA278&__gda__=1433284559_73ab79db8c6eb444850beb405d55815f[/img]
[img]https://fbcdn-sphotos-d-a.akamaihd.net/hphotos-ak-xfp1/v/t1.0-9/10384673_1087286357963736_1511539470951788511_n.jpg?oh=6c6ed6bad3aab5ad906a3903a7789c7e&oe=5537FFE2&__gda__=1429588146_810bc757823df78e32405fb110c6658e[/img]

(3)尺寸與架構設定


(4)主要瀏覽族群：對聯合公園有興趣的人皆可
(5)風格設定：搖滾
(6)主色調，輔助色調：藍色 白色 黑色 棗紅色
(7)製作動機： 想不到製作對象 突然聽見聯合公園的歌
(8)製作目的：統整資料 練習讓思緒清晰
預期效果： 還行

1025445099 陳盛倫

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445006
(2).
1.製作作業的時間：很多天 好幾個小時
2.有無遇到的問題：連結聯的怪怪的 謝謝老師救助
3.製作心得與感想：有些還是好難會看不懂語法跟div什麼包甚麼會亂掉
4.本學期於網頁設計課程上的收穫：很開心多學會了一個軟體希望能學得更精


(1)網站主題： hello kitty
(2)導覽列架構設定



(3)尺寸與架構設定


(4)主要瀏覽族群： 喜歡三麗鷗的人
(5)風格設定： 簡單可愛 色調
(6)主色調，輔助色調： 白 粉
(7)製作動機：kitty非常可愛
(8)製作目的：因為本身超級無敵愛kity
預期效果： 簡單明瞭

(8)資料蒐集分析
http://www.sanrio.com.tw/

1025445006 鄭喬薰



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445123
(2).
1.製作作業的時間：一天
2.有無遇到的問題：語法很多，有點複雜
3.製作心得與感想：學到了很多技巧。
4.本學期於網頁設計課程上的收穫： 完成了一個完整的網頁。





1025445123姚育慈

(1)
作業網址： http://mepopedia.com/~web103-c/final/final-1025445018

(2)
1.製作作業的時間：6小時
2.有無遇到的問題：語法很亂很複雜，很容易看錯。
3.製作心得與感想：學到了很多語法和製作網頁的技巧。
4.本學期於網頁設計課程上的收穫： 學到很多，而且越來越像真的網頁了。





1025445018 陳怡融

1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445111
(2).
1.製作作業的時間：超過一天
2.有無遇到的問題：目前沒有
3.製作心得與感想： 覺得可以更好，在配色上面能夠加強，內容較簡單
4.本學期於網頁設計課程上的收穫：學習到整個網頁的應用，雖然不是很熟悉，但可以做出一個網頁，覺得很好

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445135


1.製作作業的時間： 4小時
2.有無遇到的問題： 沒有
3.製作心得與感想： 很好玩
4.本學期於網頁設計課程上的收穫： 覺得越來越上手 不需要一直看教學影片了


(1)網站主題：下午茶時光
(2)導覽列架構設定
(3)尺寸與架構設定
(4)主要瀏覽族群： 愛好美食者
(5)風格設定： 碎花
(6)主色調，輔助色調： 主色/粉色 輔助色/水藍和咖啡色
(7)製作動機： 喜歡下午茶

1025445135李品萱

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445165
(2).
1.製作作業的時間：5小時
2.有無遇到的問題： css不再您的本地磁碟中???
3.製作心得與感想： 慢慢看就會越來越好
4.本學期於網頁設計課程上的收穫：雖然覺得很難很複雜但能完成一個完整的還蠻有成就感的

(1)作業網址：http://mepopedia.com/~web103-c/final/final-1005445191
(2).
1.製作作業的時間：一天
2.有無遇到的問題：有；沒注意刪到語法，會突然不知道自己哪裡做錯。
3.製作心得與感想：覺得更有耐心，因為語法很多，要耐心的從頭到尾不停的看。
4.本學期於網頁設計課程上的收穫： 覺得基本的架構都可以自己來，從完全不會到現在，覺得很有收穫。

1005445191 陳佳雯

(1)作業網址：http://mepopedia.com/~web103-c/final/final-1005445188
(2).
1.製作作業的時間：一整個晚上
2.有無遇到的問題：當然有，不過藉由反覆研究講義得以解決
3.製作心得與感想：個人認為網頁設計是一個相當複雜的一門學問，能學好真的不容易，不過能習得也是一大收穫。
4.本學期於網頁設計課程上的收穫：從來沒有接觸過網頁設計，藉由這次認識到了不一樣的新東西，挺不錯的。



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445039


1.製作作業的時間：2天
2.有無遇到的問題： 沒有
3.製作心得與感想： 很有成就感
4.本學期於網頁設計課程上的收穫： 越來越上手


(1)網站主題：佐藤のパン
(2)導覽列架構設定
(3)尺寸與架構設定
(4)主要瀏覽族群：購買麵包顧客
(5)風格設定： 深紅色
(6)主色調，輔助色調： 深紅色
(7)製作動機：麵包好吃

1025445039 何佳霖

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445063
(2).
1.製作作業的時間：好幾個禮拜
2.有無遇到的問題：很多都不大會
3.製作心得與感想：很難
4.本學期於網頁設計課程上的收穫：還需要多學習

(1)網站主題：Audrey Kawasaki Art's
(2)導覽列架構設定

(4) 風格設定：木質感
(5) 主色調，輔助色調：灰 咖啡
(6) 製作動機：
　　 之前就蠻喜歡這藝術家的作品,他繪畫的技巧跟作品都很細膩
(7) 製作目的：喜歡她的作品

預期效果： 簡單明瞭

1025445063 洪筠真



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445144
(2).


1.製作作業的時間：20小時
2.有無遇到的問題：都是小問題
3.製作心得與感想：中等
4.本學期於網頁設計課程上的收穫：我覺得多看語法吧 很多都很好用的

(1)網站主題：Hood by air
(2)導覽列架構設定
(3) 風格設定：簡單時尚
(4) 主色調，輔助色調：黑 白 灰
(5) 製作動機：喜歡他的牌子
(6) 製作目的：喜歡他的牌子

預期效果： 簡單明瞭

1025445144 李欣翰



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web103-c/final/final-1025445195/creation.html


1.製作作業的時間：斷續幾天吧
2.有無遇到的問題： 有 因為有很多重複的語法 我會搞錯
3.製作心得與感想： 當看到做好的網頁時 會很有成就感
4.本學期於網頁設計課程上的收穫： 對網頁設計有了新的認知 也略懂 希望未來可以更加深入


(1)網站主題：1顆心裡面的第3個世界
(2)主要瀏覽族群：喜歡插畫的同好們
(3)風格設定： 粉色
(4)主色調，輔助色調： 也是粉色色調的淺灰 淺藍
(5)製作動機：希望能夠推廣我的插畫作品

1025445195古馥瑜



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445075/index.html

1.製作作業的時間： 3天
2.有無遇到的問題： 非常困難，尤其是設置版面配置，以及雙欄位的擺放
3.製作心得與感想： 很累，腦袋快爆炸
4.本學期於網頁設計課程上的收穫： 可以學會製作網頁真的非常棒，覺得很開心!辛苦總算有結果了哈哈!!
老師人也很好有耐心! very nice!!

(1)網站主題：Jolin Tsai 蔡依林

(2)導覽列架構設定：


(3) 尺寸與架構設定：

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445132
(2).
1.製作作業的時間：2天
2.有無遇到的問題：
3.製作心得與感想： 有點複雜
4.本學期於網頁設計課程上的收穫：能做出有點完整的網站覺得很棒

(1)網站主題：snoopy
(2)導覽列架構設定
(3)尺寸與架構設定
(4)主要瀏覽族群：喜愛snoopy的
(5)風格設定： 藍色系列
(6)主色調，輔助色調： 藍綠色
(7)製作動機：讓大家更認識snoopy




1025445132 羅雅嫚



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web103-c/final/final-1025445174
(2).
1.製作作業的時間：很多天
2.有無遇到的問題： 不太熟
3.製作心得與感想： 做成功了 覺得很有成就感
4.本學期於網頁設計課程上的收穫：會做網頁了









(1)網站主題： 冰雪奇緣
(2)導覽列架構設定

[img]http://i.imgur.com/FXDmgRC.jpg[/img]

(3)尺寸與架構設定
[img]http://i.imgur.com/JxnFPfv.jpg[/img]

(4)主要瀏覽族群： 喜歡迪士尼卡通的人
(5)風格設定： 簡單明瞭
(6)主色調，輔助色調： 白 藍
(7)製作動機： 覺得歌好聽
(8)製作目的： 讓更多人看到
預期效果： 簡單明瞭

(8)資料蒐集分析
http://zh.wikipedia.org/zh-tw/%E5%86%B0%E9%9B%AA%E5%A5%87%E7%BC%98


1025445174黃琪雅

(1) 作業網址:http://mepopedia.com/~web103-c/final/final-1025445012


(2)

1.製作作業的時間：5~6小時
2.有無遇到的問題：語法超煩。
3.製作心得與感想：做完有種鬆了口氣的感覺。
4.本學期於網頁設計課程上的收穫：越來越像有樣子了。

1025445012戴嫻淳



(編輯記錄)

1025445096 徐琬凌

作業網址:http://mepopedia.com/~web103-c/final/final-1025445096

1.製作作業的時間：一天
2.有無遇到的問題：常常當機，搞得自己很緊張
3.製作心得與感想：有點成就感，而且內容是自己感興趣的東西，所以做得很開心
4.本學期於網頁設計課程上的收穫：學會很多事情

(1) 作業網址:http://mepopedia.com/~web103-c/final/final-1025445033

(2)
1.製作作業的時間：5~6小時
2.有無遇到的問題：語法好多，要往前翻才做得出來。
3.製作心得與感想：做完有種鬆了口氣的感覺。
4.本學期於網頁設計課程上的收穫：越來越像有樣子了。

1025445033 林子軒

(1)作業網址：http://mepopedia.com/~web103-c/final/final-1025445138/Index.html
(2).
1.製作作業的時間：三個小時
2.有無遇到的問題：將分開學的技巧融會貫通真的需要時間
3.製作心得與感想：會更認真的學
4.本學期於網頁設計課程上的收穫：打開了新的視野

(1)網站主題：復仇者聯盟
(2)導覽列架構設定

(4)主要瀏覽族群：漫威迷及電影愛好者
(5)風格設定：現代主義
(6)主色調，輔助色調：灰色系、黑、白、淺藍
(7)製作動機：心中喜愛英雄的九歲小男孩還沒死去
(8)製作目的：讓沒看過的人能了解大概在演什麼
預期效果：引起共鳴

1025445138 梁奕堯



(編輯記錄)

(1) 作業網址:http://mepopedia.com/~web103-a/final/final-1025445010/index.html

(2)
1.製作作業的時間：很多天
2.有無遇到的問題：語法太多太複雜會搞混
3.製作心得與感想：雖然遇到很多瓶頸可是當作玩的時候還是很有成就感
4.本學期於網頁設計課程上的收穫：是一堂令人壓力很大可是卻充實的課程

1025445010 謝佳蓁