配套課件：Web編程基礎

1、第1章 HTML基礎目標-2-了解Web發(fā)展史及HTML特點掌握HTML文檔結構的組成掌握HTML的語法結構掌握文本標簽的使用掌握分隔標簽的使用掌握各種列表標簽的使用掌握各種超鏈接的使用掌握圖像標簽的使用Web概述Web的任務就是向人們提供多媒體網絡信息服務。從技術層面看，Web技術主要有三點：超文本傳輸協(xié)議（HTTP）統(tǒng)一資源定位符（URL）超文本標簽語言（HTML）-3-Web是一個分布式的超媒體（hypermedia）信息系統(tǒng)，它將大量的信息分布于整個因特網上。HTTP超文本傳輸協(xié)議 （HTTP，HyperText Transfer Protocol）HTTP是客戶端瀏覽器或其他程序與W

2、eb服務器之間的應用層通信協(xié)議，用以實現(xiàn)客戶端和服務器端的信息傳輸。-4-URL統(tǒng)一資源定位符 （URL，Uniform / Universal Resource Locator） URL用于完整的描述Internet上網頁和其他資源的地址，是實現(xiàn)互聯(lián)網信息定位的統(tǒng)一標識。 URL主要由三部分組成：協(xié)議類型、存放資源的域名或主機IP地址和資源文件名，語法格式如下：protocol（協(xié)議）：指定使用的傳輸協(xié)議，最常用的是HTTP協(xié)議hostname（主機名）：是指存放資源的服務器的域名或IP地址；port（端口號）：為可選項，省略時使用默認端口，如HTTP協(xié)議的默認端口是80；path（路徑）：

3、由零或多個“/”符號隔開的字符串，一般用來表示主機上的一個目錄或文件地址；parameters（參數(shù)）：為可選項，可以用于指定特殊參數(shù)；query（查詢）：為可選項，用于給動態(tài)網頁傳遞參數(shù)，可以有多個參數(shù)，用“&”符號隔開，每個參數(shù)的名和值用“=”符號隔開；fragment：字符串，用于指定網絡資源中的片斷。例如，一個網頁中有多個名詞解釋，可使用fragment直接定位到某一名詞解釋。-5-protocol:/hostname:port/path/;parameters?query#fragment HTML超文本標簽語言 （HTML，HyperText Mark-up Language） H

4、TML語言，是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言，其特點如下：簡易性可擴展性 平臺無關性-6-HTML文檔結構-1HTML部分 HTML文檔以標簽開始，標簽結束 。HTML文檔的所有內容都在上述兩個標簽之間 。語法格式如下：HEAD部分HEAD部分以標簽開始，標簽結束 。HTML的HEAD部分用于對頁面中使用的字符集、標簽的樣式、窗口的標題、腳本語言等進行說明和設置。語法格式如下： -7-HTML是以.html（或.htm）為擴展名的純文本文件，一個基本的HTML文檔由HTML、HEAD和BODY三部分組成。 .頁面的標題部分.HTML文檔結構-2BODY部分 BODY部

5、分以標簽開始，標簽結束 。BODY部分是HTML文檔的主體，包含了絕大部分需要呈現(xiàn)給瀏覽者瀏覽的內容，如段落、列表、圖像和其它元素等HTML頁面元素，都通過一些標準的HTML標簽來描述 。語法格式如下：HTML部分、HEAD部分和BODY部分框架圖：-8-HTML的主體部分示例：1.1 HelloHTML.html HTML語法標簽 HTML通過標簽控制文檔的內容和外觀，可以將標簽看作是HTML的命令。標簽特點：HTML標簽以一對尖括號作為開始“”，以“”表示該HTML命令的結束，例如， 。標簽必須是閉合的。閉合就是標簽的最后要有一個“/”，來表示結束，但不一定成對出現(xiàn) ，例如單獨出現(xiàn)，表示換

6、行。標簽的大小寫無關。HTML語言中不區(qū)分大小寫。屬性HTML屬性一般都出現(xiàn)在標簽中。作為HTML標簽的一部分，HTML屬性包含了標簽所需的額外的信息。語法格式如下：注釋當用瀏覽器查看HTML文檔時，注釋不顯示在頁面上，語法如下：-9-HTML雖然不區(qū)分大小寫，但為保持內容的一致性和可讀性，推薦使用小寫 內容屬性的值需要在雙引號中，屬性名和屬性值成對出現(xiàn)。雖然HTML中的屬性值不用雙引號仍然可以解析，但出于編碼規(guī)范的要求，在添加屬性時，值通常都放在雙引號中。 meta標簽meta標簽 meta標簽作為子標簽只出現(xiàn)在網頁的head標簽內，可為HTML文檔提供額外的信息。該標簽屬性分為兩組：nam

7、e與content: 用于描述網頁，它以名稱/值的形式表示，其名稱通過name屬性表示，其值為所要描述的內容，通過content屬性表示。 http-equiv與content: http-equiv屬性用于提供HTTP協(xié)議的響應報文頭(MIME文檔頭)，它是以名稱/值的形式表示。其值為所要描述的內容，而內容的值則通過content屬性表示。meta標簽的屬性如右表所示：示例：1.3 MetaEG.html 屬性名值說明namedescription用于描述。使用content屬性提供網頁的簡短描述keywords用于定義網頁關鍵詞。使用content屬性提供網頁的關鍵詞robots用于定義網

