網(wǎng)頁制作項(xiàng)目10

項(xiàng)目10表單網(wǎng)頁制作項(xiàng)目描述

知識(shí)儲(chǔ)備

實(shí)踐向?qū)?/p>

能力拓展

退出項(xiàng)目小結(jié)

項(xiàng)目描述表單是網(wǎng)站管理員與用戶之間進(jìn)行溝通的橋梁，目前大多數(shù)的網(wǎng)站都需要與用戶進(jìn)行動(dòng)態(tài)的交流，表單是必不可少的。本項(xiàng)目運(yùn)用表單知識(shí)創(chuàng)建在線注冊頁面，效果如圖10-1所示。項(xiàng)目描述圖10-1“在線注冊”頁面效果圖返回10.2知識(shí)儲(chǔ)備10.2.1認(rèn)識(shí)表單10.2.2創(chuàng)建及設(shè)置表單10.2.3創(chuàng)建及設(shè)置表單元素10.2知識(shí)儲(chǔ)備表單在網(wǎng)頁中主要負(fù)責(zé)數(shù)據(jù)采集功能。一個(gè)表單主要有三個(gè)基本組成部分：表單標(biāo)簽，這里面包含了處理表單數(shù)據(jù)所用CGI程序的URL以及數(shù)據(jù)提交到服務(wù)器的方法。表單域，包含了文本框、密碼框、隱藏域、多行文本框、復(fù)選框、單選框、下拉選擇框和文件上傳框等。表單按鈕，包括提交按鈕、復(fù)位按鈕和一般按鈕，用于將數(shù)據(jù)傳送到服務(wù)器上的CGI腳本或者取消輸入，還可以用表單按鈕來控制其他定義了腳本的處理工作。10.2知識(shí)儲(chǔ)備10.2.2創(chuàng)建及設(shè)置表單1.插入表單插入表單的具體操作步驟：（1）將光標(biāo)置于要插入表單的位置。（2）單擊菜單“插入”→“表單”選項(xiàng)→“表單”命令,如圖10-2所示。圖10-2表單對(duì)象面板10.2知識(shí)儲(chǔ)備（3）選擇命令后，頁面中就會(huì)出現(xiàn)紅色的虛線，這虛線就是表單，如圖10-3所示。圖10-3插入表單10.2知識(shí)儲(chǔ)備2.設(shè)置表單屬性表單有對(duì)應(yīng)的屬性面板，將光標(biāo)置于虛線上，打開屬性面板，可以設(shè)置表單的屬性，如圖10-4所示。圖10-4表單屬性面板10.2知識(shí)儲(chǔ)備10.2.3創(chuàng)建及設(shè)置表單元素

1.文本域、文本區(qū)域、隱藏域表單中可用于輸入文本的對(duì)象統(tǒng)稱為文本域，DreamweaverCS5中共提供3種類型的文本域：文本域、文本區(qū)域、隱藏域。其中文本域又可分為單行文本域，多行文本域和密碼域，可接受任何類型的字母、數(shù)字、文本輸入內(nèi)容。10.2知識(shí)儲(chǔ)備(1)文本域文本域是一個(gè)接受文本信息的文本框。在文本域中幾乎可以容納任何類型的文本數(shù)據(jù)。網(wǎng)頁中常見的文本域有以下三種類型：①單行文本域：只能輸入一行的信息。②多行文本域：可以輸入多行信息，為訪問者提供一個(gè)較大的輸入?yún)^(qū)域。③密碼文本域：該類型比較特殊，當(dāng)用戶在域中輸入時(shí)，所輸入的文本北替換為星號(hào)（*）或項(xiàng)目符號(hào)，以隱藏輸入文本，保護(hù)這些信息。10.2知識(shí)儲(chǔ)備插入文本域的步驟如下：①將光標(biāo)置于要添加文本域的位置。②單擊菜單“插入”→“表單”→“文本域”，彈出“輸入標(biāo)簽輔助功能屬性”對(duì)話框，如圖10-5所示。③根據(jù)需要進(jìn)行相應(yīng)的設(shè)置后單擊“確定”按鈕，即可在光標(biāo)處添加文本域。圖10-5“輸入標(biāo)簽輔助功能屬性”對(duì)話框10.2知識(shí)儲(chǔ)備文本域有對(duì)應(yīng)的屬性面板。選中文本域，打開屬性面板，可以設(shè)置文本域的屬性，如圖10-6所示。圖10-6文本域?qū)傩悦姘?0.2知識(shí)儲(chǔ)備(2)文本區(qū)域文本區(qū)域的外觀類似于多行文本框，插入是默認(rèn)可容納5行文本，其屬性設(shè)置也與文本域?qū)傩栽O(shè)置相同。插入文本區(qū)域的步驟如下：①將光標(biāo)置于要添加文本區(qū)的位置。②單擊菜單“插入”→“表單”選項(xiàng)→“文本區(qū)域”命令，如圖10-7所示。10.2知識(shí)儲(chǔ)備圖10-7文本區(qū)域及其屬性設(shè)置10.2知識(shí)儲(chǔ)備(3)隱藏域隱藏域在頁面中對(duì)于用戶是不可見的，它用于存儲(chǔ)一些信息，以便于被處理表單的程序使用。插入隱藏域的步驟如下：①將光標(biāo)置于要添加隱藏域的位置，②單擊菜單“插入”→“表單”選項(xiàng)→“隱藏域”命令。選中隱藏域，打開屬性面板，如圖10-8所示。圖10-8隱藏域?qū)傩悦姘?0.2知識(shí)儲(chǔ)備2.復(fù)選框、復(fù)選框組、單選按鈕、單選按鈕組、按鈕

