表單樣式表與網(wǎng)頁(yè)中的其他對(duì)象(共146張PPT)

表單樣式表與網(wǎng)頁(yè)中的其他對(duì)象第一頁(yè)，共146頁(yè)。4.1【案例11】“電腦配置調(diào)查表”網(wǎng)頁(yè)4.1.1學(xué)習(xí)目標(biāo)

“電腦配置調(diào)查表”網(wǎng)頁(yè)的顯示效果如圖4-1-1所示。在該網(wǎng)頁(yè)中，以表單的方式列出了電腦主要配件的調(diào)查信息，只需在頁(yè)面中按照提示進(jìn)行選擇或輸入后，單擊“提交”按鈕，即可將網(wǎng)頁(yè)中的信息提交到服務(wù)器的數(shù)據(jù)庫(kù)中。第二頁(yè)，共146頁(yè)。圖4-1-1“電腦配置調(diào)查表”網(wǎng)頁(yè)的顯示效果

第三頁(yè)，共146頁(yè)。表單是用戶利用瀏覽器對(duì)Web站點(diǎn)數(shù)據(jù)庫(kù)進(jìn)行查詢和添加的一種界面，用戶利用表單可以輸入信息或選擇選項(xiàng)等，然后將這些信息提交給服務(wù)器進(jìn)行處理，這種查詢方式叫做交互的或者雙向的。這些表單對(duì)象包括文本域、下拉列表框、復(fù)選框和單選按鈕等。第四頁(yè)，共146頁(yè)。表單對(duì)象是讓用戶輸入信息的地方，表單域是放置表單對(duì)象的區(qū)域，只有表單域內(nèi)的表單對(duì)象，才可以將它的信息傳送出去。4.1.2操作過(guò)程第五頁(yè)，共146頁(yè)。1．創(chuàng)建表單域和插入表單對(duì)象（1）創(chuàng)建與刪除表單域創(chuàng)建表單域：將光標(biāo)移到要插入表單域的位置，單擊“插入”（表單）欄內(nèi)的“表單”按鈕，即可在網(wǎng)頁(yè)編輯窗口內(nèi)創(chuàng)建一個(gè)表單域，如圖4-1-2所示。4.1.3相關(guān)知識(shí)第六頁(yè)，共146頁(yè)。圖4-1-2創(chuàng)建的表單域

第七頁(yè)，共146頁(yè)。單擊表單域內(nèi)部，將光標(biāo)移到表單域內(nèi)，按回車(chē)鍵，即可將表單域調(diào)大。按BackSpace鍵，可使表單域縮小。表單域在瀏覽器內(nèi)是看不到的。第八頁(yè)，共146頁(yè)。顯示表單域：在表單域創(chuàng)建后，若看不到表單域的矩形紅線，可以單擊選中“查看”→“可視化助理”→“不可見(jiàn)元素”菜單命令，即可將表單域的矩形紅線顯示出來(lái)。刪除表單域：?jiǎn)螕舯韱斡虻倪吘€處，選中表單域，按Delete鍵，即可刪除表單域。第九頁(yè)，共146頁(yè)。（2）設(shè)置表單域的屬性選中表單域，此時(shí)表單域“屬性”欄如圖4-1-3所示。第十頁(yè)，共146頁(yè)。圖4-1-3表單域“屬性”欄第十一頁(yè)，共146頁(yè)。

“表單名稱(chēng)”文本框：在該文本框內(nèi)，輸入表單域的名字。表單域的名字可用于JavaScript和VBScript等腳本語(yǔ)言中，這些腳本語(yǔ)言可以控制表單域的屬性。

“動(dòng)作”文本框和按鈕：利用它們可以輸入腳本程序或含有腳本程序的HTML文件。第十二頁(yè)，共146頁(yè)。

“方法”下拉列表框：用來(lái)選擇客戶端與服務(wù)器之間傳送數(shù)據(jù)采用的方式。3個(gè)選項(xiàng)是“默認(rèn)”、“GET”（獲得，即追加表單值到URL，并發(fā)送服務(wù)器GET請(qǐng)求）和“POST”（傳遞，在消息正文中發(fā)送表單的值，并發(fā)送服務(wù)器POST請(qǐng)求）。

第十三頁(yè)，共146頁(yè)?！邦?lèi)”下拉列表框：其中有“重命名”、“管理樣式”和創(chuàng)建的CSS樣式名稱(chēng)等多個(gè)選項(xiàng)，可以用來(lái)選擇CSS樣式、給CSS樣式更名和創(chuàng)建新的CSS樣式等。第十四頁(yè)，共146頁(yè)。（3）插入表單對(duì)象的方法將光標(biāo)移到要插入表單對(duì)象的表單中，再插入表單對(duì)象。插入表單對(duì)象的方法與插入表單的方法一樣。第十五頁(yè)，共146頁(yè)。將光標(biāo)移到要插入表單對(duì)象的位置，然后單擊“插入”（表單）欄中的相應(yīng)按鈕，即可在光標(biāo)處插入一個(gè)相應(yīng)的表單對(duì)象。另外，單擊“插入”→“表單”菜單命令，彈出它的下一級(jí)菜單。第十六頁(yè)，共146頁(yè)。根據(jù)要插入的表單對(duì)象類(lèi)別，單擊菜單內(nèi)的菜單命令也可插入表單對(duì)象。表單對(duì)象的“屬性”欄中都有一個(gè)名稱(chēng)文本框，用來(lái)輸入表單對(duì)象的名稱(chēng)，該名稱(chēng)可在程序中使用，以指定表單對(duì)象。第十七頁(yè)，共146頁(yè)。（1）文本域?qū)傩缘脑O(shè)置：文本域也叫做文本字段，表單中經(jīng)常使用文本域。它可以是單行，也可以是多行，用于接收文本、數(shù)字和字符。文本域的“屬性”欄如圖4-1-4所示，各選項(xiàng)的作用如下。2．表單對(duì)象第十八頁(yè)，共146頁(yè)。圖4-1-4文本域的“屬性”欄第十九頁(yè)，共146頁(yè)?！白址麑挾取蔽谋究颍何谋居虻膶挾?，即可顯示字符的最多個(gè)數(shù)。第二十頁(yè)，共146頁(yè)。