8、頁搜索引擎索引方式。使用content屬性描述網頁搜索引擎索引方式http-equivcontent-type用于定義用戶的瀏覽器或相關設備如何顯示將要加載的數(shù)據(jù)，或者如何處理將要加載的數(shù)據(jù)。例如，其中charset=UTF-8用于設定網頁的編碼方式為UTF-8refresh用于刷新與跳轉(重定向)頁面。使用content屬性表示刷新或跳轉的開始時間與跳轉的網址expires用于網頁緩存過期時間。使用content屬性表示頁面緩存的過期時間。一旦網頁過期，將從服務器上重新下載新頁面pragma與no-cache用于定義頁面緩存。使用content屬性的no-cache值表示是否緩存網頁-10-

9、文本標簽標題標簽HTML語言中的標題字體用表示。 其語法格式如下：示例：1.4 BiaoTiEG.html 字體標簽字體標簽是HTML語言中很重要的一個標簽，通過設置標簽的屬性face、size和color，可以讓文本顯示出不同的字體風格、大小及顏色 。 語法格式如下：示例：1.5 WenBenEG.html 1.6 FontEG.html-11-內容“#”代表了標題的字體大小，#的取值為1到6之間的整數(shù) align屬性用于設置標題的對齊方式，該屬性取值可以為left（左對齊）、center（居中）或right（右對齊）。 內容face屬性用于控制文字顯示的格式，size屬性用于指定文字顯示大

10、小 ，color屬性用于指定字體顯示顏色 分隔標簽文字分隔標簽 強制換行標簽 強制分段標簽 分割線標簽 分割線標簽 可以在網頁上產生一條水平的分割線，將大量的內容區(qū)分開，增加了網頁的層次性 。標簽屬性示例：1.7 FenGeEG.html 屬性說明width用于設置的寬度單位為像素（px），也可以使用百分比（占屏幕的百分比）來設定size設置的厚度color設置的顯示顏色align分割線的對齊方式，其設定值有三個，也就是置左align=left、置中align=center、置右align=rightnoshade設置的陰影，如果不要陰影只要將noshade加入即可-12-列表標簽-1列表分為

11、四類： 無序列表（）有序列表（）定義列表（）嵌套列表無序列表 無序列表又稱符號列表，列表中的項目可以以任何順序進行排列 。無序列表使用一組標簽，標簽中含有多組標簽對 。示例： 1.8 UlEG.html有序列表 有序列表又稱為編號列表，列表中的項目是按照先后順序排列的 。有序列表使用一組標簽，標簽中含有多組標簽對 。示例： 1.9 OlEG.html -13-列表標簽-2定義列表 定義列表將列表中的項目與其定義或描述配對顯示 定義列表標簽dl同樣是成對出現(xiàn)的，以開始，結束，而列表中的每個項目的標題使用標簽修飾，其后跟隨標簽，該標簽用以對標題進行描述。示例：1.10 DlEG.html嵌套列表一

12、個列表中可以包含另一個完整的列表 。多個有序列表或無序列表組合在一起使用的列表在使用嵌套列表時，嵌套列表必須和一個特定的列表項相聯(lián)系，即嵌套列表通常包含在某個列表項中，用以反映該嵌套列表和該列表項之間的聯(lián)系。 示例：1.11 NestlEG.html -14-超級鏈接常見的超鏈接形式如下：文字超鏈接：在文字上建立超鏈接。圖像超鏈接：在圖像上建立超鏈接。熱區(qū)超鏈接：在圖像的指定區(qū)域上建立超鏈接。超鏈接標簽HTML語言中超鏈接的標簽用表示，標簽是成對出現(xiàn)的，以開始，結束 。語法格式如下：target屬性的取值方式 值說明_self在當前窗口中打開目標文件，這是target的默認值_blank在新窗

13、口中打開目標文件_top在頂層框架中打開網頁_parent在當前框架中的上一層框架打開網頁-15-互聯(lián)網的精髓就在于相互鏈接，即超鏈接（hyperlink）。一個網站的各個網頁都是通過超鏈接來銜接起來的內容 絕對路徑和相對路徑絕對路徑絕對路徑就是指完整的路徑。 相對路徑相對路徑是指從一個文件到另一個文件所經過的路徑。以下圖的方式說明相對路徑從1.html到4.html，期間需要經過B2文件夾，所以其相對路徑就是B2/4.html。 從1.html到2.html，不需要經過任何文件夾，所以它的相對路徑是2.html。從2.html到3.html，經過B1和C文件夾，所以它的相對路徑是B1/C/3

14、.html。-16-站內鏈接通常是使用相對路徑，當然也可以使用絕對路徑，但是當網站的目錄有所調整的時候，絕對路徑可能就會出現(xiàn)問題 站內、站外鏈接站內鏈接 網站內部網頁之間的鏈接 示例：1.12 hrefZhanNeiEG.html 站外鏈接 當網站中的鏈接需要鏈接到站外的網頁時，就需要用到站外鏈接 示例：1.13 hrefZhanWaiEG.html -17-內容內容 郵件連接、錨鏈接郵件鏈接可用于發(fā)送郵件示例：1.14 hrefEmailEG.html 錨鏈接 用于網頁內容的快速定位 示例：1.15 hrefMaoEG.html -18-內容 無論是鏈接到當前網頁還是其他網頁的錨鏈接，錨點名

15、稱前的“#”不能省略內容圖像圖像在HTML中使用標簽把圖像文件插入到文檔中 圖像標簽幾個重要屬性如下表：示例：1.16 imgEG.html 屬性說明alt瀏覽器如果沒有載入圖片的功能，瀏覽器就會轉而顯示alt屬性的值align設置圖片的垂直(居上、居中、居下)對齊方式和水平對齊方式(居左、居中、居右)height設置圖片的高度，缺省則顯示圖片原始高度width設置圖片的寬度，缺省則顯示圖片原始寬度-19-小結-20-超文本傳輸協(xié)議（HTTP，HyperText Transfer Protocol）是客戶端瀏覽器或其他程序與Web服務器之間的應用層通信協(xié)議，用以實現(xiàn)客戶端和服務器端的信息傳輸統(tǒng)

