Dreamweaver-制作表單頁(yè)

1、精選優(yōu)質(zhì)文檔-傾情為你奉上實(shí)驗(yàn)12 制作表單頁(yè)實(shí)驗(yàn)要求通過實(shí)驗(yàn)，掌握如何建立表單及在表單內(nèi)插入表單的各個(gè)元素.在建立表單后，熟練運(yùn)用表單屬性面板設(shè)置表單屬性并利用行為檢測(cè)表單.說明 在制作表單時(shí)，首先插入表單域，然后在表單域內(nèi)插入各個(gè)表單元素.建立表單的目的是用來發(fā)送網(wǎng)頁(yè)內(nèi)的用戶信息和數(shù)據(jù)，發(fā)送的對(duì)象是 Email 或數(shù)據(jù)庫(kù)等.其作用就是為了網(wǎng)站與瀏覽者進(jìn)行信息交流.對(duì)應(yīng)知識(shí)點(diǎn)：l 建立表單域 l 在表單域內(nèi)插入表單元素實(shí)驗(yàn)素材 無實(shí)驗(yàn)步驟1. 啟動(dòng)Dreamweaver MX 2004 程序，選擇菜單“文件”“新建”命令，打開“新建文檔”對(duì)話框.在對(duì)話框“常規(guī)”標(biāo)簽下選擇“類型”列表中的“基

2、本頁(yè)”選項(xiàng)，創(chuàng)建HTML網(wǎng)頁(yè).2. 創(chuàng)建頁(yè)面后，按Ctrl+s鍵，保存網(wǎng)頁(yè)到本地站點(diǎn)內(nèi)，文件命名為form.htm.如圖12-1所示.說明 將頁(yè)面保存到站點(diǎn)是為了在更新網(wǎng)站內(nèi)容時(shí),同時(shí)更新form網(wǎng)頁(yè),也便于站點(diǎn)的管理和維護(hù).3. 保存頁(yè)面后,選擇插入面板上的表單選項(xiàng),在表單面板中單擊表單按鈕000,在頁(yè)面中插入表單域.如圖12-2所示. 圖12-1 保存文件名為 from 保存圖12-2 在頁(yè)面中插入表單域說明 表單域就是表單的范圍,在網(wǎng)頁(yè)中以紅色虛線表示,也是插入表單元素的前提條件.代碼中以 格式表示.其作用就是把頁(yè)面中輸入的數(shù)據(jù)以電子郵件形式發(fā)送到郵箱中或直接傳送到數(shù)據(jù)庫(kù)中.4. 將光標(biāo)

3、停放到表單域中,選擇常用面板上的表格按鈕,在表單域中插入8行2列的表格.5. 用鼠標(biāo)選中表格,打開屬性面板.6. 在表格屬性中,設(shè)置其寬度為500像素,填充值為1,間距值為0,在對(duì)齊下拉列表中選擇絕對(duì)居中選項(xiàng),邊框值為1,最后在邊框顏色文本框中輸入色標(biāo)值#FFFFFF(白色).說明 在表單域中插入表格,是為了方便表單元素的排列布局.表格屬性中的設(shè)置是為了表格有比較好顯示效果,其中:填充值表示表格內(nèi)的數(shù)字與表格的距離,間距表示表格與表格之間的距離,邊框值表示表格外框的寬度.對(duì)齊方式是顯示表格在頁(yè)面的位置,邊框顏色則是一個(gè)十六進(jìn)制值,表示顏色的色標(biāo)值.7. 拖動(dòng)鼠標(biāo),選中表格第一行的兩個(gè)單元格,在

4、屬性面板的背景顏色文本框中輸入色標(biāo)值#6699CC,或單擊旁邊的背景顏色按鈕,選取藍(lán)色.8. 拖動(dòng)鼠標(biāo),選中其他單元格,設(shè)置背景顏色為灰色(色標(biāo)值為#CCCCCC).9. 完成表格的屬性設(shè)置后,按下鍵盤Ctrl+s鍵或選擇文件保存命令,保存頁(yè)面.提示 Dreamweaver MX 2004 沒有像Microsoft Office 那樣的自動(dòng)保存功能,所以用戶應(yīng)該養(yǎng)成經(jīng)常保存文件的習(xí)慣.10. 在第1行單元格內(nèi)輸入文字用戶信息,然后選中文字打開屬性面板,單擊面板的絕對(duì)居中按鈕,使文字移動(dòng)到表格的中間位置.設(shè)置文本顏色為白色(色標(biāo)值#FFFFFF).如圖12-3所示.圖12-3 在頁(yè)面中插入表格和

