[color=#990000][作業03] 利用Div標籤與CSS建立基本網頁版型--圖片篇[/color]

1. [color=#663300]一、製作說明：[/color]

1.請參考 [url=http://mepopedia.com/forum/read.php?804,16271][講義03] 利用Div標籤與CSS建立基本網頁版型[/url]
的步驟製作

2.下載附件
(或以自己設定的主題與圖片製作）
可從這個作業開始，製作期中作業的第一頁
請選定自己喜歡的主題及相關資料

3.每個同學記得在[color=#990033]title的部分打上"自訂的主題"[/color]
在#footer 註明 Designed by 某某某(可自行取名)

4. 在#wrapper寬度上打上 px的數值

5. #content內，自行打入不同的內容文字，自行隨意設定

6. 以本單元的架構下，文字、圖片及設定，可依講義或自行發揮

7.本作業的的重點為：新增圖片按鈕，頂圖及內文圖。可依參考檔製作，或自訂主題製作（加分）

2. [color=#663300]二、繳交作業方式[/color]

1.製作完成後，檔案命名方式：

[color=#669900]第三個作業FTP上的資料夾為：hw03

每位同學請將自己的資料夾命名為：hw03-學號
這個作業的網址則為:http://mepopedia.com/~web104-2c/hw03/hw03-104xxxxxxx

資料夾內含：
1.首頁命名為index.html
2.一個命名為style.css的css樣式檔
3.images圖檔資料夾

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


2. 上傳至FTP

3.回覆本篇文章

　(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-104xxxxxxx

　(2) 主題 / 風格設定（色彩設定部份)

　(3) 有無遇到的問題

　(4) 製作感想

　(5) 製作作業的時間



[color=#CC3300]範例參考網站：[/color]
http://mepopedia.com/~jinjin/web/hw03/

作業參考
(1) http://mepopedia.com/~jinjin/web/hw03/
(2) http://mepopedia.com/~web103-a/hw03/hw03-1025445001/
(3) http://mepopedia.com/~web101c/hw03/hw03-1015445231/
(4) http://mepopedia.com/~web100-a/hw03/hw03-1006445010/
(5) http://mepopedia.com/~web101c/hw03/hw03-1015445203/
(6) http://mepopedia.com/~web101c/hw03/hw03-1015445243/Introduction.html

http://mepopedia.com/~web100-a/hw03/hw03-1006445010/

http://mepopedia.com/~web100b/hw03/hw03-1001445006/

===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================



(編輯記錄)

1.作業網址：http://mepopedia.com/~web105-2c/hw03/hw03-1045445117

2.製作主題 ：雅緻蝶舞-蝴蝶蘭

3. 欲呈現之配色風格：被譽為蘭中皇后的蝴蝶蘭，色彩斑斕，姿態幽美，宛如在空中成群展翅的蝴蝶，襯底配
色為淺粉紫色系，上下標題列採用層疊葉影變化，豐富主題欄，內文則使用淺綠色系，呈現舒服淡雅，輕而飄
逸似的微風輕拂的花林樣貌，將蝴蝶蘭主色以淡色作為背景，也中和了色彩鮮艷的蝴蝶蘭所帶給觀者的感受，
內文標題則以棕色、紫色以及墨綠色，呼應了背景色彩以及文中圖片，並呈現大自然氛圍，內文文字則使用中
性的灰色，清晰明瞭，使觀者在閱讀時舒服自在，不至色彩過於鮮豔，如同蝴蝶蘭般的多變樣貌，時而鮮豔，
時而淡雅，種類豐富，色彩多樣的蝴蝶蘭，在水泥叢林中，活力綻放，在翠綠樹林中，一枝獨秀。

4.有無遇到的問題：作業講義清晰明瞭，以及之前作業練習更加熟悉，本次並未遇到任何問題。

5.製作感想： 這一次的作業練習讓我越玩越上癮，也因為是做自己有興趣的主題，在找尋資料的過程更顯輕鬆
自在，在前兩次的作業尚不熟悉時，會認為網頁是很難觸碰的知識，但也因老師詳細的介紹與說明，讓作業練
習一次比一次的熟悉，蝴蝶蘭對我來說就是個又愛又恨的植物，原生於森林中的蝴蝶蘭，來到了人們生活的環
境，難免會因為種種因素，而使自己栽種的蘭花生命終結，但我依然對於蘭花的優雅感到著迷，也藉由期中考
的單欄式網頁，讓自己多查些資料，更認識大自然的斑斕色彩，網頁中也將會提到挑選購買，照顧方法等，使
用興趣的觀者也能了解蝴蝶蘭的習性以及種植的基礎概念，蝴蝶蘭一直以來都是過年節慶的首選花禮，裝飾為
盆的蝴蝶蘭總會有枯萎的時候，一般可能會認為應該也不會開花了，而將她丟棄，但是開過花的蝴蝶蘭，經由
更換介質，單株種植等方式，可以使蝴蝶蘭更加蓬勃生長，並且二度綻放花朵，這些知識也是以前的我不知道
的，總歸，園藝休閒是一種興趣，也可說是天性，任何事物都可以嘗試，並且學習，經由本次的作業，也將蝴
蝶蘭介紹給更多觀者認識，或許，細細品味其中姿態，也會逐漸地被蝴蝶蘭的獨特氣質，身受著迷，人生，就
是如此，享受著每天生活所帶我們的小驚喜，就是我一直以來最大的樂趣。

6.製作作業的時間 ： 大約2~3小時(不包含上課練習時間)。



(編輯記錄)

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445045

(2) 主題 / 風格設定（色彩設定部份)
主題是做辛普森，因為辛普森是黃色所以整個色調主要是黃色
(3) 有無遇到的問題
無
(4) 製作感想
一開始覺得很複雜，之後就慢慢開始上手
(5) 製作作業的時間
3小時

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445036

(2) 主題 / 風格設定（色彩設定部份)
　　hajime給人的感覺就是一種，神秘，讓人永遠猜不透他下一次要做什麼事情的感覺，
　　所以我用了深藍色，有一點神祕感，而且我覺得藍色超適合hajime的啦~

(3) 有無遇到的問題
　　在改footer背景圖的時候，旁邊顯示的視窗顯示不出來，要開即時才會跑出來，不知道為什麼呢？

(4) 製作感想
　　可以選擇自己喜歡的題目用自己顯歡的偶像很開心，幫他做成介紹網頁更開心，而且做出整個網頁成就感很高，
　　會一直想要把它完成，甚至做到更完美一點～希望期中做出來可以很完美！

(5) 製作作業的時間
　　上課的時候跟著做，跟回家晚上大約花一～兩個小時製作（兩天的晚上）。



(編輯記錄)

(1) 作業網址： http://mepopedia.com/~web105-2c/hw03/hw03-1045445212

(2) 主題：金智媛，因為她很漂亮、很有氣質，所以我用淺色系來呈現，灰色代表著優雅且神祕。

(3) 有無遇到的問題：字無法換到圖片的左邊，只能在圖片的下方。

(4) 製作感想： 雖然有點複雜，但如果上手了，應該會蠻好玩的，可以自己設計自己喜歡的風格。

(5) 製作作業的時間：兩三天吧



(編輯記錄)

3.回覆本篇文章

　(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445009

　(2) 主題 / 風格設定 :庫洛魔法使/充滿少女情懷的感覺

　(3) 有無遇到的問題 :我的圖片再放第四和五張的時候他會跑掉為甚麼!!!!!!!!!!難瘦 TT

　(4) 製作感想 :很好玩，做自己喜歡的東西很開心
　
(5) 製作作業的時間 :半天

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445003

(2) 主題 / 風格設定（色彩設定部份)

　主題為知名美國影集The Walking Dead 陰屍路，由於影集內容有點血腥又現實，於是整體使用暗紅與深灰做搭配。

(3) 有無遇到的問題
　容易被類別搞混

(4) 製作感想
　原本就很喜歡陰屍路的劇情與畫面張力，再加上最近期待以久的第7季開播，於是就順勢的選了這個主題。
　一邊思考著劇情內容，一邊考慮著配色問題以及版面構成，是件很有趣的事。

(5) 製作作業的時間
　修修改改的做了大概有1個禮拜吧....

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445072

　(2) 主題 / 風格設定（色彩設定部份) : 【Siv HD】他是一位歐服知名遊戲英雄聯盟
攻略影片製作者及娛樂影片製作者。
簡約色塊 (色彩以嘿.白.藍綠色調)

　(3) 有無遇到的問題 :自己用的版本比較新加上電腦傲嬌跑不動，
有的時候不給改顏色或移動字，和不給刪區塊，
總而言之就是一堆問題。

　(4) 製作感想 : 做自己喜歡的主題雖然很開心，
但是不知道為什麼做到後面就開始惱羞成怒，
開始抱怨為甚麼要做那麼麻煩的東西，
應該是因為我也是這麼麻煩的人吧?

　(5) 製作作業的時間 :1天又12個小時14分鐘



(編輯記錄)

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445102

(2) 主題 / 風格設定（色彩設定部份):以一部改編自黃頤銘著作《初來乍到：回憶錄》的美國情境
喜劇，以灰色黑色來強烈對比內容的有趣。

(3) 有無遇到的問題 :加圖片不太了解怎麼讓文字對齊。

(4) 製作感想 :有趣，但還需要花很多時間了解。

(5) 製作作業的時間 :將近半天

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445057

(2) 主題 / 風格設定
美少女戰士/華麗、繽紛的

(3) 有無遇到的問題
還好，只是需要花時間

(4) 製作感想
做自己喜歡的東西真的蠻酷又蠻開心的！可是過程真的是常常做錯就要從頭來過，很開心自己做出來的東西一次比一次精緻，還蠻激勵人的。

(5) 製作作業的時間
大約5小時

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

(2) 主題 / 風格設定:汽車總動員是一部動畫，我希望能呈現俏皮、趣味的感覺，所以我用了主角--閃電麥坤的配色，也用了虛線增加趣味的感覺。在最上面的圖用了有趣的英文字形，還有按鈕我用了縮小的圖讓網頁多變。

(3) 有無遇到的問題 :用家裡的電腦開字會變的都一樣大，但是用dreamweaver的設計就沒有問題了…

(4) 製作感想 :這次變的有點難但是認真聽還是可以做出來，老師上堂課真的講好快喔…希望可以分幾個步驟來教讓我們有印象再教下去。


(5) 製作作業的時間 :1整天

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445123

(2) 主題 / 風格設定
介紹我喜歡的漫畫老師，並將老師時常呈現的風格表現出來， 白色、粉色，有點過去記憶的感覺。

(3) 有無遇到的問題
按鈕邊邊都會有小空隙，弄到快ㄎ一笑
按鈕最後一個會跳到下面，

(4) 製作感想
找對問題之後，不再有空隙，人生舒爽

(5) 製作作業的時間
5~10小時

1045445174-林宣妤

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445174

(2) 主題 / 風格設定
甜點食譜/可愛、夢幻

(3) 有無遇到的問題
title-2如果在css裡面直接打雖然在DW裡面有顯示，但網頁預覽版沒有反應，一定要按新建CSS規則，有點奇怪
moodle有點麻煩

(4) 製作感想
可愛又好看，有成就感

(5) 製作作業的時間
兩天



(編輯記錄)

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

　(2) 主題 / 風格設定:
Standing Egg/清晰的藍,紫色

　(3) 有無遇到的問題:
剛開始有點掌握不到方法,後來就可以了
　(4) 製作感想 :
剛開始不會的時候感覺很難,掌握到訣竅後就覺得很有趣!
　(5) 製作作業的時間:
下午四點多到七點多

　(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445069

　(2) 主題 / 風格設定（色彩設定部份)
輕晨電 / 因為他們風格酷酷的，所以用黑灰的顏色

　(3) 有無遇到的問題
類別有點不知道怎麼調

　(4) 製作感想
有些語法不太清楚，就上網查，還好是能做自己喜歡的主題，不然可能會很惱羞，很沒耐心

　(5) 製作作業的時間 6小時

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

　(2) 主題 / 風格設定（色彩設定部份) ：走舒爽風格，因為我挑選的是位書籍作家。

　(3) 有無遇到的問題 ：再置入按鈕那些圖片的時候因為檔名沒有改title之類的一直放不進來，而次標題的部分會多出一些色塊，一直找不到原因後來才方現是空格的地方也選到title-2了。

　(4) 製作感想 ：很複雜.....，但是做出來又是一番成就。

　(5) 製作作業的時間 ：前前後後加起來應該有一整天了吧。

1025445200 - 連怡婷

　(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1025445200

　(2) 主題 / 風格設定（色彩設定部份) Little Twin Stars-雙星仙子 / 顏色以官方粉紫色為主色調

　(3) 有無遇到的問題 一直找不到怎麼調框的顏色...

　(4) 製作感想 做自己喜歡的主題做得很快樂

　(5) 製作作業的時間 1hr

1.作業網址：http://mepopedia.com/~web105-2c/hw03/hw03-1045445084

2.製作主題：文青書店

3.風格：想呈現出小清新的感覺

4.問題：感覺有點緊湊..

5.感想：這次加入圖片和按鈕，整個超崩潰！

6.時間：超多天..

1.作業網址：http://mepopedia.com/~web105-2c/hw03/hw03-1045445018

2.製作主題：台灣夜市小吃

3.風格：有一種親切的台味

4.問題：問題很多，很多都要問同學，不會繞圖排文
也不知道文字跟圖片與邊框的距離要怎麼分開一點

5.感想 : 網頁設計真的好難，困難重重

6.時間：大概花了兩個晚上

　(1) 作業網址 : http://mepopedia.com/~web105-2c/hw03/hw03-1045445180

　(2) 主題 / 風格設定（色彩設定部份) : 鋼鐵人主題 黑紅配色。

　(3) 有無遇到的問題 : 我覺得我的問題很多，做到快長痔瘡最為嚴重。

　(4) 製作感想 : 真是需要耐心，我都一直邊吃邊做。

　(5) 製作作業的時間 : 真的超久沒在蓋，每天晚上兩小時，痔瘡養成計畫。

　(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445162

　(2) 主題 / 風格設定（色彩設定部份)
沿用作業二的主題再做更大的主題延伸，介紹日本的和風文化也是採深紅色、黃橘等等色調作搭配，希望有傳達出和風的感覺。

　(3) 有無遇到的問題
這次的問題比較大，bottom置入圖片的部分弄了很久，不知道是當初製作尺寸的問題還是CSS的寬、高設定上出錯，現在這個還是跟我當初放進的圖片不一樣，不知道怎麼修改才好><><決定先交
還有繞圖排文結束的部分，是在文末要結束的那段點選類別clearboth還是該在下一段開頭設置？弄了很多次到最後都沒變化和反應，很苦惱；x；
希望這部分能再說一次。
　(4) 製作感想
很多地方要自己回去再複習跟摸熟一次，這次覺得挫敗感最大啊..........！雖然問題有點多最後還是決定先交作業><><><
　(5) 製作作業的時間
5~6小時(不包含上課時間)

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445045
(2) 主題 / 風格設定（色彩設定部份)
主題是做辛普森，因為辛普森的顏色是黃色，所以整個版面主要的顏色是用黃色
(3) 有無遇到的問題
無
(4) 製作感想
一開始覺得很難，但到後面就比較上手
(5) 製作作業的時間
3小時

(1) 作業網址:http://mepopedia.com/~web105-2c/hw03/hw03-1045445027

(2) 主題 / 風格設定：B.A.P 以淡紫色為主。

(3) 有無遇到的問題：額我是邊看影片邊做的，問題大概就是影片聲音頗小...( 我耳朵問題

(4) 製作感想：B.A.P 大發 ( 喂

(5) 製作作業的時間：1天

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

　(2) 主題 / 風格設定（色彩設定部份) :Nathalie Lete插畫家/色彩多樣化

　(3) 有無遇到的問題:一開始會遇到一些小問題，但是慢慢地修改會自己抓到重點和訣竅

　(4) 製作感想:慢慢地自己摸索 會發現網頁其實蠻好玩的 自己找到要改進的地方 就會慢慢發現方法

　(5) 製作作業的時間:2~3個小時

　(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445105

　(2) 主題 / 風格設定（色彩設定部份): 我的主題是迪士尼樂園 風格設定為奇幻的風格 配色方面我選擇較為典雅的深藍色作為整體色調

　(3) 有無遇到的問題 :我遇到的問題真的非常多種一下是按鈕跑位一下又是圖案跑不出來

　(4) 製作感想 :真的覺得做網頁設計要非常有耐心和細心,不燃一出錯就全部都跑不出來,雖然敖嘞非常久的時間才做出來不過看到成果真的感到非常值得

　(5) 製作作業的時間 :2~3天

　(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445177

　(2) 主題 / 風格設定（色彩設定部份):小美人魚的粉色系配上獨特的藍綠色所呈顯出夢幻的頁面

　(3) 有無遇到的問題 影片都會出問題

　(4) 製作感想 :忽然覺得原來我很厲害哈哈哈

　(5) 製作作業的時間 :2~3天

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445129

　(2) 主題 / 風格設定（色彩設定部份) :卡莉怪妞/色彩繽紛可愛

　(3) 有無遇到的問題:剛開始卡關很久，後來邊看講義邊做有慢慢摸索出方法。

　(4) 製作感想:因為是自己慢慢摸索完成的，最後完成時感到非常有成就感心裡很開心。

　(5) 製作作業的時間:2~3個小時

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445033

(2) 主題 / 風格設定（色彩設定部份)

