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/~web103-a/hw02/hw02-102xxxxxxx

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

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



2.上傳至FTP

3.回覆本篇文章

(1).作業網址

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

===========================================
請務必在下次上課前回覆,否則為遲交,扣十分
===========================================

http://mepopedia.com/~web103-a/hw02/hw02-1005445189

香港Beyond 樂團經典歌曲 海闊天空

欲呈現該樂團的色調與香港的感覺

整體不難,很多小細節都是節省繁雜步驟的好捷徑

http://mepopedia.com/~web103-a/hw02/hw02-1025445067

1.製作主題
以美食作為題材,會比較偏向咖啡廳或餐廳類

2.欲呈現之配色風格
淡淡的個性版面

3..有無遇到的問題
可能語法會一直用貼的,然後就很容易搞混誰是誰

4.製作感想
做到最後會有成就感:^目

1025445067

(1).作業網址
http://mepopedia.com/~web103-a/hw02/hw02-1025445205

(2).請回答以下問題:
1.製作主題 Minecraft麥塊
2.欲呈現之配色風格: 可愛桃色系
3..有無遇到的問題? 想不到該怎麼配色
4.製作感想
很有趣耶

1025445205

(1).作業網址
http://mepopedia.com/~web103-a/hw02/hw02-1025445058

(2).請回答以下問題:
1.製作主題 :柴犬
2.欲呈現之配色風格: 暖淡色系
3..有無遇到的問題? 有些配色看起有點衝突 配很久~
4.製作感想 : 無

1025445058

http://mepopedia.com/~web103-a/hw02/hw02-1005445195/


1.製作主題:脫北者
2.欲呈現之配色風格:北韓的生活很神祕,配色想呈現溫馨的感覺
3..有無遇到的問題? 沒有
4.製作感想:很有趣 也學到蠻多

(1).作業網址
http://mepopedia.com/~web103-a/hw02/hw02-1025445223

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

http://mepopedia.com/~web103-a/hw02/hw02-1025445184


1.製作主題:nike
2.欲呈現之配色風格:以簡單的黑灰白作為搭配
3..有無遇到的問題? 沒
4.製作感想:很難

http://mepopedia.com/~web103-a/hw02/hw02-1025445130/

1.義大利家具陳列設計
2.家具配色
3.動作跟不上
4.酷



Edited 1 time(s). Last edit at 10/22/2014 10:32AM by lele831230.
(編輯記錄)

http://mepopedia.com/~web103-a/hw02/hw02-1025445064

製作主題 歌手介紹

欲呈現之配色風格: 男性風以及歌手本身代表色

有無遇到的問題:語法一直會混淆..會搞不清楚哪個是哪個..
然後Dreamweaver 預覽跟實際上傳網址預覽不太一樣.. 瀏覽器預覽的樣子也不一樣...用我自己的電腦看是IE比較大小比較剛好...字也不會太小
用自己筆電用GOOGLE看反而變得很迷你

製作感想:其實搞懂了還蠻好玩的,還可以上傳圖片跟影片 做個完整的網頁



Edited 1 time(s). Last edit at 10/25/2014 10:37PM by 枯葉.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web103-a/hw02/hw02-1025445124

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

1.製作主題 : 教你3招讓小腿變細
2.欲呈現之配色風格: 橙+灰
3..有無遇到的問題? 文字距離設不好
4.製作感想 : 做完之後很有成就感,看完之後應該會努力瘦小腿

(1).作業網址 :http://mepopedia.com/~web103-a/hw02/hw02-1025445073

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

1.製作主題 : 叮噹
2.欲呈現之配色風格: 桃紅+白+藍
3.有無遇到的問題:語法一直會混淆..會搞不清楚哪個是哪個..
但比起第一次,這次做比較順了,這讓我很欣慰,這讓我很欣慰。
4.製作感想 : 語法要背清楚

