《信息技術(shù)》教案-網(wǎng)頁(yè)表單

1、備課時(shí)間：2004/03/22課 題：第五章 網(wǎng)頁(yè)制作 第六節(jié) 網(wǎng)頁(yè)表單教學(xué)目的：表單的建立 表單資料的收集和處理 搜索表單的建立教學(xué)重點(diǎn)：表單資料的收集和處理 搜索表單的建立教學(xué)方法: 邊講解邊演示教學(xué)過(guò)程：引言：直接進(jìn)行操作演示教授新課：網(wǎng)頁(yè)表單板書(shū) 第六節(jié) 網(wǎng)頁(yè)表單一、表單的建立在FrontPage 2000中，單擊 “插入（I）” 菜單中的“表單（M）”命令，其下拉菜單中列出了所有的字段，單擊其中的一種，即可插入相應(yīng)的字段。例5-6-1 建立如圖5-25所示的表單網(wǎng)頁(yè)，取名為guestbook.htm。圖5-25操作步驟：（1）單擊“新建”按鈕，建立新頁(yè)面，首先創(chuàng)建一個(gè)2×1

2、表格，并在表格的第一行插入標(biāo)題動(dòng)畫(huà)（look.gif、liuyan.gif）。（2）右擊表格的第二行，在彈出的快捷菜單中單擊“拆分單元格”，打開(kāi)“拆分單元格”對(duì)話(huà)框，選擇“拆分為列”，并輸入列數(shù)：3，將該單元格拆分分三列，分別定義兩側(cè)單元格的背景色為淺紫色。（3）將插入點(diǎn)移到中間的單元格后，依次單擊“插入（I）” 菜單中的1 / 4“表單（M）”“單行文本框（T）”命令，頁(yè)面上出現(xiàn)一個(gè)單行文本框和兩個(gè)按鈕，分別是“提交”和“復(fù)位”按鈕，將插入點(diǎn)移到文本框左側(cè)，接著輸入“姓名：”，然后將插入點(diǎn)移到文本框右側(cè)。（4）輸入“年齡：”，然后依次單擊“插入（I）” 菜單中的“表單（M）”“單行文本框（T

3、）”命令，產(chǎn)生第二個(gè)單行文本框，按回車(chē)鍵。（5）輸入“性別：”，然后依次單擊“插入（I）”菜單中的“表單（M）”“單選按鈕（R）”命令，輸入“女”。再用同樣的方法插入另一個(gè)單選按鈕，并在其右側(cè)輸入“男”，然后，雙擊各選項(xiàng)按鈕，分別設(shè)置它們的屬性，其中“組名稱(chēng)”必須相同，表示這兩個(gè)按鈕在同一個(gè)單選按鈕組，最后按回車(chē)鍵。（6）輸入“愛(ài)好：”，然后依次單擊“插入（I）”菜單中的“表單（M）”“復(fù)選框（C）”命令，輸入“音樂(lè)”。用同樣方法制成其余復(fù)選框。（7）輸入“職業(yè)：”，依次單擊“插入（I）”菜單中的“表單（M）”“下拉菜單（D）”命令。（8）雙擊下拉式菜單，出現(xiàn)如圖5-26所示的“下拉菜單屬性”

4、對(duì)話(huà)框。 （9）單擊“添加”按鈕，添加一個(gè)“學(xué)生”菜單項(xiàng)，重復(fù)操作，添加其余菜單后，再單擊“確定”按鈕，并按回車(chē)鍵。（10）輸入“您對(duì)本網(wǎng)頁(yè)的建議：”后，按回車(chē)鍵。（11）依次單擊“插入（I）”菜單中的“表單（M）”“滾動(dòng)文本框（S）”命令，在網(wǎng)頁(yè)編輯區(qū)將出現(xiàn)一個(gè)滾動(dòng)文本框，調(diào)整文本框的大小，使其大小合適。（12）保存網(wǎng)頁(yè)，取名為guestbook.htm。二、表單資料的收集和處理 表單的作用在于幫助收集資料，對(duì)于訪問(wèn)者來(lái)說(shuō)，填完資料后，單擊“提交”按鈕，就可以將信息傳送到服務(wù)器上。對(duì)于網(wǎng)站管理員來(lái)說(shuō)，更重要的是對(duì)這些資料進(jìn)行處理，將它們變成所需要的資料形式，比如在上例中，當(dāng)訪問(wèn)者填寫(xiě)完表單并

