Web 設(shè)計(jì)相關(guān)概念教學(xué)課件

1、Web 設(shè)計(jì)相關(guān)概念內(nèi)容HTML與XHTML；DHTML ；DIV；CSSXML；SHTML；XHTML是什么？HTML是一種基本的WEB網(wǎng)頁(yè)設(shè)計(jì)語言，XHTML是一個(gè)基于XML的置標(biāo)語言，看起來與HTML有些相象，只有一些小的但重要的區(qū)別，XHTML就是一個(gè)扮演著類似HTML的角色的XML，所以，本質(zhì)上說，XHTML是一個(gè)過渡技術(shù)，結(jié)合了XML（有幾分）的強(qiáng)大功能及HTML（大多數(shù)）的簡(jiǎn)單特性。2000年底，國(guó)際W3C(WorldWideWebConsortium)組織公布發(fā)行了XHTML1.0版本。XHTML1.0是一種在HTML4.0基礎(chǔ)上優(yōu)化和改進(jìn)的的新語言，目的是基于XML應(yīng)用。XH

2、TML是一種增強(qiáng)了的HTML,它的可擴(kuò)展性和靈活性將適應(yīng)未來網(wǎng)絡(luò)應(yīng)用更多的需求。XHTML解決什么問題？下面是W3C的HTML工作組主席StevenPemberton回答的關(guān)于XHTML的常見基礎(chǔ)問題。（1）XHTML解決HTML語言所存在的嚴(yán)重制約其發(fā)展的問題。HTML發(fā)展到今天存在三個(gè)主要缺點(diǎn)：不能適應(yīng)現(xiàn)在越多的網(wǎng)絡(luò)設(shè)備和應(yīng)用的需要，比如手機(jī)、PDA、信息家電都不能直接顯示HTML；由于HTML代碼不規(guī)范、臃腫，瀏覽器需要足夠智能和龐大才能夠正確顯示HTML；數(shù)據(jù)與表現(xiàn)混雜，這樣你的頁(yè)面要改變顯示，就必須重新制作HTML。因此HTML需要發(fā)展才能解決這個(gè)問題，于是W3C又制定了XHTML，

3、XHTML是HTML向XML過度的一個(gè)橋梁。（2）XML是web發(fā)展的趨勢(shì)，所以人們急切的希望加入XML的潮流中。XHTML是當(dāng)前替代HTML4標(biāo)記語言的標(biāo)準(zhǔn)，使用XHTML1.0，只要你小心遵守一些簡(jiǎn)單規(guī)則，就可以設(shè)計(jì)出既適合XML系統(tǒng)，又適合當(dāng)前大部分HTML瀏覽器的頁(yè)面。這個(gè)意思就是說，你可以立刻設(shè)計(jì)使用XML，而不需要等到人們都使用支持XML的瀏覽器。這個(gè)指導(dǎo)方針可以使web平滑的過渡到XML。XHTML解決什么問題？ （3）使用XHTML的另一個(gè)優(yōu)勢(shì)是：它非常嚴(yán)密。當(dāng)前網(wǎng)絡(luò)上的HTML的糟糕情況讓人震驚，早期的瀏覽器接受私有的HTML標(biāo)簽，所以人們?cè)陧?yè)面設(shè)計(jì)完畢后必須使用各種瀏覽器來

4、檢測(cè)頁(yè)面，看是否兼容，往往會(huì)有許多莫名其妙的差異，人們不得不修改設(shè)計(jì)以便適應(yīng)不同的瀏覽器。（4）XHTML是能與其它基于XML的標(biāo)記語言、應(yīng)用程序及協(xié)議進(jìn)行良好的交互工作。（5）XHTML是Web標(biāo)準(zhǔn)家族的一部分，能很好在無線設(shè)備等其它用戶代理上。（6）在網(wǎng)站設(shè)計(jì)方面，XHTML可助你去掉表現(xiàn)層代碼的惡習(xí)，幫助你養(yǎng)成標(biāo)記校驗(yàn)來測(cè)試頁(yè)面工作的習(xí)慣。什么是DHTML？DHTML只是一種制作網(wǎng)頁(yè)的概念，實(shí)際上沒有一個(gè)組織或機(jī)構(gòu)推出過所謂的DHTML標(biāo)準(zhǔn)或技術(shù)規(guī)范之類的。DHTML不是一種技術(shù)、標(biāo)準(zhǔn)或規(guī)范，DHTML只是一種將目前已有的網(wǎng)頁(yè)技術(shù)、語言標(biāo)準(zhǔn)整和運(yùn)用，制作出能在下載后仍然能實(shí)時(shí)變換頁(yè)面元素

