[作業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

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



(編輯記錄)

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


(2).請回答以下問題：
1.製作主題：介紹日本不同於月份的稱呼方式
2.欲呈現之配色風格： 日本和風、帶著沉穩的不會太過豔麗的紅黑色為主調，希望帶給人心境平和又不會太過膩以及疲倦的配色方式
3..有無遇到的問題?
突然增加了很多CSS的製作樣式，有些混亂和忙不過來，幸好有記下筆記和回家練習，才能好好跟上。
4.製作感想
很多樣式設計都想點點看試試效果，最後有試到自己滿意的成果太好了！因為是介紹日本的月份稱呼，想把網頁設計成讓人能聯想的和風設計的感覺，其實只要好好的每一小段慢慢去嘗試跟騰出理解的時間都不困難，雖然上課的時候老師講得有些快但目前都還跟得上沒什麼大問題！
期待把期中的要做的資料和圖片放上去，讓整個架構更完整，寫出自己滿意的網頁設計！

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


(2).請回答以下問題：
1.製作主題 飢餓遊戲

2.欲呈現之配色風格： 以冷色系來呈現電影裡面的遊戲無情又殘酷

3..有無遇到的問題? 沒有

4.製作感想 :這次的作業做起來比較上手了，能比較迅速做完，雖然多了一些製
作樣式，不過遇到不懂的地方，老師的講義寫得很清楚，不會令人摸不著頭緒

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

1 製作主題：慢活！
2 配色風格：以自然顏色為主
3 遇到問題：css一度發生錯誤..
4 製作感想：終於完成作業，很開心！

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


(2).請回答以下問題：
1.製作主題 -英國男孩一世代樂團
2.欲呈現之配色風格： 少女們的小鮮肉，讓人為之瘋狂的歌曲
3..有無遇到的問題? - 沒有
4.製作感想 -很有趣，但有時會搞不清楚到底是上傳到哪裡

作業網址:http://mepopedia.com/~web105-2c/hw02/hw02-1045445150

1.製作主題：
美國搖滾樂團OneRepublic
2.欲呈現之配色風格：
簡約黑灰白風格
3..有無遇到的問題?
沒有
4.製作感想：
漸漸熟悉網頁設計的操作模式，比起第一個作業也變得更上手 。

作業網址:http://mepopedia.com/~web105-2c/hw02/hw02-1045445045
(2).請回答以下問題：
1.製作主題 睡美人
2.欲呈現之配色風格：睡美人的代表色是粉紅色，也是少女的代表色。粉紅色讓人覺得浪漫有活力 ，所以網頁整體的顏色是粉紅色系。
3..有無遇到的問題? 沒甚麼問題
4.製作感想
網頁真的有點複雜，不過希望會越來越上手。

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



(2).請回答以下問題：
1.製作主題 :佩佩豬
2.欲呈現之配色風格：可愛童心
3..有無遇到的問題:容易搞亂
4.製作感想 :覺得可愛

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


(2).請回答以下問題：
1.製作主題 屍速列車
2.欲呈現之配色風格： 在血腥的畫面中又帶點溫馨的粉紅色
3..有無遇到的問題? 無
4.製作感想
在做這個作業的時候非常開心，因為心裡有非常多靈感想要做，也有很多想要做的主題，最後做出來的樣子讓我還挺是滿意的。

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

(2).1.製作主題：B.A.P
2.欲呈現之配色風格：用紫色的色調做呈現，給人輕快的感覺。
3..有無遇到的問題：有時候上課老師講得有點快，給我們做的時間有點短，
有時候會來不及做，老師就直接到下一個步驟了。
4.製作感想：因為做的是自己喜歡的東西，所以做得還滿開心的。

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


1.製作主題 ：詩人楊渡
2.欲呈現之配色風格：柔和、淡雅，因配合詩文內容所以選擇彩度較低的顏色。
3..有無遇到的問題?：沒有。
4.製作感想 ：一開始覺得語法很複雜，但是經過練習之後就覺得其實不難，只要把邏輯搞懂就好了，
　　　　　　另外我覺得老師整理的講義很棒，對於課後複習非常有幫助。

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


(2).請回答以下問題：
1.製作主題 :少年魔法師
2.欲呈現之配色風格： 想要有點魔法的奇幻效果
3..有無遇到的問題? 這是要加的東西有點多，有點難
4.製作感想 :搞了很久終於用出一個網頁的樣子了，勝感欣慰。

作業網址:http://mepopedia.com/~web105-2c/hw02/hw02-1045445057

1.製作主題 :歌手王詩安簡介
2.欲呈現之配色風格： 簡潔、舒適、海洋、放鬆，白色與藍色為主軸
3..有無遇到的問題?：尚無
4.製作感想 ：我本身很喜歡王詩安這位歌手，所以這個作業是想為她做一個簡介的頁面，還偷偷私心放了一個youtube的連結，覺得網頁設計還滿有趣的，每個人做的都不一樣，可以大膽地放一些自己喜歡的東西在裡面。

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


(2)
1.製作主題 :英雄聯盟S6世界賽冠軍
2.欲呈現之配色風格： 英雄聯盟官方商標配色
3..有無遇到的問題?:無
4.製作感想 :我做的很棒

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

1.製作主題 ：
PSYCHO-PASS 心靈判官

2.欲呈現之配色風格：
想要表現出Domineda的顏色(黑與藍綠色)，在黑暗中執行正義時，選擇那最能帶來最大利益與最低的傷害。


3.有無遇到的問題：因為有幾次沒有去上課，試試看別人打的原始碼，自己在試著打打看就會了(*˙▽˙*)/


4.製作感想：
一開始因為不了解那些英文數字，慢慢了解與他的"公式"，就能作出很漂亮的網頁~只不過只要有點小差錯，他就會出不來阿OTZ

作業網址: http://mepopedia.com/~web105-2c/hw02/hw02-1045445144


1.製作主題 :薰衣草森林

2.欲呈現之配色風格：想讓大家一點進來就能感受到有紫色薰衣草的感覺,所以配色以紫色為主要色彩,
再用深淺不同色調搭配,呈現充滿薰衣草的感覺。

3..有無遇到的問題? 這次的作業比起第一次做的還快了,覺得這次作業的內容有比第一次簡單,所以做起來比較開心,
不會有遇到挫折的感覺 ,而且加上老師的講義內容很淺顯易懂,對排斥做網頁的我很有幫助!

4.製作感想 ：每次看在網路上看到一些很美的網頁，就會覺得很羨慕,但是自己又不會做,做這些作業,
除了很頭痛之外,完成之後卻很有成就感,而且對我們來說學做網頁是一件非常有幫助的事,
希望能學到更多，更加努力學會更多東西~



(編輯記錄)

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


(2).請回答以下問題：
1.製作主題 :練習，喜歡自己
2.欲呈現之配色風格： 淺色風格，色系看起還較為舒服
3..有無遇到的問題? 無
4.製作感想 : 我覺得...製作時字和邊框那些需要調整會讓我很崩潰......因為會找不到問題出在哪......

:http://mepopedia.com/~web105-2c/hw02/hw02-1045445105
1.製作主題:台北101
2.欲呈現之配色風格:用較為暖色系風格,看起來較為舒適
3.有無遇到問題:有時候會少打一些程式碼
4.製作感想:很常出現底色出不來或是文字無法改變的狀況

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


(2).請回答以下問題：
1.製作主題 :韓星官網
2.欲呈現之配色風格：黃色 藍色的撞色風格
3..有無遇到的問題? 語法有點不太懂.....但是問了同學後就比較會做了 這次做完這個作業後 收穫不少
4.製作感想 : 配色排版方面我還需要多多練習

這次的排版有點陽春 因為一切都還在排版段，想把這次作為練習，然後把學的還有知道的都用上去了，字體變色，大小之類的，但是好像還有很多不足的地方，排版方面真的需要多加加強，實在無法一心二用一邊顧排版，一邊打語法啊啊啊啊，可能是不夠熟練的原因吧


http://mepopedia.com/~web105-2c/hw02/hw02-1045445019


謝謝老師！！！！

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

2.呈現風格：想用暗綠色來呈現古老、還舊的感覺。

3.有無遇到的問題：經過上一次的作業，這次有比較順手，不過過程中還是有些小問題，所以花了2小時20分鐘完成。

4.製作感想：還是覺得網頁設計有點困難，跟不上老師的進度。

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


(2).請回答以下問題：
1.製作主題 周杰倫
2.欲呈現之配色風格： 用深藍色配
3..有無遇到的問題? 有些語法不太懂
4.製作感想
有點小複雜小混亂

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



(2).請回答以下問題：
1.製作主題 :庫洛魔法使
2.欲呈現之配色風格：以粉嫩色系為主色，想呈現夢幻的感覺
3..有無遇到的問題:在程式碼方面比較困難
4.製作感想 :覺得很有成就感~~~



(編輯記錄)

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


(2).請回答以下問題：
1.製作主題 :勵志短詩
2.欲呈現之配色風格：正面向上
3..有無遇到的問題? 無
4.製作感想 : 之後需要多多練習

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


(2).請回答以下問題：
1.製作主題 電影新星 新海誠
2.欲呈現之配色風格：夢幻
3..有無遇到的問題? 沒有問題
4.製作感想 課上的很快有些聽不太懂不過自己摸索的感覺滿好的

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

(2).請回答以下問題：
1. 製作主題：福田繁雄
2.欲呈現之配色風格： 溫暖色調來做背景配色
3.老師上課很認真 可是有時候聽得不是很懂 還是謝謝老師

3.回覆本篇文章

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


(2).請回答以下問題：
1.製作主題 歌詞
2.欲呈現之配色風格：輕鬆的藍
3..有無遇到的問題? 跟不上
4.製作感想 感謝有同學的相助，能讓我平安地交出作業。愛同學。

1025445200 連怡婷

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

(2).請回答以下問題：
1.製作主題 韓劇 雲畫的月光 르미 그린 달빛
2.欲呈現之配色風格： 深藍紫色系
3..有無遇到的問題? 無
4.製作感想 越做越上手了!!

作業網址：http://mepopedia.com/~web105-2c/hw02/hw02-1045445177

1.製作主題:愛麗絲夢遊仙境
2.呈現風格：我所使用的顏色都是愛麗絲夢遊仙境所看的見的配色

3.有無遇到的問題：交作業實在是太複雜了到現在還是不清楚 要交兩個地方真的是沒辦法.... 而且其實我幾乎很快就都做完作業但是我都不知道邀交哪去就變成延遲...

4.製作感想：現在都看得懂了~~~~~

5.老師我沒有遲交阿~~~~我交到講義2去了所以在這裡再交一次

作業網址:C:\Users\user\AppData\Local\Temp\fz3temp-2\index.html
越來越難了 做了好久阿

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

1.製作主題 ：荒木飛呂彥

2.欲呈現之配色風格：想呈現比較簡單的暗色系風格。

3.有無遇到的問題：熟悉操作花了許多時間，棘手的問題都可以透過老師的教學影片解決。

4.製作感想：透過第一次的作業比上次更為熟悉，操作上也順利許多，但還是有許多問題存在， 漸漸的理解網
頁的功能，再透過同學熱心的幫助，使我更了解網頁的操作，做的也更為開心。