1、第4章西餐、樣式表和網(wǎng)頁(yè)中的其他目標(biāo)；4.1案例11“電腦配置調(diào)查表”網(wǎng)頁(yè)；4 . 1 . 1 . 1學(xué)習(xí)目標(biāo)“電腦配置調(diào)查表”頁(yè)面如圖4-1-1所示。牙齒網(wǎng)頁(yè)以表格形式列出了計(jì)算機(jī)主要附件的調(diào)查信息。按照頁(yè)面上的提示進(jìn)行選擇或輸入后，可以單擊“提交”按鈕，將網(wǎng)頁(yè)上的信息提交到服務(wù)器上的數(shù)據(jù)庫(kù)。圖4-1-1“電腦配置調(diào)查表”網(wǎng)頁(yè)的顯示效果，表單是用戶(hù)使用瀏覽器查詢(xún)和添加web網(wǎng)站數(shù)據(jù)庫(kù)的界面，用戶(hù)可以使用表單向服務(wù)器提交信息，以便輸入信息或選擇選項(xiàng)等操作。牙齒查詢(xún)方法稱(chēng)為交互或雙向。這些西餐對(duì)象包括文本字段、下拉框、核取方塊、單選按鈕等。西餐對(duì)象是用戶(hù)可以輸入信息的地方，西餐字段是放置西餐對(duì)象

2、的區(qū)域，只有西餐字段中的西餐對(duì)象才能傳遞信息。4.1.2操作過(guò)程，創(chuàng)建1西餐字段和插入西餐對(duì)象(1)創(chuàng)建西餐字段和刪除西餐字段：將光標(biāo)移動(dòng)到要插入西餐字段的位置，然后單擊插入(西餐)欄上的“西餐”按鈕，在網(wǎng)頁(yè)編輯窗口中創(chuàng)建表單字段(如圖4所示)、4.1.3相關(guān)知識(shí)、圖4-1-2創(chuàng)建的表單字段按back space鍵收攏西餐字段。西餐字段在瀏覽器中不可見(jiàn)。顯示西餐字段：創(chuàng)建西餐字段后，如果看不到西餐字段的矩形紅色線(xiàn)，請(qǐng)單擊“查看”“可視化助理”“不可見(jiàn)元素”菜單命令將其選中，以顯示西餐字段的矩形紅色線(xiàn)。刪除西餐字段：?jiǎn)螕粑鞑妥侄蔚倪吘?，選擇西餐字段，然后按Delete鍵刪除西餐字段。(2)選擇西

3、餐字段的設(shè)置屬性西餐字段后，西餐字段的“屬性”欄將如圖4-1-3所示。在圖4-1-3西餐字段“屬性”欄中，在“西餐名稱(chēng)”文本框：牙齒文本框中，輸入西餐字段的名稱(chēng)。西餐字段的名稱(chēng)可用于控制西餐字段屬性的腳本語(yǔ)言，如JavaScript和VBScript。動(dòng)作文本框和按鈕：用于輸入包含腳本節(jié)目或腳本程序的HTML文件。方法下拉列表框：用于選擇在客戶(hù)端和服務(wù)器之間傳輸數(shù)據(jù)的方法。三個(gè)茄子選項(xiàng)為“默認(rèn)值”、“GET”(將西餐值附加到URL并發(fā)送服務(wù)器GET請(qǐng)求)和“POST”(傳遞，在消息正文中發(fā)送西餐值并發(fā)送服務(wù)器POST請(qǐng)求)。“類(lèi)”下拉列表框：您可以使用各種選項(xiàng)(如“重命名”、“管理樣式”和“創(chuàng)

4、建的CSS樣式名稱(chēng)”)選擇CSS樣式、重命名CSS樣式以及創(chuàng)建新的CSS樣式。(3)插入西餐對(duì)象的方法是，將光標(biāo)移動(dòng)到要插入西餐對(duì)象的表格，然后插入西餐對(duì)象。插入西餐對(duì)象的方式與插入表格的方式相同。單擊，將光標(biāo)移動(dòng)到要插入西餐對(duì)象的位置，然后在插入(西餐)列中單擊相應(yīng)的按鈕，以在光標(biāo)中插入相應(yīng)的西餐對(duì)象?；蛘?，單擊“插入”“西餐”菜單命令，彈出下一層級(jí)菜單。根據(jù)要插入的西餐對(duì)象的類(lèi)別，還可以通過(guò)單擊菜單中的菜單命令插入西餐對(duì)象。西餐對(duì)象的“屬性”列包含名稱(chēng)文本框，您可以在該文本框中輸入程序可用于指定西餐對(duì)象的西餐對(duì)象的名稱(chēng)。(1)設(shè)置文本字段屬性：文本字段有時(shí)稱(chēng)為文本字段，在表單中經(jīng)常使用文本

