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

1、網(wǎng)頁工程師認(rèn)證網(wǎng)頁項(xiàng)目訓(xùn)練,計(jì)算機(jī)技術(shù)系軟件教研室,第一章 web標(biāo)準(zhǔn)與css布局概述,教學(xué)要求 (1) 了解什么是web標(biāo)準(zhǔn)及其構(gòu)成和發(fā)展。 (2) 了解css語法結(jié)構(gòu)。 (3) 了解css布局和傳統(tǒng)table布局的區(qū)別。,計(jì)算機(jī)技術(shù)系軟件教研室,第一章 web標(biāo)準(zhǔn)與css布局概述,教學(xué)重難點(diǎn) (1) web標(biāo)準(zhǔn) (2) css語法結(jié)構(gòu),計(jì)算機(jī)技術(shù)系軟件教研室,第一章 web標(biāo)準(zhǔn)與css布局概述,提問 (1) web是什么？ (2) css是什么？ (3) xhtml是什么？,計(jì)算機(jī)技術(shù)系軟件教研室,第一章 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)。

2、目前通常所說的web標(biāo)準(zhǔn)一般指進(jìn)行網(wǎng)站建設(shè)所采用的基于xhtml語言的網(wǎng)站設(shè)計(jì)語言。 網(wǎng)頁的構(gòu)成：結(jié)構(gòu)、表現(xiàn)和行為 結(jié)構(gòu)化標(biāo)準(zhǔn)語言：主要包括xhtml和xml 表現(xiàn)標(biāo)準(zhǔn)語言：主要包括css 行為標(biāo)準(zhǔn)：主要包括對(duì)象模型、ecma script,計(jì)算機(jī)技術(shù)系軟件教研室,1.1 web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展,結(jié)構(gòu)化標(biāo)準(zhǔn)語言： xml: (extensible markup language)即可擴(kuò)展標(biāo)記語言，它與html一樣，都是sgml (standard generalized markup language,標(biāo)準(zhǔn)通用標(biāo)記語言)。xml是internet環(huán)境中跨平臺(tái)的，依賴于內(nèi)容的技術(shù)，是當(dāng)前處理結(jié)構(gòu)

3、化文檔信息的有力工具。,計(jì)算機(jī)技術(shù)系軟件教研室,1.1 web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展,結(jié)構(gòu)化標(biāo)準(zhǔn)語言： xhtml: (the extensible hypertext markup language)即可擴(kuò)展超文本標(biāo)識(shí)語言。html是一種基本的web網(wǎng)頁設(shè)計(jì)語言，xhtml是一個(gè)基于xml的置標(biāo)語言，看起來與html有些相象，只有一些小的但重要的區(qū)別，xhtml就是一個(gè)扮演著類似html的角色的xml，所以，本質(zhì)上說，xhtml是一個(gè)過渡技術(shù)，結(jié)合了部分xml的強(qiáng)大功能及大多數(shù)html的簡單特性。,計(jì)算機(jī)技術(shù)系軟件教研室,1.1 web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展,表現(xiàn)標(biāo)準(zhǔn)語言： css是cascading

4、style sheets(層疊樣式表)的簡稱。目前遵循的是w3c于1998年5月12日推薦的css 2。w3c創(chuàng)建css標(biāo)準(zhǔn)的目的是以css取代html表格式布局、幀和其他表現(xiàn)的語言。純css布局與結(jié)構(gòu)式xhtml相結(jié)合能幫助設(shè)計(jì)師分離外觀與結(jié)構(gòu)，使站點(diǎn)的訪問及維護(hù)更加容易。,計(jì)算機(jī)技術(shù)系軟件教研室,1.1 web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展,行為標(biāo)準(zhǔn)： dom是document object model文檔對(duì)象模型的縮寫。根據(jù)w3c dom規(guī)范，dom是一種與瀏覽器，平臺(tái)，語言無關(guān)的接口，使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件。簡單理解，dom解決了netscape的javascript和microsoft的

