網(wǎng)頁設(shè)計表單的使用ppt課件

1、江西師范大學(xué)網(wǎng)頁設(shè)計課程組網(wǎng)頁設(shè)計江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.1 表單的根本概念 9.2 表單的創(chuàng)建 9.3 創(chuàng)建文本域 9.4 創(chuàng)建按鈕 9.5 插入單項選擇按鈕與復(fù)選框 9.6 列表與菜單 9.7 實際技藝訓(xùn)練-制造“注冊頁面第第9 9章章 表單的運用表單的運用 江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.1 9.1 表單的根本概念表單的根本概念 表單的運用非常廣泛。例如常見的留言簿、討論區(qū)、會員注冊/登陸、在線查詢等，都需求經(jīng)過表單才干將數(shù)據(jù)傳送到后臺程序進(jìn)展處置，實踐上表單的作用就是搜集信息和數(shù)據(jù)。如圖9-1所示的即為運用表單元素的調(diào)查詢卷網(wǎng)頁。圖9-1 表單范例 江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.2

2、 9.2 表單的創(chuàng)建表單的創(chuàng)建 一個表單通常由兩部分組成，即表單域和表單對象，如圖9-1所示，其中表單域相當(dāng)于一個“容器，一切的表單對象都放在表單域中。表單域包含處置數(shù)據(jù)所用到的程序以及數(shù)據(jù)提交給效力器的方法。通常在Dreamweaver 8.0中表單域的范圍由一個紅色的虛線框來表示，如圖9-2所示。 圖9-2 一個空白的表單域 江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.2 9.2 表單的創(chuàng)建表單的創(chuàng)建 創(chuàng)建表單的第一步就是插入表單域，方法是選擇“插入 面板中的“表單 標(biāo)簽，單擊“表單按鈕即可在網(wǎng)頁中插入新的表單域。然后翻開屬性面板，從中設(shè)置該表單的各種屬性，如圖9-3所示。 圖9-3 表單屬性 江西師范

3、大學(xué)網(wǎng)頁設(shè)計課程組9.3 9.3 創(chuàng)建文本域創(chuàng)建文本域 9.3.1 創(chuàng)建單行文本域 將光標(biāo)定位在表單域的紅色虛線框中，單擊“表單標(biāo)簽中的“文本字段按鈕，文檔中會出現(xiàn)一個文本框，如圖9-4所示。 圖9-4單行文本域 江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.3 9.3 創(chuàng)建文本域創(chuàng)建文本域 9.3.2 創(chuàng)建多行文本域 多行文本域是建立在單行文本域根底上的，其創(chuàng)建方法與創(chuàng)建單行文本域的方法根本一樣，只不過選中單行文本域后，在其屬性面板中將“類型 選項設(shè)置為“多行，就可得到多行文本域，如圖9-5所示。 圖9-5 多行文本域 江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.3 9.3 創(chuàng)建文本域創(chuàng)建文本域 9.3.3 創(chuàng)建密碼文本

4、域 密碼文本域也是建立在單行文本域根底上的，選中文本域，并在其“屬性面板上將“類型設(shè)為“密碼。通常用于用戶登錄時的密碼文本框如圖9-6所示。圖9-6 密碼文本域 江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.4 9.4 創(chuàng)建按鈕創(chuàng)建按鈕 9.4.1 9.4.1 插入規(guī)范表單按鈕插入規(guī)范表單按鈕 將插入點放在表單域內(nèi)，然后單擊將插入點放在表單域內(nèi)，然后單擊“表單標(biāo)簽中的表單標(biāo)簽中的“按按鈕按鈕，或者選擇鈕按鈕，或者選擇“插入插入“表單表單“按鈕命令，按鈕命令，Dreamweaver 8.0Dreamweaver 8.0會在表單域中插入會在表單域中插入“按鈕元素，并顯示按鈕元素，并顯示“按鈕的屬性面板，如圖按鈕的

