表單樣式表與網(wǎng)頁中的其他對象

表單樣式表與網(wǎng)頁中的其他對象第1頁，課件共146頁，創(chuàng)作于2023年2月4.1【案例11】“電腦配置調(diào)查表”網(wǎng)頁4.1.1學(xué)習(xí)目標(biāo)

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

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

第7頁，課件共146頁，創(chuàng)作于2023年2月單擊表單域內(nèi)部，將光標(biāo)移到表單域內(nèi)，按回車鍵，即可將表單域調(diào)大。按BackSpace鍵，可使表單域縮小。表單域在瀏覽器內(nèi)是看不到的。第8頁，課件共146頁，創(chuàng)作于2023年2月顯示表單域：在表單域創(chuàng)建后，若看不到表單域的矩形紅線，可以單擊選中“查看”→“可視化助理”→“不可見元素”菜單命令，即可將表單域的矩形紅線顯示出來。刪除表單域：單擊表單域的邊線處，選中表單域，按Delete鍵，即可刪除表單域。第9頁，課件共146頁，創(chuàng)作于2023年2月（2）設(shè)置表單域的屬性選中表單域，此時表單域“屬性”欄如圖4-1-3所示。第10頁，課件共146頁，創(chuàng)作于2023年2月圖4-1-3表單域“屬性”欄第11頁，課件共146頁，創(chuàng)作于2023年2月

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

“動作”文本框和按鈕：利用它們可以輸入腳本程序或含有腳本程序的HTML文件。第12頁，課件共146頁，創(chuàng)作于2023年2月

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

第13頁，課件共146頁，創(chuàng)作于2023年2月“類”下拉列表框：其中有“重命名”、“管理樣式”和創(chuàng)建的CSS樣式名稱等多個選項，可以用來選擇CSS樣式、給CSS樣式更名和創(chuàng)建新的CSS樣式等。第14頁，課件共146頁，創(chuàng)作于2023年2月（3）插入表單對象的方法將光標(biāo)移到要插入表單對象的表單中，再插入表單對象。插入表單對象的方法與插入表單的方法一樣。第15頁，課件共146頁，創(chuàng)作于2023年2月將光標(biāo)移到要插入表單對象的位置，然后單擊“插入”（表單）欄中的相應(yīng)按鈕，即可在光標(biāo)處插入一個相應(yīng)的表單對象。另外，單擊“插入”→“表單”菜單命令，彈出它的下一級菜單。第16頁，課件共146頁，創(chuàng)作于2023年2月根據(jù)要插入的表單對象類別，單擊菜單內(nèi)的菜單命令也可插入表單對象。表單對象的“屬性”欄中都有一個名稱文本框，用來輸入表單對象的名稱，該名稱可在程序中使用，以指定表單對象。第17頁，課件共146頁，創(chuàng)作于2023年2月（1）文本域?qū)傩缘脑O(shè)置：文本域也叫做文本字段，表單中經(jīng)常使用文本域。它可以是單行，也可以是多行，用于接收文本、數(shù)字和字符。文本域的“屬性”欄如圖4-1-4所示，各選項的作用如下。2．表單對象第18頁，課件共146頁，創(chuàng)作于2023年2月圖4-1-4文本域的“屬性”欄第19頁，課件共146頁，創(chuàng)作于2023年2月“字符寬度”文本框：文本域的寬度，即可顯示字符的最多個數(shù)。第20頁，課件共146頁，創(chuàng)作于2023年2月

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

“換行”下拉列表框：只有在選擇了“多行”類型后它才有效。“換行”下拉列表框內(nèi)有4個選項，它們的含義如下。第22頁，課件共146頁，創(chuàng)作于2023年2月“默認”：采用瀏覽器的默認值。

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

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

“實體”：當(dāng)輸入的文字超過文本框的寬度時，會自動加入回車符并換行。第23頁，課件共146頁，創(chuàng)作于2023年2月（2）復(fù)選框?qū)傩缘脑O(shè)置：復(fù)選框有選中和未選中兩種狀態(tài)，多個復(fù)選框允許多選。它的“屬性”欄如圖4-1-5所示，各選項的作用如下。第24頁，課件共146頁，創(chuàng)作于2023年2月圖4-1-5復(fù)選框的“屬性”欄

第25頁，課件共146頁，創(chuàng)作于2023年2月

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