(1).作業網址
http://mepopedia.com/~web103-a/hw02/hw02-1025445049

(2).請回答以下問題:
1.製作主題: APPLE 蘋果公司
2.欲呈現之配色風格: 黑灰白色階
3..有無遇到的問題? 分了四個部分,在語法上面有點複雜,但還是學起來了
4.製作感想 :很喜歡網頁設計

1025445049

http://mepopedia.com/~web103-a/hw02/hw02-1025445109

1.製作主題 頂新黑心油風暴
2.欲呈現之配色風格: 黑心,所以整個頁面呈現出邪惡的感覺,代表著那一些沒良心的邪惡廠商
3..有無遇到的問題? 沒有,配色上面也有一些小困擾
4.製作感想 這次的跟第一次的作業比起來感覺有比較簡單

http://mepopedia.com/~web103-a/hw02/hw02-1025445040

1.製作主題: 恐怖情人的 9個徵兆
2.欲呈現之配色風格: 恐怖以及緊張感。
3..有無遇到的問題?: 英文不好,真的會不方便在程式碼的部分。
4.製作感想 : 編輯程式碼很有趣,只要細心調整,單純的色塊,也能閃閃發光!!
期待自己也能作出令人賞心悅目的網頁。



Edited 1 time(s). Last edit at 10/24/2014 12:46PM by MoMi.
(編輯記錄)

http://mepopedia.com/~web103-a/hw02/hw02-1025445133

製作主題:妖怪少爺
欲呈現之配色風格:清新活力風
有無遇到的問題?目前沒有遇到什麼問題
製作感想:自己架設網頁的呈現漸漸升級了,令人開心。

1025445133 林哲立

http://mepopedia.com/~web103-a/hw02/hw02-1025445043

1.製作主題 :共犯
2.欲呈現之配色風格: 懸疑 黑/白/亮綠
3..有無遇到的問題: 打div語法時忘記打=導致沒辦法跟css.style連結套入效果
4.製作感想 : 對語法還不夠熟悉,過程中卡關很久結果問題只出在少了等號
,有點覺得自己蠻白癡;不過這次做的網頁比較好看了,感覺還不錯。

1025445043/金家任

(1)作業網址: http://mepopedia.com/~web103-a/hw02/hw02-1005445193

(2)請回答以下問題
1.製作主題:7-11吉祥物介紹
2.欲呈現之配色風格:7-11的三個標準色,加上現在OPEN頭冠的天藍色為背景。
3.有無遇到的問題?:這次的區塊分比較多,要配得合宜比較困難。
4.製作感想:用7-11的三個標準色的好處是不用自己想顏色,但是配色對我來說真的很苦手,連有顏色給我配還是有點痛苦...

徐芯儀/1005445193

作業網址:http://mepopedia.com/~web103-a/hw02/hw02-1025445070

1.製作主題 : PIXIV
2.欲呈現之配色風格:舒適的淺綠色
3..有無遇到的問題: 有時候會忘記一些樣式是調整什麼的
4.製作感想 : 看著自己做出來的網站會有點小成就感,會想繼續學下去。

1025445070 邱薏如

網址在這 http://mepopedia.com/~web103-a/hw02/hw02-1025445001/

1.浩然正心劍道社
2.日式劍道風
3.語法有時候會搞不清楚,然後背不起來...。
4.設計自己的網頁很有趣,希望能再教有更多不一樣的新玩意。


作業的網址:http://mepopedia.com/~web103-a/hw02/hw02-1025445136

1.製作主題 :莞爾集〈笑話集〉

2.欲呈現之配色風格:紅藍黃綠歡樂節慶風味

3..有無遇到的問題:
把內容交給阿伯
把配色交給枕頭
把結果交給上頭
其他問題 下次上課或許懂
畢竟......不知問題在何處,也是問題嘛!

4.製作感想 :
有事沒事找事做
作業優先做
教學網頁照著弄
再笨也會懂
至於內容happy構
半夜人來瘋
做完人爽身體勇
歐趴白日夢

