網(wǎng)頁設(shè)計與制作案例教程（第2版）（胡秀娥） 項目六（網(wǎng)頁表格與表單）_第1頁
網(wǎng)頁設(shè)計與制作案例教程（第2版）（胡秀娥） 項目六（網(wǎng)頁表格與表單）_第2頁
網(wǎng)頁設(shè)計與制作案例教程（第2版）（胡秀娥） 項目六（網(wǎng)頁表格與表單）_第3頁
網(wǎng)頁設(shè)計與制作案例教程（第2版）（胡秀娥） 項目六（網(wǎng)頁表格與表單）_第4頁
網(wǎng)頁設(shè)計與制作案例教程（第2版）（胡秀娥） 項目六（網(wǎng)頁表格與表單）_第5頁
已閱讀5頁，還剩35頁未讀， 繼續(xù)免費閱讀

下載本文檔

版權(quán)說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請進(jìn)行舉報或認(rèn)領(lǐng)

文檔簡介

網(wǎng)頁表格與表單項

目

六網(wǎng)頁設(shè)計與制作案例教程網(wǎng)頁設(shè)計

表格功能強大，格式鮮明，適合制作許多格式化較強的模塊。表單是實現(xiàn)用戶與網(wǎng)站交互的重要工具，它可以將用戶輸入的賬號及密碼等信息傳送至后臺服務(wù)器進(jìn)行驗證，從而實現(xiàn)登錄、注冊等功能。

本項目將介紹網(wǎng)頁表格與表單的相關(guān)知識，以及使用DreamweaverCC在網(wǎng)頁中添加這些元素的方法。項目導(dǎo)讀知識目標(biāo)1.熟悉表格的基礎(chǔ)知識。

2.熟悉表單的基本結(jié)構(gòu)。能力目標(biāo)思政目標(biāo)1.能夠使用DreamweaverCC為網(wǎng)頁添加表格并設(shè)置樣式。2.能夠使用DreamweaverCC為網(wǎng)頁添加表單并設(shè)置樣式。1.勤動腦、多思考，持續(xù)提升工作能力。2.了解我國高鐵的輝煌成就，提升民族自豪感。3.熟悉輸入標(biāo)簽的基礎(chǔ)知識。01任務(wù)一在網(wǎng)頁中添加表格任務(wù)描述

在網(wǎng)頁中使用表格可以清晰直觀地顯示數(shù)據(jù)。本任務(wù)首先介紹HTML5中表格的相關(guān)知識，通過制作“列車時刻表”頁面，練習(xí)在網(wǎng)頁中添加表格的方法。一、添加表格1．表格的基本結(jié)構(gòu)表格由行和列組成，它們的交點稱為單元格，如圖所示。行列單元格表格的基本結(jié)構(gòu)

使用DreamweaverCC可以直接在網(wǎng)頁文檔中添加表格，將插入點置于想要插入表格的位置，單擊“插入”面板中的“Table”按鈕，打開“Table”對話框；在“表格大小”設(shè)置區(qū)中設(shè)置表格的行數(shù)、列數(shù)、表格寬度及表格邊框的粗細(xì)，在“標(biāo)題”設(shè)置區(qū)中選擇表格表頭所在的位置，在“輔助功能”設(shè)置區(qū)中設(shè)置表格的標(biāo)題與摘要；單擊“確定”按鈕，如圖所示。

添加表格后，文檔窗口中自動生成表格的代碼，如圖所示?！安迦搿泵姘?/p>

“Table”對話框表格的代碼一個最基本的表格結(jié)構(gòu)包括行標(biāo)簽與單元格標(biāo)簽。在HTML5中，使用<table>標(biāo)簽標(biāo)記表格，使用<tr>子標(biāo)簽標(biāo)記行，使用<td>子標(biāo)簽標(biāo)記單元格，具體格式為：<table> <tr> <td>…</td>…<td>…</td> </tr> ……</table>

