網(wǎng)頁(yè)設(shè)計(jì)案例教程ppt課件完整版

1、第1章 HTML語(yǔ)言簡(jiǎn)介 1.1 【案例1】第1個(gè)HTML網(wǎng)頁(yè)1.2 【案例2】“中國(guó)詩(shī)詞佳句作者”網(wǎng)頁(yè) 1.3 【案例3】“鯨魚(yú)和螃蟹”網(wǎng)頁(yè) 1.4 【案例4】“圖像切換”網(wǎng)頁(yè) 1.5 【案例5】“鏈接技術(shù)演示”網(wǎng)頁(yè) 1.6 【案例6】“中國(guó)的世界文化遺產(chǎn)”網(wǎng)頁(yè) 1.7 【案例7】“FLASH技術(shù)說(shuō)明”網(wǎng)頁(yè) 1.8 【案例8】“最新消息公告”網(wǎng)頁(yè)1.9 【案例9】“水中倒影”網(wǎng)頁(yè) 1.10 【案例10】“飄動(dòng)的楓葉”網(wǎng)頁(yè) 1.1 【案例1】第1個(gè)HTML網(wǎng)頁(yè) 1HTML文件特點(diǎn)HTML文件是標(biāo)準(zhǔn)的ASCII文件，它看起來(lái)像是加入了許多被稱為鏈接簽（tag）的特殊字符串的普遍文本文件。從結(jié)構(gòu)上

2、講，HTML文件由元素（element）組成，組成HTML文件的元素有許多種，用于組織文件的內(nèi)容和指導(dǎo)文件的輸出格式。絕大多數(shù)元素是“容器”，即它們有起始標(biāo)記和結(jié)尾標(biāo)記。元素的起始標(biāo)記叫做起始鏈接簽（start tag），元素的結(jié)束標(biāo)記叫做結(jié)尾鏈接簽（end tag），在起始鏈接簽和結(jié)尾鏈接簽中的部分是元素體。每一個(gè)元素都有名稱和可選擇的屬性，元素的名稱和屬性都在起始鏈接簽內(nèi)標(biāo)明。一個(gè)元素的元素體中可以有其他的元素?！皩傩悦薄ⅰ?”和“屬性值”合起來(lái)構(gòu)成一個(gè)完整的屬性，一個(gè)元素可以有多個(gè)屬性，各個(gè)屬性用空格分開(kāi)。需要說(shuō)明的是，HTML是一門(mén)發(fā)展很快的語(yǔ)言，早期的HTML文件并沒(méi)有如此嚴(yán)格的結(jié)

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

4、開(kāi)始，表示HTML文檔的結(jié)束。（2）：它是網(wǎng)頁(yè)頭部標(biāo)記?？梢蕴岣呔W(wǎng)頁(yè)文檔的可讀性，向?yàn)g覽器提供一個(gè)信息。它可以忽略，但一般不予忽略。（3）：它是網(wǎng)頁(yè)名稱標(biāo)記，是標(biāo)記內(nèi)唯一一個(gè)必須出現(xiàn)的元素，有標(biāo)記就一定要有標(biāo)記。TITLE元素是文件頭中的元素，它也只能出現(xiàn)在文件頭中。TITLE標(biāo)明該HTML文件的題目，是對(duì)文件內(nèi)容的概括。一個(gè)好的題目應(yīng)該能使讀者從中判斷出該文件的大概內(nèi)容。文件的題目一般不會(huì)顯示在文本窗口中，而以窗口的名稱顯示出來(lái)。除了標(biāo)識(shí)窗口外，當(dāng)將某一個(gè)網(wǎng)頁(yè)存入書(shū)簽或文件時(shí)，TITLE還用做書(shū)簽名或缺省的文件名。TITLE的長(zhǎng)度沒(méi)有限制，但過(guò)長(zhǎng)的題目會(huì)導(dǎo)致轉(zhuǎn)行，一般情況下它的長(zhǎng)度不應(yīng)超過(guò)6

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

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