16、一資源定位符（URL，Uniform / Universal Resource Locator）是用于完整地描述Internet上網頁和其他資源的地址的一種標識方法，實現(xiàn)互聯(lián)網信息的定位統(tǒng)一標識超文本標簽語言（HTML，HyperText Mark-up Language），即HTML語言，是目前網絡上應用最為廣泛的語言，也是構成網頁文檔的主要語言一個基本的HTML文檔由HTML、HEAD和BODY三部分組成HTML標簽由ASCII字符來定義，用于控制頁面內容（文字、表格、圖片、用戶自定義內容等）的顯示標簽是HTML語言中最基本的單位，也是HTML語言最重要的組成部分HTML分隔標簽用于區(qū)分文

17、字段落。HTML分隔標簽分為文字分隔標簽和分割線標簽兩類HTML語言中列表分為無序列表（）、有序列表（）、定義列表（）和嵌套列表四類互聯(lián)網的精髓就在于相互鏈接，即超鏈接（hyperlink）常見的超鏈接形式有文字超鏈接、圖像超鏈接和熱區(qū)超鏈接三種鏈接地址有絕對路徑和相對路徑兩種方式第2章 表格、表單和框架目標-22-掌握表格標簽的結構組成及使用掌握表格常用屬性的設置了解表格的嵌套掌握表格的使用技巧掌握表單的基本結構組成掌握常用表單域的使用掌握常用表單按鈕的使用掌握框架的結構組成及使用表格表格標簽的基本結構：標簽來創(chuàng)建表格，標簽內包含了表名和表格本身內容的代碼。表示行，行由若干單元格構成。標簽定

18、義了一個單元格，嵌套于標簽之中。 多個單元格結合在一起構成了行，多個行結合在一起就構成了一個表格。 示例：2.1 TableEG1.html -23-表格是網頁制作中使用最多的技術之一。表格可以清晰直觀的展現(xiàn)數(shù)據(jù)之間的關系。單元格內容單元格內容表格相關標簽HTML中有10個與表格相關的標簽標簽：定義一個表格。標簽：定義一個表格標題，必須緊隨table標簽之后，且每個表格只能包含一個標題，通常這個標題會居中顯示于表格上部。標簽：定義表格內的表頭單元格。th元素內部的文本通常會呈現(xiàn)為粗體。標簽：在表格中定義一行。標簽：定義表格中的一個單元格，包含在標簽中。標簽：定義表格的表頭。標簽：定義一段表格主

19、體（正文），使用標簽，可以將表格中的一行或幾行合成一組，從而將表格分為幾個單獨的部分，一個標簽就是表格中的一個獨立的部分，不能從一個跨越到另一個中。標簽：定義表格的頁腳（腳注）。標簽：定義表格中針對一個或多個列的屬性值。只能在表格或colgroup標簽中使用此標簽。標簽：定義表格列的分組。通過此標簽可以對列進行組合以便進行格式化，此標簽只能用在標簽內部。標簽來創(chuàng)建表格，標簽內包含了表名和表格本身內容的代碼 示例：2.2 TableEG2.html -24-表格屬性使用表格屬性可以設置表格的外觀示例：2.3 TableEG3.html 表格屬性說明border設置表格邊框bgcolor設置表格背

20、景顏色background設置表格背景圖片width表格的寬度，單位用像素或百分比height表格的高度，單位用像素或百分比align對齊方式，有l(wèi)eft（左對齊）、right（右對齊）和center（居中對齊）cellspacing設置單元格之間的距離cellpadding設置單元格內的內容與邊框的距離colspan單元格水平合并，值為合并的單元格的數(shù)目rowspan單元格垂直合并，值為合并的單元格的數(shù)目-25-表單表單由三部分組成：表單標簽表單域表單按鈕 示例：2-4 FormEG.html-26-HTML表單（Form）是HTML的一個重要部分，主要用于采集和提交用戶輸入的信息。表單標簽

21、表單標簽表單標簽（）用于聲明表單，定義采集數(shù)據(jù)的范圍，同時包含了處理表單數(shù)據(jù)的應用程序以及數(shù)據(jù)提交到服務器的方法。 action：指定處理表單中用戶輸入數(shù)據(jù)的URL method：指定向服務器傳遞數(shù)據(jù)的HTTP方法，主要有Get和Post兩種方法，默認值是Getenctype：指定了數(shù)據(jù)發(fā)送時的編碼類型 target：用于指定在瀏覽器中哪個frame中顯示服務器的響應HTML -27-.文本框和多行文本框文本框 文本框是一種用來輸入內容的表單對象，通常被用來填寫簡單的內容，如姓名、地址等。 語法格式如下：多行文本框 多行文本框（文本域）是一種用來輸入較長內容的表單對象。 語法格式如下：-28-

22、 密碼框和隱藏框密碼框密碼框是一種用于輸入密碼的特殊文本域。當訪問者輸入文字時，文字會被星號或其它符號代替，從而隱藏輸入的真實文字。 語法格式如下：隱藏域 隱藏域是用來收集或發(fā)送信息的不可見元素，網頁的訪問者無法看到隱藏域，但是當表單被提交時，隱藏域的內容同樣會被提交。 語法格式如下：-29- 復選框和單選框復選框 復選框允許在待選項中選中一個以上的選項。每個復選框都是一個獨立的元素。 語法格式如下：單選框 單選框只允許訪問者在待選項中選擇唯一的一項。該控件用于一組相互排斥的值，組中每個單選按鈕控件的名字相同，用戶一次只能選擇一個選項。 語法格式如下：-30- 文件上傳框、下拉選擇框文件上傳框

