網(wǎng)頁項目訓(xùn)練》第一章Web標(biāo)準(zhǔn)與CSS布局概述ppt課件

1、主講人：聶宇第一章 Web規(guī)范與CSS規(guī)劃概述教學(xué)要求(1) 了解什么是Web規(guī)范及其構(gòu)成和開展。(2) 了解CSS語法構(gòu)造。(3) 了解CSS規(guī)劃和傳統(tǒng)table規(guī)劃的區(qū)別。第一章 Web規(guī)范與CSS規(guī)劃概述教學(xué)重難點(diǎn)(1) Web規(guī)范(2) CSS語法構(gòu)造第一章 Web規(guī)范與CSS規(guī)劃概述提問(1) Web是什么？(2) CSS是什么？(3) XHTML是什么？第一章 Web規(guī)范與CSS規(guī)劃概述1.1 Web規(guī)范的構(gòu)成和開展Web規(guī)范：即網(wǎng)站規(guī)范。目前通常所說的Web規(guī)范普通指進(jìn)展網(wǎng)站建立所采用的基于XHTML言語的網(wǎng)站設(shè)計言語。網(wǎng)頁的構(gòu)成：構(gòu)造、表現(xiàn)和行為 構(gòu)造化規(guī)范言語：主要包括XHT

2、ML和XML 表現(xiàn)規(guī)范言語：主要包括CSS 行為規(guī)范：主要包括對象模型、ECMA Script1.1 Web規(guī)范的構(gòu)成和開展構(gòu)造化規(guī)范言語：XML: (Extensible Markup Language)即可擴(kuò)展標(biāo)志言語，它與HTML一樣，都是SGML (Standard Generalized Markup Language,規(guī)范通用標(biāo)志言語)。Xml是Internet環(huán)境中跨平臺的，依賴于內(nèi)容的技術(shù)，是當(dāng)前處置構(gòu)造化文檔信息的有力工具。1.1 Web規(guī)范的構(gòu)成和開展構(gòu)造化規(guī)范言語：XHTML: (The Extensible HyperText Markup Language)即可擴(kuò)展超

3、文本標(biāo)識言語。HTML是一種根本的WEB網(wǎng)頁設(shè)計言語，XHTML是一個基于XML的置標(biāo)言語，看起來與HTML有些相象，只需一些小的但重要的區(qū)別，XHTML就是一個扮演著類似HTML的角色的XML，所以，本質(zhì)上說，XHTML是一個過渡技術(shù)，結(jié)合了部分XML的強(qiáng)大功能及大多數(shù)HTML的簡單特性。1.1 Web規(guī)范的構(gòu)成和開展表現(xiàn)規(guī)范言語：CSS是Cascading Style Sheets(層疊款式表)的簡稱。目前遵照的是W3C于1998年5月12日引薦的CSS 2。W3C創(chuàng)建CSS規(guī)范的目的是以CSS取代HTML表格式規(guī)劃、幀和其他表現(xiàn)的言語。純CSS規(guī)劃與構(gòu)造式XHTML相結(jié)合能協(xié)助設(shè)計師分別

4、外觀與構(gòu)造，使站點(diǎn)的訪問及維護(hù)更加容易。1.1 Web規(guī)范的構(gòu)成和開展行為規(guī)范：DOM是Document Object Model文檔對象模型的縮寫。根據(jù)W3C DOM規(guī)范，DOM是一種與閱讀器，平臺，言語無關(guān)的接口，使得他可以訪問頁面其他的規(guī)范組件。簡單了解，DOM處理了Netscape的JavaScript和Microsoft的Jscript之間的沖突，給予Web設(shè)計師和開發(fā)者一個規(guī)范的方法，讓他們來訪問他們站點(diǎn)中的數(shù)據(jù)、腳本和表現(xiàn)層對像。1.1 Web規(guī)范的構(gòu)成和開展行為規(guī)范：ECMAScript是一種由歐洲計算機(jī)制造商協(xié)會ECMA經(jīng)過ECMA-262規(guī)范化的腳本程序設(shè)計言語。這種言語在