7、按照原來(lái)的格式顯示。否則瀏覽器會(huì)自動(dòng)取消文本中的空格。 （10）：它是粗體標(biāo)記?？墒蛊渲械奈淖肿?yōu)榇煮w。3其他常用標(biāo)記（1）：它是正文的第三級(jí)標(biāo)題標(biāo)記。此外，還有第一、二、三、四、五、六級(jí)標(biāo)題標(biāo)記，分別為、和。級(jí)別越高，文字越小。一般情況下，瀏覽器對(duì)標(biāo)題作如下解釋。H1 黑體，特大字體，居中，上下各有兩行空行。H2 黑體，大字體，上下各有一到兩行空行。H3 黑體（斜體），大字體，左端微縮進(jìn)，上下空行。H4 黑體，普通字體，比H3縮進(jìn)更多，上邊一空行。H5 黑體（斜體），與H4相同縮進(jìn)，上邊一空行。H6 黑體，與正文有相同縮進(jìn)，上邊一空行。Hn可以有對(duì)齊屬性，ALIGN#，“#”表示Left（標(biāo)

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

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

10、指出了文件在Internet中的位置。它存在的目的在于統(tǒng)一WWW上的地址編碼，給每一個(gè)網(wǎng)頁(yè)指定的地址，這樣就不會(huì)出現(xiàn)重復(fù)或由于編碼不統(tǒng)一而出現(xiàn)無(wú)法瀏覽等問(wèn)題。當(dāng)用戶查詢信息資源時(shí)，只要給出URL地址，WWW服務(wù)器就可以根據(jù)它找到網(wǎng)絡(luò)資源的位置，并將它傳送給用戶的計(jì)算機(jī)。通常，當(dāng)用戶用鼠標(biāo)單擊網(wǎng)頁(yè)中的鏈接點(diǎn)時(shí)，就將URL地址的請(qǐng)求傳送給了WWW服務(wù)器。相對(duì)路徑名 含 義 HREF=“HTML0.htm” HTML0.htm是當(dāng)前目錄下的文件名 HREF=“DRAWTD/HTML0.htm” HTML0.htm是當(dāng)前目錄中“DRAWTD”目錄下名字為HTML 0.htm的文件 HREF=“DRAW

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

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

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

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

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

16、格和邏輯風(fēng)格。字體的物理風(fēng)格直接指定字體，物理風(fēng)格的字體有黑體、斜體、下畫(huà)線和打字機(jī)體等，如表所示。例如，“各種字體風(fēng)格”網(wǎng)頁(yè)代碼如下（HTML2-3.htm）。各種字體風(fēng)格標(biāo) 記 符 功 能 標(biāo) 記 符 功 能 粗體 刪除線 大字體 下標(biāo) 斜體 上標(biāo) 刪除線 固定寬度字體 小字體 下畫(huà)線 各種字體風(fēng)格 各種字體風(fēng)格各種字體風(fēng)格 各種字體風(fēng)格各種字體風(fēng)格 各種字體風(fēng)格各種字體風(fēng)格 各種字體風(fēng)格字體的邏輯風(fēng)格用來(lái)指定文本的作用，有強(qiáng)調(diào)、特別強(qiáng)調(diào)、源代碼、例子、鍵盤(pán)輸入、變量、定義、引用、較小、較大、上標(biāo)和下標(biāo)。3邊框包圍的文字可以通過(guò)標(biāo)記定義文字的邊框。輸入下面的HTML代碼（保存在名稱為“HT

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

18、格式是GIF89A。（1）調(diào)整圖像大小：使用標(biāo)記中的HEIGHT和WIDTH屬性可以調(diào)整圖像的大小。HEIGHT（決定圖像的高）和WIDTH（決定圖像的寬）的取值單位為像素。（2）給圖像加邊框：使用標(biāo)記中的BORDER屬性可以給圖像加邊框。BORDER的取值單位為像素，當(dāng)它的取值為0或者不加BORDER屬性時(shí)，則沒(méi)有邊框。通過(guò)標(biāo)記中的HEIGHT和WIDTH屬性調(diào)整圖像，雖然可以改變圖像在網(wǎng)頁(yè)中的大小，但是調(diào)整過(guò)大會(huì)使圖像嚴(yán)重失真。合理設(shè)置HEIGHT和WIDTH屬性，才能得到最好的顯示效果。2背景平鋪圖像和圖像文字說(shuō)明（1）設(shè)置背景平鋪圖像：使用標(biāo)記中的BACKGROUND屬性，可設(shè)置網(wǎng)頁(yè)的

