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

Advanced

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

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



1. [color=#663300]一、製作說明:[/color]



1.請參考 [url=http://mepopedia.com/forum/read.php?804,16481][講義] 利用Div標籤與CSS建立基本單欄網頁版型--以單純色塊為例[/url]
的步驟製作

2.每個同學記得在[color=#990033]title的部分打上"視傳一A-學號-以色塊建構的網頁單欄排版"[/color]

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

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

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

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

[color=#CC0000](1)DIV與CSS的設定
(2)利用單純色彩搭配與字體設定設計出具有質感的網頁[/color]




2. [color=#663300]二、繳交作業方式[/color]



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

[color=#669900]第二個作業FTP上的資料夾為:hw02

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

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

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


2.上傳至FTP

3.回覆本篇文章

(1).作業網址

(2).請回答以下問題:
1.配色風格設定:
2.有無遇到的問題?
3.製作感想
4.製作作業的時間

4.請務必在下次上課前回覆,否則為遲交



===========================================
[color=#CC0066]若經發現作業為直接複製同學檔案以零分計[/color]
===========================================
本週補充講義:
[color=#330066]1.網站設計解析
2.實做第一個網頁
3.利用 CSS 與 Div 標籤建立網頁版型[/color]

[color=#006600]以上PDF講義請至學生系統下載
http://192.192.78.86/student_portal/[/color]
===========================================



Edited 2 time(s). Last edit at 10/12/2011 10:53AM by JinJin.
(編輯記錄)

作業網址 : http://mepopedia.com/~web100a/hw02/hw02-1001445052

1.配色風格設定:選用奇幻華麗的紫色系風格!!!襯托出視覺的幻境!!!
2.有無遇到的問題:
3.製作感想: step by step 很輕鬆!!!
4.製作作業的時間:上課所需時間!!!

MEPOERs said:
JinJin: #content和#footer要記得設padding喔!
http://mepopedia.com/~web100a/hw02/hw02-1001445082


1.配色風格設定:ˇ背景大部分顏色採用咖啡色系列!!!!呈現古典低調風,再以大紅色提醒標題!!!呈現鮮艷視覺,
呈現對比!!!
2.有無遇到的問題?
沒有什麼太大問題
3.製作感想
顏色真的不知道要該怎麼配!!!當時很苦惱這個問題!!
4.製作作業的時間 一直不小心失敗從做氣氣氣))!!最後一次真正做完!!!花了我1小時的時間!!!
有時候覺得很好玩!!!
有時候很==smiling bouncing smiley

1.配色風格設定:藍色系
2.有無遇到的問題? 研究很久
3.製作感想 終於學會了!過程中有點卡卡的,不過還是完成了
4.製作作業的時間 一天



Edited 1 time(s). Last edit at 11/02/2011 09:26PM by 張雍雍.
(編輯記錄)

http://mepopedia.com/~web100a/hw02/hw02-1001445074/
1.配色風格設定:藍色系
2.有無遇到的問題? 基本上課堂做好沒有大問題
3.製作感想: 了解另一種作法簡單的讓網頁添豐富感
4.製作作業的時間:課堂+家中改字10分鐘很快

一. http://mepopedia.com/~web100a/hw02/hw02-1001445096
二.
1.配色風格設定:暖色系典雅華麗新藝術,運用對比底色暗(紫)主題暖色(黃、橘)配色。
2.有無遇到的問題:無
3.製作感想:做出來很有成就感,感覺就像擁有屬於自己的一個網頁了,跟作業01比起來更有質感。
4.製作作業的時間:課堂製作之外,家中更改及配色1小時(左右),按照步驟沒大問題。

http://mepopedia.com/~web100a/hw02/hw02-1001445015/

1.配色風格設定:主要是以粉色系為主。
2.有無遇到的問題: 無
3.製作感想:感覺很棒,按照老師的步驟自己在想一下就能輕易上手。
4.製作作業的時間:回家做大概不用一個小時。

MEPOERs said:
HP: 作得不錯哦。整個風格很明顯!
JinJin: 網頁內容跟配色感覺有用心搭配~風格明確!也用了dashed線段的做法~增加活潑感!很不錯!
(1)
http://mepopedia.com/~web100a/hw02/hw02-1001445021

(2)
1.配色風格設定:藍色調,明視度以不傷眼為主。
2.有無遇到的問題:目前沒有。
3.製作感想:感覺比第一次好很多,還在持續摸索中。
4.製作作業的時間:1~2小時左右。

MEPOERs said:
JinJin: 網頁內容跟配色感覺有用心搭配~不錯!
(1).作業網址 : http://mepopedia.com/~web100a/hw02/hw02-1001445118/


(2).請回答以下問題

Q1.配色風格設定:
A: [color=#CC0000]灰階,無彩色,雖然沒有色彩少了點活力,但多了份設計感!![/color]

Q2.有無遇到的問題?
A: [color=#CC0000]當然有,想請問一下可否讓所有的文字(不只是版面)在畫面居中?[/color]

Q3.製作感想
A: [color=#CC0000]還蠻有成就感的,哈哈[/color]

Q4.製作作業的時間
A: [color=#CC0000]沒特別去算耶,1個多小時差不多,研究內容和配色花了不少時間eye rolling smiley[/color]



ps:Thank you teacher,不過我後來發現還是不要居中比較好看XD

剛剛又做了一些微調,麻煩老師再看一次囉tongue sticking out smiley



Edited 1 time(s). Last edit at 10/16/2011 06:44PM by 連竟成.
(編輯記錄)

MEPOERs said:
JinJin: 只要加入 text-align:center; 的語法即可居中,如要內文居中就加在#content裡
JinJin: good!!我覺得簡單的配色~但有做出質感~蠻好的!
(1).作業網址 http://mepopedia.com/~web100a/hw02/hw02-1001445098

(2).請回答以下問題:
1.配色風格設定:以熱情洋溢的紅色色調做出搭配 。
2.有無遇到的問題:無。
3.製作感想:感覺更有做出一個專業網站的信心,難度也越來越難,希望可以更吸收每一步驟。
4.製作作業的時間:在上課的時間完成。



Edited 1 time(s). Last edit at 10/16/2011 05:45PM by 0零零0.
(編輯記錄)

(1).作業網址 http://mepopedia.com/~web100a/hw02/hw02-1001445001/

(2).請回答以下問題:
1.配色風格設定: 優雅紫色
2.有無遇到的問題? 無
3.製作感想 好難記得語法
4.製作作業的時間 十分鐘+上課時間

(1).作業網址 http://mepopedia.com/~web100a/hw02/hw02-1001445066/

(2).請回答以下問題:
1.配色風格設定: 改成紫色+原本的藍色調
2.有無遇到的問題? 沒有smiling smiley
3.製作感想 感覺上雖然很難,都是密密麻麻的文字,但是懂得那些規律後改起來就很順!
4.製作作業的時間 約半小時

作業網址:http://mepopedia.com/~web100a/hw02/hw02-1001445013

1.配色風格設定:黃色系
2.有無遇到的問題:目前沒有問題
3.製作感想:能了解不同網頁作法,感覺很好
4.製作作業的時間:課堂上課時間+家中1小時半練習

(1).作業網址
http://mepopedia.com/~web100a/hw02/hw02-9911445068/

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

1.配色風格設定: 橘色 暖色系

2.有無遇到的問題? 還好 調整配色道是弄很久

3.製作感想 滿有趣的 但是看到英文字就有點眼花.........(純屬個人英文不好)

4.製作作業的時間 大約1個小時

MEPOERs said:
JinJin: 沒有看到你的作業喔!麻煩再重新上傳喔
作頁網址:http://mepopedia.com/~web100a/hw02/hw02-1001445056/
1.配色風格設定:童趣 藍綠色橘粉搭配
2.有無遇到的問題? 還好,還需要時間熟悉
3.製作感想:感覺有一點小複雜,但自己做出來還滿有成就感的
4.製作作業的時間:上課時間加上在家半個小時



Edited 1 time(s). Last edit at 10/17/2011 10:59PM by 1001445056.
(編輯記錄)

回覆文章

(1).作業網址
http://mepopedia.com/~web100a/hw02/hw02-1001445050

(2).請回答以下問題:
1.配色風格設定: A:神秘紫色風 =]
2.有無遇到的問題? A:沒有噢
3.製作感想 A: OK的
4.製作作業的時間 A:20分鐘

http://mepopedia.com/~web100a/hw02/hw02-1001445007

1.配色風格設定: 寶藍色的華麗外表襯托出粉色柔弱內心
2.有無遇到的問題? 就只是步驟很麻煩XD
3.製作感想 知道是知道語法的意義,但是要把整個做好超麻煩.......
4.製作作業的時間 兩節課+2個小時配色+塞內容

作業網址 http://mepopedia.com/~web100a/hw02/hw02-1001445068/

1.配色風格設定:我喜歡黑色和紅色系的搭配 很繽紛潮流的感覺
2.有無遇到的問題: 無
3.製作感想: 跟著講義上做OK!!
4.製作作業的時間:大概一小時



Edited 1 time(s). Last edit at 10/18/2011 12:13AM by enjoyad920.
(編輯記錄)

作業網址 :http://mepopedia.com/~web100a/hw02/hw02-1001001445011



1.配色風格設定: 很酷的顏色哈哈
2.有無遇到的問題? FileZilla無法連上去@@所以無法上傳@@
3.製作感想 :好難喔
4.製作作業的時間 :很多時間@@

作業網址:http://mepopedia.com/~web100a/hw02/hw02-1001445078

1.配色風格設定: 各種色系都有 要有色彩鮮豔繽紛的感覺
2.有無遇到的問題? 沒有
3.製作感想: 終於可以自己做出一個有點樣子的網頁!!!!! spinning smiley sticking its tongue out
4.製作作業的時間:2小時

(1).作業網址:這個作業的網址則為:http://mepopedia.com/~web100a/hw02/hw02-1001445003



(2).請回答以下問題:
1.配色風格設定:沉穩憂鬱
2.有無遇到的問題:無
3.製作感想:網頁設計真的很奇妙也很難
4.製作作業的時間:2hr

(1).作業網址
http://mepopedia.com/~web100a/hw02/hw02-1001445072

(2).請回答以下問題:
1.配色風格設定:可愛活潑粉色系
2.有無遇到的問題? :無
3.製作感想:一時要記好多語法有點難消化
4.製作作業的時間:上課時間

作業的網址則為:http://mepopedia.com/~web100a/hw02/hw02-1001445037

1.配色風格設定:斯卡曲風

2.有無遇到的問題?: 大致OK~

3.製作感想: 還蠻酷的>grinning smiley<

4.製作作業的時間 :23分48秒(不包含上課)

這是什麼?=>hot smiley

MEPOERs said:
HP: 你也太酷了吧。還真得拿了碼錶算時間,還有算到秒數。
http://mepopedia.com/~web100a/hw02/hw02-1001445019/

1.配色風格設定:以黑為底,暖色系
2.有無遇到的問題:NO
3.製作感想:覺得有比上一次好,不過作業說得有點不清楚
4.製作作業的時間: 1~2小時

(1).作業網址 http://mepopedia.com/~web100a/hw02/hw02-1001445124/

(2).請回答以下問題:
1.配色風格設定: 紅色系為主。
2.有無遇到的問題? ((語法記不住!))可從美寶上講義解決。
3.製作感想 語法記不住!複製貼上再修改!可否?smiling bouncing smiley
4.製作作業的時間 上課時間;在家時間約莫30~40分鐘

MEPOERs said:
JinJin: OK啊!覺得不好記是正常的,可以複製修改,主要讀得懂語法的意義更重要!
作業網址:http://mepopedia.com/~web100a/hw02/hw02-1001445086

1.配色風格設定:活潑的紅黃橘色系
2.有無遇到的問題:下載軟體好久QAQ
3.製作感想:網頁設計只要一步一步做挺好的 smiling smiley
4.製作作業的時間:課堂上課時間和家中1小時左右~

作業網址 : http://mepopedia.com/~web100a/hw02/hw02-1001445062

1.配色風格設定:配色方面都是以我自己所喜歡的顏色所配製而成的,所表現的風格應該是比較個性,又另一種特別的視覺效果
2.有無遇到的問題: 大致上還行!
3.製作感想: 又多學了一種網頁設計的方法還不錯
4.製作作業的時間:上課時間+20分鐘回家修改

MEPOERs said:
JinJin: 你的首頁取成idex.html,要改為index.html 喔
(1).作業網址:http://mepopedia.com/~web100a/hw02/hw02-1001445084

(2).請回答以下問題:
1.配色風格設定:黃紫互補色系
2.有無遇到的問題:無
3.製作感想:比第一次的成果還要更完整了,做完後感覺很好 grinning smiley
4.製作作業的時間: 1-2小時

MEPOERs said:
JinJin: 不錯喔!
HP: 的確,用白色的邊很有創意。網頁彷彿有了立體感。
http://mepopedia.com/~web100a/hw02/hw02-1001445005


1.配色風格設定: 我是以我看起來比較舒服的藍色為主
2.有無遇到的問題? 目前都還好
3.製作感想 :開始有點小困難了,但能夠學會製作網站還蠻開心的
4.製作作業的時間 :上課時老師一邊教我一邊做

MEPOERs said:
JinJin: 內文的反白和底色藍的明度過於接近,因此讀來有些吃力,可再修改!加油喔!
http://mepopedia.com/~web100a/hw02/hw02-1001445129

以黑灰白無彩度風格
有!請問如何更改字體顏色?不是非常熟練
網頁設計非常的有趣.只是需要長時間練習
上課時候+一小時半

MEPOERs said:
JinJin: 確認一下是否有上傳成功喔?
http://mepopedia.com/~web100a/hw02/hw02-1001445132
1.配色風格設定:糖果色
2.有無遇到的問題? 無
3.製作感想 語法一堆看到眼睛快花了但是做出來看到成果就很棒
4.製作作業的時間 跟著老師在課堂上的進度,回家露在修一修 大概2堂課多一點thumbs up

MEPOERs said:
JinJin: 加入padding會更好喔
http://mepopedia.com/~web100a/hw02/hw02-1001445039/

1.配色風格設定: 粉紅色系
2.有無遇到的問題? 沒有問題
3.製作感想 沒有感想
4.製作作業的時間 一個時辰

C:\Documents and Settings\zh\桌面\hw02-1001445126\index.html
佩色:灰與黑的暗色調 但自是白色設提高明示度
問題:......怎麼把網址換好一點的....
製作感想:還不錯 但有點小難
時間:課堂上跟著做+自己看講義

MEPOERs said:
JinJin: 你的網址應該是這個喔: http://mepopedia.com/~web100a/hw02/hw02-1001445126/
http://mepopedia.com/~web100a/hw02/hw02-1001445058/
1.配色風格設定:大地色
2.有無遇到的問題? 沒有
3.製作感想: 做出來很有成就感
4.製作作業的時間:課堂加上回家配色

(1).作業網址

http://mepopedia.com/~web100a/hw02/hw02-1001445076/

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

1.配色風格設定:綠色系

2.有無遇到的問題? 上課仔細聽老師講,馬上跟著做不太有問題,但是顏色配色需要一些時間

3.製作感想 感覺很酷沒想到能作出這樣,但是那些程式碼還是得用複製貼上,一下子沒辦法背完這麼多

4.製作作業的時間 回家自己大概又花了40分鐘,大部分的時間都是在調字一行一行的距離,還有配色

MEPOERs said:
JinJin: 配得還不錯!
JinJin: 配色還不錯!
作業網址:http://mepopedia.com/~web100a/hw02/hw02-1001445092

1.配色風格設定:藍色系
2.有無遇到的問題:上面不知道為什麼多了一大個色塊><
3.製作感想 :我正在慢慢的和網頁變成好朋友
4.製作作業的時間: 3hr

MEPOERs said:
JinJin: 你檢查一下你的程式碼,在之前多了好幾個DIV
http://mepopedia.com/~web100a/hw02/hw02-1001445129

以黑灰白無彩度為風格!
文字字型改變與顏色改變有些小問題
需要花更多間練習
上課+2小時半

http://mepopedia.com/~web100a/hw02/hw02-1001445080/


1.配色風格設定: 橘紅色系加上小部分綠色增加些視覺小刺激~
2.有無遇到的問題: 目前沒有耶~
3.製作感想: OK啦~ 不過感覺好複雜 ....
4.製作作業的時間: 1~2小時

(1)作業網址:http://mepopedia.com/~web100a/hw02/hw02-1001445130

(2).請回答以下問題:
1.配色風格設定:粉紅色和咖啡色同是暖色系 許多衣服或飾品之類的會如此搭配 有典雅感覺 而黃色也是暖色系 可在咖啡色中脫穎而出
2.有無遇到的問題? 我的adobe dreamweaver cs5一直跳出序號不正確 明明就填過很多次了...然後檔案改變也無法進行儲存
3.製作感想:覺得開始有做正式網頁的感覺了 但若要自己親手打出各類編碼還是有很大的困難= = 只記得幾個
4.製作作業的時間:盡量在上課時間完成 回家則做修改

(1).作業網址 : http://mepopedia.com/~web100a/hw02/hw02-1001445102/

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

配色風格設定: 以暗色調介紹手塚治虫,顯得大師其穩重及地位
有無遇到的問題: 邊框的小問題,經過修改後無礙
製作感想: 很高興參予學習生涯第一個網頁製作,頗具成就感
製作作業的時間: 約1小時

作業網址 :http://mepopedia.com/~web100a/hw02/hw02-1001445090

1.配色風格設定:藍色簡約風
2.有無遇到的問題 : 無
3.製作感想 : 有些困難但解決了
4.製作作業的時間 : 一個半小時

(1).作業網址
http://mepopedia.com/~web100a/hw02/hw02-1001445128

(2).請回答以下問題:
1.配色風格設定:乾淨 舒服
2.有無遇到的問題? 無
3.製作感想:一切安好
4.製作作業的時間: 上課時間 上傳時間2小時

MEPOERs said:
JinJin: 內文還是要設padding會比較好喔!
(1). http://mepopedia.com/~web100a/hw02/hw02-1001445009

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

1.配色風格設定:粉紅色系 將網頁打亮

2.有無遇到的問題:沒有

3.製作感想:色塊的網頁很簡單容易操作 成品也很有質感smiling smiley)

4.製作作業的時間:1小時

MEPOERs said:
JinJin: 清爽的風格!
1:綠色草原系!
2:沒問題
3:2小時
http://mepopedia.com/~web100a/hw02/hw02-1001445106

MEPOERs said:
mepoadm: 同學你的 <!DOCTYPE html> 寫了二次,「學號」也多寫了一次。另外,網頁最開始的 <!DOCTYPE html> 前不可以有「空白行」哦,請特別注意!
http://mepopedia.com/~web100b/hw02/hw02-1001445105

1.配色風格設定: 不知道了... 前衛古典..吧?
2.有無遇到的問題: 一開始做好的內容消失不見...
3.製作感想: 內容消失很煩~
4.製作作業的時間: 15分鐘

(1).作業網址 http://mepopedia.com/~web100a/hw02/hw02-1001445060/

(2).請回答以下問題:
1.配色風格設定: 黑白簡約
2.有無遇到的問題? 無
3.製作感想 好多語法需要記
4.製作作業的時間 上課時間

(1).作業網址
http://mepopedia.com/~web100a/hw02/hw02-1001445122/

(2).請回答以下問題:
1.配色風格設定:
考慮主題此用黑白冷調簡約風
2.有無遇到的問題?
沒有喔
3.製作感想
對不起我太晚上傳了(不
更了解網頁的語法以及相對應的關係!
4.製作作業的時間
40分鐘

(1).作業網址 http://mepopedia.com/~web100a/hw02/hw02-1001445033

(2).請回答以下問題:
1.配色風格設定:藍色 。
2.有無遇到的問題:無。
3.製作感想:感覺更有做出一個專業網站的信心,難度也越來越難,希望可以更吸收每一步驟。
4.製作作業的時間:在上課的時間完成。

作業網址: http://mepopedia.com/~web100a/hw02/hw02-9711445035

(1).作業網址
C:\Users\user\Desktop\hw02-1001445041\index.html

(2).請回答以下問題:
1.配色風格設定: 沿用教學配色
2.有無遇到的問題?
老師教的步驟,讓我很安心
3.製作感想
我該多花點心思努力的學網頁才是...
4.製作作業的時間
花了一小時半到兩小時的時間完成