Dreamweaver 8和Flash 8案例教程表單、樣式表與網(wǎng)頁中的其他對(duì)象

1、 【案例案例11 11】“電腦配置調(diào)查表電腦配置調(diào)查表”網(wǎng)網(wǎng)頁頁4.1 【案例案例1212】“硬盤的性能指標(biāo)硬盤的性能指標(biāo)”網(wǎng)網(wǎng)頁頁4.2【案例案例1313】“WordWord操作演示操作演示”網(wǎng)頁網(wǎng)頁4.3【案例案例1414】“電子市場(chǎng)圖片秀電子市場(chǎng)圖片秀”網(wǎng)網(wǎng)頁頁4.44.1.1 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) “電腦配置調(diào)查表電腦配置調(diào)查表”網(wǎng)頁的顯示效果網(wǎng)頁的顯示效果如圖如圖4-1-1所示。在該網(wǎng)頁中，以表單的方所示。在該網(wǎng)頁中，以表單的方式列出了電腦主要配件的調(diào)查信息，只需式列出了電腦主要配件的調(diào)查信息，只需在頁面中按照提示進(jìn)行選擇或輸入后，單在頁面中按照提示進(jìn)行選擇或輸入后，單擊擊“提交提交”按

2、鈕，即可將網(wǎng)頁中的信息提按鈕，即可將網(wǎng)頁中的信息提交到服務(wù)器的數(shù)據(jù)庫中。交到服務(wù)器的數(shù)據(jù)庫中。圖圖4-1-1 “電腦配置調(diào)查表電腦配置調(diào)查表”網(wǎng)頁的顯示效果網(wǎng)頁的顯示效果 表單是用戶利用瀏覽器對(duì)表單是用戶利用瀏覽器對(duì)Web站點(diǎn)數(shù)站點(diǎn)數(shù)據(jù)庫進(jìn)行查詢和添加的一種界面，用戶利據(jù)庫進(jìn)行查詢和添加的一種界面，用戶利用表單可以輸入信息或選擇選項(xiàng)等，然后用表單可以輸入信息或選擇選項(xiàng)等，然后將這些信息提交給服務(wù)器進(jìn)行處理，這種將這些信息提交給服務(wù)器進(jìn)行處理，這種查詢方式叫做交互的或者雙向的。這些表查詢方式叫做交互的或者雙向的。這些表單對(duì)象包括文本域、下拉列表框、復(fù)選框單對(duì)象包括文本域、下拉列表框、復(fù)選框和單選

3、按鈕等。和單選按鈕等。 表單對(duì)象是讓用戶輸入信息的地方，表單對(duì)象是讓用戶輸入信息的地方，表單域是放置表單對(duì)象的區(qū)域，只有表單表單域是放置表單對(duì)象的區(qū)域，只有表單域內(nèi)的表單對(duì)象，才可以將它的信息傳送域內(nèi)的表單對(duì)象，才可以將它的信息傳送出去。出去。4.1.2 操作過程操作過程1創(chuàng)建表單域和插入表單對(duì)象創(chuàng)建表單域和插入表單對(duì)象（1）創(chuàng)建與刪除表單域）創(chuàng)建與刪除表單域創(chuàng)建表單域：將光標(biāo)移到要插入表單域創(chuàng)建表單域：將光標(biāo)移到要插入表單域的位置，單擊的位置，單擊“插入插入”（表單）欄內(nèi)的（表單）欄內(nèi)的“表單表單”按鈕按鈕 ，即可在網(wǎng)頁編輯窗口，即可在網(wǎng)頁編輯窗口內(nèi)創(chuàng)建一個(gè)表單域，如圖內(nèi)創(chuàng)建一個(gè)表單域，如圖

4、4-1-2所示。所示。圖圖4-1-2 創(chuàng)建的表單域創(chuàng)建的表單域 單擊表單域內(nèi)部，將光標(biāo)移到表單域單擊表單域內(nèi)部，將光標(biāo)移到表單域內(nèi)，按回車鍵，即可將表單域調(diào)大。按內(nèi)，按回車鍵，即可將表單域調(diào)大。按BackSpace鍵，可使表單域縮小。表單域鍵，可使表單域縮小。表單域在瀏覽器內(nèi)是看不到的。在瀏覽器內(nèi)是看不到的。顯示表單域：在表單域創(chuàng)建后，若看不顯示表單域：在表單域創(chuàng)建后，若看不到表單域的矩形紅線，可以單擊選中到表單域的矩形紅線，可以單擊選中“查查看看”“可視化助理可視化助理”“不可見元素不可見元素”菜單命令，即可將表單域的矩形紅線顯示菜單命令，即可將表單域的矩形紅線顯示出來。出來。刪除表單域：?jiǎn)?/p>

5、擊表單域的邊線處，選刪除表單域：?jiǎn)螕舯韱斡虻倪吘€處，選中表單域，按中表單域，按Delete鍵，即可刪除表單域。鍵，即可刪除表單域。 （2）設(shè)置表單域的屬性）設(shè)置表單域的屬性 選中表單域，此時(shí)表單域選中表單域，此時(shí)表單域“屬性屬性”欄欄如圖如圖4-1-3所示。所示。圖圖4-1-3 表單域表單域“屬性屬性”欄欄 “表單名稱表單名稱”文本框：在該文本框內(nèi)，輸文本框：在該文本框內(nèi)，輸入表單域的名字。表單域的名字可用于入表單域的名字。表單域的名字可用于JavaScript和和VBScript等腳本語言中，這些等腳本語言中，這些腳本語言可以控制表單域的屬性。腳本語言可以控制表單域的屬性。 “動(dòng)作動(dòng)作”文本

6、框和按鈕：利用它們可以文本框和按鈕：利用它們可以輸入腳本程序或含有腳本程序的輸入腳本程序或含有腳本程序的HTML文文件。件。 “方法方法”下拉列表框：用來選擇客戶端下拉列表框：用來選擇客戶端與服務(wù)器之間傳送數(shù)據(jù)采用的方式。與服務(wù)器之間傳送數(shù)據(jù)采用的方式。3個(gè)選個(gè)選項(xiàng)是項(xiàng)是“默認(rèn)默認(rèn)”、“GET”（獲得，即追加（獲得，即追加表單值到表單值到URL，并發(fā)送服務(wù)器，并發(fā)送服務(wù)器GET請(qǐng)求）請(qǐng)求）和和“POST”（傳遞，在消息正文中發(fā)送表（傳遞，在消息正文中發(fā)送表單的值，并發(fā)送服務(wù)器單的值，并發(fā)送服務(wù)器POST請(qǐng)求）。請(qǐng)求）。 “類類”下拉列表框：其中有下拉列表框：其中有“重命名重命名”、“管理樣式管

7、理樣式”和創(chuàng)建的和創(chuàng)建的CSS樣式名稱等多樣式名稱等多個(gè)選項(xiàng)，可以用來選擇個(gè)選項(xiàng)，可以用來選擇CSS樣式、給樣式、給CSS樣式更名和創(chuàng)建新的樣式更名和創(chuàng)建新的CSS樣式等。樣式等。（3）插入表單對(duì)象的方法）插入表單對(duì)象的方法 將光標(biāo)移到要插入表單對(duì)象的表單中，將光標(biāo)移到要插入表單對(duì)象的表單中，再插入表單對(duì)象。插入表單對(duì)象的方法與再插入表單對(duì)象。插入表單對(duì)象的方法與插入表單的方法一樣。插入表單的方法一樣。 將光標(biāo)移到要插入表單對(duì)象的位置，將光標(biāo)移到要插入表單對(duì)象的位置，然后單擊然后單擊“插入插入”（表單）欄中的相應(yīng)按（表單）欄中的相應(yīng)按鈕，即可在光標(biāo)處插入一個(gè)相應(yīng)的表單對(duì)鈕，即可在光標(biāo)處插入一個(gè)

8、相應(yīng)的表單對(duì)象。另外，單擊象。另外，單擊“插入插入”“表單表單”菜單菜單命令，彈出它的下一級(jí)菜單。命令，彈出它的下一級(jí)菜單。 根據(jù)要插入的表單對(duì)象類別，單擊菜根據(jù)要插入的表單對(duì)象類別，單擊菜單內(nèi)的菜單命令也可插入表單對(duì)象。單內(nèi)的菜單命令也可插入表單對(duì)象。表單對(duì)象的表單對(duì)象的“屬性屬性”欄中都有一個(gè)名稱文欄中都有一個(gè)名稱文本框，用來輸入表單對(duì)象的名稱，該名稱本框，用來輸入表單對(duì)象的名稱，該名稱可在程序中使用，以指定表單對(duì)象?？稍诔绦蛑惺褂茫灾付ū韱螌?duì)象。（1）文本域?qū)傩缘脑O(shè)置：文本域也）文本域?qū)傩缘脑O(shè)置：文本域也叫做文本字段，表單中經(jīng)常使用文本叫做文本字段，表單中經(jīng)常使用文本域。它可以是單行，