19、平鋪背景圖像，其格式如下。 （2）添加圖像文字說(shuō)明：為了增強(qiáng)圖像在網(wǎng)頁(yè)中的顯示效果，可以為圖像添加文字說(shuō)明。當(dāng)鼠標(biāo)移到圖片上方時(shí)，會(huì)出現(xiàn)說(shuō)明文字。在關(guān)閉瀏覽器中的載入圖像命令時(shí)，說(shuō)明文字可以替代圖像。使用標(biāo)記的ALT屬性可以為圖像添加文字說(shuō)明。3調(diào)整圖像和文本的相對(duì)位置在網(wǎng)頁(yè)中，經(jīng)常需要將圖像和文本放在一起進(jìn)行顯示。使用標(biāo)記的ALIGN屬性可以調(diào)整圖像與文本的相對(duì)位置。使用標(biāo)記中的VSPACE和HSPACE屬性可以調(diào)整圖像與文本間的距離。VSPACE（圖像與文本上下的距離）和HSPACE（圖像與文本左右的距離）的單位均為像素。標(biāo)記中的ALIGN屬性用于調(diào)整圖像與文字的對(duì)齊方式，主要含義如下所述

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

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

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

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

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

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

26、飾框架（1）設(shè)置框架：框架就是把一個(gè)網(wǎng)頁(yè)頁(yè)面分成幾個(gè)單獨(dú)的區(qū)域（窗口），每個(gè)區(qū)域顯示一個(gè)獨(dú)立的網(wǎng)頁(yè)，該部分可以是一個(gè)獨(dú)立的HTML文件。因此，框架可以實(shí)現(xiàn)在一個(gè)網(wǎng)頁(yè)內(nèi)顯示多個(gè)HTML文件。一個(gè)有n個(gè)區(qū)域的框架網(wǎng)頁(yè)來(lái)說(shuō)，每個(gè)區(qū)域有一個(gè)HTML文件，整個(gè)框架結(jié)構(gòu)也是一個(gè)HTML文件，因此該框架網(wǎng)頁(yè)有n+1個(gè)HTML文件。設(shè)置框架需要使用標(biāo)記來(lái)取代標(biāo)記。標(biāo)記有兩個(gè)屬性： ROWS=“n1,n2,n3”：縱向設(shè)置框架； COLS=“n1,n2,n3”：橫向設(shè)置框架。其中，n1、n2、n3為開(kāi)設(shè)的框架占整個(gè)頁(yè)面的百分?jǐn)?shù)。（2）修飾框架：修飾框架需要使用標(biāo)記，它在標(biāo)記之間。標(biāo)記有6個(gè)屬性，介紹如下。 RC

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

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

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

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

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

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

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

34、以用瀏覽器完成而無(wú)需請(qǐng)求Web服務(wù)器，同時(shí)也無(wú)需重新裝載網(wǎng)頁(yè)。這是因?yàn)橐磺泄δ芏及贖TML文件中，隨網(wǎng)頁(yè)一起下載到瀏覽器端?？梢?jiàn)，DHTML技術(shù)是一種非常實(shí)用的網(wǎng)頁(yè)設(shè)計(jì)技術(shù)。實(shí)際上，DHTML早已廣泛地應(yīng)用到了各類網(wǎng)站中，成為高水平網(wǎng)頁(yè)必不可少的組成部分。2DHTML的使用技巧IE為DHTML對(duì)象提供了4個(gè)可讀寫(xiě)的屬性來(lái)動(dòng)態(tài)操作頁(yè)面元素的內(nèi)容：innerText、outerText、innerHTML和outerHTML。使用時(shí)應(yīng)注意以下兩點(diǎn)：（1）innerText、outerText屬性的值是作為普通文本顯示的，即使它含有HTML標(biāo)簽也如實(shí)反映出來(lái)；而innerHTML、outerHT

