網(wǎng)站重構(gòu)課件_第1頁
網(wǎng)站重構(gòu)課件_第2頁
網(wǎng)站重構(gòu)課件_第3頁
網(wǎng)站重構(gòu)課件_第4頁
網(wǎng)站重構(gòu)課件_第5頁
已閱讀5頁,還剩34頁未讀 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡介

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

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

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

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

5、entation)和行為(Behavior)。對(duì)應(yīng)的標(biāo)準(zhǔn)也分三方面:結(jié)構(gòu)化標(biāo)準(zhǔn)語言主要包括XHTML和XML,表現(xiàn)標(biāo)準(zhǔn)語言主要包括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)。我們來簡單了解一下這些標(biāo)準(zhǔn): Web 標(biāo)準(zhǔn) 這里有2個(gè)人,一個(gè)是XHtml,一個(gè)是XmlXHtm,Xml穿著Css黑色的衣服拿著黑色的包XHtm,Xml他們在用 Javasrcpit 跑步嘛?還

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

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

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

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

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

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論