“類(lèi)型”欄：該欄有3個(gè)單選項(xiàng)，用來(lái)選擇“單行”、“多行”或“密碼”文本域。密碼文本域的特點(diǎn)是：當(dāng)用戶輸入文字時(shí)，密碼文本域內(nèi)顯示的不是這些文字，而是一行“*”。選擇“多行”單選項(xiàng)時(shí)，其“屬性”欄會(huì)發(fā)生變化：“初始值”文本框變?yōu)閹L動(dòng)條的多行文本框，同時(shí)“換行”下拉列表框變?yōu)橛行?，“字符寬度”文本框變?yōu)椤靶袛?shù)”文本框，用來(lái)輸入文本框的行數(shù)。第二十一頁(yè)，共146頁(yè)。“初始值”文本框：用來(lái)輸入文本框的初始內(nèi)容。

“換行”下拉列表框：只有在選擇了“多行”類(lèi)型后它才有效?！皳Q行”下拉列表框內(nèi)有4個(gè)選項(xiàng)，它們的含義如下。第二十二頁(yè)，共146頁(yè)?！澳J(rèn)”：采用瀏覽器的默認(rèn)值。

“關(guān)”：當(dāng)輸入的文字超過(guò)文本框的寬度時(shí)不換行，但是會(huì)出現(xiàn)滾動(dòng)條。

“虛擬”：當(dāng)輸入文字超過(guò)文本框?qū)挾葧r(shí)會(huì)自動(dòng)換行，向服務(wù)器傳輸數(shù)據(jù)時(shí)無(wú)回車(chē)符。

“實(shí)體”：當(dāng)輸入的文字超過(guò)文本框的寬度時(shí)，會(huì)自動(dòng)加入回車(chē)符并換行。第二十三頁(yè)，共146頁(yè)。（2）復(fù)選框?qū)傩缘脑O(shè)置：復(fù)選框有選中和未選中兩種狀態(tài)，多個(gè)復(fù)選框允許多選。它的“屬性”欄如圖4-1-5所示，各選項(xiàng)的作用如下。第二十四頁(yè)，共146頁(yè)。圖4-1-5復(fù)選框的“屬性”欄

第二十五頁(yè)，共146頁(yè)。

“選定值”文本框：用來(lái)輸入復(fù)選框選中時(shí)的數(shù)值，通常為1或0。

“初始狀態(tài)”欄：它有兩個(gè)單選項(xiàng)，用來(lái)設(shè)置復(fù)選框的初始狀態(tài)。第二十六頁(yè)，共146頁(yè)。（3）單選按鈕屬性的設(shè)置：?jiǎn)芜x按鈕也叫做單選項(xiàng)，一組單選按鈕中同一時(shí)間只允許選中一個(gè)，它的“屬性”欄如圖4-1-6所示。該“屬性”欄中的選項(xiàng)與復(fù)選框“屬性”欄中相應(yīng)選項(xiàng)的作用一樣。第二十七頁(yè)，共146頁(yè)。圖4-1-6單選按鈕的“屬性”欄第二十八頁(yè)，共146頁(yè)。（4）單選按鈕組屬性的設(shè)置：?jiǎn)芜x按鈕組也叫做單選項(xiàng)組。單擊“插入”（表單）欄中的“單選按鈕組”按鈕，可彈出“單選按鈕組”對(duì)話框，如圖4-1-7所示。第二十九頁(yè)，共146頁(yè)。圖4-1-7“單選按鈕組”對(duì)話框

第三十頁(yè)，共146頁(yè)。利用該對(duì)話框可以設(shè)置單選按鈕組中單選按鈕的個(gè)數(shù)、名稱(chēng)和初始值。如果要增加選項(xiàng)，可單擊按鈕；如果要?jiǎng)h除選項(xiàng)，可選中要?jiǎng)h除的選項(xiàng)，再單擊按鈕。如果要調(diào)整選項(xiàng)的顯示次序，可選中要移動(dòng)的選項(xiàng)，再單擊或按鈕。單選按鈕組的“屬性”欄如圖4-1-6所示。第三十一頁(yè)，共146頁(yè)。（5）按鈕屬性的設(shè)置：按鈕用來(lái)制作“提交”和“重置”按鈕，還可以調(diào)用函數(shù)，它的“屬性”欄如圖4-1-8所示，各選項(xiàng)的作用如下。第三十二頁(yè)，共146頁(yè)。

“標(biāo)簽”文本框：用來(lái)輸入按鈕上的文字。

“動(dòng)作”欄：它有3個(gè)單選項(xiàng)，用來(lái)選擇單擊該選項(xiàng)后引起的動(dòng)作類(lèi)型。

“提交表單”：選中它后，可以向服務(wù)器提交整個(gè)表單。

第三十三頁(yè)，共146頁(yè)?！爸卦O(shè)表單”：選中它后，可以取消前面的輸入，復(fù)位表單。

“無(wú)”：選中它后，表示是一般按鈕，可用來(lái)調(diào)用腳本程序。第三十四頁(yè)，共146頁(yè)。圖4-1-8按鈕的“屬性”欄第三十五頁(yè)，共146頁(yè)。（6）列表/菜單屬性的設(shè)置：列表/菜單的作用是將一些選項(xiàng)放在一個(gè)帶滾動(dòng)條的列表框內(nèi)，它的“屬性”欄如圖4-1-9所示，各選項(xiàng)的作用如下。第三十六頁(yè)，共146頁(yè)。圖4-1-9列表/菜單的“屬性”欄第三十七頁(yè)，共146頁(yè)?！邦?lèi)型”欄：它有“菜單”和“列表”兩個(gè)單選項(xiàng)?！安藛巍本褪窍吕斜砜?；選擇“列表”選項(xiàng)后，其右邊的各選項(xiàng)會(huì)變?yōu)榭蛇x項(xiàng)，此時(shí)的列表框右邊會(huì)產(chǎn)生滾動(dòng)條。

“高度”文本框：用來(lái)輸入列表的高度值，即可以顯示的行數(shù)。第三十八頁(yè)，共146頁(yè)。

“選定范圍”復(fù)選框：選中它后，表示列表中的各選項(xiàng)可以同時(shí)選擇多項(xiàng)。

“初始化時(shí)選定”列表框：用來(lái)設(shè)置第一次彈出該菜單時(shí)，菜單中默認(rèn)的選中項(xiàng)。

