1、第1章 HTML語言簡介 1.1 【案例1】第1個HTML網頁1.2 【案例2】“中國詩詞佳句作者”網頁 1.3 【案例3】“鯨魚和螃蟹”網頁 1.4 【案例4】“圖像切換”網頁 1.5 【案例5】“鏈接技術演示”網頁 1.6 【案例6】“中國的世界文化遺產”網頁 1.7 【案例7】“FLASH技術說明”網頁 1.8 【案例8】“最新消息公告”網頁1.9 【案例9】“水中倒影”網頁 1.10 【案例10】“飄動的楓葉”網頁 1.1 【案例1】第1個HTML網頁 1HTML文件特點HTML文件是標準的ASCII文件，它看起來像是加入了許多被稱為鏈接簽（tag）的特殊字符串的普遍文本文件。從結構上

2、講，HTML文件由元素（element）組成，組成HTML文件的元素有許多種，用于組織文件的內容和指導文件的輸出格式。絕大多數元素是“容器”，即它們有起始標記和結尾標記。元素的起始標記叫做起始鏈接簽（start tag），元素的結束標記叫做結尾鏈接簽（end tag），在起始鏈接簽和結尾鏈接簽中的部分是元素體。每一個元素都有名稱和可選擇的屬性，元素的名稱和屬性都在起始鏈接簽內標明。一個元素的元素體中可以有其他的元素。“屬性名”、“=”和“屬性值”合起來構成一個完整的屬性，一個元素可以有多個屬性，各個屬性用空格分開。需要說明的是，HTML是一門發展很快的語言，早期的HTML文件并沒有如此嚴格的結

3、構，因而現在流行的瀏覽器為了保持對早期HTML文件的兼容性，也支持不按上述結構編寫的HTML文件。另外，各種瀏覽器對HTML元素及其屬性的解釋也不完全一樣。一般來講，HTML的元素有下列3種表示方法。（1）文件或超文本（2）文本或超文本（3）第3種寫法僅用于一些特殊的元素，例如分段元素P，它僅僅通知WWW瀏覽器在此處分段，因而不需要界定作用范圍，所以它沒有結尾鏈接簽。HTML語言的標記種類很多，圖1-1-2中常用的標記含義介紹如下。注意：HTML文檔中的起始鏈接簽“”和元素名稱（例如BODY）之間不能有空格。2網頁基本結構標記（1）：它是HTML文檔中最基本的標記，不可缺少。表示HTML文檔的

4、開始，表示HTML文檔的結束。（2）：它是網頁頭部標記。可以提高網頁文檔的可讀性，向瀏覽器提供一個信息。它可以忽略，但一般不予忽略。（3）：它是網頁名稱標記，是標記內唯一一個必須出現的元素，有標記就一定要有標記。TITLE元素是文件頭中的元素，它也只能出現在文件頭中。TITLE標明該HTML文件的題目，是對文件內容的概括。一個好的題目應該能使讀者從中判斷出該文件的大概內容。文件的題目一般不會顯示在文本窗口中，而以窗口的名稱顯示出來。除了標識窗口外，當將某一個網頁存入書簽或文件時，TITLE還用做書簽名或缺省的文件名。TITLE的長度沒有限制，但過長的題目會導致轉行，一般情況下它的長度不應超過6

5、4個字符。（4）：它是網頁主題內容標記。其中包含了網頁的正文內容，一般不可缺少。（5）：使用標記中的BGCOLOR屬性，可以設置網頁的背景顏色。使用的格式有以下兩種。在第一種格式中，RR、GG、BB可以分別取值為00FF的十六進制數。RR、GG、BB分別用來表示顏色中的紅色、綠色和藍色成分的多少，數值越大，顏色越深。紅、綠、藍三色按一定比例混合，可以得到各種顏色。例如，RR =FF，GG=FF，BB=00，表示為黃色。如果RRGGBB取值為000000，則為黑色；RRGGBB取值為FFFFFF，則為白色；RRGGBB取值為FF8888， 則為淺紅色。第二種格式是直接使用顏色的英文名稱來設定網頁

6、的背景顏色。例如：用來設置網頁的背景顏色為藍色。：用來設置網頁的背景顏色為紅色。：用來設置網頁的背景顏色為白色。（6）：它是圖像標記。用來加載圖像與GIF動畫。在網頁中加載GIF動畫的方法與加載圖像的方法一樣。GIF動畫文件的擴展名也是.gif，文件格式是GIF89A格式。制作GIF動畫的軟件有很多，例如Fireworks和Ulead GIF Animator 5.0等。（7）SRC：它是依附于其他標記的一個屬性，依附于標記時，用來導入圖像與GIF動畫。其格式如下：（8）：它是換行標記，表示以后的內容移到下一行。它是單向標記，沒有。（9）：它是保留文本原來格式的標記。它的作用是將其中的文本內容

7、按照原來的格式顯示。否則瀏覽器會自動取消文本中的空格。 （10）：它是粗體標記。可使其中的文字變為粗體。3其他常用標記（1）：它是正文的第三級標題標記。此外，還有第一、二、三、四、五、六級標題標記，分別為、和。級別越高，文字越小。一般情況下，瀏覽器對標題作如下解釋。H1 黑體，特大字體，居中，上下各有兩行空行。H2 黑體，大字體，上下各有一到兩行空行。H3 黑體（斜體），大字體，左端微縮進，上下空行。H4 黑體，普通字體，比H3縮進更多，上邊一空行。H5 黑體（斜體），與H4相同縮進，上邊一空行。H6 黑體，與正文有相同縮進，上邊一空行。Hn可以有對齊屬性，ALIGN#，“#”表示Left（標

8、題居左）、Center（標題居中）和Right（標題居右）。例如： 標題2 （2）：它是段落標記。它的作用是將其內的文字另起一段顯示。段與段之間有一個空行。HTML的瀏覽器是基于窗口的，用戶可以隨時改變顯 示區的大小，所以HTML將多個空格以及回車等效為一個空格，這是和絕大多數字處理器不同的。段落標記也可以有多種屬性，比較常用的屬性是Aligh#。“#”可以是Left、Center或Right，其含義同上文。4文件的路徑名（1）絕對路徑：絕對路徑是寫出全部路徑，系統按照全部路徑進行文件的查找。絕對路徑中的盤符后用“：”或“：/”，各個目錄名之間以及目錄名與文件名之間，應用“”或“/”分隔開。絕

