第6章 Dreamweave中表格和表單的應(yīng)用課件

第6章Dreamweaver中表格和表單的應(yīng)用第6章Dreamweaver中1表格

在網(wǎng)頁(yè)設(shè)計(jì)中，頁(yè)面布局是一個(gè)重要的部分。Dreamweaver8.0提供了多種方法來(lái)創(chuàng)建和控制網(wǎng)頁(yè)布局，最普通的方法就是使用表格，使用表格可以簡(jiǎn)化頁(yè)面布局設(shè)計(jì)過(guò)程、導(dǎo)入表格化數(shù)據(jù)、設(shè)計(jì)頁(yè)面分欄及定位頁(yè)面上的文本和圖像等。返回目錄表格返回目錄2插入表格在Dreamweaver8.0“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)置于需要插入表格的位置。如果文檔是空白的，則只能將插入點(diǎn)放置在文檔的開(kāi)頭。執(zhí)行下列操作之一打開(kāi)“表格”對(duì)話(huà)框，如下圖所示。選擇[插入][表格]菜單命令；在“插入欄”的“常用”選項(xiàng)卡中單擊“表格”按鈕；按【Ctrl+Alt+T】鍵。

插入表格3圖表格在“表格”對(duì)話(huà)框中可對(duì)各項(xiàng)參數(shù)進(jìn)行設(shè)置。圖表格在“表格”對(duì)話(huà)框中可對(duì)各項(xiàng)參數(shù)進(jìn)行設(shè)置。4在表格中添加內(nèi)容

將表格插入到文檔后即可向表格中添加文本或圖像等內(nèi)容。向表格中添加內(nèi)容的方法很簡(jiǎn)單，只需將光標(biāo)定位到要輸入內(nèi)容的單元格，再輸入文本即可。在表格中添加內(nèi)容5選擇表格

表格的選取是編輯表格的前提，要在表格中進(jìn)行任何操作都離不開(kāi)選取表格。整個(gè)表格的選擇整行或整列的選擇單個(gè)單元格的選擇一行或矩形單元格的選擇單擊一個(gè)單元格,然后按住shift鍵單擊另一個(gè)單元格.這兩個(gè)單元格定義的直線(xiàn)和矩形區(qū)域中的所有單元格都將被選擇。在按住ctrl鍵的同時(shí)單擊要選擇的單元格、行或列，可選擇不相鄰的單元格。

選擇表格6設(shè)置表格屬性

為了使表格更具特色，需要在“表格”屬性面板中對(duì)表格線(xiàn)的顏色、表格或單元格的背景、邊框等進(jìn)行設(shè)置。“表格”屬性面板中顯示了所插入的表格的所有特性，通過(guò)修改面板中的參數(shù)可快速地編輯表格外觀(guān)。如果窗口中沒(méi)有顯示屬性面板，可選擇[窗口][屬性]菜單命令打開(kāi)。如下圖所示。設(shè)置表格屬性

為了使表格更具特色，需要在“表格”屬7圖表格屬性圖表格屬性8拆分與合并單元格修改---表格---合并拆分單元格插入或刪除行或列修改---表格---刪除行或列格式化表格命令---格式化表格如下圖所示

拆分與合并單元格9圖格式化表格圖格式化表格10表單表單是用于實(shí)現(xiàn)瀏覽者與網(wǎng)頁(yè)制作者之間信息交互的一種網(wǎng)頁(yè)對(duì)象，在Internet中表單被廣泛應(yīng)用于各種信息的搜集與反饋。

表單11

通常表單的工作過(guò)程如下:

(1）訪(fǎng)問(wèn)者在瀏覽有表單的頁(yè)面時(shí)，可填寫(xiě)必要的信息，然后單擊“提交”按鈕。

(2）提交的信息通過(guò)Internet傳送到服務(wù)器上。

(3）服務(wù)器上有專(zhuān)門(mén)的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息，并要求糾正錯(cuò)誤。(4）當(dāng)數(shù)據(jù)完整無(wú)誤后，服務(wù)器反饋一個(gè)輸入完成信息。

12返回目錄圖“表單”面板返回目錄圖“表單”面板13輸入標(biāo)記

<input>標(biāo)簽是表單中的輸入標(biāo)記，它是個(gè)單標(biāo)簽。

<inputname=“file_name” type=“type_name”/>選中插入的單行文本域，設(shè)置文本域相關(guān)屬性，如下圖所示。

輸入標(biāo)記141、單行文本框

type=text，表示該輸入項(xiàng)輸入的是字符串，輸入的內(nèi)容以單行顯示。type=text，<input>標(biāo)簽除了有name和type屬性外,還有3個(gè)可選的屬性:value、size、maxlength。

value屬性：用來(lái)設(shè)定文本框中的初始值size屬性：用來(lái)設(shè)定文本框的長(zhǎng)度maxlength屬性：用來(lái)設(shè)定該文本框允許用戶(hù)輸入的最大字符數(shù)。

第6章Dreamweave中表格和表單的應(yīng)用課件152、密碼框：當(dāng)type=“password”時(shí)，其使用方法與text很相似。password所輸入的字符全以號(hào)表示,以保證密碼的安全性多行文本框<textarea>標(biāo)簽用來(lái)制作多行文本框，成對(duì)標(biāo)簽。語(yǔ)法：<textareaname=“name”rows=“value”cols=“value”value=“value”></textarea>

2、密碼框：16

cols屬性：用來(lái)設(shè)定多行文本框一次能顯示的列數(shù)。rows屬性：用來(lái)設(shè)定多行文本框一次能顯示的行數(shù)。第6章Dreamweave中表格和表單的應(yīng)用課件17單選框和復(fù)選框1、單選框：?jiǎn)芜x按鈕作為一個(gè)組使用，提供彼此排斥的選項(xiàng)值。用戶(hù)在單選按鈕組內(nèi)只能選擇一個(gè)選項(xiàng)。當(dāng)type=“radio”時(shí),表示該輸入項(xiàng)是一個(gè)單選項(xiàng),用戶(hù)只能選擇單選項(xiàng)中的一項(xiàng)作為輸入信息。checked屬性，用來(lái)表示此項(xiàng)被默認(rèn)選中。value屬性，用來(lái)設(shè)定選中項(xiàng)目后傳送到服務(wù)器端的。單選框和復(fù)選框182、復(fù)選框：復(fù)選框主要用來(lái)選擇選項(xiàng)不唯一的一些信息。當(dāng)type=“checkbox”時(shí),表示該輸入項(xiàng)是一個(gè)復(fù)選框，用戶(hù)可以同時(shí)選中表單中的一個(gè)或多個(gè)復(fù)選項(xiàng)作為輸入信息。checked屬性，用來(lái)表示此項(xiàng)被默認(rèn)選中value屬性，用來(lái)設(shè)定選中項(xiàng)目后傳送到服務(wù)器端的值。2、復(fù)選框：復(fù)選框主要用來(lái)選擇選項(xiàng)不唯一的一些信息。19菜單和列表

在表單中，通過(guò)<select>和<option>標(biāo)簽就可以在瀏覽器中出現(xiàn)一個(gè)下拉式的菜單或帶有滾動(dòng)條的列表菜單。語(yǔ)法：<selectname=“name”size=“value”multiple=“multiple”> <optionvalue=“value”selected=“selected”>選項(xiàng)值</option> <optionvalue=“value”>選項(xiàng)值</option>……</select>菜單和列表20size屬性：用來(lái)設(shè)定顯示的選項(xiàng)數(shù)目，默認(rèn)值為1。

multiple屬性：用來(lái)設(shè)定列表中的項(xiàng)目多選。當(dāng)<select>標(biāo)簽里面有size屬性和multiple屬性時(shí)，表示是列表；沒(méi)有size屬性和multiple屬性，則表示下拉菜單。當(dāng)然，在列表中，二者不一定同時(shí)使用。size屬性：用來(lái)設(shè)定顯示的選項(xiàng)數(shù)目，默認(rèn)值為1。21

按鈕1、普通按鈕當(dāng)type=“button”時(shí)，表示該輸入項(xiàng)輸入的是普通按鈕。value屬性：用來(lái)設(shè)定顯示在按鈕上的文字。2、提交按鈕當(dāng)type=“submit”時(shí)，表示該輸入項(xiàng)輸入的是提交按鈕。單擊提交按鈕后，瀏覽器可以將表單的輸入信息傳遞給服務(wù)器。

223、重置按鈕當(dāng)type=“reset”時(shí)，表示該輸入項(xiàng)輸入的是重置按鈕。單擊重置按鈕后，瀏覽器可以清除表單的輸入信息而恢復(fù)到默認(rèn)的表單內(nèi)容設(shè)定。一般情況提交和重置按鈕應(yīng)該同時(shí)出現(xiàn)。

第6章Dreamweave中表格和表單的應(yīng)用課件23文件輸入框當(dāng)type=“file”時(shí)，表示該輸入項(xiàng)是一個(gè)文件輸入框，用戶(hù)可以在文件輸入框的內(nèi)部填寫(xiě)自己硬盤(pán)中的文件路徑，然后通過(guò)表單上傳。語(yǔ)法：<inputtype=filename=“file_name”/>文件輸入框24跳轉(zhuǎn)菜單在網(wǎng)頁(yè)中,用戶(hù)可利用跳轉(zhuǎn)菜單行為和列表菜單來(lái)設(shè)計(jì)彈出式列表。每一個(gè)項(xiàng)目都指示一個(gè)超鏈接目標(biāo)。當(dāng)瀏覽者選擇菜單的項(xiàng)目時(shí)，如同單擊了網(wǎng)頁(yè)中的超級(jí)鏈接一樣，跳轉(zhuǎn)到選項(xiàng)目所示的目標(biāo)網(wǎng)頁(yè)。應(yīng)用范圍：由于它的最大優(yōu)點(diǎn)就是節(jié)省版面，所以，像制作友情鏈接，站點(diǎn)導(dǎo)航等頁(yè)面對(duì)象時(shí)，使用跳轉(zhuǎn)菜單是很好的選擇。跳轉(zhuǎn)菜單25跳轉(zhuǎn)菜單的制作方法：選擇［插入］｜［表單對(duì)象］｜［跳轉(zhuǎn)菜單］命令，打開(kāi)跳轉(zhuǎn)菜單對(duì)話(huà)框輸入選項(xiàng)名稱(chēng)輸入要連接站點(diǎn)的URL地址輸入控件名稱(chēng)插入新的鏈接第6章Dreamweave中表格和表單的應(yīng)用課件26第6章Dreamweaver中表格和表單的應(yīng)用第6章Dreamweaver中27表格

在網(wǎng)頁(yè)設(shè)計(jì)中，頁(yè)面布局是一個(gè)重要的部分。Dreamweaver8.0提供了多種方法來(lái)創(chuàng)建和控制網(wǎng)頁(yè)布局，最普通的方法就是使用表格，使用表格可以簡(jiǎn)化頁(yè)面布局設(shè)計(jì)過(guò)程、導(dǎo)入表格化數(shù)據(jù)、設(shè)計(jì)頁(yè)面分欄及定位頁(yè)面上的文本和圖像等。返回目錄表格返回目錄28插入表格在Dreamweaver8.0“文檔”窗口的“設(shè)計(jì)”視圖中，將插入點(diǎn)置于需要插入表格的位置。如果文檔是空白的，則只能將插入點(diǎn)放置在文檔的開(kāi)頭。執(zhí)行下列操作之一打開(kāi)“表格”對(duì)話(huà)框，如下圖所示。選擇[插入][表格]菜單命令；在“插入欄”的“常用”選項(xiàng)卡中單擊“表格”按鈕；按【Ctrl+Alt+T】鍵。

插入表格29圖表格在“表格”對(duì)話(huà)框中可對(duì)各項(xiàng)參數(shù)進(jìn)行設(shè)置。圖表格在“表格”對(duì)話(huà)框中可對(duì)各項(xiàng)參數(shù)進(jìn)行設(shè)置。30在表格中添加內(nèi)容

將表格插入到文檔后即可向表格中添加文本或圖像等內(nèi)容。向表格中添加內(nèi)容的方法很簡(jiǎn)單，只需將光標(biāo)定位到要輸入內(nèi)容的單元格，再輸入文本即可。在表格中添加內(nèi)容31選擇表格

表格的選取是編輯表格的前提，要在表格中進(jìn)行任何操作都離不開(kāi)選取表格。整個(gè)表格的選擇整行或整列的選擇單個(gè)單元格的選擇一行或矩形單元格的選擇單擊一個(gè)單元格,然后按住shift鍵單擊另一個(gè)單元格.這兩個(gè)單元格定義的直線(xiàn)和矩形區(qū)域中的所有單元格都將被選擇。在按住ctrl鍵的同時(shí)單擊要選擇的單元格、行或列，可選擇不相鄰的單元格。

選擇表格32設(shè)置表格屬性

為了使表格更具特色，需要在“表格”屬性面板中對(duì)表格線(xiàn)的顏色、表格或單元格的背景、邊框等進(jìn)行設(shè)置?！氨砀瘛睂傩悦姘逯酗@示了所插入的表格的所有特性，通過(guò)修改面板中的參數(shù)可快速地編輯表格外觀(guān)。如果窗口中沒(méi)有顯示屬性面板，可選擇[窗口][屬性]菜單命令打開(kāi)。如下圖所示。設(shè)置表格屬性

為了使表格更具特色，需要在“表格”屬33圖表格屬性圖表格屬性34拆分與合并單元格修改---表格---合并拆分單元格插入或刪除行或列修改---表格---刪除行或列格式化表格命令---格式化表格如下圖所示

拆分與合并單元格35圖格式化表格圖格式化表格36表單表單是用于實(shí)現(xiàn)瀏覽者與網(wǎng)頁(yè)制作者之間信息交互的一種網(wǎng)頁(yè)對(duì)象，在Internet中表單被廣泛應(yīng)用于各種信息的搜集與反饋。

表單37

通常表單的工作過(guò)程如下:

(1）訪(fǎng)問(wèn)者在瀏覽有表單的頁(yè)面時(shí)，可填寫(xiě)必要的信息，然后單擊“提交”按鈕。

(2）提交的信息通過(guò)Internet傳送到服務(wù)器上。

(3）服務(wù)器上有專(zhuān)門(mén)的程序?qū)@些數(shù)據(jù)進(jìn)行處理，如果有錯(cuò)誤會(huì)返回錯(cuò)誤信息，并要求糾正錯(cuò)誤。(4）當(dāng)數(shù)據(jù)完整無(wú)誤后，服務(wù)器反饋一個(gè)輸入完成信息。

38返回目錄圖“表單”面板返回目錄圖“表單”面板39輸入標(biāo)記

<input>標(biāo)簽是表單中的輸入標(biāo)記，它是個(gè)單標(biāo)簽。

<inputname=“file_name” type=“type_name”/>選中插入的單行文本域，設(shè)置文本域相關(guān)屬性，如下圖所示。

輸入標(biāo)記401、單行文本框

type=text，表示該輸入項(xiàng)輸入的是字符串，輸入的內(nèi)容以單行顯示。type=text，<input>標(biāo)簽除了有name和type屬性外,還有3個(gè)可選的屬性:value、size、maxlength。

value屬性：用來(lái)設(shè)定文本框中的初始值size屬性：用來(lái)設(shè)定文本框的長(zhǎng)度maxlength屬性：用來(lái)設(shè)定該文本框允許用戶(hù)輸入的最大字符數(shù)。

第6章Dreamweave中表格和表單的應(yīng)用課件412、密碼框：當(dāng)type=“password”時(shí)，其使用方法與text很相似。password所輸入的字符全以號(hào)表示,以保證密碼的安全性多行文本框<textarea>標(biāo)簽用來(lái)制作多行文本框，成對(duì)標(biāo)簽。語(yǔ)法：<textareaname=“name”rows=“value”cols=“value”value=“value”></textarea>

2、密碼框：42

cols屬性：用來(lái)設(shè)定多行文本框一次能顯示的列數(shù)。rows屬性：用來(lái)設(shè)定多行文本框一次能顯示的行數(shù)。第6章Dreamweave中表格和表單的應(yīng)用課件43單選框和復(fù)選框1、單選框：?jiǎn)芜x按鈕作為一個(gè)組使用，提供彼此排斥的選項(xiàng)值。用戶(hù)在單選按鈕組內(nèi)只能選擇一個(gè)選項(xiàng)。當(dāng)type=“radio”時(shí),表示該輸入項(xiàng)是一個(gè)單選項(xiàng),用戶(hù)只能選擇單選項(xiàng)中的一項(xiàng)作為輸入信息。checked屬性，用來(lái)表示此項(xiàng)被默認(rèn)選中。value屬性，用來(lái)設(shè)定選中項(xiàng)目后傳送到服務(wù)器端的。單選框和復(fù)選框442、復(fù)選框：復(fù)選框主要用來(lái)選擇選項(xiàng)不唯一的一些信息。當(dāng)type=“checkbox”時(shí),表示該輸入項(xiàng)是一個(gè)復(fù)選框，用戶(hù)可以同時(shí)選中表單中的一個(gè)或多個(gè)復(fù)選項(xiàng)作為輸入信息。checked屬性，用來(lái)表示此項(xiàng)被默認(rèn)選中value屬性，用來(lái)設(shè)定選中項(xiàng)目后傳送到服務(wù)器端的值。2、復(fù)選框：復(fù)選框主要用來(lái)選擇選項(xiàng)不唯一的一些信息。45菜單和列表

在表單中，通過(guò)<select>和<option>標(biāo)簽就可以在瀏覽器中出現(xiàn)一個(gè)下拉式的菜單或帶有滾動(dòng)條的列表菜單。語(yǔ)法：<selectname=“name”size=“value”multiple=“multiple”> <optionvalue=“value”selected=“selected”>選項(xiàng)值</option> <optionvalue=“value”>選項(xiàng)值</option>……</select>菜單和列表46size屬性：用來(lái)設(shè)定顯示的選項(xiàng)數(shù)目，默認(rèn)值為1。

multiple屬性：用來(lái)設(shè)定列表中的項(xiàng)目多選。當(dāng)<select>標(biāo)簽里面有size屬性和multiple屬性時(shí)，表示是列表；沒(méi)有size屬性和multiple屬性，則表示下拉菜單。當(dāng)然，在列表中，二者不一定同時(shí)使用。size屬性：用來(lái)設(shè)定顯示的選項(xiàng)數(shù)目，默認(rèn)值為1。47

按