第三十九頁(yè)，共146頁(yè)?！傲斜碇怠卑粹o：?jiǎn)螕粼摪粹o，可彈出一個(gè)“列表值”對(duì)話框，與圖4-1-7相似，使用方法基本相同。利用該對(duì)話框可以輸入菜單或列表內(nèi)顯示的選項(xiàng)內(nèi)容（在“標(biāo)簽”欄內(nèi)），以及輸入此選項(xiàng)提交后的返回值（在“值”欄內(nèi)）。第四十頁(yè)，共146頁(yè)。（7）跳轉(zhuǎn)菜單屬性的設(shè)置：跳轉(zhuǎn)菜單采用下拉列表框的方式來(lái)實(shí)現(xiàn)鏈接跳轉(zhuǎn)，其外觀與列表/菜單一樣，是菜單的另外一種形式。用戶單擊該菜單的某一個(gè)選項(xiàng)時(shí)，當(dāng)前頁(yè)面或框架會(huì)跳轉(zhuǎn)到其他的頁(yè)面。創(chuàng)建跳轉(zhuǎn)菜單的操作方法如下。第四十一頁(yè)，共146頁(yè)。單擊“跳轉(zhuǎn)菜單”按鈕，屏幕會(huì)彈出一個(gè)“插入跳轉(zhuǎn)菜單”對(duì)話框，如圖4-1-10所示。在“文本”文本框內(nèi)輸入菜單命令的說(shuō)明文字，在“菜單項(xiàng)”列表框內(nèi)會(huì)隨之顯示出來(lái)。其中各選項(xiàng)的作用如下。第四十二頁(yè)，共146頁(yè)。 、、和按鈕的作用與圖4-1-7所示按鈕的作用一樣。在“選擇時(shí)，轉(zhuǎn)到URL”文本框內(nèi)輸入要跳轉(zhuǎn)的文件路徑與文件名字。也可以單擊“瀏覽”按鈕，彈出“選擇文件”對(duì)話框，選擇鏈接的文件。第四十三頁(yè)，共146頁(yè)。在“打開(kāi)URL于”下拉列表框內(nèi)選擇在何處打開(kāi)文件。在“菜單名稱(chēng)”文本框內(nèi)輸入跳轉(zhuǎn)菜單的名稱(chēng)。第四十四頁(yè)，共146頁(yè)。“選項(xiàng)”欄有兩個(gè)復(fù)選框。選中“菜單之后插入前往按鈕”復(fù)選框后，在菜單的右邊會(huì)增加一個(gè)“前往”按鈕。選中“更改URL后選擇第一個(gè)項(xiàng)目”復(fù)選框后，可設(shè)置跳轉(zhuǎn)后重新定義菜單第一個(gè)選項(xiàng)為默認(rèn)選項(xiàng)。第四十五頁(yè)，共146頁(yè)。單擊“確定”按鈕，可退出該對(duì)話框，頁(yè)面會(huì)顯示一個(gè)跳轉(zhuǎn)菜單。按照?qǐng)D4-1-10所示進(jìn)行設(shè)置后，瀏覽器中顯示的跳轉(zhuǎn)菜單如圖4-1-11所示。第四十六頁(yè)，共146頁(yè)。圖4-1-10“插入跳轉(zhuǎn)菜單”對(duì)話框

第四十七頁(yè)，共146頁(yè)。圖4-1-11在頁(yè)面內(nèi)的跳轉(zhuǎn)菜單第四十八頁(yè)，共146頁(yè)。選中創(chuàng)建的跳轉(zhuǎn)菜單后，其“屬性”欄與圖4-1-9基本一樣。第四十九頁(yè)，共146頁(yè)。4.2.1學(xué)習(xí)目標(biāo)

“硬盤(pán)的性能指標(biāo)”網(wǎng)頁(yè)的顯示效果如圖4-2-1所示。在該網(wǎng)頁(yè)中，使用樣式表對(duì)其中的文字進(jìn)行樣式設(shè)置。4.2【案例12】“硬盤(pán)的性能指標(biāo)”網(wǎng)頁(yè)第五十頁(yè)，共146頁(yè)。圖4-2-1“硬盤(pán)的性能指標(biāo)”網(wǎng)頁(yè)的顯示效果第五十一頁(yè)，共146頁(yè)。在以前各章節(jié)中，對(duì)頁(yè)面對(duì)象的各種屬性都是一個(gè)一個(gè)獨(dú)立設(shè)置的，例如，選中本章案例中的標(biāo)題文字，將它選中并復(fù)制到剪貼板中，再粘貼到記事本中，可得到它的HTML標(biāo)識(shí)語(yǔ)句：<fontface="黑體"size="24"color="#0000FF"><b>電腦配置調(diào)查表</b></font>第五十二頁(yè)，共146頁(yè)?？梢钥闯觯瑢?duì)于文字“電腦配置調(diào)查表”的字體、大小、顏色等屬性在該HTML語(yǔ)句中進(jìn)行了定義。如果網(wǎng)頁(yè)中有許多處的文字都采用同樣的屬性設(shè)置，那么每處文字也都需要進(jìn)行相同的屬性設(shè)置，這無(wú)疑會(huì)給網(wǎng)頁(yè)制作帶來(lái)許多重復(fù)性的工作，同時(shí)也使網(wǎng)頁(yè)的HTML文件龐大，造成網(wǎng)頁(yè)傳輸和下載速度變慢。第五十三頁(yè)，共146頁(yè)。為了解決該問(wèn)題，可以對(duì)頁(yè)面中經(jīng)常出現(xiàn)的相同或相近屬性的對(duì)象進(jìn)行整體屬性的設(shè)置，即建立樣式表。1996年發(fā)明的層疊式樣式表（CascadingStyleSheet，CSS）可以對(duì)頁(yè)面布局、背景、字體大小、顏色、表格等屬性進(jìn)行統(tǒng)一的設(shè)置，然后再用于頁(yè)面各個(gè)相應(yīng)的對(duì)象。4.2.2操作過(guò)程第五十四頁(yè)，共146頁(yè)。1．創(chuàng)建CSS樣式表（1）CSS樣式表編輯器