23、 文件上傳框用于讓用戶上傳自己的文件，文件上傳框與其他文本域類似，但它還包含了一個瀏覽按鈕。訪問者可以通過輸入需要上傳的文件的路徑或者點擊瀏覽按鈕選擇需要上傳的文件。語法格式如下：下拉選擇框 下拉選擇框可以讓瀏覽者快速、方便、正確的選擇一些選項，同時可以節(jié)省頁面空間，它通過標簽實現(xiàn)，該標簽用于顯示可供用戶選擇的下拉列表。語法格式如下：-31-.表單按鈕表單按鈕主要分為：提交按鈕 、復位按鈕和普通按鈕提交按鈕 提交按鈕用來將輸入的表單信息提交到服務器。 復位按鈕 復位按鈕用來重置表單。 普通按鈕 普通按鈕通常用來響應javascript事件（如onclick），用來調用相應的javascript

24、函數(shù)來實現(xiàn)各種功能。 綜合案例：2.5 register.html -32- 框架框架優(yōu)點如下 ：重載頁面時不需要重載整個頁面，只需要重載頁面中的一個框架頁，從而減少了數(shù)據(jù)的傳輸，加快了網頁下載速度。方便制作導航欄。示例：-33-標題 框架（Frame）就是瀏覽器窗口的一個區(qū)域，在這個區(qū)域中可以顯示一個單獨的頁面，而不影響另一個框架中的顯示內容 ?？蚣芙Y構基本結構 通過標簽來定義如何劃分框架，通過設置的“cols/rows”屬性來確定的列/行數(shù)以及所占窗口的比例。 而每個引入的頁面通過框架標簽定義，的src屬性用于設置所引用網頁的路徑。frameset常用屬性屬性名說明cols用“象素數(shù)”或百

25、分比分割左右窗口，其中“*”表示剩余部分rows用“象素數(shù)”或百分比分割上下窗口，其中“*”表示剩余部分frameborder設置框架的邊框，其值只有0和1。0表示沒有邊框，1表示顯示邊框。邊框是無法調整粗細的framespacing表示框架與框架間的空白距離-34-cols和rows中值的個數(shù)對應要分割的的個數(shù)，即有幾個值就有幾個 。使用框架混合框架可根據(jù)設計需要，混合使用和標簽設置區(qū)域相互獨立的復雜頁面。示例：2.7 HunHeFrame.html導航框架 導航框架（導航欄）是在網頁框架的中加入name屬性，表示該的名稱，然后通過超鏈接來標識URL，并用target指定的名稱。 示例：2.

26、8 NavFrameEG.html 內聯(lián)框架 內聯(lián)框架的本質是在一個頁面中嵌入一個框架窗口來顯示另一個頁面的內容。內聯(lián)框架使用標簽來定義。 示例：2.9 NeiLianFrameEG.html -35-小結-36-表格是HTML的高級控件之一。表格可以清晰明了的展現(xiàn)數(shù)據(jù)之間的關系，便于對比分析HTML中與表格有關的10個標簽是：、表單由表單標簽、表單域、表單按鈕組成創(chuàng)建表單最關鍵的是掌握三個要素即表單控件、action屬性和method屬性向服務器傳遞數(shù)據(jù)的HTTP方法，主要有Get和Post兩種方法，默認值是Get表單域包含了文本框、密碼框、隱藏域、多行文本框、復選框、單選框、下拉選擇框和文

27、件上傳框等，用于采集用戶輸入或選擇的數(shù)據(jù)表單按鈕主要分為三類：提交按鈕、重置按鈕和普通按鈕使用框架可以把瀏覽器窗口劃分成多個相互獨立的區(qū)域HTML框架既可以橫向分割也可以縱向分割使用框架技術可以方便的實現(xiàn)頁面導航功能第3章 CSS樣式目標-38-了解CSS的特點及優(yōu)勢掌握CSS的基本語法及樣式規(guī)則掌握類選擇器和ID選擇器的定義方式掌握CSS選擇符的組合定義掌握CSS的繼承特性掌握樣式表的引用方式及優(yōu)先級掌握偽類及偽對象的使用方式掌握CSS樣式中常用的屬性設置CSS的概念CSS（Cascading Style Sheets，層疊樣式表） -39-單純使用HTML在排版和界面效果上具有局限性CSS

28、解決了網頁界面排版的難題 HTML的標簽：定義網頁的內容CSS：網頁內容如何顯示 樣式規(guī)則樣式規(guī)則樣式表由樣式規(guī)則組成，這些規(guī)則用于定義文檔的樣式，即告訴瀏覽器如何顯示文檔。樣式規(guī)則由三個部分構成：選擇符（selector），屬性（properties）和屬性的取值（value）。 selector是選擇符，最普通的選擇符就是HTML標簽的名稱。property1、property2和propertyN為屬性名；value是為對應屬性名指定的值；每對屬性名/屬性值后一般要跟一個分號（括號內只有一對名/值的情況除外） 示例：3.1 CSSBaseEG1.html -40-selector pro

29、perty1：value; property2：value; . propertyN：value;選擇符選擇符用于指定需要修飾的元素常用的選擇符主要有三類HTML選擇符ID選擇符類選擇符 -41-HTML選擇符HTML選擇符 使用HTML標簽作為選擇符，指定頁面中此類元素的樣式任何HTML標簽都可以作為選擇符-42-P text-indent: 3em Table border: 1px solid red標簽的樣式 標簽的樣式 類選擇符類選擇符 使用類選擇符，可以把相同的元素分類定義為不同的樣式 示例：3.2 ClassCssEG1.html也可以不指定HTML元素，直接用“.”加上類名稱，

