自考網頁設計與制作-第六、七章動態(tài)網頁技術、CSS層疊樣式表課件

1、網頁設計與制作 第五節(jié)課 動態(tài)網頁技術、CSS層疊樣式表網頁設計與制作 第六章 動態(tài)網頁技術動態(tài)網頁技術概述JavaScript入門DOM的概念和應用主要內容第七章 CSS層疊樣式表什么是CSSCSS結構和規(guī)則選擇符BOX模型屬性布局屬性文本屬性顏色與背景屬性字體屬性第六章 動態(tài)網頁技術主要內容第七章 CSS層疊樣式表第一節(jié)、動態(tài)網頁技術概述動態(tài)網頁技術主要指兩大類技術：服務器端的動態(tài)頁面；客戶端的動態(tài)頁面。本章所介紹的是客戶端的動態(tài)頁面（DHTML，即Dynamic HTML）DHTML的概念是以更少、更快捷的頁面提供更加豐富多彩的圖形和數(shù)據(jù)。從實質上說，并不是一種轉么技術，就是一種即使在網

2、頁下載進瀏覽器以后仍然能夠隨時變換更新網頁內容，排版樣式以及動畫等技術，主要包括JavaScript、VBScript、DOM（document object model,文檔對象模型）第一節(jié)、動態(tài)網頁技術概述動態(tài)網頁技術主要指兩大類技術：第一節(jié)、動態(tài)網頁技術概述DHTM的四個組成部分及其功能：HTML 4.0 ：包括許多增強特性，如大表格的分段顯示，帶有固定標題的可以滾動的表格，以及對長表格打印的更好支持。) CSS：控制用XML或HTML語言編寫的文檔顯示，可使頁面布局和格式比HTML更精確。 DOM：為HTML文檔定義了一個與平臺無關的程序接口，使用該接口可以控制文檔的內容、結構和樣式

3、?？山柚鶧OM在Web頁中引入動態(tài)和交互式內容，而不必依賴于Web服務器來提供新的內容或改變現(xiàn)有內容的顯示方式。腳本語言：目前廣為流行的Javascript是由Netscape公司開發(fā)的一種腳本語言，其結構簡單，使用方便，易學易懂。它的代碼可以直接嵌人HTML文檔之中，無需編譯就可在支持Javascript的瀏覽器中解釋運行。第一節(jié)、動態(tài)網頁技術概述DHTM的四個組成部分及其功能：第二節(jié)、Javascript入門1、什么是JavaScriptJavascript是一種基于對象(Object)和事件驅動(Event Driven)并具有安全性能的腳本語言。使用它的目的是與HTML超文本標記語言、

4、Java Applet等一起實現(xiàn)在Web 頁面中聯(lián)合多個對象，與瀏覽者進行交互，從而可以開發(fā)客戶端的應用程序等。它通過嵌入或調入到標準的HTML文件中實現(xiàn)的。它與HTML、DOM、CSS結合成為DHTML。第二節(jié)、Javascript入門1、什么是JavaScrip第二節(jié)、Javascript入門基本特征：是一種腳本編寫語言-采用小程序段的方式實現(xiàn)編程基于對象JavaScript是一種基與對象的語言，它內置了多種對象并允許用戶自己創(chuàng)建對象。解釋性是一種解釋性的語言，源代碼不需要經過編譯，而是在瀏覽器中運行時被解釋。簡單的：基于Java基本語句和控制流之上；變量類型采用弱定義，并未使用嚴格的數(shù)據(jù)

5、類型安全的：不允許訪問本地磁盤；不允許將數(shù)據(jù)存入到服務器上；不允許對網絡數(shù)據(jù)進行修改和刪除基于事件的JavaScript可以直接對用戶的輸入做出響應，無需經過Web服務程序，它對用戶的響應，是以事件（如鼠標事件、鍵盤事件）驅動的方式進行的?？缙脚_JavaScript是一種跨平臺的語言，它依賴于瀏覽器本身，與操作系統(tǒng)無關。只要計算機能運行瀏覽器，并且瀏覽器支持JavaScript就可執(zhí)行。第二節(jié)、Javascript入門基本特征：第二節(jié)、Javascript入門和Java的區(qū)別：Javascript是基于對象，Java是面向對象，即Java必須設計對象解釋和編譯：Java必須編譯，而Javasc