5、字段。可以是接收文本、數(shù)字和文字的單行或多行。文本字段的“屬性”欄的工作方式如下圖4-1-4所示：2西餐對(duì)象，圖4-1-4文本字段，的“屬性”列，“字符寬度”文本框：文本字段的寬度允許顯示最大字符數(shù)。類(lèi)型列：牙齒列包含三個(gè)茄子的單個(gè)選項(xiàng)，用于選擇“單行”、“多行”或“密碼”文本字段。密碼文本字段的特征是“*”行，而不是用戶(hù)輸入文本時(shí)密碼文本字段中顯示的字符。選擇“多行”單個(gè)選項(xiàng)時(shí)，相應(yīng)的“屬性”列將更改?！俺跏贾怠蔽谋究蚋臑閹в袧L動(dòng)條的多行文本框，“換行”下拉框處于活動(dòng)狀態(tài)，“字符寬度”文本框更改為“行數(shù)”文本框，您可以在其中輸入文本框中的行數(shù)。初始值文本框：用于輸入文本框的初始內(nèi)容?！皳Q行

6、”下拉框：僅在選擇多行類(lèi)型時(shí)有效。換行下拉列表框包含四個(gè)茄子選項(xiàng)，其含義如下：默認(rèn)值：使用瀏覽器的默認(rèn)值。關(guān)閉：輸入超出文本框?qū)挾鹊奈淖謺r(shí)，不會(huì)換行，但會(huì)顯示滾動(dòng)條。虛擬：如果輸入字符超過(guò)文本框?qū)挾?，則自動(dòng)換行，向服務(wù)器發(fā)送數(shù)據(jù)時(shí)不會(huì)換行。實(shí)體：如果輸入的字符超出文本框的寬度，則會(huì)自動(dòng)添加回車(chē)符并換行。(2)設(shè)置復(fù)選框?qū)傩裕簭?fù)選框處于選中和選中狀態(tài)，允許您通過(guò)多個(gè)復(fù)選框選擇多個(gè)項(xiàng)目。如圖4-1-5所示，相應(yīng)的特性列的工作方式如下：圖4-1-5復(fù)選框的“屬性”列，在選中“選定值”文本框：復(fù)選框的情況下用于輸入數(shù)值(通常為1或0)。初始狀態(tài)欄：牙齒欄包含兩個(gè)茄子單個(gè)選項(xiàng)，用于設(shè)置復(fù)選框的初始狀態(tài)。

7、(3)設(shè)置單選按鈕屬性：?jiǎn)芜x按鈕也稱(chēng)為單個(gè)選項(xiàng)，一次只能選擇一組單選按鈕中的一個(gè)。屬性列如圖4-1-6所示。牙齒“屬性”列中的選項(xiàng)與復(fù)選框“屬性”列中的相應(yīng)選項(xiàng)作用相同。圖4-1-6單選按鈕的“屬性”欄，(4)單選按鈕組屬性的設(shè)置：?jiǎn)芜x按鈕組也稱(chēng)為單個(gè)選項(xiàng)組。單擊“插入”(西餐)欄上的“單選按鈕組”按鈕后，將出現(xiàn)“單選按鈕組”對(duì)話(huà)框，如圖4-1-7所示。圖4-1-7單選按鈕組對(duì)話(huà)框。使用牙齒對(duì)話(huà)框可以設(shè)置單選按鈕組中單選按鈕的數(shù)量、名稱(chēng)和初始值。要添加選項(xiàng)，請(qǐng)單擊按鈕。要?jiǎng)h除選項(xiàng)，請(qǐng)選擇要?jiǎng)h除的選項(xiàng)，然后單擊按鈕。要重新排列選項(xiàng)的顯示順序，請(qǐng)選擇要移動(dòng)的選項(xiàng)，然后單擊或按鈕。單選按鈕組的屬性欄