30、這樣可以使不同的元素共享同樣的樣式，提高了代碼的靈活度和復用度 示例：3.3 ClassCssEG2.html -43-selector.classnameproperty1：value;. .classnameproperty1：value;.ID選擇符ID選擇符 通過ID選擇符為某個單一元素定義單獨的樣式 示例：3.4 CSSBaseEG2.html -44-#IDName property1：value;. IDName指定元素的ID 組合選擇符選擇符的組合 當有多個選擇符需要設置相同的屬性和屬性值時，可以用逗號將選擇符隔開進行組合定義，即一次性設置多個選擇符的屬性和屬性值，這樣可以減少

31、樣式重復定義示例：3.5 SelectorGroupEG.html 包含選擇符是另外一種形式的組合定義-45-selector1, selector2,.property1：value;.table a font-size: 12pxtable 和 a之間沒有通過逗號隔開，該樣式定義的是：在表格內的鏈接的文字大小為12象素，而表格外的鏈接的文字仍為默認大小 樣式表的繼承樣式表的繼承是指內部元素自動具有外部元素的樣式示例：3.6 inherEG.html -46- ABCD 元素為元素的內部元素，所以文字“ABCD”將使用上規(guī)定的樣式。當內部元素與外部元素的統(tǒng)一樣式不一致時，將采用內部樣式使用樣

32、式表-1CSS的使用方式有以下幾種：內嵌樣式（Inline Style）內部樣式表（Internal Style Sheet） 外部樣式表（External Style Sheet） 內嵌樣式內嵌樣式是指將CSS語句混合在HTML標簽中使用的方式，CSS語句只對其所在的標簽有效，內嵌樣式通過所在標簽的style屬性聲明 示例代碼如下：-47-CSS樣式 使用樣式表-2內部樣式表 內部樣式表是指在HTML的標簽中聲明樣式的方式。內部樣式表通過標簽聲明，只對所在的網頁有效示例：3. 1 CSSBaseEG1.html 外部樣式表 外部樣式表是指將CSS樣式表保存成一個獨立的文件，然后將該文件引用到

33、網頁中的方式。樣式表文件名采用后綴“css”示例：3.7 EsscssEG.html 樣式表引入的優(yōu)先級當在同一個網頁中同時使用多種方式引入CSS樣式時，樣式采用的優(yōu)先級從高到低依次是內嵌內部外部瀏覽器缺省 -48-這種方式適合于多個網頁需要引用大量相同的CSS樣式的情況。 偽類偽類偽類通過在原有的樣式選擇符后添加偽類名稱來定義 selector : 選擇符pseudo-class : 偽類名稱 例如： 表示元素在鼠標經過時使用的樣式-49-selector: pseudo-class property1 : value;. 偽類用于指定元素在某種狀態(tài)下的樣式a : hover color :

34、 red 使用偽類錨標簽的偽類 錨標簽有四種狀態(tài)的偽類，分別為未被訪問前、鼠標懸停時、被用戶激活時（鼠標已點擊但未釋放）、被訪問過后 。 示例：3.8 PseudoClassEG.html 結合類選擇符 將錨偽類和類選擇符結合使用，可以在同一個頁面做出多組不同的鏈接效果示例：3.9 PseudoAndClassEG.html偽類名說明link設置對象在未被訪問前的樣式hover設置對象在其鼠標懸停時的樣式active設置對象在被用戶激活（在鼠標點擊與釋放之間）時的樣式visited設置對象在其鏈接地址已被訪問過時的樣式-50-偽對象偽對象與偽類的方式類似，偽對象通過對插入到文檔中的虛構元素進行

35、觸發(fā)從而實現(xiàn)設定的樣式首行偽對象 首行偽對象（first-line）設置對象內的第一行的樣式 示例：代碼3-10 FirstLineEG.html 首字母偽對象 首字母偽對象（first-letter）設置對象內第一個字母的樣式示例：代碼3-11 FirstLetterEG.html -51-selector:first-line property:value. selector : first-letter property:value. 偽對象用于設置元素某一部分的樣式CSS文本樣式屬性文本屬性 文本屬性主要用于塊標簽中文本的樣式設置，常用的屬性有縮進、對齊方式、行高、文字和字母間隔、文本

36、轉換和文本修飾等 。 示例：3.12 TextCssEG.html 文本屬性功能取值方式text-indent實現(xiàn)文本的縮進長度（length）：可以用絕對單位（cm，mm，in，pt，pc）或者相對單位（em，ex，px）；百分比（%）：相對于父標簽寬度的百分比text-align設置文本的對齊方式left：左對齊；center：居中對齊；right：右對齊；justify：兩端對齊line-height設置行高數(shù)字或百分比，具體可參考文本縮進的取值方式word-spacing文字間隔，用來修改段落中文字之間的距離缺省值為0。word-spacing的值可以為負數(shù)。當word-spacing

37、的值為正數(shù)時，文字之間的間隔會增大，反之，word-spacing的值為負數(shù)時，文字間距就會減少letter-spacing字母間隔，控制字母或字符之間的間隔取值同文字間隔類似text-transform文本轉換，主要是對文本中字母大小寫的轉換uppercase：將整個文本變?yōu)榇髮?；lowercase：將整個文本變?yōu)樾?；capitalize：將整個文本的每個文字的首字母大寫text-decoration文本修飾，修飾強調段落中一些主要的文字none、underline（下劃線）、overline（上劃線）、line-through（刪除線）和blink（閃爍）-52-CSS文字樣式屬性文字屬

