（中職）網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目八 應(yīng)用網(wǎng)頁表單電子課件

1、正版可修改PPT課件（中職）網(wǎng)頁設(shè)計(jì)與制作項(xiàng)目八 應(yīng)用網(wǎng)頁表單電子課件項(xiàng)目八 應(yīng)用網(wǎng)頁表單任務(wù)一 學(xué)會(huì)制作表單制作注冊(cè)頁面目的 注冊(cè)頁面設(shè)計(jì)原則表單域的類型=本節(jié)提綱活動(dòng)一 制作用戶注冊(cè)頁面網(wǎng)頁的交互性 我們的網(wǎng)站和電視、廣播等都是信息傳播的工具，同時(shí)也有很大的不同，其中最重要的不同點(diǎn)在于網(wǎng)站它不是一個(gè)“被動(dòng)”的媒體，不是一味的向訪問者傳播信息，網(wǎng)頁需要我們用鼠標(biāo)去點(diǎn)擊，自主控制瀏覽進(jìn)度。同時(shí)網(wǎng)站還會(huì)與用戶進(jìn)行交互，收集用戶的訪問信息，獲取第一手的數(shù)據(jù)。網(wǎng)站通過用戶注冊(cè)和登錄功能，為不同的用戶推送不同的網(wǎng)頁內(nèi)容，實(shí)現(xiàn)信息的準(zhǔn)確傳播。這就是網(wǎng)頁的交互性。什么是表單？ 表單通常由多個(gè)表單對(duì)象組成，

2、如文本字段、隱藏域、文本區(qū)域、復(fù)選框、單選按鈕等，通過表單，網(wǎng)站可以非常方便地收集訪問者的相關(guān)信息。如圖8-2為注冊(cè)QQ賬號(hào)時(shí)需要填寫的一個(gè)表單頁面。一個(gè)表單一般包括3個(gè)組成部分：1、表單標(biāo)簽：包含了如何處理表單數(shù)據(jù)的方法。2、表單域：包含了文本字段、隱藏域、文本區(qū)域、復(fù)選框、單選按鈕等。3、表單按鈕：包括提交按鈕、復(fù)位按鈕和一般按鈕。 表單在html中的標(biāo)簽為一般注冊(cè)頁面表單域文本區(qū)域隱藏域復(fù)選框單選框文本字段創(chuàng)建和設(shè)置表單創(chuàng)建表單。在Dreamweaver CS6中，如圖8-3所示，點(diǎn)擊“插入”菜單，在下拉選項(xiàng)中選擇“表單”命令，單擊“表單”，即可插入表單，設(shè)計(jì)視圖中表現(xiàn)為一個(gè)紅色的虛線框

3、，代碼視圖中顯示 。Tips：表單對(duì)象需要包含在表單中，故通常需先插入表單，再在表單中添加表單對(duì)象。設(shè)計(jì)視圖中的紅色虛線框在網(wǎng)頁中是不顯示的，當(dāng)選擇實(shí)時(shí)視圖時(shí)，紅色虛線框不顯示。創(chuàng)建和設(shè)置表單設(shè)置表單屬性。表單屬性面板各選項(xiàng)的含義如下：1、表單ID：設(shè)置表單的名稱，以便在腳本語言中控制該表單。2、動(dòng)作：設(shè)置處理表單數(shù)據(jù)的程序。3、方法：設(shè)置表單數(shù)據(jù)上傳到服務(wù)器的方法。GET表示將表單中的數(shù)據(jù)以追加到處理程序地址后面的方式進(jìn)行傳送；POST表示將表單中的數(shù)據(jù)嵌入到處理程序中進(jìn)行傳送。4、目標(biāo)：設(shè)置服務(wù)器反饋數(shù)據(jù)的顯示方式。5、編碼類型：設(shè)置提交服務(wù)器處理數(shù)據(jù)所使用的MIME編碼類型。默認(rèn)appl

4、ication/x-www-form-urlencoded，通常與POST方式協(xié)同使用。如果要?jiǎng)?chuàng)建文件上傳表單，應(yīng)選擇multipart/form-data。6、類：設(shè)置需要調(diào)用的CSS樣式。創(chuàng)建和設(shè)置表單添加表單對(duì)象。在創(chuàng)建表單之后，還需要添加表單對(duì)象來收集訪問者數(shù)據(jù)，表單對(duì)象包括：文本字段、隱藏域、文本區(qū)域、復(fù)選框、單選按鈕等。1. 添加文本字段在表單中添加文字字段后，訪問者可以在網(wǎng)頁中輸入各種信息，常被用作“用戶名”、“密碼”的輸入。在表單中添加文本字段，首先鼠標(biāo)單擊紅色虛線框，然后在“插入”工具欄“表單”模塊下選擇“文本字段”，此時(shí)Dreamweaver會(huì)顯示“輸入標(biāo)簽輔助功能屬性”窗