其中，一個<tr>標(biāo)簽表示一行，一個<td>標(biāo)簽表示一個單元格，<td>標(biāo)簽必須包含在<tr>標(biāo)簽中。此外，<table>標(biāo)簽還具有一些用于設(shè)置基本格式的屬性。（1）border屬性用于設(shè)置表格的整體邊框，它與CSS3中的border屬性用法不同，其屬性值為數(shù)值（省略其單位“px”）。（2）cellpadding和cellspacing屬性分別用于設(shè)置單元格的內(nèi)、外邊距，屬性值為數(shù)值（省略其單位“px”）。單元格內(nèi)邊距是指單元格邊框與內(nèi)容之間的距離，單元格外邊距是指單元格邊框與整個表格的邊框或其他單元格之間的距離。為了使表格結(jié)構(gòu)更加清晰，內(nèi)容表達(dá)更加明確，在網(wǎng)頁中添加表格時常需要為表格設(shè)置表頭和標(biāo)題。2．表頭

是對一組數(shù)據(jù)的概括或解釋，表頭信息可以方便用戶理解表格數(shù)據(jù)的含義，提高網(wǎng)頁的可讀性。使用DreamweaverCC在網(wǎng)頁文檔中添加表格時，選擇“Table”對話框“標(biāo)題”設(shè)置區(qū)中的選項（或、）即可添加帶表頭的表格，如圖所示。帶有左側(cè)及頂部表頭的表格代碼在HTML5中，使用<th>標(biāo)簽標(biāo)記表頭單元格，具體格式為：<table> <tr> <th>…</th>…<th>…</th> </tr> ……</table>

其中，<th>標(biāo)簽必須包含在<tr>標(biāo)簽中，一般位于表格的首行或每行的第一個單元格；<th>的屬性scope用于標(biāo)記當(dāng)前單元格是行的表頭還是列的表頭，屬性值row表示行的表頭，col表示列的表頭。3．標(biāo)題

是表格的名稱，可以提示整個表格要表達(dá)的內(nèi)容。使用DreamweaverCC在網(wǎng)頁文檔中添加表格時，在“Table”對話框中的“標(biāo)題”文本框中輸入標(biāo)題內(nèi)容即可添加帶標(biāo)題的表格，如圖所示。帶有標(biāo)題的表格代碼在HTML5中，使用<caption>標(biāo)簽標(biāo)記表格標(biāo)題，具體格式為：<table> <caption>…</caption> ……</table>

一個<table>標(biāo)簽中只能添加一個<caption>標(biāo)簽，一般位于首行。4．表格分組

在實際應(yīng)用中，根據(jù)需要可以將表格按行或列進(jìn)行分組。1按行分組。一個完整的表格按行分組可分為表頭、表體和表尾3部分，它們分別對應(yīng)<thead>、<tbody>和<tfoot>標(biāo)簽。當(dāng)表格中的數(shù)據(jù)過多以至于在屏幕中無法完整顯示時，可以將表頭與表尾設(shè)置為始終可見，表體則滾動或翻頁顯示。在實際的網(wǎng)頁制作中，一般將表體放置在表頭與表尾之后。2按列分組。當(dāng)需要單獨設(shè)置表格中某一列或多列的樣式時，可以將表格按列分組。在HTML5中，使用<col>標(biāo)簽對列進(jìn)行分組，該標(biāo)簽必須包含在<table>標(biāo)簽中。設(shè)置多個<col>標(biāo)簽時，它們將依次對應(yīng)表格中的列，當(dāng)需要同時為多個列設(shè)置樣式時，可以設(shè)置<col>標(biāo)簽的span屬性，屬性值為對應(yīng)列的個數(shù)。二、設(shè)置表格樣式使用設(shè)計視圖調(diào)整表格

在添加表格時，通過設(shè)置行數(shù)與列數(shù)能夠插入格式非常整齊的表格。但當(dāng)需要特殊格式的表格時，往往還需要調(diào)整表格的單元格以顯示特殊的行或列，這時可以通過設(shè)計視圖對表格進(jìn)行可視化調(diào)整。01例：制作“高中課程表”表格，頁面效果如圖所示。新建一個名為“schedule.html”的網(wǎng)頁文件，將網(wǎng)頁標(biāo)題命名為“在網(wǎng)頁中添加表格”。步驟1