9、對路徑名的寫法及其含義如表所示。（2）相對路徑：相對路徑是以當前文件所在路徑和子目錄為起始目錄，進行相對的文件查找。通常都采用相對路徑，這樣可以保證站點中的文件整體移動后，不會產生斷鏈現象。相對路徑名的寫法及其含義如表所示。絕對路徑名 含 義 HREF=“/TD/HTML0.htm” HTML0.htm在域名為的服務器中的TD目錄下 HREF=“E:DRAWTDTDHTML0.htm” HTML0.htm放在E盤的DRAWTD目錄下的TD子目錄中 絕對路徑名的寫法及其含義 5URLURL（Uniform Resource Locator）即統一資源定位器，WWW上的地址編碼，是文件名的擴展。它

10、指出了文件在Internet中的位置。它存在的目的在于統一WWW上的地址編碼，給每一個網頁指定的地址，這樣就不會出現重復或由于編碼不統一而出現無法瀏覽等問題。當用戶查詢信息資源時，只要給出URL地址，WWW服務器就可以根據它找到網絡資源的位置，并將它傳送給用戶的計算機。通常，當用戶用鼠標單擊網頁中的鏈接點時，就將URL地址的請求傳送給了WWW服務器。相對路徑名 含 義 HREF=“HTML0.htm” HTML0.htm是當前目錄下的文件名 HREF=“DRAWTD/HTML0.htm” HTML0.htm是當前目錄中“DRAWTD”目錄下名字為HTML 0.htm的文件 HREF=“DRAW

11、TD/TD/HTML0.htm” HTML0.htm是當前目錄中，“DRAWTD/TD”目錄下名字為HTML0.htm的文件 HREF=“./HTML0.htm” HTML0.htm是當前目錄的上一級目錄下名字為HTML0.htm的文件 HREF=“././HTML0.htm” HTML0.htm是當前目錄的上兩級目錄下名字為HTML0.htm的文件 在單機系統中，定位一個文件需要路徑和文件名；對于遍布全球的Internet，顯然還需要知道文件存放在哪個網絡的哪臺主機中才行。另外，單機系統中，所有的文件都由統一的操作系統管理，因而不必給出訪問該文件的方法；而在Internet上，各個網絡，各臺

12、主機的操作系統都不一樣，因此必須指定訪問該文件的方法。一個完整的URL地址通常由通信協議名（訪問該資源所采用的協議，即訪問該資源的方法）、Web服務器地址（存放該資源主機域名地址，在因特網上，主機名可以使用主機域名地址或IP地址，通常以字符形式出現）、文件在服務器中的路徑和文件名四部分組成。例如/DRAWTD/TD/HTML0.html，其中http:/是通信協議名（http是超文本傳輸協議Hypertext Transfer Protocol），是Web服務器地址（主機域名地址），/DRAWTD/TD/是文件在服務器中的路徑，HTML0.html是文件名。在文件名之后，可以加“#”號和錨點名

13、。有時也可以在文件名之后加問號（“？”），然后加查詢字符串。與單機系統絕對路徑和相對路徑的概念類似，統一資源定位器也有絕對URL和相對URL之分。上文所述的是絕對URL。相對URL是相對于用戶最近訪問 的URL。比如現在觀看一個URL為http:/ /DRAWTD/TD/HTML0.html的文件，如果想看同一個目錄下的另一個文件HTML1.html，可以直接使用HTML1.html，這時HTML1.html就是一個相對URL，它的絕對URL為/DRAWTD/TD/HTML1.html。 1.2 【案例2】“中國詩詞佳句作者”網頁1文字的字體大小和顏色（1）字體大小：HTML文件可以有7種字號

14、，1號最小，7號最大。默認字號為3，可以用設置默認字號。設置文本的字號有兩種辦法，一種是設置絕對字號，；另一種是設置文本的相對字號，。用第2種方法時“+”號表示字體變大，“-”號表示字體變小。（2）字體顏色：字體的顏色用指定，#可以是6位十六進制數，分別指定紅、綠、藍的值。也可以使用16種標準顏色，如表所示。色 彩 名 十六進制值 色 彩 名 十六進制值 Aqua（水藍色） #00FFFF Navy（藏青色） #000080 Black（黑色） #000000 Olive（茶青色） #808000 Blue（藍色） #0000FF Purple（紫色） #800080 Fuchsia（櫻桃色）

15、 #FF00FF Red（紅色） #FF0000 Green（綠色） #808080 Silver（銀色） #C0C0C0 Gray（灰色） #008000 Teal（茶色） #008080 Line（石灰色） #00FF00 While（白色） #FFFFFF Maroon（褐紅色） #800000 Yellow（黃色） #FFFF00 例如，“字體大小和顏色”網頁（HTML2-2.htm）代碼如下。字體大小和顏色字體大小和顏色字體大小和顏色字體大小和顏色字體大小和顏色閃爍的文本（3）閃爍：使用BLINK標記可以使文本閃爍，閃爍頻率為1秒一次，舉例如下。閃爍的文本2字體風格字體風格分為物理風

16、格和邏輯風格。字體的物理風格直接指定字體，物理風格的字體有黑體、斜體、下畫線和打字機體等，如表所示。例如，“各種字體風格”網頁代碼如下（HTML2-3.htm）。各種字體風格標 記 符 功 能 標 記 符 功 能 粗體 刪除線 大字體 下標 斜體 上標 刪除線 固定寬度字體 小字體 下畫線 各種字體風格 各種字體風格各種字體風格 各種字體風格各種字體風格 各種字體風格各種字體風格 各種字體風格字體的邏輯風格用來指定文本的作用，有強調、特別強調、源代碼、例子、鍵盤輸入、變量、定義、引用、較小、較大、上標和下標。3邊框包圍的文字可以通過標記定義文字的邊框。輸入下面的HTML代碼（保存在名稱為“HT