“初始狀態(tài)”欄：它有兩個單選項，用來設(shè)置復(fù)選框的初始狀態(tài)。第26頁，課件共146頁，創(chuàng)作于2023年2月（3）單選按鈕屬性的設(shè)置：單選按鈕也叫做單選項，一組單選按鈕中同一時間只允許選中一個，它的“屬性”欄如圖4-1-6所示。該“屬性”欄中的選項與復(fù)選框“屬性”欄中相應(yīng)選項的作用一樣。第27頁，課件共146頁，創(chuàng)作于2023年2月圖4-1-6單選按鈕的“屬性”欄第28頁，課件共146頁，創(chuàng)作于2023年2月（4）單選按鈕組屬性的設(shè)置：單選按鈕組也叫做單選項組。單擊“插入”（表單）欄中的“單選按鈕組”按鈕，可彈出“單選按鈕組”對話框，如圖4-1-7所示。第29頁，課件共146頁，創(chuàng)作于2023年2月圖4-1-7“單選按鈕組”對話框

第30頁，課件共146頁，創(chuàng)作于2023年2月利用該對話框可以設(shè)置單選按鈕組中單選按鈕的個數(shù)、名稱和初始值。如果要增加選項，可單擊按鈕；如果要刪除選項，可選中要刪除的選項，再單擊按鈕。如果要調(diào)整選項的顯示次序，可選中要移動的選項，再單擊或按鈕。單選按鈕組的“屬性”欄如圖4-1-6所示。第31頁，課件共146頁，創(chuàng)作于2023年2月（5）按鈕屬性的設(shè)置：按鈕用來制作“提交”和“重置”按鈕，還可以調(diào)用函數(shù)，它的“屬性”欄如圖4-1-8所示，各選項的作用如下。第32頁，課件共146頁，創(chuàng)作于2023年2月

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

“動作”欄：它有3個單選項，用來選擇單擊該選項后引起的動作類型。

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

第33頁，課件共146頁，創(chuàng)作于2023年2月“重設(shè)表單”：選中它后，可以取消前面的輸入，復(fù)位表單。

“無”：選中它后，表示是一般按鈕，可用來調(diào)用腳本程序。第34頁，課件共146頁，創(chuàng)作于2023年2月圖4-1-8按鈕的“屬性”欄第35頁，課件共146頁，創(chuàng)作于2023年2月（6）列表/菜單屬性的設(shè)置：列表/菜單的作用是將一些選項放在一個帶滾動條的列表框內(nèi)，它的“屬性”欄如圖4-1-9所示，各選項的作用如下。第36頁，課件共146頁，創(chuàng)作于2023年2月圖4-1-9列表/菜單的“屬性”欄第37頁，課件共146頁，創(chuàng)作于2023年2月“類型”欄：它有“菜單”和“列表”兩個單選項?！安藛巍本褪窍吕斜砜颍贿x擇“列表”選項后，其右邊的各選項會變?yōu)榭蛇x項，此時的列表框右邊會產(chǎn)生滾動條。

“高度”文本框：用來輸入列表的高度值，即可以顯示的行數(shù)。第38頁，課件共146頁，創(chuàng)作于2023年2月

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

“初始化時選定”列表框：用來設(shè)置第一次彈出該菜單時，菜單中默認的選中項。