將插入點置于<body>標(biāo)簽中，單擊“插入”面板中的“Table”按鈕，打開“Table”對話框；在“行數(shù)”文本框中輸入“13”，在“列”文本框中輸入“7”，在“表格寬度”文本框中輸入“600”，在其后的下拉列表中選擇“像素”選項；在“標(biāo)題”設(shè)置區(qū)中選擇“兩者”選項；在“標(biāo)題”文本框中輸入“高中課程表”，如圖所示。步驟2

單擊“確定”按鈕，文檔窗口自動生成代碼。切換至“設(shè)計”視圖，可以看到當(dāng)前表格的結(jié)構(gòu)，如圖所示。步驟3“Table”對話框表格的結(jié)構(gòu)

在“設(shè)計”視圖中按住鼠標(biāo)左鍵并拖動，選中表格第一行的第一列與第二列單元格，右擊此處，在彈出的快捷菜單中選擇“表格”→“合并單元格”選項，將這兩個單元格合并，如圖所示。步驟4利用“設(shè)計”視圖合并單元格

切換到“代碼”視圖，可以看到表格的代碼自動更新，如圖所示。步驟5橫向合并單元格后的表格代碼

在“設(shè)計”視圖中按住鼠標(biāo)左鍵并拖動，選中表格第一列的第二行至第六行單元格，右擊此處，在彈出的快捷菜單中選擇“表格”→“合并單元格”選項，將這5個單元格合并。此時，“代碼”視圖中的表格代碼自動更新，如圖所示。步驟6

參考步驟4與步驟6，繼續(xù)合并單元格，合并后的表格效果如圖所示。步驟7縱向合并單元格后的表格代碼合并單元格后的表格效果

在“設(shè)計”視圖中單擊表格第一行的第二列單元格，在其中輸入“星期一”，設(shè)置表格的內(nèi)容。繼續(xù)在表格中輸入其余內(nèi)容。步驟8

參考步驟9將“第一節(jié)”“第二節(jié)”……“第八節(jié)”單元格對應(yīng)的<td>標(biāo)簽修改為<th>標(biāo)簽。步驟10

切換到“代碼”視圖，將“早自習(xí)”單元格對應(yīng)的<td>標(biāo)簽修改為<th>標(biāo)簽，如圖所示。步驟9修改標(biāo)簽后的表格代碼

在頁面中定義樣式。在<style>標(biāo)簽中添加tr選擇器，設(shè)置所有行的水平對齊方式為居中對齊。步驟1102使用CSS設(shè)置表格樣式（1）表格邊框。在實際的網(wǎng)頁制作中，通常不會在網(wǎng)頁文件中設(shè)置<table>的border屬性，而是在CSS3中設(shè)置<tr>、<th>或<td>標(biāo)簽的border屬性。使用DreamweaverCC設(shè)置表格邊框的方法與設(shè)置圖像元素邊框的方法相同。

使用CSS可以設(shè)置的表格樣式有表格邊框、隔行換色等。（2）隔行換色。隔行換色是表格的一種經(jīng)典樣式，它可以提升用戶瀏覽數(shù)據(jù)的速度與準(zhǔn)確度。隔行換色表格的實現(xiàn)原理是分別設(shè)置表格奇數(shù)行與偶數(shù)行的背景顏色與文本顏色。常用于設(shè)置隔行換色的結(jié)構(gòu)選擇器為“:nth-child(參數(shù))”，參數(shù)odd表示奇數(shù)，even表示偶數(shù)。此外，還可以使用公式表示參數(shù)。例如，“2n+1”與“2n”分別表示奇數(shù)與偶數(shù)，“n”表示計數(shù)器，從0開始計數(shù)。掃描二維碼觀看詳細(xì)步驟視頻任務(wù)實施——制作“列車時刻表”頁面本任務(wù)將通過制作“列車時刻表”頁面，練習(xí)在網(wǎng)頁中添加表格并設(shè)置樣式的操作，頁面效果如圖所示?！傲熊嚂r刻表”頁面效果02任務(wù)二在網(wǎng)頁中添加表單任務(wù)描述

