《網(wǎng)頁工程師認(rèn)證》

《網(wǎng)頁項(xiàng)目訓(xùn)練》《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述第一章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ū)別?！毒W(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述第一章Web標(biāo)準(zhǔn)與CSS布局概述教學(xué)重難點(diǎn)(1)Web標(biāo)準(zhǔn)(2)CSS語法結(jié)構(gòu)《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述第一章Web標(biāo)準(zhǔn)與CSS布局概述提問(1)Web是什么？(2)CSS是什么？(3)XHTML是什么？《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述第一章Web標(biāo)準(zhǔn)與CSS布局概述1.1Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展Web標(biāo)準(zhǔn)：即網(wǎng)站標(biāo)準(zhǔn)。目前通常所說的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ì)象模型、ECMAScript《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.1Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展結(jié)構(gòu)化標(biāo)準(zhǔn)語言：XML:(ExtensibleMarkupLanguage)即可擴(kuò)展標(biāo)記語言，它與HTML一樣，都是SGML(StandardGeneralizedMarkupLanguage,標(biāo)準(zhǔn)通用標(biāo)記語言)。Xml是Internet環(huán)境中跨平臺(tái)的，依賴于內(nèi)容的技術(shù)，是當(dāng)前處理結(jié)構(gòu)化文檔信息的有力工具。《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.1Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展結(jié)構(gòu)化標(biāo)準(zhǔn)語言：XHTML:(TheExtensibleHyperTextMarkupLanguage)即可擴(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的簡單特性。《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.1Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展表現(xiàn)標(biāo)準(zhǔn)語言：CSS是CascadingStyleSheets(層疊樣式表)的簡稱。目前遵循的是W3C于1998年5月12日推薦的CSS2。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ù)更加容易?！毒W(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.1Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展行為標(biāo)準(zhǔn)：DOM是DocumentObjectModel文檔對(duì)象模型的縮寫。根據(jù)W3CDOM規(guī)范，DOM是一種與瀏覽器，平臺(tái)，語言無關(guān)的接口，使得你可以訪問頁面其他的標(biāo)準(zhǔn)組件。簡單理解，DOM解決了Netscape的JavaScript和Microsoft的Jscript之間的沖突，給予Web設(shè)計(jì)師和開發(fā)者一個(gè)標(biāo)準(zhǔn)的方法，讓他們來訪問他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對(duì)像。《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.1Web標(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ò)展?！毒W(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.1Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展對(duì)網(wǎng)站瀏覽者的好處：文件下載與頁面顯示速度更快內(nèi)容能被更多的用戶所訪問（包括失明、視弱、色盲等殘障人士）內(nèi)容能被更廣泛的設(shè)備所訪問（包括屏幕閱讀機(jī)、手持設(shè)備、搜索機(jī)器人、打印機(jī)、電冰箱等等）用戶能夠通過樣式選擇定制自己的表現(xiàn)界面所有頁面都能提供適于打印的版本《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.1Web標(biāo)準(zhǔn)的構(gòu)成和發(fā)展對(duì)網(wǎng)站所有者的好處：更少的代碼和組件，容易維護(hù)帶寬要求降低（代碼更簡潔），成本降低更容易被搜尋引擎搜索到改版方便，不需要變動(dòng)頁面內(nèi)容提供打印版本而不需要復(fù)制內(nèi)容提高網(wǎng)站易用性《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.2HTML基本語法HTML元素構(gòu)成了HTML文件，這些元素是由HTML標(biāo)簽(tags)所定義的。HTML文件是一種包含了很多標(biāo)簽的純文本文件，標(biāo)簽告訴瀏覽器如何去顯示頁面。從結(jié)構(gòu)上講，HTML文件由元素(element)組成，組成HTML文件的元素有多種，用于組織文件的內(nèi)容和知道文件的輸出格式?！毒W(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.2HTML基本語法1）一般標(biāo)簽一般標(biāo)記由一個(gè)起始標(biāo)簽和一個(gè)結(jié)束標(biāo)簽所組成。例如：<x>受控文字</x>2）空標(biāo)簽雖然大部分標(biāo)簽是成雙成對(duì)的出現(xiàn)，但也有一些是單獨(dú)存在的，這些標(biāo)記被稱為空標(biāo)簽?！毒W(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.2HTML基本語法1.文件結(jié)構(gòu)標(biāo)簽：html,head,body2.區(qū)段落式標(biāo)簽：title,hi,br,p,pre,address3.字符格式標(biāo)簽：b,I,tt,font,center,blink,big4.列表標(biāo)簽：ul,ol,il,dl,dd,dt,dir,menu5.鏈接標(biāo)簽：a6.多媒體標(biāo)簽：img,embed,bgsound7.表格標(biāo)簽：table,td,tr,th,caption8.表單標(biāo)簽：form,input,textarea,select9.層標(biāo)簽：div《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.3從HTML轉(zhuǎn)向XHTML(1)Xhtml中的dtd過渡型：Transitional嚴(yán)格型：Strict框架型：Frameset《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.3從HTML轉(zhuǎn)向XHTML(2)需要為<html>標(biāo)簽添加一個(gè)命名空間(3)所有的標(biāo)簽和標(biāo)簽的屬性都必須小寫，屬性值可以大寫(4)屬性值必須用雙引號(hào)括起來(5)所有的標(biāo)簽都必須關(guān)閉，空標(biāo)簽也需要關(guān)閉(6)不允許屬性簡寫(7)如果使用的文檔類型是嚴(yán)格型，則在xhtml文檔中許多定義外觀的屬性是不允許使用。《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.4CSS的語法結(jié)構(gòu)CSS屬性與選擇符CSS的語法結(jié)構(gòu)僅僅由3部分組成：選擇符、屬性和值。例如：body{margin-top:20px;}body為選擇符，margin-top是屬性，20px是值。《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.4CSS的語法結(jié)構(gòu)ID和Class選擇符ID選擇符用#標(biāo)識(shí)，在網(wǎng)頁中每個(gè)ID只可用1次。例如：<divid=“Nelson”>呵呵</div>則CSS中要求如下書寫：#Nelson{width:200px;color:red;}《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.4CSS的語法結(jié)構(gòu)ID和Class選擇符Class選擇符用.標(biāo)識(shí)，在網(wǎng)頁中每個(gè)Class只可用多次。例如：<divclass=“Nelson”>呵呵</div>則CSS中要求如下書寫：.Nelson{width:200px;color:red;}《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.4CSS的語法結(jié)構(gòu)類型選擇符類型選擇符是指將已有的網(wǎng)頁標(biāo)簽類型來作為名稱的選擇符。例如：body{margin-top:20px;}《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.4CSS的語法結(jié)構(gòu)群組選擇符群組選擇符是指將一組對(duì)象進(jìn)行相同樣式的定義。例如：body,div,span{margin-top:20px;}※注意：這里body和div中間用的是小逗號(hào)《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.4CSS的語法結(jié)構(gòu)包含選擇符包含選擇符是指將某一對(duì)象中的子對(duì)象進(jìn)行單獨(dú)的樣式定義。例如：.Nelsonli{margin-top:20px;}※注意：這里Nelson和li中間用的是空格應(yīng)用如下：<divclass=“Nelson”> <li>哇哈哈，OTZ</li></div>《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.4CSS的語法結(jié)構(gòu)組合選擇符例如：.Nelsonli,#nieli{margin-top:20px;}那么在class為Nelson和id為nie樣式下的li標(biāo)簽的margin-top屬性都為20px了?！毒W(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.4CSS的語法結(jié)構(gòu)標(biāo)簽指定選擇符如果享用id或class，也想同時(shí)使用標(biāo)簽選擇符?？梢园慈缦赂袷剑豪纾簆#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了。《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.4CSS的語法結(jié)構(gòu)偽類及偽對(duì)象偽類及偽對(duì)象是一種特殊的類和對(duì)象。它由CSS自動(dòng)支持，屬于CSS的一種擴(kuò)展類型和元素，名稱不能被用戶自定義，使用時(shí)只能按標(biāo)準(zhǔn)格式進(jìn)行應(yīng)用。例如：a:hover{color:green;}那么鼠標(biāo)移動(dòng)到超鏈接上，鏈接文字就編程綠色了。《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.4CSS的語法結(jié)構(gòu)通配選擇符通配符是指用字符代替不確定的字，如在DOS中，用*.*表示所有文件。因此CSS的通配符選擇用*作為關(guān)鍵字。例如：*{font-size:12px;}

那么網(wǎng)頁中所有沒自定義的文本信息的字體大小默認(rèn)為12像素?！毒W(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.5應(yīng)用CSS到網(wǎng)頁中外聯(lián)樣式表<linkrel=“stylesheet”rev=“stylesheet”href=“style.css”type=“text/css”>內(nèi)嵌樣式表<styletype=“text/css”>body{margin-top:20px;}</style><divstyle=“border:1px”></div>《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.6CSS布局和table布局的區(qū)別實(shí)際上，傳統(tǒng)的table布局方式只是利用了html的table元素所具有的零邊框特性。由于table元素在顯示的時(shí)候，使得單元格的邊框和間距被設(shè)置為0，既不顯示邊框，所以可以將網(wǎng)頁中的各個(gè)元素按照版式劃分后，分別放入表格的單元格中，從而實(shí)現(xiàn)了復(fù)雜的排版組合效果。表格布局的最大缺陷為大量樣式設(shè)計(jì)代碼混雜在表格單元格之中，使得可讀性降低，維護(hù)成本也很高，加上大量的圖片以及其他元素會(huì)導(dǎo)致網(wǎng)頁文件量龐大，最終導(dǎo)致瀏覽器下載及解析速度很慢。《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.6CSS布局和table布局的區(qū)別這是一段典型的表格布局的html源代碼：<tablewidth="100%"border="0"cellspacing="3"cellpadding="3"> <tr> <tdwidth="51%"rowspan="2"background="#000000" <fontcolor="blue">文本顯示</font></td> <tdwidth="30%"background="#00ffff"> </td> <tdwidth="19%"background="#00ffff"> </td> </tr></table>《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.6CSS布局和table布局的區(qū)別利用css來布局的代碼：在表示頁面中定義個(gè)div，并使用此div的class名稱：<styletype="text/css">.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%;}</style>《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述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)證地址：《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述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)變被證明是值得的《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.7常見問題(4)初學(xué)Web標(biāo)準(zhǔn)的幾個(gè)誤區(qū)A.不是為了通過校驗(yàn)才標(biāo)準(zhǔn)化B.不要用傳統(tǒng)的表格思維來套divC.不必為了每塊內(nèi)容都建立IDD.不要因?yàn)橐稽c(diǎn)受挫就輕言放棄《網(wǎng)頁工程師認(rèn)證-網(wǎng)頁項(xiàng)目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述1.7常見問題(5)使用Web標(biāo)準(zhǔn)后表格還有用嗎？A.關(guān)于表格，主要用于數(shù)據(jù)的讀取輸出等。B.關(guān)于其他元素，可以配合Div+CSS布局來使用《網(wǎng)頁工程師