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

Advanced

[作業05] HTML5與CSS--網頁版型練習

[作業05] HTML5與CSS--網頁版型練習

1. HTML5與CSS--網頁版型練習作業說明


請參考
[講義] HTML5與CSS--網頁版型設定:
http://mepopedia.com/forum/read.php?804,45304



1. 作業步驟

1.參考雙欄版型 http://mepopedia.com/~jinjin/web/hw07-102/
與三欄版型 http://mepopedia.com/~jinjin/web/hw07-102/index-3.html
2.分別嘗試放入內容,並搭配重新的配色與CSS的改變。
3.利用現有的框架,體會區塊版型的應用。
5.將資料夾命名為 hw05-學號,以FTP上傳至hw05資料夾
作業網址為http://mepopedia.com/~web102-a/hw05/hw05-1015445XXX

並請回覆:

(1)作業網址:
(2)本頁設計重點:
(3)製作心得:
學號



請於規定時間準時繳交作業,逾期不後。





Edited 2 time(s). Last edit at 04/22/2014 08:14PM by JinJin.
(編輯記錄)

(1)作業網址: 雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445006/
三欄:http://mepopedia.com/~web102-a/hw05/hw05-1-1015445006/
(2)本頁設計重點: 以鉅點廣告設計有限公司為主要發想點,HEADER以標誌LOGO呈現,讓人一眼就可以馬上知道是鉅點廣告,LOGO是自己畫的,也不是貴公司現有的LOGO,導覽列和側邊的區塊都可以呈現出想表達得東西,背景則用圖片來代表,讓整個葉面都呈現出整體顏色的感覺。

(3)製作心得:一開始做沒有加上LOGO圖片,會覺得這個網頁沒有很好看的感覺,但是,加上了LOGO和背景,讓整個網頁呈現出美好又有整體性的感覺。



Edited 2 time(s). Last edit at 04/28/2014 10:45PM by 蘭雅涵.
(編輯記錄)

(1)作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445001/index-1
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445001/index
(2)本頁設計重點: 健康自然大地的顏色,盡量以開起室窗就能看見整個網頁為主~
(3)製作心得:
套上板型後就很容易改,可以改大改小~


1015445001



Edited 1 time(s). Last edit at 04/29/2014 12:22PM by light.
(編輯記錄)

(1)作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445266/index
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445266/index-1
(2)本頁設計重點:用暖色系 整體呈現陽光 暖和感
(3)製作心得:又學到一個版型

(1)作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05_1015445053/index1
三欄http://mepopedia.com/~web102-a/hw05/hw05_1015445053/index
(2)本頁設計重點:明亮的顏色 讓人覺得溫馨
(3)製作心得: 可以直接套用 然後修改感覺挺快的

(1)作業網址:
雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445050/index
三欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445050/index01
(2)本頁設計重點: 以暖色系來搭配甜點甜甜的感覺
(3)製作心得: 版型設計其實還蠻難的
學號 1015445050

(1)作業網址:
雙欄→http://mepopedia.com/~web102-a/hw05/hw05-1015445046/
單欄→http://mepopedia.com/~web102-a/hw05/hw05-1-1015445046/
(2)本頁設計重點: 以灰黑白簡單配色為主,再加入一點明亮色點綴
(3)製作心得: 雙欄的HTML好像無法使用ORZ?
學號 1015445046

(1)作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445031/index
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445031/index1
(2)本頁設計重點:簡單明亮、輕快繽紛的感覺~
(3)製作心得:不會太困難又很有趣的一項作業!!!

(1)作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445051/index
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445051/index01
(2)本頁設計重點:同色系
(3)製作心得:感覺浮動的語很好用

(1)作業網址:

雙欄:http://mepopedia.com/~web102-a/hw05/hw05_1015445024
三欄: http://mepopedia.com/~web102-a/hw05/hw05_1015445024_2

(2)本頁設計重點:

簡單黑灰白襯托中間主訴求

(3)製作心得:

瞭解css語法可以寫入htnl,如何有效利用語法在編寫網頁時重整較為容易
單頁的網站css寫在html較為好管理,而頁面較多的網站往往需要更多歸類

學號

1015445024

(1)作業網址:
二欄式 - http://mepopedia.com/~web102-a/hw05/hw05-1015445002/index
三欄式 - http://mepopedia.com/~web102-a/hw05/hw05-1015445002/index-3