CSS樣式表可以對(duì)頁(yè)面布局、背景、字體大小、顏色和表格等屬性進(jìn)行統(tǒng)一的設(shè)置，然后再應(yīng)用于頁(yè)面各個(gè)相應(yīng)的對(duì)象。單擊“窗口”→“CSS樣式”菜單命令，彈出“CSS樣式”面板（也叫做CSS樣式表編輯器），如圖4-2-2所示。其中各選項(xiàng)的作用如下。4.2.3相關(guān)知識(shí)第五十五頁(yè)，共146頁(yè)。顯示窗口：顯示所有樣式表的名稱(chēng)，“（未定義樣式）”表示沒(méi)有樣式。

“附加樣式表”按鈕：?jiǎn)螕羲?，可以彈出一個(gè)“鏈接外部樣式表”對(duì)話框，如圖4-2-5所示。再單擊“瀏覽”按鈕，可彈出“選擇樣式表文件”對(duì)話框，用來(lái)導(dǎo)入外部的樣式表（文件的擴(kuò)展名為.CSS）。第五十六頁(yè)，共146頁(yè)。圖4-2-5“鏈接外部樣式表”對(duì)話框

第五十七頁(yè)，共146頁(yè)。

“新建CSS規(guī)則”按鈕（也叫做“新建CSS樣式”按鈕）：?jiǎn)螕羲?，可以彈出一個(gè)“新建CSS規(guī)則”對(duì)話框，如圖4-2-3所示。利用該對(duì)話框可以建立新的樣式。第五十八頁(yè)，共146頁(yè)?！熬庉嫎邮健卑粹o：在“CSS樣式”面板中選中一種樣式后，它才有效。單擊它，可彈出一個(gè)能進(jìn)行樣式表編輯的對(duì)話框（例如“.style1的CSS規(guī)則定義”對(duì)話框，如圖4-2-4所示），利用該對(duì)話框可以對(duì).style1樣式進(jìn)行編輯。第五十九頁(yè)，共146頁(yè)。“刪除CSS規(guī)則”按鈕（也叫做“刪除CSS樣式”按鈕）：?jiǎn)螕羲?，可以刪除選中的樣式。第六十頁(yè)，共146頁(yè)。（2）創(chuàng)建CSS樣式表打開(kāi)如圖4-2-3所示的“新建CSS規(guī)則”對(duì)話框，選中“選擇器類(lèi)型”欄內(nèi)的第1個(gè)單選項(xiàng)，在“名稱(chēng)”下拉列表框內(nèi)輸入一個(gè)樣式表的名字，名字必須以“.”開(kāi)始，例如，“.style1”。單擊該對(duì)話框中的“確定”按鈕，即可退出該對(duì)話框，彈出“CSS規(guī)則定義”對(duì)話框，如圖4-2-4所示。第六十一頁(yè)，共146頁(yè)。利用“CSS規(guī)則定義”對(duì)話框進(jìn)行樣式表內(nèi)各個(gè)對(duì)象屬性的定義。定義完成后，單擊“確定”按鈕，即可完成樣式表的定義。此時(shí)，在“CSS樣式”面板內(nèi)會(huì)顯示出新創(chuàng)建的樣式表的名稱(chēng)。第六十二頁(yè)，共146頁(yè)。（1）定義文字屬性單擊圖4-2-4所示的“CSS規(guī)則定義”對(duì)話框左邊“分類(lèi)”欄內(nèi)的“類(lèi)型”選項(xiàng)，此時(shí)的對(duì)話框如圖4-2-4所示。利用該對(duì)話框可以設(shè)置CSS樣式的字體、大小、樣式和顏色等。單擊“應(yīng)用”按鈕，可將設(shè)置的樣式應(yīng)用到頁(yè)面中。2．定義CSS樣式表第六十三頁(yè)，共146頁(yè)。（2）定義背景屬性單擊圖4-2-4所示對(duì)話框內(nèi)左邊“分類(lèi)”欄內(nèi)的“背景”選項(xiàng)，此時(shí)的“CSS規(guī)則定義”對(duì)話框內(nèi)的“背景”欄如圖4-2-6所示。利用“背景”欄的“背景顏色”和“背景圖像”按鈕與文本框可以定義背景顏色和背景圖像。其他選項(xiàng)的作用如下。第六十四頁(yè)，共146頁(yè)。圖4-2-6“背景”欄

第六十五頁(yè)，共146頁(yè)。

“重復(fù)”下拉列表框：用來(lái)設(shè)置背景圖像的重復(fù)方式。它有4個(gè)選項(xiàng)：“不重復(fù)”（只在左上角顯示一幅圖像）、“重復(fù)”（沿水平與垂直方向重復(fù)）、“橫向重復(fù)”（沿水平方向重復(fù)）和“縱向重復(fù)”（沿垂直方向重復(fù)）。第六十六頁(yè)，共146頁(yè)。

“附件”下拉列表框：設(shè)置圖像是否隨內(nèi)容的滾動(dòng)而滾動(dòng)。

“水平位置”和“垂直位置”下拉列表框：用來(lái)設(shè)置圖像與選定對(duì)象的水平和垂直相對(duì)位置。如果選擇了“值”選項(xiàng)，則其右邊的下拉列表框變?yōu)橛行?，可用?lái)選擇單位。第六十七頁(yè)，共146頁(yè)。（3）定義區(qū)塊屬性單擊圖4-2-4所示對(duì)話框內(nèi)左邊“分類(lèi)”欄內(nèi)的“區(qū)塊”選項(xiàng)，此時(shí)對(duì)話框內(nèi)的“區(qū)塊”欄如圖4-2-7所示。其中各選項(xiàng)的作用如下。第六十八頁(yè)，共146頁(yè)。圖4-2-7“區(qū)塊”欄第六十九頁(yè)，共146頁(yè)。“單詞間距”下拉列表框：用來(lái)設(shè)定單詞間距。選擇“值”選項(xiàng)后，可以輸入數(shù)值，再在其右邊的下拉列表框內(nèi)選擇數(shù)值的單位。此處可以用負(fù)值。第七十頁(yè)，共146頁(yè)。

“字母間距”下拉列表框：用來(lái)設(shè)定字母間距。選擇“（值）”選項(xiàng)后，可以輸入數(shù)值，再在其右邊的下拉列表框內(nèi)選擇數(shù)值的單位。此處可以用負(fù)值。