9、也可以是多行，域。它可以是單行，也可以是多行，用于接收文本、數(shù)字和字符。文本域用于接收文本、數(shù)字和字符。文本域的的“屬性屬性”欄如圖欄如圖4-1-4所示，各選項(xiàng)所示，各選項(xiàng)的作用如下。的作用如下。圖圖4-1-4 文本域文本域的的“屬性屬性”欄欄“字符寬度字符寬度”文本框：文本域的寬度，即文本框：文本域的寬度，即可顯示字符的最多個(gè)數(shù)?？娠@示字符的最多個(gè)數(shù)。 “類型類型”欄：該欄有欄：該欄有3個(gè)單選項(xiàng)，用來選個(gè)單選項(xiàng)，用來選擇擇“單行單行”、“多行多行”或或“密碼密碼”文本域。文本域。密碼文本域的特點(diǎn)是：當(dāng)用戶輸入文字時(shí)，密碼文本域的特點(diǎn)是：當(dāng)用戶輸入文字時(shí)，密碼文本域內(nèi)顯示的不是這些文字，而是密

10、碼文本域內(nèi)顯示的不是這些文字，而是一行一行“*”。選擇。選擇“多行多行”單選項(xiàng)時(shí)，其單選項(xiàng)時(shí)，其“屬性屬性”欄會(huì)發(fā)生變化：欄會(huì)發(fā)生變化：“初始值初始值”文本文本框變?yōu)閹L動(dòng)條的多行文本框，同時(shí)框變?yōu)閹L動(dòng)條的多行文本框，同時(shí)“換換行行”下拉列表框變?yōu)橛行В吕斜砜蜃優(yōu)橛行?，“字符寬度字符寬度”文本框變?yōu)槲谋究蜃優(yōu)椤靶袛?shù)行數(shù)”文本框，用來輸入文文本框，用來輸入文本框的行數(shù)。本框的行數(shù)?！俺跏贾党跏贾怠蔽谋究颍河脕磔斎胛谋究虻某跷谋究颍河脕磔斎胛谋究虻某跏純?nèi)容。始內(nèi)容。 “換行換行”下拉列表框：只有在選擇了下拉列表框：只有在選擇了“多行多行”類型后它才有效。類型后它才有效?！皳Q行換行”下拉下拉列

11、表框內(nèi)有列表框內(nèi)有4個(gè)選項(xiàng)，它們的含義如下。個(gè)選項(xiàng)，它們的含義如下?！澳J(rèn)默認(rèn)”：采用瀏覽器的默認(rèn)值。：采用瀏覽器的默認(rèn)值。 “關(guān)關(guān)”：當(dāng)輸入的文字超過文本框的寬：當(dāng)輸入的文字超過文本框的寬度時(shí)不換行，但是會(huì)出現(xiàn)滾動(dòng)條。度時(shí)不換行，但是會(huì)出現(xiàn)滾動(dòng)條。 “虛擬虛擬”：當(dāng)輸入文字超過文本框?qū)挾龋寒?dāng)輸入文字超過文本框?qū)挾葧r(shí)會(huì)自動(dòng)換行，向服務(wù)器傳輸數(shù)據(jù)時(shí)無回時(shí)會(huì)自動(dòng)換行，向服務(wù)器傳輸數(shù)據(jù)時(shí)無回車符。車符。 “實(shí)體實(shí)體”：當(dāng)輸入的文字超過文本框的：當(dāng)輸入的文字超過文本框的寬度時(shí)，會(huì)自動(dòng)加入回車符并換行。寬度時(shí)，會(huì)自動(dòng)加入回車符并換行。（2）復(fù)選框?qū)傩缘脑O(shè)置：復(fù)選框）復(fù)選框?qū)傩缘脑O(shè)置：復(fù)選框 有選中和未選

12、中兩種狀態(tài)，多個(gè)復(fù)選有選中和未選中兩種狀態(tài)，多個(gè)復(fù)選框允許多選。它的框允許多選。它的“屬性屬性”欄如圖欄如圖4-1-5所示，各選項(xiàng)的作用如下。所示，各選項(xiàng)的作用如下。圖圖4-1-5 復(fù)選框的復(fù)選框的“屬性屬性”欄欄 “選定值選定值”文本框：用來輸入復(fù)選框選中文本框：用來輸入復(fù)選框選中時(shí)的數(shù)值，通常為時(shí)的數(shù)值，通常為1或或0。 “初始狀態(tài)初始狀態(tài)”欄：它有兩個(gè)單選項(xiàng)，用欄：它有兩個(gè)單選項(xiàng)，用來設(shè)置復(fù)選框的初始狀態(tài)。來設(shè)置復(fù)選框的初始狀態(tài)。（3）單選按鈕屬性的設(shè)置：?jiǎn)芜x按）單選按鈕屬性的設(shè)置：?jiǎn)芜x按鈕鈕 也叫做單選項(xiàng)，一組單選按鈕也叫做單選項(xiàng)，一組單選按鈕中同一時(shí)間只允許選中一個(gè)，它的中同一時(shí)間只

13、允許選中一個(gè)，它的“屬性屬性”欄如圖欄如圖4-1-6所示。該所示。該“屬性屬性”欄中的選項(xiàng)與復(fù)選框欄中的選項(xiàng)與復(fù)選框“屬性屬性”欄中相欄中相應(yīng)選項(xiàng)的作用一樣。應(yīng)選項(xiàng)的作用一樣。圖圖4-1-6 單選按鈕的單選按鈕的“屬性屬性”欄欄（4）單選按鈕組屬性的設(shè)置：?jiǎn)芜x）單選按鈕組屬性的設(shè)置：?jiǎn)芜x按鈕組按鈕組 也叫做單選項(xiàng)組。單擊也叫做單選項(xiàng)組。單擊“插入插入”（表單）欄中的（表單）欄中的“單選按鈕單選按鈕組組”按鈕按鈕 ，可彈出，可彈出“單選按鈕組單選按鈕組”對(duì)話框，如圖對(duì)話框，如圖4-1-7所示。所示。圖圖4-1-7 “單選按鈕組單選按鈕組”對(duì)話框?qū)υ捒?利用該對(duì)話框可以設(shè)置單選按鈕利用該對(duì)話框可以

14、設(shè)置單選按鈕組中單選按鈕的個(gè)數(shù)、名稱和初始值。組中單選按鈕的個(gè)數(shù)、名稱和初始值。如果要增加選項(xiàng)，可單擊如果要增加選項(xiàng)，可單擊 按鈕；按鈕；如果要?jiǎng)h除選項(xiàng)，可選中要?jiǎng)h除的選如果要?jiǎng)h除選項(xiàng)，可選中要?jiǎng)h除的選項(xiàng)，再單擊項(xiàng)，再單擊 按鈕。如果要調(diào)整選按鈕。如果要調(diào)整選項(xiàng)的顯示次序，可選中要移動(dòng)的選項(xiàng)，項(xiàng)的顯示次序，可選中要移動(dòng)的選項(xiàng)，再單擊再單擊 或或 按鈕。單選按鈕組按鈕。單選按鈕組的的“屬性屬性”欄如圖欄如圖4-1-6所示。所示。（5）按鈕屬性的設(shè)置：按鈕）按鈕屬性的設(shè)置：按鈕 用來用來制作制作“提交提交”和和“重置重置”按鈕，還可按鈕，還可以調(diào)用函數(shù)，它的以調(diào)用函數(shù)，它的“屬性屬性”欄如圖欄如圖