5、口，根據(jù)自己的需要輸入“ID”和“標(biāo)簽”，單擊確定，即可完成文本字段的添加。創(chuàng)建和設(shè)置表單添加表單對(duì)象2. 添加文本區(qū)域在表單中添加文本區(qū)域有兩種方法，一為在“插入”工具欄選擇 “文本區(qū)域”，二為插入文本字段后，在“屬性”面板中“類型”中選擇“多行”。插入文本區(qū)域后，單擊文本區(qū)域，在“屬性”面板中即出現(xiàn)文本區(qū)域的屬性，可以對(duì)文本區(qū)域的屬性進(jìn)行設(shè)置。3. 添加隱藏域隱藏域是用來收集或發(fā)送信息的不可見元素，用戶在訪問網(wǎng)頁時(shí)，隱藏域是不可見的。當(dāng)表單被提交時(shí)，隱藏域中的信息就會(huì)發(fā)送到服務(wù)器上。添加隱藏域可以用工具欄選擇“插入”“表單”“隱藏域”插入，或者在插入工具欄選擇“隱藏域”。隱藏域的屬性主要包

6、括隱藏域ID和值。4. 添加復(fù)選框在我們的網(wǎng)頁中，網(wǎng)頁與訪問者的交互除了輸入文本信息之外，還可以在給定的選項(xiàng)中進(jìn)行選擇，并提交選擇的結(jié)果給服務(wù)器，實(shí)現(xiàn)交互性功能。實(shí)現(xiàn)選擇功能的表單對(duì)象主要有復(fù)選框、單選按鈕、選擇列表、跳轉(zhuǎn)菜單等。創(chuàng)建和設(shè)置表單添加表單對(duì)象5. 添加單選按鈕在網(wǎng)頁中，除了復(fù)選框之外，我們有的時(shí)候還需要用戶在多個(gè)選項(xiàng)中只選擇一個(gè)選項(xiàng)提交到服務(wù)器，這個(gè)時(shí)候，我們就需要使用到“單選按鈕” 。單選按鈕只允許用戶選擇一個(gè)選項(xiàng)，可用于性別等唯一選項(xiàng)信息的選擇。插入單選按鈕的方法和插入復(fù)選框類似，將光標(biāo)定位到表單之后，在插入工具欄選擇 “單選按鈕”，輸入ID和標(biāo)簽之后就完成了單選按鈕的添加。

7、6. 添加選擇（列表/菜單）在網(wǎng)頁中，經(jīng)常可以看到選擇列表 ，訪問者通過下拉菜單看到幾個(gè)選項(xiàng)進(jìn)行選擇。我們可以通過Dreamweaver表單對(duì)象中的“選擇（列表/菜單）”進(jìn)行添加。在“插入”工具欄中單擊 “選擇（列表/菜單）”，在彈出的窗口中輸入ID和標(biāo)簽，就可以完成列表/菜單的插入。添加選擇之后，單擊 ，在屬性菜單中出現(xiàn)相應(yīng)的屬性設(shè)置。7. 添加按鈕網(wǎng)頁訪問者填寫完成表單后，需要點(diǎn)擊“注冊(cè)”或“提交”將表單信息提交到服務(wù)器，這就需要按鈕來實(shí)現(xiàn)。表單中的按鈕可以實(shí)現(xiàn)提交表單或重設(shè)表單。添加按鈕的方法是在“插入”工具欄中，單擊 “按鈕”，在彈出的窗口中輸入ID和標(biāo)簽后即可插入按鈕。單擊添加的按鈕