17、ML2-4.htm”文件中）。圖像的大小和邊框增加了邊框的文字4添加注釋無論是編寫程序還是制作網頁，為所做的工作添加注釋都是一種良好的工作習慣。實際上，添加注釋是任何程序開發工作必須遵循的規范之一。HTML的注釋有開始標記符“”構成。這兩個標記符之間的任何內容都將被瀏覽器解釋為注釋，而不在瀏覽器中顯示。該標記可以添加在HTML代碼的任何位置。 1.3 【案例3】“鯨魚和螃蟹”網頁 1調整圖像大小和給圖像加邊框在網頁中插入圖像時使用的標記是，用來加載GIF圖像與動畫，“SRC”屬性用來輸入圖像的路徑。在網頁中加載GIF動畫的方法與加載GIF圖像的方法一樣。GIF動畫文件的擴展名也是.gif，文件

18、格式是GIF89A。（1）調整圖像大小：使用標記中的HEIGHT和WIDTH屬性可以調整圖像的大小。HEIGHT（決定圖像的高）和WIDTH（決定圖像的寬）的取值單位為像素。（2）給圖像加邊框：使用標記中的BORDER屬性可以給圖像加邊框。BORDER的取值單位為像素，當它的取值為0或者不加BORDER屬性時，則沒有邊框。通過標記中的HEIGHT和WIDTH屬性調整圖像，雖然可以改變圖像在網頁中的大小，但是調整過大會使圖像嚴重失真。合理設置HEIGHT和WIDTH屬性，才能得到最好的顯示效果。2背景平鋪圖像和圖像文字說明（1）設置背景平鋪圖像：使用標記中的BACKGROUND屬性，可設置網頁的

19、平鋪背景圖像，其格式如下。 （2）添加圖像文字說明：為了增強圖像在網頁中的顯示效果，可以為圖像添加文字說明。當鼠標移到圖片上方時，會出現說明文字。在關閉瀏覽器中的載入圖像命令時，說明文字可以替代圖像。使用標記的ALT屬性可以為圖像添加文字說明。3調整圖像和文本的相對位置在網頁中，經常需要將圖像和文本放在一起進行顯示。使用標記的ALIGN屬性可以調整圖像與文本的相對位置。使用標記中的VSPACE和HSPACE屬性可以調整圖像與文本間的距離。VSPACE（圖像與文本上下的距離）和HSPACE（圖像與文本左右的距離）的單位均為像素。標記中的ALIGN屬性用于調整圖像與文字的對齊方式，主要含義如下所述

20、。（1）ALIGN項缺省時：圖像的底部與其他文本或圖像的底部對齊。（2）ALIGN=top：圖像的頂部與其他文本或圖像的頂部對齊。（3）ALIGN=middle：圖像的中間與其他文本或圖像的中部對齊。（4）ALIGN=bottom：圖像的底部與其他文本或圖像的底部對齊。（5）ALIGN=left：圖像位于屏幕左邊。（6）ALIGN=right：圖像位于屏幕右邊。 1.4 【案例4】“圖像切換”網頁 1添加背景音樂使用標記可以在網頁中插入背景音樂。標記可以放在與標記內的任何地方。引導音樂文件的屬性是SRC，其格式如下。2在網頁中插入Flash動畫在網頁中直接包含多媒體對象最常用的兩個標記是標記和

21、標記。（1）標記：使用標記不僅可以在網頁中插入Flash動畫，還可以使用下載并顯示由插件支持的其他多媒體應用程序。使用標記可以在網頁中插入Flash對象同添加背景音樂的方法一樣，標記可以放在與標記內的任何地方。引導Flash動畫文件的屬性是SRC，格式如下：當瀏覽器遇到標記時，會加載其中指定的文件并確定它的MIME類型。MIME信息告知瀏覽器正在下載的文件類型。然后瀏覽器查找與該MIME 類型一致的插件，如果有就使用，如果沒有則會顯示一條錯誤信息，并且提示用戶下載該插件。（2）標記：該標記可以使網頁中包含JavaApple、視頻和音頻等多媒體及其他文件。當瀏覽器遇到標記時，會加載相應的文件并根

22、據該標記包含屬性的值來顯示它。 1.5 【案例5】“鏈接技術演示”網頁1鏈接文件使用的HTML標記鏈接也叫超文本鏈接。在網頁中加入超文本鏈接，就是通過單擊一部分文字、圖像或圖像中的一個區域，即可調出另一個網頁或本網頁的另一部分內容。HTML文件的鏈接是通過鏈接標記來實現的。在標記中除標記名“A”外還包括一些屬性。HREF是鏈接標記中一個最常用的屬性。該屬性用來指出所要鏈接的文件的路徑（或目錄）和名稱或URL；其簡單的結構形式如下。文字所有寫在起始標記和結束標記之間的文字構成一個實際的鏈接，當網頁在瀏覽器內顯示時，這些文字將以藍色高亮度或帶有下畫線的形式出現。如果需要鏈接的文件都放在本機磁盤上，

23、則這種鏈接叫本地鏈接，它不必鏈接網絡，只要本地的機器上有一個編輯器和瀏覽器就足夠了。如果需要鏈接的文件在網絡上，則需要網絡鏈接。網絡鏈接需要知道網址（URL）。2使用圖像或動畫的鏈接用圖像或動畫的鏈接，就是在單擊圖像或動畫后，即可調出與之鏈接的網頁文件或本網頁中的一段內容。建立圖像或動畫的鏈接的方法是在鏈接標記的中間加入一個標記，其格式如下。加入了鏈接的圖像或動畫會自動產生一個外框，以示與一般的圖像或動畫的區別。 1.6 【案例6】“中國的世界文化遺產”網頁1在同一個網頁中建立鏈接的HTML標記在同一個網頁文件中建立鏈接，需要做以下工作。（1）在文件的前面需要列出鏈接的標題文字，它們相當于文章