這次主題還是以蠟筆小新為題，從小就對於他的作品以及人物就非常喜愛感興趣，可以說是童年由他一起度過。

(3) 有無遇到的問題
　
都是英文....對於我這豆子腦有點障礙，還好我有一點點朋友，可以幫助我度過難關，除此之外都順順的~

(4) 製作感想
　
沒什麼特別想法.....真的，因為才剛接觸，心情還滿複雜的有點點障礙

(5) 製作作業的時間

30分鐘至一個鐘頭....

　(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445019

　(2) 主題 / 風格設定（色彩設定部份)
跟作業二差別很大哈哈哈,這次整個走唯美文青風吧~整個就用粉色和白色的風格~非常清爽的感覺吧~

　(3) 有無遇到的問題

語法問題吧~不能中斷製作,中間如果去廁所,回來就忘了做到哪哈哈哈~~~~還有語法不聽話,設定了不跑出來TAT,還有設定出來的東西如果不如自己想像會很煩ㄚㄚㄚㄚㄚ

　(4) 製作感想
這次投入很多的心力,除了老師上課交的以外，另外還上網查了有沒有新的東西可以加入，另外吸收了許多東西~~整個做好 超有成就感啦!!


　(5) 製作作業的時間
前後修修改改......6~7小時吧~~
因為同樣的東西來會反覆改,看整樣才是最理想的
要兼顧語法,還要兼顧排版~~~