8、，通過設(shè)置屬性面板，可以對(duì)按鈕的屬性進(jìn)行設(shè)置。思考Dreamweaver中，制作用戶注冊(cè)界面還可以添加的表單對(duì)象有哪些？自主練習(xí)根據(jù)圖8-15制作一個(gè)用戶注冊(cè)頁面。任務(wù)二 學(xué)會(huì)特殊表單對(duì)象應(yīng)用表單域分類 搜索欄制作流程站內(nèi)搜索欄的優(yōu)點(diǎn)=本節(jié)提綱活動(dòng)一 制作站內(nèi)搜索欄搜索引擎搜索引擎（Search Engine）是指根據(jù)一定的策略、運(yùn)用特定的計(jì)算機(jī)程序從互聯(lián)網(wǎng)上搜集信息，在對(duì)信息進(jìn)行組織和處理后，為用戶提供檢索服務(wù)，將用戶檢索相關(guān)的信息展示給用戶的系統(tǒng)。搜索引擎包括全文索引、目錄索引、元搜索引擎、垂直搜索引擎、集合式搜索引擎、門戶搜索引擎與免費(fèi)鏈接列表等。目前，我國(guó)常用的搜索引擎有百度、谷歌、搜

9、搜、360搜索、盤古搜索等等。必備知識(shí)一、添加圖像域在網(wǎng)頁中添加按鈕，按鈕默認(rèn)樣式為 ，但是在我們的實(shí)際網(wǎng)頁中，往往需要更好看，更具個(gè)性化的按鈕，所以Dreamweaver提供了添加圖像域的功能，我們可以提交一張圖片作為按鈕。添加圖像域的方法和添加按鈕類似，單擊“插入”菜單下的 “圖像域”，彈出文件瀏覽器窗口，找到我們要作為按鈕的圖片，單擊“確定”，輸入ID和標(biāo)簽，即可完成圖像域的添加，單擊插入的圖像域，出現(xiàn)圖像域?qū)傩悦姘?，可以?duì)選擇的圖像域進(jìn)行設(shè)置。二、添加文件域在注冊(cè)頁面中，往往需要上傳頭像。在Dreamweaver中，可以通過文件域?qū)崿F(xiàn)圖片和其他文件的上傳功能。添加文件域的方法為單擊插入

10、工具欄下的 “文件域”，在彈出的窗口中輸入ID和標(biāo)簽即可完成文件域的插入。單擊插入的文件域，即可在屬性面板中對(duì)該文件域進(jìn)行設(shè)置。=制作站內(nèi)搜索欄操作步驟分解第一步. 在我們需要添加站內(nèi)搜索的地方，選擇“插入”“表單”，出現(xiàn)一個(gè)紅色的虛線框。并在 “動(dòng)作”中設(shè)設(shè)置網(wǎng)站地址，例如“”，“方法”為“默認(rèn)”，目標(biāo)為“blank”。第二步. 單擊紅色虛線框內(nèi)空白部分，但插入工具欄的 “文本字段”。在屬性面板設(shè)置“字符寬度”為25，“初始值”為“搜索本站”。=制作站內(nèi)搜索欄 第三步. 在插入工具欄點(diǎn)擊 “圖像域”，在彈出的窗口中選擇需要作為按鈕的圖片。=制作站內(nèi)搜索欄 第三步.在第三列分別插入四個(gè)隱藏域，

11、并為這四個(gè)隱藏域添加名稱和值，四個(gè)名稱和值如表8-1，表格前三行是利用百度搜索引擎進(jìn)行站內(nèi)搜索的特定格式，不能改變，名稱為Si的隱藏域的值可以根據(jù)需要改變。點(diǎn)擊【插入】-【表單】-【隱藏域】，插入隱藏域之后在其屬性面板設(shè)置隱藏域的名稱和值，如圖8-39所示。名稱值TNbdsCL3CT2097152Si=制作站內(nèi)搜索欄第四步. 完成站內(nèi)搜索工具欄的制作。思考 站內(nèi)搜索欄一般放在網(wǎng)頁的什么位置？為什么？自主練習(xí)請(qǐng)利用資源包里的百度標(biāo)志，練習(xí)制作百度搜索欄。任務(wù)三 學(xué)會(huì)查驗(yàn)表單數(shù)據(jù)可驗(yàn)證表單結(jié)構(gòu) 可驗(yàn)證表單意義可驗(yàn)證表單制作方法=本節(jié)提綱任務(wù)三 制作SPRY可驗(yàn)證表單表單驗(yàn)證表單驗(yàn)證是javascr

