第6章 網(wǎng)頁制作相關(guān)知識(shí)

1、信息學(xué)院公共教學(xué)部在在Internet中，應(yīng)用最廣泛的無中，應(yīng)用最廣泛的無疑為疑為World Wide Web了，無論是了，無論是Web應(yīng)用還是開發(fā)，都應(yīng)該對(duì)標(biāo)記語言應(yīng)用還是開發(fā)，都應(yīng)該對(duì)標(biāo)記語言HTML有一個(gè)基本的認(rèn)識(shí)。有一個(gè)基本的認(rèn)識(shí)。6.2 HTML語言語言HTML（Hyper Text Markup Language，超文本標(biāo)超文本標(biāo)記語言記語言）是一種用來制作超文本文檔的簡單標(biāo)記語言。用是一種用來制作超文本文檔的簡單標(biāo)記語言。用HTML語言編寫的超文本文件稱為語言編寫的超文本文件稱為HTML文件文件，也稱為，也稱為Web文件。文件。HTML文件的擴(kuò)展名為文件的擴(kuò)展名為.htm或或.h

2、tml。 HTML文件是一種標(biāo)準(zhǔn)的文件是一種標(biāo)準(zhǔn)的純文本文件純文本文件，之所以被稱為，之所以被稱為超文本超文本，因?yàn)?，因?yàn)镠TML文檔中可以加入圖片、聲音、動(dòng)畫、文檔中可以加入圖片、聲音、動(dòng)畫、影視等內(nèi)容，并且這些內(nèi)容可以被標(biāo)記成超鏈接。影視等內(nèi)容，并且這些內(nèi)容可以被標(biāo)記成超鏈接。用瀏覽器用瀏覽器打開打開HTML文件可以使用任何文本編輯器，如：文件可以使用任何文本編輯器，如：“記事本記事本”和和“寫字板寫字板”。但是利用文本編輯器軟件編寫但是利用文本編輯器軟件編寫HTML文件非常麻煩，效文件非常麻煩，效率很低，因此有很多專門的優(yōu)秀的率很低，因此有很多專門的優(yōu)秀的 HTML編輯器。編輯器。常用的

3、常用的HTML編輯軟件有編輯軟件有FrontPage，Dreamweaver等，等，它們都是它們都是所見即所得所見即所得的編輯器，在屏幕頁面進(jìn)行交互設(shè)計(jì)，的編輯器，在屏幕頁面進(jìn)行交互設(shè)計(jì)，將自動(dòng)生成對(duì)應(yīng)的將自動(dòng)生成對(duì)應(yīng)的 HTML文件，并且具有文件，并且具有預(yù)覽預(yù)覽功能，大大提功能，大大提高了設(shè)計(jì)高了設(shè)計(jì)WEB頁的效率。頁的效率。HTML語言概述語言概述HTML語言概述語言概述簡單地說簡單地說HTML文件包含文件包含文檔數(shù)據(jù)文檔數(shù)據(jù)和和顯示格式顯示格式兩部分。兩部分。文檔數(shù)據(jù)文檔數(shù)據(jù) 顯示顯示W(wǎng)WW瀏覽器中的數(shù)據(jù)內(nèi)容。瀏覽器中的數(shù)據(jù)內(nèi)容。顯示格式顯示格式 這些內(nèi)容以何種格式顯示。這些內(nèi)容以何種

4、格式顯示。HTML 語言是語言是 通過利用通過利用 各種各種標(biāo)記標(biāo)記(Tags)標(biāo)識(shí)文檔的結(jié)構(gòu)標(biāo)識(shí)文檔的結(jié)構(gòu)以及標(biāo)識(shí)超鏈接以及標(biāo)識(shí)超鏈接(Hyerlink)的信息的信息HTML中的標(biāo)記大致可分為：文檔標(biāo)記、排版標(biāo)記、字體中的標(biāo)記大致可分為：文檔標(biāo)記、排版標(biāo)記、字體標(biāo)記、表格標(biāo)記、圖像與控制標(biāo)記、超級(jí)鏈接標(biāo)記等。標(biāo)記、表格標(biāo)記、圖像與控制標(biāo)記、超級(jí)鏈接標(biāo)記等。 HtmlHtml語言使用標(biāo)語言使用標(biāo)記記對(duì)的方法編寫文件，既簡對(duì)的方法編寫文件，既簡單又方便，它通常使用單又方便，它通常使用 來表來表示標(biāo)志的開始和結(jié)束。有的控制語句僅需一個(gè)標(biāo)示標(biāo)志的開始和結(jié)束。有的控制語句僅需一個(gè)標(biāo)記，沒有尾標(biāo)記。記，

5、沒有尾標(biāo)記。標(biāo)記可以標(biāo)記可以嵌套嵌套使用。使用。 如：如：中華人民共和國中華人民共和國 粗體粗體 網(wǎng)絡(luò)技術(shù)及應(yīng)用網(wǎng)絡(luò)技術(shù)及應(yīng)用 斜體斜體 你好你好 返行返行 水平線水平線怎樣生成怎樣生成html文件文件新建一個(gè)空白文本文檔，在上面輸入新建一個(gè)空白文本文檔，在上面輸入HTMLHTML語言，語言，點(diǎn)菜單項(xiàng)點(diǎn)菜單項(xiàng)“文件文件另存為另存為” ，彈出對(duì)話框，彈出對(duì)話框，“保存保存類型類型”填填“所有類型所有類型”， “文件名文件名”填填“* *.htm.htm”, ,那么在那么在你保存的位置就會(huì)出現(xiàn)一個(gè)網(wǎng)頁文件，修改的話在網(wǎng)頁文你保存的位置就會(huì)出現(xiàn)一個(gè)網(wǎng)頁文件，修改的話在網(wǎng)頁文件的菜單項(xiàng)件的菜單項(xiàng)“查看