5、萬維網(wǎng)上運(yùn)用廣泛，它往往被稱為JavaScript或JScript，但實踐上后兩者是ECMA-262規(guī)范的擴(kuò)展。1.1 Web規(guī)范的構(gòu)成和開展對網(wǎng)站閱讀者的益處： 文件下載與頁面顯示速度更快 內(nèi)容能被更多的用戶所訪問包括失明、視弱、色盲等殘障人士 內(nèi)容能被更廣泛的設(shè)備所訪問包括屏幕閱讀機(jī)、手持設(shè)備、搜索機(jī)器人、打印機(jī)、電冰箱等等 用戶可以經(jīng)過款式選擇定制本人的表現(xiàn)界面 一切頁面都能提供適于打印的版本1.1 Web規(guī)范的構(gòu)成和開展對網(wǎng)站一切者的益處： 更少的代碼和組件，容易維護(hù) 帶寬要求降低代碼更簡約，本錢降低 更容易被搜索引擎搜索到 改版方便，不需求變動頁面內(nèi)容 提供打印版本而不需求復(fù)制內(nèi)容

6、提高網(wǎng)站易用性1.2 HTML根本語法HTML元素構(gòu)成了HTML文件，這些元素是由HTML標(biāo)簽(tags)所定義的。HTML文件是一種包含了很多標(biāo)簽的純文本文件，標(biāo)簽通知閱讀器如何去顯示頁面。從構(gòu)造上講，HTML文件由元素(element)組成，組成HTML文件的元素有多種，用于組織文件的內(nèi)容和知道文件的輸出格式。1.2 HTML根本語法1普通標(biāo)簽普通標(biāo)志由一個起始標(biāo)簽和一個終了標(biāo)簽所組成。例如：受控文字2空標(biāo)簽雖然大部分標(biāo)簽是成雙成對的出現(xiàn)，但也有一些是單獨(dú)存在的，這些標(biāo)志被稱為空標(biāo)簽。1.2 HTML根本語法1.文件構(gòu)造標(biāo)簽：html,head,body2.區(qū)段落式標(biāo)簽：title,hi,

7、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)簽：div1.3 從HTML轉(zhuǎn)向XHTML(1) Xhtml中的dtd過渡型：Transitional嚴(yán)厲型：Strict框架型：Frameset1.3 從HTML轉(zhuǎn)向XHTML(2) 需求為標(biāo)簽添加一個命名空間(3)一切的標(biāo)簽和

8、標(biāo)簽的屬性都必需小寫，屬性值可以大寫(4)屬性值必需用雙引號括起來(5)一切的標(biāo)簽都必需封鎖，空標(biāo)簽也需求封鎖(6)不允許屬性簡寫(7)假設(shè)運(yùn)用的文檔類型是嚴(yán)厲型，那么在xhtml文檔中許多定義外觀的屬性是不允許運(yùn)用。1.4 CSS的語法構(gòu)造CSS屬性與選擇符CSS的語法構(gòu)造僅僅由3部分組成：選擇符、屬性和值。例如：body margin-top:20px; body為選擇符，margin-top是屬性，20px是值。1.4 CSS的語法構(gòu)造ID和Class選擇符ID選擇符用#標(biāo)識，在網(wǎng)頁中每個ID只可用1次。例如：呵呵那么CSS中要求如下書寫：#Nelson width:200px;colo

9、r:red;1.4 CSS的語法構(gòu)造ID和Class選擇符Class選擇符用.標(biāo)識，在網(wǎng)頁中每個Class只可用多次。例如：呵呵那么CSS中要求如下書寫：.Nelson width:200px;color:red;1.4 CSS的語法構(gòu)造類型選擇符類型選擇符是指將已有的網(wǎng)頁標(biāo)簽類型來作為稱號的選擇符。例如： body margin-top:20px; 1.4 CSS的語法構(gòu)造群組選擇符群組選擇符是指將一組對象進(jìn)展一樣款式的定義。例如： body,div,span margin-top:20px; 留意：這里body和div中間用的是小逗號1.4 CSS的語法構(gòu)造包含選擇符包含選擇符是指將某一對

10、象中的子對象進(jìn)展單獨(dú)的款式定義。例如： .Nelson li margin-top:20px; 留意：這里Nelson和li中間用的是空格運(yùn)用如下：哇哈哈，OTZ1.4 CSS的語法構(gòu)造組合選擇符例如： .Nelson li,#nie li margin-top:20px; 那么在class為Nelson和id為nie款式下的li標(biāo)簽的margin-top屬性都為20px了。1.4 CSS的語法構(gòu)造標(biāo)簽指定選擇符假設(shè)享用id或class，也想同時運(yùn)用標(biāo)簽選擇符?？梢园慈缦赂袷剑豪纾?p#nie margin-top:20px; 那么id為nie款式下的p標(biāo)簽的margin-top屬性都為20