38、性 CSS中通過一系列的文字屬性來設置網頁中文字的顯示效果，主要包括文字字體、文字加粗、字號、文字樣式 。 示例：3.13 FontCssEG.html 文字屬性功能取值方式font-family設置文字字體文字字體取值可以為：宋體、ncursive、fantasy、serif等多種字體font-weight文字加粗normal：正常字體；bold：粗體；bolder：特粗體；lighter：細體font-size文字字號absolute-size：根據(jù)對象字體進行調節(jié)；relative-size：相對于父對像中字體尺寸進行相對調節(jié)；length：百分比。由浮點數(shù)字和單位標識符組成的長度值，不

39、可為負值。其百分比取值是基于父標簽中字體的尺寸font-style文字樣式normal：正常的字體；italic：斜體；oblique：傾斜的字體-53-CSS背景樣式屬性背景屬性 CSS中通過一系列的文字屬性來設置網頁中文字的顯示效果，主要包括文字字體、文字加粗、字號、文字樣式 。 示例：3.14 BackGroundEG.html背景屬性功能取值方式background-color設置對象的背景顏色屬性的值為有效的色彩數(shù)值background-image設置背景圖片可以通過為url指定值來設定絕對或相對路徑指定網頁的背景圖像background-repeat背景重復，設置一個指定的背景圖象

40、如何被重復repeat：背景圖像平鋪（有橫向和縱向兩種取值：repeat-x：圖象橫向重復；repeat-y：圖象縱向重復）；norepeat：背景圖像不平鋪background-attachment背景附加，設置指定的背景圖像是跟隨內容滾動，還是固定不動scroll：背景圖像是隨內容滾動；fixed：背景圖像固定即內容滾動圖像不動background-position背景位置，確定背景的水平和垂直位置左對齊（left）、右對齊（right）、頂部（top）、底部（bottom）和值（自定義背景的起點位置，可對背景的位置做出精確的控制）background該屬性是復合屬性即上面幾個屬性的隨意組

41、合，它用于設定對象的背景樣式該屬性的取值實際上對應上面幾個具體屬性的取值-54-CSS定位樣式屬性定位屬性 定位屬性主要從定位方式、層疊順序、與父標簽的相對位置等三個方面來設置 。 示例：3.15 PositionCssEG.html 定位屬性功能取值方式position定位方式，設置對象的是否定位，以及定位的方式static：無特殊定位；relative：對象不可層疊，但將依據(jù)left，right，top，bottom等屬性在正常文檔流中偏移位置；absolute：將對象從文檔流中拖出，使用left，right，top，bottom等屬性進行絕對定位z-index設置對象的層疊順序auto：

42、遵循其父對象的定位；自定義數(shù)值：無單位的整數(shù)值，可為負值top、right、bottom、left父對象的相對位置auto：無特殊定位，自定義數(shù)值：由浮點數(shù)字和單位標識符組成的長度值，或者百分數(shù)。必須定義position屬性值為absolute或者relative此取值方可生效-55-如果兩個絕對定位對象的z-index具有同樣的值，那么將依據(jù)它們在HTML文檔中聲明的順序來決定其層疊順序。 CSS邊框樣式屬性邊框屬性 邊框屬性用來設置對象邊框的顏色、樣式和寬度。邊框顏色 用于設定邊框的顏色（border-color）。 顏色的設置有4個參數(shù)，根據(jù)賦值個數(shù)的不同，會有以下幾種情況 ：如果在設定

43、顏色時提供四個顏色參數(shù)，將按上右下左的順序作用于四個邊框。如果只提供一個顏色參數(shù)，則應用于四個邊框。如果提供兩個參數(shù)，第一個用于上、下邊框，第二個用于左、右邊框。如果提供三個參數(shù)，第一個用于上邊框，第二個用于左、右邊框，第三個用于下邊框。邊框樣式 用于設定邊框的樣式（border-style）。邊框樣式同樣有4個參數(shù)，賦值方式與邊框顏色相同 。 -56-CSS樣式屬性-6邊框寬度 用于設定邊框的寬度（border-width），寬度的取值為關鍵字或自定義的數(shù)值 。邊框寬度同樣有四個參數(shù)需要賦值，賦值方式與邊框顏色相同 示例：3.16 PositionCssEG2.html 綜合示例：網上書店系

44、統(tǒng)中后臺管理部分的圖書管理頁面 -57-小結-58-CSS樣式表能實現(xiàn)內容與樣式的分離，方便團隊開發(fā)樣式表的規(guī)則由選擇器和屬性設置組成選擇器可以是類選擇器、ID選擇器和HTML選擇器可以用逗號將選擇符隔開進行組合定義，以便同時設置多個選擇符的屬性和屬性值CSS的繼承是指被包在內部的標簽將擁有外部標簽的樣式性質當樣式表繼承遇到沖突時，總是以最后定義的樣式為準在頁面內使用CSS時可以采用內嵌樣式表、內部樣式表或外部樣式表三種方式當在同一個網頁中同時使用多種方式引入CSS樣式時，樣式采用的優(yōu)先級從高到低依次是內嵌內部外部瀏覽器缺省錨標簽有四種狀態(tài)的偽類：link、hover、active、visit

45、ed偽對象通過對插入到文檔中的虛構元素進行觸發(fā)從而實現(xiàn)設定的樣式常用的CSS樣式屬性有：文本屬性、文字屬性、背景屬性、定位屬性、邊框屬性等常用的設置文字樣式的屬性有font-size、font-family、font-style、text-align等常用的設置背景及顏色的屬性有background、background-image、background-color等第4章 頁面布局目標-60-了解層的概念及應用熟練使用標簽掌握表格布局技術及優(yōu)缺點掌握框架布局及其優(yōu)缺點熟練使用Dreamweaver來創(chuàng)建框架熟練使用Dreamweaver設置框架屬性并保存框架掌握DIV+CSS布局技術DIV層