15、4-1-8所示，各選項(xiàng)的作用如下。所示，各選項(xiàng)的作用如下。 “標(biāo)簽標(biāo)簽”文本框：用來輸入按鈕上的文字。文本框：用來輸入按鈕上的文字。 “動(dòng)作動(dòng)作”欄：它有欄：它有3個(gè)單選項(xiàng)，用來選個(gè)單選項(xiàng)，用來選擇單擊該選項(xiàng)后引起的動(dòng)作類型。擇單擊該選項(xiàng)后引起的動(dòng)作類型。 “提交表單提交表單”：選中它后，可以向服務(wù)：選中它后，可以向服務(wù)器提交整個(gè)表單。器提交整個(gè)表單。 “重設(shè)表單重設(shè)表單”：選中它后，可以取消前面：選中它后，可以取消前面的輸入，復(fù)位表單。的輸入，復(fù)位表單。 “無無”：選中它后，表示是一般按鈕，：選中它后，表示是一般按鈕，可用來調(diào)用腳本程序?？捎脕碚{(diào)用腳本程序。圖圖4-1-8 按鈕的按鈕的“屬性

16、屬性”欄欄 （6）列表）列表/菜單屬性的設(shè)置：列表菜單屬性的設(shè)置：列表/菜菜單單 的作用是將一些選項(xiàng)放在一個(gè)的作用是將一些選項(xiàng)放在一個(gè)帶滾動(dòng)條的列表框內(nèi)，它的帶滾動(dòng)條的列表框內(nèi)，它的“屬性屬性”欄如圖欄如圖4-1-9所示，各選項(xiàng)的作用如下。所示，各選項(xiàng)的作用如下。圖圖4-1-9 列表列表/菜單的菜單的“屬性屬性”欄欄 “類型類型”欄：它有欄：它有“菜單菜單”和和“列表列表”兩兩個(gè)單選項(xiàng)。個(gè)單選項(xiàng)?！安藛尾藛巍本褪窍吕斜砜颍贿x就是下拉列表框；選擇擇“列表列表”選項(xiàng)后，其右邊的各選項(xiàng)會(huì)變選項(xiàng)后，其右邊的各選項(xiàng)會(huì)變?yōu)榭蛇x項(xiàng)，此時(shí)的列表框右邊會(huì)產(chǎn)生滾動(dòng)為可選項(xiàng)，此時(shí)的列表框右邊會(huì)產(chǎn)生滾動(dòng)條。條。 “

17、高度高度”文本框：用來輸入列表的高度文本框：用來輸入列表的高度值，即可以顯示的行數(shù)。值，即可以顯示的行數(shù)。 “選定范圍選定范圍”復(fù)選框：選中它后，表示復(fù)選框：選中它后，表示列表中的各選項(xiàng)可以同時(shí)選擇多項(xiàng)。列表中的各選項(xiàng)可以同時(shí)選擇多項(xiàng)。 “初始化時(shí)選定初始化時(shí)選定”列表框：用來設(shè)置第列表框：用來設(shè)置第一次彈出該菜單時(shí)，菜單中默認(rèn)的選中項(xiàng)。一次彈出該菜單時(shí)，菜單中默認(rèn)的選中項(xiàng)。 “列表值列表值”按鈕：?jiǎn)螕粼摪粹o，可彈出一按鈕：?jiǎn)螕粼摪粹o，可彈出一個(gè)個(gè)“列表值列表值”對(duì)話框，與圖對(duì)話框，與圖4-1-7相似，使相似，使用方法基本相同。利用該對(duì)話框可以輸入用方法基本相同。利用該對(duì)話框可以輸入菜單或列表

18、內(nèi)顯示的選項(xiàng)內(nèi)容（在菜單或列表內(nèi)顯示的選項(xiàng)內(nèi)容（在“標(biāo)簽標(biāo)簽”欄內(nèi)），以及輸入此選項(xiàng)提交后的返回值欄內(nèi)），以及輸入此選項(xiàng)提交后的返回值（在（在“值值”欄內(nèi)）。欄內(nèi)）。（7）跳轉(zhuǎn)菜單屬性的設(shè)置：跳轉(zhuǎn)菜）跳轉(zhuǎn)菜單屬性的設(shè)置：跳轉(zhuǎn)菜單單 采用下拉列表框的方式來實(shí)現(xiàn)采用下拉列表框的方式來實(shí)現(xiàn)鏈接跳轉(zhuǎn)，其外觀與列表鏈接跳轉(zhuǎn)，其外觀與列表/菜單菜單 一一樣，是菜單的另外一種形式。用戶單樣，是菜單的另外一種形式。用戶單擊該菜單的某一個(gè)選項(xiàng)時(shí)，當(dāng)前頁面擊該菜單的某一個(gè)選項(xiàng)時(shí)，當(dāng)前頁面或框架會(huì)跳轉(zhuǎn)到其他的頁面。創(chuàng)建跳或框架會(huì)跳轉(zhuǎn)到其他的頁面。創(chuàng)建跳轉(zhuǎn)菜單的操作方法如下。轉(zhuǎn)菜單的操作方法如下。 單擊單擊“跳轉(zhuǎn)菜單

19、跳轉(zhuǎn)菜單”按鈕按鈕 ，屏幕會(huì)彈，屏幕會(huì)彈出一個(gè)出一個(gè)“插入跳轉(zhuǎn)菜單插入跳轉(zhuǎn)菜單”對(duì)話框，如圖對(duì)話框，如圖4-1-10所示。在所示。在“文本文本”文本框內(nèi)輸入菜單文本框內(nèi)輸入菜單命令的說明文字，在命令的說明文字，在“菜單項(xiàng)菜單項(xiàng)”列表框內(nèi)列表框內(nèi)會(huì)隨之顯示出來。其中各選項(xiàng)的作用如下。會(huì)隨之顯示出來。其中各選項(xiàng)的作用如下。、 、 和和 按鈕的作用與圖按鈕的作用與圖4-1-7所示按鈕的作用一樣。所示按鈕的作用一樣。在在“選擇時(shí)，轉(zhuǎn)到選擇時(shí)，轉(zhuǎn)到URL”文本框內(nèi)輸入要文本框內(nèi)輸入要跳轉(zhuǎn)的文件路徑與文件名字。也可以單擊跳轉(zhuǎn)的文件路徑與文件名字。也可以單擊“瀏覽瀏覽”按鈕，彈出按鈕，彈出“選擇文件選擇文件

20、”對(duì)話框，對(duì)話框，選擇鏈接的文件。選擇鏈接的文件。在在“打開打開URL于于”下拉列表框內(nèi)選擇在下拉列表框內(nèi)選擇在何處打開文件。何處打開文件。在在“菜單名稱菜單名稱”文本框內(nèi)輸入跳轉(zhuǎn)菜單文本框內(nèi)輸入跳轉(zhuǎn)菜單的名稱。的名稱。“選項(xiàng)選項(xiàng)”欄有兩個(gè)復(fù)選框。選中欄有兩個(gè)復(fù)選框。選中“菜單之菜單之后插入前往按鈕后插入前往按鈕”復(fù)選框后，在菜單的右復(fù)選框后，在菜單的右邊會(huì)增加一個(gè)邊會(huì)增加一個(gè)“前往前往”按鈕。選中按鈕。選中“更改更改URL后選擇第一個(gè)項(xiàng)目后選擇第一個(gè)項(xiàng)目”復(fù)選框后，可設(shè)復(fù)選框后，可設(shè)置跳轉(zhuǎn)后重新定義菜單第一個(gè)選項(xiàng)為默認(rèn)置跳轉(zhuǎn)后重新定義菜單第一個(gè)選項(xiàng)為默認(rèn)選項(xiàng)。選項(xiàng)。 單擊單擊“確定確定”按鈕

21、，可退出該對(duì)話框，按鈕，可退出該對(duì)話框，頁面會(huì)顯示一個(gè)跳轉(zhuǎn)菜單。按照?qǐng)D頁面會(huì)顯示一個(gè)跳轉(zhuǎn)菜單。按照?qǐng)D4-1-10所示進(jìn)行設(shè)置后，瀏覽器中顯示的跳轉(zhuǎn)菜所示進(jìn)行設(shè)置后，瀏覽器中顯示的跳轉(zhuǎn)菜單如圖單如圖4-1-11所示。所示。 圖圖4-1-10 “插入跳轉(zhuǎn)菜單插入跳轉(zhuǎn)菜單”對(duì)話框?qū)υ捒?圖圖4-1-11 在頁面內(nèi)的跳轉(zhuǎn)菜單在頁面內(nèi)的跳轉(zhuǎn)菜單 選中創(chuàng)建的跳轉(zhuǎn)菜單后，其選中創(chuàng)建的跳轉(zhuǎn)菜單后，其“屬性屬性”欄與圖欄與圖4-1-9基本一樣。基本一樣。4.2.1 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) “硬盤的性能指標(biāo)硬盤的性能指標(biāo)”網(wǎng)頁的顯示效果網(wǎng)頁的顯示效果如圖如圖4-2-1所示。在該網(wǎng)頁中，使用樣式表所示。在該網(wǎng)頁中，使用樣

22、式表對(duì)其中的文字進(jìn)行樣式設(shè)置。對(duì)其中的文字進(jìn)行樣式設(shè)置。圖圖4-2-1 “硬盤的性能指標(biāo)硬盤的性能指標(biāo)”網(wǎng)頁的顯示效果網(wǎng)頁的顯示效果 在以前各章節(jié)中，對(duì)頁面對(duì)象的各種在以前各章節(jié)中，對(duì)頁面對(duì)象的各種屬性都是一個(gè)一個(gè)獨(dú)立設(shè)置的，例如，選屬性都是一個(gè)一個(gè)獨(dú)立設(shè)置的，例如，選中本章案例中的標(biāo)題文字，將它選中并復(fù)中本章案例中的標(biāo)題文字，將它選中并復(fù)制到剪貼板中，再粘貼到記事本中，可得制到剪貼板中，再粘貼到記事本中，可得到它的到它的HTML標(biāo)識(shí)語句：標(biāo)識(shí)語句：電腦配置調(diào)查表電腦配置調(diào)查表 可以看出，對(duì)于文字可以看出，對(duì)于文字“電腦配置調(diào)查電腦配置調(diào)查表表”的字體、大小、顏色等屬性在該的字體、大小、顏色等