(2)本頁設計重點:撞色、活潑繽紛感
(3)製作心得: 語法簡潔,容易分出個區塊。
學號 1015445002

(1)作業網址:
雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445060/index
三欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445060/index-3
(2)本頁設計重點: 以大地森林色系為主,讓人有放鬆的感覺。
(3)製作心得: 是一種新的版型,看起來更有架構了。
學號:1015445060

(1)作業網址:

雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445018/
三欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445018/index.html2

(2)本頁設計重點:

使用基本的黑灰階來襯托,中間留白凸顯重點
襯托政府的黑暗

(3)製作心得:
蜀道難 難與上天

學號

1015445018

(1)作業網址:

雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445027/index
三欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445027/index2

(2)本頁設計重點:
用橘紅色來襯托戀愛的樣子
酸酸甜甜的感覺

(3)製作心得:
雖然知道網頁真的很重要 但真的很不想在學網頁了!

學號
1015445027

(1)作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445054/index
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445054-1/index
(2)本頁設計重點: 先用圖片再用顏色很好配色
(3)製作心得:
喜歡玩配色,因為很好玩,這樣才有心情研究語法

(1)作業網址:

雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445043
三欄: http://mepopedia.com/~web102-a/hw05/hw05-1015445043-2

(2)本頁設計重點:

全部都粉~紅~色~

(3)製作心得:

改顏色全部都粉紅色好好玩

學號

1015445043

(1)作業網址:

雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445048/index
三欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445048/index2

(2)本頁設計重點:
雙欄式用很像糖果甜甜的色調下去搭配
三欄式用感覺比較酸的糖果色系下去配

(3)製作心得:
網頁真的好難~QQ 期末怎麼辦~怎麼辦~怎麼辦~

學號
1015445048

(1)作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445010/index-1.html
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445010/index.html
(2)本頁設計重點: 繽紛色彩為主
(3)製作心得:
套上版型就可以改來改去 很有趣



Edited 3 time(s). Last edit at 05/13/2014 12:34AM by 鄔惠婷.
(編輯記錄)

(1)作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445268/index2.html
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445268/index.html

(2)本頁設計重點: 溫和甜美的糖果配色

(3)製作心得: 配色不容易,要算準雙欄和三欄的數值都要很小心.

http://mepopedia.com/~web102-a/hw05/hw05-1015445055/index-1
http://mepopedia.com/~web102-a/hw05/hw05-1015445055/index

(2)本頁設計重點: 類似色與低飽和的搭配
(3)製作心得:
配色真的很深奧

1015445055

1)作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445022/index-1
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445022/index
(2)本頁設計重點: 以類似彩妝、化妝品牌的顏色做基調。
(3)製作心得:
套上版型真的很如容易上手,自己打真的會花上好長一段時間。

(1)作業網址:
二欄式 - http://mepopedia.com/~web102-a/hw05/hw05-1015445014/index
三欄式 - http://mepopedia.com/~web102-a/hw05/hw05-1015445014/index-3
(2)本頁設計重點:馬卡龍色、粉嫩感
(3)製作心得:看起來很簡單但不容易
1015445014

(1)作業網址:
雙欄式 http://mepopedia.com/~web102-a/hw05/hw05-1015445059/index
三欄式 http://mepopedia.com/~web102-a/hw05/hw05-1015445059/index-1
(2)本頁設計重點:以對比色做色塊上的搭配,有強烈對比效果。
(3)製作心得:讓我又學到一種新的版型設計,很有趣也很好玩。
學號:1015445059

(1)作業網址: 雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445007/Untitled-1.html
三欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445007/index-3.html
(2)本頁設計重點:想到現在是夏天了,所以使用暖色系

(3)製作心得:
剛開始發現怎麼都是錯的,檢查了很久後才發現是檔案名稱的關西

作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445008/index-1
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445008/index

本頁設計重點: orange

製作心得: 其實不會很難



Edited 1 time(s). Last edit at 06/17/2014 04:37PM by Dx_is818099.
(編輯記錄)

(1)作業網址:
雙欄 http://mepopedia.com/~web102-a/hw05/hw05-1015445017/index-1
三欄 http://mepopedia.com/~web102-a/hw05/hw05-1015445017/index

(2)本頁設計重點: 以自己的心情來配色,不用顧慮太多

