《網(wǎng)頁(yè)工程師認(rèn)證-網(wǎng)頁(yè)項(xiàng)目訓(xùn)練》第一章 Web標(biāo)準(zhǔn)與CSS布概述[高教書(shū)苑]

1、網(wǎng)頁(yè)工程師認(rèn)證 網(wǎng)頁(yè)項(xiàng)目訓(xùn)練 主講人：聶宇 1 高級(jí)教育 第一章 Web標(biāo)準(zhǔn)與CSS布局概述 教學(xué)要求 (1) 了解什么是Web標(biāo)準(zhǔn)及其構(gòu)成和發(fā)展。 (2) 了解CSS語(yǔ)法結(jié)構(gòu)。 (3) 了解CSS布局和傳統(tǒng)table布局的區(qū)別。 2 高級(jí)教育 第一章 Web標(biāo)準(zhǔn)與CSS布局概述 教學(xué)重難點(diǎn) (1) Web標(biāo)準(zhǔn) (2) CSS語(yǔ)法結(jié)構(gòu) 3 高級(jí)教育 第一章 Web標(biāo)準(zhǔn)與CSS布局概述 提問(wèn) (1) Web是什么？ (2) CSS是什么？ (3) XHTML是什么？ 4 高級(jí)教育 第一章 Web標(biāo)準(zhǔn)與CSS布局概述 1.1 Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展 Web標(biāo)準(zhǔn)：即網(wǎng)站標(biāo)準(zhǔn)。目前通常所說(shuō)的Web標(biāo)準(zhǔn)

2、一般指進(jìn)行網(wǎng)站建 設(shè)所采用的基于XHTML語(yǔ)言的網(wǎng)站設(shè)計(jì)語(yǔ)言。 網(wǎng)頁(yè)的構(gòu)成：結(jié)構(gòu)、表現(xiàn)和行為 結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言：主要包括XHTML和XML 表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言：主要包括CSS 行為標(biāo)準(zhǔn)：主要包括對(duì)象模型、ECMA Script 5 高級(jí)教育 1.1 Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展 結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言： XML: (Extensible Markup Language)即可擴(kuò)展標(biāo)記語(yǔ)言， 它與HTML一樣，都是SGML (Standard Generalized Markup Language,標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言)。Xml是Internet環(huán) 境中跨平臺(tái)的，依賴(lài)于內(nèi)容的技術(shù)，是當(dāng)前處理結(jié)構(gòu)化文 檔信息的有力工具。 6

3、 高級(jí)教育 1.1 Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展 結(jié)構(gòu)化標(biāo)準(zhǔn)語(yǔ)言： XHTML: (The Extensible HyperText Markup Language) 即可擴(kuò)展超文本標(biāo)識(shí)語(yǔ)言。HTML是一種基本的WEB網(wǎng)頁(yè) 設(shè)計(jì)語(yǔ)言，XHTML是一個(gè)基于XML的置標(biāo)語(yǔ)言，看起來(lái) 與HTML有些相象，只有一些小的但重要的區(qū)別，XHTML 就是一個(gè)扮演著類(lèi)似HTML的角色的XML，所以，本質(zhì)上 說(shuō)，XHTML是一個(gè)過(guò)渡技術(shù)，結(jié)合了部分XML的強(qiáng)大功 能及大多數(shù)HTML的簡(jiǎn)單特性。 7 高級(jí)教育 1.1 Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展 表現(xiàn)標(biāo)準(zhǔn)語(yǔ)言： CSS是Cascading Style Sheets(層疊樣式

4、表)的簡(jiǎn)稱(chēng)。目前 遵循的是W3C于1998年5月12日推薦的CSS 2。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)的訪(fǎng)問(wèn)及維護(hù)更加容易。 8 高級(jí)教育 1.1 Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展 行為標(biāo)準(zhǔn)： DOM是Document Object Model文檔對(duì)象模型的縮寫(xiě)。根 據(jù)W3C DOM規(guī)范，DOM是一種與瀏覽器，平臺(tái)，語(yǔ)言無(wú) 關(guān)的接口，使得你可以訪(fǎng)問(wèn)頁(yè)面其他的標(biāo)準(zhǔn)組件。簡(jiǎn)單理 解，DOM解決了Netscape的JavaScript和Microsoft的 Jscript之間的沖突，給