(1)復(fù)選框復(fù)選框允許訪問在一組選項(xiàng)中選擇任意多個(gè)適用的選項(xiàng)。例如，在選擇興趣愛好時(shí)，訪問者可能會(huì)同時(shí)選擇“讀書”、“寫作”和“旅游”。插入復(fù)選框的步驟如下：①將光標(biāo)置于要添加復(fù)選框的位置。②單擊菜單“插入”→“表單”選項(xiàng)→“復(fù)選框”命令，打開“輸入標(biāo)簽輔助功能屬性”對(duì)話框，在“標(biāo)簽”右側(cè)文本框中輸入“讀書”，如圖10-9所示。10.2知識(shí)儲(chǔ)備③依次逐個(gè)插入其他復(fù)選框。選中復(fù)選框，打開屬性面板，如圖10-10所示。圖10-9“輸入標(biāo)簽輔助功能屬性”對(duì)話框圖10-10復(fù)選框及其屬性設(shè)置10.2知識(shí)儲(chǔ)備(2)復(fù)選框組插入復(fù)選框組的步驟如下：①將光標(biāo)置于要添加復(fù)選框的位置。②單擊菜單“插入”→“表單”→“復(fù)選框組”命令，打開“復(fù)選框組”對(duì)話框，在其中設(shè)置復(fù)選框組的名稱、組中包含的復(fù)選框個(gè)數(shù)、復(fù)選框的文本標(biāo)簽及布局方式等，如圖10-11所示。10-11“復(fù)選框組”對(duì)話框10.2知識(shí)儲(chǔ)備(3)單選按鈕單選按鈕作為一個(gè)使用組，提供彼此排斥的選項(xiàng)值，用戶在單選按鈕組內(nèi)只能選擇一個(gè)選項(xiàng)。插入單選按鈕的步驟如下：①將光標(biāo)放到要添加單選按鈕的位置。②單擊菜單“插入”→“表單”→“單選按鈕”命令，打開“輸入標(biāo)簽輔助功能屬性”對(duì)話框，在“標(biāo)簽”右側(cè)文本框中輸入”男”，單擊“確定”按鈕。如圖10-12所示。10.2知識(shí)儲(chǔ)備③接著再次插入“女”單選按鈕。選中單選按鈕，打開屬性面板，效果如圖10-13所示。圖10-12“輸入標(biāo)簽輔助功能屬性”對(duì)話框10-13單選按鈕及其屬性設(shè)置10.2知識(shí)儲(chǔ)備(4)單選按鈕組使用單選按鈕組對(duì)話框，可以一次插入一組單選鈕。插入單選按鈕組的步驟如下：①將光標(biāo)置于要添加單選按鈕組的位置。②單擊菜單“插入”→“表單”選項(xiàng)→“單選按鈕組”命令，打開“單選按鈕組”對(duì)話框如圖10-14。圖10-14“單選按鈕組”對(duì)話框10.2知識(shí)儲(chǔ)備(5)按鈕插入普通按鈕的步驟如下：①將光標(biāo)置于要添加按鈕的位置。②單擊菜單“插入”→“表單”→“按鈕”命令，打開“輸入標(biāo)簽輔助功能屬性”對(duì)話框，在對(duì)話框中單擊“確定”按鈕。③選中按鈕，打開屬性面板，可以設(shè)置按鈕的屬性如圖10-15所示。圖10-15按鈕屬性面板10.2知識(shí)儲(chǔ)備3.列表/菜單、跳轉(zhuǎn)菜單