　(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445030

　(2) 主題 / 金太妍

　(3) 有無遇到的問題 有 自己的帳號登不進去，登別人的

　(4) 製作感想 因為是做我自己喜歡的偶像，雖然做得有點灰心沮喪，但做出來的樣子，我還是非常喜歡的。

　(5) 製作作業的時間 3小時

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445099

(2) 主題 / 風格設定
Dance Flow由知名舞蹈教室的八名舞蹈教師組成的團體，成員為四男四女。於2008年參加
電視公司舞蹈選秀節目《舞林大道》競賽而成名。利用黑色來凸顯他們跳舞的爆發力和神
秘的感覺

(3) 有無遇到的問題
還好，不懂的地方看了老師的講義，很快就解決了

(4) 製作感想
剛開始覺得複雜又麻煩，不過接近要完成的時候，覺得很開心又很有趣

(5) 製作作業的時間
大概三小時

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445198

　(2) 主題 / 風格設定 紀念泰皇 皇室配色 (棕 黃 為主)

　(3) 有無遇到的問題 無

　(4) 製作感想 越來越難搞了 很花時間

　(5) 製作作業的時間 1-2HR

(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445141

　(2) 主題 / 風格設定 LNG workshop

　(3) 有無遇到的問題 無

　(4) 製作感想 痾 普通

　(5) 製作作業的時間 忘了

http://mepopedia.com/~web105-2c/hw03/hw03-1045445081/

　(2) 風格設定:美國搖滾風

　(3) 有無遇到的問題 :無

　(4) 製作感想 : 一開始作很辛苦，但漸漸上手。

　(5) 製作作業的時間:一整晚

1.作業網址：http://mepopedia.com/~web105-2c/hw03/hw03-1045445051

2.製作主題 ：張大千

3. 欲呈現之配色風格： 古色古香，既高雅而富有古代的色彩與風味。

4.有無遇到的問題：作業講義步驟明確，但操作理解上還有許多進步的空間，作業練習更加豐富。

5.製作感想：張大千是我一直很喜歡的畫家，所以在這次選材上很快的就知道大致的製作方向， 書畫界多少朝代了，能在這之中脫穎而出，無論鑑賞與買賣，都有一定上的行情，這在狂樂者中是一種理直氣壯的熱愛。我不知道這個世代，還有多少人愛畫成痴？但在張大千一筆一畫的古風美感中，相信還是有許多人能在這之中體會出甚麼，也因為這樣，在這次的網頁製作過程，使我非常開心。

6.製作作業的時間 ： 大約5小時(不包含上課練習時間)。

1045445186黃森宜

　(1) 作業網址: http://mepopedia.com/~web105-2c/hw03/hw03-1045445144


　(2) 主題 / 風格設定
這次我走的是甜美風，雖然渡邊直美是胖胖的女孩，可是我覺得粉紅色甜美風最適合她了~

　(3) 有無遇到的問題
有~遇到很多問題，我看著講義做但還是會一直失敗，一開始很難過，尤其是在做DIV標籤的時候，但還好後來有成功了，最後成功時有種很
感動的感覺!!

　(4) 製作感想
投入很多的心力, 但是我真的做很慢，而且如果沒記起來我做到哪我就忘光光然後要重做，但是完成的那一瞬間超感動的~

　(5) 製作作業的時間
沒注意總共做了多久，但平均蠻多天的，每次都1、2小時˙

http://mepopedia.com/~web105-2c/hw03/hw03-1045445075

　(2) 風格設定:時尚潮流

　(3) 有無遇到的問題 :無

　(4) 製作感想 :做出來滿有成就感的

　(5) 製作作業的時間:3小時



(編輯記錄)