24、的目錄。同時將這些文字與相應的錨名（即定位名）建立鏈接。所謂“錨名”是指網頁中能被鏈接到的一個特定位置。建立鏈接時，要在錨名前加一個“#”符號，其格式如下。標題名字（2）為被鏈接的內容起一個名字，該名字叫錨名，其格式如下。錨名的定義要放在相應標題對應的內容前面。2建立電子郵件鏈接如果將HREF屬性值指定為“MAILTO:電子郵件地址”，就可以獲得電子郵件鏈接的效果。例如，使用下面的HTML代碼可以設置電子郵件的超鏈接。郵箱地址：shenda 當瀏覽網頁的用戶單擊了指向電子郵件的超級鏈接后，系統將自動啟動郵件客戶程序（對于安裝了Windows 98/2000以上操作系統的計算機，默認時啟動Out

25、look Express），并將指定的郵件地址填寫到“收件人”欄中，用戶可以編輯并發送該郵件。如果是第一次啟動Outlook Express，會要求進行軟件設置。3鏈接到其他頁面中的錨點通過前面的案例，可以看出從一個文件鏈接到另外一個文件與同一個文件中的鏈接的格式有所不同。那么，能不能使用一個命令，鏈接到其他文件的指定位置呢？在網頁中建立文字鏈接的HTML代碼是文字。只要將“被鏈接的文件名或URL”替換為“要鏈接的文件名或URL加#加錨點名稱”即可。例如，天壇標記，即可建立一個到HTMLABC.htm網頁文檔中的“天壇”錨點的鏈接。 1.7 【案例7】“FLASH技術說明”網頁 1設置框架和修

26、飾框架（1）設置框架：框架就是把一個網頁頁面分成幾個單獨的區域（窗口），每個區域顯示一個獨立的網頁，該部分可以是一個獨立的HTML文件。因此，框架可以實現在一個網頁內顯示多個HTML文件。一個有n個區域的框架網頁來說，每個區域有一個HTML文件，整個框架結構也是一個HTML文件，因此該框架網頁有n+1個HTML文件。設置框架需要使用標記來取代標記。標記有兩個屬性： ROWS=“n1,n2,n3”：縱向設置框架； COLS=“n1,n2,n3”：橫向設置框架。其中，n1、n2、n3為開設的框架占整個頁面的百分數。（2）修飾框架：修飾框架需要使用標記，它在標記之間。標記有6個屬性，介紹如下。 RC

27、=“URL”屬性：用來鏈接一個HTML文件，如果沒有該屬性，則窗口內無內容。 NAME=“窗口名稱”屬性：給窗口命名。MARGINWIDTH=n屬性： 用來控制窗口內的內容與窗口左右邊緣的間距。n為像素個數，默認值為1。MARGINHEIGHT=n屬性：用來控制窗口內的內容與窗口上下邊緣的間距。n為像素個數，默認值為1。SCROLING=YES、NO或AUTO屬性：用來確定窗口是否加滾動條。選YES時，為要滾動條；選NO時，為不要滾動條；選AUTO時，可以加滾動條，根據內容是否可以完全在窗口內全部顯示出來，來決定是否要滾動條。默認為AUTO 。NORESIZE屬性：如果設置了此屬性，則窗口不可

28、被用戶用鼠標調整大小；如果沒設置此屬性，則窗口可以被用戶用鼠標調整大小。FRAMEBORDER=n屬性：可以控制是否顯示框架邊框。n取值為1，表示生成3D邊框（此為默認設置）；n取值為0，則不顯示邊框。只有將所有相鄰框架的邊框都設置為0，才能隱藏邊框。2網頁框架舉例（1）開設縱向窗口：縱向開設3個窗口，各占50%、30%和20%，各窗口內分別加載HTML文件為HTML2-1.htm、HTML2-2.htm和HTML2-3.htm。在瀏覽器中觀察該網頁的結果。打開記事本程序，輸入如下HTML代碼。將該HTML文件以名字HTML7-2.htm保存在“DRAWTD”目錄下。 （2）開設橫向窗口：橫向

29、開設三個窗口，各占50%、30%和20%，各窗口內分別加載HTML文件為HTML2-1.htm、HTML2-2.htm和HTML2-3.htm。在瀏覽器中觀察該網頁的結果。打開記事本程序，輸入如下HTML代碼。將該HTML文件以名字HTML7-3.htm保存在“DRAWTD”目錄下。 （3）同時開設橫向和縱向窗口：縱向開設兩個窗口，各占40%和60%，上邊的窗口橫向開設兩個窗口，各占50%和50%，下邊的窗口橫向開設兩個窗口，各占40%和60%。分別加載HTML文件為HTML2-1.htm、HTML2-2.htm、HTML2-3.htm和HTML2-4.htm。在瀏覽器中觀察該網頁的結果。打開

30、記事本程序，輸入如下HTML代碼。將該HTML文件以名字HTML7-4.htm保存在“DRAWTD”目錄下。 3窗口間的鏈接實現窗口間的鏈接需要使用TARGET屬性。TARGET屬性可以在HTML的多個標記內使用。其中，常用的方式有兩種。（1）在標記中使用的格式如下：例如：橫向開設兩個窗口，各占40%和60%，名字分別為CK1和CK2。左邊窗口加載的HTML文件為HTMLLEFT.htm，右邊窗口加載的HTML文件為HTML2-1.htm。左邊窗口中有4行鏈接文字。如果單擊左邊窗口內的“中國詩詞佳句作者”鏈接文字，則可以在右邊窗口（名字為CK2）內顯示出HTML2-1.htm文件的內容。如果單

31、擊左邊窗口內的“鯨魚和螃蟹”鏈接文字，則可以在右邊窗口內顯示出HTML3-1.htm文件的內容。如果單擊左邊窗口內的“圖像切換”鏈接文字，則可以在右邊窗口內顯示出HTML4.htm文件的內容。如果單擊左邊窗口內的“鏈接技術演示”鏈接文字，則可以在右邊窗口內顯示出HTML5.htm文件的內容。打開記事本程序，輸入如下HTML代碼。將該HTML文件以名字HTML7-5.htm保存在“DRAWTD”目錄下。 其中，HTMLLEFT.htm的HTML文檔如下。左框架窗口內的鏈接文字中國詩詞佳句-作者鯨魚和螃蟹圖像切換鏈接技術演示在瀏覽器中觀察該網頁的結果如圖所示，單擊“鯨魚和螃蟹”鏈接文字的結果如圖所