23、屬性在該HTML語句中進(jìn)行了定義。如果網(wǎng)頁中有語句中進(jìn)行了定義。如果網(wǎng)頁中有許多處的文字都采用同樣的屬性設(shè)置，那許多處的文字都采用同樣的屬性設(shè)置，那么每處文字也都需要進(jìn)行相同的屬性設(shè)置，么每處文字也都需要進(jìn)行相同的屬性設(shè)置，這無疑會(huì)給網(wǎng)頁制作帶來許多重復(fù)性的工這無疑會(huì)給網(wǎng)頁制作帶來許多重復(fù)性的工作，同時(shí)也使網(wǎng)頁的作，同時(shí)也使網(wǎng)頁的HTML文件龐大，造文件龐大，造成網(wǎng)頁傳輸和下載速度變慢。成網(wǎng)頁傳輸和下載速度變慢。 為了解決該問題，可以對(duì)頁面中經(jīng)常為了解決該問題，可以對(duì)頁面中經(jīng)常出現(xiàn)的相同或相近屬性的對(duì)象進(jìn)行整體屬出現(xiàn)的相同或相近屬性的對(duì)象進(jìn)行整體屬性的設(shè)置，即建立樣式表。性的設(shè)置，即建立樣式表

24、。1996年發(fā)明的年發(fā)明的層疊式樣式表（層疊式樣式表（Cascading Style Sheet，CSS）可以對(duì)頁面布局、背景、字體大小、）可以對(duì)頁面布局、背景、字體大小、顏色、表格等屬性進(jìn)行統(tǒng)一的設(shè)置，然后顏色、表格等屬性進(jìn)行統(tǒng)一的設(shè)置，然后再用于頁面各個(gè)相應(yīng)的對(duì)象。再用于頁面各個(gè)相應(yīng)的對(duì)象。4.2.2 操作過程操作過程1創(chuàng)建創(chuàng)建CSS樣式表樣式表（1）CSS樣式表編輯器樣式表編輯器 CSS樣式表可以對(duì)頁面布局、背景、樣式表可以對(duì)頁面布局、背景、字體大小、顏色和表格等屬性進(jìn)行統(tǒng)一的字體大小、顏色和表格等屬性進(jìn)行統(tǒng)一的設(shè)置，然后再應(yīng)用于頁面各個(gè)相應(yīng)的對(duì)象。設(shè)置，然后再應(yīng)用于頁面各個(gè)相應(yīng)的對(duì)象。

25、單擊單擊“窗口窗口”“CSS樣式樣式”菜單命令，菜單命令，彈出彈出“CSS樣式樣式”面板（也叫做面板（也叫做CSS樣式樣式表編輯器），如圖表編輯器），如圖4-2-2所示。其中各選項(xiàng)所示。其中各選項(xiàng)的作用如下。的作用如下。顯示窗口：顯示所有樣式表的名稱，顯示窗口：顯示所有樣式表的名稱，“（未定義樣式）（未定義樣式）”表示沒有樣式。表示沒有樣式。 “附加樣式表附加樣式表”按鈕按鈕 ：?jiǎn)螕羲?，可：?jiǎn)螕羲梢詮棾鲆粋€(gè)以彈出一個(gè)“鏈接外部樣式表鏈接外部樣式表”對(duì)話框，對(duì)話框，如圖如圖4-2-5所示。再單擊所示。再單擊“瀏覽瀏覽”按鈕，可按鈕，可彈出彈出“選擇樣式表文件選擇樣式表文件”對(duì)話框，用來導(dǎo)對(duì)話

26、框，用來導(dǎo)入外部的樣式表（文件的擴(kuò)展名為入外部的樣式表（文件的擴(kuò)展名為.CSS）。）。圖圖4-2-5 “鏈接外部樣式表鏈接外部樣式表”對(duì)話框?qū)υ捒?“新建新建CSS規(guī)則規(guī)則”按鈕（也叫做按鈕（也叫做“新建新建CSS樣式樣式”按鈕）按鈕） ：?jiǎn)螕羲?，可以彈出：?jiǎn)螕羲?，可以彈出一個(gè)一個(gè)“新建新建CSS規(guī)則規(guī)則”對(duì)話框，如圖對(duì)話框，如圖4-2-3所示。利用該對(duì)話框可以建立新的樣式。所示。利用該對(duì)話框可以建立新的樣式。 “編輯樣式編輯樣式”按鈕按鈕 ：在：在“CSS樣式樣式”面面板中選中一種樣式后，它才有效。單擊它，板中選中一種樣式后，它才有效。單擊它，可彈出一個(gè)能進(jìn)行樣式表編輯的對(duì)話框可彈出一個(gè)能進(jìn)

27、行樣式表編輯的對(duì)話框（例如（例如“.style1的的CSS規(guī)則定義規(guī)則定義”對(duì)話框，對(duì)話框，如圖如圖4-2-4所示），利用該對(duì)話框可以所示），利用該對(duì)話框可以對(duì)對(duì).style1樣式進(jìn)行編輯。樣式進(jìn)行編輯。“刪除刪除CSS規(guī)則規(guī)則”按鈕（也叫做按鈕（也叫做“刪除刪除CSS樣式樣式”按鈕）按鈕） ：?jiǎn)螕羲?，可以刪除：?jiǎn)螕羲?，可以刪除選中的樣式。選中的樣式。（2）創(chuàng)建）創(chuàng)建CSS樣式表樣式表打開如圖打開如圖4-2-3所示的所示的“新建新建CSS規(guī)則規(guī)則”對(duì)對(duì)話框，選中話框，選中“選擇器類型選擇器類型”欄內(nèi)的第欄內(nèi)的第1個(gè)單個(gè)單選項(xiàng)，在選項(xiàng)，在“名稱名稱”下拉列表框內(nèi)輸入一個(gè)下拉列表框內(nèi)輸入一個(gè)樣式表

28、的名字，名字必須以樣式表的名字，名字必須以“.”開始，例開始，例如，如，“.style1”。單擊該對(duì)話框中的。單擊該對(duì)話框中的“確定確定”按鈕，即可退出該對(duì)話框，彈出按鈕，即可退出該對(duì)話框，彈出“CSS規(guī)規(guī)則定義則定義”對(duì)話框，如圖對(duì)話框，如圖4-2-4所示。所示。利用利用“CSS規(guī)則定義規(guī)則定義”對(duì)話框進(jìn)行樣式表對(duì)話框進(jìn)行樣式表內(nèi)各個(gè)對(duì)象屬性的定義。內(nèi)各個(gè)對(duì)象屬性的定義。定義完成后，單擊定義完成后，單擊“確定確定”按鈕，即可按鈕，即可完成樣式表的定義。此時(shí)，在完成樣式表的定義。此時(shí)，在“CSS樣式樣式”面板內(nèi)會(huì)顯示出新創(chuàng)建的樣式表的名稱。面板內(nèi)會(huì)顯示出新創(chuàng)建的樣式表的名稱。（1）定義文字屬性

29、）定義文字屬性 單擊圖單擊圖4-2-4所示的所示的“CSS規(guī)則定義規(guī)則定義”對(duì)話框左邊對(duì)話框左邊“分類分類”欄內(nèi)的欄內(nèi)的“類型類型”選項(xiàng)，選項(xiàng)，此時(shí)的對(duì)話框如圖此時(shí)的對(duì)話框如圖4-2-4所示。利用該對(duì)話所示。利用該對(duì)話框可以設(shè)置框可以設(shè)置CSS樣式的字體、大小、樣式樣式的字體、大小、樣式和顏色等。單擊和顏色等。單擊“應(yīng)用應(yīng)用”按鈕，可將設(shè)置按鈕，可將設(shè)置的樣式應(yīng)用到頁面中。的樣式應(yīng)用到頁面中。（2）定義背景屬性）定義背景屬性 單擊圖單擊圖4-2-4所示對(duì)話框內(nèi)左邊所示對(duì)話框內(nèi)左邊“分類分類”欄內(nèi)的欄內(nèi)的“背景背景”選項(xiàng)，此時(shí)的選項(xiàng)，此時(shí)的“CSS規(guī)則規(guī)則定義定義”對(duì)話框內(nèi)的對(duì)話框內(nèi)的“背景背景