表單是實現(xiàn)用戶與網(wǎng)站溝通的重要元素，主要用于數(shù)據(jù)的收集與處理。

本任務(wù)首先介紹HTML5中表單的基本結(jié)構(gòu)及其中常用控件的用法，通過制作“調(diào)查問卷”頁面練習(xí)在網(wǎng)頁中添加表單的方法。一、添加表單

使用DreamweaverCC可以直接在網(wǎng)頁文檔中添加表單，將插入點置于想要添加表單的位置；打開“插入”面板，在最上方的下拉列表中選擇“表單”選項，面板中顯示“表單”列表；接著單擊“表單”按鈕、“標(biāo)簽”按鈕和具有某種功能的表單控件按鈕（如“文本”按鈕），可添加一個簡單的表單結(jié)構(gòu)，如圖所示?！氨韱巍绷斜?/p>

添加表單后，文檔窗口中自動生成一個簡單表單結(jié)構(gòu)的代碼，如圖所示。簡單表單結(jié)構(gòu)的代碼

表單結(jié)構(gòu)通常包括表單域與表單控件。其中，表單控件至少包含一個提交按鈕。此外，為使表單更具實際意義，可在表單域中添加提示信息，如圖所示。一般將表單控件和提示信息統(tǒng)稱為表單對象。提示信息表單域表單控件提交按鈕表單的基本結(jié)構(gòu)01表單域：放置表單控件與提示信息的容器，用于收集用戶輸入或選擇的數(shù)據(jù)，并以一定的方式傳送到服務(wù)器。

在HTML5中，使用<form>標(biāo)簽標(biāo)記表單域，具體格式為：

其中，action屬性表示接收表單數(shù)據(jù)的服務(wù)器地址，屬性值使用URL；method表示提交表單數(shù)據(jù)的方式，默認(rèn)的屬性值為get，一般使用post。<form>標(biāo)簽還有一些其他屬性，例如，name表示表單名稱；autocomplete表示自動完成功能，用于將表單控件中曾輸入過的內(nèi)容記錄下來，當(dāng)再次單擊表單控件時，自動展開歷史記錄的列表，用戶選擇歷史記錄選項即可快速輸入內(nèi)容，屬性值有on（具有自動完成功能）和off（無自動完成功能）；novalidate屬性用于在提交數(shù)據(jù)時關(guān)閉表單控件對輸入內(nèi)容的驗證，屬性值為novalidate。<formaction="url"method="提交方式">……</form>04提示信息：一般位于對應(yīng)的表單控件之前或之后，用于說明表單控件的功能或含義，提示用戶表單控件所要收集的信息內(nèi)容。在HTML5中，使用<label>標(biāo)簽標(biāo)記表單控件的提示信息（也可以直接使用文本等標(biāo)簽添加提示信息），具體格式為：02表單控件：體現(xiàn)表單功能的控件，如文本框、單選鈕、復(fù)選框、提交按鈕、搜索框等。在HTML5中，<input>標(biāo)簽及若干其他標(biāo)簽可用于標(biāo)記表單控件。03提交按鈕：一個特殊的表單控件，用于傳送信息至后臺服務(wù)器。<labelfor="name">提示信息</label><inputtype="類型"id="name"/>其中，<label>標(biāo)簽的for屬性用于綁定提示信息與表單控件，其屬性值為對應(yīng)表單控件的id屬性值。二、表單控件

表單控件用于收集用戶在表單中輸入的信息。在HTML5中，常用輸入標(biāo)簽<input/>標(biāo)記表單控件。通過為該標(biāo)簽設(shè)置不同的type屬性值可以創(chuàng)建不同類型的輸入型文本框，如密碼框、單選鈕與復(fù)選框等。在如圖所示的“表單”列表中單擊輸入標(biāo)簽對應(yīng)的按鈕即可在頁面中添加功能各異的輸入框，下面進(jìn)行簡單介紹:1．常用表單控件“表單”列表（1）“文本”按鈕

