[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/~web104-2c/final/final-10354452XX

資料夾內含：
(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/7前)
[color=#FF0066]請將這項放置於文章最前面[/color]
(1)作業網址：
(2).
1.製作作業的時間：
2.有無遇到的問題：
3.製作心得與感想：
4.本學期於網頁設計課程上的收穫：
[color=#CC0066]4.請務必在1/6前回覆，否則為遲交[/color]


[color=#0066CC]前置作業[/color](12/24)
(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?2023,68211
並將網站分析於12/17前回覆於前述網址[/color]

◎相關網站列表與分析：


[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]

6. 學長姐作品參考

-

[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. 其他作品

作業參考
(1) http://mepopedia.com/~web100b/final/final-1001445022/
(2) http://mepopedia.com/~web100b/final/final-1001445042/
(3) http://mepopedia.com/~web101c/final/final-1015445243/
http://mepopedia.com/~web101c/final/final-1015445243-1/
(4) http://mepopedia.com/~web103-a/final/final-1025445124/
(5) http://mepopedia.com/~web103-a/final/final-1025445055/
(6) http://mepopedia.com/~web103-a/final/final-1025445001/
(7) http://mepopedia.com/~web103-a/final/final-1025445040/
(8) http://mepopedia.com/~web103-a/final/final-1025445043/
(9) http://mepopedia.com/~web103-a/final/final-1005445193/
(10) http://mepopedia.com/~web103-a/final/final-1025445070/

http://mepopedia.com/forum/read.php?2023,67943

[hr]

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

http://youtu.be/JhWaXP7wCrI



[hr]
上傳圖片可使用
http://imgur.com/

若寬度太寬，請使用以下語法，將圖片網址帶入：
<img width="100%" src="圖片網址" border="0">


(編輯記錄)

前置作業
作業網址:http://mepopedia.com/~web104-2c/final/final-1035445129/
(1)網站主題：小鼠波波
(2)導覽列架構設定


(3)主要瀏覽族群：有一歲至五歲孩童的父母親
(4)風格設定：簡單 明瞭
(5)主色調，輔助色調：紅、藍、白、橘為主配色
(6)製作動機：回憶小時後快樂單純的生活
(7)製作目的：讓更多人一起回憶那簡單的快樂
預期效果：簡單易懂

學號:1035445129



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445006/
(2).
1.製作作業的時間：一天又一天。
2.有無遇到的問題：很多，但之後都解決了。
3.製作心得與感想：頗累，很有成就感。
4.本學期於網頁設計課程上的收穫：學習到很多網頁設計專業術語，還有各式的網頁排版和嵌入影片等等。


(1) 網站主題：Peppa Pig 粉紅豬小妹

(2) 導覽列架構設定：



(4) 風格設定：適合兒童的溫馨配色
(5) 主色調，輔助色調：藍綠，粉橘，橘黃，咖啡
(6) 製作動機：了解佩佩豬
(7) 製作目的：之後更喜愛佩佩豬
預期效果：讓兒童更加喜愛.了解



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445024/
(2).
1.製作作業的時間：夭壽久。
2.有無遇到的問題：有~解決了。
3.製作心得與感想：累。
4.本學期於網頁設計課程上的收穫：學習到很多。


(1) 網站主題：史努比

(2) 導覽列架構設定：

(4) 風格設定：史努比配色
(5) 主色調，輔助色調：黑灰白紅
(6) 製作動機：喜歡史努比
(7) 製作目的：認識史努比
預期效果：簡單



(編輯記錄)

前置作業
(1)網站主題:醜比頭
(2)導覽列架構設定:
[img]http://i.imgur.com/ylVJApD.jpg[/img]

(3)主要瀏覽族群:醜比頭愛好者
(4)風格設定:滿滿的屁桃粉色
(5)主色調:粉色
(6)製作動機:屁桃很可愛
(7)製作目的:讓大家都知道他們的可愛
預期效果:讓大家都覺得醜比頭很可愛


(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445189
(2)
1.製作作業的時間：很多天
2.有無遇到的問題：雙欄的語法有點複雜,還好有影片~加快了速度
3.製作心得與感想：好累!!!!!!!可是做完超級開心~一種解脫的感覺~充滿了成就感
4.本學期於網頁設計課程上的收穫：學到好多東西,謝謝老師的用心

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445015/
(2).
1.製作作業的時間：5小時。
2.有無遇到的問題：超多問題!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!。
3.製作心得與感想：眼睛都快脫窗了 好險是做自己喜歡的人物 不然我會發瘋 根本超級無敵霹靂難道炸掉。
4.本學期於網頁設計課程上的收穫：學道滿多的語法 其實回家做作業從一個完全不知道語法到幾乎摸熟了 夠神奇了。


(1) 網站主題:GinOy，歐陽靖

(2) 導覽列架構設定：

[img]http://i.imgur.com/9TRdHQe.jpg[/img]

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445102
(2)
1.製作作業的時間：很多天
2.有無遇到的問題：index一開始打開的畫面研究了很久，終於做好了~還有雙欄的語法有點複雜，需要細心地做
3.製作心得與感想：很棒， 很有成就感
4.本學期於網頁設計課程上的收穫：學會怎麼製作一個網頁，也知道網頁是怎麼構成的，以後看到很棒的網頁也可以知道別人是怎麼做，去參考別的網頁的css學習!





(1) 網站主題：奈良美智
(2) 導覽列架構設定：


(4) 風格設定：舒服、藝術、愉悅
(5) 主色調，輔助色調：橘黃、褐色
(6) 製作動機： 曾經聽國中老師說起過這個藝術家，對他產生興趣，因此想做他的介紹
　　 　
(7) 製作目的：希望能讓大家更清楚認識奈良美智這個藝術家

預期效果： 舒服清楚的內容，容易閱讀



(編輯記錄)

(1)作業網址：:http://mepopedia.com/~web104-2c/final/final-1035445054
(2).
1.製作作業的時間：5小時
2.有無遇到的問題：沒有
3.製作心得與感想：網頁設計越來越上手，語法也能融會貫通了
4.本學期於網頁設計課程上的收穫： 雖然高中也學過網頁設計，但真的熟悉的運用是現在學的，以前只會複製貼上語法，而現在能自己整理與修改。

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


(3)尺寸與架構設定

(4)主要瀏覽族群：青少年、喜愛BIGBANG的粉絲
(5)風格設定：簡約風
(6)主色調，輔助色調： 黑白色調
(7)製作動機： 因為我是BIGBANG歌迷，想更多人推薦他們的音樂
(8)製作目的： 自我滿足、推薦BIGBANG
預期效果： 看完網站的人可以去更了解他們

(8)資料蒐集分析

YG ENTERTAINMENT
http://www.ygfamily.com/



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445195
(2). 1.製作作業的時間：超級超級無敵多天。
2.有無遇到的問題：超級霹靂無敵多
3.製作心得與感想：超級無敵有夠累
4.本學期於網頁設計課程上的收穫：學習到很多,但是還是好難懂


(1) 網站主題：永遠的少女時代

(2) 導覽列架構設定：
[img]http://i.imgur.com/AtSxq04.jpg[/img]




(4) 風格設定：性感迷人

(5) 主色調，輔助色調：粉紅色,深粉紅,灰色

(6) 製作動機：我是少女時代粉絲哈哈哈

(7) 製作目的：我希望大家多喜歡少女時代

預期效果：就是讓大家愛上她們

學號:1035445195



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445035/
(2).
1.製作作業的時間：兩天
2.有無遇到的問題：不會雙欄
3.製作心得與感想： 一開始要做的時候覺得很煩，可是做完就感覺很有成就感
4.本學期於網頁設計課程上的收穫：學到很多關於網頁製作方式

前置作業(12/24)
(1)網站主題：徐熙娣
(2)導覽列架構設定

(3)尺寸與架構設定
(4)主要瀏覽族群：高中、大學生、徐熙娣粉絲
(5)風格設定：穩重、美艷、性感
(6)主色調，輔助色調：黑色、暗色
(7)製作動機：我也是徐熙娣的粉絲
(8)製作目的：想要讓不認識她的大家更了解她
預期效果：能夠讓她粉絲更多、更多人愛她



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445126
(2). 1.製作作業的時間：很久很久。
2.有無遇到的問題：蠻多的 。
3.製作心得與感想：超累但有成就感。
4.本學期於網頁設計課程上的收穫：很開心學到如何製作自己的網頁。
(1)網站主題：STAR WARS星際大戰
(2)導覽列架構設定

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

(3)主要瀏覽族群： 18~30 age
(4)風格設定：浩瀚的宇宙
(5)主色調，輔助色調：黑/黃
(6)製作動機：喜歡星際大戰
(7)製作目的：介紹星際大戰 多讓大家了解
預期效果：讓人一目了然
學號:1035445126



(編輯記錄)

作業網址:http://mepopedia.com/~web104-2c/final/final-1035445183/
(1) 網站主題：張懸
(2) 導覽列架構設定：
[img]http://i.imgur.com/4aCXZ2w.jpg[/img]


(4) 風格設定：黑白、舒適、藝術
(5) 主色調，輔助色調：黑白灰、淡橘
(6) 製作動機： 想讓大家知道更多張懸的作品或是講過、做過的事情
(7) 製作目的：讓更多人知道她所做的事情

預期效果： 可以清楚閱讀



(編輯記錄)

(1)網站主題：混合式
(2)導覽列架構設定



(3)主要瀏覽族群： 18~30age
(4)風格設定：混淆不清,夢一般
(5)主色調，輔助色調：輝跟紫/黑跟白
(6)製作動機：最近的體悟
(7)製作目的：提供參考
預期效果：簡單參考

學號:1035445087



(編輯記錄)

完成品(1/7前)
請將這項放置於文章最前面
(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445171/
(2).
1.製作作業的時間： 整體大約15小時
2.有無遇到的問題： 程式碼一直搞不清楚誰才是誰的
3.製作心得與感想： 好難做，眼睛好花，但還算開心
4.本學期於網頁設計課程上的收穫： 學會兩項網頁表達方式。


前置作業(12/24)
(1)網站主題： 烏法魯天地
(2)導覽列架構設定

(3)主要瀏覽族群： 烏法魯玩家
(4)風格設定： 森林
(5)主色調，輔助色調：綠色 深淺不一的綠色
(6)製作動機： 喜歡玩這個遊戲
(7)製作目的： 一開始完全看不懂，後來會了之後想讓其他剛加入的玩家淺顯易懂。
(8)預期效果： 整齊劃一，好觀賞



(編輯記錄)

完成品(1/7前)
請將這項放置於文章最前面
(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445141
(2).
1.製作作業的時間：估計時間一天
2.有無遇到的問題： 程式碼會不見，都用好上傳後會打不開，請朋友幫我看一下才解決。
3.製作心得與感想： 做到後來會很亂，不過用好了會覺得有成就感。
4.本學期於網頁設計課程上的收穫： 了解程式碼如何應用，對以後需要用到網頁設計至少有基礎程度。


前置作業
(1)網站主題：宮崎駿
(2)導覽列架構設定 :

(3)主要瀏覽族群： 年輕族群，宮崎駿愛好者。
(4) 風格設定：宮崎駿-龍貓公車
(5) 主色調，輔助色調：咖啡色、橘黃色
(6) 製作動機： 從小看宮崎駿動畫，每部都很經典，又有深刻含意，是膾炙人口的電影。
　　 　
(7) 製作目的：喚起大家的兒時記憶

預期效果：顏色統一舒服，排列清楚，閱讀者能快速了解。



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445057
(2). 1.製作作業的時間：超級多天
2.有無遇到的問題：有 不過解決了
3.製作心得與感想：超級開心ㄉ
4.本學期於網頁設計課程上的收穫：學習很多,但是還是好複雜 ......



前置作業
(1)網站主題：哆啦A夢
(2)導覽列架構設定


(4) 風格設定：舒服、歡樂
(5) 主色調，輔助色調：藍、白、黃 (哆啦A夢色系)
(6) 製作動機：更了解這部卡通
(7) 製作目的：讓人了解背後的故事，不單單只是電視所撥出的那樣而已 !



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445072
(2)
1.製作作業的時間：一天
2.有無遇到的問題：無
3.製作心得與感想：看CSS看到眼睛都花了，不過完成之後很有成就感！
4.本學期於網頁設計課程上的收穫：一開始覺得看那些程式碼很麻煩很無聊，但是經過老師慢慢一步一步教導之後，發現其實還滿好玩的！雖然真的需要花很多的時間及耐心。


前置作業
(1)網站主題：湯姆貓與傑利鼠
(2)導覽列架構設定

(3)主要瀏覽族群：兒童、青年
(4)風格設定：活潑大方
(5)主色調，輔助色調：紅、灰藍、白、咖啡色為主配色
(6)製作動機：因為湯姆貓與傑利鼠是小時候很喜歡的一部卡通，剛好以此來做為主題。
(7)製作目的：感染更多人湯姆貓與傑利鼠所帶來的歡笑。

預期效果：淺顯易懂、清楚明瞭。



(編輯記錄)

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

(1)網站主題：玩童
(2)導覽列架構設定
[img]http://i.imgur.com/Qqf8VeV.jpg[/img]
(3)主要瀏覽族群：到死都可以
(4)風格設定：饒舌
(5)主色調，就是饒舌
(6)製作動機：我愛饒舌
(7)製作目的：讓大家愛饒舌


學號:1035445066



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445216
(2)
1.製作作業的時間： 下午至半夜
2.有無遇到的問題： 認真看老師的影片會學得輕鬆又簡單
3.製作心得與感想： 有成就感
4.本學期於網頁設計課程上的收穫：下學期不是還要見面?見到了跟你說!



前置作業
(1)網站主題:BOYFRIEND
(2)導覽列架構設定:

[img]http://i.imgur.com/86WAPBi.jpg[/img]

(3)主要瀏覽族群:各個喜歡韓流的粉絲們
(4)風格設定:符合boyfriend的風格與色調
(5)主色調，輔助色調:紅、黑、白、咖啡
(6)製作動機:純粹喜歡
(7)製作目的:讓更多人認識boyfriend
預期效果:帥氣

http://mepopedia.com/~web104-2c/final/final-1035445093/index.html

(2)1. 製作作業的時間：共1-3天
　2. 有無遇到的問題：多多少少都有但都能盡快解決
　3. 製作心得與感想：真的會邊做邊罵,但做完只有一個爽字

-

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

View post on imgur.com

(編輯記錄)

(1) 作業網址： http://mepopedia.com/~web104-2c/final/final-1025445189
(2).
　1. 製作作業的時間：大概兩天
　2. 有無遇到的問題：關於 content 裡面的 L 跟 R 的問題
　　　　　　　　　　以及L-list的設定問題
　3. 製作心得與感想：看似不難，實際遇到問題的話真的很難

-

(1)網站主題：南方四賤客
(2)導覽列架構設定


(3)主要瀏覽族群：有看過這個的青少年
(4)風格設定：有點粗糙的風格
(5)主色調，輔助色調：黃/藍綠，咖啡/紅
(6)製作動機：突然想到消失已久南方四賤客，因為台灣版的南方四賤客說話很好笑，也是那時許多人喜愛的卡通
(7)製作目的：回憶起



(編輯記錄)

[img]http://i.imgur.com/l2Qiham.jpg[/img]
(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1025445115/
(2).
1.製作作業的時間：三天
2.有無遇到的問題：有很多問題，不過有老師的影片!!!! 棒棒
3.製作心得與感想：超級有成就感，然後我希望不要再被當，太可怕了!!!
4.本學期於網頁設計課程上的收穫：再一次的學習讓我學到了更細微，然後，我要說老師每次上課都非常用心，感謝老師。



(編輯記錄)

前置作業
(1)網站主題:蠟筆小新
(2)導覽列架構設定:


(3)主要瀏覽族群:喜歡蠟筆小新的人
(4)風格設定:溫暖的色調
(5)主色調:橘色,黃色
(6)製作動機:喜歡蠟筆小新
(7)製作目的:讓大家了解有關蠟筆小新的事
預期效果:讓人清楚明瞭,有溫馨感覺






(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1025445061
(2)
1.製作作業的時間：14小時
2.有無遇到的問題：很多,但看了影片都能解決
3.製作心得與感想：這14個小時除了上廁所全部都坐在椅子上,屁股感覺快爛掉
4.本學期於網頁設計課程上的收穫：再一次的課程讓我學到不少收穫很多。



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web104-2c/final/final-1035445186
(2).
1.製作作業的時間： 好幾個夜晚
2.有無遇到的問題： 雙欄好煩
3.製作心得與感想： 覺得很累
4.本學期於網頁設計課程上的收穫：
成就感+10

http://mepopedia.com/~web104-2c/final/final-1035445051

1.製作作業的時間： 一整晚到隔天早上
2.有無遇到的問題： 感謝老師的教學影片伴我一整晚
3.製作心得與感想： 好感動我生出來了
4.本學期於網頁設計課程上的收穫：比我之前跨系選修的網頁比起來，老師你真的太棒了!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!

前置作業
(1)網站主題:史帝芬宇宙
(2)導覽列架構設定:
[img]http://i.imgur.com/dzGMaJN.jpg[/img]
(3)主要瀏覽族群:喜歡看美式動畫的人
(4)風格設定:已清楚簡單來做設計
(5)主色調:使用主要腳色上的顏色
(6)製作動機:喜歡看
(7)製作目的:讓大家知道這個動畫
預期效果:是我想要的感覺歐耶~



(編輯記錄)

《 1005445160 - 王思博 》

※ 作業網址： http://mepopedia.com/~web104-2c/final/final-1005445160/index.html

* 製作作業的時間：不吃三餐決定衝刺的一整天 - ALL DAY 。

* 有無遇到的問題：有遇到一些問題，找的到答案的就解決，找不到的刪掉~逃避~。

* 製作心得與感想：回到以前做網站的感受。

* 本學期於網頁設計課程上的收穫：教學更佳細緻，熟能生巧。

------------------------------------------------------------------------------------------------------------------------------------------------------

* 網站主題：Family Guy

* 導覽列架構設定：



* 風格設定：舒適溫柔的顏色

* 主色調，輔助色調：藍色、橘黃色、藍綠色

* 製作動機：個人喜歡這個影集

* 製作目的：可以讓喜歡的人更加了解此影集

* 預期效果：安穩的PASS這門課，可以合格~

------------------------------------------------------------------------------------------------------------------------------------------------------



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445042
(2)
1.製作作業的時間： 花很多天時間
2.有無遇到的問題： 看了老師的影片 覺得沒那麼難了
3.製作心得與感想： 蠻不錯的 有成就感
4.本學期於網頁設計課程上的收穫：學到如何架構網頁 也可以做自己喜歡的風格 還有謝謝老師的認真



前置作業
(1)網站主題:月亮忘記了
(2)導覽列架構設定:
[img]http://i.imgur.com/JVW0ZRi.jpg[/img]

(3)主要瀏覽族群:喜歡幾米的人
(4)風格設定:可愛
(5)主色調，輔助色調:黃橘、粉橘 咖啡
(6)製作動機:個人喜歡
(7)製作目的:讓更多人知道幾米
預期效果:還不錯 蠻可愛的

學號:1035445042

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445123
(2).
1.製作作業的時間：久到不清楚了
2.有無遇到的問題：很多、超多
3.製作心得與感想：各種非常的疲憊
4.本學期於網頁設計課程上的收穫：覺得網頁很可怕


(1) 網站主題：馬來貘

(2) 導覽列架構設定：
[img]http://i.imgur.com/FLeCqjN.jpg[/img]
(4) 風格設定：黑白色為主的馬來貘
(5) 主色調，輔助色調：黑白
(6) 製作動機：超可愛的馬來貘
(7) 製作目的：認識設計師Cherng
預期效果：普通

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445150
(2).
1.製作作業的時間：無限
2.有無遇到的問題：每次做完都會有東西不見
3.製作心得與感想：非常累但有成就感
4.本學期於網頁設計課程上的收穫：學習到DreamWeaver的用法和各種網頁設計的語法


(1) 網站主題：Lana Del Rey

(2) 導覽列架構設定：


(4) 風格設定：粉系色調簡潔
(5) 主色調，輔助色調：粉紅 藍綠 藍灰 藍紫
(6) 製作動機：喜歡的歌手
(7) 製作目的：更了解Lana

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445030
(2). 1.製作作業的時間：好久好久加熬夜。
2.有無遇到的問題：很多很多，但有看老師影片和問同學所以ok了。
3.製作心得與感想：超級累的嗚嗚嗚。
4.本學期於網頁設計課程上的收穫：學習到很多原本完全不知道的東西，很開心~。


(1) 網站主題：冰雪奇緣Frozen

(2) 導覽列架構設定：
[img]http://i.imgur.com/KX71H7P.jpg[/img]

(3)主要瀏覽族群：1歲至40歲

(4) 風格設定：可愛、討喜

(5) 主色調，輔助色調：淺藍、深藍、淺紫、淡灰、深灰

(6) 製作動機：喜歡冰雪奇緣~

(7) 製作目的：介紹冰雪奇緣Frozen，讓大家也喜歡

預期效果：讓大家能多認識冰雪奇緣Frozen

學號:1035445030



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web104-2c/final/final-1035445090
(2). 1.製作作業的時間： 約四小時
2.有無遇到的問題： 有些連結問題、找不到css修改的語法
3.製作心得與感想： 雖然很複雜但還是做完了
4.本學期於網頁設計課程上的收穫： 這學期的網頁很謝謝老師那麼有耐心的教我們，希望下學期能夠學習的更多也期待老師的新課程（希望不要太難T_T）。

(1) 網站主題：史努比
(2) 導覽列架構設定：



(3)主要瀏覽族群：老少咸宜
(4)風格設定：簡約舒服
(5)主色調，輔助色調：草地綠 淡綠色;淡藍色
(6)製作動機：因為我喜歡史努比
(7)製作目的：喜歡史努比的想法
預期效果：簡單容易了解

學號：1035445090



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445156
(2).
1.製作作業的時間：日以繼夜。
2.有無遇到的問題：全部都是問題然後自己慢慢摸索
3.製作心得與感想：最後都完成了，覺得自己很厲害哈哈哈哈哈哈
4.本學期於網頁設計課程上的收穫：最深刻的就是老師很用心~


(1) 網站主題：龍貓~

(2) 導覽列架構設定：


(4) 風格設定：龍貓的綠綠感~
(5) 主色調，輔助色調：墨綠 深藍 綠色系~
(6) 製作動機：認識龍貓~
(7) 製作目的：更加了解龍貓~
預期效果：可愛的感覺

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445009/
(2).
1.製作作業的時間：好久。
2.有無遇到的問題：很多問人之後就OK了。
3.製作心得與感想：一口氣弄完就天亮了。
4.本學期於網頁設計課程上的收穫：學習到很多網頁上面的東西，原來一個網頁的架構這麼複雜。

(2) 導覽列架構設定：



(4) 風格設定：粉紅色系
(5) 主色調，輔助色調：粉紅.藍色.白色.紅色
(6) 製作動機：熊本熊太可愛
(7) 製作目的：了解一個熊本熊創造出效益

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445153
(2).
1.製作作業的時間：一個晚上
2.有無遇到的問題：無
3.製作心得與感想：很有成就感
4.本學期於網頁設計課程上的收穫：學習到很多有關於網頁設計的專業技術，還有許多的的網頁排版方式

(1) 網站主題：紫色薰衣草

(2) 導覽列架構設定：

(3)主要瀏覽族群：喜歡薰衣草的人
(4)風格設定：簡單 自然
(5)主色調，輔助色調：紫色為主色
(6)製作動機：薰衣草愛好者
(7)製作目的：讓更多喜歡薰衣草和紫色的人看了這個網站心情會很好
預期效果：清爽自然的色調



(編輯記錄)

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

(2)1. 製作作業的時間：3天
　2. 有無遇到的問題：現在遇到了很大的問題，就是圖片跟我的顏色都出不來
　3. 製作心得與感想：希望現在遇到的問題可以快點解決
-

(1) 網站主題：阿爾卑斯山的少女
(2) 導覽列架構設定：

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



(編輯記錄)

前置作業
作業網址:http://mepopedia.com/~web104-2c/final/final-1035445027

(1)網站主題：嚕嚕米
(2)導覽列架構設定
[img]http://i.imgur.com/W8rWMTH.jpg[/img]
(3)主要瀏覽族群：一群小精靈的日常生活
(4)風格設定：清新
(5)主色調:黃橘綠
(6)製作動機：希望讓大家有一種單純溫暖清新的感覺

(1)網站主題: the bears' school
(2)導覽列架構設定:




(3)主要瀏覽族群: 小朋友、小熊學校粉絲
(4)風格設定: 可愛風
(5)主色調: 熊熊的顏色與淡黃色
(6)製作動機: 喜歡小熊學校
(7)製作目的: 讓大家更認識小熊學校
預期效果: 清楚明瞭、清新可愛


(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445162
(2)
1.製作作業的時間：2天
2.有無遇到的問題：語法跑掉 重做才弄好 氣死了～
3.製作心得與感想：有種成就感
4.本學期於網頁設計課程上的收穫：學到很多～老師很認真用心～感謝！

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445087
(2)
1.製作作業的時間： 三小時
2.有無遇到的問題：檔名搞死我
3.製作心得與感想：還可以,到處連結
4.本學期於網頁設計課程上的收穫：
學到怎麼做出基板的網頁,算是有趣



(1) 網站主題：混合式
(2) 導覽列架構設定：

(4) 風格設定：混淆不清,夢一般
(5) 主色調，輔助色調：灰跟紫/黑跟白
(6) 製作動機： 最近的體悟
　　 　
(7) 製作目的：提供參考

預期效果： 簡單參考

(1)作業網址： http://mepopedia.com/~web104-2c/final/final-1035445084
(2)製作作業的時間： 2-3天
2.有無遇到的問題： 背景圖不能用太大的螢幕看...
3.製作心得與感想： 做了好久終於做完了~
4.本學期於網頁設計課程上的收穫：這學期的網頁設計很好玩 我也學到了很多

(1) 網站主題：天涯明月刀
(2) 導覽列架構設定：

[img]http://i.imgur.com/9k1EpO3.jpg?1[/img]

(3)主要瀏覽族群：喜歡這個遊戲的人
(4)風格設定：武俠風
(5)主色調，輔助色調：深藍 深紫 橄欖綠 淺綠色
(6)製作動機：因為這遊戲畫風很精緻/劇情也很豐富
(7)製作目的：讓更多人了解這款遊戲
預期效果：讓人清楚明瞭 了解這款遊戲

學號：1035445084

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445078
(2)導覽列架構設定





1.製作作業的時間：　∞　
2.有無遇到的問題：眼睛度數又增加ㄌ
3.製作心得與感想：下次能只做3頁嗎?
4.本學期於網頁設計課程上的收穫：謝謝指教


(1) 網站主題：珍遊記
(2) 導覽列架構設定： (3)主要瀏覽族群: 高智商族群
(4) 風格設定：爽就好風格
(5) 主色調，輔助色調：暗濁色調
(6) 製作動機：夠白癡
(7) 製作目的：變白癡
預期效果：我滿意就好

(1)作業網址： http://mepopedia.com/~web104-2c/final/final-1035445159
(2).
1.製作作業的時間： 2 days
2.有無遇到的問題： 放gif檔好像會看不到？
3.製作心得與感想： 做我最愛的hellokitty就超級超級用心嗚嗚
4.本學期於網頁設計課程上的收穫： 好累喔哈哈哈哈哈哈可是很開心ya

(1)網站主題： Hello Kitty

(2)導覽列架構設定


(4)主要瀏覽族群： 年輕族群

(5)風格設定： 粉白色系

(6)主色調，輔助色調： 粉，白

(7)製作動機： 喜歡HelloKitty

(8)製作目的： 可以讓更多更多人喜歡HelloKitty

預期效果： 棒棒

(8)資料蒐集分析 維基百科、Google



(編輯記錄)

(1)作業網址： http://mepopedia.com/~web104-2c/final/final-1035445219
(2).
1.製作作業的時間： 無法計算
2.有無遇到的問題： 有
3.製作心得與感想： 花了非常多時間，很累
4.本學期於網頁設計課程上的收穫：對網頁有進一步的了解

(1)網站主題： 櫻桃小丸子

(2)導覽列架構設定:



(4)主要瀏覽族群：所有年齡皆可，尤其年輕族群

(5)風格設定： 活潑生動

(6)主色調，輔助色調： 粉，紅，黃

(7)製作動機：想做可愛的人物

(8)製作目的：讓大家認識小丸子

預期效果：活潑生動


學號:1035445219



(編輯記錄)

前置作業
(1)網站主題:醜比頭
(2)導覽列架構設定:

View post on imgur.com

(3)主要瀏覽族群:醜比頭愛好者
(4)風格設定:滿滿的屁桃粉色
(5)主色調:粉色
(6)製作動機:屁桃很可愛
(7)製作目的:讓大家都知道他們的可愛
預期效果:讓大家都覺得醜比頭很可愛






(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445189
(2)
1.製作作業的時間：很多天
2.有無遇到的問題：雙欄的語法有點複雜,還好有影片~加快了速度
3.製作心得與感想：好累!!!!!!!可是做完超級開心~一種解脫的感覺~充滿了成就感
4.本學期於網頁設計課程上的收穫：學到好多東西,謝謝老師的用心



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445180
(2). 1.製作作業的時間：超久...
2.有無遇到的問題：超多
3.製作心得與感想：超累但有成就感。
4.本學期於網頁設計課程上的收穫：知道如何怎樣做網頁
(1)網站主題：魔力紅
(2)導覽列架構設定
[img]http://i.imgur.com/iS9ShR3.jpg?1[/img]
(3)主要瀏覽族群： 15~30 age
(4)風格設定：灰色風格
(5)主色調，輔助色調：灰.黑/紅
(6)製作動機：喜歡魔力紅
(7)製作目的：介紹魔力紅 多讓大家了解
預期效果：讓人更了解魔力紅
學號:1035445180



(編輯記錄)

(1)作業網址：:http://mepopedia.com/~web104-2c/final/final-1035445168
(2).
1.製作作業的時間：7小時
2.有無遇到的問題：沒有
3.製作心得與感想：網頁設計越來越上手，語法也能融會貫通了
4.本學期於網頁設計課程上的收穫： 看得懂語法了，也不再只是複製貼上，能夠自己完成一個網頁，真的很有成就感
(1)網站主題：CAT
(2)導覽列架構設定


(4)主要瀏覽族群：喜愛貓咪的人
(5)風格設定：優雅
(6)主色調，輔助色調： 黑白灰色調
(7)製作動機： 雖然沒有養貓~~不過我真的很喜歡貓咪
(8)製作目的： 希望不管有沒有養貓，看見貓咪不但能更了解他們，也能讓心情放輕鬆
預期效果：讓大家有療癒的感覺

(1)作業網址： http://mepopedia.com/~web104-2c/final/final-1035445081
(2).
1.製作作業的時間：8小時
2.有無遇到的問題： 沒有吧
3.製作心得與感想： 雖然很累但不錯玩
4.本學期於網頁設計課程上的收穫：了解該如何製作一個網頁

(1)網站主題：蠟筆小新
(2)導覽列架構設定

(3)尺寸與架構設定

(4)主要瀏覽族群：5歲以上皆可
(5)風格設定： 橘色的小新風
(6)主色調，輔助色調： 橘色、黃色
(7)製作動機： 蠟筆小新好看
(8)製作目的：童年到現在的回憶
預期效果： 能製作出來就好



(編輯記錄)

(1).作業網址:http:http://mepopedia.com/~web104-2c/final/final-1035445063

(2).請回答以下問題：
1.網頁主題：植物VS殭屍花園戰爭
配色樣式:綠色代表植物,深藍色代表冰冷殭屍
2.有無遇到的問題:導覽列最後一個,要按兩次才會出現頁面...
3.製作感想:一直在找缺失的語法在哪...
4.製作作業的時間: 6小時多

View post on imgur.com

網站主題：九藏喵窩
風格設定：暖色為主
主色調，輔助色調： 主色調為澄色 輔助色調為淺色
製作動機：曾看過,但不是很了解,想試試

導覽列架構設定

View post on imgur.com

(1).作業網址:http:http://mepopedia.com/~web104-2c/final/final-1035445060
(2).
1.製作作業的時間：兩天
2.有無遇到的問題： 有 語法變難 容易搞混
3.製作心得與感想： 做完了~ 感覺很好
4.本學期於網頁設計課程上的收穫：對網頁設計進一步了解,才知道它的難易



(編輯記錄)

前置作業
(1)網站主題:Ladurée
(2)導覽列架構設定:

(3)主要瀏覽族群:甜食愛好者
(4)風格設定:少女心要爆發
(5)主色調:淡粉x深灰
(6)製作動機:我愛Ladurée
(7)製作目的:希望大家知道他不只甜還好吃
預期效果:有人能愛他一萬年

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445207
(2)
1.製作作業的時間：三天。
2.有無遇到的問題：其實都沒有問題因為有影片。
3.製作心得與感想：雖然真的好累做完FINAL大概要去整骨和電療但真的很有成就感
每個細節和圖片擺放位置都是自己設計的，成品出來差點要放煙火慶祝了好開心。
4.本學期於網頁設計課程上的收穫：真的學到了非常非常多實用的知識，謝謝老師。

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445033
(2).
1.製作作業的時間：2天
2.有無遇到的問題：頁面有時候無法連結，上傳到美寶網不能看(已解決)
3.製作心得與感想：很有成就感。
4.本學期於網頁設計課程上的收穫：學到很多以前沒學過的東西


(1) 網站主題：探險活寶

(2) 導覽列架構設定：



(4) 風格設定：主角阿寶配色
(5) 主色調，黃綠色
(6) 製作動機：喜歡探險活寶
(7) 製作目的：讓大家了解探險活寶
預期效果：讓兒童更加喜愛



(編輯記錄)

作業網址:http://mepopedia.com/~web104-2c/final/final-1035445201
(1)網站主題：America horror story
(2)導覽列架構設定
http://i.imgur.com/R6ycTGo.jpg?1
(3)主要瀏覽族群：18+
(4)風格設定:恐怖
(5)主色調，輔助色調：黑 紅 深綠 白 灰
(6)製作動機：覺得很好看
(7)製作目的：跟大家分享



(編輯記錄)

作業網址:http://mepopedia.com/~web104-2c/final/final-1035445147
(1)網站主題：灌籃高手
(2)導覽列架構設定


(3)主要瀏覽族群：20上下
(4)風格設定：簡單
(5)主色調，藍灰
(6)製作動機：回憶經典動漫
(7)製作目的：吸引更多人去了解灌籃高手
預期效果：易懂

學號:1035445147



(編輯記錄)

前置作業
作業網址:http://mepopedia.com/~web104-2c/final/final-1035445120
(1)網站主題：我可能不會愛你
(2)導覽列架構設定 :之後補上
(3)主要瀏覽族群：曾經喜歡這部戲的觀眾
(4)風格設定：簡單 明瞭
(5)主色調，輔助色調：粉色，白、橘為主配色
(6)製作動機：只是想做這個主題
(7)製作目的：讓人想起那時看戲劇的感動
預期效果：簡單易懂

學號:1035445120

前置作業
作業網址:http://mepopedia.com/~web104-2c/final/final-1035445096/
(1)網站主題：魔境夢遊
(2)導覽列架構設定
http://i.imgur.com/2GC7HRb.jpg
(3)主要瀏覽族群：以鮮豔的色彩吸引人目光 大人小孩都可觀看
(4)風格設定：簡單 明瞭
(5)主色調，輔助色調：粉色系 粉紅 粉藍
(6)製作動機：很喜歡魔境夢遊這部電影
(7)製作目的：讓人更了解魔境夢遊這部電影
預期效果：簡單易懂

學號:1035445096

作業網址:http://mepopedia.com/~web104-2c/final/final-1035445201
(1)網站主題： 美國恐怖故事第五季
(2)導覽列架構設定
http://i.imgur.com/O3MBUFn.jpg
(3)主要瀏覽族群： 20歲以上
(4)風格設定： 陰森恐怖
(5)主色調，輔助色調：黑灰白 紅 深綠
(6)製作動機： 喜歡這個故事的內容
(7)製作目的： 想跟大家起分享



(編輯記錄)

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445114
(2).
1.製作作業的時間：2小時
2.有無遇到的問題：還可以
3.製作心得與感想：心想事成
4.本學期於網頁設計課程上的收穫：老師真的很努力教大家

(1).作業網址：http://mepopedia.com/~web104-2c/final/final-1035445075/
(2).
1.製作作業的時間： 一天
2.有無遇到的問題： 非常多問題
3.製作心得與感想： 眼睛好酸
4.本學期於網頁設計課程上的收穫：覺得很有就感

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445018/
(2).
1.製作作業的時間：三個小時
2.有無遇到的問題：有 連結錯誤。
3.製作心得與感想：網頁設計真的好難
4.本學期於網頁設計課程上的收穫：學習到很多。


(1) 網站主題：小王子

(2) 導覽列架構設定：
http://imgur.com/Avxal0j



(編輯記錄)

(1)網站主題: LINE
(2)導覽列架構設定:

檔案在同學那裡QQ


(3)主要瀏覽族群: 對產品有疑問的顧客
(4)風格設定: 和line一樣
(5)主色調: 綠 白
(6)製作動機: 突然想到 沒有特別的動機
(7)製作目的:
預期效果: 清楚明瞭、生動


(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445111
(2)
1.製作作業的時間：3hrs
2.有無遇到的問題：語法跑掉
3.製作心得與感想：終於～
4.本學期於網頁設計課程上的收穫：老師很認真用心～

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445105/
(2).
1.製作作業的時間：數不出
2.有無遇到的問題：沒有時間
3.製作心得與感想：從頭到尾都很挫敗
4.本學期於網頁設計課程上的收穫：學到很多看日出的方法


(1)網站主題：神隱少女
(2)導覽列架構設定
[img]http://i.imgur.com/6YYafDt.jpg[/img]
(3)尺寸與架構設定
(4)主要瀏覽族群：5歲以上
(5)風格設定：平靜.可愛
(6)主色調，輔助色調：黑色、暗色
(7)製作動機：我是個長不大的孩子
(8)製作目的：想要讓大家多看看宮崎駿的強大
預期效果：能夠讓大家掉進去再看一次

前置作業
(1)網站主題:LOL英雄聯盟
(2)導覽列架構設定:


(3)主要瀏覽族群:青年
(4)風格設定:遊戲風
(5)主色調:暗色調
(6)製作動機:喜歡這遊戲
(7)製作目的:期末功課
預期效果:有人會想玩他

(1)作業網址：http://mepopedia.com/~web104-2c/final/final-1035445108
(2)
1.製作作業的時間：一天
2.有無遇到的問題：好難
3.製作心得與感想：很難
4.本學期於網頁設計課程上的收穫：學到很多，謝謝認真的老師

(1)作業網址：file:///C:/Users/tr558/Desktop/midterm-1025445108/index.html
(2).
1.製作作業的時間： 7天
2.有無遇到的問題： 有
3.製作心得與感想：無
4.本學期於網頁設計課程上的收穫：有
4.請務必在1/0前回覆，否則為遲交


前置作業
(1)網站主題：
(2)導覽列架構設定