5、發(fā)送回來(lái)后，網(wǎng)站管理員應(yīng)該對(duì)這些資料進(jìn)行分析，對(duì)某些讀者提出的問(wèn)題進(jìn)行個(gè)別解答，并及時(shí)改進(jìn)網(wǎng)站。為了方便資料的整理，在制作表單時(shí)就應(yīng)該有意識(shí)地將表單的結(jié)果輸出到某一個(gè)HTML文件或純文本文件中以文件的形式存放。將鼠標(biāo)指針?lè)胖迷诒韱斡蛩诘奶摼€(xiàn)范圍內(nèi)右擊，在彈出的快捷菜單中單擊“表單屬性”，打開(kāi)“表單屬性”對(duì)話(huà)框，如圖5-27所示。在默認(rèn)情況下，表單的結(jié)果會(huì)發(fā)送到當(dāng)前網(wǎng)站中，以form_result.txt為文件名存儲(chǔ)起來(lái)。也可以修改文件名和文件的路徑，或者以電子郵件的形式發(fā)送到指定的信箱中。當(dāng)然，這些信息只有管理員才能看到，為了讓訪問(wèn)者能夠看到自己和別人的留言，以便彼此交流，還可以直接將表單的

6、處理結(jié)果返回到指定的網(wǎng)頁(yè)中。例5-6-2 設(shè)定在留言板下方顯示各位訪客的留言?xún)?nèi)容。操作步驟： （1）將指針指向表單虛線(xiàn)框內(nèi)，右擊，在快捷菜單中單擊“表單屬性”命令，打開(kāi)“表單屬性”對(duì)話(huà)框，在“文件名”框中輸入一個(gè)文件名，指定存放留言?xún)?nèi)容的網(wǎng)頁(yè)，如results.htm，然后單擊“確定”按鈕，關(guān)閉“表單屬性”對(duì)話(huà)框。 （2）保存guestbook.htm網(wǎng)頁(yè)，單擊視圖欄“文件夾”按鈕，切換到文件夾視圖狀態(tài)，然后單擊“查看（V）” 菜單中的“刷新（R）”命令，可以看到FrontPage自動(dòng)在當(dāng)前網(wǎng)站的_private文件夾下建立了一個(gè)名為results.htm網(wǎng)頁(yè)。 （3）單擊視圖欄“網(wǎng)頁(yè)”按鈕，

7、切換到網(wǎng)頁(yè)制作狀態(tài)，將插入點(diǎn)移到留言板下方表單域虛線(xiàn)框外，然后依次單擊“插入（I）” 菜單中的“組件（O）”“包含網(wǎng)頁(yè)（I）”命令，打開(kāi)“包含網(wǎng)頁(yè)屬性”對(duì)話(huà)框，如圖5-28所示。在對(duì)話(huà)框中輸入“要包含的網(wǎng)頁(yè)名”，即步驟（1）所指定的文件名results.htm，然后單擊“確定”按鈕。（4）進(jìn)入瀏覽器測(cè)試留言板，留言完畢，單擊“提交”按鈕發(fā)送信息后，單擊瀏覽器“刷新”按鈕，即可看到留言?xún)?nèi)容。三、搜索表單的建立 搜索表單的功能僅限于在本網(wǎng)站中進(jìn)行搜索，而不像一般的搜索引擎可以在整個(gè)WWW中搜索，因此，建立搜索表單是為了讓訪問(wèn)者在我們的網(wǎng)站中迅速找到他們感興趣的主題。在FrontPage 2000中，有內(nèi)置的組件，幫助我們建立搜索表單。例5-6-3 在huanbao網(wǎng)站的主頁(yè)上，建立一個(gè)搜索表單。具體步驟： （1）雙擊“index.htm”，打開(kāi)主頁(yè)。 （2）將插入點(diǎn)移到友情鏈接上方，依次單擊“插入（I）”菜單中的“組件（O）”“搜索表單（S）”命令，打開(kāi)“搜索表單屬性”對(duì)話(huà)框，如圖5-29所示。 （3）在對(duì)話(huà)框中輸入相應(yīng)的內(nèi)容，單擊“搜索結(jié)果”標(biāo)簽，在“要搜索的單詞列表”文本框中輸入“全部”，表示要搜索網(wǎng)站中的所有網(wǎng)頁(yè)。若在“顯示文件日期”復(fù)選框前打勾，還可以設(shè)置日期和時(shí)間的格式。 （4）單擊“確定”按鈕，頁(yè)面上