中職網(wǎng)頁制作基礎(chǔ)（Dreamweaver CS6）（第2版）項(xiàng)目六 創(chuàng)建表單電子課件（）

(中職）網(wǎng)頁制作基礎(chǔ)（DreamweaverCS6）（第2版）項(xiàng)目六創(chuàng)建表單電子課件（工信版）項(xiàng)目六創(chuàng)

建

表

單

項(xiàng)目目標(biāo)（1）了解表單在網(wǎng)頁中的作用；（2）在網(wǎng)頁中創(chuàng)建表單并設(shè)置表單屬性；（3）表單元素及各元素的屬性。項(xiàng)目描述

本項(xiàng)目將通過4個(gè)不同任務(wù)來說明如何在網(wǎng)頁中創(chuàng)建表單，以及如何設(shè)置表單的屬性。任務(wù)1制作客戶反饋頁任務(wù)目標(biāo)（1）了解表單的相關(guān)知識(shí)；（2）掌握添加單選按鈕并設(shè)置其屬性的方法；（3）掌握添加文本域并設(shè)置其屬性的方法；（4）掌握添加文本區(qū)域并設(shè)置其屬性的方法；（5）掌握添加按鈕并設(shè)置其屬性的方法。

任務(wù)1制作客戶反饋頁任務(wù)描述

上海企業(yè)網(wǎng)為了了解更多客戶的需求及意見，在網(wǎng)頁中通過表單頁面實(shí)現(xiàn)“客戶留言”頁面以得到客戶的反饋信息，搭建了信息反饋平臺(tái)。任務(wù)分析

本任務(wù)通過制作“客戶留言”頁面了解和掌握在網(wǎng)頁中如何創(chuàng)建基本表單項(xiàng)，為了使表單效果最好，這里采用表格技術(shù)，規(guī)范表單中的各個(gè)元素。

操作步驟步驟1．創(chuàng)建表單。（1）打開本書素材“素材\項(xiàng)目6\示例\01\原始文件\plus\book\index.html”，將光標(biāo)移動(dòng)到所需位置，插入一個(gè)7行3列的表格。（2）合并單元格。操作步驟步驟2．插入單選按鈕。（1）將光標(biāo)移動(dòng)到第一行第二列單元格中，選擇“插入”→“表單”→“單選按鈕”命令，彈出“輸入標(biāo)簽輔助功能屬性”對(duì)話框，并設(shè)置“標(biāo)簽”為“公共”、“位置”為“在表單項(xiàng)前”，隨即單選按鈕被插入到頁面中。（2）用同樣的方法插入“悄悄話”單選按鈕。（3）選中“公開”單選按鈕，在其“屬性”面板中設(shè)置該單選按鈕的名稱，如“show”，設(shè)置“選定值”為“0”、“初始狀態(tài)”為“已勾選”。（4）選中“悄悄話”單選按鈕，在其“屬性”面板中設(shè)置該單選按鈕的名稱也為“show”，設(shè)置“選定”值為“1”、“初始狀態(tài)”為“未選中”。操作步驟步驟3．插入文本域。（1）將光標(biāo)移動(dòng)到添加文本域的單元格中，選擇“插入”→“表單”→“文本域”命令，隨即文本域被插入到頁面中。（2）在其“屬性”面板中設(shè)置“字符寬度”為“20”、“最多字符數(shù)”為“30”。（3）按照以上步驟在“電話/QQ”“Email”“主頁”中插入相應(yīng)的文本域即可。操作步驟步驟4．插入文本區(qū)域。（1）在右側(cè)單元格中嵌套表格。（2）將光標(biāo)移動(dòng)到要添加文本區(qū)域的位置，選擇“插入”→“表單”→“文本區(qū)域”命令，隨即文本區(qū)域被插入到頁面中。（3）設(shè)置文本區(qū)域表單項(xiàng)的屬性，“字符寬度”為“60”、“行數(shù)”為“8”、“初始值”為“請(qǐng)?jiān)诖溯斎肽牧粞詢?nèi)容!”。操作步驟步驟5．插入按鈕。（1）將光標(biāo)移動(dòng)到要添加按鈕的位置，選擇“插入”→“表單”→“按鈕”命令，隨即按鈕被插入到頁面中。（2）在其“屬性”面板中設(shè)置“值”為“提交”、“動(dòng)作”為“提交表單”，其他參數(shù)保持默認(rèn)設(shè)置。（3）用以上方法，在頁面中插入另一個(gè)按鈕，并在其“屬性”面板中設(shè)置“值”為“復(fù)原”、“動(dòng)作”為“重設(shè)表單”。步驟6．預(yù)覽頁面。