5、效果的網(wǎng)頁(yè)的設(shè)計(jì)概念。DHTML大致包含以下網(wǎng)頁(yè)技術(shù)、標(biāo)準(zhǔn)或規(guī)范HTML4.0網(wǎng)頁(yè)的基礎(chǔ)語言標(biāo)準(zhǔn)。CSSL注意！不是CSS，是CSSL，它是Clent-SidescrptingLanguage的縮寫，譯作“客戶端腳本語言”，主要有Javascrpt(JS)，VBscrpt(VBS)，Jscrpt。Netscape主要支持JS，IE主要支持JS，VBS和Jscrpt。DOMDocumentObjectModel的縮寫，譯作“文檔對(duì)象模型”，是W3C日前極力推廣的web技術(shù)標(biāo)準(zhǔn)之一，它將網(wǎng)頁(yè)中的內(nèi)容抽象成對(duì)象，每個(gè)對(duì)象擁有各自的屬性(Properties)、方法(Method)和事件(Events

6、)，這些都可以通過上面講到的CSSL來進(jìn)行控制。IE和NS的對(duì)象模型都是以W3C的公布的DOM為基準(zhǔn)，加上自己的ExtendedObject(擴(kuò)展對(duì)象)來生成的。CSS這才是CascadingStyleSheets(層疊樣式表單)的縮寫，它是HTML的輔助設(shè)計(jì)規(guī)范，用來彌補(bǔ)HTML在排版上的所受的限制導(dǎo)致的不足，它是DOM的一部分。理論上說通過CSSL動(dòng)態(tài)地改變CSS屬性可以做出任何你想要的頁(yè)面視覺效果。所以，簡(jiǎn)單地說，要實(shí)現(xiàn)DHTML，就是以HTML為基礎(chǔ)，運(yùn)用DOM將頁(yè)面元素對(duì)象化，利用CSSL控制這些對(duì)象的CSS屬性以達(dá)到網(wǎng)頁(yè)的動(dòng)態(tài)視覺效果。什么 是DIV？網(wǎng)頁(yè)中的層；div和span都

7、是CSS里頭的層，由全球廣域網(wǎng)協(xié)會(huì)W3C的Positioning HTML Elements with Cascading Style Sheets（使用級(jí)聯(lián)樣式表確定HTML元素的定義）定義。DIV元素是用來為HTML文檔內(nèi)大塊（block-level）的內(nèi)容提供結(jié)構(gòu)和背景的元素。DIV的起始標(biāo)簽和結(jié)束標(biāo)簽之間的所有內(nèi)容都是用來構(gòu)成這個(gè)塊的，其中所包含元素的特性由DIV標(biāo)簽的屬性來控制，或者是通過使用樣式表格式化這個(gè)塊來進(jìn)行控制。Internet Explorer和Netscape的瀏覽器都支持DIV標(biāo)簽。DIV和SPAN很多開發(fā)人員都把DIV元素同SPAN元素弄混淆了。盡管它們?cè)谔匦陨舷嗤?/p>

8、，但是SPAN是用來定義內(nèi)嵌內(nèi)容而不是大塊內(nèi)容的。你可以對(duì)段落使用DIV標(biāo)簽，但是SPAN對(duì)于為段落內(nèi)的一個(gè)或者多個(gè)字賦予特殊的特性很有用。DIV標(biāo)簽允許你分割一個(gè)Web頁(yè)面，以此來進(jìn)行格式化和演示?？梢詫⑺涂梢曅缘募记山M合起來使用，用以分割頁(yè)面的內(nèi)容，并顯示你所選擇的內(nèi)容。什么是CSS？CSS（Cascading Style Sheet，可譯為“層疊樣式表”或“級(jí)聯(lián)樣式表”）是一組格式設(shè)置規(guī)則，用于控制Web頁(yè)面的外觀。通過使用CSS樣式設(shè)置頁(yè)面的格式，可將頁(yè)面的內(nèi)容與表現(xiàn)形式分離。頁(yè)面內(nèi)容存放在HTML文檔中，而用于定義表現(xiàn)形式的CSS規(guī)則則存放在另一個(gè)文件中或HTML文檔的某一部分，通