35、ML呈現(xiàn)的是經(jīng)HTML解析后的文本，它可以反應(yīng)屬性中HTML標(biāo)簽的表現(xiàn)效果。（2）對(duì)網(wǎng)頁(yè)中對(duì)象的outerText、outerHTML屬性賦值（即寫(xiě)操作），會(huì)刪除該對(duì)象。 1.9 【案例9】“水中倒影”網(wǎng)頁(yè)1ANFY軟件介紹ANFY是國(guó)外一個(gè)著名的網(wǎng)頁(yè)特效制作軟件，利用ANFY可以制作出數(shù)十種Java網(wǎng)頁(yè)特效，例如，鼠標(biāo)軌跡水紋效果等。通過(guò)圖1-9-2可以看出，它的工作界面是一個(gè)簡(jiǎn)單易懂、賦有親和力的工作界面。ANFY 1.4.5中文版中包括了40個(gè)Java applets程序及一個(gè)稱為ANFY向?qū)У拇翱诔绦?。?“水中倒影”網(wǎng)頁(yè)案例中，首先選擇了“圖像效果”中的LAKE應(yīng)用程序，這部分就是A

36、NFY中的“Java applets程序”，然后單擊【下一步】按鈕，進(jìn)入了第1級(jí)設(shè)計(jì)界面，這就是ANFY向?qū)У拇翱诔绦颉Ｓ捎贏NFY軟件的制作者生活在英語(yǔ)國(guó)家，所以軟件的中文漢化中有一些語(yǔ)言不夠準(zhǔn)確，例如第1級(jí)設(shè)計(jì)界面中的“圖像文”文本框，更確切的叫法應(yīng)該是“圖像名”，但是這些并不影響軟件的使用。ANFY軟件定位于所有喜歡采用大量圖形的網(wǎng)站制作者，其中的程序全部使用Java編寫(xiě)，和GIF動(dòng)畫(huà)相比，使用Java制作動(dòng)態(tài)效果可以大大減小文件的字節(jié)數(shù)，提高網(wǎng)頁(yè)的瀏覽速度。ANFY是一個(gè)免費(fèi)軟件，它的下載地址是：/。2ANFY軟件中的菜單命令（1）保存計(jì)劃任務(wù)：在“種類”欄中選擇一個(gè)特效類別，然后在右

37、邊的下拉列表框中選擇一種特效后，單擊【下一步】按鈕，進(jìn)入第1級(jí)設(shè)計(jì)界面。此時(shí)單擊“文件”“保存計(jì)劃任務(wù)”菜單命令，調(diào)出“另存為”對(duì)話框，在該對(duì)話框中選擇要保存文件的路徑及文件名，即可將當(dāng)前未完成的Java網(wǎng)頁(yè)特效保存為擴(kuò)展名為.AJP的文件中。（2）打開(kāi)計(jì)劃任務(wù)：?jiǎn)螕簟拔募薄按蜷_(kāi)計(jì)劃任務(wù)”菜單命令，調(diào)出“打開(kāi)”對(duì)話框，在該對(duì)話框中選擇原來(lái)保存的Java網(wǎng)頁(yè)特效文件，再單擊【打開(kāi)】按鈕，即可導(dǎo)入該設(shè)置。（3）更改瀏覽器：?jiǎn)螕簟斑x項(xiàng)”“更改瀏覽器”菜單命令，調(diào)出“更改預(yù)覽瀏覽器”對(duì)話框，如圖所示。單擊“系統(tǒng)默認(rèn)瀏覽器”復(fù)選框，取消該設(shè)置，此時(shí)【查找】按鈕被激活。單擊【查找】按鈕，調(diào)出“打開(kāi)”對(duì)話

38、框，選擇瀏覽器文件的路徑及文件名后單擊【打開(kāi)】按鈕，在“更改預(yù)覽瀏覽器”對(duì)話框的文本框中會(huì)顯示該瀏覽器的名稱。單擊【確定】按鈕，即可設(shè)置該瀏覽器為ANFY軟件的默認(rèn)瀏覽器。 3使用ANFY軟件在已有的網(wǎng)頁(yè)中插入Java網(wǎng)頁(yè)特效（1）打開(kāi)ANFY軟件，在“種類”欄中選擇“圖像”單選按鈕，在右邊的下拉列表框中選擇LENS列表項(xiàng)，選中LENS特效。單擊【下一步】按鈕，調(diào)出第1級(jí)設(shè)計(jì)界面。（2）在第2級(jí)到第3級(jí)設(shè)計(jì)界面中進(jìn)行相應(yīng)設(shè)置后，進(jìn)入“程序代碼”界面。單擊【復(fù)制全部文件到】按鈕，調(diào)出“另存為”對(duì)話框。利用該對(duì)話框?qū)⑽募４娴健癉RAWTD”目錄下的“HTML9”文件夾中，并為文件命名。（3）在J

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

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

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