46、DIV層標簽的主要作用是用于設定文字、圖片、表格等的擺放位置 當把文字，圖片等放在標簽中時，該標簽被稱為“DIV塊”或“DIV元素”或“DIV層”。 使用CSS和DIV可以很好的解決圖像或文字定位的難題，通過DIV和CSS結合使用，網頁設計人員可以精確的設定內容的位置，還可以將定位的內容上下疊放。 示例：4.1 DivEG.html -61-標簽也稱為區(qū)隔標簽，為HTML文檔內大塊（block-level）的內容提供結構和背景的設置。如果單獨使用標簽，而不加任何CSS樣式修飾，那么它在網頁中的效果和使用段落標簽的效果是相同的 頁面布局頁面布局一般分為以下幾種 ：表格布局框架布局 DIV+CSS

47、布局 -62-頁面布局，就是將網頁中的各個版塊有效組織并放置在合適的位置。表格布局和DIV+CSS布局是目前最常用的布局方式表格布局表格布局 表格在網頁中更多的是用于網頁的布局，其優(yōu)勢在于可以有效地定位網頁中不同的元素，結構清晰。 Dreamweaver CS6提供了“布局”模式。在“布局”模式中，可以使用表格作為基礎布局結構來設計網頁。表格布局有以下原則 ：不要把整個網頁當成一個大表格，盡可能使用多個表格進行分塊。 使用嵌套表格。表格的邊框設置。表格布局步驟： 使用布局視圖； 繪制布局表格 ；繪制布局單元格；設置單元格屬性；預覽網頁。示例：4.2 通過Dreamweaver CS6演示表格布

48、局的實現(xiàn)過程-63-框架布局框架布局框架是另一種常用的網頁布局排版工具。框架結構就是把瀏覽器窗口劃分為多個區(qū)域，每個區(qū)域都可以分別顯示不同的網頁。使用框架最常見的用途就是導航，在使用了框架以后，用戶的瀏覽器不需要為每個頁面重新加載與導航相關的圖?？蚣懿季植襟E： 建立框架； 設置框架模板； 設置框架的屬性； 保存框架； 設置嵌套框架屬性。 示例：4.3 通過Dreamweaver CS6演示框架布局的實現(xiàn)過程 -64-DIV+CSS布局-1DIV+CSS布局使用DIV+CSS布局，可先不考慮外觀，首先需要將頁面內容的語義或結構確定下來。 使用DIV+CSS布局，外觀不是最重要的，一個結構良好的H

49、TML頁面可以通過CSS以任意外觀表現(xiàn)出來。 引入CSS布局的目的就是為了實現(xiàn)真正意義上的結構和外觀的分離，這也是DIV+CSS布局最大的特色。 -65-DIV+CSS布局-2DIV+CSS布局一個完整的網頁通常包含以下幾個部分：標志和站點名稱、主頁面內容、站點導航、子菜單、搜索區(qū)域、功能區(qū)、頁腳（版權和法律聲明） ，如下圖：示例：4.4 演示DIV+CSS布局的實現(xiàn)過程-66-小結-67-DIV元素是用來為HTML文檔內大塊（block-level）的內容提供結構和背景的元素標簽可用于定義HTML文檔中的分區(qū)或節(jié)，將HTML文檔劃分為獨立的、不同的部分布局一般分為表格布局、框架布局和DIV+

50、CSS布局模式在Dreamweaver CS6中提供了3種布局視圖：標準、布局和擴展表格布局的優(yōu)點是：布局容易、快捷而且兼容性好表格布局的缺點是：改動不方便，彼此之間容易受影響，一旦需要調整工作量會很大框架由框架和框架集兩部分組成框架是一種常用的網頁布局排版工具?？蚣芙Y構就是把瀏覽器窗口劃分為多個區(qū)域，每個區(qū)域都可以分別顯示不同的網頁Web網頁標準構成包括結構、外觀和行為三部分用CSS布局外觀不是最重要的，一個結構良好的HTML頁面可以通過CSS以任何外觀表現(xiàn)出來DIV布局的優(yōu)點是：網頁代碼精簡、提高頁面下載速度、表現(xiàn)和內容相分離等；缺點則是：過于靈活，比較難控制第5章 JavaScript基

51、礎目標-69-了解JavaScript的歷史及特點掌握JavaScript常用的數(shù)據(jù)類型掌握JavaScript變量的定義掌握JavaScript中的操作符及表達式掌握JavaScript中的分支、迭代結構掌握JavaScript中內置函數(shù)的使用掌握JavaScript的函數(shù)的定義及使用JavaScript簡介JavaScript是一種基于對象（Object）和事件驅動（Event Driven）的腳本語言，使用它的主要目的是增強HTML頁面的動態(tài)交互性 ，其特點如下：嵌套在HTML中 環(huán)境支持 解釋執(zhí)行弱類型語言基于對象事件驅動跨平臺性-70-JavaScript是Sun MicroSyst

52、ems和NetScape共同開發(fā)的一種重要的腳本語言，用于創(chuàng)建動態(tài)效果的、人機交互的網頁。JavaScript基本結構JavaScript基本結構 JavaScript代碼是通過標簽嵌入HTML文檔中的。可以將多個腳本嵌入到一個文檔中。 基本結構如下：編寫JavaScript步驟利用任何編輯器（如Dreamweaver或記事本）創(chuàng)建HTML文檔 。 在HTML文檔中通過標簽嵌入JavaScript代碼。 將HTML文檔保存為擴展名是“.html”或“.htm”的文件，并查看結果。示例：5.1 FirstJSEG.html -71-JavaScript語句引用JavaScript文件引用JS文件