32、示。（2）在標記中使用：如果鏈接的文件均在一個窗口內顯示，則可以使用標記。標記的格式如下：其中，window-name可以是窗口的名字，也可以是： _blank：在一個新的瀏覽器窗口中打開鏈接的文檔。 _parent：在框架的父框架或父窗口打開鏈接的文檔。 _self：默認打開方式，將鏈接的文檔載入鏈接所在的同一框架或窗口。 _top：將鏈接的文檔載入整個瀏覽器窗口，從而刪除所有框架。 1.8 【案例8】“最新消息公告”網頁1什么是DHTML技術動態HTML（Dynamic HTML，DHTML）是HTML、CSS和客戶端腳本的一種集成。DHTML技術在原有技術的基礎上，可分為3個方面：一是H

33、TML，也就是頁面中的各種頁面元素對象。它們是被動態操作的內容；二是CSS，CSS屬性也是動態操作的內容，從而獲得動態的格式效果；三是客戶端腳本（例如JavaScript），它實際操縱Web頁上的HTML和CSS。使用DHTML技術，可以使網頁設計者創建出能夠與用戶交互并包含動態內容的頁面。實際上，DHTML是網頁設計者可以動態操縱網頁上的所有元素，甚至是在這些頁面被裝載以后的一種語言。利用DHTML，網頁設計者可以動態地隱藏或顯示內容、修改樣式定義、激活元素以及為元素定義行為。DHTML還可以使網頁設計者在網頁上顯示外部信息，方法是將元素捆綁到外部數據源（如文件和數據庫）上。所有這些功能都可

34、以用瀏覽器完成而無需請求Web服務器，同時也無需重新裝載網頁。這是因為一切功能都包含在HTML文件中，隨網頁一起下載到瀏覽器端。可見，DHTML技術是一種非常實用的網頁設計技術。實際上，DHTML早已廣泛地應用到了各類網站中，成為高水平網頁必不可少的組成部分。2DHTML的使用技巧IE為DHTML對象提供了4個可讀寫的屬性來動態操作頁面元素的內容：innerText、outerText、innerHTML和outerHTML。使用時應注意以下兩點：（1）innerText、outerText屬性的值是作為普通文本顯示的，即使它含有HTML標簽也如實反映出來；而innerHTML、outerHT

35、ML呈現的是經HTML解析后的文本，它可以反應屬性中HTML標簽的表現效果。（2）對網頁中對象的outerText、outerHTML屬性賦值（即寫操作），會刪除該對象。 1.9 【案例9】“水中倒影”網頁1ANFY軟件介紹ANFY是國外一個著名的網頁特效制作軟件，利用ANFY可以制作出數十種Java網頁特效，例如，鼠標軌跡水紋效果等。通過圖1-9-2可以看出，它的工作界面是一個簡單易懂、賦有親和力的工作界面。ANFY 1.4.5中文版中包括了40個Java applets程序及一個稱為ANFY向導的窗口程序。在 “水中倒影”網頁案例中，首先選擇了“圖像效果”中的LAKE應用程序，這部分就是A

36、NFY中的“Java applets程序”，然后單擊【下一步】按鈕，進入了第1級設計界面，這就是ANFY向導的窗口程序。由于ANFY軟件的制作者生活在英語國家，所以軟件的中文漢化中有一些語言不夠準確，例如第1級設計界面中的“圖像文”文本框，更確切的叫法應該是“圖像名”，但是這些并不影響軟件的使用。ANFY軟件定位于所有喜歡采用大量圖形的網站制作者，其中的程序全部使用Java編寫，和GIF動畫相比，使用Java制作動態效果可以大大減小文件的字節數，提高網頁的瀏覽速度。ANFY是一個免費軟件，它的下載地址是：/。2ANFY軟件中的菜單命令（1）保存計劃任務：在“種類”欄中選擇一個特效類別，然后在右

37、邊的下拉列表框中選擇一種特效后，單擊【下一步】按鈕，進入第1級設計界面。此時單擊“文件”“保存計劃任務”菜單命令，調出“另存為”對話框，在該對話框中選擇要保存文件的路徑及文件名，即可將當前未完成的Java網頁特效保存為擴展名為.AJP的文件中。（2）打開計劃任務：單擊“文件”“打開計劃任務”菜單命令，調出“打開”對話框，在該對話框中選擇原來保存的Java網頁特效文件，再單擊【打開】按鈕，即可導入該設置。（3）更改瀏覽器：單擊“選項”“更改瀏覽器”菜單命令，調出“更改預覽瀏覽器”對話框，如圖所示。單擊“系統默認瀏覽器”復選框，取消該設置，此時【查找】按鈕被激活。單擊【查找】按鈕，調出“打開”對話

38、框，選擇瀏覽器文件的路徑及文件名后單擊【打開】按鈕，在“更改預覽瀏覽器”對話框的文本框中會顯示該瀏覽器的名稱。單擊【確定】按鈕，即可設置該瀏覽器為ANFY軟件的默認瀏覽器。 3使用ANFY軟件在已有的網頁中插入Java網頁特效（1）打開ANFY軟件，在“種類”欄中選擇“圖像”單選按鈕，在右邊的下拉列表框中選擇LENS列表項，選中LENS特效。單擊【下一步】按鈕，調出第1級設計界面。（2）在第2級到第3級設計界面中進行相應設置后，進入“程序代碼”界面。單擊【復制全部文件到】按鈕，調出“另存為”對話框。利用該對話框將文件保存到“DRAWTD”目錄下的“HTML9”文件夾中，并為文件命名。（3）在J

