網(wǎng)頁設(shè)計(jì)與制作 課件 項(xiàng)目6 使用表單

任務(wù)6-1認(rèn)識(shí)表單元素

任務(wù)6-2運(yùn)用表單元素設(shè)計(jì)注冊(cè)表

任務(wù)6-3使用行為任務(wù)6-1認(rèn)識(shí)表單元素1.表單的概念表單是用于實(shí)現(xiàn)瀏覽者與網(wǎng)頁制作者之間信息交互的一種網(wǎng)頁對(duì)象，在Internet中表單被廣泛應(yīng)用于各種信息的搜集與反饋，如圖6-1所示就是一個(gè)嵌入了內(nèi)容的個(gè)人注冊(cè)表單。2.表單的構(gòu)成在HTML中，一個(gè)完整的表單通常由表單控件、提示信息和表單域3個(gè)部分組成。(1)表單控件：具體的表單功能項(xiàng)，如按鈕、單選按鈕、復(fù)選框、文本輸入框等。(2)提示信息：表單中包含的說明性文字，提示用戶進(jìn)行相關(guān)操作。(3)表單域：相當(dāng)于一個(gè)窗口，用來容納所有的表單控件和提示信息。在Dw的編輯窗口中表單域顯示為一個(gè)虛線框，其他的表單對(duì)象必須放入這個(gè)框內(nèi)才起作用，如圖6-2所示。在Dw中，若看不到創(chuàng)建的表單域即標(biāo)記表單域的虛線框，則可選擇菜單命令“查看”→“可視化助理”→“不可見元素”，使虛線框可見，如圖6-3所示。3.創(chuàng)建表單在HTML中，用<form></form>標(biāo)簽創(chuàng)建一個(gè)表單，<form></form>中的所有內(nèi)容都會(huì)被提交給服務(wù)器。創(chuàng)建表單的基本語法格式如下：<formaction="url地址"method="提交方式"name="表單名">表單控件</form>標(biāo)簽中的內(nèi)容解釋如下：(1)?action屬性：用于指定接收并處理表單數(shù)據(jù)的服務(wù)器程序的url地址。(2)?method屬性：用于設(shè)置表單數(shù)據(jù)的提交方式，其取值可為get或post。(3)?name：用于指定表單的名稱。4.表單的使用方法1)創(chuàng)建表單創(chuàng)建表單的基本步驟如下：(1)確定需要收集的信息，根據(jù)信息特點(diǎn)設(shè)計(jì)表單。(2)在表單中插入不同的表單控件元素。(3)設(shè)置表單域的屬性。(4)設(shè)置通過表單所收集的信息的處理方式。(5)設(shè)置確認(rèn)網(wǎng)頁，確認(rèn)已經(jīng)接收到用戶填寫的信息，并請(qǐng)用戶核對(duì)是否正確。表單只是收集瀏覽者輸入的信息，其數(shù)據(jù)的接收、傳遞、處理以及反饋工作是由通用網(wǎng)關(guān)接口(CommonGatewayInterface，CGI)程序來完成的。如果要在網(wǎng)頁中添加表單，就必須編寫相應(yīng)的CGI程序。2)添加表單控件在DreamweaverCC中要插入表單，使用“插入”面板中的“表單”欄即可完成，如圖6-4是“插入”面板的“表單”工具欄。3)表單對(duì)象的屬性設(shè)置DreamweaverCC表單對(duì)象包括文本域、按鈕、圖像域、復(fù)選框、單選鈕、列表、菜單、文件域及隱藏域等。(1)“表單”控件。在添加表單之后，文檔中將以虛線框表示表單區(qū)域。表單對(duì)象只能插入在虛線框內(nèi)。為了更合理地安排表單元素，可以使用表格來布局表單元素。“表單”控件的屬性可以通過表單“屬性”面板進(jìn)行設(shè)置，如圖6-5所示。在插入表單后，需要在表單(虛線框)內(nèi)添加表單元素，如文本域、單選按鈕、復(fù)選框以及彈出菜單等。利用“插入”面板的“表單”欄可以方便地插入表單中的各個(gè)元素。(2)“文本字段”控件?！拔谋咀侄巍笨丶膶傩钥梢酝ㄟ^“屬性”面板進(jìn)行設(shè)置，如圖6-6所示。(3)“密碼”控件?！懊艽a”控件的屬性可以通過其“密碼”控件的“屬性”面板進(jìn)行設(shè)置，如圖6-7所示?！懊艽a”控件的“屬性”面板中的設(shè)置選項(xiàng)意義與“文本框”控件的設(shè)置選項(xiàng)意義相同。(4)“單選框”控件?！皢芜x框”控件的屬性可以通過其“屬性”面板進(jìn)行設(shè)置，如圖6-8所示。單選項(xiàng)的文本內(nèi)容可直接在選中該單選項(xiàng)時(shí)修改。(5)“單選按鈕組”控件。“單選按鈕組”控件的屬性可以通過其“單選按鈕組”對(duì)話框進(jìn)行設(shè)置，如圖6-9所示。(6)“復(fù)選框”控件。復(fù)選框允許在一組選項(xiàng)中選擇多個(gè)選項(xiàng)，用戶可以選擇任意多個(gè)合適的選項(xiàng)，一次只能建立一個(gè)。復(fù)選框?qū)γ總€(gè)單獨(dú)的響應(yīng)進(jìn)行“關(guān)閉”或“打開”的狀態(tài)切換。“復(fù)選框”控件的屬性面板如圖6-10所示。(7)“復(fù)選框組”控件?！皬?fù)選框組”控件一次可以建立多個(gè)復(fù)選框。單擊“復(fù)選框組”控件按鈕，彈出如圖6-11所示的“復(fù)選框組”對(duì)話框，用戶可以添加、刪除或修改標(biāo)簽及其值，操作方式與“單選按鈕組”對(duì)話框的操作方法相同。(8)“選擇”控件。彈出(下拉)菜單和“列表值”按鈕都列出了一組用戶可以從中選擇的值。彈出菜單和“列表值”按鈕是有區(qū)別的。彈出菜單只允許單項(xiàng)選擇，而“列表值”按鈕則可選取多項(xiàng)。要插入列表/菜單，可將光標(biāo)定位后，單擊“插入”面板中的“選擇”控件按鈕?！斑x擇”控件的屬性可以通過其“屬性”面板進(jìn)行設(shè)置，如圖6-12所示。設(shè)置“選擇”控件的屬性，可以在選中“選擇”控件之后，在“選擇”控件下面的文本域中輸入“選擇”控件的名稱。要設(shè)置選擇項(xiàng)的內(nèi)容，可以通過單擊“列表值”按鈕添加選擇的項(xiàng)目。單擊“列表值”按鈕，彈出修改“列表值”對(duì)話框，如圖6-13所示。(9)“提交”按鈕控件?！疤峤弧卑粹o控件用于提交表單的標(biāo)準(zhǔn)任務(wù)，也可以執(zhí)行自定義功能。要插入“表單”按鈕，將光標(biāo)定位后，單擊“插入”面板中的“提交”按鈕，創(chuàng)建默認(rèn)名為“submit”且文本顯示為“提交”的按鈕?！疤峤弧卑粹o控件的屬性可以通過其“屬性”面板進(jìn)行設(shè)置，如圖6-14所示。(10)“重置”按鈕控件?！爸刂谩卑粹o控件用于重置表單的標(biāo)準(zhǔn)任務(wù)，也可以執(zhí)行自定義功能。要插入表單的“重置”按鈕，可將光標(biāo)定位后，單擊“插入”面板中的“重置”按鈕，創(chuàng)建默認(rèn)名為“reset”且文本顯示為“重置”的按鈕。“重置”按鈕控件的屬性可以通過其“屬性”面板進(jìn)行設(shè)置，如圖6-15所示。(11)“文本區(qū)域”控件?！拔谋緟^(qū)域”控件用于創(chuàng)建一個(gè)可以輸入多行多列的文本。顯示時(shí)的行和列可以指定。要插入表單的“文本區(qū)域”，將光標(biāo)定位后，單擊“插入”面板中的“文本區(qū)域”，創(chuàng)建文本區(qū)域?！拔谋緟^(qū)域”控件的屬性可以通過其“屬性”面板進(jìn)行設(shè)置，如圖6-16所示。4)表單應(yīng)用舉例下面制作一個(gè)用戶登錄網(wǎng)頁，效果如圖6-17所示。(1)分析：為了控制頁面的顯示效果，使頁面更美觀，可以使用表格控制表單項(xiàng)，此時(shí)需在網(wǎng)頁文檔中插入以下內(nèi)容：①插入1個(gè)表單域。②在表單域中插入1個(gè)3行3列的表格。③在表格中插入1個(gè)文本域。④在表格中插入1個(gè)密碼域。⑤在表格中插入1個(gè)提交按鈕。(2)具體操作步驟如下：①創(chuàng)建并打開網(wǎng)頁文檔。②在Dw設(shè)計(jì)視圖窗口單擊“插入”面板中的“表單域”按鈕創(chuàng)建表單域。③在表單域中插入1個(gè)3行3列的表格，表格的ID設(shè)置為“table01”，“寬”設(shè)置為“450像素”，“邊框粗細(xì)”設(shè)置為“0”，“單元格邊框”設(shè)置為“5”，“單元格間距”設(shè)置為“0”。標(biāo)題選中“頂部”，在“標(biāo)題”文本框中輸入“輸入您的會(huì)員賬號(hào)與密碼”，如圖6-18所示。④單擊“確定”按鈕，效果如圖6-19所示。⑤選中表格的第1列，在“屬性”面板中設(shè)置“水平”為“右對(duì)齊”，設(shè)置“寬”為28%，如圖6-20所示。⑥在表格的第1行第1列中輸入文字“e-mail或賬號(hào)：”，第2行第1列輸入文字“登錄密碼：”。⑦選中表格的第2列，將其寬度設(shè)置為48%。⑧選中表格的第2行第3列，設(shè)置“水平”為“左對(duì)齊”，并輸入文字“忘記密碼？”，效果如圖6-21所示。⑨在表格的第1行第2個(gè)單元格中插入“文本”控件，并去掉文本框前的文字。⑩在表格的第2行第2個(gè)單元格中插入“密碼”控件，并去掉文本框前的文字。?選擇表格的第3行第2列，設(shè)置對(duì)齊方式為“居中對(duì)齊”。插入“提交按鈕”控件，并將其值修改為“立即登錄”，如圖6-22所示。?運(yùn)行，即在瀏覽器中渲染，其效果如圖6-17所示。任務(wù)6-2運(yùn)用表單元素設(shè)計(jì)注冊(cè)表1.任務(wù)分析為了控制頁面的顯示效果，使頁面更加美觀，可以使用表格控制表單項(xiàng)，此時(shí)需在網(wǎng)頁文檔中插入以下內(nèi)容：(1)插入1個(gè)表單域。(2)在表單域中插入一個(gè)14行2列的表格，寬度為350像素，第1列寬為25%。(3)在表格中插入3個(gè)“文本”控件(用戶名、擴(kuò)展信息和回答)。(4)在表格中插入2個(gè)“密碼”控件(密碼和確認(rèn)密碼)。(5)在表格中插入1個(gè)“e-mail郵件”控件。(6)在表格中插入1個(gè)“選擇”控件。(7)在表格中插入1個(gè)“單選按鈕組”控件。(8)在表格中插入1個(gè)“復(fù)選按鈕組”控件。(9)在表格中插入1個(gè)“日歷”控件。(10)在表格中插入1個(gè)“文本區(qū)域”控件。(11)在表格中分別插入1個(gè)“提交”按鈕控件和“重置”按鈕控件。2.任務(wù)實(shí)施(1)創(chuàng)建并打開網(wǎng)頁文檔。(2)在Dw設(shè)計(jì)視圖窗口單擊“插入”面板中的“表單”按鈕創(chuàng)建表單域。(3)在表單域中插入一個(gè)14行2列的表格，表格的“ID”設(shè)置為“table02”，“寬”設(shè)置為“350像素”，“邊框粗細(xì)”設(shè)置為“0”，“單元格邊距”設(shè)置為“5”，“單元格間距”設(shè)置為“0”。標(biāo)題選中“頂部”，在“標(biāo)題”文本框中輸入“注冊(cè)表單”，如圖6-23所示。(4)單擊“確定”按鈕，效果如圖6-24所示。(5)選中表格的第1列，在“屬性”面板中設(shè)置“寬度”為25%。(6)選中表格的第1行，單擊“修改”→“表格”→“合并單元格”菜單項(xiàng)，合并第1行單元格，并輸入文字“基本信息(*為必填)”且左對(duì)齊。(7)在表格的第1列其他單元格中填入相應(yīng)的文字，如圖6-25所示。(8)鼠標(biāo)放在“用戶名”右邊的單元格內(nèi)，在“插入”面板的“表單”欄中選擇“文本”選項(xiàng)，去掉其相應(yīng)的文字。同樣方法，在“擴(kuò)展信息”和“回答”右邊單元格內(nèi)添加“文本”并去掉文字。(9)鼠標(biāo)放在“密碼”右邊的單元格內(nèi)，在“插入”面板的“表單”欄中選擇“密碼”選項(xiàng)，去掉其相應(yīng)的文字。同樣方法，在“確認(rèn)密碼”右邊單元格內(nèi)添加“密碼”選項(xiàng)。(10)鼠標(biāo)放在“e-mail”右邊的單元格內(nèi)，在“插入”面板的“表單”欄中選擇“@電子郵件”，去掉相應(yīng)的文字，效果如圖6-26所示。(11)鼠標(biāo)放在“安全提問”右邊的單元格內(nèi)，在“插入”面板的“表單”欄中選擇“選擇”選項(xiàng)，去掉其相應(yīng)的文字。單擊屬性面板的“