6、ript是一種解釋性語言強變量和弱變量：Java采用強定義類型變量，所有變量使用前必須先聲明，定義其類型代碼格式不一樣：Java是與html無關的代碼；Javascript是一種文本字符格式，可直接嵌入嵌入方式不一樣：Java使用,javascript使用靜態(tài)聯(lián)編和動態(tài)聯(lián)編:Java采用靜態(tài)聯(lián)編，即必須在編譯時進行，以使編譯器能夠實現(xiàn)強類型檢查。JavaScript使用動態(tài)聯(lián)編，對象引用在運行時檢查第二節(jié)、Javascript入門和Java的區(qū)別：第二節(jié)、Javascript入門1、事件處理句柄（eventHandle）：可放在JavaScript腳本任何位置，一般放在html的表單中或置于超

7、鏈接之后第二節(jié)、Javascript入門1、事件處理句柄（event第二節(jié)、Javascript入門1、事件處理句柄（eventHandle）：其中tag可以標記為,也可以為eventHandler可以是任何事件處理句柄，如onClickJavaScript code為任何合法的javascript代碼，一般為已定義的函數(shù)第二節(jié)、Javascript入門1、事件處理句柄（event第二節(jié)、Javascript入門2、函數(shù)（function）：大多數(shù)腳本的核心，能以自己的名字被調用，也可以作為控制語句的條件。實質上是一段可重復使用的代碼，用來實現(xiàn)各種功能，比如在屏幕上顯示一個警告框。JavaSc

8、ript有內置函數(shù)，也可以自定義函數(shù)第二節(jié)、Javascript入門2、函數(shù)（function）第二節(jié)、Javascript入門3、對象（Object）：對象是一種組織數(shù)據(jù)的方法以及與數(shù)據(jù)相關的操作。JavaScript對象有window、Document、Form、Navigator、String、Math和Date等JavaScript有對象和函數(shù)，訪問數(shù)據(jù)時，必須指定包含該數(shù)據(jù)的最頂層對象的名字，以及與之相關的后隨的對象第二節(jié)、Javascript入門3、對象（Object）：對第二節(jié)、Javascript入門3、對象（Object）：Window對象：JavaScript的最頂層對象，

9、包含了除Navigator之外的所有其他對象。Window對象有打開和關閉窗口、彈出警示框、確認對話框、提示輸入對話框等，并且還包含了Frame的屬性，還可以改變窗口底部的狀態(tài)行第二節(jié)、Javascript入門3、對象（Object）：W第二節(jié)、Javascript入門3、對象（Object）：Document對象：包含許多當前文檔的信息，能使用方法write和writeln建立htmlForm對象：是當JavaScript在HTML文檔中遇到 時建立的，包含了窗窗體的全部信息，用于向函數(shù)和服務器提交信息Navigator對象：Navigator對象不同于Window對象，它包含瀏覽器信息，適

10、用于任何窗口，用于列出所有瀏覽器能處理的MIME類型，引出所有已注冊的瀏覽器能使用的Plug-in第二節(jié)、Javascript入門3、對象（Object）：D第二節(jié)、Javascript入門3、對象（Object）：String對象:通過String對象的方法，能修改或增加HTML修飾，而不必改變文本自身。將String對象的任意多個方法連接起來，可產生HTML編碼的多形態(tài)。Math對象：既是存儲數(shù)據(jù)運算的方法包，又是存儲通用常量的屬性包。Date對象：用于獲取用戶的有關當前日期(年、月、日)信息，或建立Date對象以跟蹤日期或事件之間的間隔。Javascript對象以屬性和方法的形式存放數(shù)據(jù)