42、添加個(gè)人特效：?jiǎn)螕簟熬W(wǎng)頁(yè)工具”“個(gè)人特效箱”菜單命令，“代碼窗口”變?yōu)椤皞€(gè)人特效箱”設(shè)置欄。在“特效名稱”文本框中輸入要添加的特效的名稱，單擊“特效地址”后面的【瀏覽】按鈕 ，調(diào)出“選擇網(wǎng)頁(yè)文件”對(duì)話框。在該對(duì)話框中選擇包含特效的網(wǎng)頁(yè)文件，單擊【打開(kāi)】按鈕，即可將選中的文件添加到“個(gè)人特效箱”內(nèi)，并在“個(gè)人特效箱”設(shè)置欄的下邊顯示出該特效的名稱和地址。下次如果要使用該特效時(shí)，只要在導(dǎo)航菜單中單擊【個(gè)人特效】按鈕，即可在工作界面的左邊顯示該網(wǎng)頁(yè)特效，單擊其中一個(gè)特效名稱，即可在“代碼窗口”中顯示該特效網(wǎng)頁(yè)的代碼，使用方法和軟件內(nèi)置的特效相同。 第2章 Dreamweaver 8基礎(chǔ)2.1 【案例

43、11】“Dreamweaver 8學(xué)習(xí)天地”網(wǎng)頁(yè)2.2 【案例12】“長(zhǎng)城世界建筑史上一大奇跡”網(wǎng)頁(yè) 2.3 【案例13】“中國(guó)名勝故宮”網(wǎng)頁(yè) 2.4 【案例14】“中國(guó)名勝故宮”網(wǎng)頁(yè)修改 2.5 【案例15】“國(guó)畫(huà)欣賞”網(wǎng)頁(yè) 2.1 【案例11】“Dreamweaver 8學(xué)習(xí)天地”網(wǎng)頁(yè)1新建和打開(kāi)網(wǎng)頁(yè)文檔（1）新建網(wǎng)頁(yè)文檔：?jiǎn)螕簟拔募薄靶陆ā辈藛蚊睿纯烧{(diào)出“新建文檔”對(duì)話框。從該對(duì)話框可以看出，利用它可以建立各種類型的文件。從“類別”列表框中選擇“基本頁(yè)”選項(xiàng)，然后選擇“基本頁(yè)”列表框中的“HTML選項(xiàng)”，再單擊【創(chuàng)建】按鈕，即可新建一個(gè)空白的HTML網(wǎng)頁(yè)文檔。另外，在“文檔類型”下

44、拉列表框中可以選擇文件類型，單擊【首選參數(shù)】按鈕可以調(diào)出 “首選參數(shù)”對(duì)話框。（2）打開(kāi)網(wǎng)頁(yè)文檔：?jiǎn)螕簟拔募薄按蜷_(kāi)”菜單命令，調(diào)出“打開(kāi)”對(duì)話框。在該對(duì)話框內(nèi)選中要打開(kāi)的HTML文檔，單擊【打開(kāi)】按鈕，即可將選定的HTML文檔打開(kāi)。例如，可打開(kāi)前面編寫(xiě)的名字為HTML1.HTML文檔。另外，在“Macromedia Dreamweaver 8”對(duì)話框狀態(tài)下，單擊【打開(kāi)】按鈕，也可以調(diào)出“打開(kāi)”對(duì)話框。2保存和關(guān)閉文檔（1）單擊“文檔”“保存”菜單命令，可以原名字保存當(dāng)前的文檔。（2）單擊“文檔”“另存為”菜單命令，即可調(diào)出“另存為”對(duì)話框。利用該 對(duì)話框可以將當(dāng)前的文檔以其他名字保存。（3）

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