5、jscript之間的沖突，給予web設(shè)計(jì)師和開發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，讓他們來訪問他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)像。,計(jì)算機(jī)技術(shù)系軟件教研室,1.1 web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展,行為標(biāo)準(zhǔn)： ecmascript是一種由歐洲計(jì)算機(jī)制造商協(xié)會(huì)（ecma）通過ecma-262標(biāo)準(zhǔn)化的腳本程序設(shè)計(jì)語言。這種語言在萬維網(wǎng)上應(yīng)用廣泛，它往往被稱為javascript或jscript，但實(shí)際上后兩者是ecma-262標(biāo)準(zhǔn)的擴(kuò)展。,計(jì)算機(jī)技術(shù)系軟件教研室,1.1 web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展,對(duì)網(wǎng)站瀏覽者的好處： 文件下載與頁面顯示速度更快 內(nèi)容能被更多的用戶所訪問（包括失明、視弱、色盲等殘障人士） 內(nèi)容能被更廣泛的設(shè)備

6、所訪問（包括屏幕閱讀機(jī)、手持設(shè)備、搜索機(jī)器人、打印機(jī)、電冰箱等等） 用戶能夠通過樣式選擇定制自己的表現(xiàn)界面 所有頁面都能提供適于打印的版本,計(jì)算機(jī)技術(shù)系軟件教研室,1.1 web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展,對(duì)網(wǎng)站所有者的好處： 更少的代碼和組件，容易維護(hù) 帶寬要求降低（代碼更簡潔），成本降低 更容易被搜尋引擎搜索到 改版方便，不需要變動(dòng)頁面內(nèi)容 提供打印版本而不需要復(fù)制內(nèi)容 提高網(wǎng)站易用性,計(jì)算機(jī)技術(shù)系軟件教研室,1.2 html基本語法,html元素構(gòu)成了html文件，這些元素是由html標(biāo)簽(tags)所定義的。html文件是一種包含了很多標(biāo)簽的純文本文件，標(biāo)簽告訴瀏覽器如何去顯示頁面。 從結(jié)構(gòu)上講

7、，html文件由元素(element)組成，組成html文件的元素有多種，用于組織文件的內(nèi)容和知道文件的輸出格式。,計(jì)算機(jī)技術(shù)系軟件教研室,1.2 html基本語法,1）一般標(biāo)簽 一般標(biāo)記由一個(gè)起始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽所組成。例如：受控文字 2）空標(biāo)簽 雖然大部分標(biāo)簽是成雙成對(duì)的出現(xiàn)，但也有一些是單獨(dú)存在的，這些標(biāo)記被稱為空標(biāo)簽。,計(jì)算機(jī)技術(shù)系軟件教研室,1.2 html基本語法,1.文件結(jié)構(gòu)標(biāo)簽：html,head,body 2.區(qū)段落式標(biāo)簽：title,hi,br,p,pre,address 3.字符格式標(biāo)簽：b,i,tt,font,center,blink,big 4.列表標(biāo)簽：ul,ol

8、,il,dl,dd,dt,dir,menu 5.鏈接標(biāo)簽：a 6.多媒體標(biāo)簽：img,embed,bgsound 7.表格標(biāo)簽：table,td,tr,th,caption 8.表單標(biāo)簽：form,input,textarea,select 9.層標(biāo)簽：div,計(jì)算機(jī)技術(shù)系軟件教研室,1.3 從html轉(zhuǎn)向xhtml,(1) xhtml中的dtd 過渡型：transitional 嚴(yán)格型：strict 框架型：frameset,計(jì)算機(jī)技術(shù)系軟件教研室,1.3 從html轉(zhuǎn)向xhtml,(2) 需要為標(biāo)簽添加一個(gè)命名空間 (3)所有的標(biāo)簽和標(biāo)簽的屬性都必須小寫，屬性值可以大寫 (4)屬性值必須用