11、，且使用圓點指示符實現(xiàn)對對象屬性和去的訪問。比如要引用Document對象的Write方法，格式為Document.Write /abcd。此外，Javascript使用關鍵字Var聲明變量，但不允許顯式地改變變量的類型。變量名稱不僅是唯一的，且對大小寫敏感。Javascript支持兩種注釋逐行注釋(/)和多行釋(/興興/)，且單行注釋符號必須放在HTML注釋結束符號的前面。第二節(jié)、Javascript入門3、對象（Object）：S第二節(jié)、Javascript入門3、對象（Object）：Javascript對象以屬性和方法的形式存放數(shù)據(jù)，且使用圓點指示符實現(xiàn)對對象屬性和去的訪問。比如要引用

12、Document對象的Write方法，格式為Document.Write “abcd”。Javascript使用關鍵字Var聲明變量，但不允許顯式地改變變量的類型。變量名稱不僅是唯一的，且對大小寫敏感。Javascript支持兩種注釋逐行注釋(/)和多行釋(/*/)，且單行注釋符號必須放在HTML注釋結束符號的前面。第二節(jié)、Javascript入門3、對象（Object）：J第二節(jié)、Javascript入門4、幾個簡單的JavaScript程序：Javascript通過把腳本嵌入Html中，來更好的控制用戶反應。常用的嵌入方法有兩種：腳本置于標記之間第二節(jié)、Javascript入門4、幾個簡單

13、的JavaScr第二節(jié)、Javascript入門4、幾個簡單的JavaScript程序：上述腳本中加入了標識說明，它的作用在于:如果使用不能夠識別JavaScript的瀏覽器，則所有在其中的標識都被忽略第二節(jié)、Javascript入門4、幾個簡單的JavaScr第二節(jié)、Javascript入門4、幾個簡單的JavaScript程序：直接嵌入在Html的窗體或鏈接中基本用法為：test點擊下面的鏈接可以關閉瀏覽器關閉窗口第二節(jié)、Javascript入門4、幾個簡單的JavaScr第二節(jié)、Javascript入門4、幾個簡單的JavaScript程序：使用src屬性應用外部腳本文件語法格式為Lan

14、guage指定瀏覽器以何種語言解釋代碼，使具有通用性?？赡艿闹涤蠽bscript TCL、Perl等Src屬性指明腳本所在的文件。第二節(jié)、Javascript入門4、幾個簡單的JavaScr第二節(jié)、Javascript入門4、幾個簡單的JavaScript程序：使用src屬性應用外部腳本文件先建立一個腳本文件，存為alert.js，然后在該文件中輸入如下內容：Alert（“歡迎進入JavaScript世界！”）；Document.write(“這是js文件中的腳本的作用”)再新建一個Html，存為test3.htm,輸入如下內容：第二節(jié)、Javascript入門4、幾個簡單的JavaScr第三

15、節(jié)、DOM的概念和應用DOM（document object model,文檔對象模型）萬維網協(xié)會（W3C）制定了一個與平臺和語言無關的規(guī)范，即DOM，它將HTML、CSS、和腳本語言結合起來組成一人或多人都能實現(xiàn)的互操作模型。DOM是HTML的核心，為每個HTML元素都設定了一系列的屬性，為了給HTML元素賦值，可在該HTML元素的起始標記內加上相應的屬性值。第三節(jié)、DOM的概念和應用DOM（document obje第七章、CSS層疊樣式表第一節(jié) 什么是CSSCSS（Cascading Style Sheet，層疊樣式表或級聯(lián)樣式表）是一種格式化網頁的標準方式，它擴展了 HTML 的功能，

16、使網頁設計者能夠以更有效的方式設置網頁格式。作用：針對頁面對象的風格和樣式進行定義；使得HTML各個標記的屬性更有一般性和通用性.真正意義是把對象引入HTML，使得可以使用腳本程序（如JavaScript）調用對象如使用CSS前,這是紅色字體使用后：這是紅色字體第七章、CSS層疊樣式表第一節(jié) 什么是CSSCSS（Casc第七章、CSS層疊樣式表第二節(jié) CSS基本結構和規(guī)則基本規(guī)則如下：選擇符 屬性名1:屬性值1; 屬性名2:屬性值2; 常用選擇符類型: HTML標記符 自定義的類Class 自定義的ID典型例子：Acolor：red，含義是把頁面中所有的超鏈接A標記的color屬性設為紅色，即

17、頁面所有超鏈接都變成紅色第七章、CSS層疊樣式表第二節(jié) CSS基本結構和規(guī)則第七章、CSS層疊樣式表第二節(jié) CSS基本結構和規(guī)則在頁面中引用CSS的方法：內聯(lián)式樣式單：利用現(xiàn)有的HTML標記，把特殊的樣式加入到那些由標記控制的信息中，例如。p style=“color: red”這里顯示紅色字(/p第七章、CSS層疊樣式表第二節(jié) CSS基本結構和規(guī)則在頁面中第七章、CSS層疊樣式表第二節(jié) CSS基本結構和規(guī)則在頁面中引用CSS的方法：內聯(lián)式樣式單：利用現(xiàn)有的HTML標記，把特殊的樣式加入到那些由標記控制的信息中，例如。p style=“color: red”這里顯示紅色字(/p嵌入式樣式單外部

18、式樣式單第七章、CSS層疊樣式表第二節(jié) CSS基本結構和規(guī)則在頁面中第七章、CSS層疊樣式表第二節(jié) CSS基本結構和規(guī)則在頁面中引用CSS的方法：嵌入式樣式單：和Script類似，嵌入到HTML文件的頭部中去(head/head標記之間)，使用Style和/Style標記裝載，例如 ， p color: red;font-weight:bold /style。這樣會對該頁面中的所有P標記都起作用。外部式樣式單:一種保存在外部的樣式單文件，外部文件以.CSS為擴展名，例如. 第七章、CSS層疊樣式表第二節(jié) CSS基本結構和規(guī)則在頁面中第七章、CSS層疊樣式表第二節(jié) CSS基本結構和規(guī)則3、屬性值

19、的單位在樣式單中，屬性的單位多為長度單位，包括px(像素)、pt(磅)、em(一種排版的單位，lem=12pt)、mm(毫米)、cm(厘米)、pc(1pc=12pt)、in(英寸)。這些單位可以使用整數(shù)(如px)表示，也可以使用實數(shù)(如em)表示，并且在元素中對數(shù)值還承(inherit)的關系。第七章、CSS層疊樣式表第二節(jié) CSS基本結構和規(guī)則3、屬性第七章、CSS層疊樣式表第二節(jié) CSS基本結構和規(guī)則4、注釋與空格樣式單的注釋語句：可以用“/*.*/”作為注釋標記。在瀏覽器中有一個對樣式單的分析器，它負責對樣式單的檢査，分析器將忽略注釋標記之間的內容。空格在樣式中是有效的，如果字符之間多個

20、空格，只保留一個，特別是在聲明某些字體的時候，空格一定不能省略。另外，樣式單是區(qū)分大小寫的，要注意拼寫形式；對于CSS2未聲明的屬性和方法，樣式單的分析器會忽略它的存在第七章、CSS層疊樣式表第二節(jié) CSS基本結構和規(guī)則4、注釋第七章、CSS層疊樣式表第三節(jié) 選擇符1、超文本標記選擇符任何Html標記都可以是CSS的一個選擇符，選擇符僅僅是指向需要特別樣式的元素，如Ptext-dindent:3em中的選擇符是段落標記;而Acolor:red選擇符是A第七章、CSS層疊樣式表第三節(jié) 選擇符1、超文本標記選擇符第七章、CSS層疊樣式表第三節(jié) 選擇符2、類選擇符可以自己定義樣式，應用于一個或多個網

21、頁元素，類在網頁中可以出現(xiàn)多次，用于定義重復的樣式。類以英文“.”開頭，后面的名字自己定義，類定義后還需要在網頁中加入class=類名稱，加以調用。單個選擇符可以有不同的class類，如：Font.htmlcolor:#191970；Font.csscolor:#4b0082HTML中的class屬性是用于在HTML中以指明元素的類每個選擇符只有一層類，即prietary是無效的類的聲明也可以無需相關的元素，如.notefont-size:small,適用于任何元素第七章、CSS層疊樣式表第三節(jié) 選擇符2、類選擇符第七章、CSS層疊樣式表第三節(jié) 選擇符2、類選擇符第七

22、章、CSS層疊樣式表第三節(jié) 選擇符2、類選擇符第七章、CSS層疊樣式表第三節(jié) 選擇符3、ID選擇符可以為標記定義一個ID，在css中的選擇符可以根據(jù)ID個別地定義每個元素的樣式屬性。這種選擇符應該盡量少用，因為它具有一局限。一個ID選擇符的指定要有指示符“#”在定義的前面。例如，ID選擇符可以指定：#ident3em text-indent:3em。這樣可使具有ID屬性為ident3em的HTML標記具有選擇符所定義的樣式:文本縮進3em.第七章、CSS層疊樣式表第三節(jié) 選擇符3、ID選擇符第七章、CSS層疊樣式表第三節(jié) 選擇符4、綜合例子第七章、CSS層疊樣式表第三節(jié) 選擇符4、綜合例子第七

23、章、CSS層疊樣式表第四節(jié) BOX模型屬性1、Margin屬性屬性具體分為Margin屬性具體分為邊距(margin)、左邊距(margin-left)、右邊距(margin-right)、上邊距(margin-top)、下邊距(margin-bottom)五個屬性，分別表示BOX里內容離邊框的距離。它的屬性值是數(shù)值單位，可以是長度、百分比或auto,margin甚至可以設為負值，造成BOX與BOX之間的重疊顯示。比如：BODY margin-top 1 0pt naargin-right 20pt margin-bottom 30 Pt margin-left 40ptCSS把HTML中之間

24、的部分稱為BOX（容器）。BOX有三類屬性：margin、padding、border第七章、CSS層疊樣式表第四節(jié) BOX模型屬性1、Margi第七章、CSS層疊樣式表第四節(jié) BOX模型屬性1、Margin屬性對于邊距還可以取14值，當只有一個值時，則頂、右、底、左都一個值；如果只有兩個或三個值，則另個沒有值的將與它相對的編的邊距值相同。如BODYmargin：5pt 15pt;等同于BODYmargin-top:5pt； margin-right:15pt;margin-bottom:5pt;margin-left:15pt第七章、CSS層疊樣式表第四節(jié) BOX模型屬性1、Margi第七章

25、、CSS層疊樣式表第四節(jié) BOX模型屬性2、Padding屬性用來描述BOX的邊框和內容之間插入多少空間，可以在所有元素上使用。和margin屬性類似，也分為填充（padding）、 padding-top、 padding-right、 padding-bottom五個屬性。這些屬性時用來描述邊界線和線內包含的元素之間的間距大小的?？梢匀〉闹涤衛(wèi)ength、百分比percentage第七章、CSS層疊樣式表第四節(jié) BOX模型屬性2、Paddi第七章、CSS層疊樣式表第四節(jié) BOX模型屬性3、border屬性用來描述BOX邊框的，分為border-width、border-color、bord

26、er-styleborder-width分為： border-top-width、 border-right-width、 border-bottom-width、 border-left-widthborder-color:用來表示邊框顏色，同樣也分為上下左右。border-style：用來設置邊框樣式，屬性值為CSS規(guī)定的關鍵字。第七章、CSS層疊樣式表第四節(jié) BOX模型屬性3、borde第七章、CSS層疊樣式表第五節(jié) 布局屬性W3C在CSS中提出了類似于Layer標記的功能貼層屬性clip. 具有clip屬性的元素就像一個貼層漂浮在網頁之上，三維方向的位置都是受到限制的。貼層都是矩形的，

27、如果要對貼層屬性賦值，如下：形狀shape；方形rect；頂top、右right、底bottom、左1eft；長度length一般默認為auto，它定義的元素都是位置屬性position為絕對(absolute) 的.第七章、CSS層疊樣式表第五節(jié) 布局屬性W3C在CSS中提出第七章、CSS層疊樣式表第五節(jié) 布局屬性對于寬width.高height，它們的值可以是長度length、百分點percentage和自動auto，一般定義的元素都是位置屬性(position為絕對(absolute)的元素。對于百分點的值，是參照定義元素的父元素的.比如網頁。如果父元素的值為自動auto，那么它的值也是

28、未定的。對于位置屬性position為相對(relative)和靜態(tài)(static)的元素，寬width和height將根據(jù)CSS格式化模式限制為不變的。第七章、CSS層疊樣式表第五節(jié) 布局屬性對于寬width第七章、CSS層疊樣式表第五節(jié) 布局屬性溢出(overflow)屬性的作用:當一個元素或者組成部分，其內容所需要的空間超出貼層設置的高、寬尺寸后，將出現(xiàn)的視覺現(xiàn)象的屬性。其取值有可視(Visible)，隱藏(hidden)、滾動scroll)、自動(auto)。一般默認為可視，它定義的元素都是位置屬性為絕對的。div width:150px; height:150px; overflow

29、:scroll; 第七章、CSS層疊樣式表第五節(jié) 布局屬性溢出(overflo第七章、CSS層疊樣式表第六節(jié) 文本屬性word-spacing 屬性可以改變字（單詞）之間的標準間隔。其默認值 normal 與設置值為 0 是一樣的。word-spacing 屬性接受一個正長度值或負長度值。如果提供一個正長度值，那么字之間的間隔就會增加。若為 word-spacing 設置一個負值，會把它拉近。第七章、CSS層疊樣式表第六節(jié) 文本屬性word-spaci第七章、CSS層疊樣式表第六節(jié) 文本屬性letter-spacing 屬性與 word-spacing 的區(qū)別在于，字母間隔修改的是字符或字母之

30、間的間隔。與 word-spacing 屬性一樣，letter-spacing 屬性的可取值包括所有長度。默認關鍵字是 normal（這與 letter-spacing:0 相同）。輸入的長度值會使字母之間的間隔增加或減少指定的量：第七章、CSS層疊樣式表第六節(jié) 文本屬性letter-spa第七章、CSS層疊樣式表第六節(jié) 文本屬性文本修飾text-decorationtext-decoration 有 5 個值：None：表示不用修飾Underline：表示下劃線Overline：表示上劃線line-through：表示橫線從中間穿過Blink：表示閃爍舉例：a text-decoration

31、: none; h2.stricken text-decoration: line-through; 第七章、CSS層疊樣式表第六節(jié) 文本屬性文本修飾text-d第七章、CSS層疊樣式表第六節(jié) 文本屬性垂直對齊vertical-alignbaseline:以其他普通元素的底線作為被定義元素的底線sub:寫在其他元素的下方super:寫在其他元素中線的上方top:以其他普通元素的頂線作為被定義元素的頂線text-top:以其他文本元素的頂線作為被定義元素的頂線middle：和其他元素的中線對齊bottom:以其他普通元素的底線作為被定義元素的底線text-bottom:以其他文本元素的底線作為被

32、定義元素的底線percentage使用百分點值是以被參照元素的底線為準，以被參照元素的高為單位100%(-1oo%)為升高(或降低)。第七章、CSS層疊樣式表第六節(jié) 文本屬性垂直對齊vertic第七章、CSS層疊樣式表第六節(jié) 文本屬性文字轉換text-transformtext-transform 屬性處理文本的大小寫。這個屬性有 4 個值：None：保持不變Uppercase：大寫所有字母Lowercase：小寫所有字母Capitalize：大寫每個單詞的第一個字母第七章、CSS層疊樣式表第六節(jié) 文本屬性文字轉換text-t第七章、CSS層疊樣式表第六節(jié) 文本屬性文本對齊text-aligntext-align是一個基本的屬性，它會影響一個元素中的文本行互相之間的對齊方式。Left:左對齊right :右對齊center:居中對齊Justify:一般用于西方語言第七章、CSS層疊樣式表第六節(jié) 文本屬性文本對齊text-a第七章、CSS層疊樣式表第六節(jié) 文本屬性文本對齊text-in