1025445136 劉志彥

http://mepopedia.com/~web103-a/hw02/hw02-1025445178

1.製作主題 :我喜愛的歌手

2.欲呈現之配色風格:歐美雜誌感覺的色調為設計

3..有無遇到的問題?
: 框攔要更改顏色的時候找很久,忘記位子放哪個區塊 XD
大致上沒有太大問題,很有趣新鮮

4.製作感想 :
以前覺得網頁設計很難懂,但是老師實做交的很淺顯易懂,用筆記本也可以在家裡做
希望以後可以學更多smiling smiley 很好玩 !

(1).作業網址
http://mepopedia.com/~web103-a/hw02/hw02-1025445151

(2).請回答以下問題:
1.製作主題 香蕉
2.欲呈現之配色風格: 柔和又不失鮮豔
3..有無遇到的問題? :會一直不小心把CSC關掉
4.製作感想 :無



Edited 1 time(s). Last edit at 10/28/2014 09:12PM by bnn.
(編輯記錄)

(1).作業網址 :http://mepopedia.com/~web103-a/hw02/hw02-1025445025

(2).請回答以下問題:
1.製作主題 :馬來貘
2.欲呈現之配色風格:以馬來貘黑白的身體來做配色
3..有無遇到的問題? 有的地方會搞混 須看一下講義
4.製作感想 有越來越會了


1025445025 許函郁

(1).作業網址
http://mepopedia.com/~web103-a/hw02/hw02-1025461015

(2).請回答以下問題:
1.製作主題: BW'S XYAMAHA 台灣山葉機車經營理念
2.欲呈現之配色風格: BW'S XYAMAHA 官網配色風格 黑、紅、白、灰。極簡配色
3..有無遇到的問題?: 無!! 老師講解的微妙微俏,輕輕鬆鬆簡單上手
4.製作感想 :讓我了解做網頁的樂趣,有機會會自己嘗試做做看更生動的網頁

學號:1025461015 姓名:張哲鈞



Edited 1 time(s). Last edit at 10/29/2014 12:48AM by 1025461015.
(編輯記錄)

(1).作業網址
http://mepopedia.com/~web103-a/hw02/hw02-1025443064/

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

4.製作感想
覺得製作網頁配上自己喜歡的顏色很開心很有趣

1025443064

(1).作業網址
http://mepopedia.com/~web103-a/hw02/hw02-1025445046

(2).請回答以下問題:
1.製作主題:舞孃俱樂部
2.欲呈現之配色風格:呈現詼諧卻又引人注目的色系
3..有無遇到的問題? 有點搞不清楚分區的顏色,會一直不小心換到別的區塊的文字顏色,版方面都還好,多練習後,沒什麼太大的問題。
4.製作感想 :一步一步慢慢開始製作,越來越熟練後,也發現真的能做出一個網頁的時候,真的覺得很神奇,很有成就感。

1025445046

http://mepopedia.com/~web103-a/hw02/hw02-1025445112
1.製作主題 :以領養代替購買
2.欲呈現之配色風格: 配色很難想,要配到好看很難
3..有無遇到的問題? 格子框很難設定
4.製作感想 :很難但是很有趣~~不過一堆字看了很討厭

1025445112

(1).作業網址
http://mepopedia.com/~web103-a/hw02/hw02-1025445091

(2).請回答以下問題:
1.製作主題 :[食譜] 冬日甜點: 南瓜起司蛋糕 pumpkin cheesecake
2.欲呈現之配色風格: 暖淡色系
3..有無遇到的問題:無
4.製作感想 :對語法有比較了解

1025445091

(1).作業網址
http://mepopedia.com/~web103-a/hw02/hw02-1025445199