第39頁，課件共146頁，創(chuàng)作于2023年2月“列表值”按鈕：單擊該按鈕，可彈出一個“列表值”對話框，與圖4-1-7相似，使用方法基本相同。利用該對話框可以輸入菜單或列表內(nèi)顯示的選項內(nèi)容（在“標(biāo)簽”欄內(nèi)），以及輸入此選項提交后的返回值（在“值”欄內(nèi)）。第40頁，課件共146頁，創(chuàng)作于2023年2月（7）跳轉(zhuǎn)菜單屬性的設(shè)置：跳轉(zhuǎn)菜單采用下拉列表框的方式來實現(xiàn)鏈接跳轉(zhuǎn)，其外觀與列表/菜單一樣，是菜單的另外一種形式。用戶單擊該菜單的某一個選項時，當(dāng)前頁面或框架會跳轉(zhuǎn)到其他的頁面。創(chuàng)建跳轉(zhuǎn)菜單的操作方法如下。第41頁，課件共146頁，創(chuàng)作于2023年2月單擊“跳轉(zhuǎn)菜單”按鈕，屏幕會彈出一個“插入跳轉(zhuǎn)菜單”對話框，如圖4-1-10所示。在“文本”文本框內(nèi)輸入菜單命令的說明文字，在“菜單項”列表框內(nèi)會隨之顯示出來。其中各選項的作用如下。第42頁，課件共146頁，創(chuàng)作于2023年2月 、、和按鈕的作用與圖4-1-7所示按鈕的作用一樣。在“選擇時，轉(zhuǎn)到URL”文本框內(nèi)輸入要跳轉(zhuǎn)的文件路徑與文件名字。也可以單擊“瀏覽”按鈕，彈出“選擇文件”對話框，選擇鏈接的文件。第43頁，課件共146頁，創(chuàng)作于2023年2月在“打開URL于”下拉列表框內(nèi)選擇在何處打開文件。在“菜單名稱”文本框內(nèi)輸入跳轉(zhuǎn)菜單的名稱。第44頁，課件共146頁，創(chuàng)作于2023年2月“選項”欄有兩個復(fù)選框。選中“菜單之后插入前往按鈕”復(fù)選框后，在菜單的右邊會增加一個“前往”按鈕。選中“更改URL后選擇第一個項目”復(fù)選框后，可設(shè)置跳轉(zhuǎn)后重新定義菜單第一個選項為默認選項。第45頁，課件共146頁，創(chuàng)作于2023年2月單擊“確定”按鈕，可退出該對話框，頁面會顯示一個跳轉(zhuǎn)菜單。按照圖4-1-10所示進行設(shè)置后，瀏覽器中顯示的跳轉(zhuǎn)菜單如圖4-1-11所示。第46頁，課件共146頁，創(chuàng)作于2023年2月圖4-1-10“插入跳轉(zhuǎn)菜單”對話框

第47頁，課件共146頁，創(chuàng)作于2023年2月圖4-1-11在頁面內(nèi)的跳轉(zhuǎn)菜單第48頁，課件共146頁，創(chuàng)作于2023年2月選中創(chuàng)建的跳轉(zhuǎn)菜單后，其“屬性”欄與圖4-1-9基本一樣。第49頁，課件共146頁，創(chuàng)作于2023年2月4.2.1學(xué)習(xí)目標(biāo)

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

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

“附加樣式表”按鈕：單擊它，可以彈出一個“鏈接外部樣式表”對話框，如圖4-2-5所示。再單擊“瀏覽”按鈕，可彈出“選擇樣式表文件”對話框，用來導(dǎo)入外部的樣式表（文件的擴展名為.CSS）。第56頁，課件共146頁，創(chuàng)作于2023年2月圖4-2-5“鏈接外部樣式表”對話框

第57頁，課件共146頁，創(chuàng)作于2023年2月

“新建CSS規(guī)則”按鈕（也叫做“新建CSS樣式”按鈕）：單擊它，可以彈出一個“新建CSS規(guī)則”對話框，如圖4-2-3所示。利用該對話框可以建立新的樣式。第58頁，課件共146頁，創(chuàng)作于2023年2月“編輯樣式”按鈕：在“CSS樣式”面板中選中一種樣式后，它才有效。單擊它，可彈出一個能進行樣式表編輯的對話框（例如“.style1的CSS規(guī)則定義”對話框，如圖4-2-4所示），利用該對話框可以對.style1樣式進行編輯。第59頁，課件共146頁，創(chuàng)作于2023年2月“刪除CSS規(guī)則”按鈕（也叫做“刪除CSS樣式”按鈕）：單擊它，可以刪除選中的樣式。第60頁，課件共146頁，創(chuàng)作于2023年2月（2）創(chuàng)建CSS樣式表打開如圖4-2-3所示的“新建CSS規(guī)則”對話框，選中“選擇器類型”欄內(nèi)的第1個單選項，在“名稱”下拉列表框內(nèi)輸入一個樣式表的名字，名字必須以“.”開始，例如，“.style1”。單擊該對話框中的“確定”按鈕，即可退出該對話框，彈出“CSS規(guī)則定義”對話框，如圖4-2-4所示。第61頁，課件共146頁，創(chuàng)作于2023年2月利用“CSS規(guī)則定義”對話框進行樣式表內(nèi)各個對象屬性的定義。定義完成后，單擊“確定”按鈕，即可完成樣式表的定義。此時，在“CSS樣式”面板內(nèi)會顯示出新創(chuàng)建的樣式表的名稱。第62頁，課件共146頁，創(chuàng)作于2023年2月（1）定義文字屬性單擊圖4-2-4所示的“CSS規(guī)則定義”對話框左邊“分類”欄內(nèi)的“類型”選項，此時的對話框如圖4-2-4所示。利用該對話框可以設(shè)置CSS樣式的字體、大小、樣式和顏色等。單擊“應(yīng)用”按鈕，可將設(shè)置的樣式應(yīng)用到頁面中。2．定義CSS樣式表第63頁，課件共146頁，創(chuàng)作于2023年2月（2）定義背景屬性單擊圖4-2-4所示對話框內(nèi)左邊“分類”欄內(nèi)的“背景”選項，此時的“CSS規(guī)則定義”對話框內(nèi)的“背景”欄如圖4-2-6所示。利用“背景”欄的“背景顏色”和“背景圖像”按鈕與文本框可以定義背景顏色和背景圖像。其他選項的作用如下。第64頁，課件共146頁，創(chuàng)作于2023年2月圖4-2-6“背景”欄