”按鈕，為該列表添加列表值，如圖6-27所示。(12)鼠標(biāo)放在“性別”右邊的單元格內(nèi)，在“插入”面板的“表單”欄中選擇“單選按鈕組”選項(xiàng)，彈出“單選按鈕組”對(duì)話框，分別將標(biāo)簽文本修改為“男”和“女”，布局為“換行符”，并單擊“確定”按鈕。同時(shí)在代碼視圖中刪除“男”和“女”間的<br/>標(biāo)簽，如圖6-28所示。(13)鼠標(biāo)放在“生日”右邊的單元格內(nèi)，在“插入”面板的“表單”欄中選擇“日歷”選項(xiàng)，插入日期控件，用于用戶選擇日期。(14)鼠標(biāo)放在“愛好”右邊的單元格內(nèi)，在“插入”面板的“表單”欄中選擇“復(fù)選按鈕組”選項(xiàng)，彈出“復(fù)選按鈕組”對(duì)話框，單擊

添加標(biāo)簽至4個(gè)且分別將標(biāo)簽文本修改為“音樂”“籃球”“足球”和“徒步”，布局為“換行符”，并單擊“確定”按鈕。同時(shí)在代碼視圖中刪除“<br/>標(biāo)簽，如圖6-29所示。(15)鼠標(biāo)放在“自我介紹”右邊的單元格內(nèi)，在“插入”面板的“表單”欄中選擇“文本區(qū)域”選項(xiàng)，在“屬性”面板中設(shè)置“Rows”為6，“Cols”為30，即6行30列的列表框。(16)鼠標(biāo)放在表格的最后一行表格右側(cè)，在“插入”面板的“表單”欄中分別選擇“提交”按鈕和“重置”按鈕選項(xiàng)，將相應(yīng)的屬性面板中的Value值改為“注冊(cè)”和“重置”，如圖6-30所示。(17)在瀏覽器中渲染此網(wǎng)頁，效果如圖6-1所示。(18)使用CSS進(jìn)一步修飾網(wǎng)頁，使其更加美觀。任務(wù)6-3使用行為一般情況下，要讓網(wǎng)頁具有動(dòng)態(tài)效果或交互功能，則需要在網(wǎng)頁中加入腳本程序，如使用JavaScript代碼，就需要編寫者不僅熟悉網(wǎng)頁制作還要精通JavaScript代碼。在DreamweaverCC中，用戶可以使用行為來設(shè)計(jì)網(wǎng)頁的動(dòng)態(tài)效果和交互功能。使用DreamweaverCC設(shè)計(jì)網(wǎng)頁，不需要手動(dòng)編寫JavaScript代碼，程序會(huì)自動(dòng)生成。即使不懂代碼的編寫，設(shè)計(jì)者也能完成網(wǎng)頁動(dòng)態(tài)效果的制作。1.行為的概念行為是在某一對(duì)象上因?yàn)槟骋皇录|發(fā)某一動(dòng)作的綜合描述。它是被用來動(dòng)態(tài)響應(yīng)用戶操作，改變當(dāng)前頁面效果或執(zhí)行特定任務(wù)的一種方法。行為是由事件、對(duì)象和動(dòng)作組成的。事件是瀏覽器生成的消息，是一個(gè)動(dòng)作具體執(zhí)行的原因，如鼠標(biāo)單擊執(zhí)行某一動(dòng)作行為。行為是預(yù)先編寫好的JavaScript代碼。DreamweaverCC包含了百余個(gè)事件和行為，同時(shí)也提供了擴(kuò)展行為的功能，可以通過下載第三方的行為，擴(kuò)展其行為的種類。如果擅長(zhǎng)JavaScript語言，也可以自己書寫行為。但要注意附加行為時(shí)的對(duì)象必須是那些可以接受事件和動(dòng)作的對(duì)象。此外，行為的使用很大程度上取決于瀏覽器的版本。版本越高，其能接受的事件也就越多。2.行為的基本操作使用Dreamwea