46、面大小與位置、背景圖像的透明度等。利用“頁(yè)面屬性”對(duì)話框設(shè)置網(wǎng)頁(yè)頁(yè)面參數(shù)的方法簡(jiǎn)介如下。（1）背景顏色設(shè)置：?jiǎn)螕簟颈尘邦伾堪粹o ，會(huì)調(diào)出一個(gè)顏色面板。利用該顏色板可以設(shè)置網(wǎng)頁(yè)的背景顏色。（2）背景圖像設(shè)置：?jiǎn)螕簟绊?yè)面屬性”（外觀）對(duì)話框中“背景圖像”文本框右邊的【瀏覽】按鈕，調(diào)出“選擇圖像源文件”對(duì)話框。利用該對(duì)話框選擇網(wǎng)頁(yè)背景圖像，再單擊【確認(rèn)】按鈕，即可給網(wǎng)頁(yè)背景填充選中的圖像。如果圖像文檔不在本地站點(diǎn)的文件夾內(nèi)，則在單擊【確認(rèn)】按鈕后，會(huì)提示用戶將該圖像文檔復(fù)制到本地站點(diǎn)的圖像文件夾內(nèi)。（3）文本顏色設(shè)置：?jiǎn)螕簟疚谋绢伾堪粹o，會(huì)調(diào)出顏色面板。利用它可以設(shè)置文本顏色，其方法與設(shè)置背景顏

47、色的方法一樣。（4）頁(yè)面四個(gè)方向的邊距設(shè)置：通過(guò)四個(gè)文本框可以設(shè)置頁(yè)面四個(gè)方向的邊距，單位為像素?！白筮吘唷焙汀坝疫吘唷痹O(shè)置只對(duì)IE瀏覽器有效，“上邊距”和“下邊距”設(shè)置只對(duì)Netscape Navigator瀏覽器有效。（5）頁(yè)面文本的字體和大小設(shè)置：利用該對(duì)話框中的“頁(yè)面字體”和“大小”下拉列表框可以設(shè)置頁(yè)面中文本的字體和文本大小。（6）頁(yè)面文字設(shè)置：?jiǎn)螕暨x中“分類”列表框中的“標(biāo)題/編碼”選項(xiàng)，此時(shí)的“頁(yè)面屬性”對(duì)話框。利用該對(duì)話框可以設(shè)置網(wǎng)頁(yè)標(biāo)題、文檔的類型和網(wǎng)頁(yè)的編碼等，在對(duì)話框底部還顯示“站點(diǎn)”文件夾的位置等信息。（7）標(biāo)題大小和顏色設(shè)置：?jiǎn)螕暨x擇“頁(yè)面屬性”對(duì)話框中“分類”欄中的

48、“標(biāo)題”選項(xiàng)，此時(shí)“頁(yè)面屬性”（標(biāo)題）對(duì)話框。在“標(biāo)題字體”下拉列表框中選擇一種標(biāo)題的字體（此處選擇“同頁(yè)面字體”選項(xiàng)），在“標(biāo)題1”到“標(biāo)題6”欄可以設(shè)置標(biāo)題的大小和顏色。（8）鏈接字屬性的設(shè)置：?jiǎn)螕暨x擇“頁(yè)面屬性”對(duì)話框中“分類”欄中的“鏈接”選項(xiàng)，此時(shí)切換到“頁(yè)面屬性”（鏈接）對(duì)話框?？梢岳迷搶?duì)話框內(nèi)的“鏈接字體”和“鏈接顏色”欄來(lái)設(shè)置鏈接文字的字體、大小、風(fēng)格、顏色等。“變換圖像鏈接”欄的作用是當(dāng)圖像不能顯示時(shí)，將顯示為該欄設(shè)置的顏色?！耙言L問(wèn)鏈接”欄的作用是設(shè)置單擊過(guò)的鏈接字的顏色?！盎顒?dòng)鏈接”欄的作用是設(shè)置獲得焦點(diǎn)的鏈接字的顏色?！跋庐?huà)線樣式”欄的作用是設(shè)置鏈接字的下畫(huà)線樣式。（