39、ava目錄下新建一個記事本文件，在該文件內輸入下面的代碼：水中倒影（4）在ANFY軟件的“程序代碼”界面內，將“HTML代碼”列表框中的所有代碼選中，然后單擊【復制進剪貼板】按鈕，復制這段代碼。回到記事本文件的編輯界面，將光標移到和標記中間，單擊“編輯”“粘貼”菜單命令，將ANFY軟件中的復制的代碼粘貼到此位置。（5）保存該記事本文件后，將文件的擴展名改為.HTML。雙擊該文件，在瀏覽器中查看插入Java程序后網頁在瀏覽器中的顯示效果。 1.10 【案例10】“飄動的楓葉”網頁 1網頁特效精靈軟件介紹安裝完“網頁特效精靈”軟件后，會在桌面上顯示一個該軟件的快捷方式圖標。雙擊此圖標，即可調出“網

40、頁特效精靈”。該軟件的工作界面如圖1-10-2所示。網頁特效精靈是網頁特效工具，它包含兩種特殊效果，分別為自定義特效（精靈特效）和不可自定義特效，適合不同水平的使用者。同ANFY軟件一樣，網頁特效精靈軟件的界面也非常賦有親和力。由于該軟件完全由國人編寫，所以更適合中國人的使用習慣。網頁特效精靈中共包括345個網頁特效，遠遠多于ANFY軟件。根據應用對象的不同，分為精靈特效、時間特效、文字特效、鼠標特效、圖片特效、娛樂特效、菜單特效和其他特效9大類。另外，為了方便使用者加入自己的效果，可以通過該軟件的菜單命令，插入其他網頁特效。網頁特效精靈軟件使用JavaScript代碼實現網頁特效，在網頁文件

41、中的代碼之外，不需要執行其他文件。但是JavaScript的代碼比較復雜，不建議初學讀者修改，可直接使用。“網頁特效精靈”軟件的下載地址為/。2網頁特效精靈軟件中的菜單命令（1）設置代碼字體和背景顏色：在“網頁特效精靈”的工作界面中單擊“軟件設置”“代碼字體”菜單命令，調出Windows的“字體”對話框。利用該對話框可以設置“代碼窗口”中代碼的字體、顏色和樣式，設置完成后單擊【確定】按鈕，“代碼窗口”中的代碼字體即可改變。在網頁特效精靈中單擊“軟件設置”“背景顏色”菜單命令，調出Windows的“顏色”對話框。在該對話框中選中一個顏色后，單擊【確定】按鈕，即可改變“代碼窗口”的背景顏色。（2）

42、添加個人特效：單擊“網頁工具”“個人特效箱”菜單命令，“代碼窗口”變為“個人特效箱”設置欄。在“特效名稱”文本框中輸入要添加的特效的名稱，單擊“特效地址”后面的【瀏覽】按鈕 ，調出“選擇網頁文件”對話框。在該對話框中選擇包含特效的網頁文件，單擊【打開】按鈕，即可將選中的文件添加到“個人特效箱”內，并在“個人特效箱”設置欄的下邊顯示出該特效的名稱和地址。下次如果要使用該特效時，只要在導航菜單中單擊【個人特效】按鈕，即可在工作界面的左邊顯示該網頁特效，單擊其中一個特效名稱，即可在“代碼窗口”中顯示該特效網頁的代碼，使用方法和軟件內置的特效相同。 第2章 Dreamweaver 8基礎2.1 【案例

43、11】“Dreamweaver 8學習天地”網頁2.2 【案例12】“長城世界建筑史上一大奇跡”網頁 2.3 【案例13】“中國名勝故宮”網頁 2.4 【案例14】“中國名勝故宮”網頁修改 2.5 【案例15】“國畫欣賞”網頁 2.1 【案例11】“Dreamweaver 8學習天地”網頁1新建和打開網頁文檔（1）新建網頁文檔：單擊“文件”“新建”菜單命令，即可調出“新建文檔”對話框。從該對話框可以看出，利用它可以建立各種類型的文件。從“類別”列表框中選擇“基本頁”選項，然后選擇“基本頁”列表框中的“HTML選項”，再單擊【創建】按鈕，即可新建一個空白的HTML網頁文檔。另外，在“文檔類型”下

44、拉列表框中可以選擇文件類型，單擊【首選參數】按鈕可以調出 “首選參數”對話框。（2）打開網頁文檔：單擊“文件”“打開”菜單命令，調出“打開”對話框。在該對話框內選中要打開的HTML文檔，單擊【打開】按鈕，即可將選定的HTML文檔打開。例如，可打開前面編寫的名字為HTML1.HTML文檔。另外，在“Macromedia Dreamweaver 8”對話框狀態下，單擊【打開】按鈕，也可以調出“打開”對話框。2保存和關閉文檔（1）單擊“文檔”“保存”菜單命令，可以原名字保存當前的文檔。（2）單擊“文檔”“另存為”菜單命令，即可調出“另存為”對話框。利用該 對話框可以將當前的文檔以其他名字保存。（3）

45、單擊“文檔”“保存全部”菜單命令，即可將當前正在編輯的所有文檔以原名保存。（4）單擊“文檔”“關閉”菜單命令，即可關閉打開的當前文檔。如果當前文檔在修改后沒有存盤，則會調出一個提示框，提示用戶是否保存文檔。（5）單擊“文檔”“全部關閉”菜單命令，即可關閉所有打開的文檔。3頁面屬性設置將鼠標指針移到網頁文檔窗口的空白處，單擊鼠標右鍵，調出一個快捷菜單，再單擊快捷菜單內的“頁面屬性”菜單命令，調出“頁面屬性”對話框。另外，單擊網頁文檔窗口的空白處，再單擊網頁文檔“屬性”欄內的【頁面屬性】按鈕也可以調出“頁面屬性”對話框。利用“頁面屬性”對話框，可以設置頁面的標題文本、頁面字體、頁面背景色或圖像、頁

46、面大小與位置、背景圖像的透明度等。利用“頁面屬性”對話框設置網頁頁面參數的方法簡介如下。（1）背景顏色設置：單擊【背景顏色】按鈕 ，會調出一個顏色面板。利用該顏色板可以設置網頁的背景顏色。（2）背景圖像設置：單擊“頁面屬性”（外觀）對話框中“背景圖像”文本框右邊的【瀏覽】按鈕，調出“選擇圖像源文件”對話框。利用該對話框選擇網頁背景圖像，再單擊【確認】按鈕，即可給網頁背景填充選中的圖像。如果圖像文檔不在本地站點的文件夾內，則在單擊【確認】按鈕后，會提示用戶將該圖像文檔復制到本地站點的圖像文件夾內。（3）文本顏色設置：單擊【文本顏色】按鈕，會調出顏色面板。利用它可以設置文本顏色，其方法與設置背景顏

