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

Advanced

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

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

製作說明


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

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

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

4.#header、#content及#footer內,自行打入不同的內容文字,自行隨意設定

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

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

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



1. 繳交作業方式



1.製作完成後,檔案命名方式:

第二個作業FTP上的資料夾為:hw02

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

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

存放在 < hw02-學號 > 的資夾內



2.上傳至FTP

3.回覆本篇文章

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


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




同學的範例喔!

(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/~web104-2b/hw02/hw02-1035445209

(2)請回答以下問題:
1.製作主題:雙子座的分析
2.欲呈現之配色風格:深淺藍色風格
3.有無遇到的問題? 無
4.製作感想:對Dreamweaver感覺已經上手了,希望可以再學到更多語法。

視傳2B 1035445209 林冠妤

1.製作主題 : Russia tour
2.欲呈現之配色風格: 主要以棗紅色系呈現
3..有無遇到的問題? 無
4.製作感想 :已經慢慢地對Dremweaver語法能夠理解。

作業網址:http://mepopedia.com/~web104-2b/hw02/hw02-1035445104/

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

(2)請回答以下問題:
1.製作主題:摩羯座分析
2.欲呈現之配色風格:藍色風格
3.有無遇到的問題? 無
4.製作感想:這次是自己挑主題來設計屬於自己的網頁,希望在接下來的課程能學到更多語法。

視傳2B 1035445149 詹前緯

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

(2)請回答以下問題:
1.製作主題:獅子座的分析
2.欲呈現之配色風格:紅色系的風格
3.有無遇到的問題? 無
4.製作感想:對作法還有點不太熟悉。
視傳2B 1035445059 翁健瑋

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

(2)請回答以下問題:
1.製作主題:巨蟹座分析
2.欲呈現之配色風格:藍色調風格
3.有無遇到的問題? 無
4.製作感想:在製作時遇到很多問題,一開始以為是存錯檔,後來仔細核對發現只是因為不小心多打了一個標點符號,所以在未來的作業我們應該更細心點的核對我們的網頁設計作業。

(1)作業網址:http://mepopedia.com/~web104-2b/hw02/hw02-1035445176
(2)請回答以下問題:
1.製作主題:摩羯座分析
2.欲呈現之配色風格:因為摩羯座是在冬天出生的 所以我用藍綠色及白色當作主題色系
3.有無遇到的問題? 無
4.製作感想:做出自己的網頁實在很開心~

視傳2B 1035445176 呂姿儀



Edited 1 time(s). Last edit at 10/14/2015 06:15PM by star0106w.
(編輯記錄)

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


(2).請回答以下問題:
1.製作主題 : 人物介紹-Alexander McQueen
2.欲呈現之配色風格:主要以淺灰色及白色為主,亮粉色加以點綴
3..有無遇到的問題? 無
4.製作感想 :希望能夠越來越熟練操作Dremweave这个軟體,將製作網頁框架基本掌握。

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

(2)請回答以下問題:
1.製作主題:THE LITTLE MERMAID
2.欲呈現之配色風格:深紅風格
3.有無遇到的問題? 沒有
4.製作感想:這次製作過程中,有試著加入其他東西,網站出現的感覺我自己也很喜歡。

(1)作業網址:http://mepopedia.com/~web104-2b/hw02/hw02-1045245001
(2)請回答以下問題:
1.製作主題:櫻花
2.欲呈現之配色風格:粉紅色和白色的配合,希望帶出欣賞櫻花的感覺
3.有無遇到的問題? 有,在尺寸的問題上有點困難.
4.製作感想:網站的設計風格我覺得很喜歡和能夠表現出櫻花的主題,
在上傳功課花的時間比製作上要解決問題的時間多QAQ~~

(1)作業網址:http://mepopedia.com/~web104-2b/hw02/hw02-1035445170
(2)請回答以下問題:
1.製作主題:手作卡片
2.欲呈現之配色風格:粉黃色的溫馨色調
3.有無遇到的問題? 有,邊框上想做一些特別的變化,卻不知道怎麼調整
4.製作感想:嘗試放圖片和影片連結,成功後滿開心的~smiling bouncing smileysmiling bouncing smileysmiling bouncing smiley

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

(2)請回答以下問題:
1.製作主題巨蟹座的分析
2.欲呈現之配色風格:紫色配黃色
3.有無遇到的問題? 無
4.製作感想:對Dreamweaver感覺已經上手了,希望可以再學到更多語法。

(1).作業網址:http://mepopedia.com/~web104-2b/hw02/hw02-1035445017
(2).請回答以下問題:
1.製作主題: 開喜烏龍茶
2.欲呈現之配色風格: 開喜烏龍茶的配色
3..有無遇到的問題: 無
4.製作感想: 開喜烏龍茶真的超好喝!大家趕快去喝!

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

(2)請回答以下問題:
1.製作主題:台灣犬
2.欲呈現之配色風格:深色冷色系列
3.有無遇到的問題? 無
4.製作感想:
製作自己喜歡的主題網頁總是讓人心情愉悅,這次所用的主題是不久前被認定台灣代表的台灣犬,台灣犬就是台灣土狗,其純種身價不斐,因與
其他犬種混合血統,因此純血統的台灣土狗較少量,台灣犬的本性為獵犬,其個性忠心、護主。
製作這次的主題真的很開心,老師的講義也很清楚製作時間不長大約1小時。

1035445056 陳冠霖

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

(2)請回答以下問題:
1.製作主題:柴犬
2.欲呈現之配色風格:咖啡色系風格
3.有無遇到的問題? 無
4.製作感想:因為有了第一個作業的練習,所以在做這個作業時更加的上手、熟練

視傳2B 1035445206 王文筠

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


(2).請回答以下問題:
1.製作主題:西洋棋
2.欲呈現之配色風格:黑色與深藍色的西洋棋盤配色
3..有無遇到的問題? 無
4.製作感想 :對網頁設計逐漸熟練

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


(2).請回答以下問題:
1.製作主題: 威廉莫里斯

2.欲呈現之配色風格:主色調以灰色和藍色為主

3..有無遇到的問題? 有!!!!!
我的作業網址在我電腦開啟的時候變成沒有設計過的樣式
但是在我的資料夾裡面開啟就OK

4.製作感想 : 希望以後能熟能生巧

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

(2).請回答以下問題:
1.製作主題
仍然沿用上一次有關寵物老鼠來作作主題。
2.欲呈現之配色風格:
低飽和度之色彩以配合大白鼠常見的毛色。
3..有無遇到的問題?
沒有。
4.製作感想
開始學習到一些從前學校沒多加教導的技法,對此感到非常高興,不少新的技巧都讓我躍躍欲試,尤其是CSS的部份。

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

(2)請回答以下問題:
1.製作主題:插畫家:田中shen
2.欲呈現之配色風格:以墨綠色搭配灰階
3.有無遇到的問題? 無
4.製作感想:
漸漸的對於網頁設計越來越順手了。

1035445200 王奕璇

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

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

1.製作主題:設計師專訪介紹。

2.欲呈現之配色風格:

因為這位設計師擅長用簡單的幾何符號構成與很有設計感的文字來呈現不簡單的作品,
作品中充滿著設計感,所以在顏色上希望用簡單沉穩的顏色來代表他。

3..有無遇到的問題? 目前沒有什麼太大的問題。

4.製作感想 :現在在製作方面上越來越了解裡面的語法內容與熟悉Dreamweaver的操作 ,也越來越喜歡研究裡面的構成。



Edited 2 time(s). Last edit at 10/15/2015 12:26AM by 1035445158.
(編輯記錄)

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

(2)請回答以下問題:
1.製作主題:血型大剖析
2.欲呈現之配色風格:淺色系列
3.有無遇到的問題? 無
4.製作感想:在製作的過程中我學習到了很多,發現其實沒有想像中的那麼難,而且這是我第一個製作的網頁設計很開心。

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

(2)請回答以下問題:
1.製作主題:天秤座的分析
2.欲呈現之配色風格:冷暖色對比
3.有無遇到的問題? 無
4.製作感想:對於網頁設計概念越來越清楚,也慢慢有上手的感覺。

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

(2)請回答以下問題:
1.製作主題:【12星座完整性格分析】
2.欲呈現之配色風格:灰藍色系的風格
3.有無遇到的問題? 無
4.製作感想:這一次有比上一次熟悉一點


視傳2B 1035445155 彭品瑄

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

(2)請回答以下問題:
1.製作主題:法拉利姊
2.欲呈現之配色風格:可愛色
3.有無遇到的問題? 沒有
4.製作感想:很想把網頁設計學好,希望以後可以自己設計出個好網頁。

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

(2)請回答以下問題:
1.製作主題:認識太陽系 八大行星
2.欲呈現之配色風格:黑藍色配有淡淡的黃色
3.有無遇到的問題? 大致上沒有,比起上次順利很多
4.製作感想:原本在製作第一個作業時覺得很困難,但練習久了後覺得挺有趣的!

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

(2)請回答以下問題:
1.製作主題:【12星座完整性格分析】
2.欲呈現之配色風格:灰藍色系的風格
3.有無遇到的問題? 無
4.製作感想:這一次有比上一次熟悉一點


視傳2B 1035445155 彭品瑄

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


(2).請回答以下問題:
1.製作主題 :12星座性格分析
2.欲呈現之配色風格: 藍灰色
3..有無遇到的問題? 無
4.製作感想 :比第一次熟悉許多

http://mepopedia.com/~web104-2b/hw02/hw02-1035445131/

(2).請回答以下問題:
1.製作主題
恐怖情人
2.欲呈現之配色風格:
黑色為底,突現紅色,讓搭配起來有恐怖的感覺
3..有無遇到的問題?
沒有。
4.製作感想
覺得很好玩,呈現出來的東西是原本看不到的,我喜歡顏色的分割,可以表現重點,很有趣。

吳寶蓉 1035445131

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

(2)請回答以下問題:
1.製作主題:我的滑板鞋
2.欲呈現之配色風格:藍色風格
3.有無遇到的問題? 無
4.製作感想:龐麥郎很帥,台灣之光yaaaaaaaa

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


(2).請回答以下問題:
1.製作主題:小故事大啟示
2.欲呈現之配色風格:用活潑的色彩製造撞色效果,想呈現俏皮可愛的風格
3..有無遇到的問題:無
4.製作感想:能以自己喜歡的主題製作有意義的網頁覺得很棒!

視傳2B-1035445071-陳郁琳

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


(2).請回答以下問題:
1.製作主題:時裝的暗黑美學
2.欲呈現之配色風格:鮮艷的色彩依舊給人一種壓抑的感覺,類似梵谷的《麦田飞鸦》。
3..有無遇到的問題? 無
4.製作感想 :
已經開始漸漸熟悉軟體的應用,希望可以學到更多網頁的版型和語法


視傳2B 1035445137 周李銘

(1)http://mepopedia.com/~web104-2b/hw02/hw02-1035445065


(2)
1.製作主題: 魍魎之匣(推理小說)
2.欲呈現之配色風格: 偏冷色系
3..有無遇到的問題:還可以但有借用老師的範例修改
4.製作感想 :很有趣


1035445065

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

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

①製作主題:Duncan Design

②欲呈現之配色風格: 由於Duncan插畫家所用的配色都是黑、白、恢、紅四色,
所以套用他的風格底色色塊以四色為基底,內容描速Duncan的經驗之談,內文
上面插入圖片讓整個畫面和諧不單調

③有無遇到的問題? 有,小細節會粗心

④製作感想 :製作出來的感覺我覺得很棒,雖然過程很漫長,要收集資料要理解語
法的使用等。有學到東西的感覺做完有成就感哦!

視傳2B 1035445032 林以真

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

(2)請回答以下問題:
1.製作主題:皮克斯動畫工作室
2.欲呈現之配色風格:以藍色為主的亮色配色
3.有無遇到的問題? 無
4.製作感想:希望可以再學到更多語法。

視傳2B 10354452152 黃毓雯

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


(2).請回答以下問題:
1.製作主題 :石虎

2.欲呈現之配色風格:參考石虎身上的顏色去配色,顏色呈現大自然風格。

3..有無遇到的問題? 如果能學到設計網頁底紋就好了!
請問老師,網頁的文字是否可以空兩格?那要如何超作?

4.製作感想 :我覺得能夠為一個主題設計出網頁是一件非常有趣的事,如果能夠讓大眾去瀏覽,那會很有成就感。
原來網頁的效果要好,是要不斷地去嘗試、研究才能得到好的效果。



Edited 1 time(s). Last edit at 10/15/2015 09:05PM by 1034445002.
(編輯記錄)

3.回覆本篇文章

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


(2).以下問題:
1.製作主題:東方Project風神錄篇
2.欲呈現之配色風格:秋天
3..有無遇到的問題:超連結顏色、大小是歸哪一區管?
4.製作感想:爽&成就感

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


(2).請回答以下問題:
1.製作主題:crystal ball包包店鋪資訊
2.欲呈現之配色風格:我選擇灰+粉的色調來配色,希望有一種低調的甜美感,來襯托這品牌給人的意象。
3..有無遇到的問題:沒有,目前學習上很順利。
4.製作感想 :老師講得很仔細,所以這次製作上沒遇到什麼問題。

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

(2)請回答以下問題:
1.製作主題:抽象派 蒙德里安
2.欲呈現之配色風格:藍 紅 黃 白
3.有無遇到的問題? 沒有
4.製作感想:
這次製作過程中有漸漸地進入狀況
覺得我這次的風格我很喜歡
有符合蒙德里安的風格

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

(2)請回答以下問題:
1.製作主題:奧黛利赫本
2.欲呈現之配色風格:紫色調
3.有無遇到的問題? 沒有
4.製作感想:
她是一名傑出的女演員,名言裡認識她的
想深入了解所以做了她的主題
她得生平也不是一開始就順利的
是一位非常有妹的女性.

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

(2).請回答以下問題

1.製作主題 :人物介紹

2.欲呈現之配色風格:因介紹主題的人物風格多變及色彩鮮豔,所以用紅及藍搭配白色呈現活潑的風格。

3.有無遇到的問題:目前沒有

4.製作感想:對這個程式有越來越清楚及熟悉,會期待下一個步驟地進行,希望能做出讓自己滿意的網頁。

視2B 1035445218 柯惠文


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


(2).請回答以下問題:
1.製作主題 : 側睡容易導致胃酸逆流? 4個影響你睡眠的「不健康睡姿」大公開
2.欲呈現之配色風格: 以暖色調為主,主要使用粉色藕色等。
3..有無遇到的問題? 無 
4.製作感想 :感覺網頁在配色時能配的色偏少,且大部分的色感都十分強烈。

(1).作業網址:http://mepopedia.com/~web104-2b/hw02/hw02-1035461133
(2).請回答以下問題:
1.製作主題: 恐龍
2.欲呈現之配色風格: 叢林的感覺
3..有無遇到的問題: 無
4.製作感想: 漸漸的越學越多的感覺,越來越感興趣了!
覺得很有趣。

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


(2).請回答以下問題:
1.製作主題:簡單心理測驗
2.欲呈現之配色風格: 我用紫色、黑色和一點桃紅來營造出神秘的氛圍
3..有無遇到的問題? 無
4.製作感想 :找內容比較煩惱,但是玩得很開心

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

(2)請回答以下問題:
1.製作主題:阿爾法工業
2.欲呈現之配色風格:軍綠風
3.有無遇到的問題? 無
4.製作感想:這次是自己挑主題來設計屬於自己的網頁,希望在接下來的課程能學到更多語法。

視傳2B 1035445014 林約瑟

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


(2).問題:
1.製作主題: 爆紅素人
2.欲呈現之配色風格:綠色系
3..有無遇到的問題?:基本無,想嘗試嵌入影片但無法。
4.製作感想:過程還ok,做著做著,越做越有一點點點點點點點點點點點點點點點點點點心得 這樣。

1035445107 黃重鈞



Edited 1 time(s). Last edit at 10/28/2015 09:36PM by ttn0910.
(編輯記錄)

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

(2).請回答以下問題:
1.製作主題:歌詞網
2.欲呈現之配色風格:裡面用溫暖的顏色,外面用比較冷的顏色。
3..有無遇到的問題? 不知道算不算是。
4.製作感想:有點辛苦,可能沒有很熟悉吧!

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

(2)請回答以下問題:
1.製作主題:記錄你的每一天
2.欲呈現之配色風格:活潑 黃.粉紅
3.有無遇到的問題: 無
4.製作感想:很開心完成了spinning smiley sticking its tongue out

視傳3B 1025445086 林怡潔

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

(2)請回答以下問題:
1.製作主題:皮革
2.欲呈現之配色風格:綠油油
3.有無遇到的問題: 無
4.製作感想:很開心完成了
視傳3B 1025445116林保昇

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


(2).請回答以下問題:
1.製作主題:處女座
2.欲呈現之配色風格:應用處女座的幸運色藍色,藍色漸變使得網頁有設計感
3..有無遇到的問題? 無
4.製作感想 :
已經開始漸漸熟悉軟體的應用,希望可以學到更多網頁的版型和語法


視傳2B 1035445140 饒瑾瀓

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

(2)請回答以下問題:

1.製作主題:怪獸電力公司
2.欲呈現之配色風格:黃色紫色 他們的代表色
3.有無遇到的問題: 無
4.製作感想:希望能越來越好

視傳3b 1025445077 儲德君

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


(2).請回答以下問題:
1.製作主題:台灣漫畫家River簡介
2.欲呈現之配色風格: 明亮開朗的色系
3..有無遇到的問題? 還有點不太適應Dreamweaver
4.製作感想 再找內容想了比較久,其他都還在努力

1.製作主題 : 小紅帽
2.欲呈現之配色風格: 主要以紅色系呈現
3..有無遇到的問題? 無
4.製作感想 :能慢慢開始習慣操作Dremweaver,對作法還有點不熟悉。

作業網址:http://mepopedia.com/~web104-2b/hw02/hw02-1035445179

1.製作主題 :小紅帽
2.欲呈現之配色風格: 主要以紅色系呈現
3..有無遇到的問題? 無
4.製作感想 :慢慢開始習慣用Dremweaver,對用法還不太熟悉。

作業網址:http://mepopedia.com/~web104-2b/hw02/hw02-1035445179