30、”欄如圖欄如圖4-2-6所所示。利用示。利用“背景背景”欄的欄的“背景顏色背景顏色”和和“背景圖像背景圖像”按鈕與文本框可以定義背景按鈕與文本框可以定義背景顏色和背景圖像。其他選項(xiàng)的作用如下。顏色和背景圖像。其他選項(xiàng)的作用如下。圖圖4-2-6 “背景背景”欄欄 “重復(fù)重復(fù)”下拉列表框：用來設(shè)置背景圖像下拉列表框：用來設(shè)置背景圖像的重復(fù)方式。它有的重復(fù)方式。它有4個(gè)選項(xiàng)：個(gè)選項(xiàng)：“不重復(fù)不重復(fù)”（只在左上角顯示一幅圖像）、（只在左上角顯示一幅圖像）、“重復(fù)重復(fù)”（沿水平與垂直方向重復(fù)）、（沿水平與垂直方向重復(fù)）、“橫向重復(fù)橫向重復(fù)”（沿水平方向重復(fù)）和（沿水平方向重復(fù)）和“縱向重復(fù)縱向重復(fù)”（沿

31、（沿垂直方向重復(fù)）。垂直方向重復(fù)）。 “附件附件”下拉列表框：設(shè)置圖像是否隨下拉列表框：設(shè)置圖像是否隨內(nèi)容的滾動(dòng)而滾動(dòng)。內(nèi)容的滾動(dòng)而滾動(dòng)。 “水平位置水平位置”和和“垂直位置垂直位置”下拉列表下拉列表框：用來設(shè)置圖像與選定對(duì)象的水平和垂框：用來設(shè)置圖像與選定對(duì)象的水平和垂直相對(duì)位置。如果選擇了直相對(duì)位置。如果選擇了“值值”選項(xiàng)，則選項(xiàng)，則其右邊的下拉列表框變?yōu)橛行В捎脕磉x其右邊的下拉列表框變?yōu)橛行?，可用來選擇單位。擇單位。（3）定義區(qū)塊屬性）定義區(qū)塊屬性 單擊圖單擊圖4-2-4所示對(duì)話框內(nèi)左邊所示對(duì)話框內(nèi)左邊“分類分類”欄內(nèi)的欄內(nèi)的“區(qū)塊區(qū)塊”選項(xiàng)，此時(shí)對(duì)話框內(nèi)的選項(xiàng)，此時(shí)對(duì)話框內(nèi)的“區(qū)塊區(qū)

32、塊”欄如圖欄如圖4-2-7所示。其中各選項(xiàng)的所示。其中各選項(xiàng)的作用如下。作用如下。 圖圖4-2-7 “區(qū)塊區(qū)塊”欄欄“單詞間距單詞間距”下拉列表框：用來設(shè)定單詞下拉列表框：用來設(shè)定單詞間距。選擇間距。選擇“值值”選項(xiàng)后，可以輸入數(shù)值，選項(xiàng)后，可以輸入數(shù)值，再在其右邊的下拉列表框內(nèi)選擇數(shù)值的單再在其右邊的下拉列表框內(nèi)選擇數(shù)值的單位。此處可以用負(fù)值。位。此處可以用負(fù)值。 “字母間距字母間距”下拉列表框：用來設(shè)定字下拉列表框：用來設(shè)定字母間距。選擇母間距。選擇“（值）（值）”選項(xiàng)后，可以輸選項(xiàng)后，可以輸入數(shù)值，再在其右邊的下拉列表框內(nèi)選擇入數(shù)值，再在其右邊的下拉列表框內(nèi)選擇數(shù)值的單位。此處可以用負(fù)值

33、。數(shù)值的單位。此處可以用負(fù)值。 “垂直對(duì)齊垂直對(duì)齊”下拉列表框：用它可以設(shè)下拉列表框：用它可以設(shè)置選中的對(duì)象相對(duì)于上級(jí)對(duì)象或相對(duì)所在置選中的對(duì)象相對(duì)于上級(jí)對(duì)象或相對(duì)所在行在垂直方向的對(duì)齊方式。行在垂直方向的對(duì)齊方式?！拔谋緦?duì)齊文本對(duì)齊”下拉列表框：用來設(shè)置首行下拉列表框：用來設(shè)置首行文字在對(duì)象中的對(duì)齊方式。文字在對(duì)象中的對(duì)齊方式。 “文字縮進(jìn)文字縮進(jìn)”文本框：用來輸入文字的文本框：用來輸入文字的縮進(jìn)量。縮進(jìn)量。 “空格空格”下拉列表框：用來設(shè)置文本空下拉列表框：用來設(shè)置文本空白的使用方式。它有白的使用方式。它有“正常正?！保▽⑺械模▽⑺械目瞻拙顫M）、空白均填滿）、“保留保留”（由用戶輸入

34、時(shí)（由用戶輸入時(shí)控制）和控制）和“不換行不換行”（在加入（在加入標(biāo)記時(shí)標(biāo)記時(shí)才換行）選項(xiàng)。才換行）選項(xiàng)。（4）定義方框?qū)傩裕┒x方框?qū)傩?單擊圖單擊圖4-2-4所示對(duì)話框內(nèi)左邊所示對(duì)話框內(nèi)左邊“分類分類”欄內(nèi)的欄內(nèi)的“方框方框”選項(xiàng)，此時(shí)的對(duì)話框內(nèi)右選項(xiàng)，此時(shí)的對(duì)話框內(nèi)右邊的邊的“方框方框”欄如圖欄如圖4-2-8所示。其中各選所示。其中各選項(xiàng)的作用如下。項(xiàng)的作用如下。圖圖4-2-8 “方框方框”欄欄“寬寬”和和“高高”下拉列表框：用來設(shè)置對(duì)下拉列表框：用來設(shè)置對(duì)象的寬度和高度。它們都有象的寬度和高度。它們都有“自動(dòng)自動(dòng)”（由（由對(duì)象自身大小決定）和對(duì)象自身大小決定）和“值值”（由輸入的（由輸入

35、的數(shù)值決定）數(shù)值決定）2個(gè)選項(xiàng)。在其右邊的下拉列表個(gè)選項(xiàng)。在其右邊的下拉列表框內(nèi)選擇數(shù)字的單位?？騼?nèi)選擇數(shù)字的單位。 “浮動(dòng)浮動(dòng)”下拉列表框：用來設(shè)置是否允下拉列表框：用來設(shè)置是否允許文字環(huán)繞在選中對(duì)象的周圍。許文字環(huán)繞在選中對(duì)象的周圍。 “清除清除”下拉列表框：用來設(shè)定其他對(duì)象下拉列表框：用來設(shè)定其他對(duì)象是否可以在選定對(duì)象的左右。是否可以在選定對(duì)象的左右。 “填充填充”欄：用來設(shè)置邊框與其中的內(nèi)欄：用來設(shè)置邊框與其中的內(nèi)容之間填充的空白間距，下拉列表框內(nèi)應(yīng)容之間填充的空白間距，下拉列表框內(nèi)應(yīng)輸入數(shù)值，在其右邊的下拉列表框內(nèi)選擇輸入數(shù)值，在其右邊的下拉列表框內(nèi)選擇數(shù)值的單位。數(shù)值的單位。 “邊

36、界邊界”欄：用來設(shè)置邊緣的空白寬度，欄：用來設(shè)置邊緣的空白寬度，下拉列表框內(nèi)可輸入數(shù)值或選擇下拉列表框內(nèi)可輸入數(shù)值或選擇“自動(dòng)自動(dòng)”。（5）定義邊框?qū)傩裕┒x邊框?qū)傩?單擊圖單擊圖4-2-4所示對(duì)話框內(nèi)左邊所示對(duì)話框內(nèi)左邊“分類分類”欄內(nèi)的欄內(nèi)的“邊框邊框”選項(xiàng)，此時(shí)對(duì)話框內(nèi)右邊選項(xiàng)，此時(shí)對(duì)話框內(nèi)右邊的的“邊框邊框”欄如圖欄如圖4-2-9所示。它用來對(duì)圍所示。它用來對(duì)圍繞所有對(duì)象的邊框?qū)傩赃M(jìn)行設(shè)置。繞所有對(duì)象的邊框?qū)傩赃M(jìn)行設(shè)置。圖圖4-2-9 “邊框邊框”欄欄設(shè)置邊框的寬度與顏色：該對(duì)話框內(nèi)有設(shè)置邊框的寬度與顏色：該對(duì)話框內(nèi)有4行選項(xiàng)，分別為上、右、下和左邊框。每行選項(xiàng)，分別為上、右、下和左邊

