網(wǎng)頁(yè)標(biāo)準(zhǔn)WEB2.0教案.doc

WEB標(biāo)準(zhǔn)教程一、 什么是WEB標(biāo)準(zhǔn)？WEB標(biāo)準(zhǔn)不是某一個(gè)標(biāo)準(zhǔn)，而是一系列標(biāo)準(zhǔn)的集合。網(wǎng)頁(yè)主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Presentation）和行為（Behavior）。對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面：結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言主要包括XHTML和XML，表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言主要包括CSS，行為標(biāo)準(zhǔn)主要包括對(duì)象模型（如W3C DOM）、ECMAScript等。這些標(biāo)準(zhǔn)大部分由W3C起草和發(fā)布，也有一些是其他標(biāo)準(zhǔn)組織制訂的標(biāo)準(zhǔn)，比如ECMA（European Computer Manufacturers Association）的ECMAScript標(biāo)準(zhǔn)。我們來(lái)簡(jiǎn)單了解一下這些標(biāo)準(zhǔn)：1結(jié)構(gòu)標(biāo)準(zhǔn)語(yǔ)言（1）XML XML是The Extensible Markup Language(可擴(kuò)展標(biāo)識(shí)語(yǔ)言)的簡(jiǎn)寫(xiě)。目前推薦遵循的是W3C于2000年10月6日發(fā)布的XML1.0，參考（/TR/2000/REC-XML-20001006）。和HTML一樣，XML同樣來(lái)源于SGML，但XML是一種能定義其他語(yǔ)言的語(yǔ)。XML最初設(shè)計(jì)的目的是彌補(bǔ)HTML的不足，以強(qiáng)大的擴(kuò)展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來(lái)逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。關(guān)于XML的好處和技術(shù)規(guī)范細(xì)節(jié)這里就不多說(shuō)了，網(wǎng)上有很多資料，也有很多書(shū)籍可以參考。（2）XHTML XHTML是The Extensible HyperText Markup Language可擴(kuò)展標(biāo)識(shí)語(yǔ)言的縮寫(xiě)。目前推薦遵循的是W3C于2000年1月26日推薦XML1.0（參考/TR/xhtml1）。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強(qiáng)大，完全可以替代HTML，但面對(duì)成千上萬(wàn)已有的站點(diǎn)，直接采用XML還為時(shí)過(guò)早。因此，我們?cè)贖TML4.0的基礎(chǔ)上，用XML的規(guī)則對(duì)其進(jìn)行擴(kuò)展，得到了XHTML。簡(jiǎn)單的說(shuō)，建立XHTML的目的就是實(shí)現(xiàn)HTML向XML的過(guò)渡。2. 表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言CSS是Cascading Style Sheets層疊樣式表的縮寫(xiě)。目前推薦遵循的是W3C于1998年5月12日推薦CSS2（參考/TR/CSS2/）。W3C創(chuàng)建CSS標(biāo)準(zhǔn)的目的是以CSS取代HTML表格式布局、幀和其他表現(xiàn)的語(yǔ)言。純CSS布局與結(jié)構(gòu)式XHTML相結(jié)合能幫助設(shè)計(jì)師分離外觀與結(jié)構(gòu)，使站點(diǎn)的訪問(wèn)及維護(hù)更加容易。3.行為標(biāo)準(zhǔn)（1）DOMDOM是Document Object Model文檔對(duì)象模型的縮寫(xiě)。根據(jù)W3C DOM規(guī)范（/DOM/），DOM是一種與瀏覽器，平臺(tái)，語(yǔ)言的接口，使得你可以訪問(wèn)頁(yè)面其他的標(biāo)準(zhǔn)組件。簡(jiǎn)單理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的沖突，給予web設(shè)計(jì)師和開(kāi)發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，讓他們來(lái)訪問(wèn)他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)像。(2) ECMAScriptECMAScript是ECMA(European Computer Manufacturers Association)制定的標(biāo)準(zhǔn)腳本語(yǔ)言（JAVAScript）。目前推薦遵循的是ECMAScript 262（http:/www.ecma.ch/ecma1/STAND/ECMA-262.HTM）。二、 為什么要建立網(wǎng)站標(biāo)準(zhǔn)我們大部分人都有深刻體驗(yàn)，每當(dāng)主流瀏覽器版本的升級(jí)，我們剛建立的網(wǎng)站就可能變得過(guò)時(shí)，我們就需要升級(jí)或者重新建造一遍網(wǎng)站。例如1996-1999年典型的瀏覽器大戰(zhàn)，為了兼容Netscape和IE，網(wǎng)站不得不為這兩種瀏覽器寫(xiě)不同的代碼。同樣的，每當(dāng)新的網(wǎng)絡(luò)技術(shù)和交互設(shè)備的出現(xiàn)，我們也需要制作一個(gè)新版本來(lái)支持這種新技術(shù)或新設(shè)備，例如支持手機(jī)上網(wǎng)的WAP技術(shù)。類似的問(wèn)題舉不勝舉：網(wǎng)站代碼臃腫、繁雜浪費(fèi)了我們大量的帶寬；針對(duì)某種瀏覽器的DHTML特效，屏蔽了部分潛在的客戶；不易用的代碼，殘障人士無(wú)法瀏覽網(wǎng)站等等。這是一種惡性循環(huán)，是一種巨大的浪費(fèi)。如何解決這些問(wèn)題呢？有識(shí)之士早已開(kāi)始思考，需要建立一種普遍認(rèn)同的標(biāo)準(zhǔn)來(lái)結(jié)束這種無(wú)序和混亂。商業(yè)公司(Netscape、Microsoft等)也終于認(rèn)識(shí)到統(tǒng)一標(biāo)準(zhǔn)的好處，因此在W3C（W3C.org）的組織下，網(wǎng)站標(biāo)準(zhǔn)開(kāi)始被建立（1998年2月10日發(fā)布XML1.0為標(biāo)志），并在網(wǎng)站標(biāo)準(zhǔn)組織（）的督促下推廣執(zhí)行。網(wǎng)站標(biāo)準(zhǔn)的目的就是： 提供最多利益給最多的網(wǎng)站用戶 確保任何網(wǎng)站文擋都能夠長(zhǎng)期有效 簡(jiǎn)化代碼、降低建設(shè)成本 讓網(wǎng)站更容易使用，能適應(yīng)更多不同用戶和更多網(wǎng)路設(shè)備 當(dāng)瀏覽器版本更新，或者出現(xiàn)新的網(wǎng)絡(luò)交互設(shè)備時(shí)，確保所有應(yīng)用能夠繼續(xù)正確執(zhí)行。 對(duì)于網(wǎng)站設(shè)計(jì)和開(kāi)發(fā)人員來(lái)說(shuō)，遵循網(wǎng)站標(biāo)準(zhǔn)就是使用標(biāo)準(zhǔn)；對(duì)于你的網(wǎng)站用戶來(lái)說(shuō)，網(wǎng)站標(biāo)準(zhǔn)就是最佳體驗(yàn)。采用網(wǎng)站標(biāo)準(zhǔn)的好處對(duì)網(wǎng)站瀏覽者的好處： 文件下載與頁(yè)面顯示速度更快； 內(nèi)容能被更多的用戶所訪問(wèn)（包括失明、視弱、色盲等殘障人士）； 內(nèi)容能被更廣泛的設(shè)備所訪問(wèn)（包括屏幕閱讀機(jī)、手持設(shè)備、搜索機(jī)器人、打印機(jī)、電冰箱等等） 用戶能夠通過(guò)樣式選擇定制自己的表現(xiàn)界面 所有頁(yè)面都能提供適于打印的版本 對(duì)網(wǎng)站所有者的好處： 更少的代碼和組件，容易維護(hù) 帶寬要求降低（代碼更簡(jiǎn)潔），成本降低。舉個(gè)例子：當(dāng) ESPN.com 使用 CSS改版后，每天節(jié)約超過(guò)兩兆字節(jié)（terabytes）的帶寬。 更容易被搜尋引擎搜索到 改版方便，不需要變動(dòng)頁(yè)面內(nèi)容 提供打印版本而不需要復(fù)制內(nèi)容 提高網(wǎng)站易用性。在美國(guó)，有嚴(yán)格的法律條款（Section 508）來(lái)約束政府網(wǎng)站必須達(dá)到一定的易用性，其他國(guó)家也有類似的要求。 三、 調(diào)試web標(biāo)準(zhǔn)頁(yè)面的瀏覽器Mozilla Firefox基本信息 軟件名稱：Moailla Firefox 開(kāi)發(fā)者主頁(yè)： 軟件大?。?.72MB 安裝環(huán)境：各操作系統(tǒng)均有相應(yīng)版本 版本：0.91 軟件說(shuō)明安全、簡(jiǎn)單、小巧、免費(fèi)、支持web標(biāo)準(zhǔn)，是這款新瀏覽器的特點(diǎn)。Firefox是Mozilla瀏覽器的一個(gè)精簡(jiǎn)版本，速度極快，沒(méi)有包含電子郵件、編輯器等一些額外的組件?；贕ecko引擎，很小巧，只有4.72Mb，遠(yuǎn)小于IE，對(duì)中文支持也不錯(cuò)。獲得MAXIMUM PC2004年軟件大獎(jiǎng)第一名等多項(xiàng)大獎(jiǎng)，被視做IE的替代產(chǎn)品。官方主頁(yè)下載(windows精簡(jiǎn)版 4.72MB 免費(fèi)) /pub//firefox/releases/0.9.1/FirefoxSetup-0.9.1.exe四、 初學(xué)者12天入門WEB標(biāo)準(zhǔn)第1天:選擇什么樣的DOCTYPE開(kāi)始制作符合標(biāo)準(zhǔn)的站點(diǎn)，第一件事情就是聲明符合自己需要的DOCTYPE。什么是DOCTYPE上面這些代碼我們稱做DOCTYPE聲明。DOCTYPE是document type(文檔類型)的簡(jiǎn)寫(xiě)，用來(lái)說(shuō)明你用的XHTML或者HTML是什么版本。其中的DTD(例如上例中的xhtml1-transitional.dtd)叫文檔類型定義，里面包含了文檔的規(guī)則，瀏覽器就根據(jù)你定義的DTD來(lái)解釋你頁(yè)面的標(biāo)識(shí)，并展現(xiàn)出來(lái)。要建立符合標(biāo)準(zhǔn)的網(wǎng)頁(yè)，DOCTYPE聲明是必不可少的關(guān)鍵組成部分；除非你的XHTML確定了一個(gè)正確的DOCTYPE，否則你的標(biāo)識(shí)和CSS都不會(huì)生效。HTML提供了一種DTD聲明，XHTML 1.0 提供了三種DTD聲明可供選擇： 寬松的, 不精確的(loose) 過(guò)渡的(Transitional):要求非常寬松的DTD，它允許你繼續(xù)使用HTML4.01的標(biāo)識(shí)(但是要符合x(chóng)html的寫(xiě)法)。完整代碼如下： 嚴(yán)格的(Strict):要求嚴(yán)格的DTD，你不能使用任何表現(xiàn)層的標(biāo)識(shí)和屬性，例如。完整代碼如下： 框架的(Frameset):專門針對(duì)框架頁(yè)面設(shè)計(jì)使用的DTD，如果你的頁(yè)面中包含有框架，需要采用這種DTD。完整代碼如下：第2天:什么是名字空間DOCTYPE聲明好以后，接下來(lái)的代碼是： 通常我們HTML4.0的代碼只是，這里的xmlns是什么呢？這個(gè)xmlns是XHTML namespace的縮寫(xiě)，叫做名字空間聲明。名字空間是什么作用呢？由于xml允許你自己定義自己的標(biāo)識(shí)，你定義的標(biāo)識(shí)和其他人定義的標(biāo)識(shí)有可能相同，但表示不同的意義。當(dāng)文件交換或者共享的時(shí)候就容易產(chǎn)生錯(cuò)誤。為了避免這種錯(cuò)誤發(fā)生，XML采用名字空間聲明，允許你通過(guò)一個(gè)網(wǎng)址指向來(lái)識(shí)別你的標(biāo)識(shí)。XHTML是HTML向XML過(guò)渡的標(biāo)識(shí)語(yǔ)言，它需要符合XML文檔規(guī)則，因此也需要定義名字空間。又因?yàn)閄HTML1.0不能自定義標(biāo)識(shí)，所以它的名字空間都相同，就是/1999/xhtml。如果你還不太理解也不要緊，目前階段我們只要照抄代碼就可以了。后面的lang=gb2312,指定你的文檔用簡(jiǎn)體中文。第3天:定義語(yǔ)言編碼第三步是定義你的語(yǔ)言編碼，類似這樣： 為了被瀏覽器正確解釋和通過(guò)W3C代碼校驗(yàn)，所有的XHTML文檔都必須聲明它們所使用的編碼語(yǔ)言，我們一般使用gb2312(簡(jiǎn)體中文)，制作多國(guó)語(yǔ)言頁(yè)面也有可能用Unicode、ISO-8859-1等，根據(jù)你的需要定義。通常這樣定義就可以了。但是要補(bǔ)充說(shuō)明的是，XML文檔并不是這樣定義語(yǔ)言編碼的，XML的定義方式如下： 你在M的首頁(yè)代碼第一行就可以看見(jiàn)類似的語(yǔ)句，這也是W3C推薦使用的定義方法。那為什么我們不直接采用這種方法呢？原因是一些瀏覽器對(duì)標(biāo)準(zhǔn)的支持不完善，不能正確理解這樣的定義方法，比如IE6/windows。所以在目前過(guò)渡方案下，我們依然推薦使用meta方式。當(dāng)然，你可以兩種方法都寫(xiě)。看本站源代碼，你會(huì)發(fā)現(xiàn)語(yǔ)言編碼定義的地方還多一句： 這是針對(duì)老版本瀏覽器寫(xiě)的，以保證各種瀏覽器都能正確解釋頁(yè)面。注意：在上面聲明語(yǔ)句的最后，你看到有一個(gè)斜杠/，這和我們以前的HTML4.0的代碼寫(xiě)法不同。原因是XHTML語(yǔ)法規(guī)則要求所有的標(biāo)識(shí)都必須有開(kāi)始和結(jié)束。例如和、和等，對(duì)于不成對(duì)的標(biāo)識(shí)，要求在標(biāo)識(shí)最后加一個(gè)空格，然后跟一個(gè)/。例如寫(xiě)成、寫(xiě)成，加空格的原因是避免代碼連在一起瀏覽器不識(shí)別。第4天:調(diào)用樣式表用web標(biāo)準(zhǔn)設(shè)計(jì)網(wǎng)站，過(guò)渡的方法主要是采用XHTML+CSS，css樣式表是必不可少的。這就要求所有網(wǎng)頁(yè)設(shè)計(jì)師必須熟練掌握CSS，如果你以前不常用，那么現(xiàn)在就開(kāi)始學(xué)習(xí)吧。要制作符合web標(biāo)準(zhǔn)的網(wǎng)站，不懂CSS是設(shè)計(jì)不出漂亮的頁(yè)面的。事實(shí)上，所有表現(xiàn)的地方都需要用CSS來(lái)實(shí)現(xiàn)。我們以前都習(xí)慣用table來(lái)定位和布局，現(xiàn)在要改用DIV來(lái)定位和布局。這是思維方式的變化，一開(kāi)始有些不習(xí)慣。呵呵，任何變革都會(huì)有阻力的，為了享受標(biāo)準(zhǔn)帶來(lái)的益處，放棄一些老的傳統(tǒng)做法是值得的。外部調(diào)用樣式表在以前，我們通常采用2種方法使用樣式表： 頁(yè)面內(nèi)嵌法：就是將樣式表直接寫(xiě)在頁(yè)面代碼的head區(qū)。類似這樣： 外部調(diào)用法：將樣式表寫(xiě)在一個(gè)獨(dú)立的.css文件中，然后在頁(yè)面head區(qū)用類似以下代碼調(diào)用。 在符合web標(biāo)準(zhǔn)的設(shè)計(jì)中，我們使用外部調(diào)用法，好處不言而喻，你可以不修改頁(yè)面只修改.css文件而改變頁(yè)面的樣式。如果所有頁(yè)面都調(diào)用同一個(gè)樣式表文件，那么改一個(gè)樣式表文件，可以改變所有文件的樣式。雙表法調(diào)用樣式表查看某些符合標(biāo)準(zhǔn)站點(diǎn)的原代碼，你可能看到，在調(diào)用樣式表的地方有如下2句： import url( css/style01.css ); 為什么要寫(xiě)兩次呢？實(shí)際上一般情況下用外聯(lián)法調(diào)用(就是第一句)就足夠了。我這里使用雙表調(diào)用只是一種示例。其中的import命令用于輸入樣式表。而import命令在netscape 4.0版本瀏覽器是無(wú)效的。也就是說(shuō)，當(dāng)你希望某些效果在netscape 4.0瀏覽器中隱藏，在4.0以上或其它瀏覽器中又顯示的時(shí)候，你可以采用import命令方法調(diào)用樣式表。第5天:head區(qū)的其他設(shè)置收藏夾小圖標(biāo)如果你將本站加入收藏夾，可以看到在收藏夾網(wǎng)址之前的IE圖標(biāo)變成了本站特別的圖標(biāo)。要實(shí)現(xiàn)這樣效果很簡(jiǎn)單，首先制作一個(gè)16x16的icon圖標(biāo)，命名為favicon.ico，放在根目錄下。然后將下面的代碼嵌入head區(qū)：為搜索引擎準(zhǔn)備的內(nèi)容代碼如下，替換成你自己站點(diǎn)的內(nèi)容就可以： 允許搜索機(jī)器人搜索站內(nèi)所有鏈接。如果你想某些頁(yè)面不被搜索，推薦采用robots.txt方法 設(shè)置站點(diǎn)作者信息 設(shè)置站點(diǎn)版權(quán)信息 站點(diǎn)的簡(jiǎn)要介紹(推薦) 站點(diǎn)的關(guān)鍵詞(推薦) 先介紹這么多。補(bǔ)充說(shuō)明，前面花了5節(jié)都是講head區(qū)的代碼，實(shí)際頁(yè)面內(nèi)容還一字未提，呵呵，不要急，其實(shí)head區(qū)是非常重要的，看一個(gè)頁(yè)面的head的代碼就可以知道設(shè)計(jì)師是否夠?qū)I(yè)。第6天:XHTML代碼規(guī)范在開(kāi)始正式內(nèi)容制作之前，我們必須先了解一下web標(biāo)準(zhǔn)有關(guān)代碼的規(guī)范。了解這些規(guī)范可以幫助你少走彎路,盡快通過(guò)代碼校驗(yàn)。1.所有的標(biāo)記都必須要有一個(gè)相應(yīng)的結(jié)束標(biāo)記以前在HTML中，你可以打開(kāi)許多標(biāo)簽，例如和而不一定寫(xiě)對(duì)應(yīng)的和來(lái)關(guān)閉它們。但在XHTML中這是不合法的。XHTML要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，所有標(biāo)簽必須關(guān)閉。如果是單獨(dú)不成對(duì)的標(biāo)簽，在標(biāo)簽最后加一個(gè)/來(lái)關(guān)閉它。例如: 2.所有標(biāo)簽的元素和屬性的名字都必須使用小寫(xiě)與HTML不一樣，XHTML對(duì)大小寫(xiě)是敏感的，和是不同的標(biāo)簽。XHTML要求所有的標(biāo)簽和屬性的名字都必須使用小寫(xiě)。例如：必須寫(xiě)成 。大小寫(xiě)夾雜也是不被認(rèn)可的，通常dreamweaver自動(dòng)生成的屬性名字onMouseOver也必須修改成onmouseover。3.所有的XML標(biāo)記都必須合理嵌套同樣因?yàn)閄HTML要求有嚴(yán)謹(jǐn)?shù)慕Y(jié)構(gòu)，因此所有的嵌套都必須按順序，以前我們這樣寫(xiě)的代碼： 必須修改為： 就是說(shuō)，一層一層的嵌套必須是嚴(yán)格對(duì)稱。4.所有的屬性必須用引號(hào)括起來(lái)在HTML中，你可以不需要給屬性值加引號(hào)，但是在XHTML中，它們必須被加引號(hào)。例如: 必須修改為： 特殊情況，你需要在屬性值里使用雙引號(hào)，你可以用，單引號(hào)可以使用'，例如： 5.把所有和&特殊符號(hào)用編碼表示 任何小于號(hào)（），不是標(biāo)簽的一部分，都必須被編碼為& g t ; 任何與號(hào)（&），不是實(shí)體的一部分的，都必須被編碼為& a m p; 注：以上字符之間無(wú)空格。6.給所有屬性賦一個(gè)值XHTML規(guī)定所有屬性都必須有一個(gè)值，沒(méi)有值的就重復(fù)本身。例如： 必須修改為： 7.不要在注釋內(nèi)容中使“-”“-”只能發(fā)生在XHTML注釋的開(kāi)頭和結(jié)束，也就是說(shuō)，在內(nèi)容中它們不再有效。例如下面的代碼是無(wú)效的: 用等號(hào)或者空格替換內(nèi)部的虛線。 以上這些規(guī)范有的看上去比較奇怪，但這一切都是為了使我們的代碼有一個(gè)統(tǒng)一、唯一的標(biāo)準(zhǔn)，便于以后的數(shù)據(jù)再利用。第7天:CSS入門CSS是Cascading Style Sheets(層疊樣式表)的縮寫(xiě)。是一種對(duì)web文檔添加樣式的簡(jiǎn)單機(jī)制，屬于表現(xiàn)層的布局語(yǔ)言。1.基本語(yǔ)法規(guī)范分析一個(gè)典型CSS的語(yǔ)句：p COLOR:#FF0000;BACKGROUND:#FFFFFF 其中p我們稱為選擇器(selectors)，指明我們要給p定義樣式； 樣式聲明寫(xiě)在一對(duì)大括號(hào)中； COLOR和BACKGROUND稱為屬性(property)，不同屬性之間用分號(hào);分隔； #FF0000和#FFFFFF是屬性的值(value)。2.顏色值顏色值可以用RGB值寫(xiě)，例如：color : rgb(255,0,0)，也可以用十六進(jìn)制寫(xiě)，就象上面例子color:#FF0000。如果十六進(jìn)制值是成對(duì)重復(fù)的可以簡(jiǎn)寫(xiě)，效果一樣。例如:#FF0000可以寫(xiě)成#F00。但如果不重復(fù)就不可以簡(jiǎn)寫(xiě)，例如#FC1A1B必須寫(xiě)滿六位。3.定義字體web標(biāo)準(zhǔn)推薦如下字體定義方法：body font-family : Lucida Grande, Verdana, Lucida, Arial, Helvetica, 宋體,sans-serif; 字體按照所列出的順序選用。如果用戶的計(jì)算機(jī)含有Lucida Grande字體，文檔將被指定為L(zhǎng)ucida Grande。沒(méi)有的話，就被指定為Verdana字體，如果也沒(méi)有Verdana，就指定為L(zhǎng)ucida字體，依此類推，； Lucida Grande字體適合Mac OS X； Verdana字體適合所有的Windows系統(tǒng)； Lucida適合UNIX用戶 宋體適合中文簡(jiǎn)體用戶; 如果所列出的字體都不能用，則默認(rèn)的sans-serif字體能保證調(diào)用; 4.群選擇器當(dāng)幾個(gè)元素樣式屬性一樣時(shí)，可以共同調(diào)用一個(gè)聲明，元素之間用逗號(hào)分隔，： p, td, li font-size : 12px ; 5.派生選擇器可以使用派生選擇器給一個(gè)元素里的子元素定義樣式，例如這樣：li strong font-style : italic; font-weight : normal； 就是給li下面的子元素strong定義一個(gè)斜體不加粗的樣式。6.id選擇器用CSS布局主要用層div來(lái)實(shí)現(xiàn)，而div的樣式通過(guò)id選擇器來(lái)定義。例如我們首先定義一個(gè)層 然后在樣式表里這樣定義：#menubar MARGIN: 0px;BACKGROUND: #FEFEFE;COLOR: #666; 其中menubar是你自己定義的id名稱。注意在前面加#號(hào)。id選擇器也同樣支持派生，例如：#menubar p text-align : right; margin-top : 10px; 這個(gè)方法主要用來(lái)定義層和那些比較復(fù)雜，有多個(gè)派生的元素。6.類別選擇器在CSS里用一個(gè)點(diǎn)開(kāi)頭表示類別選擇器定義，例如：.14px color : #f60 ;font-size:14px ; 在頁(yè)面中，用class=類別名的方法調(diào)用：14px大小的字體 這個(gè)方法比較簡(jiǎn)單靈活，可以隨時(shí)根據(jù)頁(yè)面需要新建和刪除。7.定義鏈接的樣式CSS中用四個(gè)偽類來(lái)定義鏈接的樣式，分別是：a:link、a:visited、a:hover和a : active，例如：a:linkfont-weight : bold ;text-decoration : none ;color : #c00 ;a:visited font-weight : bold ;text-decoration : none ;color : #c30 ;a:hover font-weight : bold ;text-decoration : underline ;color : #f60 ;a:active font-weight : bold ;text-decoration : none ;color : #F90 ; 以上語(yǔ)句分別定義了鏈接、已訪問(wèn)過(guò)的鏈接、鼠標(biāo)停在上方時(shí)、點(diǎn)下鼠標(biāo)時(shí)的樣式。注意，必須按以上順序?qū)懀駝t顯示可能和你預(yù)想的不一樣。記住它們的順序是“LVHA”。第8天:CSS布局入門CSS布局與傳統(tǒng)表格(table)布局最大的區(qū)別在于：原來(lái)的定位都是采用表格，通過(guò)表格的間距或者用無(wú)色透明的GIF圖片來(lái)控制文布局版塊的間距；而現(xiàn)在則采用層(div)來(lái)定位，通過(guò)層的margin ,padding border等屬性來(lái)控制版塊的間距。1.定義DIV分析一個(gè)典型的定義div例子：#sample MARGIN: 10px 10px 10px 10px;PADDING:20px 10px 10px 20px; BORDER-TOP: #CCC 2px solid;BORDER-RIGHT: #CCC 2px solid;BORDER-BOTTOM: #CCC 2px solid;BORDER-LEFT: #CCC 2px solid;BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom;COLOR: #666;TEXT-ALIGN: center;LINE-HEIGHT: 150%; WIDTH:60%; 2.CSS2盒模型自從1996年CSS1的推出，W3C組織就建議把所有網(wǎng)頁(yè)上的對(duì)像都放在一個(gè)盒(box)中，設(shè)計(jì)師可以通過(guò)創(chuàng)建定義來(lái)控制這個(gè)盒的屬性，這些對(duì)像包括段落、列表、標(biāo)題、圖片以及層。盒模型主要定義四個(gè)區(qū)域：內(nèi)容(content)、邊框距(padding)、邊界(border)和邊距(margin)。上面我們講的sample層就是一個(gè)典型的盒。對(duì)于初學(xué)者，經(jīng)常會(huì)搞不清楚margin，background-color，background-image，padding，content，border之間的層次、關(guān)系和相互影響。這里提供一張盒模型的3D示意圖，希望便于你的理解和記憶。3.輔助圖片一律用背景處理用XHTML+CSS布局，有一個(gè)技術(shù)一開(kāi)始讓你不習(xí)慣，應(yīng)該說(shuō)是一種思維方式與傳統(tǒng)表格布局不一樣，那就是：所有輔助圖片都用背景來(lái)實(shí)現(xiàn)。類似這樣：BACKGROUND: url(images/bg_poem.jpg) #FEFEFE no-repeat right bottom; 盡管可以用直接插在內(nèi)容中，但這是不推薦的。這里的輔助圖片是指那些不是作為頁(yè)面要表達(dá)的內(nèi)容的一部分，而僅僅用于修飾、間隔、提醒的圖片。例如：相冊(cè)中的圖片、圖片新聞中的圖片，上面的3d盒模型圖片都屬于內(nèi)容的一部分，它們可以用元素直接插在頁(yè)面里，而其它的類似logo，標(biāo)題圖片，列表前綴圖片都必須采用背景方式或者其他CSS方式顯示。這樣做的原因有2點(diǎn)： 將表現(xiàn)與結(jié)構(gòu)徹底相分離，用CSS控制所有的外觀表現(xiàn)，便于改版。 使頁(yè)面更具有易用性，更有親和力。例如：盲人使用屏幕閱讀機(jī)，用背景技術(shù)實(shí)現(xiàn)的圖片就不會(huì)被朗讀出來(lái)。第9天:第一個(gè)CSS布局實(shí)例接下來(lái)開(kāi)始要真正設(shè)計(jì)布局了。和傳統(tǒng)的方法一樣，你首先要在腦海里有大致的輪廓構(gòu)想，然后用photoshop把它畫(huà)出來(lái)。你可能看到有關(guān)web標(biāo)準(zhǔn)的站點(diǎn)大都很樸素，因?yàn)閣eb標(biāo)準(zhǔn)更關(guān)注結(jié)構(gòu)和內(nèi)容，實(shí)際上它與網(wǎng)頁(yè)的美觀沒(méi)有根本沖突，你想怎么設(shè)計(jì)就怎么設(shè)計(jì)，用傳統(tǒng)表格方法實(shí)現(xiàn)的布局，用DIV也可以實(shí)現(xiàn)。技術(shù)有一個(gè)成熟的過(guò)程，把DIV看成和TABLE一樣的工具，如何運(yùn)用就看你的想象力了。注：在實(shí)際應(yīng)用過(guò)程中，DIV在有些地方的確不如表格方便，比如背景色的定義。但任何事情都有得有失，取舍在于你的價(jià)值判斷。好，不羅嗦了，我們開(kāi)始：1.確定布局2.定義body樣式先定義整個(gè)頁(yè)面的body的樣式,代碼如下：body 以上代碼的作用在上一天的教程有詳細(xì)說(shuō)明，大家應(yīng)該一看就明白。定義了邊框邊距為0；背景顏色為#FEFEFE，背景圖片為bg_logo.gif，圖片位于頁(yè)面右下角，不重復(fù)；定義了字體尺寸為12px；字體顏色為#666;行高150%。3.定義主要的div初次使用CSS布局，我決定采用固定寬度的三列布局(比自適應(yīng)分辨率的設(shè)計(jì)簡(jiǎn)單,hoho，別說(shuō)我偷懶，先實(shí)現(xiàn)簡(jiǎn)單的，增加點(diǎn)信心嘛！)。分別定義左中右的寬度為200:300:280，在CSS中如下定義:/*定義頁(yè)面左列樣式*/#left /*定義頁(yè)面中列樣式*/#middle/*定義頁(yè)面右列樣式*/#right 注意：定義中列和右列div我都采用了POSITION: absolute;，然后分別定義了LEFT:200px;TOP:0px;和LEFT:500px;TOP:0px;這是這個(gè)布局的關(guān)鍵，我采用了層的絕對(duì)定位。定義中間列距離頁(yè)面左邊框200px，距離頂部0px；定義右列距離頁(yè)面左邊框500px，距離頂部0px；。這時(shí)候整個(gè)頁(yè)面的代碼是：歡迎進(jìn)入新網(wǎng)頁(yè)設(shè)計(jì)師:web標(biāo)準(zhǔn)教程及推廣頁(yè)面左列頁(yè)面中列頁(yè)面右列第10天:自適應(yīng)高度如果我們想在3列布局的最后加一行頁(yè)腳，放版權(quán)之類的信息。就遇到必須對(duì)齊3列底部的問(wèn)題。在table布局中，我們用大表格嵌套小表格的方法，可以很方便對(duì)齊三列；而用div布局，三列獨(dú)立分散，內(nèi)容高低不同，就很難對(duì)齊。其實(shí)我們完全可以嵌套div，把三列放進(jìn)一個(gè)DIV中，就做到了底部對(duì)齊。第11天:不用表格的菜單布局初步搭建起來(lái)，我開(kāi)始填充里面的內(nèi)容。首先是定義logo圖片：樣式表：#logo MARGIN: 0px;padding:0px;WIDTH: 200px;HEIGHT:80px;頁(yè)面代碼： 以上代碼現(xiàn)在應(yīng)該容易理解。先在CSS定義了一個(gè)logo的層，然后在頁(yè)面中調(diào)用它。需要說(shuō)明的是，為了使網(wǎng)頁(yè)有更好的易用性，web標(biāo)準(zhǔn)要求大家給所有的、屬于正式內(nèi)容的圖片，加一個(gè)alt屬性。這個(gè)alt屬性是用來(lái)說(shuō)明圖片的作用(當(dāng)圖片不能顯示的時(shí)候就顯示替換文字)，所以不要只寫(xiě)成無(wú)意義的圖片名稱。接下來(lái)是定義菜單。1.不用表格的菜單(縱向)我們先來(lái)看菜單的最終效果：通常方法我們至少嵌套2層表格來(lái)實(shí)現(xiàn)這樣的菜單，間隔線采用在td中設(shè)置背景色并插入1px高的透明GIF圖片實(shí)現(xiàn)；背景色的交替效果采用td的onmouseover事件實(shí)現(xiàn)。但查看本菜單的頁(yè)面代碼，你會(huì)看到只有如下幾句： 什么是網(wǎng)站標(biāo)準(zhǔn)使用標(biāo)準(zhǔn)的好處怎樣過(guò)渡相關(guān)教程工具資源及鏈接 沒(méi)有用任何table,而用的是無(wú)序列，整個(gè)菜單的效果實(shí)現(xiàn)的秘密完全在于id=menu，我們?cè)賮?lái)看CSS中關(guān)于menu的定義：(1)首先定義了menu層的主要樣式:#menu MARGIN: 15px 20px 0px 15px; /*定義層的外邊框距離*/PADDING:15px; /*定義層的內(nèi)邊框?yàn)?5px*/BACKGROUND: #dfdfdf; /*定義背景顏色*/COLOR: #666; /*定義字體顏色*/BORDER:#fff 2px solid; /*定義邊框?yàn)?px白色線條*/WIDTH:160px; /*定義內(nèi)容的寬度為160px*/ (2)其次定義無(wú)序列表的樣式：#menu ul MARGIN: 0px;PADDING: 0px;BORDER: medium none; /*不顯示邊框*/LINE-HEIGHT: normal; LIST-STYLE-TYPE: none;#menu li BORDER-TOP: #FFF 1px solid; MARGIN: 0px; 說(shuō)明：這里用的是id選擇器的派生方法定義(參考第7天：CSS入門的介紹)了在menu層中的子元素和的樣式。LIST-STYLE-TYPE: none一句表示不采用無(wú)序列表的默認(rèn)樣式，即：不顯示小圓點(diǎn)（我們后面用自己的圖標(biāo)來(lái)代替小圓點(diǎn)）。BORDER-TOP: #FFF 1px solid;則定義了菜單之間的1px間隔線。(3)定義onmouseover效果#menu li a PADDING:5px 0px 5px 15px;DISPLAY: block; FONT-WEIGHT: bold; BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; WIDTH: 100%; COLOR: #444; TEXT-DECORATION: none;#menu li a:hover BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px;COLOR: #fff; 解釋如下： display:block;表示將標(biāo)簽a當(dāng)作塊級(jí)元素來(lái)顯示，使得鏈接變成一個(gè)按鈕； BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px;這一句定義了替代li的小圓點(diǎn)的圖標(biāo)。transparent指背景為透明，2px 8px指定圖標(biāo)的位置是距左邊2px，距上邊8px。這一句也可以拆分寫(xiě)成四句：BACKGROUND-IMAGE: url(images/icon_dot_lmenu.gif); BACKGROUND-POSITION: 2px 8px; BACKGROUND-REPEAT: no-repeat; BACKGROUND-COLOR: transparent; #menu li a:hover定義了當(dāng)鼠標(biāo)移動(dòng)到鏈接上以后的顏色變化和小圖標(biāo)變化。 ok，不用表格的菜單就這樣實(shí)現(xiàn)了。大家可以明顯感覺(jué)到，原來(lái)寫(xiě)在HTML里的表現(xiàn)樣式全部剝離放到CSS文件里去了。頁(yè)面代碼節(jié)約了大半。通過(guò)CSS要修改菜單樣式就很簡(jiǎn)單了。2.不用表格的菜單(橫向)上面是縱向的菜單,如果要顯示橫向菜單，用li也可以嗎？當(dāng)然是可以的，下面給出代碼，效果就在本頁(yè)頂部:頁(yè)面代碼 Home關(guān)于我們網(wǎng)站標(biāo)準(zhǔn)標(biāo)準(zhǔn)的好處怎樣過(guò)渡相關(guān)教程工具資源及鏈接常見(jiàn)問(wèn)題 樣式表代碼#submenu MARGIN: 0px 8px 0px 8px; PADDING: 4px 0px 0px 0px; BORDER: #fff 1px solid; BACKGROUND: #dfdfdf; COLOR: #666; HEIGHT:25px; #submenu ul CLEAR: left; MARGIN: 0px; PADDING:0px; BORDER: 0px; LIST-STYLE-TYPE: none; TEXT-ALIGN: center; DISPLAY:inline; #submenu li FLOAT: left; DISPLAY: block; MARGIN: 0px; PADDING: 0px; TEXT-ALIGN: center #submenu li a DISPLAY: block; PADDING:2px 3px 2px 3px; BACKGROUND: url(images/icon_dot_lmenu.gif) transparent no-repeat 2px 8px; FONT-WEIGHT: bold; WIDTH: 100%; COLOR: #444; TEXT-DECORATION: none; #submenu li a:hover BACKGROUND: url(images/icon_dot_lmenu2.gif) #C61C18 no-repeat 2px 8px; COLOR: #fff; #submenu ul li#one A WIDTH: 60px #submenu ul li#two A WIDTH: 80px #submenu ul li#three A WIDTH: 80px #submenu ul li#four A WIDTH: 90px #submenu ul li#five A WIDTH: 80px #submenu ul li#six A WIDTH: 80px #submenu ul li#seven A WIDTH: 60px #submenu ul li#eight A WIDTH: 90px #submenu ul li#nine A WIDTH: 80px 以上代碼不逐一分析了。橫向菜單的關(guān)鍵在于：定義樣式時(shí)的FLOAT: left;語(yǔ)句。另