9、常為文件頭部分。將內(nèi)容與表現(xiàn)形式分離，不僅可使維護(hù)站點(diǎn)的外觀更加容易，而且還可以使HTML文檔代碼更加簡(jiǎn)練，縮短瀏覽器的加載時(shí)間。CSS解決什么問題？樣式解決了一個(gè)普遍的問題 HTML 標(biāo)簽原本被設(shè)計(jì)為用于定義文檔內(nèi)容。通過使用 、 這樣的標(biāo)簽，HTML 的初衷是表達(dá)“這是標(biāo)題”、“這是段落”、“這是表格”之類的信息。同時(shí)文檔布局由瀏覽器來完成，而不使用任何的格式化標(biāo)簽。由于兩種主要的瀏覽器（Netscape 和 Internet Explorer）不斷地將新的 HTML 標(biāo)簽和屬性（比如字體標(biāo)簽和顏色屬性）添加到 HTML 規(guī)范中，創(chuàng)建文檔內(nèi)容清晰地獨(dú)立于文檔表現(xiàn)層的站點(diǎn)變得越來越困難。為了

10、解決這個(gè)問題，萬維網(wǎng)聯(lián)盟（W3C），這個(gè)非營(yíng)利的標(biāo)準(zhǔn)化聯(lián)盟，肩負(fù)起了 HTML 標(biāo)準(zhǔn)化的使命，并在 HTML 4.0 之外創(chuàng)造出樣式（Style）。所有的主流瀏覽器均支持層疊樣式表。 樣式表極大地提高了工作效率樣式表定義如何顯示 HTML 元素，就像 HTML 3.2 的字體標(biāo)簽和顏色屬性所起的作用那樣。樣式通常保存在外部的 .css 文件中。通過僅僅編輯一個(gè)簡(jiǎn)單的 CSS 文檔，外部樣式表使你有能力同時(shí)改變站點(diǎn)中所有頁(yè)面的布局和外觀。由于允許同時(shí)控制多重頁(yè)面的樣式和布局，CSS 可以稱得上 WEB 設(shè)計(jì)領(lǐng)域的一個(gè)突破。作為網(wǎng)站開發(fā)者，你能夠?yàn)槊總€(gè) HTML 元素定義樣式，并將之應(yīng)用于你希望的

11、任意多的頁(yè)面中。如需進(jìn)行全局的更新，只需簡(jiǎn)單地改變樣式，然后網(wǎng)站中的所有元素均會(huì)自動(dòng)地什么是XML？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)化文檔信息的有力工具。擴(kuò)展標(biāo)記語言XML是一種簡(jiǎn)單的數(shù)據(jù)存儲(chǔ)語言，使用一系列簡(jiǎn)單的標(biāo)記描述數(shù)據(jù)，而這些標(biāo)記可以用方便的方式建立，雖然XML占用的空間比二進(jìn)制數(shù)據(jù)要占用更多的空間，但XML極其簡(jiǎn)單易于掌握和使用。XML特性X

12、ML與Access,Oracle和SQL Server等數(shù)據(jù)庫(kù)不同，數(shù)據(jù)庫(kù)提供了更強(qiáng)有力的數(shù)據(jù)存儲(chǔ)和分析能力，例如：數(shù)據(jù)索引、排序、查找、相關(guān)一致性等，XML僅僅是展示數(shù)據(jù)。事實(shí)上XML與其他數(shù)據(jù)表現(xiàn)形式最大的不同是：他極其簡(jiǎn)單。這是一個(gè)看上去有點(diǎn)瑣細(xì)的優(yōu)點(diǎn)，但正是這點(diǎn)使XML與眾不同。 XML與HTML的設(shè)計(jì)區(qū)別是：XML是用來存儲(chǔ)數(shù)據(jù)的，重在數(shù)據(jù)本身。而HTML是用來定義數(shù)據(jù)的，重在數(shù)據(jù)的顯示模式。XML的簡(jiǎn)單使其易于在任何應(yīng)用程序中讀寫數(shù)據(jù)，這使XML很快成為數(shù)據(jù)交換的唯一公共語言，雖然不同的應(yīng)用軟件也支持其它的數(shù)據(jù)交換格式，但不久之后他們都將支持XML，那就意味著程序可以更容易的與Wi