37、框。每行有行有3個(gè)下拉列表框和個(gè)下拉列表框和1個(gè)按鈕與文本框。個(gè)按鈕與文本框。第第1列的下拉列表框用來設(shè)置邊框的樣式，列的下拉列表框用來設(shè)置邊框的樣式，第第2列的下拉列表框用來設(shè)置邊框的寬度，列的下拉列表框用來設(shè)置邊框的寬度，第第3列的下拉列表框用來選擇數(shù)值的單位，列的下拉列表框用來選擇數(shù)值的單位，按鈕和后面的文本框用來設(shè)置邊框的顏色。按鈕和后面的文本框用來設(shè)置邊框的顏色。 邊框的寬度下拉列表框內(nèi)的選項(xiàng)有邊框的寬度下拉列表框內(nèi)的選項(xiàng)有4個(gè)，個(gè)，選擇選擇“值值”時(shí)，可以輸入邊框粗細(xì)的數(shù)值，時(shí)，可以輸入邊框粗細(xì)的數(shù)值，此時(shí)其右邊的下拉列表框變?yōu)橛行?，可以此時(shí)其右邊的下拉列表框變?yōu)橛行В梢赃x擇單位

38、。選擇單位。 “樣式樣式”下拉列表框：在此下拉列表框下拉列表框：在此下拉列表框中有中有9個(gè)選項(xiàng)。其中，個(gè)選項(xiàng)。其中，“無無”選項(xiàng)是取消邊選項(xiàng)是取消邊框，其他選項(xiàng)各對(duì)應(yīng)著一種不同的邊框?？?，其他選項(xiàng)各對(duì)應(yīng)著一種不同的邊框。邊框的最終顯示效果還與瀏覽器有關(guān)。邊框的最終顯示效果還與瀏覽器有關(guān)。（6）定義列表屬性）定義列表屬性 單擊圖單擊圖4-2-4所示對(duì)話框內(nèi)左邊所示對(duì)話框內(nèi)左邊“分類分類”欄內(nèi)的欄內(nèi)的“列表列表”選項(xiàng)，此時(shí)該對(duì)話框右邊選項(xiàng)，此時(shí)該對(duì)話框右邊的的“列表列表”欄如圖欄如圖4-2-10所示。其中各選所示。其中各選項(xiàng)的作用如下。項(xiàng)的作用如下。圖圖4-2-10 “列表列表”欄欄“類型類型”下

39、拉列表框：用來設(shè)置列表的標(biāo)下拉列表框：用來設(shè)置列表的標(biāo)記。選擇標(biāo)記是序號(hào)（有序列表）或符號(hào)記。選擇標(biāo)記是序號(hào)（有序列表）或符號(hào)（無序列表）。該下拉列表框內(nèi)有（無序列表）。該下拉列表框內(nèi)有9個(gè)選項(xiàng)，個(gè)選項(xiàng)，包括包括“圓點(diǎn)圓點(diǎn)”、“圓圈圓圈”等。等。 “項(xiàng)目符號(hào)圖像項(xiàng)目符號(hào)圖像”下拉列表框和按鈕：下拉列表框和按鈕：該下拉列表框內(nèi)有該下拉列表框內(nèi)有“無無”和和“（URL）”兩個(gè)選項(xiàng)。選擇兩個(gè)選項(xiàng)。選擇“無無”選項(xiàng)后，不加圖像選項(xiàng)后，不加圖像標(biāo)記；選擇標(biāo)記；選擇“（URL）”選項(xiàng)后，單擊選項(xiàng)后，單擊“瀏覽瀏覽”按鈕，打開按鈕，打開“選擇圖像源文件選擇圖像源文件”對(duì)話框，利用它可以選擇圖像，在列表行對(duì)話

40、框，利用它可以選擇圖像，在列表行加入小的圖標(biāo)圖案作為列表標(biāo)記。加入小的圖標(biāo)圖案作為列表標(biāo)記。 “位置位置”下拉列表框：用來設(shè)置列表標(biāo)下拉列表框：用來設(shè)置列表標(biāo)記的縮進(jìn)方式。記的縮進(jìn)方式。（7）定義定位屬性）定義定位屬性 單擊圖單擊圖4-2-4所示對(duì)話框內(nèi)左邊所示對(duì)話框內(nèi)左邊“分類分類”欄中的欄中的“定位定位”選項(xiàng)，此時(shí)該對(duì)話框內(nèi)右選項(xiàng)，此時(shí)該對(duì)話框內(nèi)右邊的邊的“定位定位”欄如圖欄如圖4-2-11所示。其中各所示。其中各選項(xiàng)的作用如下。選項(xiàng)的作用如下。圖圖4-2-11 “定位定位”欄欄“類型類型”下拉列表框：用來設(shè)置對(duì)象的位下拉列表框：用來設(shè)置對(duì)象的位置。各選項(xiàng)的作用如下。置。各選項(xiàng)的作用如下。

41、 “溢出溢出”下拉列表框：用來設(shè)置當(dāng)文字下拉列表框：用來設(shè)置當(dāng)文字超出其容器時(shí)的處理方式。各選項(xiàng)的作用超出其容器時(shí)的處理方式。各選項(xiàng)的作用如下。如下。（8）定義擴(kuò)展屬性）定義擴(kuò)展屬性 單擊圖單擊圖4-2-4所示對(duì)話框內(nèi)左邊所示對(duì)話框內(nèi)左邊“分類分類”欄內(nèi)的欄內(nèi)的“擴(kuò)展擴(kuò)展”選項(xiàng)，此時(shí)該對(duì)話框內(nèi)右選項(xiàng)，此時(shí)該對(duì)話框內(nèi)右邊的邊的“擴(kuò)展擴(kuò)展”欄如圖欄如圖4-2-12所示。該對(duì)話所示。該對(duì)話框中各選項(xiàng)的作用如下?？蛑懈鬟x項(xiàng)的作用如下。圖圖4-2-12 “擴(kuò)展擴(kuò)展”欄欄“分頁分頁”欄：用來在選定的對(duì)象的前面或欄：用來在選定的對(duì)象的前面或后面強(qiáng)制加入分頁符。一般瀏覽器均不支后面強(qiáng)制加入分頁符。一般瀏覽器均

42、不支持此項(xiàng)功能。該欄有持此項(xiàng)功能。該欄有“之前之前”和和“之后之后”兩個(gè)下拉列表框，其內(nèi)的選項(xiàng)有兩個(gè)下拉列表框，其內(nèi)的選項(xiàng)有“自動(dòng)自動(dòng)”、“總是總是”、“左對(duì)齊左對(duì)齊”和和“右對(duì)齊右對(duì)齊”，它，它們用來確定分頁符的位置。們用來確定分頁符的位置。 “視覺效果視覺效果”欄：利用該欄內(nèi)的下拉列表欄：利用該欄內(nèi)的下拉列表框的選項(xiàng)，可使頁面的顯示效果更好?？虻倪x項(xiàng)，可使頁面的顯示效果更好。 “光標(biāo)光標(biāo)”（即鼠標(biāo)指針）下拉列表框：（即鼠標(biāo)指針）下拉列表框：可以利用該下拉列表框中的選項(xiàng)設(shè)置各種可以利用該下拉列表框中的選項(xiàng)設(shè)置各種鼠標(biāo)的形狀。對(duì)于低版本的瀏覽器，不支鼠標(biāo)的形狀。對(duì)于低版本的瀏覽器，不支持此項(xiàng)功

43、能。持此項(xiàng)功能。 “過濾器過濾器”下拉列表框：用來對(duì)圖像進(jìn)下拉列表框：用來對(duì)圖像進(jìn)行濾鏡處理，獲得各種特殊的效果。行濾鏡處理，獲得各種特殊的效果。 定義了定義了CSS樣式后，可以將這些樣式后，可以將這些CSS樣式應(yīng)用于網(wǎng)頁中的文本、圖像、樣式應(yīng)用于網(wǎng)頁中的文本、圖像、Flash等等對(duì)象。具體的方法如下。對(duì)象。具體的方法如下。（1）利用）利用“CSS樣式樣式”面板面板 利用利用“CSS樣式樣式”面板將面板將CSS樣式應(yīng)樣式應(yīng)用于網(wǎng)頁中對(duì)象的方法如下。用于網(wǎng)頁中對(duì)象的方法如下。選中要應(yīng)用選中要應(yīng)用CSS樣式的對(duì)象，可以是文本、樣式的對(duì)象，可以是文本、圖像和圖像和Flash等對(duì)象。等對(duì)象。鼠標(biāo)右鍵單