第65頁，課件共146頁，創(chuàng)作于2023年2月

“重復(fù)”下拉列表框：用來設(shè)置背景圖像的重復(fù)方式。它有4個選項：“不重復(fù)”（只在左上角顯示一幅圖像）、“重復(fù)”（沿水平與垂直方向重復(fù)）、“橫向重復(fù)”（沿水平方向重復(fù)）和“縱向重復(fù)”（沿垂直方向重復(fù)）。第66頁，課件共146頁，創(chuàng)作于2023年2月

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

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

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

“垂直對齊”下拉列表框：用它可以設(shè)置選中的對象相對于上級對象或相對所在行在垂直方向的對齊方式。第71頁，課件共146頁，創(chuàng)作于2023年2月“文本對齊”下拉列表框：用來設(shè)置首行文字在對象中的對齊方式。

“文字縮進”文本框：用來輸入文字的縮進量。

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

“浮動”下拉列表框：用來設(shè)置是否允許文字環(huán)繞在選中對象的周圍。

第75頁，課件共146頁，創(chuàng)作于2023年2月“清除”下拉列表框：用來設(shè)定其他對象是否可以在選定對象的左右。

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

“邊界”欄：用來設(shè)置邊緣的空白寬度，下拉列表框內(nèi)可輸入數(shù)值或選擇“自動”。第76頁，課件共146頁，創(chuàng)作于2023年2月（5）定義邊框?qū)傩詥螕魣D4-2-4所示對話框內(nèi)左邊“分類”欄內(nèi)的“邊框”選項，此時對話框內(nèi)右邊的“邊框”欄如圖4-2-9所示。它用來對圍繞所有對象的邊框?qū)傩赃M行設(shè)置。第77頁，課件共146頁，創(chuàng)作于2023年2月圖4-2-9“邊框”欄第78頁，課件共146頁，創(chuàng)作于2023年2月設(shè)置邊框的寬度與顏色：該對話框內(nèi)有4行選項，分別為上、右、下和左邊框。每行有3個下拉列表框和1個按鈕與文本框。第1列的下拉列表框用來設(shè)置邊框的樣式，第2列的下拉列表框用來設(shè)置邊框的寬度，第3列的下拉列表框用來選擇數(shù)值的單位，按鈕和后面的文本框用來設(shè)置邊框的顏色。第79頁，課件共146頁，創(chuàng)作于2023年2月邊框的寬度下拉列表框內(nèi)的選項有4個，選擇“值”時，可以輸入邊框粗細的數(shù)值，此時其右邊的下拉列表框變?yōu)橛行?，可以選擇單位。

“樣式”下拉列表框：在此下拉列表框中有9個選項。其中，“無”選項是取消邊框，其他選項各對應(yīng)著一種不同的邊框。邊框的最終顯示效果還與瀏覽器有關(guān)。第80頁，課件共146頁，創(chuàng)作于2023年2月（6）定義列表屬性單擊圖4-2-4所示對話框內(nèi)左邊“分類”欄內(nèi)的“列表”選項，此時該對話框右邊的“列表”欄如圖4-2-10所示。其中各選項的作用如下。第81頁，課件共146頁，創(chuàng)作于2023年2月圖4-2-10“列表”欄第82頁，課件共146頁，創(chuàng)作于2023年2月“類型”下拉列表框：用來設(shè)置列表的標(biāo)記。選擇標(biāo)記是序號（有序列表）或符號（無序列表）。該下拉列表框內(nèi)有9個選項，包括“圓點”、“圓圈”等。第83頁，課件共146頁，創(chuàng)作于2023年2月

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