53、 當JavaScript腳本比較復雜或代碼過多時，可將JavaScript代碼保存以“.js”為后綴的文件，并通過標簽把“.js”文件導入到HTML文檔中 。 語法格式如下：示例：5.2 FirstImportJSEG.html -72- JavaScript數(shù)據(jù)類型數(shù)據(jù)類型 JavaScript中的數(shù)據(jù)類型 ：數(shù)據(jù)類型說明數(shù)值型JavaScript語言本身并不區(qū)分整型和浮點型數(shù)值，所有的數(shù)值在內部都由浮點型表示字符串類型使用單引號或雙引號括起來的0個或多個字符布爾型布爾型常量只有兩種值，即true或false函數(shù)JavaScript函數(shù)是一種特殊的對象數(shù)據(jù)類型，因此函數(shù)可以被存儲在變量、數(shù)組

54、或對象中。此外，函數(shù)還可以作為參數(shù)傳遞給其他函數(shù)。對象型已命名數(shù)據(jù)的集合，這些已命名的數(shù)據(jù)通常被作為對象的屬性引用。常用的對象有String、Date、Math、Array等null是JavaScript中的一個特殊值，它表示“無值”，它和0不同undefined表示該變量尚未被聲明或未被賦值，或者使用了一個并不存在的對象屬性-73-常量常量是指在程序中值不能改變的數(shù)據(jù)，分為以下幾類： 數(shù)值型常量 如123、-0 xAF、072、-123.456字符串型常量如JavaScript、100、JavaScript 布爾型常量可取值true和false-74-JavaScript中字符串可以用雙引號

55、和單引號兩種方式聲明 變量變量 變量是指程序中一個已經命名的存儲單元 命名規(guī)則 變量名必須以字母或下劃線開頭，其后可以跟數(shù)字、字母或下劃線等；變量名不能包含空格、加號、減號等特殊符號；JavaScript的變量名嚴格區(qū)分大小寫；變量名不能使用JavaScript中的保留關鍵字。字符串型常量 聲明變量 變量用關鍵字var進行聲明示例如下：-75-var 變量1,變量2,.; var v1,v2;在JavaScript中，可以使用分號代表一個語句的結束，如果每個語句都在不同的行中，那么分號可以省略；如果多個語句在同一行中，那么分號就不能省略變量類型變量的類型 JavaScript是一種弱類型的語言

56、，變量的類型不像其它語言一樣在聲明時直接指定，對于同一變量可以賦不同類型的值。示例代碼如下：-76-var x = 100;x = javascript;全局變量變量的作用域 變量的作用域是指變量的有效范圍在JavaScript中根據(jù)變量的作用域可以分為全局變量和局部變量全局變量 在函數(shù)之外聲明的變量叫做全局變量。 示例代碼如下：-77-var x = 5/定義全局變量function myFunction()/函數(shù)體局部變量局部變量 在函數(shù)體內聲明的變量叫做局部變量。示例代碼如下：示例：5.D.2 VariableEG.html -78-function myFunction() var x

57、 = 5 / 定義局部變量.省略注釋注釋可分為單行注釋和多行注釋單行注釋 單行注釋使用“/”符號進行標識，其后的文字都不被程序解釋執(zhí)行。 語法格式如下：多行注釋 多行注釋使用“/*/”進行標識，其中的文字同樣不被程序解釋執(zhí)行。 語法格式如下：-79-/這是單行程序代碼的注釋/*這是多行程序注釋*/算術運算符JavaScript中運算符主要分為：算術運算符、比較運算符和邏輯運算符算術運算符 算術運算符是用于完成加法、減法、乘法、除法、遞增、遞減等運算的運算符。 算術運算符如下表所示：示例：5.4 MathEG.html運算符說明+用于兩個數(shù)相加-用于兩個數(shù)相減*用于兩個數(shù)相乘/用于兩個數(shù)相除%除

58、法運算中的取余數(shù)+遞增值（即給原來的值加1）-遞減值 （即給原來的值減1）-80-比較運算符比較運算符 比較運算符用于比較數(shù)值、字符串或邏輯變量等，并將比較結果以邏輯值（true或false）的形式返回。 比較運算符如下表所示：示例：5.5 CompareEG.html 運算符說明=比較兩邊的值是否相等!=比較兩邊的值是否不相等比較左邊的值是否大于右邊的值=比較左邊的值是否大于等于右邊的值=比較左邊的值是否小于等于右邊的值=比較兩邊的值是否嚴格相等!=比較兩邊的值是否嚴格不相等-81-邏輯運算符邏輯運算符 邏輯運算符主要用于條件表達式中，采用邏輯值作為操作數(shù)，其返回值也是邏輯值。 邏輯運算符如

59、下表所示：示例：5.6 LogicEG.html 運算符說明&邏輯與，當左右兩邊的操作數(shù)都為true時，返回true，否則返回false|邏輯或，當左右兩邊的操作數(shù)都為false時，返回false，否則返回true!邏輯非，當操作數(shù)為true時返回false，反之返回true?:三目運算符：操作數(shù)?結果1:結果2，若操作數(shù)為true則返回結果1，反之返回結果2-82-流程控制-分支結構JavaScript中的流程控制有： 分支結構：if-else、switch迭代結構：while、do-while、for轉移語句：break、continue、return分支結構分支結構是根據(jù)假設的條件成立與

60、否，再決定執(zhí)行什么樣語句的結構，它的作用是讓程序更具有選擇性分支結構包括if語句和switch語句-83-if 語句if-else示例：5.7 MaxEG.html 嵌套if示例：5.8 YearEG.html-84-if(condition) statement1;else statement2; if (condition) statement1; else if (condition) statement2; else statement;switch 語句switch一個switch語句由一個控制表達式和一個由case標記表述的語句塊組成。 語法結構如下：示例：5.9 SwitchCa