44、擊鼠標(biāo)右鍵單擊“CSS樣式樣式”面板中相應(yīng)的面板中相應(yīng)的樣式名稱，彈出它的快捷菜單，再單擊該樣式名稱，彈出它的快捷菜單，再單擊該菜單中的菜單中的“套用套用”菜單命令。菜單命令。（2）利用）利用“屬性屬性”欄欄 利用利用“屬性屬性”欄將欄將CSS樣式應(yīng)用于網(wǎng)樣式應(yīng)用于網(wǎng)頁中對(duì)象的方法如下。頁中對(duì)象的方法如下。 選中要應(yīng)用選中要應(yīng)用CSS樣式的文本對(duì)象，在樣式的文本對(duì)象，在其其“屬性屬性”欄的欄的“樣式樣式”下拉列表框中選下拉列表框中選擇需要的擇需要的CSS樣式名稱，即可將選中的樣式名稱，即可將選中的CSS樣式應(yīng)用于選中的文本對(duì)象。樣式應(yīng)用于選中的文本對(duì)象。 選中要應(yīng)用選中要應(yīng)用CSS樣式的圖像或

45、樣式的圖像或Flash等等對(duì)象，在其對(duì)象，在其“屬性屬性”欄的欄的“類類”下拉列表下拉列表框中選擇需要的框中選擇需要的CSS樣式名稱，即可將選樣式名稱，即可將選中的中的CSS樣式應(yīng)用于選中的圖像或樣式應(yīng)用于選中的圖像或Flash等等對(duì)象。對(duì)象。4.3.1 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) “Word操作演示操作演示”網(wǎng)頁的顯示效果如網(wǎng)頁的顯示效果如圖圖4-3-1所示。所示。Flash是原是原Macromedia公司公司開發(fā)的另一個(gè)著名產(chǎn)品，它是一個(gè)優(yōu)秀的開發(fā)的另一個(gè)著名產(chǎn)品，它是一個(gè)優(yōu)秀的矢量繪圖和動(dòng)畫制作軟件。矢量繪圖和動(dòng)畫制作軟件。圖圖4-3-1 “Word操作演示操作演示”網(wǎng)頁的顯示效果網(wǎng)頁的顯示效果

46、Flash可以制作出一種擴(kuò)展名為可以制作出一種擴(kuò)展名為.swf的的動(dòng)畫文件，這種文件可以插入到動(dòng)畫文件，這種文件可以插入到HTML中，中，也可以單獨(dú)成為網(wǎng)頁。它不但可以制作出也可以單獨(dú)成為網(wǎng)頁。它不但可以制作出一般的動(dòng)畫，還可以制作出帶有背景聲音，一般的動(dòng)畫，還可以制作出帶有背景聲音，具有較強(qiáng)的交互性能的動(dòng)畫。具有較強(qiáng)的交互性能的動(dòng)畫。 Flash制作的這種動(dòng)畫可以在所有安裝制作的這種動(dòng)畫可以在所有安裝了了Shockwave Flash插件的瀏覽器中播放，插件的瀏覽器中播放，這也是它之所以快速廣泛流行的一個(gè)重要這也是它之所以快速廣泛流行的一個(gè)重要原因。原因。 另外，另外，1998年年Macro

47、media公司公布了公司公布了Flash動(dòng)畫格式文件的全部代碼，方便了眾動(dòng)畫格式文件的全部代碼，方便了眾多軟件開發(fā)公司和其設(shè)計(jì)人員用它開發(fā)相多軟件開發(fā)公司和其設(shè)計(jì)人員用它開發(fā)相關(guān)產(chǎn)品，從而加快了它的推廣與應(yīng)用。各關(guān)產(chǎn)品，從而加快了它的推廣與應(yīng)用。各個(gè)公司和個(gè)人推出的可以制作個(gè)公司和個(gè)人推出的可以制作.swf文件的文件的軟件越來越多。軟件越來越多。4.3.2 操作過程操作過程1Flash動(dòng)畫的動(dòng)畫的“屬性屬性”欄欄 Flash動(dòng)畫的動(dòng)畫的“屬性屬性”欄如圖欄如圖4-3-4所示，所示，前面沒有介紹的各選項(xiàng)的作用如下。前面沒有介紹的各選項(xiàng)的作用如下。圖圖4-3-4 Flash動(dòng)畫的動(dòng)畫的“屬性屬性”

48、欄欄“源文件源文件”文本框與文件夾按鈕文本框與文件夾按鈕 ：用：用來選擇來選擇FLA格式的格式的Flash影片源文件。影片源文件。 “編輯編輯”按鈕：?jiǎn)螕羲梢詮棾霭粹o：?jiǎn)螕羲?，可以彈出Flash 8，并對(duì)，并對(duì)Flash文件進(jìn)行編輯。文件進(jìn)行編輯。 “重設(shè)大小重設(shè)大小”按鈕：?jiǎn)螕羲?，可使按鈕：?jiǎn)螕羲墒笷lash影片恢復(fù)原大小。影片恢復(fù)原大小?！把h(huán)循環(huán)”復(fù)選框：選中它后，可循環(huán)播放。復(fù)選框：選中它后，可循環(huán)播放。 “自動(dòng)播放自動(dòng)播放”復(fù)選框：選中它后，可自復(fù)選框：選中它后，可自動(dòng)播放。動(dòng)播放。 “品質(zhì)品質(zhì)”下拉列表框：用來設(shè)置圖像的下拉列表框：用來設(shè)置圖像的質(zhì)量。質(zhì)量。 “比例比例”下

49、拉列表框：用來選擇縮放參下拉列表框：用來選擇縮放參數(shù)。數(shù)?！安迦氩迦隖lash按鈕按鈕”對(duì)話框如圖對(duì)話框如圖4-3-3所示，所示，其中各選項(xiàng)的含義如下。其中各選項(xiàng)的含義如下。 “范例范例”顯示框：用來顯示所選的顯示框：用來顯示所選的“Flash按鈕按鈕”的效果，這里的顯示效果和的效果，這里的顯示效果和在瀏覽器中的顯示效果相同，并且可以用在瀏覽器中的顯示效果相同，并且可以用鼠標(biāo)測(cè)試鼠標(biāo)測(cè)試“單擊單擊”時(shí)的顯示效果。時(shí)的顯示效果。 “樣式樣式”列表框：該列表框中列出所有可列表框：該列表框中列出所有可以使用的以使用的Flash按鈕的樣式，可以從里面選按鈕的樣式，可以從里面選擇相應(yīng)的樣式進(jìn)行編輯。擇相

50、應(yīng)的樣式進(jìn)行編輯。 “字體字體”下拉列表框：用來選擇文本的下拉列表框：用來選擇文本的字體。字體。 “大小大小”文本框：設(shè)置顯示文本的大小。文本框：設(shè)置顯示文本的大小?！版溄渔溄印蔽谋究颍涸谖谋究蛑休斎胄枰溛谋究颍涸谖谋究蛑休斎胄枰溄拥奈募夸浐臀募部梢詥螕艚拥奈募夸浐臀募?，也可以單擊“瀏瀏覽覽”按鈕，彈出按鈕，彈出“選擇文件選擇文件”對(duì)話框，在對(duì)話框，在該對(duì)話框中選擇需要鏈接的文件，設(shè)置鏈該對(duì)話框中選擇需要鏈接的文件，設(shè)置鏈接。接。 “目標(biāo)目標(biāo)”下拉列表框：用來設(shè)置鏈接的下拉列表框：用來設(shè)置鏈接的網(wǎng)頁的打開方式，其中各選項(xiàng)作用如下：網(wǎng)頁的打開方式，其中各選項(xiàng)作用如下： “背景色背

51、景色”按鈕：用來設(shè)置按鈕：用來設(shè)置Flash按鈕的背按鈕的背景顏色。景顏色。 “另存為另存為”文本框：用來輸入要保存到文本框：用來輸入要保存到的目錄及文件名，或單擊的目錄及文件名，或單擊“瀏覽瀏覽”按鈕，按鈕，彈出彈出“選擇文件選擇文件”對(duì)話框，利用它選擇要對(duì)話框，利用它選擇要保存的路徑和文件名，默認(rèn)目錄為網(wǎng)頁文保存的路徑和文件名，默認(rèn)目錄為網(wǎng)頁文檔所在的目錄。檔所在的目錄。（1）單擊）單擊“插入插入”（常用）欄中的（常用）欄中的“媒體媒體”快捷菜單中的快捷菜單中的“Flash文本文本”按鈕按鈕 ，彈出，彈出“插入插入Flash文本文本”對(duì)對(duì)話框，如圖話框，如圖4-3-2所示。所示。（2）在）

52、在“插入插入Flash文本文本”對(duì)話框中對(duì)話框中進(jìn)行文字各種屬性的設(shè)置后，在進(jìn)行文字各種屬性的設(shè)置后，在“文文本本”文本框中輸入文字；在文本框中輸入文字；在“目標(biāo)目標(biāo)”文本框中輸入要鏈接的文件；在文本框中輸入要鏈接的文件；在“另另存為存為”文本框中輸入存儲(chǔ)的文件名稱。文本框中輸入存儲(chǔ)的文件名稱。然后單擊然后單擊“確定確定”按鈕，即可在網(wǎng)頁按鈕，即可在網(wǎng)頁中插入中插入Flash文本。文本。（1）單擊）單擊“插入插入”（常用）欄中的（常用）欄中的“媒體媒體”快捷菜單中的快捷菜單中的“Flash Video”按鈕按鈕 ，彈出，彈出“插入插入Flash視頻視頻”對(duì)話框，如圖對(duì)話框，如圖4-3-5左圖所