49、9）跟蹤圖像屬性設(shè)置：?jiǎn)螕暨x擇“頁(yè)面屬性”對(duì)話框中“分類”欄中的“跟蹤圖像”選項(xiàng)，此時(shí)切換到“頁(yè)面屬性”（跟蹤圖像）對(duì)話框。利用該對(duì)話框可以設(shè)置跟蹤圖像的屬性，跟蹤圖像也叫描圖?！案檲D像”文本框用來(lái)設(shè)置在頁(yè)面編輯過(guò)程中使用的描圖圖像的地址和名稱?！巴该鞫取睓诘淖饔檬钦{(diào)整描圖的透明度。4建立本地站點(diǎn)建立本地站點(diǎn)就是將本地主機(jī)磁盤(pán)中的一個(gè)文件夾定義為站點(diǎn)，然后將所有文檔都存放在該文件夾中，以便于管理。通常在設(shè)計(jì)網(wǎng)頁(yè)前，應(yīng)先建立本地站點(diǎn)。建立本地站點(diǎn)的方法如下。（1）在“文件”面板中的第一個(gè)下拉列表框中單擊“管理站點(diǎn)”選項(xiàng)，調(diào)出“管理站點(diǎn)”對(duì)話框。單擊“站點(diǎn)”“管理站點(diǎn)”菜單命令，也可以調(diào)出“管理

50、站點(diǎn)”對(duì)話框。（2）單擊該對(duì)話框中的【新建】按鈕，調(diào)出它的“新建”快捷菜單。（3）單擊“新建”快捷菜單中的“站點(diǎn)”菜單命令，可調(diào)出“站點(diǎn)定義為”（基本）對(duì)話框。單擊“站點(diǎn)”“新建站點(diǎn)”菜單命令，可以直接調(diào)出“站點(diǎn)定義為”（基本）對(duì)話框。（4）在“站點(diǎn)定義為”（基本）對(duì)話框內(nèi)的第1個(gè)文本框中輸入站點(diǎn)的名稱（例如：“我的第1個(gè)站點(diǎn)”）。再單擊【下一步】按鈕，“站點(diǎn)定義為”（基本）對(duì)話框變?yōu)槿鐖D所示的內(nèi)容。（5）如果要使用服務(wù)器技術(shù)（例如：ASP.NET等），可以單擊選中第2個(gè)單選按鈕。然后從它下面的下拉列表框（選中第2個(gè)單選按鈕后才會(huì)出現(xiàn)）中選擇要使用的服務(wù)器技術(shù)名稱，否則單擊選中第1個(gè)單選按鈕。

51、此處單擊選中第1個(gè)單選按鈕。（6）單擊【下一步】按鈕，“站點(diǎn)定義為”（基本）對(duì)話框變?yōu)槿鐖D2-1-18所示（還沒(méi)有選擇文件夾）。如果在本地編輯網(wǎng)頁(yè)，編輯好后再上傳到服務(wù)器，可單擊選中第1個(gè)單選按鈕，通常選中該單選按鈕。選中第2個(gè)單選按鈕，可以直接對(duì)服務(wù)器上的文件進(jìn)行編輯。單擊 按鈕，調(diào)出一個(gè)對(duì)話框，用來(lái)選擇一個(gè)文件夾作為站點(diǎn)的根目錄。要求該文件夾必須在此之前已經(jīng)建立。此處選擇第1個(gè)單選按鈕，選擇的文件夾路徑為“E:DRAWTD”，直接將“E:DRAWTD”文件夾作為本地站點(diǎn)文件夾。（7）單擊【下一步】按鈕，“站點(diǎn)定義為”（基本）對(duì)話框。在第1個(gè)列表框中選擇“無(wú)”選項(xiàng)，設(shè)置不連接到遠(yuǎn)程服務(wù)器。（

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

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

54、當(dāng)于插入代碼（從狀態(tài)欄的左邊可以看出），除了換行外，還會(huì)多空一行，這表示將開(kāi)始一個(gè)新的段落。如果覺(jué)得這樣換行后間距過(guò)大，可在輸入文字后，按【Shift+Enter】組合鍵，這相當(dāng)于插入代碼，表示一個(gè)新行將產(chǎn)生在當(dāng)前行的下面，但仍屬于當(dāng)前段落，并使用該段落的現(xiàn)有格式。在Dreamweaver 8“設(shè)計(jì)”視圖文檔窗口中，對(duì)文本的許多操作與在Word中的操作基本一樣。例如，選取文字、刪除文字和復(fù)制文字等。（2）使用“插入”（文本）面板：?jiǎn)螕簟安迦搿泵姘迳系摹拔谋尽睒?biāo)簽，如圖所示。面板中有許多文本格式控制按鈕，通過(guò)這些按鈕可以方便地設(shè)置文本的格式。單擊面板中的【字體標(biāo)簽編輯器】按鈕 ，可以調(diào)出“標(biāo)簽編

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

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

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

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

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

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