表示文本框，用于輸入簡短的文本，如用戶名、賬號等。其代碼為<inputtype="text"/>。（2）“電子郵件”按鈕

表示郵箱地址文本框，用于輸入郵箱地址文本，它可以驗證文本框中的內(nèi)容是否符合郵箱地址的格式。其代碼為<inputtype="email"/>。（3）“密碼”按鈕

表示密碼框，用于輸入密碼文本，其中輸入的內(nèi)容將顯示為黑色的圓點。其代碼為<inputtype="password"/>。（4）“Url”按鈕

表示地址文本框，用于輸入URL文本，它可以驗證文本框中的內(nèi)容是否符合URL格式。其代碼為<inputtype="url"/>。（5）“Tel”按鈕

表示電話號碼文本框，用于輸入電話號碼文本，但由于電話號碼的格式并不統(tǒng)一，所以常使用pattern屬性設(shè)置正則表達(dá)式來限制輸入文本的格式。其代碼為<inputtype="tel"/>。（6）“搜索”按鈕

表示搜索框，它能夠記錄輸入的字符，將其作為網(wǎng)站搜索的關(guān)鍵詞。其代碼為<inputtype="search"/>。（7）“數(shù)字”按鈕

表示數(shù)值文本框，用于輸入數(shù)字，還可以通過設(shè)置max、min和step屬性來限制數(shù)值的最大值、最小值和數(shù)值間隔，value屬性可以設(shè)置按鈕的默認(rèn)值。其代碼為<inputtype="number"/>。（8）“范圍”按鈕

表示數(shù)值范圍滑塊，就是將數(shù)值文本框顯示為一個可拖動的滑塊，使用鼠標(biāo)指針拖動滑塊即可調(diào)節(jié)數(shù)值。其代碼為<inputtype="range"/>。（8）“范圍”按鈕

表示數(shù)值范圍滑塊，就是將數(shù)值文本框顯示為一個可拖動的滑塊，使用鼠標(biāo)指針拖動滑塊即可調(diào)節(jié)數(shù)值。其代碼為<inputtype="range"/>。（9）“顏色”按鈕

表示顏色輸入框，單擊后將打開“顏色”對話框，可在其中選擇顏色。其代碼為<inputtype="color">。（10）“月”“周”“日期”“時間”“日期時間”“日期時間（當(dāng)?shù)兀卑粹o分別表示不同格式的日期時間文本框，它們的代碼分別為<inputtype="month">、<inputtype="week">、<inputtype="date">、<inputtype="time">、<inputtype="datetime">與<inputtype="datetime-local">。（11）“按鈕”

表示普通按鈕，需要配合JavaScript使用。其代碼為<inputtype="button"/>。（12）“‘提交’按鈕”

表示提交按鈕，用戶輸入信息后，需要單擊提交按鈕才能將信息傳送到服務(wù)器。按鈕上的文本（按鈕名稱）默認(rèn)為“提交”，也可用value屬性設(shè)置。其代碼為<inputtype="submit"/>。（13）“‘重置’按鈕”

表示重置按鈕，用于清空表單中已輸入的信息，按鈕上的文本（按鈕名稱）默認(rèn)為“重置”，也可用value屬性設(shè)置。其代碼為<inputtype="reset"/>。（14）“文件”按鈕

表示文件域，其包括一個“選擇文件”按鈕和表示文件信息的文本，單擊“選擇文件”按鈕，將打開“打開”對話框，可在其中選擇要上傳的文件。其代碼為<inputtype="file"/>。（15）“圖像按鈕”

表示圖像形式的提交按鈕，它與普通提交按鈕功能相同，區(qū)別在于它能夠使用圖像代替默認(rèn)的按鈕樣式，使按鈕更加美觀。其代碼為<inputtype="image"/>。（16）“單選按鈕”