12、ipt中的高級(jí)選項(xiàng)之一。JavaScript 可用來在數(shù)據(jù)被送往服務(wù)器前對(duì) HTML 表單中的這些輸入數(shù)據(jù)進(jìn)行驗(yàn)證。被 JavaScript 驗(yàn)證的這些典型的表單數(shù)據(jù)有：用戶是否已填寫表單中的必填項(xiàng)目？用戶輸入的郵件地址是否合法？用戶是否已輸入合法的日期？必備知識(shí)Spry表單構(gòu)件是Dreamweaver CS3版本開始增加的一項(xiàng)基于Ajax框架的表單功能。在網(wǎng)頁中使用它可以為訪問者提供更豐富的輸入體驗(yàn)和對(duì)表單信息的驗(yàn)證功能。在用戶注冊(cè)頁面，網(wǎng)頁需要驗(yàn)證用戶名是否已經(jīng)被其他人注冊(cè)，通過Spry表單構(gòu)件，網(wǎng)頁可以對(duì)訪問者輸入的信息進(jìn)行驗(yàn)證，并即時(shí)提供反饋。一、插入Spry驗(yàn)證文本域Spry驗(yàn)證文本

13、域與普通文本域的不同之處在于可以對(duì)文本域中輸入的信息進(jìn)行驗(yàn)證，并顯示對(duì)應(yīng)的提示信息。插入Spry驗(yàn)證文本域與插入文本域的步驟基本一致，在插入工具欄點(diǎn)擊 “Spry驗(yàn)證文本域”，輸入ID和標(biāo)簽之后就完成了Spry驗(yàn)證文本域的添加。二、插入Spry驗(yàn)證文本區(qū)域Spry驗(yàn)證文本區(qū)域是多行的Spry驗(yàn)證文本域。在插入工具欄點(diǎn)擊 “插入Spry驗(yàn)證文本區(qū)域”。點(diǎn)擊“Spry文本區(qū)域：sprytextarea1”顯示屬性面板，其屬性面板和Spry驗(yàn)證文本域的屬性面板類似。三、插入Spry驗(yàn)證復(fù)選框Spry驗(yàn)證復(fù)選框和普通復(fù)選框相比，其差別在于使用Spry驗(yàn)證復(fù)選框之后，當(dāng)用戶勾選該復(fù)選框時(shí)，網(wǎng)頁會(huì)呈現(xiàn)相應(yīng)

14、的提示信息。Spry驗(yàn)證復(fù)選框的插入方法是在“插入”工具欄點(diǎn)擊 “Spry驗(yàn)證復(fù)選框”，輸入ID和標(biāo)簽后即完成插入。在Spry驗(yàn)證復(fù)選框的屬性面板可以對(duì)其屬性進(jìn)行設(shè)置。四、插入Spry驗(yàn)證選擇Spry驗(yàn)證選擇在“選擇（列表/菜單）”的基礎(chǔ)上增加了對(duì)選擇的驗(yàn)證功能。單擊插入工具欄的 按鈕即可添加Spry驗(yàn)證選擇。添加“列表值”的方法和普通選擇一樣。點(diǎn)擊“Spry選擇：spryselect1”出現(xiàn)Spry驗(yàn)證選擇的屬性面板。制作可驗(yàn)證表單。第一步. 打開Dreamweaver，選擇新建html網(wǎng)頁。第二步. 在合適的位置，選擇“插入”“表單”，網(wǎng)頁出現(xiàn)紅色虛線框，表示已插入表單。第三步. 在插入工

15、具欄表單欄目下，找到 “Spry驗(yàn)證文本域”，在彈出的窗口中，輸入標(biāo)簽為“電子郵件：”，點(diǎn)擊確認(rèn)后在相應(yīng)位置插入Spry驗(yàn)證文本域。制作可驗(yàn)證表單。第四步. 單擊灰色文本框區(qū)域，下方出現(xiàn)文本域?qū)傩悦姘?，輸入“字符寬度”?0。第五步. 點(diǎn)擊文本框上方“Spry文本區(qū)域：sprytextarea1”文字，在下方屬性面板中設(shè)置“類型”為“電子郵件地址”，“預(yù)覽狀態(tài)”為“無效格式”，“驗(yàn)證于”勾選“onBlur”。制作可驗(yàn)證表單。第六步. 將光標(biāo)定位到Spry驗(yàn)證文本域后面，按Enter換行，單擊 “Spry驗(yàn)證文本域”，在彈出的窗口中輸入“標(biāo)簽”為“登錄密碼：”。制作可驗(yàn)證表單。第七步. 單擊文本字段區(qū)域，在屬性面板設(shè)置“字符寬度”為20，“類型”為“密碼”。第八步. 點(diǎn)擊文本框上方