保存文件，按F12鍵，在瀏覽器中預(yù)覽頁面。知識(shí)鏈接1．表單2．表單的工作過程3．表單元素（1）表單；（2）文本域；（3）文本區(qū)域；（4）按鈕；（5）復(fù)選框；（6）單選按鈕；（7）選擇（列表/菜單）；（8）文件域：（9）圖像域：（10）隱藏域；（11）單選按鈕組；（12）復(fù)選框組；（13）跳轉(zhuǎn)菜單：（14）字段集；（15）標(biāo)簽。試一試

打開本書素材“素材\項(xiàng)目

6\試一試\01\原始文件\lyb.html”制作“留言板”頁面。任務(wù)2制作用戶登錄頁面任務(wù)目標(biāo)（1）掌握添加密碼文本域并設(shè)置其屬性的方法；（2）初步了解復(fù)選框并設(shè)置其屬性。任務(wù)描述

用戶登錄系統(tǒng)是一般網(wǎng)站都具有的子系統(tǒng)，其作用是限制該網(wǎng)站某些資源的使用，只有通過身份確認(rèn)后的用戶才可以訪問，從而為用戶提供安全的訪問和數(shù)據(jù)操作，防止非法用戶進(jìn)入系統(tǒng)。任務(wù)分析

本任務(wù)通過使用表單技術(shù)制作“用戶登錄”頁面，“用戶登錄”頁面制作完成后，使用框架技術(shù)實(shí)現(xiàn)登錄頁面效果。

操作步驟步驟1．新建用戶登錄頁面。

新建“Userlogin.html”頁面。步驟2．用表格布局頁面。

在頁面中插入一個(gè)5行1列的表格。步驟3．插入文本域。（1）將光標(biāo)移動(dòng)到“用戶名”右側(cè)，選擇“插入”→“表單”→“文本域”命令，隨即用戶名文本域?qū)⒈徊迦氲巾撁嬷?。?）選中“用戶名”文本域，設(shè)置文本域的屬性。操作步驟（3）用同樣的方法插入“密碼”文本域。（4）設(shè)置“密碼”文本域的屬性，設(shè)置“類型”為“密碼”，這樣在頁面中設(shè)置或輸入密碼時(shí)相關(guān)內(nèi)容顯示為小黑點(diǎn)，即密碼不可見。（5）用同樣的方法插入“驗(yàn)證碼”文本域。（6）設(shè)置“驗(yàn)證碼”文本域的屬性。操作步驟步驟4．插入“登錄”按鈕。（1）將光標(biāo)移動(dòng)到第五行，選擇“插入”→“表單”→“按鈕”命令，隨即“登錄”按鈕被插入到頁面中。（2）設(shè)置“登錄”按鈕的屬性。步驟5．插入“永久登錄”復(fù)選框。（1）將光標(biāo)移動(dòng)到“登錄”按鈕右側(cè)，選擇“插入”→“表單”→“復(fù)選框”命令，隨即“永久登錄”復(fù)選框被插入到頁面中。（2）設(shè)置“永久登錄”復(fù)選框的屬性。步驟6．預(yù)覽頁面。

