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的部分打上"視傳一B-學號-以色塊建構的網頁單欄排版"[/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/~web100b/hw02/hw02-100xxxxxxx

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

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


2.上傳至FTP

3.回覆本篇文章

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 1 time(s). Last edit at 10/12/2011 06:29PM by JinJin.
(編輯記錄)

完成嚕

花嚕大約2小時巴
以下是網址唷
http://mepopedia.com/~web100b/hw02/hw02-1001445051/

★遇到難題嗎
因該說 不太會用音樂與法 還有樣是不會用比較複雜 : '<
希望可以快點學到更多 smiling smiley))

MEPOERs said:
HP: 我看了一下你的原始碼。有一個建議。建議可以把 body 的設定放在 css 裡面,不要直接寫在HTML裡 (你有設背景圖片)。這樣以後網頁多了,就不用一直在不同的網頁(HTML)裡面修改。
http://mepopedia.com/~web100b/hw02/hw02-1001445004/
在上課間完成,沒有什麼困難
因為沒有修改程式所以沒有修改
風格利用對比色

MEPOERs said:
JinJin: #footer的部分字略顯大~且要記得設定padding~
http://mepopedia.com/~web100b/hw02/hw02-1001445113

1.配色風格設定:藍綠色~~~
2.有無遇到的問題? 無
3.製作感想:家裡沒軟體所以沒改內容:-(
4.製作作業的時間:上課時做完

http://mepopedia.com/~web100b/hw02/hw02-1001445055
配色由我的主題-艾薇兒的搖滾風 搭配
大約花費3個小時
困難 上課的時候很多
因為電腦一直顯示不出來我改好的樣子
回家有解決了smiling smiley

MEPOERs said:
JinJin: 你的意思ˋ上課的時候還覺得很困難嗎?不過現在呈現出的效果和配色不錯喔!
http://mepopedia.com/~web100b/hw02/hw02-1001445049/

以日本北海道薰衣草為主軸發展之紫色系配色風格

製作時間約3小時多

自己找製作的網頁內容比較費時 主題思考了很久才想到要做什麼

MEPOERs said:
HP: 整個畫面會不會太紫了啊?要不要加一些輔色呢?
http://mepopedia.com/~web100b/hw02/hw02-1001445067

上課加上半小時

http://mepopedia.com/~web100b/hw02/hw02-1001445010/

以KAWASAKI的大忍者這款重機為主題
沒啥問題 大概2小時完成
該用什麼主題想太久 ~~
不然其實還滿簡單的啦

http://mepopedia.com/~web100b/hw02/hw02-1001445119/
風格鮮豔色彩混搭
困難地方 就是沒那軟體ˊˋ""在家不能做
做作業花了兩節課

MEPOERs said:
HP: 其實沒有Dreamweaver用「純文字」的方式也可以作哦!
http://mepopedia.com/~web100b/hw02/hw02-1001445032

共費時4小時多

以日本動畫為主題的網頁,配色方面則是以主角服裝的配色為主

遇到的問題是:原本想設置一音樂播放器,但播放器的位置卻會跑到網頁左上角,而不在原本的地方

最後為了美觀只好將播放器隱藏

PS: IE 9似乎聽不到音樂......

同學你好:

我注意到你的網頁裡面使用了非常多的進階語法,而且裡面有許多 CSS3 的語法。CSS3 的語法的好處是很好用而且功能很強,但缺點就是其實最多人使用的瀏覽器以及版本(IE6~IE8)基本上是不支援的。所以,你可以找一個 IE8 的瀏覽器看一看你的網頁,你可以發現有幾個地方有很大的不一樣。

嗯,我想我直接作個截圖好了:

左邊的是 Chrome14 的效果,右邊的是 IE8。

 


細節就不提了。我想最明顯的差異主要是「#header 背景圖的大小」和「#content 背景透明度」(在IE中背景沒有任何透明度)。

其實這二個問題不好解,我現在也沒什麼時間幫你試。我大致和你提我的看法與建議。

1. 背景圖的大小 (background-size)

「background-size」是 CSS3 才有的進階語法。在這個網頁你找一下可以看到,background-size 一直到 IE9 才支援,目前最多人用的 IE8 (和之前的IE版本) 都沒有。因為沒有支援,所以就會看到目前這樣很大的差異(不過我覺得其實目前IE8的這個樣子也滿有意思的,一般人應該不會覺得有問題)。

我建議可以試著把背景拿出來放到 #header 裡面用 <img> 裡面再加個 align=right 的方式去寫。要微調位置的話再加些 margin-top 或 margin-left 就可以了。不過我沒有試,也不確定效果怎麼樣。要特別注意的是,我的經驗是 <img> 要寫在 <h1> 之前,這樣圖片才會置右,不然就會等 <h1> 的標題文字都寫完了才會出現圖片。

我寫個示意原始碼好了(不過不保證有效果):
<div id="header"> <img align="right" src="網址" width="270"/> <h1>銀魂</h1> 空知英秋的少年漫畫作品,在《週刊少年Jump》2004年2號開始連載。 </div>
2. 背景透明度(opacity)

這邊你也用了非常高段語法「rgba」顏色設定:把原本的設定顏色的語法 #fffff,改為在最後一個參數為設定透明度而比較進階的 rgba(255%, 255%, 255%, 0.9)。不過一樣,IE8 也是不支援。讓 IE 支援的方式是在 CSS 中加上 filter:alpha(opacity=90);。如果不透明度設為 0.9,在opacity就要寫90。

所以跨瀏覽的相容性寫法大致是這樣:
#content{
  background: rgba(255%, 255%, 255%, 0.9);
  filter:alpha(opacity=90);
  ......(其他css屬性)
}