表示一個單選鈕，用于單項選擇，如選擇性別、詢問意愿（是或否）等。其代碼為<inputtype="radio"/>。如需添加一組單選鈕，可直接單擊“單選按鈕組”按鈕，打開“單選按鈕組”對話框，在“名稱”對話框中輸入單選鈕組的名稱，在下方的列表框中添加或刪除單選鈕，并輸入提示信息與單選鈕的值，單擊“確定”按鈕即可，如圖所示。（17）“復(fù)選框”

表示一個復(fù)選框，用于多項選擇（也可以只選擇一項），如選擇興趣愛好、喜歡的食物等。其代碼為<inputtype="checkbox"/>。如需添加一組復(fù)選框，可直接單擊“復(fù)選框組”按鈕，打開“復(fù)選框組”對話框，設(shè)置方法與單選鈕組類似?！皢芜x按鈕組”對話框2．其他表單控件

在HTML5中，除了<input>標(biāo)簽標(biāo)記的常用表單控件之外，還有一些其他的表單控件，下面分別介紹。（1）“文本區(qū)域”按鈕表示文本區(qū)域，用于輸入大量信息，其代碼為<textareacols="每行字符數(shù)"rows="顯示行數(shù)">…</textarea>。（2）“選擇”按鈕表示選擇框，其代碼格式為：

其中，<select>標(biāo)簽中包含一個或多個<option>標(biāo)簽，用于標(biāo)記選項。這兩個標(biāo)簽常用的屬性、屬性值及說明如表1所示。<select> <option>選項</option> ……</select>表1<select>標(biāo)簽與<option>標(biāo)簽的屬性、屬性值及說明標(biāo)簽屬性屬性值說明<select>size正整數(shù)表示選擇框的選項個數(shù)multiplemultiple表示選擇框不以默認(rèn)的單行顯示，而是以多行顯示，并且按住Ctrl鍵可選擇多個選項<option>selectedselected設(shè)置該屬性的選項在打開網(wǎng)頁后默認(rèn)處于選中狀態(tài)3．表單控件的屬性

通過設(shè)置表單控件的屬性，能夠限制輸入的信息或設(shè)置表單控件的狀態(tài)等，各屬性及屬性值的說明如表2所示。表2

表單控件的屬性、屬性值及說明屬性屬性值說明name自定義表單控件的名稱value自定義表單控件的默認(rèn)值readonlyreadonly表單控件不可編輯修改disableddisabled禁用該表單控件（顯示為灰色）checkedchecked該項默認(rèn)選中（單選鈕或復(fù)選框）autocompleteon/off自動完成功能autofocusautofocus自動獲取焦點form<form>的id屬性值指定控件所屬表單placeholder字符串顯示在輸入型文本框中的輸入提示requiredrequired該表單控件不可為空pattern字符串（正則表達(dá)式）驗證輸入內(nèi)容的模式readonly屬性用于設(shè)置表單控件中的內(nèi)容不可修改，而disabled屬性用于禁用表單控件。兩者都會使輸入型文本框變?yōu)椴豢删庉嫚顟B(tài)，但readonly屬性無法作用于單選鈕及復(fù)選框等控件。>2checked屬性用于設(shè)置默認(rèn)選中某個單選鈕或復(fù)選框。>3autocomplete屬性用于設(shè)置自動完成功能，與<form>標(biāo)簽的autocomplete屬性用法相同。>4name屬性用于設(shè)置表單控件的名稱，value屬性用于設(shè)置表單控件的默認(rèn)值，為同一個表單控件設(shè)置這兩個屬性之后，服務(wù)器即可通過name屬性值找到對應(yīng)的value屬性值。>1autofocus屬性用于設(shè)置表單控件自動獲取焦點，也就是在網(wǎng)頁加載后，不需要單擊，表單控件將自動獲得鼠標(biāo)指針的焦點。>5placeholder屬性用于設(shè)置表單控件內(nèi)的提示信息，該信息在表單控件為空時顯示，輸入任意字符后即消失，文本顏色默認(rèn)為灰色。>7pattern屬性用于設(shè)置限制表單控件輸入內(nèi)容的正則表達(dá)式。>9form屬性用于設(shè)置表單控件所屬的表單，屬性值為所屬表單的id屬性值。通過設(shè)置該屬性，可將表單控件放置在<form>標(biāo)簽之外。>6required屬性用于設(shè)置表單控件不可為空，為某個表單控件設(shè)置了該屬性后，不設(shè)置控件內(nèi)容就無法提交其所在表單。>84．表單對象分組

