一.CSS校驗的問題
首先依比賽要求,參賽作品必須符合XHTML標準,提交的CSS必須通過W3C的校驗。 CSS校驗的情況比較理想,參賽作品中只有8份作品未通過CSS2.0校驗,主要校驗錯誤都是:“Line : 0 font-family: 建議你指定一個種類族科作為最後的選擇”
W3C建議字體定義的時候,最後以一個類別的字體結束,不要以單獨某個字體結束。例如"sans-serif"就,以確保在不同作業系統下,網頁字體都能被顯示。
雖然多數人都在body標籤上定義了"sans-serif",但在其它的id或class中再次定義字體時漏了sans-serif,被認為校驗不通過。這個錯誤不是很嚴重,只要稍加註意就可以避免。
二.CSS的書寫建議
給CSS文件加註解。註釋會為你今後的維護帶來方便,建議盡可能為CSS文件加註釋,不要擔心增加少量的位元組。
盡量簡寫CSS文法。例如顏色值"#FFFFFF"可以簡寫成"#FFF";"padding-top:30px;Padding-right:0;padding-bottom:10px;padding-left:2 0px"可以簡寫"padding:30px 0 10px 20px;"。在定義技巧上有更多的節省技巧,隨著對CSS應用的熟練,你會不斷發現更好的方法。
三.XHTML校驗的問題
因為是樣式表比賽,大家對CSS的校驗比較注意,但在XHTML符合標準方面有點忽視,出現很多低級錯誤。主要問題羅列如下:
target="_blank",這個語法在HTML4.0裡是正確的,在XHTML1.0裡是不允許使用的。解決的方法之一是寫成target="new",另一個辦法是用js處理所有的target;
樣式表最好不要內嵌,將樣式表檔案獨立出來易於維護。如果內嵌<style>一定要寫成<style type="text/css">,其中的type不能忽略,否則XHTML無法判斷你的style作用在什麼方面。
<br>必須寫成<br />,XHTML要求所有的標籤必須關閉,不成對的標籤直接在後面加上" /"。
重複使用同一ID。一個ID在XHTML中只能使用1次,如果需要多次引用樣式,就應該使用class。
<meta http-equiv="Content-Type" content="text/html; charset="gb2312" />很明顯content屬性值裡面多了一個引號。
Flash的嵌入方法錯誤。 <embed>最早是Netscape的私有標籤,即使後來為IE所支持,但始終沒有被W3C承認,在HTML4.0沒有<embed>這個標籤。 W3C主張的是採用<object>標籤。為了解決不同瀏覽器的相容,有一個變通的解決方法是2個標籤都採用。完整的範例程式碼如下(flash背景為透明): <object classid="clsid:27CDB6E-AE6D-11cf-96B8-444553540000"
codebase=" http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=5,0,0,0 "
width="300" height="100"> <param name="quality" value="high"> <param name="wmode" value="transparent">
<param name="SRC" value="test.swf"> <embed src="test.swf" wmode="transparent" quality="high"
pluginspage=" http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash "
type="application/x-shockwave-flash" width="300" height="100"> </embed> </object>
但直接寫在XHTML中依然不可以,我們現在只能透過把上面程式碼寫在flash.js檔案裡,然後再呼叫來騙過校驗。
<script type="text/javascript" src="flash.js"></script>
關於flash是否符合標準,是一個有爭議的問題。更多說明:參考http://www.blueidea.com/tech/site/2004/1920.asp
類似id=header class=title程式碼都應該寫成id="header" class="title"。給屬性值加引號是最XHTML基本的語法規則。
四.相容的問題
有12件作品在IE6.0、Mozilla Firefox1.0、Opera 7.12中瀏覽發生變形和錯位。 (我沒有用IE5.0測試,偷懶啦:)IE5.0對所有CSS佈局的設計師都是個挑戰)。
在IE裡居中,但Mozilla裡沒有。在IE中設定body {TEXT-ALIGN: center;}就已經可以居中了,但在Mozilla中必須對需要居中的層再加入以下樣式設定:MARGIN-RIGHT: auto;MARGIN-LEFT: auto; 超出寬度。在Mozilla裡看正常的頁面,在IE裡因為超出寬度而變形,並排的層移到下面去了。這個情況是因為IE和Mozilla對盒模型解釋不同造成的,有很多解決辦法,例如"!important"方法。
總得來說,參賽作品整體上是合格的居多,這次大賽的目的也已經基本達到,web標準和CSS佈局已經被越來越多的設計師了解和掌握。對於部分作品美工簡陋,我想這是一個流程,資深設計師應該都記得Table版面剛出現的時候,網頁大多也很樸素。 CSS佈局經過一段時間的消化理解和應用,會有更多像一等獎作品這樣技術美觀兼顧的網頁湧現。