[作業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內，自行打入不同的內容文字，自行隨意設定

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

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

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

1. 繳交作業方式

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

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

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

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-103xxxxxxx


(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/

===========================================
[color=#CC0066]請務必在下次上課前回覆，否則為遲交，扣十分[/color]
===========================================

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


(2).請回答以下問題：
1.製作主題：初體驗。
2.欲呈現之配色風格：孩童的時光配色
3..有無遇到的問題? 基本上很清楚明瞭。
4.製作感想
剛開始製作不知道這是在做甚麼，但熟悉框架的組成要素後不僅容易找到修改地方，也能夠運用自如。

學號：1035445115



(編輯記錄)

1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445166/


(2).請回答以下問題：
1.製作主題：必勝客。
2.欲呈現之配色風格：基本的紅白配色
3..有無遇到的問題? 其實一開始問題有點多 後來因同學教導 沒問題了
4.製作感想
一開始覺得很難 後來知道有個規律後就比較簡單了 把東西丟到應該的位置就可以了

學號：1035445166

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


(2).請回答以下問題：
1.主題；跟著課堂練習
2.欲呈現之配色風格：橘白現代風
3..有無遇到的問題? 因為跟著課堂做的沒有什麼問題
4.製作感想
覺得很神奇

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


(2).請回答以下問題：
1.英國歌手BIRDY
2.欲呈現之配色風格：因為BIRDY的歌聲是屬於滄桑的感覺所以我用灰白作為配色
3..有無遇到的問題?
file:///C:/Users/A/Desktop/1444716483821.jpg
4.製作感想
有些地方需要想一下

(1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445142/
1.製作主題： 麥可·喬丹
2.欲呈現之配色風格： 黃黑對比.強烈視覺
3..有無遇到的問題? 有些語法名詞英文看不是很懂
4.製作感想
有些地方還是不太會...須加強.....



(編輯記錄)

1.作業網址: http://mepopedia.com/~web104-2a/hw02/hw02-1-1035445094/
2.製作主題:bibi之家-關懷流浪犬
3.欲呈現之配色風格： 底色為黃色,就像向日葵能溫暖我們一樣,
希望bibi流浪之家的官網能讓更多的貓咪.狗狗,
也能有屬於他們溫暖的家
4..有無遇到的問題:有時候語法會搞不清楚,尺寸會記錯
5.製作時間: 12hr
6.製作感想: 有點困難,每次都花好多時間在製作網頁

1035445094 陳欣函



(編輯記錄)

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


(2).請回答以下問題：
1.製作主題：歌手介紹Skylar Grey
2.欲呈現之配色風格：憂傷配色
3..有無遇到的問題? 基本上很清楚明瞭。
4.製作感想
剛初步製作時，會不太了解，但經過一段時間就可以比較上手的製作了。

(1)作業網址:http://mepopedia.com/~web104-2a/1035445181

(2)請回答以下問題：
1.製作主題：團體介紹KAT-TUN
2.欲呈現之配色風格：搖滾 黑色系
3..有無遇到的問題? 語法方面有些不了解的地方
4.製作感想:分成好多個部分，做了好幾次才成功。

1.作業網址: http://mepopedia.com/~web104-2a/hw02/hw02-1035445037
3.欲呈現之配色風格：使用亮色系,想呈現活潑的感覺!
4..有無遇到的問題:有失敗一次,第二次做才成功!
5.製作時間: 4hr
6.製作感想: 覺得很有趣
1035445037



(編輯記錄)

(1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445076/
(2).請回答以下問題：
1.製作主題：史奴比
2.欲呈現之配色風格：灰白紅 按照史奴比感覺去配色
3..有無遇到的問題? 換頁的部分不是很熟悉
4.製作感想
知道裡面的訣竅之後就慢慢可以自由創作~
學號：1035445076 曾艾茹



(編輯記錄)

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


(2).請回答以下問題：
1.製作主題：充滿死亡的氣息
2.欲呈現之配色風格：哀傷
3..有無遇到的問題? 基本上很清晰明白，跟著老師的步驟一步一步的製作。
4.製作感想
剛開始要開起很多檔案覺得複雜，上手之後覺得很簡易。

1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445025


(2).請回答以下問題：
1.製作主題：菲利普·斯塔克
2.欲呈現之配色風格：簡約
3..有無遇到的問題?
4.製作感想
有些東西都是重複的蠻容易上手

學號：1035445025

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


(2).請回答以下問題：
1.製作主題 ：
文藝復興大師提香Titian
2.欲呈現之配色風格：
堤香的畫作大多主要以橄欖綠等低彩度配色，背景中帶點橘紅色，因此想配合堤香的畫作，做出秋天配色和低調的感覺。
3..有無遇到的問題?
找自己打錯的語法找很久......
4.製作感想 ：
以前沒學過網頁設計，之前還以為只是一職無聊的打語法，但現在還覺得挺有趣的，希望課堂上能學到更多。

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


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

1.製作主題

泰勒斯

2.欲呈現之配色風格

為高貴的優雅紫 搭配柔軟的粉色 呈現泰勒斯給人小清新和高雅的感覺。


3..有無遇到的問題?

會忘記要怎麼連結css 把自己困擾死。

4.製作感想

做完會很有成就感~~

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


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

1.製作主題：弦外之音吉他社
2.欲呈現之配色風格： 低調的灰然後加一點淺黃才不會讓整個畫面太暗
3..有無遇到的問題? ：一開始存檔案忘記選擇css
4.製作感想 ：終於做完看到成品覺得有成就感

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


(2).請回答以下問題：
1.製作主題：格林童話
2.欲呈現之配色風格：神秘的氣氛
3..有無遇到的問題? 目前沒有
4.製作感想 ：
因為老師上課有教在wapper裡的加外框的設計，可是我試了很多種都不太喜歡，所以就沒加入了，應該可以吧？

學號：1035445154

><



(編輯記錄)

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


(2).請回答以下問題：
1.製作主題：
第一次做很新奇
2.欲呈現之配色風格：
情歌夢幻的感覺
3..有無遇到的問題?
大概能理解
4.製作感想
剛開始製作不知道這是在做甚麼...後來看教材就懂ㄌ

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


(2).請回答以下問題：
1.製作主題 ：貓的報恩
2.欲呈現之配色風格： 配色採用貓的報恩有一幕主角從高塔掉下來，藍色背景代表天空，橘色代表貓咪
3..有無遇到的問題? 沒有太大的問題
4.製作感想
比上次做得好看有點小開心，希望以後更好看~


學號：1035445214

(1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445157/
1.製作主題： 五月天
2.欲呈現之配色風格： 因為五月天的演唱會都是使用藍色螢光棒，所以用藍色表現。
3..有無遇到的問題? 有些英文看不太懂
4.製作感想：有些地方還是有點困難哈哈

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


(2).請回答以下問題：
1.製作主題：
蘋果之神 賈伯斯
2.欲呈現之配色風格：
黑 橘黃 紅 強烈時尚的視覺效果
3..有無遇到的問題?
有些地方還是很生疏 需要多次一點的操作
4.製作感想
一開始真的是一個頭兩個大 都搞不太清楚該怎麼做 可是經過來回的操作 終於有點知道在幹嘛了 總之 看到一堆英文就想睡了

學號：1035445001

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

(2).請回答以下問題：
1.製作主題：google
2.欲呈現之配色風格：google科技感
3..有無遇到的問題? 沒有
4.製作感想 ：
對於語法有比較熟悉操作上也更熟了

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


(2).請回答以下問題：
1.製作主題：黃麗玲 A-lin
2.欲呈現之配色風格：暗色調，較有神祕感。
3..有無遇到的問題? 無。
4.製作感想 :一開始，有些混亂，但後面就上手了。


1035445178



(編輯記錄)

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


(2).請回答以下問題：
1.製作主題：蘇打綠
2.欲呈現之配色風格：黑暗色系優雅的風格。
3.有無遇到的問題? 缺乏對語法的熟悉度。
4.製作感想
每次製作網頁，需要好好研究語法，才能越來越熟悉。

學號：1035445088

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


(2).請回答以下問題：
1.製作主題 ：全球暖化
2.欲呈現之配色風格： 採用暖色調
3..有無遇到的問題? 基本上沒有問題
4.製作感想
網頁架構做得越來越完整了

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


(2).請回答以下問題：
1.製作主題：地球
2.欲呈現之配色風格：地球顏色
3..有無遇到的問題? 顏色方面，怎麼配都覺得很奇怪。
4.製作感想
顏色好難配，還有語法方面我需要再加強。

學號：1035445211

(1).作業網址::http://mepopedia.com/~web104-2a/hw02/hw02-1035445172
(2).請回答以下問題：
1.製作主題：怪獸大學
2.欲呈現之配色風格：毛怪配色
3..有無遇到的問題? 沒有
4.製作感想:有點複雜,但經過練習了解後,還算可以。



(編輯記錄)

1).作業網址::http://mepopedia.com/~web104-2a/hw02/hw02-1035445145
(2).請回答以下問題：
1.製作主題：Kitty貓主題餐廳
2.欲呈現之配色風格：粉紅系配色
3..有無遇到的問題? 無
4.製作感想:一開始還是覺得很複雜又困難,也覺得架設網站很困難,但是經過這幾次的練習,
對架設網站更了解,也覺得越來越簡單跟上手。



(編輯記錄)

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


(2).請回答以下問題：
1.製作主題:聶永貞設計師介紹
2.欲呈現之配色風格：配色屬於較清寒冷酷的顏色
3..有無遇到的問題? :對於CSS的語法使用還是有點陌生
4.製作感想 :慢慢開始對網頁設計有些興趣\

1035445163傅泰誠



(編輯記錄)

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

(2).請回答以下問題：
1.製作主題 : 認識古典音樂
2.欲呈現之配色風格:運用咖啡色與鵝黃色來呈現古典高雅之氣息
3..有無遇到的問題? 過程仍有點生疏
4.製作感想 :一步步的做與檢查才不易出錯,心急會使自己耐不住性子。慢慢的會發現其實步驟都一樣~

學號:1035445169



(編輯記錄)

http://mepopedia.com/~web104-2a/hw02/hw02-1035445034/
(1).作業網址:http://life.tw/?app=view&no=12681


(2).請回答以下問題：
1. 雙魚座終極完美分析
2.欲呈現之配色風格：因為雙魚座是水象的 所以藍色調
3..有無遇到的問題?
沒有
4.製作感想
配色很難

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


(2).請回答以下問題：
1.音樂製作人
2.葡萄
3..無
4.好玩

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


(2).請回答以下問題：
1.製作主題： 植田正治
2.欲呈現之配色風格：以黃橘作配色,繽紛亮麗的感覺
3..有無遇到的問題? 常會把文字放置處忘記放哪
4.製作感想
有很多程式碼看到我眼花,一直放錯

學號：1035445010

1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445208


(2).請回答以下問題：
1.製作主題： 巧克力
2.欲呈現之配色風格：咖啡色粉粉的感覺
3..有無遇到的問題? 沒有吧
4.製作感想
我喜歡吃巧克力

1035445208

(1).作業網址: http://mepopedia.com/~web104-2a/hw02/hw02-1035445130/
(2).請回答以下問題：
1.製作主題：
你是什麼人,便會吸引到什麼人
2.欲呈現之配色風格:
桃粉色系搭配黑色;表現華麗又具有個性之風格
3..有無遇到的問題?
很清楚
4.製作感想
經過一次一次不斷重複使用語法,觀念更加清楚

學號：1035445130

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

(2).請回答以下問題：
1.製作主題 小熊維尼
2.欲呈現之配色風格： 暖色系
3..有無遇到的問題? 有些地方還是要了解多次
4.製作感想 ： 一開始有點混亂 要多做幾次的操作才知道在做什麼

學號：1035445199

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


(2).請回答以下問題：
1.製作主題：致 第三者
2.欲呈現之配色風格：溫暖色系
3..有無遇到的問題? 語法分辨較難了解 需要時間
4.製作感想
能製作一個屬於自己的網頁，這門課的學習很實用。

學號：1035445067

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


(2).請回答以下問題：
1.製作主題：糖果
2.欲呈現之配色風格：溫暖色系
3..有無遇到的問題? 需要時間看步驟
4.製作感想
能到學到實用技能

學號：1035445187

作業網址:
http://mepopedia.com/~web104-2a/hw02/hw02-1035445121/

1.製作主題：
網站
2.欲呈現之配色風格：
背景-白 上下框-粉 ,簡單的風格
3.有無遇到的問題?
無問題
4.製作感想
非常有趣

學號：1035445121

1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445196/


(2).請回答以下問題：
1.製作主題：少女時代。
2.欲呈現之配色風格：基本的粉紅配色
3..有無遇到的問題? 問題有點多 然後又因為忙活動的事 所以有些都沒有學到 還在摸索當中
4.製作感想
一開始覺得很難 也正在摸索當中 希望完成之後能夠有些上手

學號：1035445196

1.作業網址 : http://mepopedia.com/~web104-2a/hw02/hw02-1035445070

2.有無遇到的問題，製作心得，風格設定與製作作業的時間
這次是單純以改變色塊的顏色為主，然後還要改變裡面的內容，覺得目前都還在可消化的範圍內...

1035445070 視傳2A 戰安榮

1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445079/


(2).請回答以下問題：
1.製作主題：閃爍的二次愛戀。
2.欲呈現之配色風格：基本的粉紅配色
3..有無遇到的問題? 問題有點多 然後又因為忙活動的事 所以有些都沒有學到 還在摸索當中 ,老師上課都跟不上進度
4.製作感想
希望老師數度在慢一點， 一開始覺得很難 也正在摸索當中 希望完成之後能夠有些上手

學號：1035445079

1).作業網址:http://mepopedia.com/~web104-2a/hw02/hw02-1035445124/

(2).請回答以下問題：
1.製作主題： m.studios。
2.欲呈現之配色風格：基本的粉紅配色
3..有無遇到的問題? 問題有點多 進度跟不上
4.製作感想
希望老師數度在慢一點

學號：1035445124 謝采軒



(編輯記錄)

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


(2).請回答以下問題：
1.製作主題：史努比
2.欲呈現之配色風格：充滿夢幻的黃色
3..有無遇到的問題? 基本上很清楚明瞭。
4.製作感想
有比較熟悉了，做完以後覺得挺有趣的！

學號：1035445031

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

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


視傳二A 10354445103

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

(2).請回答以下問題：
1.製作主題 :螢火蟲之墓
2.欲呈現之配色風格： 和平的綠、希望的黃，在戰爭中最渴望的就是這兩個要素，讓觀者看到後不會過於沉悶，而是反思
3..有無遇到的問題? 製作上還行
4.製作感想 要多次檢查有無錯誤

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

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

1.主題是:乙一的其中一本小說ZOO。
2.配色是以黑色和紅色、黃白搭配。
3.感覺有點小問題，但和同學一起討論後就沒問題了。
4.感覺還蠻有成就感的，因為稍微有些網頁的樣子了。

學號:1035445055



(編輯記錄)

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


(2).請回答以下問題：
1.製作主題：川島小鳥
2.欲呈現之配色風格：藝術感
3..有無遇到的問題? 剛學覺得累。
4.製作感想
無

學號：1035445049