Web2.0下XHTML CSS 設計需要注意的地方小結_經驗交流

注意事項：
1、選擇DOCTYPE以外的語句必須使用小寫英文字母書寫。其中包括 Macromedia Dreamweaver 產生的滑鼠動作，如 OnMouseOver 也必須修改成 onmouseover。

2、XHTML語法規要求所有的識別都必須有開始和結束。例如

和、

和

等，對於不成對的標識，要求在標識最後加一個空格，然後跟一個"/"。例如
寫成
、寫成，加空格的原因是避免程式碼連在一起瀏覽器不辨識。

3、所有的XML標記都必須合理嵌套。如：

 必須修改為：

 ，就是說，一層一層的嵌套必須是嚴格對稱。

4、所有的屬性必須用引號""括起來。如：  必須修改為： 。特殊情況，你需要在屬性值裡使用雙引號，你可以用"，單引號可以使用'，例如：。

5、把所有），不是標籤的一部分，都必須被編碼為 & g t ; ，任何與號（&），不是實體的一部分的，都必須被編碼為& a m p ; 。(以上代碼字母間無空格）

6、給所有屬性賦一個值。如：    必須修改為：  。

7. 不要在註解內容中使用「--」。如： 可以用等號或空格替換內部的虛線 。

首先是規範的文件頭部分的寫法：

 CODE:
   html    PUBLIC    "-/ .C//DTD href=\"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\" target=\"_blank\">http://www.w3.org/TR/xhtml1/DTD /xhtml1-transitional.dtd">
 http ://www.w3.org/1999/xhtml"    lang="utf-8">
 
     
 
     
 順便加上版權"    / >    
     
     
[Copy to clipboard]



在CSS的定義方面，值得推薦的是一種通用字體設定的方案，內容如下：
 CODE:
body    {    font -family    :    "Lucida    Grande",    Verdana,    Lucida,    Arial,   to clipboard]


字體依照所列的順序選用。如果使用者的電腦含有Lucida Grande字體，文件將被指定為Lucida Grande。沒有的話，就被指定為Verdana字體，如果也沒有Verdana，就指定為Lucida字體，依此類推；

Lucida Grande字體適合Mac OS X；

Verdana字體適合所有的Windows系統；

Lucida適合UNIX使用者；

"宋體"適合中文簡體使用者；

如果所列出的字體都不能用，則預設的sans-serif字體能保證呼叫。


CSS中用四個偽類別來定義連結的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：

a :link{font-weight : bold ;text-decoration : none ;color : #c00 ;}
a:visited {font-weight : bold ; :hover {font-weight : bold ;text-decoration : underline ;color : #f60 ;}
a:active {font-weight : bold  br>但書寫的時候一定要注意順序，正確的順序是：LVHA，如果不這麼寫的話，很可能效果很你預期的不一樣。

中間部分的佈局規格化和選單的非表格實作需要實踐的引導，在這裡先不寫什麼。下面寫一點關於程式碼校驗的記錄。

XHTML校驗常見錯誤原因對照表:
No DOCTYPE Found! Falling Back to HTML 4.01 Transitional--未定義DOCTYPE。 

No Character Encoding Found! Falling back to UTF-8.--未定義語言編碼。

end tag for "img" omitted, but OMITTAG NO was specified--圖片標籤沒有加"/"關閉。 

an attribute value specification must be an attribute value literal unless SHORTTAG YES is specified--屬性值必須加引編號。

element "DIV" undefined---DIV標籤不能用大寫，要改成小寫div。 

required attribute "alt" not specified---圖片需要加alt屬性。 

required attribute "type" not specified---JS或CSS所呼叫的標籤漏了type屬性。

CSS2校驗常見錯誤原因對照表:
(警告)無效數字 : color909090 不是一個 color 值 : 909090 ---十六進位色彩值必須加上"#"號，即#909090
(警告)無效數字 : margin-topUnknown dimension : 6pixels ---pixels不是一個單位值，正確寫法6px
(警告)屬性 scroll_bar- 定義捲軸顏色是非標準的屬性
(警告)Line : 0 font-family: 建議你指定一個種類族科作為最後的選擇 --W3C建議字體定義的時候，最後以一個類別的字體結束，例如"sans- serif"，以確保在不同作業系統下，網頁字體都能被顯示
(警告)Line : 0 can't find the warning message for otherprofile --表示在程式碼中有非標準屬性或值，校驗程序無法判斷和提供相應的警告訊息