8、如圖4-1-6所示。(5)設(shè)置按鈕屬性：按鈕用于創(chuàng)建提交和重置按鈕，還可以調(diào)用具有屬性列的函數(shù)，如圖4-1-8所示。每個(gè)選項(xiàng)的工作方式如下：“標(biāo)簽”文本框：用于在按鈕上輸入文字。動(dòng)作欄：?jiǎn)螕簟把例X”選項(xiàng)后，有三個(gè)茄子單個(gè)選項(xiàng)可用于選擇發(fā)生的動(dòng)作類(lèi)型。提交西餐：選擇此選項(xiàng)后，可以將整個(gè)表格提交給服務(wù)器。重置西餐：選擇此選項(xiàng)后，可以取消以前的輸入并重置表單。無(wú)選中此選項(xiàng)時(shí)，表示這是可用于調(diào)用腳本程序的普通按鈕。圖4-1-8按鈕的“屬性”欄，(6)設(shè)置列表/菜單屬性：列表/菜單的作用是將一些選項(xiàng)放置在帶有滾動(dòng)條的列表框中。如圖4-1-9所示，圖4-1-9列表/菜單中的“屬性”列、“類(lèi)型”列：有兩個(gè)茄

9、子單個(gè)選項(xiàng)：“菜單”和“列表”。“菜單”是下拉列表框。選擇“列表”選項(xiàng)后，右側(cè)的選項(xiàng)變?yōu)榭蛇x，滾動(dòng)條出現(xiàn)在列表框的右側(cè)。高度文本框：允許您輸入列表的高度值，即可以顯示的行數(shù)。“選擇范圍”復(fù)選框：選中時(shí)，表示列表中的每個(gè)選項(xiàng)可以同時(shí)選擇多個(gè)項(xiàng)目。初始化時(shí)選定的列表框：允許您在首次彈出菜單時(shí)設(shè)置菜單的默認(rèn)選項(xiàng)?！傲斜碇怠卑粹o：?jiǎn)螕粞例X按鈕時(shí)，將彈出“列表值”對(duì)話(huà)框，使用的方法與圖4-1-7中所示的方法大致相同。牙齒對(duì)話(huà)框允許您輸入菜單或列表中顯示的選項(xiàng)內(nèi)容(在“標(biāo)簽”列中)，以及提交選項(xiàng)后的返回值(在“值”列中)。，(7)設(shè)置跳轉(zhuǎn)菜單屬性：跳轉(zhuǎn)菜單將鏈接跳轉(zhuǎn)到下拉列表框，其外觀與列表/菜單相同，是

10、菜單的另一種形式。如果使用者按一下牙齒選單中的其中一個(gè)選項(xiàng)，目前頁(yè)面或框架會(huì)跳至其他頁(yè)面。要?jiǎng)?chuàng)建跳轉(zhuǎn)菜單，請(qǐng)執(zhí)行以下操作：?jiǎn)螕籼D(zhuǎn)菜單按鈕后，將出現(xiàn)“插入跳轉(zhuǎn)菜單”對(duì)話(huà)框，如圖4-1-10所示。在“文本”文本框中輸入菜單命令的說(shuō)明文本，該文本將顯示在“菜單項(xiàng)”列表框中。這些選項(xiàng)的工作方式如下：和按鈕的作用與圖4-1-7中顯示的按鈕相同。在“選擇時(shí)轉(zhuǎn)到URL”文本框中，輸入要跳轉(zhuǎn)到的檔案的路徑和文件名。也可以單擊“瀏覽”按鈕彈出“選擇檔案”對(duì)話(huà)框，然后選擇鏈接文件。在打開(kāi)URL自下拉列表框中，選擇要打開(kāi)文件的位置。在“菜單名稱(chēng)”文本框中，輸入跳轉(zhuǎn)菜單的名稱(chēng)。選項(xiàng)欄包含兩個(gè)復(fù)選框。選中在菜單后插入