“垂直對(duì)齊”下拉列表框：用它可以設(shè)置選中的對(duì)象相對(duì)于上級(jí)對(duì)象或相對(duì)所在行在垂直方向的對(duì)齊方式。第七十一頁(yè)，共146頁(yè)?！拔谋緦?duì)齊”下拉列表框：用來(lái)設(shè)置首行文字在對(duì)象中的對(duì)齊方式。

“文字縮進(jìn)”文本框：用來(lái)輸入文字的縮進(jìn)量。

“空格”下拉列表框：用來(lái)設(shè)置文本空白的使用方式。它有“正?！保▽⑺械目瞻拙顫M）、“保留”（由用戶輸入時(shí)控制）和“不換行”（在加入<BR>標(biāo)記時(shí)才換行）選項(xiàng)。第七十二頁(yè)，共146頁(yè)。（4）定義方框?qū)傩詥螕魣D4-2-4所示對(duì)話框內(nèi)左邊“分類(lèi)”欄內(nèi)的“方框”選項(xiàng)，此時(shí)的對(duì)話框內(nèi)右邊的“方框”欄如圖4-2-8所示。其中各選項(xiàng)的作用如下。第七十三頁(yè)，共146頁(yè)。圖4-2-8“方框”欄第七十四頁(yè)，共146頁(yè)。“寬”和“高”下拉列表框：用來(lái)設(shè)置對(duì)象的寬度和高度。它們都有“自動(dòng)”（由對(duì)象自身大小決定）和“值”（由輸入的數(shù)值決定）2個(gè)選項(xiàng)。在其右邊的下拉列表框內(nèi)選擇數(shù)字的單位。

“浮動(dòng)”下拉列表框：用來(lái)設(shè)置是否允許文字環(huán)繞在選中對(duì)象的周?chē)?/p>

第七十五頁(yè)，共146頁(yè)?！扒宄毕吕斜砜颍河脕?lái)設(shè)定其他對(duì)象是否可以在選定對(duì)象的左右。

“填充”欄：用來(lái)設(shè)置邊框與其中的內(nèi)容之間填充的空白間距，下拉列表框內(nèi)應(yīng)輸入數(shù)值，在其右邊的下拉列表框內(nèi)選擇數(shù)值的單位。

“邊界”欄：用來(lái)設(shè)置邊緣的空白寬度，下拉列表框內(nèi)可輸入數(shù)值或選擇“自動(dòng)”。第七十六頁(yè)，共146頁(yè)。（5）定義邊框?qū)傩詥螕魣D4-2-4所示對(duì)話框內(nèi)左邊“分類(lèi)”欄內(nèi)的“邊框”選項(xiàng)，此時(shí)對(duì)話框內(nèi)右邊的“邊框”欄如圖4-2-9所示。它用來(lái)對(duì)圍繞所有對(duì)象的邊框?qū)傩赃M(jìn)行設(shè)置。第七十七頁(yè)，共146頁(yè)。圖4-2-9“邊框”欄第七十八頁(yè)，共146頁(yè)。設(shè)置邊框的寬度與顏色：該對(duì)話框內(nèi)有4行選項(xiàng)，分別為上、右、下和左邊框。每行有3個(gè)下拉列表框和1個(gè)按鈕與文本框。第1列的下拉列表框用來(lái)設(shè)置邊框的樣式，第2列的下拉列表框用來(lái)設(shè)置邊框的寬度，第3列的下拉列表框用來(lái)選擇數(shù)值的單位，按鈕和后面的文本框用來(lái)設(shè)置邊框的顏色。第七十九頁(yè)，共146頁(yè)。邊框的寬度下拉列表框內(nèi)的選項(xiàng)有4個(gè)，選擇“值”時(shí)，可以輸入邊框粗細(xì)的數(shù)值，此時(shí)其右邊的下拉列表框變?yōu)橛行В梢赃x擇單位。

“樣式”下拉列表框：在此下拉列表框中有9個(gè)選項(xiàng)。其中，“無(wú)”選項(xiàng)是取消邊框，其他選項(xiàng)各對(duì)應(yīng)著一種不同的邊框。邊框的最終顯示效果還與瀏覽器有關(guān)。第八十頁(yè)，共146頁(yè)。（6）定義列表屬性單擊圖4-2-4所示對(duì)話框內(nèi)左邊“分類(lèi)”欄內(nèi)的“列表”選項(xiàng)，此時(shí)該對(duì)話框右邊的“列表”欄如圖4-2-10所示。其中各選項(xiàng)的作用如下。第八十一頁(yè)，共146頁(yè)。圖4-2-10“列表”欄第八十二頁(yè)，共146頁(yè)。“類(lèi)型”下拉列表框：用來(lái)設(shè)置列表的標(biāo)記。選擇標(biāo)記是序號(hào)（有序列表）或符號(hào)（無(wú)序列表）。該下拉列表框內(nèi)有9個(gè)選項(xiàng)，包括“圓點(diǎn)”、“圓圈”等。第八十三頁(yè)，共146頁(yè)。

“項(xiàng)目符號(hào)圖像”下拉列表框和按鈕：該下拉列表框內(nèi)有“無(wú)”和“（URL）”兩個(gè)選項(xiàng)。選擇“無(wú)”選項(xiàng)后，不加圖像標(biāo)記；選擇“（URL）”選項(xiàng)后，單擊“瀏覽”按鈕，打開(kāi)“選擇圖像源文件”對(duì)話框，利用它可以選擇圖像，在列表行加入小的圖標(biāo)圖案作為列表標(biāo)記。