13、ndows、Mac OS, Linux以及其他平臺(tái)下產(chǎn)生的信息結(jié)合，然后可以很容易加載XML數(shù)據(jù)到程序中并分析他，并以XML格式輸出結(jié)果。為了使得SGML顯得用戶友好，XML重新定義了SGML的一些內(nèi)部值和參數(shù)，去掉了大量的很少用到的功能，這些繁雜的功能使得SGML在設(shè)計(jì)網(wǎng)站時(shí)顯得復(fù)雜化。XML保留了SGML的結(jié)構(gòu)化功能，這樣就使得網(wǎng)站設(shè)計(jì)者可以定義自己的文檔類型，XML同時(shí)也推出一種新型文檔類型，使得開發(fā)者也可以不必定義文檔類型。 因?yàn)閄ML是W3C制定的，XML的標(biāo)準(zhǔn)化工作由W3C的XML工作組負(fù)責(zé)，該小組成員由來自各個(gè)地方和行業(yè)的專家組成，他們通過email交流對(duì)XML標(biāo)準(zhǔn)的意見，并提出

14、自己的看法 (/TR/WD-xml)。因?yàn)閄ML 是個(gè)公共格式， (它不專屬于任何一家公司)，你不必?fù)?dān)心XML技術(shù)會(huì)成為少數(shù)公司的盈利工具，XML不是一個(gè)依附于特定瀏覽器的語言什么是SHTML？SHTML不是HTML而是一種服務(wù)器API，shtml是服務(wù)器動(dòng)態(tài)產(chǎn)成的html。雖然兩者都是超文本格式,但shtml是一種用于SSI技術(shù)的文件。也就是ServerSideInclude-SSI服務(wù)器端包含指令。如果WebServer有SSI功能的話(大多數(shù)（尤其是基于Unix平臺(tái)）的WEB服務(wù)器如NetscapeEnterpriseServer等均支持SSI命令)。會(huì)對(duì)shtml文件特殊招待。先掃一次

15、shtml文件看沒有特殊的SSI指令現(xiàn)在。有就按WebServer設(shè)定規(guī)則解釋SSI指令。解釋完后跟一般html一起掉去客戶端。SHTML使用SSI(ServerSideInclude)的html文件擴(kuò)展名，SSI（ServerSideInclude)，通常稱為服務(wù)器端嵌入或者叫服務(wù)器端包含，是一種類似于ASP的基于服務(wù)器的網(wǎng)頁(yè)制作技術(shù)。SSI工作原理將內(nèi)容發(fā)送到瀏覽器之前，可以使用“服務(wù)器端包含(SSI)”指令將文本、圖形或應(yīng)用程序信息包含到網(wǎng)頁(yè)中。例如，可以使用SSI包含時(shí)間/日期戳、版權(quán)聲明或供客戶填寫并返回的表單。對(duì)于在多個(gè)文件中重復(fù)出現(xiàn)的文本或圖形，使用包含文件是一種簡(jiǎn)便的方法。將內(nèi)

16、容存入一個(gè)包含文件中即可，而不必將內(nèi)容輸入所有文件。通過一個(gè)非常簡(jiǎn)單的語句即可調(diào)用包含文件，此語句指示W(wǎng)eb服務(wù)器將內(nèi)容插入適當(dāng)網(wǎng)頁(yè)。而且，使用包含文件時(shí)，對(duì)內(nèi)容的所有更改只需在一個(gè)地方就能完成。因?yàn)榘琒SI指令的文件要求特殊處理，所以必須為所有SSI文件賦予SSI文件擴(kuò)展名。默認(rèn)擴(kuò)展名是.stm、.shtm和.shtmlWeb服務(wù)器在處理網(wǎng)頁(yè)的同時(shí)處理SSI指令。當(dāng)Web服務(wù)器遇到SSI指令時(shí)，直接將包含文件的內(nèi)容插入HTML網(wǎng)頁(yè)。如果“包含文件”中包含SSI指令，則同時(shí)插入此文件。除了用于包含文件的基本指令之外，還可以使用SSI指令插入文件的相關(guān)信息（如文件的大小）或者運(yùn)行應(yīng)用程序或shell命令。網(wǎng)站維護(hù)常常碰到的一個(gè)問題是，網(wǎng)站的結(jié)構(gòu)已經(jīng)固定，卻為了更新一點(diǎn)內(nèi)容而不得不重做一大批網(wǎng)頁(yè)。SSI提供了一種簡(jiǎn)單、有效的方法來解決這一問題，它將一個(gè)網(wǎng)站的基本結(jié)構(gòu)放在幾個(gè)簡(jiǎn)單的HTML文件中（模板），以后我們