不過這樣的話,你會發現不僅背景顏色有透明效果,連「文字」也會跟著「透明」起來。我不確定怎麼改善,但我想可能是因為不透明度是設在整個 #content,所以你在 #content 外面再加一層 div,專門設不透明度,然後 #content 裡面不要設任何背景顏色,讓背景可以整個透進來。如果你有的話,也請和我說一下試的結果。

最後,如果真得改不出來就不用改了。就改回原來的樣子,或者簡化一點不要那麼多進階功能也可以。因為要改到有很漂亮簡潔的效果,又要讓大多數的人(瀏覽器)看得到,是滿困難而需要經驗或專業的。



Edited 2 time(s). Last edit at 10/17/2011 04:27AM by HP.
(編輯記錄)

Attachments:
開啟 | 下載 - IE8-2011-10-17_031623.gif (329.1 KB)
開啟 | 下載 - Chrome14-2011-10-17_031937.gif (264.1 KB)
 作業網址:http://mepopedia.com/~web100b/hw02/hw02-9711425066/

http://mepopedia.com/~web100b/hw02/hw02-1001445061/

補交補交
好像真的被誤刪了
重新上傳之前的作業2

我做好了
但是我不會下載軟體
http://mepopedia.com/~web100b/hw02/hw02-1001445040

MEPOERs said:
JinJin: 檔案被刪了
http://mepopedia.com/~web100b/hw02/hw02-1001445075

大約花了2個多小時~

風格用和諧的相近色調配色

除了中途有小失誤讓顏色顯示不出來,

其他沒什麼大問題 smiling smiley

MEPOERs said:
JinJin: 做得不錯,但是檔案被刪了
(1).作業網址 http://mepopedia.com/~web100b/hw02/hw02-1001445042/

(2).請回答以下問題:
1.配色風格設定:古典穩重的風格。

2.有無遇到的問題? :沒有甚麼太大問題。

3.製作感想: 很有趣,期待自己在期中作業能做出一個漂亮的網頁。

4.製作作業的時間 :上課時間完成。

MEPOERs said:
JinJin: 我也期待你的作品喔!
http://mepopedia.com/~web100b/hw02/hw02-1001445063