“位置”下拉列表框：用來設(shè)置列表標(biāo)記的縮進方式。第84頁，課件共146頁，創(chuàng)作于2023年2月（7）定義定位屬性單擊圖4-2-4所示對話框內(nèi)左邊“分類”欄中的“定位”選項，此時該對話框內(nèi)右邊的“定位”欄如圖4-2-11所示。其中各選項的作用如下。第85頁，課件共146頁，創(chuàng)作于2023年2月圖4-2-11“定位”欄第86頁，課件共146頁，創(chuàng)作于2023年2月“類型”下拉列表框：用來設(shè)置對象的位置。各選項的作用如下?！敖^對”：以頁面左上角的坐標(biāo)為基點?！跋鄬Α保阂阅阁w左上角的坐標(biāo)為基點?！办o態(tài)”：按文本正常順序定位，一般與“相對”定位一樣。第87頁，課件共146頁，創(chuàng)作于2023年2月“顯示”下拉列表框：用來設(shè)置對象的可視性。各選項的作用如下?！袄^承”：選中的對象繼承其母體的可視性。“可見”：選中的對象是可視的?！半[藏”：選中的對象是隱藏的。第88頁，課件共146頁，創(chuàng)作于2023年2月“Z軸”下拉列表框：用來設(shè)置不同層的對象的顯示次序。它有“自動”（按原顯示次序）和“值”2個選項。選擇“值”選項后，可輸入數(shù)值，其數(shù)值越大，越在上邊顯示。第89頁，課件共146頁，創(chuàng)作于2023年2月

“溢出”下拉列表框：用來設(shè)置當(dāng)文字超出其容器時的處理方式。各選項的作用如下?！翱梢姟保寒?dāng)文字超出其容器時仍然可以顯示?！半[藏”：當(dāng)文字超出其容器時，超出的內(nèi)容不能顯示。第90頁，課件共146頁，創(chuàng)作于2023年2月“滾動”：在母體加一個滾動條，可利用滾動條滾動顯示母體中的文字?！白詣印保寒?dāng)文本超出容器時，自動加入一個滾動條。“定位”欄：用來設(shè)置放置對象的容器的大小和位置。“剪輯”欄：用來設(shè)定對象溢出母體容器部分的剪切方式。第91頁，課件共146頁，創(chuàng)作于2023年2月（8）定義擴展屬性單擊圖4-2-4所示對話框內(nèi)左邊“分類”欄內(nèi)的“擴展”選項，此時該對話框內(nèi)右邊的“擴展”欄如圖4-2-12所示。該對話框中各選項的作用如下。第92頁，課件共146頁，創(chuàng)作于2023年2月圖4-2-12“擴展”欄第93頁，課件共146頁，創(chuàng)作于2023年2月“分頁”欄：用來在選定的對象的前面或后面強制加入分頁符。一般瀏覽器均不支持此項功能。該欄有“之前”和“之后”兩個下拉列表框，其內(nèi)的選項有“自動”、“總是”、“左對齊”和“右對齊”，它們用來確定分頁符的位置。

第94頁，課件共146頁，創(chuàng)作于2023年2月“視覺效果”欄：利用該欄內(nèi)的下拉列表框的選項，可使頁面的顯示效果更好。

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