11、移動(dòng)按鈕復(fù)選框后，移動(dòng)按鈕將添加到菜單的右側(cè)。如果選中了“更改URL后選擇第一個(gè)項(xiàng)目”復(fù)選框，則跳轉(zhuǎn)后菜單復(fù)蓋的第一個(gè)選項(xiàng)將設(shè)置為默認(rèn)選項(xiàng)。單擊確定按鈕將退出對(duì)話(huà)框，并在頁(yè)面上顯示跳轉(zhuǎn)菜單。如圖4-1-10所示，設(shè)置后，瀏覽器中顯示的跳轉(zhuǎn)菜單如圖4-1-11所示。圖4-1-10“插入跳轉(zhuǎn)菜單”對(duì)話(huà)框，圖4-1-11頁(yè)面內(nèi)的跳轉(zhuǎn)菜單，選擇您創(chuàng)建的跳轉(zhuǎn)菜單時(shí)，屬性欄與圖4-1-9大致相同。4.2.1學(xué)習(xí)目標(biāo)“硬盤(pán)性能指標(biāo)”頁(yè)面如圖4-2-1所示。在牙齒網(wǎng)頁(yè)中，使用樣式表設(shè)置其中文字的樣式。4.2 案例12“硬盤(pán)性能指標(biāo)”網(wǎng)頁(yè)，圖4-2-1“硬盤(pán)性能指標(biāo)”網(wǎng)頁(yè)的顯示效果網(wǎng)頁(yè)中的許多字符使用相同的屬性

12、設(shè)置時(shí)，所有字符也必須執(zhí)行相同的屬性設(shè)置。這可能會(huì)在制作網(wǎng)頁(yè)時(shí)發(fā)生很多重復(fù)性任務(wù)，并且web頁(yè)上的HTML文件太大，導(dǎo)致網(wǎng)頁(yè)傳輸和下載速度變慢。要解決牙齒問(wèn)題，可以通過(guò)設(shè)置經(jīng)常出現(xiàn)在頁(yè)面上的具有相同或相似屬性的對(duì)象的完整屬性來(lái)創(chuàng)建樣式表。層疊樣式表(CSS)是1996年開(kāi)發(fā)的，可以統(tǒng)一設(shè)置版面設(shè)計(jì)、背景、字體大小、顏色和表格等屬性，然后將其用于頁(yè)面上的相應(yīng)對(duì)象。4.2.2工作流程，1創(chuàng)建CSS樣式表(1)CSS樣式表編輯器CSS樣式表可以均勻設(shè)置版面設(shè)計(jì)、背景、字體大小、顏色和表格等屬性，然后將其應(yīng)用于頁(yè)面上的相應(yīng)對(duì)象。單擊“窗口CSS樣式”菜單命令，然后彈出“CSS樣式”面板(也稱(chēng)為CSS樣

13、式表編輯器)，如圖4-2-2所示。這些選項(xiàng)的工作方式如下：4.2.3相關(guān)知識(shí)，顯示窗格：顯示所有樣式表的名稱(chēng)，“(未定義樣式)”表示沒(méi)有樣式。附加樣式表按鈕：?jiǎn)螕艨蓮棾觥版溄油獠繕邮奖怼睂?duì)話(huà)框，如圖4-2-5所示。再次單擊“瀏覽”按鈕將顯示“選擇樣式表檔案”對(duì)話(huà)框，您可以在其中導(dǎo)入外部樣式表(檔案擴(kuò)展名為.是CSS)。圖4-2-5“鏈接外部樣式表”對(duì)話(huà)框，“新建CSS規(guī)則”按鈕(也稱(chēng)為“新建CSS樣式”按鈕):單擊后，將出現(xiàn)“新建CSS規(guī)則”對(duì)話(huà)框(如圖4-2所示)，您可以使用牙齒對(duì)話(huà)框創(chuàng)建新樣式?！凹糨嫎邮健卑粹o：僅當(dāng)在“CSS樣式”面板中選擇了樣式時(shí)有效。圖4-2-4所示，可以執(zhí)行樣式表編