5、文本11. 在第2行第1 個(gè)單元格中輸入文字用戶名:,然后單擊表單面板中文本字段按鈕,插入文本框.12. 選中插入的文本框,打開屬性面板,在文本域下面的文本框中輸入name,這是文本框的名稱;在字符寬度文本框中輸入25;類型選擇單行單選按鈕;最多字符數(shù)和初始值為默認(rèn).參數(shù)設(shè)置如圖12-4所示.圖 12-4 文本字段屬性設(shè)置說明 文本字段是用戶在網(wǎng)頁(yè)中輸入信息和數(shù)據(jù)的窗口,是用戶和網(wǎng)站之間進(jìn)行交互信息和數(shù)據(jù)的重要條件.但它不適合長(zhǎng)篇文字和圖片的輸入.在文本字段的屬性面板上有最多字符數(shù)設(shè)置,如果對(duì)文本字段沒有字符限制,可以不輸入任何數(shù)值;如果要限制字符,則可以輸入限制的數(shù)值,注意,一個(gè)中文字符是占

6、兩個(gè)字節(jié).13. 在第2行第2個(gè)表格中輸入文字密碼:,按同樣的方法插入文本框.然后選中文本框打開屬性面板,在文本域中輸入名稱為Passowrd,字符寬度為25,類型選擇密碼單選按鈕,最多字符數(shù)和初始值不用填.如圖12-5所示.圖12-5 密碼文本字段的的屬性設(shè)置14. 在第3行第1個(gè)表格中分別輸入“性別：”“男”“女”，然后單擊表單面板中的“單選按鈕”按鈕*，在“男”“女”的前面分別插入單選按鈕。15. 選中第一個(gè)單選取按鈕，打開屬性面板，在“單選按鈕”文本框中輸入單選按鈕名稱man，“選定值”文本框中輸入“男”，“初始狀態(tài)”選擇“未選中”單選按鈕，如圖12-6所示。接著選中第2個(gè)單選按鈕，其

7、設(shè)置名稱和選定值分別是woman.女，其他設(shè)置一樣。 圖12-6 單選按鈕屬性設(shè)置 說明 初始狀態(tài)有兩個(gè)選擇，“已勾選”和“未選取中”。單選按鈕是在眾多選項(xiàng)中選擇其中一項(xiàng)，不能多項(xiàng)。如果要在網(wǎng)頁(yè)中一次插入多個(gè)單選按鈕，則可以單擊表單面板上“單選按鈕組”按鈕*，然后在打開的“單選取按鈕組”對(duì)話框中，輸入Label（標(biāo)簽）下的項(xiàng)目，在“名稱”文本框中輸入項(xiàng)目名稱，單擊加號(hào)按鈕嗇項(xiàng)目，完成后單擊“確定”按鈕，如圖12-7所示。16. 在第3 行第2個(gè)表格中輸入“省份：”，然后單擊表單面板中的“列表/菜單”按鈕，在“省份：”旁邊插入“列表/菜單”框。17. 選中“列表/菜單”框，單擊屬性能面板上的按鈕

8、，打開“列表值”對(duì)話框，在“項(xiàng)目標(biāo)簽”下面輸入各個(gè)省份的名稱，如北京.黑龍江等，單擊按鈕可增加項(xiàng)目，單擊按鈕可刪除項(xiàng)目，右邊的兩個(gè)按鈕，可用來調(diào)整項(xiàng)目的上下位置。如圖12-8所示。 圖12-7 “單選按鈕組”對(duì)話框 圖12-8 “列表/菜單”列表值設(shè)置18. 單擊“確定”按鈕，返回屬性面板，在“初始化時(shí)選取定”文本框中出現(xiàn)了剛才設(shè)置的項(xiàng)目標(biāo)簽。然后在“列表/菜單”下面的文本框中輸入“select”，在“類型”選項(xiàng)區(qū)選擇“菜單”單選按鈕。如圖12-9所示。圖12-9 “列表/菜單”屬性設(shè)置19. 在第4行的兩個(gè)表格中分別插入“電話“和“地址”的“文本字段”。其屬性的名稱分別是Phone和Addr