(2).請回答以下問題:
製作主題 :TSUJIRI 什利茶屋
欲呈現之配色風格: 抹茶色搭配粉橘色
有無遇到的問題? :再配顏色時遇到一些困難,因為不熟悉,分不太清楚哪個是哪個部份的
製作感想:
第一次做網頁設計,覺得蠻有趣的,
雖然一開始不知道那邊是哪一邊,
但是用到最後會慢慢的熟悉,
我改的最多次是配色的部分,
因為要全部呈現出來才會知道好不好看。

1作業網址: http://mepopedia.com/~web103-a/hw02/hw02-1025445106

2.欲呈現之配色風格:以藍色為主題
3..有無遇到的問題: 對語法很不熟悉所以花了滿長時間製作
4.製作感想 : 做完還是覺得很有成就感,希望以後做更好

1025445106 莊淑芳

1025445148
http://mepopedia.com/~web103-a/hw02/hw02-1025445148

1.製作主題 Afternoon tea
2.欲呈現之配色風格: 暖色系
3..有無遇到的問題? 配色的問題
4.製作感想
要再多花點時間熟練一下

http://mepopedia.com/~web103-a/hw02/hw02-1025445148

1.製作主題 :Afternoon tea
2.欲呈現之配色風格: 暖色
3..有無遇到的問題? 配色
4.製作感想 :需在熟練一些



Edited 1 time(s). Last edit at 11/04/2014 07:49PM by 盧姿穎.
(編輯記錄)

http://mepopedia.com/~web103-a/hw02/hw02-1025445160/

1.介紹一部電影
2.用較柔美的顏色呈現 有溫暖的感覺
3.覺得程式碼越加越多 要很仔細 不然會亂掉
4.製作網頁不是件簡單的事 佩服把網頁做得很棒的人

1025445160吳羽筑

http://mepopedia.com/~web103-a/hw02/hw02-1025445187/
(2).請回答以下問題:
1.製作主題 小時候胖長大更胖!青春期過重 八成機率長大更癡肥
2.欲呈現之配色風格: 藍綠
3..有無遇到的問題? 無法置中
4.製作感想 有點困難

http://mepopedia.com/~web103-a/hw02/hw02-1025445181/

1.製作主題 : 愛迪達
2.欲呈現之配色風格:黑白呈現
3. 不知道怎麼用很多色塊
4.網頁製作有點困難

http://mepopedia.com/~web103-a/hw02/hw02-1025445202/

1.貳樓餐廳
2.暖色系讓人有食慾得感覺
3.程式碼很難寫
4.製作過程要細心每個步驟

http://mepopedia.com/~web103-a/hw02/hw02-1025445115

1.製作主題 指甲彩繪
2.欲呈現之配色風格: 亮色對比
3..有無遇到的問題? 基本上沒有,
4.製作感想
比上次的好做,可能是因為只做一頁,棒棒!!



Edited 1 time(s). Last edit at 11/05/2014 09:13AM by 1025445115.
(編輯記錄)

http://mepopedia.com/~web103-a/hw02/hw02-1025445079/

1.製作主題
星盤

2.欲呈現之配色風格
有點神祕奇幻的感覺

3..有無遇到的問題
每次開檔案都有問題 嗚嗚

4.製作感想
一開始都做很快
都困在一些開檔案的小地方

http://mepopedia.com/~web103-a/hw02/hw02-1025445037

1.製作主題:神魔之塔

2.欲呈現之配色風格:粉色系

3..有無遇到的問題? 有點記不太起來

4.製作感想:希望愈做愈熟悉

1025445037 莊曜丞



Edited 1 time(s). Last edit at 11/07/2014 06:30AM by 1025445037.
(編輯記錄)

(1).作業網址
http://mepopedia.com/~web103-a/hw02/hw02-1025445169

(2).請回答以下問題:
1.製作主題 Oggy and the cockroaches
2.欲呈現之配色風格: 其卡通配色
3..有無遇到的問題? 覺得色塊困難
4.製作感想
看到最後有點亂