11、px了。例如： p.nie margin-top:20px; 那么class為nie款式下的p標(biāo)簽的margin-top屬性都為20px了。1.4 CSS的語法構(gòu)造偽類及偽對象偽類及偽對象是一種特殊的類和對象。它由CSS自動支持，屬于CSS的一種擴(kuò)展類型和元素，稱號不能被用戶自定義，運(yùn)用時只能按規(guī)范格式進(jìn)展運(yùn)用。例如： a:hover color:green; 那么鼠標(biāo)挪動到超鏈接上，鏈接文字就編程綠色了。1.4 CSS的語法構(gòu)造通配選擇符通配符是指用字符替代不確定的字，如在DOS中，用*.*表示一切文件。因此CSS的通配符選擇用*作為關(guān)鍵字。例如： * font-size:12px; 那么網(wǎng)

12、頁中一切沒自定義的文本信息的字體大小默以為12像素。1.5 運(yùn)用CSS到網(wǎng)頁中外聯(lián)款式表內(nèi)嵌款式表body margin-top:20px;1.6 CSS規(guī)劃和table規(guī)劃的區(qū)別實踐上，傳統(tǒng)的table規(guī)劃方式只是利用了html的table元素所具有的零邊框特性。由于table元素在顯示的時候，使得單元格的邊框和間距被設(shè)置為0，既不顯示邊框，所以可以將網(wǎng)頁中的各個元素按照版式劃分后，分別放入表格的單元格中，從而實現(xiàn)了復(fù)雜的排版組合效果。表格規(guī)劃的最大缺陷為大量款式設(shè)計代碼混雜在表格單元格之中，使得可讀性降低，維護(hù)本錢也很高，加上大量的圖片以及其他元素會導(dǎo)致網(wǎng)頁文件量龐大，最終導(dǎo)致閱讀器下載及

13、解析速度很慢。1.6 CSS規(guī)劃和table規(guī)劃的區(qū)別這是一段典型的表格規(guī)劃的html源代碼：td width=51% rowspan=2 background=#000000文本顯示1.6 CSS規(guī)劃和table規(guī)劃的區(qū)別利用css來規(guī)劃的代碼：在表示頁面中定義個div，并運(yùn)用此div的class稱號：.example float:left; margin-top:10px; margin-right:20px; margin-bottom:10px; margin-left:10px; background-color:blue; text-align:center; line-heigh

14、t:160%; width:50%;1.7 常見問題(1)什么是網(wǎng)站重構(gòu)？即將現(xiàn)有不符合Web規(guī)范的網(wǎng)站轉(zhuǎn)向Web規(guī)范去重新設(shè)計。(2)什么樣的網(wǎng)站才符合Web規(guī)范？能經(jīng)過w3c代碼驗證。 驗證地址：/css-validator/1.7 常見問題(3)Web規(guī)范的商業(yè)價值是什么？A.加速開發(fā)B.易于維護(hù)，添加時機(jī)C.拓展訪問渠道D.節(jié)約寬帶本錢E.提高用戶體驗F.轉(zhuǎn)變被證明是值得的1.7 常見問題(4)初學(xué)Web規(guī)范的幾個誤區(qū)A.不是為了經(jīng)過校驗才規(guī)范化B.不要用傳統(tǒng)的表格思想來套divC.不用為了每塊內(nèi)容都建立IDD.不要由于一點(diǎn)受挫就輕言放棄1.7 常見問題(5)運(yùn)用Web規(guī)范后表格還有用嗎？A.關(guān)于表格，主要用于數(shù)據(jù)的讀取輸出等。B.關(guān)于其他元素，可以配合Div+CSS規(guī)劃來運(yùn)用1.7 常見問題(6)可以繼續(xù)運(yùn)用Html來設(shè)計網(wǎng)頁嗎？當(dāng)然，Html也是W3C規(guī)范之一！(7)學(xué)習(xí)CSS規(guī)劃比表格難嗎？其實不難，只是概念的轉(zhuǎn)換而已。 Web規(guī)范只是相對于html來說，有了更多的標(biāo)簽來運(yùn)用，當(dāng)然可以繼續(xù)運(yùn)用html了。1.7 常見問題(8)CSS規(guī)劃能否必需就要手寫代碼？嗯，目前是的，不過DW曾經(jīng)提供了所見即所得的設(shè)計方式。(9)為什么能直接過度到XML？X