47、色的方法一樣。（4）頁面四個方向的邊距設置：通過四個文本框可以設置頁面四個方向的邊距，單位為像素。“左邊距”和“右邊距”設置只對IE瀏覽器有效，“上邊距”和“下邊距”設置只對Netscape Navigator瀏覽器有效。（5）頁面文本的字體和大小設置：利用該對話框中的“頁面字體”和“大小”下拉列表框可以設置頁面中文本的字體和文本大小。（6）頁面文字設置：單擊選中“分類”列表框中的“標題/編碼”選項，此時的“頁面屬性”對話框。利用該對話框可以設置網頁標題、文檔的類型和網頁的編碼等，在對話框底部還顯示“站點”文件夾的位置等信息。（7）標題大小和顏色設置：單擊選擇“頁面屬性”對話框中“分類”欄中的

48、“標題”選項，此時“頁面屬性”（標題）對話框。在“標題字體”下拉列表框中選擇一種標題的字體（此處選擇“同頁面字體”選項），在“標題1”到“標題6”欄可以設置標題的大小和顏色。（8）鏈接字屬性的設置：單擊選擇“頁面屬性”對話框中“分類”欄中的“鏈接”選項，此時切換到“頁面屬性”（鏈接）對話框。可以利用該對話框內的“鏈接字體”和“鏈接顏色”欄來設置鏈接文字的字體、大小、風格、顏色等。“變換圖像鏈接”欄的作用是當圖像不能顯示時，將顯示為該欄設置的顏色。“已訪問鏈接”欄的作用是設置單擊過的鏈接字的顏色。“活動鏈接”欄的作用是設置獲得焦點的鏈接字的顏色。“下畫線樣式”欄的作用是設置鏈接字的下畫線樣式。（

49、9）跟蹤圖像屬性設置：單擊選擇“頁面屬性”對話框中“分類”欄中的“跟蹤圖像”選項，此時切換到“頁面屬性”（跟蹤圖像）對話框。利用該對話框可以設置跟蹤圖像的屬性，跟蹤圖像也叫描圖。“跟蹤圖像”文本框用來設置在頁面編輯過程中使用的描圖圖像的地址和名稱。“透明度”欄的作用是調整描圖的透明度。4建立本地站點建立本地站點就是將本地主機磁盤中的一個文件夾定義為站點，然后將所有文檔都存放在該文件夾中，以便于管理。通常在設計網頁前，應先建立本地站點。建立本地站點的方法如下。（1）在“文件”面板中的第一個下拉列表框中單擊“管理站點”選項，調出“管理站點”對話框。單擊“站點”“管理站點”菜單命令，也可以調出“管理

50、站點”對話框。（2）單擊該對話框中的【新建】按鈕，調出它的“新建”快捷菜單。（3）單擊“新建”快捷菜單中的“站點”菜單命令，可調出“站點定義為”（基本）對話框。單擊“站點”“新建站點”菜單命令，可以直接調出“站點定義為”（基本）對話框。（4）在“站點定義為”（基本）對話框內的第1個文本框中輸入站點的名稱（例如：“我的第1個站點”）。再單擊【下一步】按鈕，“站點定義為”（基本）對話框變為如圖所示的內容。（5）如果要使用服務器技術（例如：ASP.NET等），可以單擊選中第2個單選按鈕。然后從它下面的下拉列表框（選中第2個單選按鈕后才會出現）中選擇要使用的服務器技術名稱，否則單擊選中第1個單選按鈕。

51、此處單擊選中第1個單選按鈕。（6）單擊【下一步】按鈕，“站點定義為”（基本）對話框變為如圖2-1-18所示（還沒有選擇文件夾）。如果在本地編輯網頁，編輯好后再上傳到服務器，可單擊選中第1個單選按鈕，通常選中該單選按鈕。選中第2個單選按鈕，可以直接對服務器上的文件進行編輯。單擊 按鈕，調出一個對話框，用來選擇一個文件夾作為站點的根目錄。要求該文件夾必須在此之前已經建立。此處選擇第1個單選按鈕，選擇的文件夾路徑為“E:DRAWTD”，直接將“E:DRAWTD”文件夾作為本地站點文件夾。（7）單擊【下一步】按鈕，“站點定義為”（基本）對話框。在第1個列表框中選擇“無”選項，設置不連接到遠程服務器。（

52、8）單擊【下一步】按鈕，調出“站點定義為”（基本）對話框中新的內容。此時對話框中將顯示出“站點”設置的基本信息，最后單擊“站點定義為”對話框中的【完成】按鈕，回到“管理站點”對話框。（9）單擊“管理站點”對話框中的【完成】按鈕，完成站點的設置。此時“文件”面板，在第1個下拉列表框中將顯示出“我的第1個站點”列表項目。（10）如果要重新進行站點設置，可單擊“站點”“管理站點”菜單命令，重新調出“管理站點”對話框。單擊選中站點名稱，再單擊【編輯】按鈕即可。（11）將鼠標指針移到“文件”窗口的空白處，單擊鼠標右鍵，調出一個快捷菜單。再單擊快捷菜單內的“新建文件”菜單命令，可以新建一個網頁文檔，然后輸

53、入網頁的名字“index.html” 。雙擊該文檔名字，可以進入該網頁的編輯窗口。 2.2 【案例12】“長城世界建筑史上一大奇跡”網頁1創建網頁文字的其他方法（1）鍵盤輸入和復制粘貼文字：最簡單和最直接的輸入方法是鍵盤輸入，也可以在其他的程序或窗口中選中一些文本，按【Ctrl+C】組合鍵，將文字復制到剪貼板上；然后回到Dreamweaver 8“設計”視圖的文檔窗口中，按【Ctrl+V】組合鍵，將其粘貼到光標所在位置。在Dreamweaver 8中，對從外部導入數據的功能已經進行改善，不僅可以保留文字，還可以保留段落的格式和文字的樣式。在“設計”視圖文檔窗口中，直接按【Enter】鍵的效果相