9、ess，“字符寬度”都是25，“類型”都選擇“單行”。20. 在第5行的第1個(gè)表格中輸入“E-mail：”文字，插入“文本字段”，屬性面板中的“文本域”名稱為Email，“字符寬度”為25，“類型”選擇“單行”，其他設(shè)置為默認(rèn)就可以。21. 在第5行的第2個(gè)表格中輸入“上傳：”文字，然后單擊表單面板中的“文件域”按鈕，在“上傳：”文字旁邊插入文字域字段，接著在屬性面板中的“文件域名稱”中輸入file，“字符寬度”文本框中輸入16，“最多字符”的文本框保留為空。參數(shù)設(shè)置如圖12-10所示。圖12-10 文件域?qū)傩栽O(shè)置說明 文件域是用來選擇本地硬盤上文件夾目錄地址，其后面跟著按鈕，作用于就是單擊它

10、選擇文件目錄，允許用戶上傳。22. 拖動(dòng)鼠標(biāo)選中第6行兩個(gè)表格，單 屬性面板上的“合并” 按鈕，合并兩個(gè)表格，然后在表格中輸入文字“愛好：”，空兩格后分別輸入讀書.上網(wǎng).旅游.游戲等文字，接著單擊表單面板上的“復(fù)選框”按鈕，分別在各選取項(xiàng)前面插入復(fù)選取框。23. 打開屬性面板，分別選取中頁(yè)面中的復(fù)選取框，在“復(fù)選取框名稱”文本框中分別輸入Study.web.Travel.Game。在“選取定值”文本框中也依次輸入“讀書”“上網(wǎng)”“旅游”“游戲”?！俺跏紶顟B(tài)”都選擇“未選中”。說明 在復(fù)選取框中可以提供多種選項(xiàng)，并且用戶可以同時(shí)選取多項(xiàng)的按鈕。24. 拖動(dòng)鼠標(biāo)選中第2行到第5行的單元格，然后打開

11、屬性面板，單擊“左對(duì)齊”按鈕，使表格中的內(nèi)容都靠左對(duì)齊。如圖12-11所示。25. 合并第7行兩個(gè)單元格，輸入“個(gè)人介紹”文字，按住鍵盤Shift鍵回車，另起一行，然后單擊表單面板上的“文本區(qū)域”按鈕，插入文本域。圖12-11 選中表格單擊“左對(duì)齊”按鈕26. 選中文本域，打開屬性面板，在“文本域 ”下輸入名稱content，在“字符寬度”文本框中輸入40，在“行數(shù)”中輸入5，在“類型”選項(xiàng)中選擇“多行”單選取按鈕。參數(shù)設(shè)置如圖12-12所示。圖12-12 “文本域”屬性設(shè)置 說明 文本域?qū)嶋H上是可以輸入大量文字內(nèi)容的文本框。如果輸入的文本超出文本框的范圍，在瀏覽時(shí)文本框就仁自動(dòng)出現(xiàn)下拉滾動(dòng)條

12、，以便用戶瀏覽。“文本域”.“文本字段”和“密碼字段”的區(qū)別就是在選擇的“類型”不同，其中“密碼”文本域在用戶輸入時(shí)以“*”號(hào)顯示。27. 在最后一行中，連續(xù)兩次單擊插入面板上的“表單”“按鈕”按鈕。在表格中插入兩個(gè)按鈕，其中一個(gè)是“發(fā)送”按鈕，一個(gè)是“重填”按鈕。28. 選中第一個(gè)按鈕，打開屬性面板，在“標(biāo)簽”文本框中輸入“發(fā)送”，在“動(dòng)作”選項(xiàng)中選擇“提交表單”單選按鈕，參數(shù)設(shè)置如圖12-13所示。接著選擇第二個(gè)按鈕，在屬性面板中的“標(biāo)簽”文本框中輸入“重填寫”，“動(dòng)作”選擇“重設(shè)表單”選項(xiàng)。29. 插入表單中各個(gè)需要的元素之后，整個(gè)表單頁(yè)面的結(jié)構(gòu)就制作完成了，按下F12鍵即可瀏覽網(wǎng)頁(yè)。如圖12-14所示。 說明 在本實(shí)例中主要是先介紹表單頁(yè)面的布局制作和在表單中如何插入表單元素。讀者在制作時(shí)要注意文字和表單元素的一一對(duì)應(yīng)。圖12-13 發(fā)送按鈕屬性設(shè)置圖12-14 完成后的表單頁(yè)面實(shí)驗(yàn)作業(yè) 模仿1. 在Dreamweaver MX 2004編輯窗口下，創(chuàng)建HTML網(wǎng)頁(yè)。2. 保存頁(yè)面，命名為form.htm。3. 在頁(yè)面中插入表單域，然后插入表格。4. 在表格中插入各項(xiàng)表單元素及文字。5. 表單制