保存文件，按F12鍵，在瀏覽器中預(yù)覽頁面。試一試

打開本書素材“素材\項(xiàng)目6\試一試\01\原始文件\user\Reg.asp-action”制作會(huì)員注冊(cè)頁面。任務(wù)3制作“網(wǎng)站調(diào)查”頁面任務(wù)目標(biāo)（1）掌握添加復(fù)選框并設(shè)置其屬性的方法；（2）掌握添加文本域并設(shè)置其屬性的方法；（3）掌握添加文本區(qū)域并設(shè)置其屬性的方法；（4）掌握添加按鈕并設(shè)置其屬性的方法。任務(wù)描述

為了上海企業(yè)網(wǎng)運(yùn)作的不斷改善和提高，通過設(shè)計(jì)“網(wǎng)站調(diào)查”頁面來了解更多信息。任務(wù)分析

本任務(wù)通過使用表單元素中的單選按鈕和復(fù)選框來實(shí)現(xiàn)“網(wǎng)站調(diào)查”頁面中的單選題和多選題的提交。

操作步驟步驟1．創(chuàng)建表單。步驟2．插入復(fù)選框。步驟3．插入單選按鈕。步驟4．插入定位文本區(qū)域。步驟5．插入按鈕。步驟6．預(yù)覽頁面。知識(shí)鏈接1．表單“屬性”面板（1）表單ID；（2）動(dòng)作；（3）目標(biāo)；（4）方法；（5）編碼類型。2．文本域“屬性”面板單行文本域“屬性”面板中各選項(xiàng)如下。（1）文本域；（2）字符寬度；（3）最多字符數(shù)；（4）初始值。密碼域“屬性”面板中各選項(xiàng)如下。（1）文本域；（2）字符寬度；（3）最多字符數(shù)；（4）初始值。知識(shí)鏈接3．文本區(qū)域“屬性”面板（1）文本域；（2）字符寬度；（3）初始值；（4）行數(shù)。4．按鈕“屬性”面板（1）按鈕名稱；（2）值；（3）動(dòng)作。5．復(fù)選框“屬性”面板（1）復(fù)選框名稱；（2）選定值；（3）初始狀態(tài)。6．單選按鈕“屬性”面板（1）單選按鈕；（2）選定值；（3）初始狀態(tài)。知識(shí)鏈接7．選擇（列表/菜單）“屬性”面板（1）選擇；（2）類型；（3）列表值；（4）初始化時(shí)選定。8．文件域“屬性”面板（1）文件域名稱；（2）字符寬度；（3）最多字符數(shù)。9．圖像域“屬性”面板（1）圖像區(qū)域；（2）源文件；（3）替換；（4）對(duì)齊。10．隱藏域“屬性”面板（1）隱藏區(qū)域；（2）值。知識(shí)鏈接11.“單選按鈕組”對(duì)話框

選擇“插入”→“表單”→“單選按鈕組”命令，彈出“單選按鈕組”對(duì)話框。（1）名稱：輸入單選按鈕的名稱。插入單選按鈕組的好處是使同一組的單選按鈕具有統(tǒng)一的名稱。（2）單擊“標(biāo)簽”列中的文字，文字變?yōu)榭尚薷臓顟B(tài)，可以輸入需要的內(nèi)容?！皹?biāo)簽”列設(shè)定的是單選按鈕的說明文字，所以可以使用中文。單擊“值”列中的文字，文字變?yōu)榭尚薷臓顟B(tài)，可以輸入需要的值?！爸怠绷兄性O(shè)定的是選中單選按鈕后提交的內(nèi)容，應(yīng)使用英文。（3）布局，使用：可以使用“換行符（<br>標(biāo)簽）”或“表格”來設(shè)置組中單選按鈕的布局。知識(shí)鏈接12.“復(fù)選框組”對(duì)話框