6、查看源文件源文件” 中修改，中修改，最后保存并刷新網(wǎng)頁看新效果。最后保存并刷新網(wǎng)頁看新效果。文章的頭部，包括標(biāo)文章的頭部，包括標(biāo)題（雙標(biāo)記題（雙標(biāo)記）提綱提綱文章的正文文章的正文能舉個(gè)例子能舉個(gè)例子嗎？嗎？網(wǎng)頁制作網(wǎng)頁制作大家好！這是偶第一次做網(wǎng)頁！大家好！這是偶第一次做網(wǎng)頁！ 加油奧加油奧! 文檔頭文檔頭標(biāo)題標(biāo)題文文檔檔體體單標(biāo)記單標(biāo)記標(biāo)記嵌套標(biāo)記嵌套簡單網(wǎng)頁制作示例簡單網(wǎng)頁制作示例 許多單標(biāo)記和雙標(biāo)記的首標(biāo)記內(nèi)可以包含一些許多單標(biāo)記和雙標(biāo)記的首標(biāo)記內(nèi)可以包含一些屬性。屬性。語法：語法：例：例： Hr：在文檔的當(dāng)前位置劃一條水平線的標(biāo)記在文檔的當(dāng)前位置劃一條水平線的標(biāo)記 Size 屬性定義線

7、的粗細(xì)屬性定義線的粗細(xì) Align 屬性定義對(duì)齊方式屬性定義對(duì)齊方式 Width 屬性定義線的長度屬性定義線的長度 color屬性定義線的顏色屬性定義線的顏色 (1) 標(biāo)志用于標(biāo)志用于Html文檔的最前邊，用來標(biāo)識(shí)文檔的最前邊，用來標(biāo)識(shí)Html文檔的開始。而文檔的開始。而標(biāo)志恰恰相反，它放在標(biāo)志恰恰相反，它放在Html文檔文檔的最后邊，用來標(biāo)識(shí)的最后邊，用來標(biāo)識(shí)Html文檔的結(jié)束。文檔的結(jié)束。 (2) 和和構(gòu)成構(gòu)成Html文檔的頭部信息文檔的頭部信息，在此標(biāo)在此標(biāo)志對(duì)之間可以使用志對(duì)之間可以使用 、 等等等等標(biāo)志對(duì)，標(biāo)志對(duì)， 標(biāo)志對(duì)之間的內(nèi)容不會(huì)在瀏覽器標(biāo)志對(duì)之間的內(nèi)容不會(huì)在瀏覽器的框內(nèi)顯示出

8、來的框內(nèi)顯示出來。文檔標(biāo)記文檔標(biāo)記(3) 要將您的網(wǎng)頁的主題顯示到瀏覽器的頂部其實(shí)很簡單，要將您的網(wǎng)頁的主題顯示到瀏覽器的頂部其實(shí)很簡單，只要在只要在 標(biāo)志對(duì)之間加入您要顯示的文本即可。標(biāo)志對(duì)之間加入您要顯示的文本即可。注意：注意： 標(biāo)志對(duì)只能放在標(biāo)志對(duì)只能放在 標(biāo)標(biāo)志對(duì)之間。志對(duì)之間。(4) 是是Html文檔的主體部分，此標(biāo)志對(duì)之間文檔的主體部分，此標(biāo)志對(duì)之間可包含可包含 、 、 等眾多的標(biāo)志，它等眾多的標(biāo)志，它們所定義的文本、圖像等將會(huì)在瀏覽器框內(nèi)顯示出來。們所定義的文本、圖像等將會(huì)在瀏覽器框內(nèi)顯示出來。|bgcolor 設(shè)置背景顏色設(shè)置背景顏色|text 設(shè)置文本顏色設(shè)置文本顏色例：例：

9、|background 設(shè)置背景圖片設(shè)置背景圖片例：例：|link 設(shè)置鏈接顏色設(shè)置鏈接顏色|vlink 設(shè)置已使用的鏈接的顏色設(shè)置已使用的鏈接的顏色|alink 設(shè)置正在被擊中的鏈接的顏色設(shè)置正在被擊中的鏈接的顏色標(biāo)志中常用屬性：標(biāo)志中常用屬性：顏色設(shè)定顏色設(shè)定的三種常用方法：的三種常用方法： 用顏色常量名表示，如：用顏色常量名表示，如：Black、White、Green、Maroon、Olive、Navy、Purple、Gray、Yellow、Fuchsia、Silver、Red、Blue等。等。例：例： 紅色背景紅色背景 用六位十六進(jìn)制用六位十六進(jìn)制(rrggbb)表示：前兩位表示紅，中

10、間表示：前兩位表示紅，中間兩位表示綠色、后兩位為藍(lán)色。數(shù)字以兩位表示綠色、后兩位為藍(lán)色。數(shù)字以#開頭。開頭。例：例： 藍(lán)色文本藍(lán)色文本 用用RGB函數(shù)表示：函數(shù)表示：格式為格式為RGB(紅色值紅色值,綠色值綠色值,藍(lán)色值藍(lán)色值)例：例： 藍(lán)色文本藍(lán)色文本（5） 設(shè)置背景音樂，設(shè)置背景音樂，單標(biāo)記單標(biāo)記屬性：屬性：src：指明背景音樂所有路徑及文件完整名稱：指明背景音樂所有路徑及文件完整名稱loop：指定音樂播放的次數(shù)：指定音樂播放的次數(shù)使用方法：使用方法：(1) 標(biāo)記：標(biāo)記：書寫說明文字，內(nèi)容不書寫說明文字，內(nèi)容不在瀏覽器中顯示。在瀏覽器中顯示。(2) 標(biāo)記：標(biāo)記：雙標(biāo)記。用來創(chuàng)建一個(gè)段落的標(biāo)

