《模塊2Web標準及其構成》由會員分享，可在線閱讀，更多相關《模塊2Web標準及其構成（20頁珍藏版）》請在裝配圖網上搜索。
1、單擊此處編輯母版標題樣式,,單擊此處編輯母版文本樣式,,第二級,,第三級,,第四級,,第五級,,*,基于,Web,標準的網頁設計,*,單擊此處編輯母版標題樣式,,單擊此處編輯母版文本樣式,,第二級,,第三級,,第四級,,第五級,,*,煙臺職業(yè)學院信息工程系,*,單擊此處編輯母版標題樣式,,單擊此處編輯母版文本樣式,,第二級,,第三級,,第四級,,第五級,,*,煙臺職業(yè)學院信息工程系,*,單擊此處編輯母版標題樣式,,單擊此處編輯母版文本樣式,,第二級,,第三級,,第四級,,第五級,,*,煙臺職業(yè)學院信息工程系,*,10/24/2024,煙臺職業(yè)學院信息工程系,模塊,2 Web,標準及其構成,【
2、任務目標】,,了解與Web標準相關的組織。,,掌握Web標準的構成以及每一部分的作用。,,了解DIV+CSS布局與表格布局的差異。,,了解Web標準的發(fā)展歷程。,,了解瀏覽器的兼容性問題。,,,10/24/2024,基于,Web,標準的網頁設計,2.1 Web,標準介紹,,Web,標準,,,W3C,,,ECMA,10/24/2024,煙臺職業(yè)學院信息工程系,,2.1.1 Web,標準,,Web,標準不是某一個標準，而是一系列標準的集合。,Web,標準是由,W3C,（,world wide web consortium,）和其他標準化組織制定的一套規(guī)范集合。這些規(guī)范是專門為了那些在網上發(fā)布的
3、可向后兼容的文檔所設計的，使其能夠被大多數人訪問。,,,網頁主要由,3,部分組成：結構（,structure,）、表現(xiàn)（,presentation,）和行為（,behavior,）。對應的標準也分為,3,方面：結構化標準語言主要包括,XHTML,和,XML,，表現(xiàn)標準語言主要包括,CSS,，行為標準語言主要包括對象模型（如,W3C DOM,）、,ECMAScript,等。,,10/24/2024,2.1 Web,標準介紹,主要內容：,,,Web,標準,,W3C,,ECMA,10/24/2024,基于,Web,標準的網頁設計,2.1.1 Web,標準,Web,標準不是某一個標準，而是一系列標
4、準的集合。,Web,標準是由,W3C,（,world wide web consortium,）和其他標準化組織制定的一套規(guī)范集合。這些規(guī)范是專門為了那些在網上發(fā)布的可向后兼容的文檔所設計的，使其能夠被大多數人訪問。,,,網頁主要由,3,部分組成：結構（,structure,）、表現(xiàn)（,presentation,）和行為（,behavior,）。對應的標準也分為,3,方面：結構化標準語言主要包括,XHTML,和,XML,，表現(xiàn)標準語言主要包括,CSS,，行為標準語言主要包括對象模型（如,W3C DOM,）、,ECMAScript,等。,,10/24/2024,基于,Web,標準的網頁設計,2.
5、1.2 W3C,,W3C,的中文譯名為萬維網組織，它是一個專注于,“,領導和發(fā)展,Web,技術,”,的國際工業(yè)行業(yè)協(xié)會。,,,W3C,的主要工作是研究和制定開放的規(guī)范（事實上的標準），以便提高,Web,相關產品的互用性。,W3C,的推薦規(guī)范的制定都是由來自會員和特別邀請的專家組成的工作組完成。工作組的草案（,drafts,）在通過多數相關公司和組織同意后提交給,W3C,理事會討論，正式批準后才成為,“,推薦規(guī)范（,recommendations,）,”,發(fā)布。,10/24/2024,基于,Web,標準的網頁設計,2.1.2 W3C,W3C,發(fā)布的標準主要有以下內容：,,1.HTML 4.0
6、,,超文本標記語言,HTML,廣泛用于現(xiàn)在的網頁，,HTML,可以為文檔增加結構信息。,,,2.XML 1.0,,XML,是,extensible markup language,（可擴展標記語言）的簡寫。,XML,類似于,HTML,，但,XML,允許用戶自己定義標簽，甚至允許用戶通過,XML namespaces,為一個文檔定義多套設定。,,3.CSS 2.0,,,CSS,指層疊樣式表。通過,CSS,可以控制,HTML,或者,XML,標簽的表現(xiàn)形式。,,4.XHTML 1.0,,實際上，,XHTML,就是將,HTML,根據,XML,規(guī)范重新定義一遍。它的標簽與,HTML 4.0,一致，而格式
7、嚴格遵循,XML,規(guī)范。,,5.DOM 1.0,,DOM,是,document object model,文檔對象模型的縮寫。它使腳本語言很容易訪問到整個文檔的結構、表現(xiàn)和行為。,,10/24/2024,基于,Web,標準的網頁設計,2.1.3 ECMA,ECMA是European Computer Manufactures Association的縮寫，中文名稱為歐洲計算機制造聯(lián)合會，是1961年成立的旨在建立統(tǒng)一的計算機操作格式標準，包括程序語言和輸入輸出的組織。,,ECMA發(fā)布了標準ECMAScript。ECMAScript是基于Netscape JavaScript的一種標準腳本語言
8、。它也是一種基于對象的語言，通過DOM可以操作網頁上的任何對象。可以增加、刪除、移動或者改變對象。使得網頁的交互性大大提高。,,,10/24/2024,基于,Web,標準的網頁設計,2.2 Web,標準技術的構成,結構,,,,表現(xiàn),,,行為,10/24/2024,基于,Web,標準的網頁設計,2.2.1,結構,結構用來對網頁中用到的信息進行整理與分類。用于結構化設計的,Web,標準技術主要有兩種：,XHTML,和,XML,。,,XHTML,有,3,種定義：嚴格的（,strict,），過渡的（,transitional,），框架的（,frameset,）。,,DTD,是,document ty
9、pe definition,（文檔類型定義）的縮寫，它寫在,XHTML,文件的開始位置，告訴瀏覽器這個文檔符合什么規(guī)范，用什么規(guī)范來解析。,,XML,即可擴展標記語言，目前推薦遵循的是,W3C,于,2000,年,10,月,6,日發(fā)布的,XML 1.0,版本，和,HTML,一樣，,XML,同樣來源于古老的標準通用標記語言，但,XML,是一種能定義其他語言的語言。,XML,最初設計的目的是彌補,HTML,的不足，以其強大的擴展性滿足網絡信息發(fā)布的需要，后來逐漸用于網絡數據的轉換及描述。,,10/24/2024,基于,Web,標準的網頁設計,2.2.2,表現(xiàn),,表現(xiàn)技術用于對已經被結構化的信息進行顯
10、示上的控制，包括版式、顏色、大小等樣式控制。,W3C,創(chuàng)建,CSS,標準的目的是希望以,CSS,來描述整個頁面的布局設計，與,HTML,所負責的結構分開，使站點的構建及維護更加容易。,,相對于結構設計來講，表現(xiàn)層的樣式設計變化更豐富，也更難掌握。對于千變萬化的網頁設計，如何將設計編碼成機器能夠識別的樣式語言也是,CSS,的工作重點，,CSS,豐富的樣式表現(xiàn)也對設計者提出了更高的要求。,10/24/2024,基于,Web,標準的網頁設計,2.2.3,行為,行為是指對整個文檔內部的一個模型進行定義及交互行為的編寫，用于編寫用戶可以進行交互式操作的文檔。行為標準也包括兩部分：,DOM,和,ECMAS
11、cript,，其具體區(qū)別如下。,,DOM,指文檔對象模型。,W3C,建立的,W3C DOM,是建立網頁與,Script,或程序語言溝通的橋梁。它實現(xiàn)了訪問頁面中標準組件的一種標準方法。,,10/24/2024,基于,Web,標準的網頁設計,2.3 Web,標準的優(yōu)勢,表現(xiàn)與內容分離,,,DIV+CSS,布局優(yōu)于表格布局,10/24/2024,基于,Web,標準的網頁設計,2.3.1,表現(xiàn)與內容分離,使用表現(xiàn)與內容分離技術的好處主要有以下幾方面：,,,,,高效率的開發(fā)與簡單維護,,,信息跨平臺的可用性,,,降低服務器成本,,,便于改版,,,加快網頁解析速度,,,與未來兼容,,,更好的用戶體驗,
12、,10/24/2024,基于,Web,標準的網頁設計,2.3.2 DIV+CSS,布局優(yōu)于表格布局,用,DIV+CSS,布局來替代傳統(tǒng)的,Table,布局有以下幾方面的原因：,,DIV+CSS,布局遵循表現(xiàn)與內容分離的原則,,使用,DIV+CSS,布局生成的網頁文件網頁代碼精簡、更小、打開更快,,改版網站更簡單容易,,搜索引擎更友好,,從頁面的設計效果來看，任何用表格布局的頁面完全能夠用,DIV+CSS,布局實現(xiàn),,10/24/2024,基于,Web,標準的網頁設計,2.4 Web,標準的發(fā)展及面臨的問題,Web,標準的發(fā)展,,,瀏覽器兼容性問題,”,10/24/2024,基于,Web,標
13、準的網頁設計,2.4.1 Web,標準的發(fā)展,HTML是一門不夠嚴謹的語言,主要用于頁面的設計與表現(xiàn),,XHTML是一門面向結構的語言，主要用于對網頁內容進行結構設計，其嚴謹的語法結構有利于瀏覽器進行解析處理。XHTML也是XML的過渡型語言。,,XML是完全面向結構的設計語言,,W3C制定用于文本設計的技術標準CSS，實現(xiàn)了網頁的結構與表現(xiàn)分離，CSS 2.0版本得到推廣。,,交互性也是Web發(fā)展的標志之一，JavaScript提供了如增加、改變或刪除信息以及更為豐富的交互方式,,10/24/2024,基于,Web,標準的網頁設計,2.4.2 Web,標準的兼容性問題,Web,標準的兼容
14、性好，但通常說的兼容是指向后兼容，向新瀏覽器、新設備兼容。對已有的瀏覽器來說，它們對,Web,標準的支持程度不一樣，因此會出現(xiàn)不同瀏覽器下頁面變形的情況。,,（,1,）標準模式：,,是,W3C,所倡導的,W3C,國際通行標準,,（,2,）混雜模式：,,微軟為了保持瀏覽器良好的向后兼容性，為用戶提供了一個“開關”，來決定瀏覽器的工作模式。開關可以決定瀏覽器采用“標準模式”或者“混雜模式”?；祀s模式自,IE 5.5,開始，在,IE6,、,IE7,、,IE8,均有該模式。在“混雜模式”下，那么各瀏覽器之間表現(xiàn)出的差異將會非常大，影響網民的瀏覽體驗。,10/24/2024,基于,Web,標準的網頁設計
15、,思考與練習,,一、填空題,,1.Web,標準的制定者是,_________,。,,2.Web,標準的,3,個方面包括：結構化標準語言主要有,XHTML,和,XML,、,____________________,和,__________________,。,,3.XHTML,是,_____________,（可擴展超文本標識語言）的縮寫。,HTML,是一種基本的,Web,網頁設計語言，,XHTML,是一種基于,___________,的標記語言。,,二、簡答題,,1.,什么是,Web,標準？為什么要使用,Web,標準來開發(fā)網頁？,,2.,簡述,HTML,與,XHTML,的區(qū)別。,,3.Web,標準由哪幾方面構成？各方面的作用是什么？,,4.,如何改善現(xiàn)有網站？,,2024/10/24,基于,Web,標準的網頁設計,20,
模塊2Web標準及其構成