“位置”下拉列表框：用來(lái)設(shè)置列表標(biāo)記的縮進(jìn)方式。第八十四頁(yè)，共146頁(yè)。（7）定義定位屬性單擊圖4-2-4所示對(duì)話框內(nèi)左邊“分類(lèi)”欄中的“定位”選項(xiàng)，此時(shí)該對(duì)話框內(nèi)右邊的“定位”欄如圖4-2-11所示。其中各選項(xiàng)的作用如下。第八十五頁(yè)，共146頁(yè)。圖4-2-11“定位”欄第八十六頁(yè)，共146頁(yè)?！邦?lèi)型”下拉列表框：用來(lái)設(shè)置對(duì)象的位置。各選項(xiàng)的作用如下。“絕對(duì)”：以頁(yè)面左上角的坐標(biāo)為基點(diǎn)?！跋鄬?duì)”：以母體左上角的坐標(biāo)為基點(diǎn)?！办o態(tài)”：按文本正常順序定位，一般與“相對(duì)”定位一樣。第八十七頁(yè)，共146頁(yè)?！帮@示”下拉列表框：用來(lái)設(shè)置對(duì)象的可視性。各選項(xiàng)的作用如下?！袄^承”：選中的對(duì)象繼承其母體的可視性?！翱梢?jiàn)”：選中的對(duì)象是可視的?！半[藏”：選中的對(duì)象是隱藏的。第八十八頁(yè)，共146頁(yè)?！癦軸”下拉列表框：用來(lái)設(shè)置不同層的對(duì)象的顯示次序。它有“自動(dòng)”（按原顯示次序）和“值”2個(gè)選項(xiàng)。選擇“值”選項(xiàng)后，可輸入數(shù)值，其數(shù)值越大，越在上邊顯示。第八十九頁(yè)，共146頁(yè)。

“溢出”下拉列表框：用來(lái)設(shè)置當(dāng)文字超出其容器時(shí)的處理方式。各選項(xiàng)的作用如下?！翱梢?jiàn)”：當(dāng)文字超出其容器時(shí)仍然可以顯示?！半[藏”：當(dāng)文字超出其容器時(shí)，超出的內(nèi)容不能顯示。第九十頁(yè)，共146頁(yè)?！皾L動(dòng)”：在母體加一個(gè)滾動(dòng)條，可利用滾動(dòng)條滾動(dòng)顯示母體中的文字。“自動(dòng)”：當(dāng)文本超出容器時(shí)，自動(dòng)加入一個(gè)滾動(dòng)條?！岸ㄎ弧睓冢河脕?lái)設(shè)置放置對(duì)象的容器的大小和位置。“剪輯”欄：用來(lái)設(shè)定對(duì)象溢出母體容器部分的剪切方式。第九十一頁(yè)，共146頁(yè)。（8）定義擴(kuò)展屬性單擊圖4-2-4所示對(duì)話框內(nèi)左邊“分類(lèi)”欄內(nèi)的“擴(kuò)展”選項(xiàng)，此時(shí)該對(duì)話框內(nèi)右邊的“擴(kuò)展”欄如圖4-2-12所示。該對(duì)話框中各選項(xiàng)的作用如下。第九十二頁(yè)，共146頁(yè)。圖4-2-12“擴(kuò)展”欄第九十三頁(yè)，共146頁(yè)?！胺猪?yè)”欄：用來(lái)在選定的對(duì)象的前面或后面強(qiáng)制加入分頁(yè)符。一般瀏覽器均不支持此項(xiàng)功能。該欄有“之前”和“之后”兩個(gè)下拉列表框，其內(nèi)的選項(xiàng)有“自動(dòng)”、“總是”、“左對(duì)齊”和“右對(duì)齊”，它們用來(lái)確定分頁(yè)符的位置。

第九十四頁(yè)，共146頁(yè)?！耙曈X(jué)效果”欄：利用該欄內(nèi)的下拉列表框的選項(xiàng)，可使頁(yè)面的顯示效果更好。

“光標(biāo)”（即鼠標(biāo)指針）下拉列表框：可以利用該下拉列表框中的選項(xiàng)設(shè)置各種鼠標(biāo)的形狀。對(duì)于低版本的瀏覽器，不支持此項(xiàng)功能。

“過(guò)濾器”下拉列表框：用來(lái)對(duì)圖像進(jìn)行濾鏡處理，獲得各種特殊的效果。第九十五頁(yè)，共146頁(yè)。定義了CSS樣式后，可以將這些CSS樣式應(yīng)用于網(wǎng)頁(yè)中的文本、圖像、Flash等對(duì)象。具體的方法如下。（1）利用“CSS樣式”面板利用“CSS樣式”面板將CSS樣式應(yīng)用于網(wǎng)頁(yè)中對(duì)象的方法如下。3．應(yīng)用CSS樣式第九十六頁(yè)，共146頁(yè)。選中要應(yīng)用CSS樣式的對(duì)象，可以是文本、圖像和Flash等對(duì)象。鼠標(biāo)右鍵單擊“CSS樣式”面板中相應(yīng)的樣式名稱(chēng)，彈出它的快捷菜單，再單擊該菜單中的“套用”菜單命令。第九十七頁(yè)，共146頁(yè)。（2）利用“屬性”欄利用“屬性”欄將CSS樣式應(yīng)用于網(wǎng)頁(yè)中對(duì)象的方法如下。選中要應(yīng)用CSS樣式的文本對(duì)象，在其“屬性”欄的“樣式”下拉列表框中選擇需要的CSS樣式名稱(chēng)，即可將選中的CSS樣式應(yīng)用于選中的文本對(duì)象。第九十八頁(yè)，共146頁(yè)。選中要應(yīng)用CSS樣式的圖像或Flash等對(duì)象，在其“屬性”欄的“類(lèi)”下拉列表框中選擇需要的CSS樣式名稱(chēng)，即可將選中的CSS樣式應(yīng)用于選中的圖像或Flash等對(duì)象。第九十九頁(yè)，共146頁(yè)。4.3.1學(xué)習(xí)目標(biāo)

“Word操作演示”網(wǎng)頁(yè)的顯示效果如圖4-3-1所示。Flash是原Macromedia公司開(kāi)發(fā)的另一個(gè)著名產(chǎn)品，它是一個(gè)優(yōu)秀的矢量繪圖和動(dòng)畫(huà)制作軟件。4.3【案例13】“Word操作演示”網(wǎng)頁(yè)第一百頁(yè)，共146頁(yè)。圖4-3-1“Word操作演示”網(wǎng)頁(yè)的顯示效果第一百零一頁(yè)，共146頁(yè)。

Flash可以制作出一種擴(kuò)展名為.swf的動(dòng)畫(huà)文件，這種文件可以插入到HTML中，也可以單獨(dú)成為網(wǎng)頁(yè)。它不但可以制作出一般的動(dòng)畫(huà)，還可以制作出帶有背景聲音，具有較強(qiáng)的交互性能的動(dòng)畫(huà)。第一百零二頁(yè)，共146頁(yè)。