11、記，雙標(biāo)記。用來創(chuàng)建一個(gè)段落的標(biāo)記，標(biāo)記間的文本按照段落的格式在瀏覽器中顯示。標(biāo)記間的文本按照段落的格式在瀏覽器中顯示。 屬性：屬性：Align（對(duì)齊方式對(duì)齊方式）：）：Left（左對(duì)齊左對(duì)齊）、Center（居中居中）和和Right（右對(duì)齊右對(duì)齊）(3) 標(biāo)記：標(biāo)記：單標(biāo)記。用來創(chuàng)建一個(gè)回車單標(biāo)記。用來創(chuàng)建一個(gè)回車換行換行排版標(biāo)記排版標(biāo)記二者區(qū)別示例二者區(qū)別示例(4) 標(biāo)記：標(biāo)記：單標(biāo)記。在該位置加入一條水平線。單標(biāo)記。在該位置加入一條水平線。 屬性：屬性：Size，Color，Width，Align，Noshade。 粗細(xì)粗細(xì) 顏色顏色 長度長度 對(duì)齊方式對(duì)齊方式 無陰影無陰影演示(1)

12、、. 雙標(biāo)記。雙標(biāo)記。他們是六他們是六種不同等級(jí)的種不同等級(jí)的標(biāo)題標(biāo)記標(biāo)題標(biāo)記，從大到小，可以增加屬性，從大到小，可以增加屬性Align，定義對(duì)齊方式。定義對(duì)齊方式。文本控制標(biāo)記文本控制標(biāo)記標(biāo)題示例標(biāo)題示例這是一行普通文字這是一行普通文字一級(jí)標(biāo)一級(jí)標(biāo)題題二級(jí)標(biāo)題二級(jí)標(biāo)題三級(jí)標(biāo)題三級(jí)標(biāo)題四級(jí)標(biāo)題四級(jí)標(biāo)題五級(jí)標(biāo)題五級(jí)標(biāo)題六級(jí)標(biāo)題六級(jí)標(biāo)題每一個(gè)標(biāo)題的每一個(gè)標(biāo)題的字體為黑體字字體為黑體字(2) 標(biāo)記：標(biāo)記：雙標(biāo)記。用來設(shè)置輸出文本雙標(biāo)記。用來設(shè)置輸出文本的字體、字號(hào)、顏色等的字體、字號(hào)、顏色等。常用屬性：常用屬性：Face、Size、Color加油加油加油加油(3) 、標(biāo)記：標(biāo)記：雙標(biāo)記。雙標(biāo)記。 指

13、定文指定文本為粗體。本為粗體。指定文本為斜體。指定文本為斜體。 指定文本為下指定文本為下劃線。劃線。 濟(jì)南大學(xué)濟(jì)南大學(xué)(4) 和和標(biāo)記：標(biāo)記：雙標(biāo)記。雙標(biāo)記。 指定指定下標(biāo)文本，下標(biāo)文本， 指定上標(biāo)文本。指定上標(biāo)文本。X2+y3SIZE屬性的有效值范圍為屬性的有效值范圍為1-7，其中缺省值為，其中缺省值為3。 圖像是在網(wǎng)頁制作中是非常重要的一個(gè)方圖像是在網(wǎng)頁制作中是非常重要的一個(gè)方面。面。在在HTML中可以支持多種格式的圖片：中可以支持多種格式的圖片：bmp、gif、jpg。圖像標(biāo)記圖像標(biāo)記圖像嵌入標(biāo)記為圖像嵌入標(biāo)記為單標(biāo)記。單標(biāo)記。 標(biāo)記標(biāo)記并不是真正地把圖像加入到并不是真正地把圖像加入到H

14、TML中，而是將標(biāo)中，而是將標(biāo)記的記的src屬性賦值為圖形文件所在的路徑屬性賦值為圖形文件所在的路徑。路徑可。路徑可以是相對(duì)路徑、絕對(duì)路徑，也可以是網(wǎng)址。以是相對(duì)路徑、絕對(duì)路徑，也可以是網(wǎng)址。 標(biāo)記中必須含有標(biāo)記中必須含有Src屬性。屬性。路徑路徑v相對(duì)路徑：所要鏈接或嵌入的文件與當(dāng)前文件（網(wǎng)頁文件）的相對(duì)相對(duì)路徑：所要鏈接或嵌入的文件與當(dāng)前文件（網(wǎng)頁文件）的相對(duì)位置所形成的路徑。以當(dāng)前文件所在路徑為起點(diǎn)。位置所形成的路徑。以當(dāng)前文件所在路徑為起點(diǎn)。鏈接同一目錄下的文件，則只需輸入要鏈接文件的名稱。鏈接同一目錄下的文件，則只需輸入要鏈接文件的名稱。鏈接下級(jí)目錄中的文件，只需先輸入目錄名，然后加

15、鏈接下級(jí)目錄中的文件，只需先輸入目錄名，然后加“/”，再輸，再輸入文件名。入文件名。 鏈接上一級(jí)目錄中文件，則先輸入鏈接上一級(jí)目錄中文件，則先輸入“./”，再輸入文件名。，再輸入文件名。相對(duì)路徑相對(duì)路徑: v絕對(duì)路徑：指包含服務(wù)器通信協(xié)議在內(nèi)的完全路徑，即一個(gè)正確的絕對(duì)路徑：指包含服務(wù)器通信協(xié)議在內(nèi)的完全路徑，即一個(gè)正確的URL地址。地址。通訊協(xié)議通訊協(xié)議 ：/服務(wù)器地址：通訊端口服務(wù)器地址：通訊端口/文件位置文件位置./文件名文件名 其他的屬性還有：其他的屬性還有：(1) Alt ：圖像不能下載時(shí)用以替代的文字。圖像不能下載時(shí)用以替代的文字。(2) Align：對(duì)齊方式。對(duì)齊方式。文本對(duì)齊文

