Welcome! 登入 註冊
專區首頁 專區百科 專區論壇 專區部落格 專區地圖

Advanced

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

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

製作說明



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

2.每個同學記得在[color=#990033]title的部分打上"視傳二B-學號-以色塊建構的網頁單欄排版"[/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/~css106-2b/hw02/hw02-105xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-105xxxxxxx

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

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055448122

(2).請回答以下問題
1.製作主題 : 文鳥飼養計畫
2.欲呈現之配色風格: 文鳥的顏色!
3..有無遇到的問題? 有朋友幫忙~問題都順利解決了~
4.製作感想 可以幫文鳥設計網頁很開心~

http://mepopedia.com/~css106-2b/hw02/hw02-1055445086

http://mepopedia.com/~css106-2b/hw02/hw02-1055445086-2

1.製作主題 :特搜台北「超人氣法式甜點店」Top4 
2.欲呈現之配色風格:(1.)以檸檬塔色「甜而不膩」為發想,以及舒適的天空藍為主色系,呈現出對甜品所抗拒不了的迷人香氣。
(2.)將香檸柑橘塔的黃綠和紅橙色為主色系,表現出一種甜蜜沁入心坎裡的感覺。
3..有無遇到的問題? 針對文章進行搭調的配色需要更多的想像,其他部分老師都講解得很仔細,目前很順利~
4.製作感想 :我覺得這個課程很有趣,希望自己能夠更精進!

http://mepopedia.com/~css106-2b/hw02/hw02-1055445110

1.製作主題:訪問咖啡大師。
2.欲呈現之配色風格:咖啡色為主色系,風格比較穩重。
3.遇到的問題大概是還是不熟悉,會再努力。
4.看得有點眼睛花花。



Edited 1 time(s). Last edit at 10/26/2017 07:04PM by 1055445110.
(編輯記錄)

http://mepopedia.com/~css106-2b/hw02/hw02-1055445104


1.製作主題:VESPA偉士牌新世代車款
2.欲呈現之配色風格:清新的淡色系目的追求年輕族群
3.遇到的問題:div沒上到 還請同學幫忙~~

作業網址:http://mepopedia.com/~css106-2b/hw02/hw02-1055445056/1055445056.html

1. 製作主題:人生最浪費時間的三件事
2. 欲呈現之配色風格: 藍白黃(輕快風格)
3. 有無遇到的問題 ? 目前都還滿順利的 !!
4. 製作感想:覺得其實網頁滿好玩的thumbs upthumbs upthumbs up



Edited 2 time(s). Last edit at 10/29/2017 03:36PM by 1055445056.
(編輯記錄)

1.製作主題:浮世繪製作方法
2.欲呈現之配色風格:沉穩、古老的感覺
3..有無遇到的問題?無
4.製作感想:完成後很有成就感,覺得網頁設計很有趣
作業網址:http://mepopedia.com/~css106-2b/hw02/hw02-1055445017/

(1).作業網址 : http://mepopedia.com/~css106-2b/hw02/hw02-1055445182

(2).
1.製作主題 : 星座 - 金牛座
2.欲呈現之配色風格:沉穩冷靜與平和(符合金牛座的個性)
3..有無遇到的問題? 不小心把一個英文字母打錯,想說怎麼都改不了 ...
4.製作感想 : 網頁設計很實用,也很有趣。

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445095

(2).
1.製作主題: 快轉行!諾貝爾得主預測 這6種工作將消失
2.欲呈現之配色風格: 溫暖的橘色調。
3..有無遇到的問題? 目前尚無。
4.製作感想: 在製作的過程中,我得到不少成就感,感恩老師!

作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445211


製作主題: 貓咪毛色與性格

欲呈現之配色風格:暖色系

有無遇到的問題? :對配色很有障礙

製作感想:很新奇有趣,很期待學習更深入的網頁設計

作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445185

1.製作主題 :跟插畫家學跳舞。
2.欲呈現之配色風格:舞蹈色彩的感覺。
3.有無遇到的問題? 沒有。
4.製作感想 :還可以。



Edited 1 time(s). Last edit at 10/30/2017 02:13PM by 1055445185.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445197

(2).請回答以下問題:
1.製作主題 :中東地區的戰爭新聞
2.欲呈現之配色風格: 灰暗、沉重
3..有無遇到的問題? 無
4.製作感想:目前用cc,還需要適應

http://mepopedia.com/~css106-2b/hw02/hw02-1055445191

1.製作主題:鬼門圖文
2.欲呈現之配色風格:綠、藍、灰

http://mepopedia.com/~css106-2b/hw02/hw02-1055445134

1.製作主題:這輩子,只能這樣嗎?
2.欲呈現之配色風格: 藍色系
3..有無遇到的問題? :暫無
4.製作感想 :越做越上手

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445152

(2).請回答以下問題:
1.製作主題 BUNNY MAN
2.欲呈現之配色風格:深色弔詭
3..有無遇到的問題?
4.製作感想
還蠻酷的

http://mepopedia.com/~css106-2b/hw02/hw02-1055445044
比較聽得懂

http://mepopedia.com/~css106-2b/hw02/hw02-1055445002

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445068

(2).請回答以下問題:
1.製作主題 :魔物獵人 MHW
2.欲呈現之配色風格:暗沈 神秘
3..有無遇到的問題? 新的網站好難做
4.製作感想 :讚讚0w 0b很好玩



Edited 2 time(s). Last edit at 11/01/2017 10:23PM by 1055445068.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445026

(2).請回答以下問題:
1.製作主題 :盜墓筆記心得推坑~
2.欲呈現之配色風格:盜墓風格 詭譎神秘的氣息
3.有無遇到的問題? ㄣ 因爲一開始位子包錯 後面改的超久OAO
4.製作感想 阿 改好久喔

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445071
(2).請回答以下問題:
1.製作主題:絕景日本
2.欲呈現之配色風格:紅 藍搭配
3..有無遇到的問題? 目前都還滿順利的
4.製作感想 挺有趣的



Edited 1 time(s). Last edit at 11/03/2017 11:43PM by Chen pinrong.
(編輯記錄)

http://mepopedia.com/~css106-2b/hw02/hw02-1055445146


(2).請回答以下問題:
1.製作主題 :本田重機CB1100 EX
2.欲呈現之配色風格:成熟穩重帶點熱血奔放
3..有無遇到的問題:我電腦爛
4.製作感想 :我覺得不錯

http://mepopedia.com/~css106-2b/hw02/hw02-1055445176/1055445176.html

1.製作主題 : 健康的人每天都會做的8件事
2.欲呈現之配色風格: 中藥養身的感覺,較純樸。
3..有無遇到的問題? 有朋友幫忙~問題都順利解決了~
4.製作感想 可以配顏色很開心~

http://mepopedia.com/~css106-2b/hw02/hw02-1055445008

1.製作主題 : 保羅·克利
2.欲呈現之配色風格: 保羅·克利的顏色
3..有無遇到的問題? 順利
4.製作感想 很棒馬

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445137


1.製作主題:小奶貓
2.欲呈現之配色風格: 活潑可愛
3..無
4.學到不一樣的東西很棒



Edited 1 time(s). Last edit at 11/02/2017 11:15AM by 1055445137.
(編輯記錄)

http://mepopedia.com/~css106-2b/hw02/hw02-1055445059

1.製作主題:咖啡
2.欲呈現之配色風格:咖啡的色彩
3..有無遇到的問題? 有朋友教,問題已解決
4.製作感想 :比一開始懂了點

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445119

(2).請回答以下問題:
1.世界最受歡迎的10大甜點
2.欲呈現之配色風格:繽紛甜美
3..一直會搞混程式碼
4.配色仍然是很大的問題,但是看成是馬看到眼花撩亂也很頭痛

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445143

(2).
1.製作主題:B.P.R旗下樂團發片快報
2.欲呈現之配色風格: 以B.P.R的logo配色為主
3..有無遇到的問題? 有 但是解決了
4.製作感想:DIV有點難以分辨

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445032

(2).請回答以下問題:
1.製作主題 :人魚傳說
2.欲呈現之配色風格: 海洋風藍色太老套,所以用薄荷綠
3..有無遇到的問題? :沒有
4.製作感想 :覺得很好玩

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445014


1.製作主題 : 個人頻道
2.欲呈現之配色風格: 紅色 白色
3..有無遇到的問題? 很#$%#$^
4.製作感想 挺棒DER

http://mepopedia.com/~css106-2b/hw02/hw02-1055445092
1.勵志文章
2.小清新
3.有點難 但有慢慢會了
4.我會努力的

1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445089
(2).1.製作主題 : 拉麵
2.欲呈現之配色風格:拉麵碗公和雷紋的裝飾
3.都是看老師網頁就能解決的問題
4.製作感想 普通 覺得要學更多才能架設理想中的網頁

http://mepopedia.com/~css106-2b/hw02/hw02-1045445101

1.製作主題:吃宵夜不會胖
2.欲呈現之配色風格:樸實.俐落的感覺
3..有無遇到的問題? 有 不太會搭顏色
4.製作感想:很努力看影片完成了 擔心作業3會gg



Edited 1 time(s). Last edit at 11/16/2017 07:57PM by 蘇雁祺.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~css106-2b/hw02/hw02-1055445083

(2).請回答以下問題:
1.製作主題 -懶人植物-多肉
2.欲呈現之配色風格:茁壯 鮮活
3..有無遇到的問題? :
4.製作感想 :感覺還是不太行 懵懵懂懂的....

http://mepopedia.com/~css106-2b/hw02/hw02-1055445038
我製作的主題是籃球,呈現的風格就是藍白,黑白灰,做了第二個慢慢有熟悉一些了,其實作業在上禮拜就做完了,但軟體剛好到期,怎麼打都打不開,我覺得和第一個作業其實差不多,然後老師的影片和講義真的很有用,ps.我還是需要影片,我的電腦作業幾乎都看影片做的哈哈哈哈哈😅希望我能快點跟上進度,落掉的進度實在是多到連我都害怕
幫同學帶傳

作業網址:http://mepopedia.com/~css106-2b/hw02/hw02-1055445201

1.製作主題:醜比頭
2.欲呈現之配色風格:醜比頭配色
3.有無遇到的問題:無
4.製作感想:做完有成就感,醜比頭配色很可愛

http://mepopedia.com/~css106-2b/hw02/hw02-1055445140