(1)列表/菜單列表和菜單的功能與復(fù)選框和單選按鈕的功能類似，都可以列舉很多選項(xiàng)供瀏覽者選擇，其最大的好處就是可以在有限的空間內(nèi)為用戶提供更多的選項(xiàng)，非常節(jié)省版面。插入列表/菜單的步驟如下:①將光標(biāo)置于要插入列表的位置。②單擊菜單“插入”→“表單”→“選擇（列表/菜單）”命令，在“輸入標(biāo)簽輔助功能屬性”對(duì)話框中，單擊“確定”按鈕，即可在光標(biāo)處插入列表/菜單。選中列表/菜單，在屬性面板中設(shè)置相應(yīng)的參數(shù)。10.2知識(shí)儲(chǔ)備如果要插入列表框，在列表/菜單的屬性選擇“類型”選項(xiàng)組中的“列表”單選按鈕，如圖10-16所示。圖10-16列表及其屬性設(shè)置10.2知識(shí)儲(chǔ)備默認(rèn)插入的列表框或菜單中不包括任何選項(xiàng)，必須手動(dòng)添加可供瀏覽者選擇的內(nèi)容。選擇列表或菜單后，單擊屬性檢查器上的“列表值”按鈕，打開“列表值”對(duì)話框，即可設(shè)置選擇內(nèi)容，如圖10-17所示。圖10-17“列表值”對(duì)話框10.2知識(shí)儲(chǔ)備在表單中插入列表框或菜單后，可根據(jù)需要更改其屬性.列表框與菜單的屬性選項(xiàng)內(nèi)容相同，只是菜單的“高度”與“選定范圍”兩個(gè)屬性呈灰色顯示，如圖10-18所示。如果是列表框，則屬性檢查器中的所有選項(xiàng)均會(huì)被激活。圖10-18菜單及其屬性設(shè)置10.2知識(shí)儲(chǔ)備(2)跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單是創(chuàng)建鏈接的一種形式，其中的每個(gè)選項(xiàng)都鏈接到某個(gè)文檔和文件，以便訪問者選擇并進(jìn)行跳轉(zhuǎn)操作。跳轉(zhuǎn)菜單中可放置能夠在瀏覽器中打開的任何文件類型的鏈接。跳轉(zhuǎn)菜單效果圖如圖10-19所示。圖10-19跳轉(zhuǎn)菜單效果圖10.2知識(shí)儲(chǔ)備插入跳轉(zhuǎn)菜單的步驟如下：①將光標(biāo)置于要插入跳轉(zhuǎn)菜單的位置。②單擊菜單“插入”→“表單”選項(xiàng)→“跳轉(zhuǎn)菜單”命令。③在如圖10-20所示彈出對(duì)話框中進(jìn)行插入跳轉(zhuǎn)菜單的設(shè)定。圖10-20“插入跳轉(zhuǎn)菜單”對(duì)話框10.2知識(shí)儲(chǔ)備跳轉(zhuǎn)菜單設(shè)置完成后如圖10-20所示。圖10-20跳轉(zhuǎn)菜單及其屬性設(shè)置10.2知識(shí)儲(chǔ)備4.圖像域、文件域