16、本對(duì)齊：top、bottom、middle；圖形對(duì)齊圖形對(duì)齊：left、right。(3) Border：圖像的邊框。圖像的邊框?？扇】扇?的整數(shù)。的整數(shù)。(4) Width和和Height：圖像的高和寬。圖像的高和寬。(5) Hspace和和Vspace：圖片的水平位置和垂直位置。圖片的水平位置和垂直位置。 例例5.3 例例5.3屬性屬性 圖像標(biāo)記的屬性圖像標(biāo)記的屬性當(dāng)需要定義圖像、音樂、應(yīng)用程序或超媒體鏈接的鏈當(dāng)需要定義圖像、音樂、應(yīng)用程序或超媒體鏈接的鏈接地址時(shí)，需要使用鏈接標(biāo)記。接地址時(shí)，需要使用鏈接標(biāo)記。為雙標(biāo)記，標(biāo)記對(duì)之為雙標(biāo)記，標(biāo)記對(duì)之間加入需要在瀏覽器中顯示的鏈接名稱。間加入需

17、要在瀏覽器中顯示的鏈接名稱。6.2.5 超級(jí)鏈接標(biāo)記超級(jí)鏈接標(biāo)記 (1) 標(biāo)記的格式標(biāo)記的格式 1） Href屬性：屬性：指明要鏈接對(duì)象的地址，指明要鏈接對(duì)象的地址， Href的值可以的值可以是是URL形式，網(wǎng)址或相對(duì)路徑，也可以是形式，網(wǎng)址或相對(duì)路徑，也可以是mailto。即發(fā)送即發(fā)送E-mail形式。形式。 語法：語法：相關(guān)文字相關(guān)文字 例例6-42） Target屬性：屬性：定義被鏈接的目標(biāo)在指定的窗口中打定義被鏈接的目標(biāo)在指定的窗口中打開。開。 相關(guān)文字相關(guān)文字 例例5-4加加Target屬性屬性（2）超鏈接的常用屬性超鏈接的常用屬性3）Name屬性：用來在屬性：用來在HTML文檔中創(chuàng)

18、建一個(gè)書簽（或稱文檔中創(chuàng)建一個(gè)書簽（或稱錨點(diǎn)）。錨點(diǎn)）。語法：語法： 在當(dāng)前位置建立一個(gè)名字叫在當(dāng)前位置建立一個(gè)名字叫l(wèi)abel的書簽的書簽（也叫錨點(diǎn)也叫錨點(diǎn)）。例：例：當(dāng)日車市報(bào)價(jià)表當(dāng)日車市報(bào)價(jià)表創(chuàng)建書簽就是為了在創(chuàng)建書簽就是為了在HTML文檔中創(chuàng)建一些鏈接，以方便文檔中創(chuàng)建一些鏈接，以方便地找到文檔中有書簽的地方。要找到同一頁面書簽所在地，必地找到文檔中有書簽的地方。要找到同一頁面書簽所在地，必須使用書簽鏈接：須使用書簽鏈接：鏈接到當(dāng)前文檔中名字叫鏈接到當(dāng)前文檔中名字叫l(wèi)abel的書簽位置；的書簽位置；例如：例如：要找到要找到“車市報(bào)價(jià)車市報(bào)價(jià)”這個(gè)書簽，代碼如下：這個(gè)書簽，代碼如下： 點(diǎn)

19、擊此處將使瀏覽器跳到車市報(bào)價(jià)處點(diǎn)擊此處將使瀏覽器跳到車市報(bào)價(jià)處 書簽書簽.html用圖像作為超級(jí)鏈接源用圖像作為超級(jí)鏈接源可以用一個(gè)頁面上的圖片建立超級(jí)鏈接，只要將圖片的可以用一個(gè)頁面上的圖片建立超級(jí)鏈接，只要將圖片的標(biāo)記包含在標(biāo)記包含在標(biāo)記之中即可。標(biāo)記之中即可。圖像作為超級(jí)鏈接源示例圖像作為超級(jí)鏈接源示例.html 6.2.7 聲音標(biāo)記聲音標(biāo)記將音樂做成一個(gè)鏈接，只需用鼠標(biāo)在上面單擊，就將音樂做成一個(gè)鏈接，只需用鼠標(biāo)在上面單擊，就可以聽到動(dòng)人的音樂了，這樣做的方法很簡單：可以聽到動(dòng)人的音樂了，這樣做的方法很簡單：樂曲名樂曲名 點(diǎn)播音樂點(diǎn)播音樂例如：例如：菊花臺(tái)菊花臺(tái)寧夏寧夏原來你也在這里原

20、來你也在這里 把我們喜歡的音樂收集起來，作成一個(gè)音樂庫，隨時(shí)都可把我們喜歡的音樂收集起來，作成一個(gè)音樂庫，隨時(shí)都可以讓自己和別人徜徉在音樂的海洋中，已經(jīng)有人這樣做了，你以讓自己和別人徜徉在音樂的海洋中，已經(jīng)有人這樣做了，你一定已經(jīng)遇到很多，而且自己也可以試著去做了！一定已經(jīng)遇到很多，而且自己也可以試著去做了！點(diǎn)播音樂點(diǎn)播音樂.html前面，我們是借助鏈接來實(shí)現(xiàn)網(wǎng)上播放音樂前面，我們是借助鏈接來實(shí)現(xiàn)網(wǎng)上播放音樂這一功能的，我們還可以讓音樂自動(dòng)載入，你可這一功能的，我們還可以讓音樂自動(dòng)載入，你可以讓它出現(xiàn)控制面板或當(dāng)背景音樂來使用。基本以讓它出現(xiàn)控制面板或當(dāng)背景音樂來使用。基本語法：語法：該功能也