5、予Web設(shè)計(jì)師和開(kāi)發(fā)者一個(gè)標(biāo)準(zhǔn)的 方法，讓他們來(lái)訪(fǎng)問(wèn)他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì) 像。 9 高級(jí)教育 1.1 Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展 行為標(biāo)準(zhǔn)： ECMAScript是一種由歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ECMA）通 過(guò)ECMA-262標(biāo)準(zhǔn)化的腳本程序設(shè)計(jì)語(yǔ)言。這種語(yǔ)言在萬(wàn) 維網(wǎng)上應(yīng)用廣泛，它往往被稱(chēng)為JavaScript或JScript，但 實(shí)際上后兩者是ECMA-262標(biāo)準(zhǔn)的擴(kuò)展。 10 高級(jí)教育 1.1 Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展 對(duì)網(wǎng)站瀏覽者的好處： 11 高級(jí)教育 1.1 Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展 對(duì)網(wǎng)站所有者的好處： 12 高級(jí)教育 1.2 HTML基本語(yǔ)法 HTML元素構(gòu)成了HTML文件，

6、這些元素是由HTML標(biāo)簽 (tags)所定義的。HTML文件是一種包含了很多標(biāo)簽的純文 本文件，標(biāo)簽告訴瀏覽器如何去顯示頁(yè)面。 從結(jié)構(gòu)上講，HTML文件由元素(element)組成，組成 HTML文件的元素有多種，用于組織文件的內(nèi)容和知道文 件的輸出格式。 13 高級(jí)教育 1.2 HTML基本語(yǔ)法 1）一般標(biāo)簽 一般標(biāo)記由一個(gè)起始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽所組成。例如： 受控文字 2）空標(biāo)簽 雖然大部分標(biāo)簽是成雙成對(duì)的出現(xiàn)，但也有一些是單獨(dú)存 在的，這些標(biāo)記被稱(chēng)為空標(biāo)簽。 14 高級(jí)教育 1.2 HTML基本語(yǔ)法 1.文件結(jié)構(gòu)標(biāo)簽： 2.區(qū)段落式標(biāo)簽： 3.字符格式標(biāo)簽： 4.列表標(biāo)簽： 5.鏈接標(biāo)簽

7、： 6.多媒體標(biāo)簽： 7.表格標(biāo)簽： 8.表單標(biāo)簽： 9.層標(biāo)簽： 15 高級(jí)教育 1.3 從HTML轉(zhuǎn)向XHTML (1) Xhtml中的dtd 過(guò)渡型：Transitional 嚴(yán)格型：Strict 框架型：Frameset 16 高級(jí)教育 1.3 從HTML轉(zhuǎn)向XHTML (2) 需要為標(biāo)簽添加一個(gè)命名空間 (3)所有的標(biāo)簽和標(biāo)簽的屬性都必須小寫(xiě)，屬性值可以大寫(xiě) (4)屬性值必須用雙引號(hào)括起來(lái) (5)所有的標(biāo)簽都必須關(guān)閉，空標(biāo)簽也需要關(guān)閉 (6)不允許屬性簡(jiǎn)寫(xiě) (7)如果使用的文檔類(lèi)型是嚴(yán)格型，則在xhtml文檔中許多 定義外觀的屬性是不允許使用。 17 高級(jí)教育 1.4 CSS的語(yǔ)法結(jié)