54、當于插入代碼（從狀態欄的左邊可以看出），除了換行外，還會多空一行，這表示將開始一個新的段落。如果覺得這樣換行后間距過大，可在輸入文字后，按【Shift+Enter】組合鍵，這相當于插入代碼，表示一個新行將產生在當前行的下面，但仍屬于當前段落，并使用該段落的現有格式。在Dreamweaver 8“設計”視圖文檔窗口中，對文本的許多操作與在Word中的操作基本一樣。例如，選取文字、刪除文字和復制文字等。（2）使用“插入”（文本）面板：單擊“插入”面板上的“文本”標簽，如圖所示。面板中有許多文本格式控制按鈕，通過這些按鈕可以方便地設置文本的格式。單擊面板中的【字體標簽編輯器】按鈕 ，可以調出“標簽編

55、輯器”對話框，。利用該對話框可以設置文字的字體、大小、顏色等，還可以編輯文字字體列表。2文字屬性的設置文本的屬性（標題格式、字體、字號、大小、顏色和對齊格式等）可以由圖所示的文本“屬性”欄和“文本”菜單來設定。（1）文字標題格式的設置：根據HTML代碼規定，頁面的文本有6種標題格式，它們所對應的字號大小和段落對齊方式都是設定好的。在“格式”下拉列表框內，可以選擇各種格式，其中各選項的含義如下。“無”選項：無特殊格式的規定，僅決定于瀏覽器本身。 “段落”選項：正文段落，在文字的開始與結尾處有換行，各行的文字間距較小。 “標題1”至“標題6”選項：是標題1至標題6，約為中文1至6號字大小。 “預先

56、格式化的”選項：預定義的格式。（2）創建字體組合：Dreamweaver 8使用了字體組合的方法，取代了簡單地給文本指定一種字體的方法。字體組合就是多個不同字體依次排列的組合。在設計網頁時，可以給文本指定一種字體組合。在網頁瀏覽器中瀏覽該網頁時，系統會按照字體組合中指定的字體順序自動尋找用戶計算機中安裝的字體。采用這種方法可以照顧安裝各種瀏覽器和不同操作系統的計算機。 單擊“字體”下拉列表框的按鈕，可以調出Dreamweaver提供的各種字體組合選項。單擊某一個字體組合的名稱，即可設置該字體組合。 單擊字體組合列表項中的“編輯字體列表”選項，調出“編輯字體列表”對話 單擊選中“編輯字體列表”對

57、話框中“字體列表”列表框內的“在以下列表中添加字體”選項。 在“可用字體”列表框內選中字體。然后雙擊該字體名稱，即可在“選擇的字體”列表框內顯示出相應的字體名字；也可以單擊選中某一個字體名字，再單擊按鈕 ，將選中的字體加到“選擇的字體”列表框內。 按照上述方法，依次往“選擇的字體”列表框內加入字體組合中的各種字體。同時，會看到在“字體列表”列表框內最下邊隨之顯示出新的字體組合。單擊【確定】按鈕，即可完成字體組合的創建。 如果要刪除字體組合中的一種字體，單擊選中“選擇的字體”列表框內該字體的名稱，再單擊 按鈕，如果要刪除一個字體組合，可在“字體列表”列表框內單擊選中該字體組合，再單擊“編輯字體列

58、表”對話框中的 按鈕。 如果還要增加字體組合，可以單擊“編輯字體列表”對話框中的 按鈕，使“字體列表”列表框內增加“在以下列表中添加字體”選項。（3）文字其他屬性的設置：利用“屬性”欄和“文本”菜單命令，設置文字的大小、顏色、對齊方式、縮進和風格等屬性的方法如下。文字大小設置：字號的數字越大，文字也越大。默認的字號是13。單擊選中文字“屬性”欄內的“大小”下拉列表框中的一種字號數字，即可完成字號的設定。在“大小”下拉列表框內還可以通過選擇“極小”到“極大”以及“較小”和“較大”列表項目的方法設置文字的大小。文字顏色的設置： 單擊文字“屬性”欄內的【文本顏色】按鈕，調出顏色面板，利用它可以設置文

59、字的顏色。文字的對齊設置：文字的對齊是指一行或多行文字在水平方向的位置，它有左對齊、居中對齊和右對齊三種。對齊可以在選中頁面內的文字后，單擊文字“屬性”欄內的（左對齊）、（居中對齊）和（右對齊）按鈕來實現。如果文字是直接輸入到頁面中，則會以瀏覽器的邊界線進行對齊。文字的縮進設置：要改變段落文字的縮進量，可以選中文字，再單擊文字“屬性”欄內的（減少縮進，向左移兩個單位）按鈕或 （增加縮進，向右移兩個單位）按鈕。文字風格的設置：選中網頁中的文字，單擊【粗體】按鈕，即可將選中的文字設置為粗體；單擊【斜體】按鈕，即可將選中的文字設置為斜體。利用菜單命令也可以改變文字風格。在“文本”“樣式”菜單的子菜單

60、中，單擊其中的某一個菜單命令，可以將選中的文字樣式作相應的改變。文字樣式設置： 在“樣式”下拉列表框中單擊“管理樣式”項目，可以調出“編輯樣式表”對話框。單擊【新建】按鈕就可以為文字添加樣式設置。3文字的列表設置（1）設置列表設置無序列表和有序列表：選中要排列的文字段，再單擊文字“屬性”欄內的按鈕，可設置無序列表；選中要排列的文字段，再單擊文字“屬性”欄內的按鈕，可設置有序列表。定義列表方式：選中要排列的文字段，再單擊“文本”“列表”“定義列表”菜單命令。采用這種列表方式的效果是：奇數行靠左，偶數行向右縮進。（2）修改列表屬性首先將列表的文字按照無序或有序列表方式進行列表。然后將光標移到列表文