21、適用于視頻文件的載入。該功能也適用于視頻文件的載入。自動(dòng)載入音樂的標(biāo)記還有一些常用的屬性自動(dòng)載入音樂的標(biāo)記還有一些常用的屬性: 自動(dòng)載入音樂自動(dòng)載入音樂自動(dòng)載入音樂自動(dòng)載入音樂自動(dòng)載入音樂標(biāo)記的屬性自動(dòng)載入音樂標(biāo)記的屬性SRC=FILENAME設(shè)定音樂文件的路徑設(shè)定音樂文件的路徑AUTOSTART=TRUE/FALSE是否要音樂文件傳送完就自動(dòng)播放，是否要音樂文件傳送完就自動(dòng)播放，TRUE是要，是要，F(xiàn)ALSE是不要是不要LOOP=n/TRUE/FALSE設(shè)定播放重復(fù)次數(shù)，設(shè)定播放重復(fù)次數(shù)，LOOP=6表示重復(fù)表示重復(fù)6次，次，TRUE表示無限次播放，表示無限次播放，F(xiàn)ALSE播放一次即停播放

22、一次即停止。止。STARTIME=分分:秒秒設(shè)定樂曲的開始播放時(shí)間，如設(shè)定樂曲的開始播放時(shí)間，如20秒后播放秒后播放寫為寫為STARTIME=00:20VOLUME=0-100設(shè)定音量的大小。如果沒設(shè)定的話，就用設(shè)定音量的大小。如果沒設(shè)定的話，就用系統(tǒng)的音量。系統(tǒng)的音量。WIDTH HEIGHT設(shè)定控制面板的大小設(shè)定控制面板的大小HIDDEN=TRUE隱藏控制面板隱藏控制面板CONTROLS=CONSOLE/SMALLCONSOLE設(shè)定控制面板的樣子設(shè)定控制面板的樣子例：例：背景音樂背景音樂 播放音樂播放音樂 作為背景音樂來播放。作為背景音樂來播放。 自動(dòng)播放隱藏例：例：控制音樂控制音樂 播放

23、音樂播放音樂 出現(xiàn)控制面板了，你可以控制它的開與關(guān)，還可出現(xiàn)控制面板了，你可以控制它的開與關(guān)，還可以調(diào)節(jié)音量的大小。以調(diào)節(jié)音量的大小。 用瀏覽器可以播放的格式有：用瀏覽器可以播放的格式有：mov、avi、wmv、mpg、dat等格式。等格式。 |鏈接一個(gè)視頻文件鏈接一個(gè)視頻文件視頻名稱視頻名稱|嵌入一個(gè)視頻文件嵌入一個(gè)視頻文件Embed Src=文件地址及名稱文件地址及名稱 autostart=true|false |自動(dòng)載入視頻：自動(dòng)載入視頻： 播放視頻播放視頻例：例：視頻播放視頻播放播放視頻播放視頻 視頻點(diǎn)播視頻點(diǎn)播 shania1.asf 全球耗資最高的全球耗資最高的MTV 嵌入視頻自動(dòng)

24、載入視頻鏈接視頻表格表格(Table)是網(wǎng)頁制作中安排布局最好的工是網(wǎng)頁制作中安排布局最好的工具，因?yàn)楸砀癫坏梢院芎玫陌才盼谋净驁D像的具，因?yàn)楸砀癫坏梢院芎玫陌才盼谋净驁D像的顯示位置，而且還可以任意的進(jìn)行背景和前景顏顯示位置，而且還可以任意的進(jìn)行背景和前景顏色的設(shè)置。色的設(shè)置。6.2.8 表表 格格 標(biāo)記標(biāo)記 雙標(biāo)記，用來創(chuàng)建一個(gè)表格。雙標(biāo)記，用來創(chuàng)建一個(gè)表格。 標(biāo)記標(biāo)記有許多屬性，用來定義表格的外觀特征。詳細(xì)的表有許多屬性，用來定義表格的外觀特征。詳細(xì)的表格屬性有：格屬性有：屬屬 性性 用用 途途Bgcolor設(shè)置表格的背景色設(shè)置表格的背景色Background表格的背景圖片表格的背景圖

25、片Border設(shè)置邊框的寬度，邊框?qū)挾饶J(rèn)是設(shè)置邊框的寬度，邊框?qū)挾饶J(rèn)是0無邊框，無格線無邊框，無格線Bordercolor設(shè)置邊框的顏色設(shè)置邊框的顏色bordercolorlight設(shè)置邊框明亮部分的顏色設(shè)置邊框明亮部分的顏色bordercolordark設(shè)置邊框昏暗部分的顏色設(shè)置邊框昏暗部分的顏色Cellspacing設(shè)置單元格之間空間的大小設(shè)置單元格之間空間的大小Cellpadding設(shè)置表格單元格邊框與其內(nèi)部內(nèi)容之間的距離設(shè)置表格單元格邊框與其內(nèi)部內(nèi)容之間的距離Width設(shè)置表格的寬度設(shè)置表格的寬度Height設(shè)置表格的高度設(shè)置表格的高度雙標(biāo)記。表示表格的標(biāo)題，一般出現(xiàn)在雙標(biāo)記。表示