1.我配色的風格偏重暖色系,因為想要介紹的人物總是帶給人們活力陽光的形象
2.放入圖片與音樂較不熟,不懂得如何運用
3.藉由此作業不但讓我再次復習上課所學的語法,也能訓練配色能力
4.兩小時

MEPOERs said:
JinJin: 有自己的想法,但是檔案也被刪了!
陳醬子: 我已經在上傳一次囉~~
-



作業網址: http://mepopedia.com/~web100b/hw02/hw02-1001445022


請回答以下問題:
 1. 配色風格設定:暖色系的搭配,舒服不刺激眼睛為主
 2. 有無遇到的問題: 無
 3. 製作感想:能夠利用 CSS 和 DIV 寫網頁感到很開心
 4. 製作作業的時間:一個多小時



-

MEPOERs said:
hughero1314: 被人刪掉 , 重新上傳過
JinJin: OK!也配的不錯喔!
http://mepopedia.com/~web100b/hw02/hw02-1001445008

大概也是花2小時 smiling smiley

顏色都是亮色系的 沒有遇到什麼問題 做網頁很好玩 ...

MEPOERs said:
JinJin: 蠻有趣的配色,但是檔案也被刪了!
http://mepopedia.com/~web100b/hw02/hw02-1001445024

1.配色風格設定:好天氣
2.有無遇到的問題? 無
3.製作感想:對網頁架構有初步的認識
4.製作作業的時間:三小時

http://mepopedia.com/~web100b/hw02/hw02-1001445026/

1.配色風格設定:藍色

2.有無遇到的問題? 無

3.製作感想:網站語法有熟悉一點

4.製作作業的時間:兩節課,因為沒有軟體所以沒有改內容直接傳

MEPOERs said:
JinJin: 其實也可以用記事本或notepade 改喔!
JinJin: 檔案也被刪了!
1.......我忘記怎麼傳了...上課在交給老師...(已交http://mepopedia.com/~web100b/hw02/hw02-1001445034/)

2.冷灰色系,想呈現寂寥的感覺。

3.很迫不及待想要接下去學

4.兩節課做出大概(兩節課),回家在改(約25分)。
(......扣掉找圖示的時間......)



Edited 1 time(s). Last edit at 10/19/2011 01:08PM by 傀.
(編輯記錄)

MEPOERs said:
JinJin: 不過還是得學會怎麼傳喔!
http://mepopedia.com/~web100b/hw02/hw02-1001445030


以粉色系為主,有甜甜戀情的感覺

感覺有些地方更改顏色的位子,有點會搞混:)

還在練習狀態xD

大概快2H

MEPOERs said:
JinJin: OK!,但是檔案也被刪了!
http://mepopedia.com/~web100b/hw02/hw02-1001445123/

1.配色風格設定:地中海 自然舒服的風格
2.有無遇到的問題?
為什麼背景音樂出不來?
3.製作感想:覺得製作網頁很好玩 希望能多學一點!!
4.製作作業的時間 :大約兩小時

MEPOERs said:
JinJin: 檔案也被刪了,麻煩重傳喔!
http://mepopedia.com/~web100b/hw02/hw02-1001445057/

1.配色風格設定:橘色系
2.有無遇到的問題? 家裡面沒有軟體,想嘗試放圖片可是覺得有點複雜就沒放了
3.製作感想:有點單調,想加點什麼卻不知道如何加
4.製作作業的時間:上課時做完

MEPOERs said:
JinJin: 檔案也被刪了!
(1).作業網址 http://mepopedia.com/~web100b/hw02/hw02-1001445115/

(2).請回答以下問題:
1.配色風格設定:因為原本配色跟我想要的感覺接近所以沒改了。

2.有無遇到的問題? :突然忘記記事本要存成什麼檔了。

3.製作感想: 很有成就感,以後想自己設計出屬於自己的網站,而不是用別人名下的部落格。

4.製作作業的時間 :回家完成,共花了1個半小時。

MEPOERs said:
JinJin: 記事本跟dreamweaver副檔名一樣,看要存成.html或.css
JinJin: 還不錯,,但是檔案也被刪了!
http://mepopedia.com/~web100b/hw02/hw02-1001445047

