[技術(shù)前沿]網(wǎng)站設計中web標準頁(yè)面知識必備(轉載)
021yin.com
今天在群里，熊貓君提議整理一個(gè)帖子，一方面為初學(xué)者提供一個(gè)入門(mén)指南，另一方面也象借此和已經(jīng)在從事這個(gè)行業(yè)進(jìn)行一點(diǎn)交流ID嵌套樣式問(wèn)題。下面是我從事這個(gè)行當多年的一些經(jīng)驗總結，希望拋磚引玉，大家不吝賜教。
１、必備工具
其實(shí)web標準并不是很復雜的技術(shù)，實(shí)現web標準的工具也很簡(jiǎn)單，說(shuō)白了，只要可以進(jìn)行純文本編輯的軟件，都可以作為代碼編寫(xiě)的gon工具ID嵌套樣式問(wèn)題。例如記事本、UltraEdit甚至CuteFTP的編輯器（象我這種懶人有時(shí)候就用那玩藝兒直接在線(xiàn)編輯，汗）。
而另一些較專(zhuān)業(yè)軟件會(huì )提供高亮顯示代碼（前面提到的UltraEdit也具有此項功能）、代碼提示、自動(dòng)閉合標簽等等功能，使用起來(lái)會(huì )大大提高工作效率ID嵌套樣式問(wèn)題。如DreamWeaver、MS Expression、EditPlus等等，這些編輯軟件目前是絕對的主流，無(wú)論是初學(xué)者上手容易還是專(zhuān)業(yè)人士提高效率都是不錯的選擇。
再說(shuō)說(shuō)瀏覽器環(huán)境，目前一臺機器同時(shí)裝IE、Firefox、Opera、Safari已經(jīng)不是難事，而IE7 Standalone和MultipleIE的問(wèn)世也讓IE7和低版本IE并存成為可能ID嵌套樣式問(wèn)題。推薦瀏覽器環(huán)境——本機安裝IE7、FF、Opera、Safari，同時(shí)安裝MultipleIE。從我個(gè)人的使用經(jīng)驗，IE7 Standalone存在一定的缺陷，有可能導致本機安裝的IE6無(wú)法正常使用。
除了編輯器以外，還有就是必不可少的調試工具啦，首推當然是Firefox下的Firebug！IE下目前還沒(méi)有與之相當的調試工具，比較好的有IE development toobar、IE Debugbar等等，不過(guò)和Firebug完全不是一個(gè)檔次的東西，只能說(shuō)勉強湊合用ID嵌套樣式問(wèn)題。
２、必備的HTML/XHTML基礎
說(shuō)到基礎，其實(shí)正是我最想談的ID嵌套樣式問(wèn)題。從論壇許多的帖子也可以看出來(lái)，大多數問(wèn)題的產(chǎn)生是由于制作者本身基礎的不牢固。而HTML/XHTML作為基礎中的基礎，更是許多人的薄弱環(huán)節。然而很多人還是喜歡一上來(lái)就問(wèn)布局或者Hack這些技巧方面的問(wèn)題，其實(shí)很多問(wèn)題如果本人的基礎牢固了，幾乎不能被稱(chēng)之為問(wèn)題。
web標準必備的HTML/XHTML基礎ID嵌套樣式問(wèn)題，大致有幾個(gè)方面：
每個(gè)標簽的語(yǔ)義，這一點(diǎn)是網(wǎng)頁(yè)標準的根本ID嵌套樣式問(wèn)題。而整個(gè)網(wǎng)頁(yè)標準化幾乎都是圍繞著(zhù)這一點(diǎn)而來(lái)的，明確了語(yǔ)義，才能選擇合適的標簽；明確了語(yǔ)義，才能構建可讀性良好的結構。例如
就是網(wǎng)站最高等級的標題ID嵌套樣式問(wèn)題，它不應該放在
層級之下；例如和，主要用于表單元素分組，不應該因為它那個(gè)漂亮的邊框就用來(lái)表現新聞列表ID嵌套樣式問(wèn)題。
每個(gè)標簽的初始樣式，現在有很多重置標簽樣式就是針對這一點(diǎn)，因為每個(gè)標簽在不同瀏覽器下的初始樣式是不同的，而重置樣式是為了更好地實(shí)現網(wǎng)頁(yè)兼容性ID嵌套樣式問(wèn)題。從我個(gè)人的角度來(lái)說(shuō)，不推薦初學(xué)者一上來(lái)就了解如何重置樣式，而應該從了解標簽的初始樣式入手，先了解了這些，才能明白每一行重置樣式的代碼的真正含義。
標簽的正確嵌套規則，同時(shí)還必須了解的是哪些標簽屬于塊元素，而哪些屬于行內元素ID嵌套樣式問(wèn)題。這是即使是高手也會(huì )經(jīng)常忽略的方面，例如本人（^_^）。今天看到 這個(gè)帖子 的時(shí)候，才意識到，原來(lái)之前對dt、dd的嵌套規則理解有誤，二者不能一視同仁。HTML/XHTML的嵌套規則并不算簡(jiǎn)單，常用的標簽不過(guò)三十個(gè)上下，就有大約二十種不同的嵌套規則，稍不留神就會(huì )出錯。雖然不嚴格遵循并不會(huì )影響頁(yè)面的表現，但養成一個(gè)良好的習慣是很重要的，它往往能決定你在這條路上可以走多遠。
標簽的屬性ID嵌套樣式問(wèn)題。這個(gè)又要分為兩方面，一是符合標準的常用屬性及對應的值，例如的summary屬性、 的scope屬性、的for屬性等等；二是標準強制要求的屬性，例如圖片的alt屬性、form的action屬性、textfield的col屬性和row屬性等等。
HTML/XHTML基礎，雖然可以分開(kāi)成多個(gè)方面講，但實(shí)際關(guān)于它們的知識往往是綜合在一起的，大多數相關(guān)的手冊幾乎都有詳盡的介紹ID嵌套樣式問(wèn)題。對于這方面知識的學(xué) 了看相關(guān)手冊外，多把自己的網(wǎng)頁(yè)拿去w3c做校驗也是不錯的方法。
３、必須了解的CSS知識
CSS是標準化最吸引人的地方，也是時(shí)下討論最多的話(huà)題，市面上的相關(guān)書(shū)籍也在web標準類(lèi)里占據壓倒性的比重，甚至有些人（包括一些用人單位）認為CSS就是網(wǎng)頁(yè)標準ID嵌套樣式問(wèn)題。這種過(guò)于夸大CSS作用的觀(guān)點(diǎn)固然是錯誤的，但CSS對于網(wǎng)頁(yè)標準的重要性卻也可見(jiàn)一斑。
CSS相關(guān)的知識、技巧很多ID嵌套樣式問(wèn)題，從知識的必備性方面來(lái)講，以下幾個(gè)方面是我認為最重要的：
布局ID嵌套樣式問(wèn)題。布局是表現層技術(shù)的基礎，任何表現層的東西都是基于布局之上的。利用CSS布局的方法有很多種，例如float、絕對定位、負margin等等。每一種布局都有著(zhù)各自的優(yōu)勢和局限性，從適性最廣來(lái)講顯然是float最佳，也最為常用，但清除浮動(dòng)往往是讓人頭疼的問(wèn)題。絕對定位的網(wǎng)頁(yè)抗壓性好，但自由度低，而且渲染效率最差。負margin是最不破壞文檔流的辦法，但在對負值支持不佳的IE下往往會(huì )有靈異表現。關(guān)于布局方面的知識，建議看一下webflash的《徹底弄懂CSS盒子模式》系列文章，個(gè)人認為相關(guān)知識的文章尚無(wú)出其右者。
IE下的Haslayout渲染模式ID嵌套樣式問(wèn)題。其實(shí)hack是許多標準工程師所深?lèi)和唇^的東西，但在瀏覽器兼容性要求越來(lái)越高的今天，hack卻往往是一種無(wú)奈之舉。而深入了解IE的Haslayout渲染模式，就會(huì )明白許多hack的來(lái)由，以及許多兼容性問(wèn)題的產(chǎn)生之源。推薦閱讀——譯文On having layout。然而HasLayout問(wèn)題之多，絕非一兩篇文章所能概括，通過(guò)閱讀文章，了解其中的原理，再舉一反三，很多問(wèn)題就會(huì )迎刃而解了。
符合標準的CSS規則ID嵌套樣式問(wèn)題。關(guān)于這一點(diǎn)，我可以不負責任地說(shuō)，數以千萬(wàn)計的網(wǎng)站，其CSS完全符合標準的，所占比重不會(huì )超過(guò)1%。這并不是一個(gè)悲觀(guān)的估計，即使是w3c推薦的一些網(wǎng)站，例如ESPN，他們的CSS也時(shí)常會(huì )通不過(guò)校驗。CSS的許多規則的確令CSSer們非常不適，例如background和color，這兩個(gè)屬性絕大多數人都是分開(kāi)來(lái)使用的，而w3c標準卻規定兩者必須“生則同生，死則同死”。還有就是各個(gè)瀏覽器的專(zhuān)有屬性，在實(shí)現一些效果時(shí)是最簡(jiǎn)單有效的。這種時(shí)候我們往往會(huì )選擇放棄標準，但暫時(shí)的放棄不意味著(zhù)無(wú)視。今天知道我們哪些行為是錯誤的，以及為什么要用錯誤的方法，明天改正起來(lái)就不會(huì )太難。
提高網(wǎng)站性能的技巧，如有助于SEO的以圖代字、用盡量少和小容量的圖片實(shí)現圓角表格、用background-position實(shí)現圖片切換以提高渲染效率等等ID嵌套樣式問(wèn)題。從對網(wǎng)站的幫助角度來(lái)看，這些技巧遠比瀏覽器hack更值得掌握。
了解一點(diǎn)js知識ID嵌套樣式問(wèn)題。這個(gè)和CSS關(guān)系不是那么密切，但經(jīng)?？吹胶芏嗳算@牛角尖，用js可以非常簡(jiǎn)單實(shí)現的效果，非要用CSS去勉強實(shí)現。例如將子菜單放在鏈接里，通過(guò):hover觸發(fā)。又比如多列等高布局的實(shí)現。這已經(jīng)是行為層的范疇了，為什么還非要用表現層來(lái)實(shí)現呢？當然這里并不是說(shuō)所有CSS不容易實(shí)現的都往js里扔，而是要了解一下雙方的技術(shù)特點(diǎn)，合理地選用最佳方案。
４、必備的網(wǎng)站樣式管理技巧
規范化的命名與合理的代碼重用性，也就是ID和classID嵌套樣式問(wèn)題。對不起，這里又要老生常談一下，因為昨天剛剛又看到一個(gè)通篇沒(méi)有用一個(gè)ID的網(wǎng)站。ID和class是屬于結構層的，不過(guò)CSS的調用卻幾乎都要通過(guò)ID和class來(lái)實(shí)現。但是，ID和class不僅僅是為了調用CSS樣式而存在的。恰恰相反，是良好的ID和class構建的結構給了CSS大展身手的舞臺。搞反了彼此關(guān)系，其實(shí)還是表現主導結構的思路，也就和滿(mǎn)屏幕的table沒(méi)有本質(zhì)區別。理清了ID、class和CSS的關(guān)系，再來(lái)談命名，命名其實(shí)只有一個(gè)基本原則，就是結構化。當然，在結構化之余，body、框架、模塊之間的命名如能以某種形式加以區別（我個(gè)人習慣是加不同前綴），會(huì )讓代碼更加清晰。
樣式文件的管理，也就是如何存儲網(wǎng)站的樣式文件ID嵌套樣式問(wèn)題。如果是一個(gè)很小的網(wǎng)站，把所有樣式存在一個(gè)文件中也是沒(méi)有問(wèn)題的。但大網(wǎng)站的CSS往往幾十上百k，全部存在一個(gè)文件里不但影響網(wǎng)頁(yè)加載，也不利于修改維護。如何分割CSS，需要事先做好規劃，無(wú)論是按欄目按功能還是按層級，要根據自己網(wǎng)站的特點(diǎn)。
021yin.com