26、表格的標(biāo)題，一般出現(xiàn)在首標(biāo)記與第一個(gè)首標(biāo)記與第一個(gè)之間。之間。 標(biāo)記標(biāo)記屬性：屬性：Align 對(duì)齊方式對(duì)齊方式 left, right, top, bottom 例：例：表格標(biāo)記示例表格標(biāo)記示例 一個(gè)表格由若干行一個(gè)表格由若干行（Row）構(gòu)成，每一行又由若干個(gè)構(gòu)成，每一行又由若干個(gè)單元格單元格（Cell）組成。組成。 標(biāo)記標(biāo)記 表行標(biāo)記表行標(biāo)記屬性：屬性： Align , Valign, width,height,bgcolor Align水平對(duì)齊方式：水平對(duì)齊方式：left（左對(duì)齊左對(duì)齊），center（居中居中），right （右對(duì)齊右對(duì)齊） Valign垂直對(duì)齊方式：垂直對(duì)齊方式：to

27、p（頂端對(duì)齊頂端對(duì)齊），），middle（居中對(duì)齊居中對(duì)齊），bottom（底端對(duì)齊底端對(duì)齊） 、標(biāo)記標(biāo)記 表頭單元格標(biāo)記表頭單元格標(biāo)記，表頭數(shù)據(jù)自動(dòng)加，表頭數(shù)據(jù)自動(dòng)加粗并且居中顯示，其他與粗并且居中顯示，其他與一樣。一樣。 數(shù)據(jù)單元格標(biāo)記數(shù)據(jù)單元格標(biāo)記屬性：屬性： Align, Valign , bgcolor,width,height,Colspan,RowspanColspan：設(shè)置一個(gè)表格單元格跨占的列數(shù)設(shè)置一個(gè)表格單元格跨占的列數(shù)(缺省值為缺省值為1)；Rowspan：設(shè)置一個(gè)表格單元格跨占的行數(shù)設(shè)置一個(gè)表格單元格跨占的行數(shù)(缺省值為缺省值為1)；例：例：colspan屬性示例屬性示

28、例 表示表格開始表示表格開始創(chuàng)建表格第一行創(chuàng)建表格第一行創(chuàng)建表格內(nèi)的單元格，創(chuàng)建表格內(nèi)的單元格，此標(biāo)記內(nèi)的文字就是單元格內(nèi)此標(biāo)記內(nèi)的文字就是單元格內(nèi)的文字的文字格式如下格式如下:創(chuàng)建表格第二行創(chuàng)建表格第二行 列列1 列列2 列列3 表表 數(shù)據(jù)數(shù)據(jù)21 格格 數(shù)據(jù)數(shù)據(jù)22 數(shù)據(jù)數(shù)據(jù)23 數(shù)據(jù)數(shù)據(jù)31 數(shù)據(jù)數(shù)據(jù)32 數(shù)據(jù)數(shù)據(jù)33 第一行第一行 第二行第二行第三行第三行、或或之間有著之間有著 嚴(yán)格的層次關(guān)系。嚴(yán)格的層次關(guān)系。表單表單（Form）在在Web網(wǎng)頁中用來給訪問者填寫信息，網(wǎng)頁中用來給訪問者填寫信息，從而能獲得用戶信息，使網(wǎng)頁具有交互能力。從而能獲得用戶信息，使網(wǎng)頁具有交互能力。表單和表單和

29、Windows的對(duì)話框類似，由若干控件組成的，的對(duì)話框類似，由若干控件組成的，用于實(shí)現(xiàn)和用戶的交互。用于實(shí)現(xiàn)和用戶的交互。當(dāng)用戶填寫完信息后進(jìn)行提交當(dāng)用戶填寫完信息后進(jìn)行提交（Submit）操作，于是表單的內(nèi)容就從客戶端的瀏覽器傳操作，于是表單的內(nèi)容就從客戶端的瀏覽器傳送到服務(wù)器上。經(jīng)過送到服務(wù)器上。經(jīng)過Web服務(wù)器上的服務(wù)器上的 ASP 或或 CGI 等處理等處理程序處理后，再將用戶所需信息傳送回客戶端的瀏覽器上，程序處理后，再將用戶所需信息傳送回客戶端的瀏覽器上，這樣網(wǎng)頁就具有了交互性這樣網(wǎng)頁就具有了交互性 。6.2.10、 表表 單單雙標(biāo)記。用來創(chuàng)建一個(gè)表單，即定義表單的開始和結(jié)束位置，

30、雙標(biāo)記。用來創(chuàng)建一個(gè)表單，即定義表單的開始和結(jié)束位置，標(biāo)記對(duì)之間的內(nèi)容都屬于表單的內(nèi)容。標(biāo)記對(duì)之間的內(nèi)容都屬于表單的內(nèi)容。屬性：屬性：Action 處理程序的網(wǎng)絡(luò)路徑和程序名。處理程序的網(wǎng)絡(luò)路徑和程序名。例：例：Method：用來定義處理程序從表單中獲得信息的方式?？扇≈涤脕矶x處理程序從表單中獲得信息的方式。可取值為為get或或post，默認(rèn)為，默認(rèn)為post 。get方式方式是處理程序從當(dāng)前是處理程序從當(dāng)前HTML文檔中獲取數(shù)據(jù)，數(shù)據(jù)量有限，文檔中獲取數(shù)據(jù)，數(shù)據(jù)量有限，一般限制在一般限制在1KB以下。以下。Post方式方式方式與方式與get相反，當(dāng)前的相反，當(dāng)前的HTML把數(shù)據(jù)傳送給處理程