8、構(gòu) CSS屬性與選擇符 CSS的語(yǔ)法結(jié)構(gòu)僅僅由3部分組成：選擇符、屬性和值。 例如：body margin-top:20px; body為選擇符，margin-top是屬性，20px是值。 18 高級(jí)教育 1.4 CSS的語(yǔ)法結(jié)構(gòu) ID和Class選擇符 ID選擇符用#標(biāo)識(shí)，在網(wǎng)頁(yè)中每個(gè)ID只可用1次。 例如：呵呵 則CSS中要求如下書(shū)寫(xiě)： #Nelson width:200px;color:red; 19 高級(jí)教育 1.4 CSS的語(yǔ)法結(jié)構(gòu) ID和Class選擇符 Class選擇符用.標(biāo)識(shí)，在網(wǎng)頁(yè)中每個(gè)Class只可用多次。 例如：呵呵 則CSS中要求如下書(shū)寫(xiě)： .Nelson width:

9、200px;color:red; 20 高級(jí)教育 1.4 CSS的語(yǔ)法結(jié)構(gòu) 類(lèi)型選擇符 類(lèi)型選擇符是指將已有的網(wǎng)頁(yè)標(biāo)簽類(lèi)型來(lái)作為名稱(chēng)的選擇 符。 例如： body margin-top:20px; 21 高級(jí)教育 1.4 CSS的語(yǔ)法結(jié)構(gòu) 群組選擇符 群組選擇符是指將一組對(duì)象進(jìn)行相同樣式的定義。 例如： body,div,span margin-top:20px; 注意：這里body和div中間用的是小逗號(hào) 22 高級(jí)教育 1.4 CSS的語(yǔ)法結(jié)構(gòu) 包含選擇符 包含選擇符是指將某一對(duì)象中的子對(duì)象進(jìn)行單獨(dú)的樣式定 義。 例如： .Nelson li margin-top:20px; 注意：這里N

10、elson和li中間用的是空格 應(yīng)用如下： 哇哈哈，OTZ 23 高級(jí)教育 1.4 CSS的語(yǔ)法結(jié)構(gòu) 組合選擇符 例如： .Nelson li,#nie li margin-top:20px; 那么在class為Nelson和id為nie樣式下的li標(biāo)簽的margin- top屬性都為20px了。 24 高級(jí)教育 1.4 CSS的語(yǔ)法結(jié)構(gòu) 標(biāo)簽指定選擇符 如果享用id或class，也想同時(shí)使用標(biāo)簽選擇符?？梢园慈?下格式： 例如： p#nie margin-top:20px; 那么id為nie樣式下的p標(biāo)簽的margin-top屬性都為20px了。 例如： p.nie margin-top:2

11、0px; 那么class為nie樣式下的p標(biāo)簽的margin-top屬性都為20px 了。 25 高級(jí)教育 1.4 CSS的語(yǔ)法結(jié)構(gòu) 偽類(lèi)及偽對(duì)象 偽類(lèi)及偽對(duì)象是一種特殊的類(lèi)和對(duì)象。它由CSS自動(dòng)支持， 屬于CSS的一種擴(kuò)展類(lèi)型和元素，名稱(chēng)不能被用戶(hù)自定義， 使用時(shí)只能按標(biāo)準(zhǔn)格式進(jìn)行應(yīng)用。 例如： a:hover color:green; 那么鼠標(biāo)移動(dòng)到超鏈接上，鏈接文字就編程綠色了。 26 高級(jí)教育 1.4 CSS的語(yǔ)法結(jié)構(gòu) 通配選擇符 通配符是指用字符代替不確定的字，如在DOS中，用*.*表 示所有文件。因此CSS的通配符選擇用*作為關(guān)鍵字。 例如： * font-size:12px; 那

12、么網(wǎng)頁(yè)中所有沒(méi)自定義的文本信息的字體大小默認(rèn)為12 像素。 27 高級(jí)教育 1.5 應(yīng)用CSS到網(wǎng)頁(yè)中 外聯(lián)樣式表 內(nèi)嵌樣式表 body margin-top:20px; 28 高級(jí)教育 1.6 CSS布局和table布局的區(qū)別 實(shí)際上，傳統(tǒng)的table布局方式只是利用了html的table元素所具有的零 邊框特性。由于table元素在顯示的時(shí)候，使得單元格的邊框和間距被 設(shè)置為0，既不顯示邊框，所以可以將網(wǎng)頁(yè)中的各個(gè)元素按照版式劃 分后，分別放入表格的單元格中，從而實(shí)現(xiàn)了復(fù)雜的排版組合效果。 表格布局的最大缺陷為大量樣式設(shè)計(jì)代碼混雜在表格單元格之中，使 得可讀性降低，維護(hù)成本也很高，加上大量

