[作業02] 利用Div標籤與CSS建立基本網頁版型-以單純色塊為例

[作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例

製作說明

1.請參考
[url=http://mepopedia.com/forum/read.php?804,16481][講義02] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]
的步驟製作，自行選擇一主題，設定網頁風格，依照所設定風格進行配色。

2.每個同學記得在[color=#990033]title的部分打上"視傳二A-學號-以色塊建構的網頁單欄排版"，或其他適合的名稱[/color]

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

4.#header、#content及#footer內，自行打入一篇有：標題、副標及內容的文章，請依其內容作風格及配色設定，footer請設定個人的專屬版權聲明

5.請每位同學依步驟完成本單元─網頁版面基本架構與背景色及字體設定後，上傳至FTP

6.本次作業的重點在於：

[color=#CC0000](1)DIV與CSS的設定
(2)利用單純色彩搭配與字體設定，針對內容設計出符合主題並具有質感的網頁[/color]

1. 繳交作業方式

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

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

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

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

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


2.上傳至FTP

3.回覆本篇文章

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


(2).請回答以下問題：
1.製作主題
2.欲呈現之配色風格：
3..有無遇到的問題?
4.製作感想


[hr]
同學的範例喔！

(1) http://mepopedia.com/~web103-c/hw02/hw02-1025445036/
(2) http://mepopedia.com/~web103-a/hw02/hw02-1025445040/
(3) http://mepopedia.com/~web103-a/hw02/hw02-1025445070/
(4) http://mepopedia.com/~web103-a/hw02/hw02-1025445001/
(5) http://mepopedia.com/~web103-a/hw02/hw02-1025445025/
(6) http://mepopedia.com/~web100b/hw02/hw02-1001445055/
(7) http://mepopedia.com/~web100b/hw02/hw02-1001445095/

===========================================



(編輯記錄)

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

1.製作主題 ：東京晴空塔-TOKYO SKYTREE

2.欲呈現之配色風格：晴空塔為目前世界第二高塔式建築，獨自佇立在晴光藍天下，塔身主色為「晴空塔白」，
是晴空塔特有的色彩，使用日本傳統色、最淡的靛藍染色「藍白(Aijiro)」，塔身潔白而泛出淺淡青色，在藍空
的輝映下，閃爍光芒。
因此「藍白」色作為網頁標題欄主色，象徵天空，藍白色包覆著內文欄的色彩青花瓷藍，以及靛藍染色的內文
字，將晴空塔主色視覺套用在網頁中，呈現晴空塔特色，而背景色則以淺墨綠，沉穩的墨綠色襯托主題鮮明的
色彩，並想呈現和風，靜謐之感，內文標題字則使用明黃，除了使字體明顯，也展現陽光灑落空中的光芒，在
日出之時，陽光將晴空塔染成佇立在墨田區的獨秀金光。

3.有無遇到的問題：因第一次作業的嘗試，逐漸熟悉操作，並未遇到棘手的問題。

4.製作感想：此次的作業較為上次熟悉，操作也較順利，有讓我感到比第一個網頁要來的容易， 漸漸的理解網
頁所帶給我的樂趣，在製作的過程當中，有藉由找尋資料，更加了解了晴空塔的施工細節、建築形式、外型色
彩等，現代建築所帶人們的便利性，以及發展為足以代表東京的著名地標，於東京鐵塔後所發展成另一個邁向
未來新科技的建築樣式，這是做網頁設計時所帶給我的另一層面的探知，以東京晴空塔為主題，是除了自己對
晴空塔的喜愛外，也將這座極具日本和現代風格融合的建築介紹給大家，使更多人認識，以及了解，之前看了
往後的作業，越顯複雜之感，但也因這兩次的練習，使自己不致於對網頁有恐懼感~ ，繼續前進，嘗試不同、
進階的網頁設計。



(編輯記錄)

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

(2).請回答以下問題：
1. 製作主題：心灵鸡汤
2.欲呈現之配色風格： 紫色比较温馨，温暖
3.希望老师讲的慢一点，有点不怎么跟的上

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


(2).請回答以下問題：
1. 製作主題：「一把青」戲劇與角色簡介

2.欲呈現之配色風格：
整體呈現配色比較偏老舊風格，呈現出一點年代感，因為戲劇內容較為穩重（或者說悶），所以背景色用了黑色。
而前面用咖啡色系的配色襯托出老舊，時代感～

3.這次比較沒有什麼問題～

4.有越來越上手的感覺了，上課跟著老師一起做，回家再自己慢慢摸索複習，漸漸對網頁設計有更多的興趣了～
希望能繼續維持這種順順的感覺～學習更多關於網頁設計的技能！

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


(2).請回答以下問題：
1.製作主題 ：野比 のび太人物介紹
2.欲呈現之配色風格： 直覺聯想到哆啦Ａ夢的配色
3..有無遇到的問題? ：尚無
4.製作感想 ：有頗大興趣，想學更多。

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


(2).請回答以下問題：
1.製作主題 :大東亞戰爭終結之詔書
2.欲呈現之配色風格： 皇室配色 深色色系
3..有無遇到的問題?: 無し
4.製作感想: 無し

(1).作業網址:http://mepopedia.com/~web105-2c/hw02/hw02-1045445189
(2).請回答以下問題：
1.製作主題:汽車總動員
2.欲呈現之配色風格:我使用了比較鮮豔的配色,也跟閃電麥坤這個腳色一樣的配色,想呈現正面陽光還有童年的感覺
3.有無遇到的問題?
經過了作業一的基礎所以這次很快就能完成
4.製作感想:
我覺得上課認真聽配合講義就能輕鬆地完成作業了
而且配色也不會很難可以用腳色的顏色去呈現
邊框用虛線也可以讓我的網頁看起來更有趣

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


(2).請回答以下問題：
1.製作主題 :知名小說-何以笙蕭默
2.欲呈現之配色風格： 運用墨綠色及粉紅色呈現出他們愛情之間的苦澀及甜蜜，等待7年的苦澀和誤會冰釋後的甜蜜。
3..有無遇到的問題? 無
4.製作感想 :可以運用網頁設計做自己喜歡的東西，趁機推薦給別人是件很高興的事

(1).作業網址:http://mepopedia.com/~web105-2c/hw02/hw02-1045445069
(2).請回答以下問題：

1.製作主題:百畝森林

2.欲呈現之配色風格:用小豬跟維尼的顏色去配色，代表他們兩個的友誼

3.有無遇到的問題?
講義很詳細，慢慢摸索就沒有甚麼問題

4.製作感想:
學著學著越來越有興趣，因為可以用自己喜歡的主題，所以也做得很開心

(1).作業網址 http://mepopedia.com/~web105-2c/hw02/hw02-1045445033/
(2).請回答以下問題：
1. 製作主題：野原新之助
2.欲呈現之配色風格： 角色重點配色為底
3.稍稍越來越複雜了...但是實在很有趣，對此也滿有興趣的，也謝謝老師的指教。

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


(2).請回答以下問題：

1.製作主題 : 小鼠波波

2.欲呈現之配色風格 : 波波的衣服配色

3..有無遇到的問題? 有時候會錯亂

4.製作感想 : 除了錯亂其他都還行

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


(2).請回答以下問題：
1.製作主題 : 日本青森
2.欲呈現之配色風格：清新淡雅,帶點自然的顏色
3..有無遇到的問題? 無
4.製作感想 :有趣

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

製作主題:四四南村-簡單市集
欲呈現之配色風格:以嫩系的色調，來吸引年輕的少女心，引起他們的喜好，呼朋引伴前來共襄盛舉。
有無遇到問題:無
製作感想:這次比上次還要更順手了一點，也比較知道問題在哪，一一解決不懂的地方，覺得很有成就感。
老師我又更改了一次我的作業!!



(編輯記錄)