31、序，把數(shù)據(jù)傳送給處理程序，傳送的數(shù)據(jù)量大。傳送的數(shù)據(jù)量大。Target：屬性用來指定目標(biāo)窗口或目標(biāo)幀。屬性用來指定目標(biāo)窗口或目標(biāo)幀。 （1）表單標(biāo)記）表單標(biāo)記例例6.8 表單應(yīng)用示例表單應(yīng)用示例單標(biāo)記。用來定義表單內(nèi)的控件類型，此標(biāo)記必須放在單標(biāo)記。用來定義表單內(nèi)的控件類型，此標(biāo)記必須放在標(biāo)志對(duì)之間。通過該標(biāo)記的標(biāo)志對(duì)之間。通過該標(biāo)記的type來指定控件的類型。來指定控件的類型。該標(biāo)記內(nèi)都有該標(biāo)記內(nèi)都有Name和和Value屬性，另外還可有屬性，另外還可有size屬性。屬性。（2）標(biāo)記標(biāo)記屬性值屬性值控件類型控件類型屬性值屬性值控件類型控件類型Text單行文本框單行文本框Reset重填按鈕重填

32、按鈕Checkbox復(fù)復(fù) 選選 框框 Button普通按鈕普通按鈕Radio單單 選選 按按 鈕鈕Image提交圖片提交圖片Password密碼輸入框密碼輸入框Hidden隱藏控件隱藏控件Submit提提 交交 按按 鈕鈕File文件上傳文件上傳雙標(biāo)記。用來創(chuàng)建一個(gè)多行文本框，此標(biāo)記用于雙標(biāo)記。用來創(chuàng)建一個(gè)多行文本框，此標(biāo)記用于標(biāo)記對(duì)之間。標(biāo)記對(duì)之間。其形式如下：其形式如下：初初始文本始文本屬性：屬性： Name，Cols和和RowsCols 和和 Rows 屬性分別用來設(shè)置文本框的列數(shù)和行數(shù)，屬性分別用來設(shè)置文本框的列數(shù)和行數(shù)，列數(shù)以字符數(shù)為單位。在首尾標(biāo)記之間的所有文本都是列數(shù)以字符數(shù)為單

33、位。在首尾標(biāo)記之間的所有文本都是該控件的初值。該控件的初值。（3） 標(biāo)記標(biāo)記例例 6.8 表單應(yīng)用示例表單應(yīng)用示例：雙標(biāo)記。雙標(biāo)記。用來創(chuàng)建一個(gè)下拉列表框或可以復(fù)用來創(chuàng)建一個(gè)下拉列表框或可以復(fù)選的列表框。此標(biāo)記用于選的列表框。此標(biāo)記用于標(biāo)記對(duì)之間。標(biāo)記對(duì)之間。其其形式為：形式為： 屬性：屬性： Multiple ：不用賦值，直接加入到標(biāo)記中，列表框不用賦值，直接加入到標(biāo)記中，列表框可以多項(xiàng)選擇?？梢远囗?xiàng)選擇。 Name:列表框的輸入域名。列表框的輸入域名。Size:用來設(shè)置列表的高度，缺省值是用來設(shè)置列表的高度，缺省值是1。若沒有加入若沒有加入Multiple屬性，顯示的將是一個(gè)單選列表框，屬

34、性，顯示的將是一個(gè)單選列表框，（4） 、標(biāo)記標(biāo)記例例 6.8 表單應(yīng)用示例表單應(yīng)用示例：雙標(biāo)記。用來指定列表框中的一個(gè)選項(xiàng)雙標(biāo)記。用來指定列表框中的一個(gè)選項(xiàng)。此標(biāo)記用于此標(biāo)記用于 標(biāo)記對(duì)之間。標(biāo)記對(duì)之間。其形式如下：其形式如下： 屬性：屬性： Selected ：用來指定默認(rèn)的選項(xiàng)。用來指定默認(rèn)的選項(xiàng)。 Value:用來指定該選項(xiàng)的取值用來指定該選項(xiàng)的取值當(dāng)用戶進(jìn)行選擇操作并且選中該項(xiàng)時(shí)，當(dāng)用戶進(jìn)行選擇操作并且選中該項(xiàng)時(shí)，名將名將得到這個(gè)值。發(fā)送時(shí)這個(gè)值是要傳送到服務(wù)器上的，服務(wù)器得到這個(gè)值。發(fā)送時(shí)這個(gè)值是要傳送到服務(wù)器上的，服務(wù)器通過調(diào)用通過調(diào)用名字的名字的Value屬性來獲得該區(qū)域選中的數(shù)

35、屬性來獲得該區(qū)域選中的數(shù)據(jù)項(xiàng)。據(jù)項(xiàng)。當(dāng)當(dāng)標(biāo)記不含有標(biāo)記不含有VALUE屬性時(shí)，則以選項(xiàng)文本屬性時(shí)，則以選項(xiàng)文本作為最后的取值。作為最后的取值。例例 6.8 表單應(yīng)用示例表單應(yīng)用示例http:/編寫組5.3 網(wǎng)頁制作網(wǎng)頁制作 例例5.2一個(gè)簡單的表單示例一個(gè)簡單的表單示例一個(gè)簡單的表單示例一個(gè)簡單的表單示例用戶名：用戶名：密碼：密碼： 要制作一個(gè)漂亮、直觀的要制作一個(gè)漂亮、直觀的Web網(wǎng)頁，除了要了解網(wǎng)頁，除了要了解HTML語言知識(shí)外，一般來說，還需要掌握一種語言知識(shí)外，一般來說，還需要掌握一種Web網(wǎng)網(wǎng)頁可視化制作軟件，如頁可視化制作軟件，如DreamWeawer、FrontPage等，等，這

36、樣可以提高程序設(shè)計(jì)的效率，縮短軟件研發(fā)周期。這樣可以提高程序設(shè)計(jì)的效率，縮短軟件研發(fā)周期。DreamWeawer和和FrontPage在功能上各有千秋。在功能上各有千秋。DreamWeaver功能更強(qiáng)大一些，冗余代碼少，站點(diǎn)管功能更強(qiáng)大一些，冗余代碼少，站點(diǎn)管理、特效實(shí)現(xiàn)等輕而易舉。理、特效實(shí)現(xiàn)等輕而易舉。DreamWeaver有多個(gè)不同有多個(gè)不同的版本，本節(jié)我們將詳細(xì)介紹的版本，本節(jié)我們將詳細(xì)介紹的使用方法。的使用方法。6.3 Dreamweaver網(wǎng)頁設(shè)計(jì)網(wǎng)頁設(shè)計(jì) 了解了解之后進(jìn)入該界面之后進(jìn)入該界面插入欄插入欄文檔窗口文檔窗口標(biāo)簽檢查器標(biāo)簽檢查器屬性檢查器屬性檢查器面板組面板組文件面板文

