Re: [作業02] 利用Div標籤與CSS建立基本網頁版型--以單純色塊為例
完成嚕
花嚕大約2小時巴以下是網址唷
http://mepopedia.com/~web100b/hw02/hw02-1001445051/
★遇到難題嗎
因該說 不太會用音樂與法 還有樣是不會用比較複雜 : '<
希望可以快點學到更多
))
MEPOERs said:
花嚕大約2小時巴以下是網址唷
http://mepopedia.com/~web100b/hw02/hw02-1001445051/
★遇到難題嗎
因該說 不太會用音樂與法 還有樣是不會用比較複雜 : '<
希望可以快點學到更多
))
MEPOERs said:
HP: 我看了一下你的原始碼。有一個建議。建議可以把 body 的設定放在 css 裡面，不要直接寫在HTML裡 (你有設背景圖片)。這樣以後網頁多了，就不用一直在不同的網頁(HTML)裡面修改。
http://mepopedia.com/~web100b/hw02/hw02-1001445055
配色由我的主題-艾薇兒的搖滾風 搭配
大約花費3個小時
困難 上課的時候很多
因為電腦一直顯示不出來我改好的樣子
回家有解決了
MEPOERs said:
配色由我的主題-艾薇兒的搖滾風 搭配
大約花費3個小時
困難 上課的時候很多
因為電腦一直顯示不出來我改好的樣子
回家有解決了
MEPOERs said:
JinJin: 你的意思ˋ上課的時候還覺得很困難嗎?不過現在呈現出的效果和配色不錯喔!
同學你好：
我注意到你的網頁裡面使用了非常多的進階語法，而且裡面有許多 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，所以你在 #content 外面再加一層 div，專門設不透明度，然後 #content 裡面不要設任何背景顏色，讓背景可以整個透進來。如果你有的話，也請和我說一下試的結果。
最後，如果真得改不出來就不用改了。就改回原來的樣子，或者簡化一點不要那麼多進階功能也可以。因為要改到有很漂亮簡潔的效果，又要讓大多數的人（瀏覽器）看得到，是滿困難而需要經驗或專業的。
我注意到你的網頁裡面使用了非常多的進階語法，而且裡面有許多 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> 的標題文字都寫完了才會出現圖片。
我寫個示意原始碼好了（不過不保證有效果）：
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.
(編輯記錄)
http://mepopedia.com/~web100b/hw02/hw02-1001445075
大約花了2個多小時~
風格用和諧的相近色調配色
除了中途有小失誤讓顏色顯示不出來，
其他沒什麼大問題
MEPOERs said:
大約花了2個多小時~
風格用和諧的相近色調配色
除了中途有小失誤讓顏色顯示不出來，
其他沒什麼大問題
MEPOERs said:
JinJin: 做得不錯，但是檔案被刪了
http://mepopedia.com/~web100b/hw02/hw02-1001445008
大概也是花2小時
顏色都是亮色系的 沒有遇到什麼問題 做網頁很好玩 ...
MEPOERs said:
大概也是花2小時
顏色都是亮色系的 沒有遇到什麼問題 做網頁很好玩 ...
MEPOERs said:
JinJin: 蠻有趣的配色，但是檔案也被刪了!
http://mepopedia.com/~web100b/hw02/hw02-1001445047
1.配色風格設定：暖粉色系
2.有無遇到的問題? 我在Dreamweaver上看起來是正常的，但放在網路上看卻只有單一顏色
3.製作感想： 正著了解每個細節
4.製作作業的時間：3小時
MEPOERs said:
1.配色風格設定：暖粉色系
2.有無遇到的問題? 我在Dreamweaver上看起來是正常的，但放在網路上看卻只有單一顏色
3.製作感想： 正著了解每個細節
4.製作作業的時間：3小時
Edited 1 time(s). Last edit at 10/18/2011 11:20PM by s930335w.
(編輯記錄)
MEPOERs said:
JinJin: 解答在下篇，，但是你的檔案也被刪了!
http://mepopedia.com/~web100b/hw02/hw02-1001445095
我的風格是以典雅方式來呈現
我想用圖片來輔助，可是我不太會插入圖片語法
製作時間約3小時
這次的作業讓我再次複習到網頁設計的應用)
MEPOERs said:
我的風格是以典雅方式來呈現
我想用圖片來輔助，可是我不太會插入圖片語法
製作時間約3小時
這次的作業讓我再次複習到網頁設計的應用
)
MEPOERs said:
HP: 我很喜歡你的配色與風格。真得很有「典雅」的感覺。「圖片語法」老師以後會教（不過好像作業三就有了），但不用圖片而能呈現出質感與風格才是更高段的！
http://mepopedia.com/~web100b/hw02/hw02-1001445020
1.橘 紅 桃 藍
2.無
3 家裡沒軟體 所以就沒有改
4在學校完成回家上傳
1.橘 紅 桃 藍
2.無
3 家裡沒軟體 所以就沒有改
4在學校完成回家上傳
http://mepopedia.com/~web100b/hw02/hw02-1001445107
1. 以粉色系為主 ，自然舒服的配色
2. 大致上沒什麼問題
3. 感覺越來越複雜...
4. 上課時間完成，回家上傳
MEPOERs said:
1. 以粉色系為主 ，自然舒服的配色
2. 大致上沒什麼問題
3. 感覺越來越複雜...
4. 上課時間完成，回家上傳
MEPOERs said:
JinJin: 檔案也被刪了，麻煩再重傳喔!
作業網址:http://mepopedia.com/~web100b/hw02/hw02-1001445091/
1.配色風格設定: 喜歡淺淺的色系
2.有無遇到的問題: 沒有太大困難囉!
3.製作感想: 簡單的網頁設計,色塊為主,學起來不難
4.製作作業的時間: 大概兩堂課這樣加上回去修改約3小時多,有上傳但忘記回覆現在來補囉
1.配色風格設定: 喜歡淺淺的色系
2.有無遇到的問題: 沒有太大困難囉!
3.製作感想: 簡單的網頁設計,色塊為主,學起來不難
4.製作作業的時間: 大概兩堂課這樣加上回去修改約3小時多,有上傳但忘記回覆現在來補囉