“過濾器”下拉列表框：用來對圖像進行濾鏡處理，獲得各種特殊的效果。第95頁，課件共146頁，創(chuàng)作于2023年2月定義了CSS樣式后，可以將這些CSS樣式應(yīng)用于網(wǎng)頁中的文本、圖像、Flash等對象。具體的方法如下。（1）利用“CSS樣式”面板利用“CSS樣式”面板將CSS樣式應(yīng)用于網(wǎng)頁中對象的方法如下。3．應(yīng)用CSS樣式第96頁，課件共146頁，創(chuàng)作于2023年2月選中要應(yīng)用CSS樣式的對象，可以是文本、圖像和Flash等對象。鼠標(biāo)右鍵單擊“CSS樣式”面板中相應(yīng)的樣式名稱，彈出它的快捷菜單，再單擊該菜單中的“套用”菜單命令。第97頁，課件共146頁，創(chuàng)作于2023年2月（2）利用“屬性”欄利用“屬性”欄將CSS樣式應(yīng)用于網(wǎng)頁中對象的方法如下。選中要應(yīng)用CSS樣式的文本對象，在其“屬性”欄的“樣式”下拉列表框中選擇需要的CSS樣式名稱，即可將選中的CSS樣式應(yīng)用于選中的文本對象。第98頁，課件共146頁，創(chuàng)作于2023年2月選中要應(yīng)用CSS樣式的圖像或Flash等對象，在其“屬性”欄的“類”下拉列表框中選擇需要的CSS樣式名稱，即可將選中的CSS樣式應(yīng)用于選中的圖像或Flash等對象。第99頁，課件共146頁，創(chuàng)作于2023年2月4.3.1學(xué)習(xí)目標(biāo)

“Word操作演示”網(wǎng)頁的顯示效果如圖4-3-1所示。Flash是原Macromedia公司開發(fā)的另一個著名產(chǎn)品，它是一個優(yōu)秀的矢量繪圖和動畫制作軟件。4.3【案例13】“Word操作演示”網(wǎng)頁第100頁，課件共146頁，創(chuàng)作于2023年2月圖4-3-1“Word操作演示”網(wǎng)頁的顯示效果第101頁，課件共146頁，創(chuàng)作于2023年2月

Flash可以制作出一種擴展名為.swf的動畫文件，這種文件可以插入到HTML中，也可以單獨成為網(wǎng)頁。它不但可以制作出一般的動畫，還可以制作出帶有背景聲音，具有較強的交互性能的動畫。第102頁，課件共146頁，創(chuàng)作于2023年2月

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

Flash動畫的“屬性”欄如圖4-3-4所示，前面沒有介紹的各選項的作用如下。4.3.3相關(guān)知識第105頁，課件共146頁，創(chuàng)作于2023年2月圖4-3-4Flash動畫的“屬性”欄第106頁，課件共146頁，創(chuàng)作于2023年2月“源文件”文本框與文件夾按鈕：用來選擇FLA格式的Flash影片源文件。

“編輯”按鈕：單擊它，可以彈出Flash8，并對Flash文件進行編輯。

“重設(shè)大小”按鈕：單擊它，可使Flash影片恢復(fù)原大小。第107頁，課件共146頁，創(chuàng)作于2023年2月“循環(huán)”復(fù)選框：選中它后，可循環(huán)播放。

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

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

“比例”下拉列表框：用來選擇縮放參數(shù)。第108頁，課件共146頁，創(chuàng)作于2023年2月“插入Flash按鈕”對話框如圖4-3-3所示，其中各選項的含義如下。

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

2．“插入Flash按鈕”對話框第109頁，課件共146頁，創(chuàng)作于2023年2月“樣式”列表框：該列表框中列出所有可以使用的Flash按鈕的樣式，可以從里面選擇相應(yīng)的樣式進行編輯。

“字體”下拉列表框：用來選擇文本的字體。

“大小”文本框：設(shè)置顯示文本的大小。第110頁，課件共146頁，創(chuàng)作于2023年2月“鏈接”文本框：在文本框中輸入需要鏈接的文件目錄和文件名，也可以單擊“瀏覽”按鈕，彈出“選擇文件”對話框，在該對話框中選擇需要鏈接的文件，設(shè)置鏈接。

“目標(biāo)”下拉列表框：用來設(shè)置鏈接的網(wǎng)頁的打開方式，其中各選項作用如下：第111頁，課件共146頁，創(chuàng)作于2023年2月_blank：在一個新的瀏覽器窗口中打開鏈接的文檔。_parent：在框架的父框架或父窗口中打開鏈接的文檔。_self：默認打開方式，將鏈接的文檔載入鏈接所在的同一框架或窗口。_top：將鏈接的文檔載入整個瀏覽器窗口，從而刪除所有框架。第112頁，課件共146頁，創(chuàng)作于2023年2月“背景色”按鈕：用來設(shè)置Flash按鈕的背景顏色。