37、件面板 Dreamweaver菜單包括文件，編輯，查看，插入，修菜單包括文件，編輯，查看，插入，修改，文本，命令，站點(diǎn)，窗口，幫助。改，文本，命令，站點(diǎn)，窗口，幫助。文件：文件：包括對(duì)文件的各種操作。包括對(duì)文件的各種操作。編輯：編輯：包含了對(duì)文件的復(fù)制，粘貼，查找與替換等命令。包含了對(duì)文件的復(fù)制，粘貼，查找與替換等命令。查看：查看：使用查看菜單可以查看文檔的相關(guān)內(nèi)容。使用查看菜單可以查看文檔的相關(guān)內(nèi)容。插入：插入：用于將對(duì)象插入文檔中。用于將對(duì)象插入文檔中。修改：修改：可以使用修改菜單更改選定頁面元素的屬性?？梢允褂眯薷牟藛胃倪x定頁面元素的屬性。文本：文本：可以設(shè)置文本的格式，如段落格式，字

38、體等?？梢栽O(shè)置文本的格式，如段落格式，字體等。命令：命令：提供各種命令的訪問。提供各種命令的訪問。站點(diǎn)：站點(diǎn)：提供用于管理站點(diǎn)以及上傳和下載文件的菜單項(xiàng)。提供用于管理站點(diǎn)以及上傳和下載文件的菜單項(xiàng)。窗口：窗口：提供提供對(duì)對(duì)Dreamweaver中的所有面板，檢查器和窗口的中的所有面板，檢查器和窗口的訪問。訪問。幫助：幫助：提供了對(duì)提供了對(duì)Dreamweaver文檔文檔的訪問。的訪問。建立基本站點(diǎn)建立基本站點(diǎn) 1、新建并保存網(wǎng)頁、新建并保存網(wǎng)頁頁面制作頁面制作在編輯網(wǎng)頁之前，可以對(duì)網(wǎng)頁的一些參數(shù)進(jìn)行設(shè)置，在編輯網(wǎng)頁之前，可以對(duì)網(wǎng)頁的一些參數(shù)進(jìn)行設(shè)置，這些參數(shù)將會(huì)影響到整個(gè)網(wǎng)頁。這些參數(shù)將會(huì)影響到

39、整個(gè)網(wǎng)頁。按按“Ctrl+J”鍵或單擊屬性檢查器上的鍵或單擊屬性檢查器上的“頁面屬性頁面屬性”按鈕，將彈出頁面屬性對(duì)話框。按鈕，將彈出頁面屬性對(duì)話框。外觀：外觀：頁面字體、文本顏色、背景色、背景圖片頁面字體、文本顏色、背景色、背景圖片鏈接：鏈接：鏈接字體、顏色、已訪問的鏈接顏色等。鏈接字體、顏色、已訪問的鏈接顏色等。標(biāo)題標(biāo)題/編碼：編碼：標(biāo)題瀏覽時(shí)顯示在標(biāo)題欄中；編碼為文標(biāo)題瀏覽時(shí)顯示在標(biāo)題欄中；編碼為文檔所使用的編碼，一般為檔所使用的編碼，一般為“簡體中文簡體中文”。2、頁面設(shè)置、頁面設(shè)置插入的圖片插入的圖片導(dǎo)航條導(dǎo)航條Flash鏈接鏈接嵌入音樂嵌入音樂Flash頁面屬性頁面屬性3、插入文本

40、、插入文本文本包括文本包括普通文字普通文字，特殊符號(hào)特殊符號(hào)，時(shí)間日期時(shí)間日期，注釋注釋語句語句等內(nèi)容。等內(nèi)容。可以直接在可以直接在 DreamWeaver 文檔窗口中鍵入文本；文檔窗口中鍵入文本；也可以使用也可以使用“剪貼板剪貼板”工具復(fù)制文本。工具復(fù)制文本。注意：注意：DreamWeaver 一般不保留在其他應(yīng)用程一般不保留在其他應(yīng)用程序中應(yīng)用的文本格式，但它保留換行符。序中應(yīng)用的文本格式，但它保留換行符。4、 設(shè)置文本格式設(shè)置文本格式（2）插入日期）插入日期 （3）插入特殊字符）插入特殊字符 （4）在字符之間添加空格）在字符之間添加空格 5、設(shè)置段落格式和文檔結(jié)構(gòu)設(shè)置段落格式和文檔結(jié)構(gòu) （4）使用水平線）使用水平線 （5）創(chuàng)建項(xiàng)目列表）創(chuàng)建項(xiàng)目列表 5.2.5 圖像和多媒體圖像和多媒體 圖片的環(huán)繞圖片的環(huán)繞 圖像映射圖像映射/ /圖像地圖圖像地圖2、為頁面添加聲音、為頁面添加聲音| 鏈接到音頻文件鏈接到音頻文件 2、為頁面添加聲音、為頁面添加聲音| 嵌入聲音文件嵌入聲音文件 3、添加視頻、添加視頻 其操作方法與添加聲音文件類其操作方法與添加聲音文件類似。似。4、插入、插入Flash對(duì)象對(duì)象 （3）插入）插入 Flash 內(nèi)容內(nèi)容 5.2.6 鏈接