http://mepopedia.com/~web103-a/hw02/hw02-1025445097

1.製作主題:50嵐飲料店
2.欲呈現之配色風格:本店的主題色
3..有無遇到的問題?:語法複雜麻煩
4.製作感想 : 很有趣但是要記很多東西

http://mepopedia.com/~web103-a/hw02/hw02-1025445085

1.製作主題 :介紹電影
2.欲呈現之配色風格:用鮮豔跟強烈的色系呈現 有熱血的感覺
3.有無遇到的問題: 這是我第一次做網頁設計,覺得網頁碼一堆非常亂,自己打上去的東西還會看不懂,少輸入一個東西就連不上去了!幸好有老師、學姐、同學幫我,不然我一定死在電腦桌上。
4.製作感想 : 一定要很細心,而且要神智清醒,不然會連自己都不知道自己在做什麼,學到了一樣東西,滿開心的~

1025445085 楊婷淵



Edited 1 time(s). Last edit at 11/10/2014 09:10AM by 1025445085.
(編輯記錄)

(1).作業網址 http://mepopedia.com/~web103-a/hw02/hw02-1025445139/
(2).請回答以下問題:
1.製作主題 瑞斯德魔法學園-介紹
2.欲呈現之配色風格: 灰階
3..有無遇到的問題? 老樣子編碼,然後終於能上傳了,真是可喜可賀…
4.製作感想 嗯,這種作法的網站還算…簡單吧。

1025445139 呂鍰慈

http://mepopedia.com/~web103-a/hw02/hw02-1025445100
製作主題:巴黎女人購物。黃金法則
欲呈現之配色風格:沉著優雅的裸色系
有無遇到的問題:老師講解的很清楚,講義也很實用,沒有問題
製作感想:收集喜歡的題材作內容的過程很愉快,網站色調也是依照內容搭配,都是熱愛的事物所以覺得很有趣開心。

1025445100 葉芳羽

http://mepopedia.com/~web103-a/hw02/hw02-1025445214
1.製作主題:歌曲呈現
2.欲呈現之配色風格:較灰階
3.有無遇到問題:一直無法上傳
4.製作時間: 3HR

視傳二A1025445214蘇子玲

(1).作業網址:http://mepopedia.com/~web103-a/hw02/hw02-1005445196

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

1.製作主題:與巧克力相關
2.欲呈現之配色風格:咖啡色系與黑色系
3..有無遇到的問題? 遇到很多問題 也重做好幾次
4.製作感想:覺得看是很簡單 卻因為小細節而出了很多差錯

1005445196張靜怡

http://mepopedia.com/~web103-a/hw02/hw02-1025445127/

1.製作主題 :Levis
2.欲呈現之配色風格: 藍色為主
3..有無遇到的問題:配色
4.製作感想 :需在再多練習

1025445127 王嘉瑜



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

(1).作業網址 http://mepopedia.com/~web103-a/hw02/hw02-1025445076/

(2).請回答以下問題:
1.製作主題 :和茗抹茶甘味處
2.欲呈現之配色風格: 抹茶為主的綠色
3..有無遇到的問題? 底色不太會用 需靠老師語法
4.製作感想 :還有很多不太會的.要慢慢研究


1025445076 葉珈妤

(1).作業網址
http://mepopedia.com/~web103-a/hw02/hw02-1025445190


1.製作主題 DNF小介紹
2.欲呈現之配色風格: 白
3..有無遇到的問題? 配色 內容
4.製作感想 不太知道要做什麼得以表現


1025445190

(1).作業網址: http://mepopedia.com/~web103-a/hw02/hw02-1025445082/

(2).請回答以下問題:
1.製作主題:俄羅斯藍貓
2.欲呈現之配色風格:冷色調
3.有無遇到的問題:由時會忘記區塊位子。(改顏色的時候)
4.製作感想:不難但也不簡單。