(1)圖像域向表單中插入圖像域后，圖像域?qū)⑵鸬教峤槐韱蔚淖饔?，本來需要用提交表單按鈕來提交表單，但有時(shí)為了使表單更美觀，需要用圖像來提交表單，只需要把圖像設(shè)置成圖像域就可以了。插入圖像域的步驟如下：①將光標(biāo)置于要插入圖像域的位置。②單擊菜單“插入”→“表單”→“圖像域”命令，如圖20-21所示。圖10-21插入圖像域10.2知識(shí)儲(chǔ)備選中圖像域，打開屬性面板，可以設(shè)置圖像域?qū)傩裕鐖D10-22所示。圖10-22圖像域?qū)傩悦姘?0.2知識(shí)儲(chǔ)備(2)文件域文件域允許用戶將其計(jì)算機(jī)上的文件上傳到服務(wù)器。文件域由一個(gè)文本框和一個(gè)“瀏覽”按鈕組成。訪問者可以在文件域的文本框中輸入一個(gè)文件的路徑，也可以單擊文件域的“瀏覽”按鈕來選擇一個(gè)文件，當(dāng)訪問者提交表單時(shí)，這個(gè)文件被上傳。10.2知識(shí)儲(chǔ)備插入文件域的步驟如下：①將光標(biāo)置于要插入圖像域的位置。②單擊菜單“插入”→“表單”→“文件域”命令，如圖10-23所示。選中文件域，打開屬性面板，可以設(shè)置文件域?qū)傩匀鐖D20-24所示。圖10-23插入文件域圖10-24文件域?qū)傩悦姘宸祷?0.3實(shí)踐向?qū)蝿?wù)10-1創(chuàng)建在線注冊頁面，效果如圖10-1所示。具體操作步驟如下：1.制作頁面表格（1）啟動(dòng)DreamweaverCS5，新建一個(gè)HTML頁面，并保存文件。（2）單擊菜單“插入”→“表格”命令，插入一個(gè)3行1列，寬度為900像素，邊框?yàn)?居中對(duì)齊的表格。10.3實(shí)踐向?qū)В?）在表格的第一行插入圖片“top.jpg”，在表格的第二行輸入“在線注冊”，且文字居中。

2.插入正文表格和表單（1）把鼠標(biāo)置于表格的第三行，單擊菜單“插入”→“表單”→“表單”命令，插入一個(gè)空白表單。

（2）將鼠標(biāo)放在表單中，單擊菜單“插入”→“表格”，插入一個(gè)10行2列的表格。

（3）選擇嵌套表格的左列，設(shè)置對(duì)齊方式為右對(duì)齊。（4）在第1行至第9行的左邊單元格中分別輸入：“用戶名”、“密碼”、“性別”、“愛好”、“聯(lián)系方式”、“頭像上傳”、“職業(yè)”、“備注”、“驗(yàn)證碼”。10.3實(shí)踐向?qū)?/p>

3.插入表單元素（1）將插入點(diǎn)置于第1行的右邊單元格中，選擇“插入”→“表單”→“文本域”命令，插入一個(gè)文本域。在文本域右面輸入一個(gè)星號(hào)（*）。（2）將插入點(diǎn)置于第2行的右邊單元格中，選擇“插入”→“表單”→“文本域”命令，插入一個(gè)文本域。選中該文本域，在其屬性面板中“類型”中選擇“密碼”，在文本域右面輸入一個(gè)星號(hào)（*）。

（3）將插入點(diǎn)置于第3行的右邊單元格中，選擇“插入”→“表單”→“單選組按鈕”命令，插入一個(gè)單選按鈕組。在插入的單選按鈕右邊輸入“男”、“女”。10.3實(shí)踐向?qū)В?）將插入點(diǎn)置于第4行的右邊單元格中，選擇“插入”→“表單”→“復(fù)選框”命令，插入一個(gè)復(fù)選框。在復(fù)選框右側(cè)輸入“音樂”，然后在“音樂”右側(cè)再插入3個(gè)復(fù)選框，并分別對(duì)應(yīng)輸入“看書”，“旅游”，“籃球”。（5）將插入點(diǎn)置于第5行的右邊單元格中，選擇“插入”→“表單”→“文本域”命令，插入一個(gè)文本域，在文本域右面輸入一個(gè)星號(hào)（*）。（6）將插入點(diǎn)放入到第6行的右邊單元格中，選擇“插入”→“表單”→“文件域”命令。10.3實(shí)踐向?qū)В?）將插入點(diǎn)放入到第7行的右邊單元格中，選擇“插入”→“表單”→“選擇（列表/菜單）”命令，打開“列表值”對(duì)話框，在“項(xiàng)目標(biāo)簽”欄中單擊，輸入“請(qǐng)選擇”，再單擊“添加項(xiàng)目”按鈕（+），依次添加“在校學(xué)生”、“固定工作者”、“自由職業(yè)者”、“待業(yè)/無業(yè)/失業(yè)”、“退休”、“其他”。單擊“確定”按鈕完成設(shè)置。選擇菜單控件，在其屬性面板上選擇“初