9、雙引號(hào)括起來 (5)所有的標(biāo)簽都必須關(guān)閉，空標(biāo)簽也需要關(guān)閉 (6)不允許屬性簡寫 (7)如果使用的文檔類型是嚴(yán)格型，則在xhtml文檔中許多定義外觀的屬性是不允許使用。,計(jì)算機(jī)技術(shù)系軟件教研室,1.4 css的語法結(jié)構(gòu),css屬性與選擇符 css的語法結(jié)構(gòu)僅僅由3部分組成：選擇符、屬性和值。 例如：body margin-top:20px; body為選擇符，margin-top是屬性，20px是值。,計(jì)算機(jī)技術(shù)系軟件教研室,1.4 css的語法結(jié)構(gòu),id和class選擇符 id選擇符用#標(biāo)識(shí)，在網(wǎng)頁中每個(gè)id只可用1次。 例如：呵呵 則css中要求如下書寫： #nelson width:20

10、0px;color:red;,計(jì)算機(jī)技術(shù)系軟件教研室,1.4 css的語法結(jié)構(gòu),id和class選擇符 class選擇符用.標(biāo)識(shí)，在網(wǎng)頁中每個(gè)class只可用多次。 例如：呵呵 則css中要求如下書寫： .nelson width:200px;color:red;,計(jì)算機(jī)技術(shù)系軟件教研室,1.4 css的語法結(jié)構(gòu),類型選擇符 類型選擇符是指將已有的網(wǎng)頁標(biāo)簽類型來作為名稱的選擇符。 例如： body margin-top:20px; ,計(jì)算機(jī)技術(shù)系軟件教研室,1.4 css的語法結(jié)構(gòu),群組選擇符 群組選擇符是指將一組對(duì)象進(jìn)行相同樣式的定義。 例如： body,div,span margin-to

11、p:20px; 注意：這里body和div中間用的是小逗號(hào),計(jì)算機(jī)技術(shù)系軟件教研室,1.4 css的語法結(jié)構(gòu),包含選擇符 包含選擇符是指將某一對(duì)象中的子對(duì)象進(jìn)行單獨(dú)的樣式定義。 例如： .nelson li margin-top:20px; 注意：這里nelson和li中間用的是空格 應(yīng)用如下： 哇哈哈，otz ,計(jì)算機(jī)技術(shù)系軟件教研室,1.4 css的語法結(jié)構(gòu),組合選擇符 例如： .nelson li,#nie li margin-top:20px; 那么在class為nelson和id為nie樣式下的li標(biāo)簽的margin-top屬性都為20px了。,計(jì)算機(jī)技術(shù)系軟件教研室,1.4 css