13、的圖片以及其他元素會(huì)導(dǎo) 致網(wǎng)頁(yè)文件量龐大，最終導(dǎo)致瀏覽器下載及解析速度很慢。 29 高級(jí)教育 1.6 CSS布局和table布局的區(qū)別 這是一段典型的表格布局的html源代碼： td width=51% rowspan=2 background=#000000 文本顯示 30 高級(jí)教育 1.6 CSS布局和table布局的區(qū)別 利用css來(lái)布局的代碼： 在表示頁(yè)面中定義個(gè)div，并使用此div的class名稱(chēng)： .example float:left; margin-top:10px; margin-right:20px; margin-bottom:10px; margin-left:10p

14、x; background-color:blue; text-align:center; line-height:160%; width:50%; 31 高級(jí)教育 1.7 常見(jiàn)問(wèn)題 (1)什么是網(wǎng)站重構(gòu)？ 即將現(xiàn)有不符合Web標(biāo)準(zhǔn)的網(wǎng)站轉(zhuǎn)向Web標(biāo)準(zhǔn)去重新設(shè)計(jì)。 (2)什么樣的網(wǎng)站才符合Web標(biāo)準(zhǔn)？ 能通過(guò)w3c代碼驗(yàn)證。 驗(yàn)證地址： /css-validator/ 32 高級(jí)教育 1.7 常見(jiàn)問(wèn)題 (3)Web標(biāo)準(zhǔn)的商業(yè)價(jià)值是什么？ A.加速開(kāi)發(fā) B.易于維護(hù)，增加機(jī)會(huì) C.拓展訪(fǎng)問(wèn)渠道 D.節(jié)約寬帶成本 E.提高用戶(hù)體驗(yàn) F.轉(zhuǎn)變被證明是值得的 33

15、高級(jí)教育 1.7 常見(jiàn)問(wèn)題 (4)初學(xué)Web標(biāo)準(zhǔn)的幾個(gè)誤區(qū) A.不是為了通過(guò)校驗(yàn)才標(biāo)準(zhǔn)化 B.不要用傳統(tǒng)的表格思維來(lái)套div C.不必為了每塊內(nèi)容都建立ID D.不要因?yàn)橐稽c(diǎn)受挫就輕言放棄 34 高級(jí)教育 1.7 常見(jiàn)問(wèn)題 (5)使用Web標(biāo)準(zhǔn)后表格還有用嗎？ A.關(guān)于表格，主要用于數(shù)據(jù)的讀取輸出等。 B.關(guān)于其他元素，可以配合Div+CSS布局來(lái)使用 35 高級(jí)教育 1.7 常見(jiàn)問(wèn)題 (6)可以繼續(xù)使用Html來(lái)設(shè)計(jì)網(wǎng)頁(yè)嗎？ 當(dāng)然，Html也是W3C標(biāo)準(zhǔn)之一！ (7)學(xué)習(xí)CSS布局比表格難嗎？ 其實(shí)不難，只是概念的轉(zhuǎn)換而已。 Web標(biāo)準(zhǔn)只是相對(duì)于 html來(lái)說(shuō)，有了更多的標(biāo)簽來(lái)使用，當(dāng)然可以繼續(xù)使用 html了。 36 高級(jí)教育 1.7 常見(jiàn)問(wèn)題 (8)CSS布局是否必須就要手寫(xiě)代碼？ 嗯，目前是的，不過(guò)DW已經(jīng)提供了所見(jiàn)即所得的設(shè)計(jì)模 式。 (9)為什么能直接過(guò)度到XML？ XML是未來(lái)數(shù)據(jù)的描述格式，在時(shí)機(jī)成熟，XML會(huì)取代 XHTML和HTM