“另存為”文本框：用來輸入要保存到的目錄及文件名，或單擊“瀏覽”按鈕，彈出“選擇文件”對話框，利用它選擇要保存的路徑和文件名，默認目錄為網(wǎng)頁文檔所在的目錄。第113頁，課件共146頁，創(chuàng)作于2023年2月（1）單擊“插入”（常用）欄中的“媒體”快捷菜單中的“Flash文本”按鈕，彈出“插入Flash文本”對話框，如圖4-3-2所示。3．插入Flash文本第114頁，課件共146頁，創(chuàng)作于2023年2月（2）在“插入Flash文本”對話框中進行文字各種屬性的設(shè)置后，在“文本”文本框中輸入文字；在“目標(biāo)”文本框中輸入要鏈接的文件；在“另存為”文本框中輸入存儲的文件名稱。然后單擊“確定”按鈕，即可在網(wǎng)頁中插入Flash文本。第115頁，課件共146頁，創(chuàng)作于2023年2月（1）單擊“插入”（常用）欄中的“媒體”快捷菜單中的“FlashVideo”按鈕，彈出“插入Flash視頻”對話框，如圖4-3-5左圖所示（還沒有設(shè)置）。4．插入Flash視頻第116頁，課件共146頁，創(chuàng)作于2023年2月圖4-3-5“插入Flash視頻”對話框設(shè)置第117頁，課件共146頁，創(chuàng)作于2023年2月（2）在“視頻類型”下拉列表框內(nèi)選擇一種下載視頻的類型，選擇“流視頻”選項后的“插入Flash視頻”對話框如圖4-3-5右圖所示。此處選擇“累進式下載”選項。（3）單擊“URL”欄的“瀏覽”按鈕，彈出“選擇文件”對話框，如圖4-3-6所示。利用該對話框選擇一個Flash視頻文件（擴展名為.FLV）。第118頁，課件共146頁，創(chuàng)作于2023年2月圖4-3-6“選擇文件”對話框第119頁，課件共146頁，創(chuàng)作于2023年2月（4）在“外觀”下拉列表框內(nèi)選擇一種播放器的樣式。在它下邊的顯示框內(nèi)可以看到選中的播放器的外觀圖像。（5）在“寬度”和“高度”文本框內(nèi)分別輸入視頻的寬度和高度，單位像素。第120頁，課件共146頁，創(chuàng)作于2023年2月（6）選中“限制寬高比”、“自動播放”和“自動重新播放”復(fù)選框。設(shè)置完后，單擊“確定”按鈕，即可在網(wǎng)頁光標(biāo)處插入一個Flash視頻，如圖4-3-7所示。第121頁，課件共146頁，創(chuàng)作于2023年2月圖4-3-7網(wǎng)頁編輯狀態(tài)下的Flash視頻第122頁，課件共146頁，創(chuàng)作于2023年2月在本節(jié)“操作過程”中已經(jīng)介紹了一種插入Flash動畫的方法。另外，采用下述方法也可以插入Flash動畫。5．插入Flash動畫第123頁，課件共146頁，創(chuàng)作于2023年2月（1）單擊“插入”（常用）欄中的“媒體”快捷菜單中的“FlashPaper”按鈕，彈出“插入FlashPaper”對話框，如圖4-3-8所示。第124頁，課件共146頁，創(chuàng)作于2023年2月圖4-3-8“插入FlashPaper”對話框第125頁，課件共146頁，創(chuàng)作于2023年2月（2）單擊“瀏覽”按鈕，可彈出“選擇文件”對話框，如圖4-3-6所示。在“選擇文件”對話框中選擇要導(dǎo)入的SWF文件，單擊“確定”按鈕，回到“插入FlashPaper”對話框。（3）在“插入FlashPaper”對話框內(nèi)的2個文本框中輸入高度與寬度數(shù)值，再單擊“確定”按鈕，也可以導(dǎo)入Flash動畫文件。第126頁，課件共146頁，創(chuàng)作于2023年2月4.4.1學(xué)習(xí)目標(biāo)

“電子市場圖片秀”網(wǎng)頁的顯示效果如圖4-4-1所示。在該網(wǎng)頁中，使用了JavaApplet特效實現(xiàn)網(wǎng)頁中不同圖像的動態(tài)切換效果。4.4【案例14】“電子市場圖片秀”網(wǎng)頁第127頁，課件共146頁，創(chuàng)作于2023年2月圖4-4-1“電子市場圖片秀”網(wǎng)頁的顯示效果第128頁，課件共146頁，創(chuàng)作于2023年2月

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

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