選擇“插入”→“表單”→“復(fù)選框組”命令，彈出“復(fù)選框組”對(duì)話框。（1）名稱：輸入復(fù)選框的名稱。插入復(fù)選框組的好處是使同一組的復(fù)選框具有統(tǒng)一的名稱。（2）單擊“標(biāo)簽”列中的文字，文字變?yōu)榭尚薷臓顟B(tài)，可以輸入需要的內(nèi)容?！皹?biāo)簽”列設(shè)定的是復(fù)選框的說明文字，所以可以使用中文。單擊“值”列中的文字，文字變?yōu)榭尚薷臓顟B(tài)，可以輸入需要的值。“值”列中設(shè)定的是選中復(fù)選框后提交的內(nèi)容，應(yīng)使用英文。（3）布局，使用：可以使用“換行符（<br標(biāo)簽>）”或“表格”來設(shè)置組中復(fù)選框的布局。知識(shí)鏈接13.“插入跳轉(zhuǎn)菜單”對(duì)話框

選擇“插入”→“表單”→“跳轉(zhuǎn)菜單”命令，彈出“插入跳轉(zhuǎn)菜單”對(duì)話框。（1）菜單項(xiàng)：此列表框中列出了所有的跳轉(zhuǎn)菜單項(xiàng)。單擊“+”按鈕，可以增加一個(gè)菜單項(xiàng)。在“菜單項(xiàng)”列表框中選中某個(gè)菜單項(xiàng)，單擊“-”按鈕，可以刪除此菜單項(xiàng)。在“菜單項(xiàng)”列表框中選中菜單項(xiàng)，單擊向上或向下的箭頭按鈕，可以調(diào)整此菜單項(xiàng)在跳轉(zhuǎn)菜單中的位置。（2）文本：用于設(shè)置當(dāng)前菜單項(xiàng)顯示的文本。（3）選擇時(shí)，轉(zhuǎn)到URL：用于設(shè)置當(dāng)前菜單項(xiàng)所對(duì)應(yīng)的超級(jí)鏈接地址。（4）打開URL于：用于設(shè)置超級(jí)鏈接的打開方式。（5）菜單ID：用于設(shè)置當(dāng)前菜單項(xiàng)的名稱。（6）菜單之后插入前往按鈕：選中該復(fù)選框，向網(wǎng)頁中插入跳轉(zhuǎn)菜單后，將同時(shí)插入“前往”按鈕。訪問者單擊“前往”按鈕，將打開跳轉(zhuǎn)菜單中當(dāng)前選中項(xiàng)目對(duì)應(yīng)的超級(jí)鏈接。（7）更改URL后選擇第一個(gè)項(xiàng)目：選中該復(fù)選框，可以使用菜單選擇提示。試一試

參照素材文件，制作一個(gè)調(diào)查問卷表單。任務(wù)4Spry驗(yàn)證表單任務(wù)目標(biāo)（1）掌握插入Spry密碼表單驗(yàn)證的方法；（2）掌握Spry表單驗(yàn)證屬性的設(shè)置。任務(wù)描述

上海企業(yè)網(wǎng)需要制作會(huì)員注冊(cè)頁面，要求用戶填寫報(bào)名表信息時(shí)，對(duì)各項(xiàng)數(shù)據(jù)信息進(jìn)行檢查，符合要求方可提交。任務(wù)分析

在新用戶注冊(cè)過程中，用戶在填寫數(shù)據(jù)信息時(shí)應(yīng)判斷其合法或非法，這可利用DreamweaverCS6中的表單驗(yàn)證功能來實(shí)現(xiàn)。

操作步驟(1)打開“素材\項(xiàng)目6\示例\04\原始文件\user\Reg.asp-action”頁面。（2）選中準(zhǔn)備Spry驗(yàn)證的文本域“用戶密碼”，選擇“插入”→“表單”→“Spry驗(yàn)證密碼”命令。（3）可以看到選中的文本域已經(jīng)插入了Spry驗(yàn)證密碼。（4）在其“屬性”面板中，