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

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

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

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

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

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