1.配色風格設定:暖粉色系
2.有無遇到的問題? 我在Dreamweaver上看起來是正常的,但放在網路上看卻只有單一顏色 sad smiley
3.製作感想: 正著了解每個細節
4.製作作業的時間:3小時



Edited 1 time(s). Last edit at 10/18/2011 11:20PM by s930335w.
(編輯記錄)

MEPOERs said:
JinJin: 解答在下篇,,但是你的檔案也被刪了!
同學 s930335w 你好:

我看了你的原始碼,我發現應該是 css 檔(style.css)裡面一開始的 body 設定的後大括號不見了(就是 } )。你找一下應該就會發現。希望你知道我的意思。

啊,我想我直接貼出來給你應該會更清楚。

你的版本:

body{margin:0px;
        background-color:#FC9;

加上大括號的正確版本:

body{margin:0px;
        background-color:#FC9;
}


這樣你知道我的意思了嗎?



Edited 1 time(s). Last edit at 10/19/2011 01:10AM by HP.
(編輯記錄)

http://mepopedia.com/~web100b/hw02/hw02-1001445083/

1.配色風格設定: 糖果色
2.有無遇到的問題? 沒有
3.製作感想 第一次製作自己的網頁還有許多生疏之處,
4.製作作業的時間 三小時

MEPOERs said:
HP: 加油,加油!作得不錯。風格很有「美白」的感覺哦。
作業網址 http://mepopedia.com/~web100b/hw02/hw02-1001445006/

1.配色風格設定:民族風吧

2.有無遇到的問題? :家裡沒DW

3.製作感想: 超喜歡的阿,想學更多更多更多更多更多啦!!!!

4.製作作業的時間 :上課時間完成

老師對不起~我家沒軟體所以沒改內容

MEPOERs said:
JinJin: 配色還不錯耶!其實記事本和notepad 也可以些改呀!
http://mepopedia.com/~web100b/hw02/hw02-1001445045/
大致完成時間是兩個小時
配色主要以灰色為主
這次做得很順利
謝謝老師!

MEPOERs said:
JinJin: 檔案也被刪了,麻煩再重傳喔!
http://mepopedia.com/~web100b/hw02/hw02-1001445036/
1.配色風格設定 亮色系為主
2.有無遇到的問題 製作網頁沒問題
3.製作感想 有點麻煩
4.製作作業的時間 上課2小時



Edited 2 time(s). Last edit at 10/19/2011 01:32PM by 1001445036.
(編輯記錄)

因為幫同學傳黨 然後自己不小心傳錯檔了....

http://mepopedia.com/~web100b/hw02/hw02-1001445002


1.配色風格設定:亮色系 以配合7-11拉拉田園風

2.有無遇到的問題? 想放圖片可是不知道怎麼用 = =

3.製作感想: 做網頁很好玩 越做越順手 越有心得

4.製作作業的時間: 約1.30H 想內容想得比較久

http://mepopedia.com/~web100b/hw02/hw02-1001445069/

1.亮麗的風格~

2.沒什麼大問題.

3.很好玩=) 有學到東西^^

4.上課時間!

MEPOERs said:
JinJin: 檔案也被刪了,麻煩再重傳喔!
(1).作業網址

http://mepopedia.com/~web100b/hw02/hw02-1001445079/

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

1.配色風格設定: 紅配灰
2.有無遇到的問題? 無
3.製作感想 幫同學傳檔自己不小心傳錯檔 所以幼蟲傳一遍!
4.製作作業的時間 2hr

1.配色風格設定:隨便配
2.有無遇到的問題? 同學有教我所以還好
3.製作感想: 越來越不懂了= =
4.製作作業的時間:20分吧
網址:C:\Users\Melaleuca\Desktop\hw02-1001445099\index.html