Flash制作的這種動(dòng)畫(huà)可以在所有安裝了ShockwaveFlash插件的瀏覽器中播放，這也是它之所以快速?gòu)V泛流行的一個(gè)重要原因。第一百零三頁(yè)，共146頁(yè)。另外，1998年Macromedia公司公布了Flash動(dòng)畫(huà)格式文件的全部代碼，方便了眾多軟件開(kāi)發(fā)公司和其設(shè)計(jì)人員用它開(kāi)發(fā)相關(guān)產(chǎn)品，從而加快了它的推廣與應(yīng)用。各個(gè)公司和個(gè)人推出的可以制作.swf文件的軟件越來(lái)越多。4.3.2操作過(guò)程第一百零四頁(yè)，共146頁(yè)。1．Flash動(dòng)畫(huà)的“屬性”欄

Flash動(dòng)畫(huà)的“屬性”欄如圖4-3-4所示，前面沒(méi)有介紹的各選項(xiàng)的作用如下。4.3.3相關(guān)知識(shí)第一百零五頁(yè)，共146頁(yè)。圖4-3-4Flash動(dòng)畫(huà)的“屬性”欄第一百零六頁(yè)，共146頁(yè)?！霸次募蔽谋究蚺c文件夾按鈕：用來(lái)選擇FLA格式的Flash影片源文件。

“編輯”按鈕：?jiǎn)螕羲梢詮棾鯢lash8，并對(duì)Flash文件進(jìn)行編輯。

“重設(shè)大小”按鈕：?jiǎn)螕羲?，可使Flash影片恢復(fù)原大小。第一百零七頁(yè)，共146頁(yè)?！把h(huán)”復(fù)選框：選中它后，可循環(huán)播放。

“自動(dòng)播放”復(fù)選框：選中它后，可自動(dòng)播放。

“品質(zhì)”下拉列表框：用來(lái)設(shè)置圖像的質(zhì)量。

“比例”下拉列表框：用來(lái)選擇縮放參數(shù)。第一百零八頁(yè)，共146頁(yè)?！安迦隖lash按鈕”對(duì)話框如圖4-3-3所示，其中各選項(xiàng)的含義如下。

“范例”顯示框：用來(lái)顯示所選的“Flash按鈕”的效果，這里的顯示效果和在瀏覽器中的顯示效果相同，并且可以用鼠標(biāo)測(cè)試“單擊”時(shí)的顯示效果。

2．“插入Flash按鈕”對(duì)話框第一百零九頁(yè)，共146頁(yè)?！皹邮健绷斜砜颍涸摿斜砜蛑辛谐鏊锌梢允褂玫腇lash按鈕的樣式，可以從里面選擇相應(yīng)的樣式進(jìn)行編輯。

“字體”下拉列表框：用來(lái)選擇文本的字體。

“大小”文本框：設(shè)置顯示文本的大小。第一百一十頁(yè)，共146頁(yè)?！版溄印蔽谋究颍涸谖谋究蛑休斎胄枰溄拥奈募夸浐臀募?，也可以單擊“瀏覽”按鈕，彈出“選擇文件”對(duì)話框，在該對(duì)話框中選擇需要鏈接的文件，設(shè)置鏈接。

“目標(biāo)”下拉列表框：用來(lái)設(shè)置鏈接的網(wǎng)頁(yè)的打開(kāi)方式，其中各選項(xiàng)作用如下：第一百一十一頁(yè)，共146頁(yè)。_blank：在一個(gè)新的瀏覽器窗口中打開(kāi)鏈接的文檔。_parent：在框架的父框架或父窗口中打開(kāi)鏈接的文檔。_self：默認(rèn)打開(kāi)方式，將鏈接的文檔載入鏈接所在的同一框架或窗口。_top：將鏈接的文檔載入整個(gè)瀏覽器窗口，從而刪除所有框架。第一百一十二頁(yè)，共146頁(yè)?！氨尘吧卑粹o：用來(lái)設(shè)置Flash按鈕的背景顏色。