53、示（還沒有左圖所示（還沒有設(shè)置）。設(shè)置）。圖圖4-3-5 “插入插入Flash視頻視頻”對(duì)話框設(shè)置對(duì)話框設(shè)置（2）在）在“視頻類型視頻類型”下拉列表框內(nèi)選下拉列表框內(nèi)選擇一種下載視頻的類型，選擇擇一種下載視頻的類型，選擇“流視流視頻頻”選項(xiàng)后的選項(xiàng)后的“插入插入Flash視頻視頻”對(duì)話對(duì)話框如圖框如圖4-3-5右圖所示。此處選擇右圖所示。此處選擇“累累進(jìn)式下載進(jìn)式下載”選項(xiàng)。選項(xiàng)。（3）單擊）單擊“URL”欄的欄的“瀏覽瀏覽”按鈕，按鈕，彈出彈出“選擇文件選擇文件”對(duì)話框，如圖對(duì)話框，如圖4-3-6所示。利用該對(duì)話框選擇一個(gè)所示。利用該對(duì)話框選擇一個(gè)Flash視視頻文件（擴(kuò)展名為頻文件（擴(kuò)展名

54、為.FLV）。）。圖圖4-3-6 “選擇文件選擇文件”對(duì)話框?qū)υ捒颍?）在）在“外觀外觀”下拉列表框內(nèi)選擇下拉列表框內(nèi)選擇一種播放器的樣式。在它下邊的顯示一種播放器的樣式。在它下邊的顯示框內(nèi)可以看到選中的播放器的外觀圖框內(nèi)可以看到選中的播放器的外觀圖像。像。（5）在）在“寬度寬度”和和“高度高度”文本框文本框內(nèi)分別輸入視頻的寬度和高度，單位內(nèi)分別輸入視頻的寬度和高度，單位像素。像素。（6）選中）選中“限制寬高比限制寬高比”、“自動(dòng)自動(dòng)播放播放”和和“自動(dòng)重新播放自動(dòng)重新播放”復(fù)選框。復(fù)選框。 設(shè)置完后，單擊設(shè)置完后，單擊“確定確定”按鈕，即可按鈕，即可在網(wǎng)頁光標(biāo)處插入一個(gè)在網(wǎng)頁光標(biāo)處插入一個(gè)F

55、lash視頻，如圖視頻，如圖4-3-7所示。所示。圖圖4-3-7 網(wǎng)頁編輯狀態(tài)下的網(wǎng)頁編輯狀態(tài)下的Flash視頻視頻 在本節(jié)在本節(jié)“操作過程操作過程”中已經(jīng)介紹了一中已經(jīng)介紹了一種插入種插入Flash動(dòng)畫的方法。另外，采用下述動(dòng)畫的方法。另外，采用下述方法也可以插入方法也可以插入Flash動(dòng)畫。動(dòng)畫。（1）單擊）單擊“插入插入”（常用）欄中的（常用）欄中的“媒體媒體”快捷菜單中的快捷菜單中的“FlashPaper”按鈕按鈕 ，彈出，彈出“插入插入FlashPaper”對(duì)對(duì)話框，如圖話框，如圖4-3-8所示。所示。圖圖4-3-8 “插入插入FlashPaper”對(duì)話框?qū)υ捒颍?）單擊）單擊“瀏覽

56、瀏覽”按鈕，可彈出按鈕，可彈出“選擇文件選擇文件”對(duì)話框，如圖對(duì)話框，如圖4-3-6所示。所示。在在“選擇文件選擇文件”對(duì)話框中選擇要導(dǎo)入對(duì)話框中選擇要導(dǎo)入的的SWF文件，單擊文件，單擊“確定確定”按鈕，回按鈕，回到到“插入插入FlashPaper”對(duì)話框。對(duì)話框。（3）在）在“插入插入FlashPaper”對(duì)話框內(nèi)對(duì)話框內(nèi)的的2個(gè)文本框中輸入高度與寬度數(shù)值，個(gè)文本框中輸入高度與寬度數(shù)值，再單擊再單擊“確定確定”按鈕，也可以導(dǎo)入按鈕，也可以導(dǎo)入Flash動(dòng)畫文件。動(dòng)畫文件。4.4.1 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) “電子市場(chǎng)圖片秀電子市場(chǎng)圖片秀”網(wǎng)頁的顯示效果網(wǎng)頁的顯示效果如圖如圖4-4-1所示。在該網(wǎng)頁

57、中，使用了所示。在該網(wǎng)頁中，使用了Java Applet特效實(shí)現(xiàn)網(wǎng)頁中不同圖像的動(dòng)態(tài)切特效實(shí)現(xiàn)網(wǎng)頁中不同圖像的動(dòng)態(tài)切換效果。換效果。圖圖4-4-1 “電子市場(chǎng)圖片秀電子市場(chǎng)圖片秀”網(wǎng)頁的顯示效果網(wǎng)頁的顯示效果 Java是個(gè)面向網(wǎng)絡(luò)的程序設(shè)計(jì)語言，是個(gè)面向網(wǎng)絡(luò)的程序設(shè)計(jì)語言，用來讓程序員創(chuàng)建應(yīng)用程序，用它可以編用來讓程序員創(chuàng)建應(yīng)用程序，用它可以編寫許多動(dòng)人的動(dòng)畫，在寫許多動(dòng)人的動(dòng)畫，在Internet上應(yīng)用。這上應(yīng)用。這些應(yīng)用程序可以通過網(wǎng)絡(luò)下載，而且可在些應(yīng)用程序可以通過網(wǎng)絡(luò)下載，而且可在任何計(jì)算平臺(tái)上安全地運(yùn)行。如果再加上任何計(jì)算平臺(tái)上安全地運(yùn)行。如果再加上萬維網(wǎng)和公司內(nèi)部網(wǎng)體系，將會(huì)擁有一

58、個(gè)萬維網(wǎng)和公司內(nèi)部網(wǎng)體系，將會(huì)擁有一個(gè)標(biāo)準(zhǔn)的網(wǎng)絡(luò)計(jì)算環(huán)境。標(biāo)準(zhǔn)的網(wǎng)絡(luò)計(jì)算環(huán)境。 Java作為一個(gè)分布式的、面向?qū)ο蟮淖鳛橐粋€(gè)分布式的、面向?qū)ο蟮某绦蛟O(shè)計(jì)語言，可以讓位于任何地方的任程序設(shè)計(jì)語言，可以讓位于任何地方的任何計(jì)算機(jī)應(yīng)用網(wǎng)絡(luò)上的應(yīng)用程序。何計(jì)算機(jī)應(yīng)用網(wǎng)絡(luò)上的應(yīng)用程序。4.4.2 操作過程操作過程1插入插入Java Applet Applet是是Java的小型應(yīng)用程序。的小型應(yīng)用程序。Java Applet可以嵌入到可以嵌入到HTML程序中，通過主程序中，通過主頁發(fā)布到頁發(fā)布到Internet上?？梢詮木W(wǎng)上下載上?？梢詮木W(wǎng)上下載Java Applet程序文件及有關(guān)文件，存放在本地程序文件

59、及有關(guān)文件，存放在本地站點(diǎn)的一個(gè)子目錄下。站點(diǎn)的一個(gè)子目錄下。（1）插入）插入Applet的方法的方法 單擊單擊“插入插入”（常用）面板中的（常用）面板中的“媒體媒體”快捷菜單中的快捷菜單中的“Applet”按按鈕鈕 ，即可彈出，即可彈出“選擇文件選擇文件”對(duì)話框。對(duì)話框。利用該對(duì)話框可以調(diào)入擴(kuò)展名為利用該對(duì)話框可以調(diào)入擴(kuò)展名為“.class”的的Java Applet程序文件。程序文件。 使用使用Java Applet程序時(shí)應(yīng)閱讀程序時(shí)應(yīng)閱讀Java Applet程序作者給出的說明，再按照說明程序作者給出的說明，再按照說明進(jìn)行操作。進(jìn)行操作。 插入文件后，網(wǎng)頁文檔窗口內(nèi)會(huì)顯示插入文件后，網(wǎng)頁文檔窗口內(nèi)會(huì)顯示一個(gè)一個(gè)Java Applet圖標(biāo)。單擊選中它后，可圖標(biāo)。單擊選中它后，可以用鼠標(biāo)拖曳插件圖標(biāo)的黑色控制柄，來以用鼠標(biāo)拖曳插件圖標(biāo)的黑色控制柄，來調(diào)整它