(3)製作心得: 簡單的告訴我們怎麼去排版。

1015445017

(1)作業網址:
雙欄 http://mepopedia.com/~web102-a/hw05/hw05-1015445038/index1
三欄 http://mepopedia.com/~web102-a/hw05/hw05-1015445038/index

(2)本頁設計重點: 依自己的想法配色

(3)製作心得: 看似麻煩 但一步一步去做 似乎就是這樣的簡單 去了解就會懂一些小語法了 spinning smiley sticking its tongue out

(1)作業網址: 雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445025/index-d
三欄:http://mepopedia.com/~web102-a/hw05/hw05-1-1015445025/index-t
(2)本頁設計重點: 介紹元佑實業有限公司所賣的相機相關產品,以簡單灰階呈現
(3)製作心得:雙欄式跟三欄式各有優缺點,比較偏好雙欄式,雖然能放的東西空間有限,可是呈現出來比較能一目了然

(1)作業網址:
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445045/index
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445045/index
(2)本頁設計重點:兩個不同的風格
(3)製作心得:
終於有點懂了,需要花更多時間去鑽研


1015445045

(1)作業網址:
雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445035/
三欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445035/index3
(2)本頁設計重點: 橘色的感覺~然後發現這配色好像挺大眾的...
(3)製作心得:看懂還有記住版型的位置了~

(1)作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445019/index
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445019/index1
(2)本頁設計重點:用藍綠色 整體呈現舒服的感覺
(3)製作心得:難

(1)作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445016/1/index1
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445016/2/index
(2)本頁設計重點:兩種不同風格,一個是熱血足球,一個是溫暖歌詞
(3)製作心得:
這項作業還算容易,套上版型就可以,但是要注意數值不可以出錯

(1)作業網址:貳欄式 http://mepopedia.com/~web102-a/hw05/hw05-1015445267/05-1
参欄式 http://mepopedia.com/~web102-a/hw05/hw05-1015445267/05-2
(2)本頁設計重點: 類似色與相反色相配色練習
(3)製作心得: 比想像中簡單很多
1015445267李金樺

(1)作業網址:
雙欄http://mepopedia.com/~web102-a/hw05/hw05-1015445063/index
三欄http://mepopedia.com/~web102-a/hw05/hw05-1015445063/index1
(2)本頁設計重點:藍色為主色 讓人覺得溫馨
(3)製作心得: 可以直接套用 然後修改感覺挺快的

(1)作業網址: http://mepopedia.com/~web102-a/hw05/hw05-1015445023/
(2)本頁設計重點: 灰黑色,襯托低明度的橘色,達到平衡,卻顯眼的效果
(3)製作心得: 基本的網頁格式欄,練習基礎的網頁格式。

1015445023

(1)作業網址:

雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445044/index
三欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445044/index-1.html
(2)本頁設計重點:
以溫暖色系為主 有點少女情懷

(3)製作心得:
一大早做網頁 真是一件熱血的事

(1)作業網址:
雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445033/index-1
三欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445033/index
(2)本頁設計重點: 以文字性質來選擇顏色\
(3)製作心得: 架構是基礎要學好才是
學號:1015445033

作業網址:http://mepopedia.com/~web102-a/hw05/hw05-1015445057/hw05-1015445057.html

本頁設計重點:橘黃色的暖色調為主

製作心得:相當有意思

1015445057 王靖淳

作業網址:http://mepopedia.com/~web102-a/hw05/hw05-1015445056/hw05-1015445056.html

本頁設計重點:運用英文與色調營造質感

製作心得:網頁真是有趣

1015445056 陳柏儒

(1)作業網址:
雙欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445015/index-d
三欄:http://mepopedia.com/~web102-a/hw05/hw05-1015445015/index-t
(2)本頁設計重點:以類似色做搭配,想用比較複古的顏色來呈現網頁的效果,內容是以一些網拍為主要,所以配色用較簡單來帶出質感。
(3)製作心得:雙欄跟三欄其時做起來差不多,比想像中簡單一些。

學號1015445015

1)作業網址: 雙:http://mepopedia.com/~web102-a/hw05/hw05-1015445058/index
三:http://mepopedia.com/~web102-a/hw05/hw05-1015445058/index-1
(2)本頁設計重點: 皆以藍色為主
(3)製作心得: 版型很多很COOL
學號 1015445058