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/~web105-2b/hw02/hw02-104xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址

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

http://mepopedia.com/~web105-2b/hw02/hw02-1045445095/
製作主題
美國小天后 selena gomez

欲呈現之配色風格
神秘 魅力 帶點俏皮

遇到的問題
有些細節一不注意弄錯就跑不出來,要對講義幾次才會發現錯誤。
製作感想
雖然學的東西越來越難,但每一次都有越了解架構了。



Edited 2 time(s). Last edit at 10/27/2016 10:34AM by 1045445095.
(編輯記錄)

http://mepopedia.com/~web105-2b/hw02/hw02-1045445152

[color=#660099]1.製作主題 : 台灣音樂天后蔡依林
2.欲呈現之配色風格:女性, 柔和清新
3..有無遇到的問題?-wrapper那有點問題
4.製作感想 : 覺得有點偏難了一點,一點點跟不上了 但還是很好玩[/color]



Edited 1 time(s). Last edit at 11/10/2016 02:10AM by 1045445152.
(編輯記錄)

http://mepopedia.com/~web105-2b/hw02/hw02-1045445195

1.製作主題 ;心靈雞湯
2.欲呈現之配色風格: 勵志
3..有無遇到的問題? 有時候不能很好的跟上老師的節奏,希望老師講的慢一點
4.製作感想

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

(2)1.製作主題:蘇打綠
2.欲呈現之配色風格:小清新
3..有無遇到的問題? 有點難配色
4.製作感想:好玩



Edited 1 time(s). Last edit at 10/22/2016 09:49PM by 1035443110.
(編輯記錄)

作業網址:http://mepopedia.com/~web105-2b/hw02/hw02-1045445161
1.製作主題:用對十個方法來減肥

2.欲呈現之配色風格
簡潔有力,色調偏對比色呈現,因為看減肥的文章的人,可能是抱著
有壓力的心態來觀看的,所以,利用對比色,讓畫面呈現歡樂飽滿,
相對下也較不具壓力,反而有充滿精神並且同時擁有勵志的效果。

3..有無遇到的問題
有,一些語法因為是英文所以沒有辦法馬上知道那個按鍵是代表什麼
意思,要點進去右欄css樣式才能了解,希望以後我可以直接看英
文就知道意思,直接在語法那裡修改。

4.製作感想
結構上比第一次更熟悉,慢慢的有進入狀況,會突然發現覺得這門課
也是挺有趣的,除了訓練對語法的熟悉度外,還可以培養自己對色彩
的敏感度,收穫良多。



Edited 1 time(s). Last edit at 10/24/2016 02:16PM by 1045445161.
(編輯記錄)

作業網址:http://mepopedia.com/~web105-2b/hw02/hw02-1045445017

1. 製作主題:THE GLENLIVET.格蘭利威

2.欲呈現之配色風格:因為是賣酒的品牌,所以我想表現出高級的視覺印象,而選擇用
暗紅和深藍來配色,內文也是紅色的深淺變化,達到整體色彩的一致性,背景的深藍較
有男士和威嚴的感覺,也能襯托出內文的明亮,而標題則是灰色,來增加質感。

3.有無遇到問題? 目前還沒有。

4.製作感想:每一次上課都學到很多,覺得對自己很有幫助,發現色彩的配色和字體行
距等是很重要的,都需要一併考量,也發現自己原來還有許多不足,還需努力。我很喜
歡上網頁設計,希望自己可以越來越進步。

http://mepopedia.com/~web105-2b/hw02/hw02-1045445092
製作主題:陳嘉樺 Ella Chen
欲呈現之配色風格:以Ella專輯的風格下去做配色,希望能呈現出味道來
底用黑色,帶點桃粉,既不會太剛也不會太柔
能呈現Ella原有的性格.

製作感想: 每一次上課都學到很多,希望能學到更多
有無問題? 目前還沒有問題,只要妥善練習就會更熟練.
製作時間: 1~2小時

(1) http://mepopedia.com/~web105-2b/hw02/hw02-1045445074

1.製作主題: 怪奇孤兒院
2.欲呈現之配色風格: 利用黑色背景襯托文字上的顏色,
呈現出隱約般的神秘
3..有無遇到的問題? 目前還沒有
4.製作感想: 覺得很有成就感,能做出一個自己設計的網頁
雖然架構上變得比較廣 但也熟練很多
5.製作時間:1~2小時



Edited 1 time(s). Last edit at 10/26/2016 09:35PM by 1045445074.
(編輯記錄)

這個作業的網址則為:http://mepopedia.com/~web105-2b/hw02/hw02-1045445188

1.製作主題:十二星座性格分析

2.欲呈現之配色風格:因為十二星座為多種不同性格的星座組合,所以配色以稍微多元的方式表現。

3..有無遇到的問題? 目前還沒有都滿順利的,除了設定css的英文看不懂比較困擾我以外...

4.製作感想 :越做越快喔,因為理論懂的話做起來順手很多,也可以練習畫面的配色能力很棒



Edited 1 time(s). Last edit at 10/26/2016 11:32PM by 1045445188.
(編輯記錄)

(1).這個作業的網址則為:http://mepopedia.com/~web105-2b/hw02/hw02-1045445146

(2).請回答以下問題

1.製作主題:智慧小品-九則發人省思的小故事

2.欲呈現之配色風格:溫暖

3.有無遇到的問題:會忘記每個區塊要設定的CSS語法,一直反覆的看講義

4.製作感想:現在逐漸加深難度了,但是我還撐得住!

http://mepopedia.com/~web105-2b/hw02/hw02-1045445044

1.製作主題 ;CNBlue
2.欲呈現之配色風格: 韓星
3..有無遇到的問題? 希望可以慢一點
4.製作感想

http://mepopedia.com/~web105-2b/hw01/hw02-1045445095/



Edited 1 time(s). Last edit at 10/27/2016 10:52AM by 1045445095.
(編輯記錄)

http://mepopedia.com/~web105-2b/hw02/hw02-1045445182/
製作主題
賈伯斯
利用粉藍粉藍系列呈現

喜歡每堂課所學到的東西
完成之後很有成就感

這個作業的網址則為:http://mepopedia.com/~web105-2b/hw02/hw02-1045445008

1.製作主題 :冰雪奇緣


2.欲呈現之配色風格:冷冷的冬天感覺~~~
但美麗的愛莎很美,還有可愛的雪寶~~~(很融化~~~)
可是還不會放圖片所以只能自己幻想哈哈

3.目前還沒遇到問題~~~
只是要練習一兩次就會比較上手了!!


4.製作感想 :
好喜歡這堂課,
因為做完超有成就感的!!
然後眼睛很花因為很多字很多小小的英文
每次做到一半眼睛都酸到爆了
可是一做完就很開心~~~~
覺得可以好好的睡覺了哈哈

http://mepopedia.com/~web105-2b/hw02/hw02-1045445149/
製作主題
誰偷走我的乳酪


黑白配讚

遇到的問題
上傳作業跟回復作業比較難。
製作感想
要加油。

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

(2).請回答以下問題:
1.製作主題
流浪神差(野良神)
2.欲呈現之配色風格:
簡潔清爽,因為不想看起來很複雜
3..有無遇到的問題?
做東西很慢哈哈,可是有問題就會問朋友CSS會用得比較慢
4.製作感想
覺得還不錯,做成了之後很開心

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

(2).請回答以下問題:
1.製作主題:初音未來
2.欲呈現之配色風格: 角色風格(湖綠色+科技感)
3..有無遇到的問題? 果然還是配色Orz打語法真的要很細心TAT
4.製作感想 :\\我做完了YA~~~//
有種成就感

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

(2).請回答以下問題:
1.製作主題 : 月歌。
2.欲呈現之配色風格: 偶像光環
3..有無遇到的問題? :我自己眼殘沒看到英文打錯字(汗)
4.製作感想
有趣哈~~~~

作業的網址:http://mepopedia.com/~web105-2b/hw02/hw02-1045445071

1.製作主題 :兄弟本色
2.欲呈現之配色風格:暗黑色調
3..有無遇到的問題? 老師講的有點快
4.製作感想 覺得有點複雜



Edited 1 time(s). Last edit at 10/27/2016 02:54PM by 徐夢蔆1045445071.
(編輯記錄)

作業的網址:http://mepopedia.com/~web105-2b/hw02/hw02-1045445089

1.製作主題 :未來10種人才超夯

2.欲呈現之配色風格:看見希望

3..有無遇到的問題?:有時候會搞混

4.製作感想:如果一個打錯就要從頭找錯誤在哪eye popping smileyeye popping smileyeye popping smiley

http://mepopedia.com/~web105-2b/hw02/hw02-1045445014

1.製作主題

皮特·蒙德里安


2.欲呈現之配色風格:

蒙德里安的特色主要是藍、黑、黃、白、紅為畫面色彩,所以我的配色也與蒙德里安風格類似,
用深藍色作為外框,內文背景與外框背景顏色用一深一淺的黃去做搭配,而內文字則是以桃紅的
黑體字去襯托整體。

3..有無遇到的問題

目前還沒有

4.製作感想

經過上次作業一的練習,這次有比較了解網頁語法的一些結構,
但因為語法都是英文,還是會有點搞混哪個是修改哪裡的。

(1).作業網址 :sftp://web105-2b@mepopedia.com/home/web105-2b/public_html/hw02/hw02-1045445035/index.html
(2).請回答以下問題:
1.製作主題 :夏洛克.福爾摩斯

2.欲呈現之配色風格: 內斂,沉重,神秘

3.有無遇到的問題? 目前為止沒有

4.製作感想

其實英文不太好,有時候會不知道那是甚麼作用,所以我會直接用老師的版型改,一種一種去試。



Edited 2 time(s). Last edit at 10/28/2016 02:28PM by 1045445035.
(編輯記錄)

http://mepopedia.com/~web105-2b/hw02/hw02-1045445080/
1.製作主題 :從嘴巴看免疫力!7個口腔徵兆反映身體狀況從嘴巴看免疫力!7個口腔徵兆反映身體狀況

2.欲呈現之配色風格: 背景是用舒服的感覺,而內文字使用紅色是想給大家一些警惕喜望大家能多多注意自己的身體狀況

3..有無遇到的問題? 有,就是字無法置中但後來解決,解決後才發現自己不夠細心少打一個字

4.製作感想
現在網頁越學越多了雖然還不能做得很完美但也學到了不少,也發現網頁很需要細心度出一個錯可能就無法呈現自己想要的樣子了,我也越來越期待之後的網頁設計,希望之後可以做一個屬於自己的網站。

http://mepopedia.com/~web105-2b/hw02/hw02-1045445062

1.製作主題 : 日本神道教
2.欲呈現之配色風格:神秘
3..有無遇到的問題?配色依舊眼盲
4.製作感想 :要一個一個慢慢摸索,有比一開始什麼都不懂來得更進步了~hot smiley

(1).作業網址 :http://mepopedia.com/~web105-2b/hw02/hw02-1045445195
(2).請回答以下問題:
1.製作主題 心靈雞湯
2.欲呈現之配色風格: 紫色比較能給人溫暖的感覺
3..有無遇到的問題? 希望老師講的慢一點,有時候不太跟得上
4.製作感想



Edited 1 time(s). Last edit at 11/02/2016 10:20PM by 1045445195.
(編輯記錄)

http://mepopedia.com/~web105-2b/hw02/hw02-1045445170

1.製作主題 : 可愛夢幻
2.欲呈現之配色風格:女性
3..有無遇到的問題?有,我還在糾結我的第一個網頁作業網址怪怪的,css寫了我的新檔嗎?等等重作。
4.製作感想 : 因為第一個,讓我做這作業心情繁雜,不過做出來真的好有成就感啊!

(1).作業網址 [url=http://mepopedia.com/~web105-2b/hw02/hw02-1025445024]http://mepopedia.com/~web105-2b/hw02/hw02-1025445024[/url]

(2).請回答以下問題:
1.製作主題 -神經病
2.欲呈現之配色風格: 黑配紅呈現 暴躁 不安分感
3..有無遇到的問題? : 無
4.製作感想 對於網頁設計感到相當有趣,幾個程式碼能使網頁如此豐富!

(1).作業網址
[url=http://mepopedia.com/~web105-2b/hw02/hw02-1045445155]http://mepopedia.com/~web105-2b/hw02/hw02-1045445155[/url]
(2).請回答以下問題:
1.製作主題 美術工藝與新藝術比較
2.欲呈現之配色風格: 就是可愛<3
3..有無遇到的問題? 一開始不太會做後來問同學smiling smiley
4.製作感想 網頁設計好棒

http://mepopedia.com/~web105-2b/hw02/hw02-1045445110
1.製作主題:撲通撲通我的人生
2.欲呈現之配色風格:配色屬於柔和,多為暖色
3..有無遇到的問題?感覺比第一個作業來的簡單
4.製作感想:製作過程很開心,也很有成就感

http://mepopedia.com/~web105-2b/hw02/hw02-1045445125

1.製作主題 : 神力女超人介紹angry smiley
2.欲呈現之配色風格:英雄色系
3..有無遇到的問題? 應該沒有
4.製作感想 :這次製作速度比上一個作業快很多 也更理解功能的使用 感動thumbs upthumbs upthumbs up

:http://mepopedia.com/~web105-2b/hw02/hw02-1045445173

1.製作主題 : 你的名字
2.欲呈現之配色風格: 大地配色(綠)
3..有無遇到的問題 : 目前無(已從做的過程中了解)
4.製作感想 @_@



Edited 1 time(s). Last edit at 11/03/2016 11:49AM by 1045445173.
(編輯記錄)

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


(2).請回答以下問題:
1.郵票
2.以綠黃色為主色
3..無
4.無

作業的網址則為:http://mepopedia.com/~web105-2b/hw02/hw02-1045445104
欲呈現之配色風格:想呈現簡單容易閱讀的畫面 。
有無遇到的問題? :因為不熟悉,所以製作速度很慢。
製作感想:接觸了這個軟體一陣子還是蠻不適應的,希望能慢慢上手。

這個作業的網址則為:http://mepopedia.com/~web105-2b/hw02/hw02-1045445137
1.製作主題 自愛
2.欲呈現之配色風格: 橙 綠
3..有無遇到的問題? 很多
4.製作感想 煩!

作業網址:http://mepopedia.com/~web105-2b/hw02/hw02-1045445056

1.製作主題:新生代演員朴寶劍
2.欲呈現之配色風格: 清新可愛 糖果色系 配合介紹人物
3..有無遇到的問題? 要注意小細節,一用錯會找不到出錯的問題
4.製作感想:越來越難了,但每次做完都會很有成就感

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

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

http://mepopedia.com/~web105-2b/hw02/hw02-1045445086/
1.製作主題 李鐘碩
2.欲呈現之配色風格: 利用粉嫩系的色調營造出他給人的暖男形象
3..有無遇到的問題? 第一次做完結果上船網址不對後來又重做
4.製作感想 做網頁好難eye popping smiley

作業網址:
file:///C:/Users/user/Desktop/hw02-023/index.html

製作主題:16個夏天
製作風格:清新的藍綠色
有無問題:無
製作心得:覺得有點困難,需要多加練習才會熟悉

http://mepopedia.com/~web105-2b/hw02/hw02-1045445068
1.製作主題:文創之星總獎金500萬元
2.欲呈現之配色風格:藍色系
3..有無遇到的問題?沒什麼大問題
4.製作感想 :一開始覺得很難 但做完作業三就覺得還好

作業網址:http://mepopedia.com/~web105-2b/hw02/hw02-1025445119

製作主題:蘇打綠
欲呈現之配色風格:想稍微用重一點的顏色呈現
有無遇到的問題:無