“另存為”文本框：用來(lái)輸入要保存到的目錄及文件名，或單擊“瀏覽”按鈕，彈出“選擇文件”對(duì)話框，利用它選擇要保存的路徑和文件名，默認(rèn)目錄為網(wǎng)頁(yè)文檔所在的目錄。第一百一十三頁(yè)，共146頁(yè)。（1）單擊“插入”（常用）欄中的“媒體”快捷菜單中的“Flash文本”按鈕，彈出“插入Flash文本”對(duì)話框，如圖4-3-2所示。3．插入Flash文本第一百一十四頁(yè)，共146頁(yè)。（2）在“插入Flash文本”對(duì)話框中進(jìn)行文字各種屬性的設(shè)置后，在“文本”文本框中輸入文字；在“目標(biāo)”文本框中輸入要鏈接的文件；在“另存為”文本框中輸入存儲(chǔ)的文件名稱(chēng)。然后單擊“確定”按鈕，即可在網(wǎng)頁(yè)中插入Flash文本。第一百一十五頁(yè)，共146頁(yè)。（1）單擊“插入”（常用）欄中的“媒體”快捷菜單中的“FlashVideo”按鈕，彈出“插入Flash視頻”對(duì)話框，如圖4-3-5左圖所示（還沒(méi)有設(shè)置）。4．插入Flash視頻第一百一十六頁(yè)，共146頁(yè)。圖4-3-5“插入Flash視頻”對(duì)話框設(shè)置第一百一十七頁(yè)，共146頁(yè)。（2）在“視頻類(lèi)型”下拉列表框內(nèi)選擇一種下載視頻的類(lèi)型，選擇“流視頻”選項(xiàng)后的“插入Flash視頻”對(duì)話框如圖4-3-5右圖所示。此處選擇“累進(jìn)式下載”選項(xiàng)。（3）單擊“URL”欄的“瀏覽”按鈕，彈出“選擇文件”對(duì)話框，如圖4-3-6所示。利用該對(duì)話框選擇一個(gè)Flash視頻文件（擴(kuò)展名為.FLV）。第一百一十八頁(yè)，共146頁(yè)。圖4-3-6“選擇文件”對(duì)話框第一百一十九頁(yè)，共146頁(yè)。（4）在“外觀”下拉列表框內(nèi)選擇一種播放器的樣式。在它下邊的顯示框內(nèi)可以看到選中的播放器的外觀圖像。（5）在“寬度”和“高度”文本框內(nèi)分別輸入視頻的寬度和高度，單位像素。第一百二十頁(yè)，共146頁(yè)?！霸次募蔽谋究蚺c文件夾按鈕：用來(lái)選擇FLA格式的Flash影片源文件。該“屬性”欄中的選項(xiàng)與復(fù)選框“屬性”欄中相應(yīng)選項(xiàng)的作用一樣。swf的動(dòng)畫(huà)文件，這種文件可以插入到HTML中，也可以單獨(dú)成為網(wǎng)頁(yè)。第一百二十八頁(yè)，共146頁(yè)。第十七頁(yè)，共146頁(yè)?！熬幪?hào)”文本框：輸入ActiveX的ID參數(shù)?！熬庉嫎邮健卑粹o：在“CSS樣式”面板中選中一種樣式后，它才有效。圖4-3-5“插入Flash視頻”對(duì)話框設(shè)置“標(biāo)簽”文本框：用來(lái)輸入按鈕上的文字。圖4-1-3表單域“屬性”欄利用該對(duì)話框可以調(diào)入擴(kuò)展名為“.“顯示”下拉列表框：用來(lái)設(shè)置對(duì)象的可視性。第三十四頁(yè)，共146頁(yè)?！盎贰蔽谋究颍狠斎爰虞d的ActiveX控件的URL。選中“菜單之后插入前往按鈕”復(fù)選框后，在菜單的右邊會(huì)增加一個(gè)“前往”按鈕。第五十七頁(yè)，共146頁(yè)。（6）選中“限制寬高比”、“自動(dòng)播放”和“自動(dòng)重新播放”復(fù)選框。設(shè)置完后，單擊“確定”按鈕，即可在網(wǎng)頁(yè)光標(biāo)處插入一個(gè)Flash視頻，如圖4-3-7所示。第一百二十一頁(yè)，共146頁(yè)。圖4-3-7網(wǎng)頁(yè)編輯狀態(tài)下的Flash視頻第一百二十二頁(yè)，共146頁(yè)。在本節(jié)“操作過(guò)程”中已經(jīng)介紹了一種插入Flash動(dòng)畫(huà)的方法。另外，采用下述方法也可以插入Flash動(dòng)畫(huà)。5．插入Flash動(dòng)畫(huà)第一百二十三頁(yè)，共146頁(yè)。（1）單擊“插入”（常用）欄中的“媒體”快捷菜單中的“FlashPaper”按鈕，彈出“插入FlashPaper”對(duì)話框，如圖4-3-8所示。第一百二十四頁(yè)，共146頁(yè)。圖4-3-8“插入FlashPaper”對(duì)話框第一百二十五頁(yè)，共146頁(yè)。（2）單擊“瀏覽”按鈕，可彈出“選擇文件”對(duì)話框，如圖4-3-6所示。在“選擇文件”對(duì)話框中選擇要導(dǎo)入的SWF文件，單擊“確定”按鈕，回到“插入FlashPaper”對(duì)話框。（3）在“插入FlashPaper”對(duì)話框內(nèi)的2個(gè)文本框中輸入高度與寬度數(shù)值，再單擊“確定”按鈕，也可以導(dǎo)入Flash動(dòng)畫(huà)文件。第一百二十六頁(yè)，共146頁(yè)。4.4.1學(xué)習(xí)目標(biāo)

“電子市場(chǎng)圖片秀”網(wǎng)頁(yè)的顯示效果如圖4-4-1所示。在該網(wǎng)頁(yè)中，使用了JavaApplet特效實(shí)現(xiàn)網(wǎng)頁(yè)中不同圖像的動(dòng)態(tài)切換效果。4.4【案例14】“電子市場(chǎng)圖片秀”網(wǎng)頁(yè)第一百二十七頁(yè)，共146頁(yè)。圖4-4-1“電子市場(chǎng)圖片秀”網(wǎng)頁(yè)的顯示效果第一百二十八頁(yè)，共146頁(yè)。

Java是個(gè)面向網(wǎng)絡(luò)的程序設(shè)計(jì)語(yǔ)言，用來(lái)讓程序員創(chuàng)建應(yīng)用程序，用它可以編寫(xiě)許多動(dòng)人的動(dòng)畫(huà)，在Internet上應(yīng)用。這些應(yīng)用程序可以通過(guò)網(wǎng)絡(luò)下載，而且可在任何計(jì)算平臺(tái)上安全地運(yùn)行。如果再加上萬(wàn)維網(wǎng)和公司內(nèi)部網(wǎng)體系，將會(huì)擁有一個(gè)標(biāo)準(zhǔn)的網(wǎng)絡(luò)計(jì)算環(huán)境。第一百二十九頁(yè)，共146頁(yè)。

Java作為一個(gè)分布式的、面向?qū)ο蟮某绦蛟O(shè)計(jì)語(yǔ)言，可以讓位于任何地方的任何計(jì)算機(jī)應(yīng)用網(wǎng)絡(luò)上的應(yīng)用程序。4.4.2操作過(guò)程第一百三十頁(yè)，共146頁(yè)。1．插入JavaAppletApplet是Java的小型應(yīng)用程序。JavaApplet可以嵌入到HTML程序中，通過(guò)主頁(yè)發(fā)布到Internet上?？梢詮木W(wǎng)上下載JavaApplet程序文件及有關(guān)文件，存放在本地站點(diǎn)的一個(gè)子目錄下。4.4.3相關(guān)知識(shí)第一百三十一頁(yè)，共146頁(yè)。（1）插入Applet的方法單擊“插入”（常用）面板中的“媒體”快捷菜單中的“Applet”按鈕，即可彈出“選擇文件”對(duì)話框。利用該對(duì)話框可以調(diào)入擴(kuò)展名為“.class”的JavaApplet程序文件。第一百三十二頁(yè)，共146頁(yè)。使用JavaApplet程序時(shí)應(yīng)閱讀JavaApplet程序作者給出的說(shuō)明，再按照說(shuō)明進(jìn)行操作。插入文件后，網(wǎng)頁(yè)文檔窗口內(nèi)會(huì)顯示一個(gè)JavaApplet圖標(biāo)。單擊選中它后，可以用鼠標(biāo)拖曳插件圖標(biāo)的黑色控制柄，來(lái)調(diào)整它的大小。第一百三十三頁(yè)，共146頁(yè)。（2）A