5、屬性面板，如圖9-79-7所示。所示。 9-7 9-7 規(guī)范表單按鈕規(guī)范表單按鈕 江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.4 9.4 創(chuàng)建按鈕創(chuàng)建按鈕 9.4.2 9.4.2 插入圖像表單插入圖像表單 將插入點放在表單域內(nèi)，然后單擊將插入點放在表單域內(nèi)，然后單擊“表單標(biāo)簽中的表單標(biāo)簽中的“圖像圖像域按鈕，翻開如圖域按鈕，翻開如圖9-89-8所示的對話框，在其中找到按鈕圖所示的對話框，在其中找到按鈕圖像，單擊像，單擊“確定按鈕完成插入操作。確定按鈕完成插入操作。 9-8 9-8 “選擇圖像源文件選擇圖像源文件 江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.5 9.5 插入單項選擇按鈕與復(fù)選框插入單項選擇按鈕與復(fù)選框 復(fù)選

6、框?qū)γ總€單獨的呼應(yīng)進(jìn)展“封鎖和“翻開形狀切換，因此，可以從復(fù)選框組中選擇多個選項。單項選擇按鈕作為一組運用，提供彼此相互排斥的選項值，在單項選擇按鈕組內(nèi)只能選擇一個選項。其實復(fù)選框和單項選擇框就像多項選擇題和單項選擇題，如圖9-9所示。 圖9-9 單項選擇按鈕與復(fù)選框江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.5 9.5 插入單項選擇按鈕與復(fù)選框插入單項選擇按鈕與復(fù)選框 1.1.插入單項選擇按鈕插入單項選擇按鈕 單擊單擊“表單標(biāo)簽內(nèi)的表單標(biāo)簽內(nèi)的“單項選擇按鈕按鈕，單項選擇按鈕按鈕，DreamweaverDreamweaver會自動向網(wǎng)頁文檔中插入一個單項選擇按鈕，會自動向網(wǎng)頁文檔中插入一個單項選擇按鈕，其

7、屬性面板如圖其屬性面板如圖9-109-10所示。所示。圖圖9-10 9-10 單項選擇按鈕的屬性面板單項選擇按鈕的屬性面板江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.5 9.5 插入單項選擇按鈕與復(fù)選框插入單項選擇按鈕與復(fù)選框 單擊“表單標(biāo)簽內(nèi)的“單項選擇按鈕組按鈕，會彈出如圖9-11所示的對話框。 圖9-11 “單項選擇按鈕組對話框 江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.6 9.6 列表與菜單列表與菜單 列表與菜單的功能與復(fù)選框和單項選擇框的功能是差不多的，都可以列舉很多項選擇項供閱讀者選擇，其最大的益處就是可以在有限的空間內(nèi)為用戶提供更多的選擇，非常節(jié)省版面。其中列表提供一個滾動條，可閱讀許多項，并進(jìn)展多重選擇

8、。下拉式菜單默許僅顯示一個項，該項為活動選項，單擊翻開菜單只能選擇其中的一項。如圖9-12所示。 圖9-12 列表與菜單元素 江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.6 9.6 列表與菜單列表與菜單 1 1、創(chuàng)建列表、創(chuàng)建列表單擊單擊“表單標(biāo)簽內(nèi)的表單標(biāo)簽內(nèi)的“列表列表/ /菜單按鈕，菜單按鈕，DreamweaverDreamweaver即即會在網(wǎng)頁中插入一個列表會在網(wǎng)頁中插入一個列表/ /菜單。其屬性面板如圖菜單。其屬性面板如圖9-139-13所示。所示。 圖圖9-13 9-13 列表列表/ /菜單屬性面板菜單屬性面板 江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.6 9.6 列表與菜單列表與菜單 單擊“列表值按鈕，翻開如圖9-14所示的對話框，在這里可以添加、設(shè)置列表中的選項值。 圖 9-14“列表值對話框江西師范大學(xué)網(wǎng)頁設(shè)計課程組9.6 9.6 列表與菜單列表與菜單 2.2.創(chuàng)建菜單創(chuàng)建菜單單擊單擊“列表列表/ /菜單后，默許插入到頁面中的元素就是菜單菜單后，默許插入到頁面中的元素就是菜單元素，菜單元素只需求設(shè)置元素，菜單元素只需求設(shè)置“列表值和列表值和“初始化時選項兩初始化時選項兩個屬性。其他列表所具有的屬性，菜單元素不可選，也就是個屬性。其他列表所具有的屬性，菜單元素不可選，也就是說菜單只可以完成菜單的選項。如圖說菜單只可以完成菜單的選項。如圖9-159-15所示。所