對于表單控件較多的表單，可將它們分組放置以便用戶理解。在HTML5中，使用<fieldset>標(biāo)簽為表單對象分組；使用<legend>標(biāo)簽設(shè)置表單分組的標(biāo)題。具體格式為：

默認(rèn)情況下，分成一組的表單對象外側(cè)會顯示一個包圍框，分組標(biāo)題顯示在包圍框的左上角。<fieldset> <legend>分組標(biāo)題</legend> 表單對象</fieldset>三、設(shè)置表單樣式

因表單控件特有的交互屬性，通常會通過偽類選擇器匹配表單控件的各種狀態(tài)，從而設(shè)置表單的樣式。

（1）“:focus”選擇器可用于設(shè)置表單控件獲得焦點時的樣式。當(dāng)鼠標(biāo)指針單擊輸入型文本框時，光標(biāo)出現(xiàn)在文本框中，即稱其獲得了焦點。部分表單控件具有獲得焦點時的樣式效果，不同瀏覽器的效果有所不同。在實際的網(wǎng)頁制作中，通常需要重新設(shè)置該樣式，以符合網(wǎng)頁的整體風(fēng)格。

例如，使用該選擇器設(shè)置文本框獲得焦點時的樣式為點線邊框，如圖所示。設(shè)置文本框獲得焦點時的樣式文本框獲得焦點時的頁面效果

（2）“:checked”選擇器可用于設(shè)置選中的單選鈕或復(fù)選框的樣式。獲得焦點，未設(shè)置樣式，即默認(rèn)效果獲得焦點，呈點線邊框例：為表單添加單選鈕組，并為其添加樣式，頁面效果如圖所示。將插入點置于<body>標(biāo)簽中，打開“插入”面板，在最上方的下拉列表中選擇“表單”選項，面板中顯示“表單”列表，單擊其中的“表單”按鈕，添加一個<form>標(biāo)簽。2在DreamweaverCC中創(chuàng)建一個名為“ex4.html”的網(wǎng)頁文檔，將其網(wǎng)頁標(biāo)題修改為“設(shè)置表單樣式”。1

接著將插入點置于<form>標(biāo)簽中，單擊“插入”面板中的“標(biāo)簽”按鈕，添加一個<label>標(biāo)簽，并在其中輸入“性別：”。

再將插入點置于<label>標(biāo)簽下方，單擊“插入”面板中的“單選鈕”按鈕，添加一個type屬性值為radio的<input>標(biāo)簽，并設(shè)置其id屬性值為boy，name屬性值為sex。

將插入點置于<input>標(biāo)簽下方，單擊“插入”面板中的“標(biāo)簽”按鈕，添加一個<label>標(biāo)簽，設(shè)置其for屬性值為boy，在標(biāo)簽內(nèi)輸入“男”。

使用同樣的方法添加“女”單選鈕，具體代碼如圖所示。表單的HTML代碼選中未選中在頁面中定義樣式。在<style>標(biāo)簽中添加input[type="radio"]選擇器，設(shè)置單選鈕的顯示方式為“none”，此時頁面效果如圖所示。4將文件保存，按“F12”鍵在瀏覽器中打開。此時的單選鈕組為默認(rèn)的頁面效果，單擊單選鈕或其對應(yīng)的提示信息都可以選中單選鈕，如圖所示。3將單選鈕隱藏及頁面效果

溫馨提示

  • 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預(yù)覽，若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時也不承擔(dān)用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。

最新文檔

評論

0/150

提交評論