網(wǎng)站重構(gòu)課件

1、Adam1985于亞東Web 傳統(tǒng)網(wǎng)站是一個“完美”的“和諧社會”，一切即table，table即一切。表格視乎和諧一切Web 傳統(tǒng)網(wǎng)站David Siegel 印刷專家 有人說我毀掉了Web，我回答他們，的確如此。我毀掉了Web是因為我把巧克力和花生醬混合在一起卻再也不能把他們分開。我犯下了把結(jié)構(gòu)跟表現(xiàn)混合在一起的錯誤。 David Siegel 他是一個印刷專家。那麼在1997年的時候，這位印刷專家David Siegel改變了web，他自己研究出了一項網(wǎng)頁布局技術(shù)，利用html中的的元素和gif圖片縫合在一起了，創(chuàng)造了表格布局技術(shù)，之后它就猶如一頭猛獸泛濫起來。于是乎許多設(shè)計師們對他在w

2、eb上復(fù)制傳統(tǒng)印刷媒體布局方法感到欣喜若狂，從此以后數(shù)百萬的頁面把結(jié)構(gòu)跟表現(xiàn)混雜在一起。在這之后David Siegel在內(nèi)的很多人，很快提出反對采用表格進行布局的言論，但我們知道猛獸一旦釋放就很難在關(guān)起來，加上當時沒有有效的方法解決這個問題，猛獸在我們身邊自由的徘徊，甚至到現(xiàn)在。我們可以看看互聯(lián)網(wǎng)上仍然有很多網(wǎng)站都是采用的傳統(tǒng)方式布局。 David Siegel 早在1997年，有一個通用的慣例netscape瀏覽器使用javascript，為微軟的ie使用jscript（一種類似于javasrcipt的腳本語言）。Javasrcipt只能運行在netscape，而微軟的ActiveX只能運

3、行在ie上一樣。只能為不同的瀏覽器些不同的代碼去適應(yīng)，這些是為3.0版本做的事情，1997年下半年的時候，netscape和ie都退推出了4.0，每個都吹噓有強大的dhtml（動態(tài)的html），但他們完全不兼容，更不用說不知名的瀏覽器了，而且跟3.0的版本還無法兼容，想讓自己的網(wǎng)站在幾個瀏覽器中同時使用的就要做幾個不同的版本，幾個功能都要些幾個不同的版本去適應(yīng)不同的瀏覽器，開發(fā)成本最少增加了25%；所以一些開發(fā)者限制他們的網(wǎng)站只適應(yīng)其中一個版本的瀏覽器。而且網(wǎng)站隨時面臨這過時的命運。Netscape and IE “民主”的web發(fā)布工具 在我的國度里，你們可以不守任何規(guī)矩，你們是自由的是平等

4、的，大家享有同樣的生活方式。 民主的發(fā)布工具網(wǎng)站重構(gòu)Web標準&GarbageInGarbageOutWEB標準 WEB標準 Web標準組織（W3C）于1998年發(fā)起，目的是說服Netscape、Microsoft和其他瀏覽器生產(chǎn)商徹底支持標準。他采用從容進行、堅持和策略性的方法（又稱“叫，大叫和辯論”方法），最終使得瀏覽器生產(chǎn)商同意引進一系列標準。通過共同的標準協(xié)同工作，是Web 向前發(fā)展必需的觀點。Web 標準組織 WEB標準 WEB標準 為什么標準化？ WEB標準 WEB標準 Web標準不是某一個標準，而是一系列標準的集合。網(wǎng)頁主要由三部分組成：結(jié)構(gòu)（Structure）、表現(xiàn)（Pres

5、entation）和行為（Behavior）。對應(yīng)的標準也分三方面：結(jié)構(gòu)化標準語言主要包括XHTML和XML，表現(xiàn)標準語言主要包括CSS，行為標準主要包括對象模型（如W3C DOM）、ECMAScript等。這些標準大部分由W3C起草和發(fā)布，也有一些是其他標準組織制訂的標準，比如ECMA（European Computer Manufacturers Association）的ECMAScript標準。我們來簡單了解一下這些標準： Web 標準 這里有2個人,一個是XHtml，一個是XmlXHtm，Xml穿著Css黑色的衣服拿著黑色的包XHtm，Xml他們在用 Javasrcpit 跑步嘛？還