MEPOERs said:
JinJin: 你的網址應該是http://mepopedia.com/~web100b/hw02/hw02-1001445099/
http://mepopedia.com/~web100b/hw02/hw02-1001445095
我的風格是以典雅方式來呈現
我想用圖片來輔助,可是我不太會插入圖片語法
製作時間約3小時
這次的作業讓我再次複習到網頁設計的應用smiling smiley)

MEPOERs said:
HP: 我很喜歡你的配色與風格。真得很有「典雅」的感覺。「圖片語法」老師以後會教(不過好像作業三就有了),但不用圖片而能呈現出質感與風格才是更高段的!
http://mepopedia.com/~web100b/hw02/hw02-1001445020

1.橘 紅 桃 藍
2.無
3 家裡沒軟體 所以就沒有改
4在學校完成回家上傳smiling smiley

http://mepopedia.com/~web100b/hw02/hw02-1001445107


1. 以粉色系為主 ,自然舒服的配色

2. 大致上沒什麼問題

3. 感覺越來越複雜...confused smiley

4. 上課時間完成,回家上傳

MEPOERs said:
JinJin: 檔案也被刪了,麻煩再重傳喔!
http://mepopedia.com/~web100b/hw02/hw02-1001445016/


1. 青春無敵的風格
2.沒有
3.很有成就感
4.兩小時

MEPOERs said:
JinJin: 配色蠻特別的,但是檔案被刪了
http://mepopedia.com/~web100b/hw02/hw02-1001445109
1.配色風格設定:藍色
2.有無遇到的問題:沒什麼問題
3.製作感想:因為不太熟 所以要慢慢得跟著步驟
4.製作作業的時間:上課時做完

MEPOERs said:
JinJin: 檔案也被刪了,麻煩再重傳喔!
遲來的作業02

http://mepopedia.com/~web100b/hw02/hw02-1001445012/
1.配色風格設定:綠色為主
2.有無遇到的問題? 有! 網頁點進去不是網頁 .....為什麼=(
3.製作感想 還算順利 只是上傳不OK
4.製作作業的時間 30分鐘

對不起這麼晚才留言
因為我不知道這樣可不可以貼=(((

MEPOERs said:
JinJin: 有看到你的作業!基本的設定都OK
http://mepopedia.com/~web100b/hw02/hw02-1001445067

1 以綠色為主
2 沒有太大問題
3 配色感覺比之前有趣
4 上課就完成了

blue1818 Wrote:
-------------------------------------------------------
> http://mepopedia.com/~web100b/hw02/hw02-1001445053
>
>1 藍灰色系 ~ 喜歡藍色ˇ所以這樣搭樓

2.沒有毆

3.配顏色比較有趣 而且可以調很好玩

4.上課時間內完成歐

作業網址:http://mepopedia.com/~web100b/hw02/hw02-1001445077/
1.配色風格設定: 因為是以性感團體作為文字敘述所以用較為低調的顏色
2.有無遇到的問題? : 這單元比較容易上手
3.製作感想 : 沒有問題但這單元可以鞏固很多基礎
4.製作作業的時間 : 在學校就把架構做完回家之後改內容,準時上傳但也是忘了來回應現在才補

MEPOERs said:
JinJin: 配得還不錯!
http://mepopedia.com/~web100b/hw02/hw02-9711443098/

作業網址:http://mepopedia.com/~web100b/hw02/hw02-1001445091/
1.配色風格設定: 喜歡淺淺的色系
2.有無遇到的問題: 沒有太大困難囉!
3.製作感想: 簡單的網頁設計,色塊為主,學起來不難smiling smiley
4.製作作業的時間: 大概兩堂課這樣加上回去修改約3小時多,有上傳但忘記回覆現在來補囉smiling smiley

作業網址:http://mepopedia.com/~web100b/hw02/hw02-1001445065/
1.配色風格設定: 綠色調
2.有無遇到的問題: 沒有太大困難
3.製作感想: 學了DW都忘了之前用記事本怎麼做了!!不過卻真的有幫助了解網路架構。謝謝老師的用心
4.製作作業的時間: 30分吧~~