12、的語法結(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:20px; 那么class為nie樣式下的p標(biāo)簽的margin-top屬性都為20px了。,計(jì)算機(jī)技術(shù)系軟件教研室,1.4 css的語法結(jié)構(gòu),偽類及偽對(duì)象 偽類及偽對(duì)象是一種特殊的類和對(duì)象。它由css自動(dòng)支持，屬于css的一種擴(kuò)展類型和元素，名稱不能被用戶自定義，使用時(shí)只能按標(biāo)準(zhǔn)格式進(jìn)行應(yīng)用。 例如： a:hover color:g

13、reen; 那么鼠標(biāo)移動(dòng)到超鏈接上，鏈接文字就編程綠色了。,計(jì)算機(jī)技術(shù)系軟件教研室,1.4 css的語法結(jié)構(gòu),通配選擇符 通配符是指用字符代替不確定的字，如在dos中，用*.*表示所有文件。因此css的通配符選擇用*作為關(guān)鍵字。 例如： * font-size:12px; 那么網(wǎng)頁中所有沒自定義的文本信息的字體大小默認(rèn)為12像素。,計(jì)算機(jī)技術(shù)系軟件教研室,1.5 應(yīng)用css到網(wǎng)頁中,外聯(lián)樣式表 內(nèi)嵌樣式表 body margin-top:20px; ,計(jì)算機(jī)技術(shù)系軟件教研室,1.6 css布局和table布局的區(qū)別,實(shí)際上，傳統(tǒng)的table布局方式只是利用了html的table元素所具有的零邊

14、框特性。由于table元素在顯示的時(shí)候，使得單元格的邊框和間距被設(shè)置為0，既不顯示邊框，所以可以將網(wǎng)頁中的各個(gè)元素按照版式劃分后，分別放入表格的單元格中，從而實(shí)現(xiàn)了復(fù)雜的排版組合效果。 表格布局的最大缺陷為大量樣式設(shè)計(jì)代碼混雜在表格單元格之中，使得可讀性降低，維護(hù)成本也很高，加上大量的圖片以及其他元素會(huì)導(dǎo)致網(wǎng)頁文件量龐大，最終導(dǎo)致瀏覽器下載及解析速度很慢。,計(jì)算機(jī)技術(shù)系軟件教研室,1.6 css布局和table布局的區(qū)別,這是一段典型的表格布局的html源代碼： 文本顯示 ,計(jì)算機(jī)技術(shù)系軟件教研室,1.6 css布局和table布局的區(qū)別,利用css來布局的代碼： 在表示頁面中定義個(gè)div，并

15、使用此div的class名稱： .example float:left; margin-top:10px; margin-right:20px; margin-bottom:10px; margin-left:10px; background-color:blue; text-align:center; line-height:160%; width:50%; ,計(jì)算機(jī)技術(shù)系軟件教研室,1.7 常見問題,(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)？ 能通過w3c代碼驗(yàn)證。 驗(yàn)證地址： http:/jigsaw.w3.or

16、g/css-validator/,計(jì)算機(jī)技術(shù)系軟件教研室,1.7 常見問題,(3)web標(biāo)準(zhǔn)的商業(yè)價(jià)值是什么？ a.加速開發(fā) b.易于維護(hù)，增加機(jī)會(huì) c.拓展訪問渠道 d.節(jié)約寬帶成本 e.提高用戶體驗(yàn) f.轉(zhuǎn)變被證明是值得的,計(jì)算機(jī)技術(shù)系軟件教研室,1.7 常見問題,(4)初學(xué)web標(biāo)準(zhǔn)的幾個(gè)誤區(qū) a.不是為了通過校驗(yàn)才標(biāo)準(zhǔn)化 b.不要用傳統(tǒng)的表格思維來套div c.不必為了每塊內(nèi)容都建立id d.不要因?yàn)橐稽c(diǎn)受挫就輕言放棄,計(jì)算機(jī)技術(shù)系軟件教研室,1.7 常見問題,(5)使用web標(biāo)準(zhǔn)后表格還有用嗎？ a.關(guān)于表格，主要用于數(shù)據(jù)的讀取輸出等。 b.關(guān)于其他元素，可以配合div+css布局來使用,計(jì)算機(jī)技術(shù)系軟件教研室,1.7 常見問題,(6)可以繼續(xù)使用html來設(shè)計(jì)網(wǎng)頁嗎？ 當(dāng)然，html也是w3c標(biāo)準(zhǔn)之一！ (7)學(xué)習(xí)css布局比表格難嗎？ 其實(shí)不難，只是概念的轉(zhuǎn)換而已。 web標(biāo)準(zhǔn)只是相對(duì)于html來說，有了更多的標(biāo)簽來使用，當(dāng)然可以繼續(xù)使用html了。,計(jì)算機(jī)技術(shù)系軟件教研室,1.7 常見問題,(8)css布局是否必須就要手寫代碼？ 嗯，目前是的，不過dw已經(jīng)提供了所見即所得的設(shè)計(jì)模式。 (9)為什么能直接過度到xml？ xml是未來數(shù)據(jù)的描述格式，在時(shí)機(jī)