6、是？結(jié)構(gòu)表現(xiàn)行為WEB標準 WEB標準 1）XHTML XHTML是The Extensible HyperText Markup Language可擴展標識語言的縮寫。目前推薦遵循的是W3C于2000年1月26日推薦XML1.0。XML雖然數(shù)據(jù)轉(zhuǎn)換能力強大，完全可以替代HTML，但面對成千上萬已有的站點，直接采用XML還為時過早。因此，我們在HTML4.0的基礎(chǔ)上，用XML的規(guī)則對其進行擴展，得到了XHTML。簡單的說，建立XHTML的目的就是實現(xiàn)HTML向XML的過渡。 2）XML XML是The Extensible Markup Language(可擴展標識語言)的簡寫。目前推薦遵循的

7、是W3C于2000年10月6日發(fā)布的XML1.0，和HTML一樣，XML同樣來源于SGML，但XML是一種能定義其他語言的語。XML最初設(shè)計的目的是彌補HTML的不足，以強大的擴展性滿足網(wǎng)絡(luò)信息發(fā)布的需要，后來逐漸用于網(wǎng)絡(luò)數(shù)據(jù)的轉(zhuǎn)換和描述。1結(jié)構(gòu)標準語言 WEB標準 WEB標準 良好XHTML編寫習慣1）屬性名稱必須小寫網(wǎng)頁頭部2) 屬性值必須使用雙引號 Adam1985 3）使用id代替name4) 必須使用結(jié)束標簽 Adam1985 WEB標準 WEB標準 CSS是Cing Style Sheets層疊樣式表的縮寫。目前推薦遵循的是W3C于1998年5月12日推薦CSS2。W3C創(chuàng)建CSS

8、標準的目的是以CSS取代HTML表格式布局、幀和其他表現(xiàn)的語言。純CSS布局與結(jié)構(gòu)式XHTML相結(jié)合能幫助設(shè)計師分離外觀與結(jié)構(gòu)，使站點的訪問及維護更加容易。2. 表現(xiàn)標準語言WEB標準 WEB標準 1）DOMDOM是Document Object Model文檔對象模型的縮寫。根據(jù)W3C DOM規(guī)范，DOM是一種與瀏覽器，平臺，語言的接口，使得你可以訪問頁面其他的標準組件。簡單理解，DOM解決了Netscaped的Javascript和Microsoft的Jscript之間的沖突，給予web設(shè)計師和開發(fā)者一個標準的方法，讓他們來訪問他們站點中的數(shù)據(jù)、腳本和表現(xiàn)層對像。2) ECMAScript

9、ECMAScript是ECMA(European Computer Manufacturers Association)制定的標準腳本語言（JAVAScript）。目前推薦遵循的是ECMAScript 262。3.行為標準 WEB標準 WEB標準 現(xiàn)代瀏覽器WEB標準 WEB標準 為頁面添加正確的DOCTYPE1)過渡型（Transitional ） 2)嚴格型（Strict ） 3)框架型（Frameset ） WEB標準 WEB標準 設(shè)定一個名字空間（Namespace）直接在DOCTYPE聲明后面添加如下代碼：一個namespace是收集元素類型和屬性名字的一個詳細的DTD，namesp

10、ace聲明允許你通過一個在線地址指向來識別你的namespace。WEB標準 WEB標準 聲明你的編碼語言為了被瀏覽器正確解釋和通過標識校驗，所有的XHTML文檔都必須聲明它們所使用的編碼語言。代碼如下：這里聲明的編碼語言是簡體中文GB2312，你如果需要制作繁體內(nèi)容，可以定義為BIG5。我是圣誕老人小朋友們等著我送禮物呢我是一輛車每天都有人乘坐我我就是全世界最受歡迎的運動工具足球WEB標準 WEB標準 選擇合適的標簽1）布局網(wǎng)頁頭部網(wǎng)頁內(nèi)容 網(wǎng)頁底部 2) 文本文章標題文章副標題 -用于識別標題內(nèi)容 正文WEB標準 WEB標準 文字加粗 文字加粗 3）圖片及其他元素Flash元素經(jīng)常用到 4）列表元素ulollidldtddWEB標準 WEB標準 CSS1）嵌入樣式 import url(css/layout.css) ; 2) 行內(nèi)樣式Home3）連接樣式WEB標準 WEB標準 CSS語法結(jié)構(gòu)1）類選擇符body div span 2) 群組選擇符 h1,h2,h3,p,span 3）包含選擇符h1 span 4) id及class選擇符#adam1985 .apple W