14、輯的對(duì)話(huà)框(例如。style1的CSS規(guī)則定義對(duì)話(huà)框)?？梢跃庉媠tyle1樣式?！皠h除CSS規(guī)則”按鈕(也稱(chēng)為“刪除CSS樣式”按鈕):單擊以刪除選定的樣式。(2)創(chuàng)建CSS樣式表打開(kāi)“新建CSS規(guī)則”對(duì)話(huà)框(圖4-2-3所示)，在“選擇器類(lèi)型”列中選擇第一個(gè)單個(gè)選項(xiàng)，然后在“名稱(chēng)”下拉列表框中輸入樣式表名稱(chēng)。名字是“.”(您必須以開(kāi)始，單擊對(duì)話(huà)框中的“確定”按鈕后，對(duì)話(huà)框?qū)⑼顺?，并出現(xiàn)“CSS規(guī)則定義”對(duì)話(huà)框，如圖4-2-4所示。)。使用“CSS規(guī)則定義”對(duì)話(huà)框定義樣式表中的各個(gè)對(duì)象屬性。完成定義后，單擊“確定”按鈕完成樣式表定義。新建樣式表的名稱(chēng)將出現(xiàn)在“CSS樣式”面板中。(1)在“C

15、SS規(guī)則定義”對(duì)話(huà)框(如圖4-2-4所示)左側(cè)的“分類(lèi)”列中，單擊“類(lèi)型”選項(xiàng)。牙齒對(duì)話(huà)框如圖4-2-4所示。使用牙齒對(duì)話(huà)框可以設(shè)置CSS樣式的字體、大小、樣式、顏色等。單擊“應(yīng)用”按鈕將設(shè)置的樣式應(yīng)用于頁(yè)面。2 CSS樣式表定義，(2)在背景屬性定義圖4-2-4所示對(duì)話(huà)框左側(cè)的“分類(lèi)”列中，單擊“背景”選項(xiàng)。“CSS規(guī)則定義”對(duì)話(huà)框的“背景”列如圖4-2-6所示。您可以使用“背景”欄中的“背景顏色”和“背景圖像”按鈕以及文本框定義背景顏色和背景圖像。其他選項(xiàng)的工作方式如下：圖4-2-6“背景”欄，“重復(fù)”下拉框：用于設(shè)置背景圖像的重復(fù)方式?！安恢貜?fù)”(左上角只顯示一個(gè)圖像)、“重復(fù)”(水平和

16、垂直重復(fù))、“水平重復(fù)”(水平重復(fù))和“垂直重復(fù)”(垂直重復(fù))。附件檔案下拉列表框：設(shè)置在內(nèi)容滾動(dòng)時(shí)是否滾動(dòng)圖像。水平位置和垂直位置下拉列表框：用于為選定對(duì)象設(shè)置圖像的水平和垂直相對(duì)位置。選擇“值”(value)選項(xiàng)后，右側(cè)的下拉列表框?qū)⒂行?，您可以選擇單位。(3)在塊屬性定義圖4-2-4所示的對(duì)話(huà)框左側(cè)“分類(lèi)”列中單擊“塊”選項(xiàng)后，對(duì)話(huà)框的“塊”列將如圖4-2-7所示。這些選項(xiàng)的工作方式如下：圖4-2-7“塊”列，“單詞間距”下拉列表框：用于設(shè)置單詞間距。選擇值選項(xiàng)后，您可以輸入數(shù)值，然后從右側(cè)的下拉列表框中選擇數(shù)值的單位。您可以在此使用負(fù)值?！白址g距”下拉列表框：用于設(shè)置字符間距。(值)

17、選項(xiàng)使您可以輸入數(shù)值，然后從右側(cè)的下拉列表框中選擇數(shù)值的單位。您可以在此使用負(fù)值。垂直對(duì)齊下拉列表框：用于設(shè)置選定對(duì)象相對(duì)于父對(duì)象或其行的垂直對(duì)齊。文字對(duì)齊下拉框：用于設(shè)置對(duì)象第一行文字的對(duì)齊方式。文字縮排文本框：可讓您輸入文字的縮排量?？崭裣吕斜砜颍河糜谠O(shè)置如何使用文本空格。這包括“正常”(填充所有空格)、“保留”(在用戶(hù)輸入時(shí)控制)和“不換行”(添加標(biāo)簽時(shí)自動(dòng)換行)選項(xiàng)。(4)單擊框?qū)傩远x圖4-2-4所示對(duì)話(huà)框左側(cè)“分類(lèi)”列中的“框”選項(xiàng)。牙齒對(duì)話(huà)框右側(cè)的“框”列如圖4-2-8所示。這些選項(xiàng)的工作方式如下：圖4-2-8“長(zhǎng)方體”列、“寬度”和“高度”下拉框：用于設(shè)置對(duì)象的寬度和高度。它