第89章表單與布局排版

1、第八講表單與布局視圖排版,在申請(qǐng)注冊(cè)時(shí)，通常需要填寫一些個(gè)人信息，如姓名、年齡、聯(lián)系方式等。填寫信息的頁(yè)面上往往會(huì)包括很多表單元素。如文本框、密碼框，單選按鈕、復(fù)選框、下拉菜單、列表等。所有這些表單元素合在一起，稱為表單。,8.1制作表單,制作表單的步驟：1將光標(biāo)定位到要制作表單的位置。2在插入工具欄單擊“表單”選項(xiàng)，打開如圖所示的表單元素列表。,3單擊“表單”按鈕，或選擇菜單命令“插入”“表單”命令，即可在光標(biāo)處插入表單；插入的表單在窗口中以紅色虛線框表示，如圖所示。,8.1制作表單,4將光標(biāo)定位到插入的表單中，可打開表單屬性面板，如圖所示。,5“表單名稱”輸入框用于輸入制作的表單名。6“動(dòng)

2、作”輸入框用于指定處理該表單的處理程序的路徑，可以是URL地址、HTTP地址，也可以是Mailto地址。7“方法”下拉列表框用來選擇將表單數(shù)據(jù)傳輸?shù)椒?wù)器的方式，有默認(rèn)、POST、GET三個(gè)選項(xiàng)。,8.1制作表單,8“目標(biāo)”下拉列表框用來設(shè)定提交表單后，打開的目標(biāo)網(wǎng)頁(yè)將以何種形式進(jìn)行顯示。其中各選項(xiàng)的含義如下:_blank將在未命名的新窗口中打開目標(biāo)網(wǎng)頁(yè)_parent將在當(dāng)前網(wǎng)頁(yè)窗口的父級(jí)窗口中打開目標(biāo)_self將在當(dāng)前窗口中打開目標(biāo)網(wǎng)頁(yè)_top將在頂級(jí)窗口內(nèi)打開目標(biāo)網(wǎng)頁(yè)9“MIME類型”下拉列表框用于指定提交給服務(wù)器進(jìn)行處理的數(shù)據(jù)使用的編碼類型。默認(rèn)設(shè)置為“application/x-www

3、-form-urlencode”，通常與POST方法協(xié)同使用。如果要?jiǎng)?chuàng)建文件上傳表單，則應(yīng)選擇“multipart/form-data”類型。,8.2插入表單對(duì)象,表單對(duì)象的插入有以下兩種方法:方法1選擇菜單“插入”“表單對(duì)象”子菜單列表中對(duì)應(yīng)的命令即可。方法2在“表單”插入工具欄的選項(xiàng)中單擊相應(yīng)的按鈕即可插入。,8.2插入表單對(duì)象,8.2.1添加表單按鈕表單按鈕在表單中用于控制表單的操作。添加按鈕的步驟：1在“表單”插入工具欄中，單擊“按鈕”圖標(biāo)即可在表單中制作一個(gè)“提交”按鈕，選中該按鈕，按鈕屬性面板如圖所示。,2“按鈕名稱”輸入框用于輸入按鈕的名稱。3“標(biāo)簽”輸入框用于輸入在按鈕上顯示的

4、文字如:“提交”，便于瀏覽者知道該按鈕的作用。4“動(dòng)作”選項(xiàng)組用于指定單擊按鈕后將要產(chǎn)生的動(dòng)作。,8.2插入表單對(duì)象,8.2.2添加文本域文本域是用戶在其中可輸入數(shù)據(jù)的表單對(duì)象。根據(jù)文本域的行數(shù)和顯示方式分為單行文本框、多行文本域和密碼框3種。添加單行文本框的步驟：1將光標(biāo)定位在表單中要插入文本框的位置。2.在“表單”插入工具欄中單擊“文本字段”按鈕，即可在表單域中添加文本框，同時(shí)“屬性”面板中顯示文本框的參數(shù)，如圖所示。,8.2插入表單對(duì)象,3“文本域”輸入框用于輸入文本框的名稱，該名稱在該網(wǎng)頁(yè)中是惟一的，用于在腳本程序中作為該文本框的變量名。4“字符寬度”輸入框用于設(shè)置文本框中允許輸入的字

5、符數(shù)，同時(shí)規(guī)定了文本字段的寬度。默認(rèn)值約為24個(gè)字符。5“最多字符數(shù)”輸入框用于設(shè)置文本框中所能輸入的最大字符數(shù)。6“類型”選項(xiàng)組顯示了當(dāng)前文本框的類型，也可通過單選項(xiàng)來轉(zhuǎn)換不同的文本域。7“初始值”輸入框用于輸入文本框中默認(rèn)狀態(tài)時(shí)顯示的內(nèi)容,8.2插入表單對(duì)象,8.2.2添加文本域添加多行文本域的步驟：1將光標(biāo)定位在表單中要插入多行文本域的位置。2在“表單”插入工具欄中單擊“文本域區(qū)域”按鈕，即可在表單域中添加多行文本域，同時(shí)“屬性”面板中顯示多行文本域的參數(shù)。3在“文本域”和“字符寬度”輸入框中按單行文本框的方法進(jìn)行設(shè)置即可。4“行數(shù)”輸入框用于設(shè)置多行文本域中的可見行數(shù)，“類型”選項(xiàng)組顯

6、示了當(dāng)前的文本域類型為“多行”。5“換行”下拉列表框用于設(shè)置當(dāng)文本域中的內(nèi)容超過一行時(shí)的換行方式。6“初始值”輸入框用于輸入文本域中默認(rèn)狀態(tài)時(shí)顯示的內(nèi)容,8.2插入表單對(duì)象,8.2.2添加文本域添加密碼框的步驟：1將光標(biāo)定位在表單中要插入密碼框的位置。2在“表單”插入工具欄中單擊“文本字段”按鈕，則在表單域中添加一個(gè)文本框。3在“屬性”面板的“類型”欄中選擇“密碼”單選項(xiàng)，其它選項(xiàng)按文本框的方法進(jìn)行設(shè)置即可。,8.2插入表單對(duì)象,8.2.3添加復(fù)選框復(fù)選框用于在信息欄中選擇一個(gè)或多個(gè)選項(xiàng)。添加復(fù)選框的步驟：1將光標(biāo)定位到表單中要添加復(fù)選框的位置。2在“表單”插入工具欄中單擊按鈕，即可在表單中添

7、加一個(gè)復(fù)選框，同時(shí)顯示復(fù)選框的屬性面板，如圖所示。3“復(fù)選框名稱”用于在輸入框中輸入復(fù)選框名稱，該名稱為復(fù)選框變量名。4“選定值”輸入框用于輸入復(fù)選框選中時(shí)的取值，該值將傳送給服務(wù)器端表單處理程序，但不會(huì)在表單域中顯示。5“初始狀態(tài)”欄用于設(shè)置瀏覽器中首次載入表單時(shí)復(fù)選框是否處于選中狀態(tài)。,8.2插入表單對(duì)象,8.2.4添加單選按鈕單選按鈕一般用在從多個(gè)選項(xiàng)中選中其一的情況。添加單選按鈕的步驟：1將光標(biāo)定位到表單中要添加單選按鈕的位置。2在“表單”插入工具欄中單擊按鈕添加單選按鈕，同時(shí)打開單選按鈕屬性面板，如圖所示。3在沒有對(duì)單選按鈕進(jìn)行設(shè)置前，可以復(fù)制多個(gè)單選按鈕，然后在每個(gè)單選按鈕后添加提

8、示信息，如“男”，“女”。,8.2插入表單對(duì)象,8.2.4添加單選按鈕添加單選按鈕組的步驟：1將光標(biāo)定位到表單中需要插入單選按鈕組的位置。2在“表單”插入工具欄中單擊“單選按鈕組”按鈕，打開如圖所示的“單選按鈕組”對(duì)話框。,8.2插入表單對(duì)象,8.2.4添加單選按鈕添加單選按鈕組的步驟：3“名稱”輸入框用于輸入單選按鈕組的名稱。4在“單選按鈕”欄的“Label”列表中選擇“單選”，并重命名單選按鈕的文本項(xiàng)，“Label”列表實(shí)際上設(shè)定的是單選按鈕旁邊的說明文字。5當(dāng)列表中的兩個(gè)“單選”項(xiàng)都命名完后，若還需要添加單選項(xiàng)，則單擊“+”按鈕添加“單選”項(xiàng)，如圖所示。,8.2插入表單對(duì)象,8.2.4添

9、加單選按鈕添加單選按鈕組的步驟：6若不需要列表中的某項(xiàng)，可單擊“一”按鈕從列表中刪除不要的單選項(xiàng)。7若需調(diào)整列表中某項(xiàng)的順序，則可在列表中選擇要調(diào)整順序的項(xiàng)，單擊按鈕調(diào)整到需要的位置即可。8“布局，使用”欄用于選擇按鈕布局方式。9設(shè)置完成后單擊“確定”按鈕則在光標(biāo)所在的位置添加一組單選按鈕組。10分別選取各單選按鈕，在“屬性”面板中設(shè)置其選定值和初始狀態(tài)等參數(shù)。,8.2插入表單對(duì)象,8.2.5添加列表/菜單列表/菜單項(xiàng)用于顯示較多的選項(xiàng)。添加列表/菜單的步驟：1將光標(biāo)定位到表單中要插入列表或菜單的位置。2在“表單”插入工具欄中單擊“列表/菜單”按鈕，同時(shí)顯示“列表/菜單”屬性面板。3屬性面板中

10、的“類型”選項(xiàng)組用于選擇類型是“菜單”還是列表，如選擇“菜單”單選項(xiàng)時(shí)，屬性面板中為菜單的設(shè)置參數(shù)，如圖所示。,8.2插入表單對(duì)象,8.2.5添加列表/菜單添加列表/菜單的步驟：4單擊“列表值”按鈕，打開如圖所示的“列表值”對(duì)話框。5“項(xiàng)目標(biāo)簽”列表用于輸入要添加的菜單項(xiàng)。6在“值”列中可設(shè)置列表/菜單的值，該值可用于在腳本或應(yīng)用程序中使用。,8.2插入表單對(duì)象,8.2.5添加列表/菜單添加列表/菜單的步驟：7列表和菜單可以相互轉(zhuǎn)換，如在屬性面板中選擇“類型”單選組中的“列表”單選項(xiàng)，則屬性面板為列表參數(shù)，如圖所示。8“高度”輸入框用于設(shè)置列表的高度，單位是行。9在“選定范圍”欄中，可選取“允

11、許多選”復(fù)選框設(shè)置列表的可選取項(xiàng)。,8.2插入表單對(duì)象,8.2.6添加文件域文件域看上去是一個(gè)文本框再加上一個(gè)“瀏覽”按鈕，如圖所示。添加文件域的步驟：1將光標(biāo)定位到表單中要添加文件域的位置。2在“表單”插入工具欄中單擊“文件域”按鈕，即可添加文件域，并打開其“屬性”面板，如圖所示。,8.2插入表單對(duì)象,8.2.7添加圖像域添加圖像域的步驟：1將光標(biāo)定位到要添加圖像域的位置。2單擊“表單”插入工具欄中的按鈕，或選擇菜單“插入”“表單”“圖像域”命令，打開如圖所示的對(duì)話框。,8.2插入表單對(duì)象,8.2.7添加圖像域添加圖像域的步驟：3在“查找范圍”下拉列表框中找到要插入的圖像所在的文件夾，在文件

12、列表中選擇需要的文件。4單擊“確定”按鈕將選擇的圖像添加到表單域中，“屬性”面板如圖所示。,8.2插入表單對(duì)象,8.2.7添加圖像域添加圖像域的步驟：5“屬性”面板的“圖像區(qū)域”輸入框用于設(shè)置圖像域的變量名，該變量名用于表單處理程序。6“寬”和“高”輸入框用于設(shè)置圖像的輸出寬度和高度。7“源文件”輸入框用于修改圖像域的路徑。8“對(duì)齊”下拉列表框用于選擇圖像與文字的相對(duì)對(duì)齊方式。9“替代”輸入框用于輸入當(dāng)瀏覽器不支持圖像格式時(shí)圖像的替換文字說明。10單擊“編輯圖像”按鈕，可以啟動(dòng)圖像的外部編輔器，并對(duì)圖像進(jìn)行編輯。,8.2插入表單對(duì)象,8.2.8添加隱藏域隱藏域是一種在瀏覽器上不顯示的控件。添加

13、隱藏域的步驟：1將光標(biāo)定位到要添加隱藏域的位置。2單擊“表單”插入工具欄的按鈕，或選擇菜單“插入”“表單”“隱藏域”命令，即可在光標(biāo)處添加隱藏域，它顯示為一個(gè)圖標(biāo)，同時(shí)打開隱藏域“屬性”面板，如圖所示。3“隱藏區(qū)域”輸入框用于設(shè)置隱藏域的變量名，該變量名可被表單處理程序所引用。4在“值”文本框中可以為隱藏域設(shè)置初始值。,8.2插入表單對(duì)象,8.2.9添加跳轉(zhuǎn)菜單跳轉(zhuǎn)菜單列出了很多友情鏈接。添加添加跳轉(zhuǎn)菜單的步驟：1將光標(biāo)定位到表單中要插入跳轉(zhuǎn)菜單的位置。2單擊“表單”插入工具欄中按鈕，或選擇菜單“插入”“表單”“跳轉(zhuǎn)菜單”命令，打開如圖所示的“插入跳轉(zhuǎn)菜單”對(duì)話框。,8.2插入表單對(duì)象,8.2

14、.9添加跳轉(zhuǎn)菜單添加添加跳轉(zhuǎn)菜單的步驟：3“文本”輸入框用于設(shè)定下拉列表框中某選項(xiàng)的說明文字。如“武漢大學(xué)”。4“選擇時(shí)，轉(zhuǎn)到URL”輸入框用于指定菜單跳轉(zhuǎn)到的路徑或網(wǎng)址。如“”。5.“打開URL于”下拉列表框用于選擇打開鏈接的窗口,8.2插入表單對(duì)象,8.2.9添加跳轉(zhuǎn)菜單添加添加跳轉(zhuǎn)菜單的步驟：6單擊對(duì)話框頂部的“+”按鈕，將在對(duì)話框中新添一個(gè)選項(xiàng)，并修改該選項(xiàng)的各項(xiàng)參數(shù)，如圖所示。,8.2插入表單對(duì)象,8.2.9添加跳轉(zhuǎn)菜單添加添加跳轉(zhuǎn)菜單的步驟：7“菜單名稱”輸入框用于設(shè)置跳轉(zhuǎn)菜單項(xiàng)的名稱。8在“選項(xiàng)”中若選擇“菜單之后插入前往按鈕”復(fù)選框可在跳轉(zhuǎn)菜單旁添加一個(gè)“前往”接鈕，此時(shí)只有當(dāng)

15、訪問者單擊了該按鈕后，瀏覽器才會(huì)訪問該地址。9如果選擇“更改URL后選擇第一個(gè)項(xiàng)目”復(fù)選框，可以在找不到鏈接的URL地址時(shí)，自動(dòng)打開菜單中第一個(gè)項(xiàng)目對(duì)應(yīng)的URL地址。10單擊“確定”按鈕，即可在表單中插入所設(shè)置的跳轉(zhuǎn)菜單。,8.2插入表單對(duì)象,8.2.9添加跳轉(zhuǎn)菜單添加添加跳轉(zhuǎn)菜單的步驟：11若要修改跳轉(zhuǎn)菜單中選項(xiàng)，則可選中插入的跳轉(zhuǎn)菜單，打開的“屬性”面板如圖所示。12單擊“屬性”面板上的“列表值”按鈕，將打開“列表值”對(duì)話框，如圖所示。,8.2插入表單對(duì)象,8.2.9添加跳轉(zhuǎn)菜單添加添加跳轉(zhuǎn)菜單的步驟：13若創(chuàng)建的跳轉(zhuǎn)菜單中有“前往”按鈕，選取“前往”按鈕，“屬性”面板如圖所示。14“按鈕

16、名稱”輸入框用于修改創(chuàng)建時(shí)設(shè)置的按鈕名稱15“標(biāo)簽”輸入框用于設(shè)置按鈕上要顯示的文字。16在“動(dòng)作”欄中可選擇按鈕的作用是提交表單還是重設(shè)表單。,布局視圖排版,Dreamweaver的“布局視圖”的功能可以用來制作布局更加自由的網(wǎng)頁(yè)。,8.3布局視圖,添加布局視圖的步驟：1在插入工具欄單擊“布局”選項(xiàng)，其中包括有和布局視圖相關(guān)的一些工具，如圖所示。2單擊“布局”按鈕進(jìn)入布局視圖，此時(shí)會(huì)打開一個(gè)“從布局模式開始”提示窗口，其中介紹了“布局單元格”與“布局表格”工具的使用方法。3單擊“確定”按鈕關(guān)閉對(duì)話框并自動(dòng)進(jìn)入布局模式，如圖所示。,8.4添加布局表格和布局單元格,8.4.1添加布局表格添加布局

17、表格的步驟：1單擊“布局”插入工具欄上的“布局表格”按鈕，此時(shí)鼠標(biāo)就會(huì)變成“+”形狀。2將鼠標(biāo)放在要繪制布局表格的區(qū)域，然后按住鼠標(biāo)左鍵拖動(dòng)就能繪制出表格來，如圖所示。,8.4添加布局表格和布局單元格,8.4.2添加布局單元格添加布局單元格的步驟：1在“布局”插入工具欄上單擊“繪制布局單元格”按鈕，然后定位到繪制單元格的位置，按下鼠標(biāo)左鍵后拖動(dòng)。松開鼠標(biāo)后，表格中就會(huì)出現(xiàn)一個(gè)可以插入文字和圖像的單元格了，如圖所示。,8.4添加布局表格和布局單元格,8.4.2添加布局單元格添加布局單元格的步驟：2在布局表格中繪制完好單元格后，在“布局”插入工具欄上單擊“標(biāo)準(zhǔn)”按鈕，切換到標(biāo)準(zhǔn)視圖下，此時(shí)的布局表

18、格就變成了普通表格，如圖所示。,8.5使用標(biāo)尺與網(wǎng)格,8.5.1使用標(biāo)尺在使用布局視圖創(chuàng)建表格時(shí)，為了更方便的定位，往往需要使用標(biāo)尺和網(wǎng)格來了解表格或單元格的高度和寬度。當(dāng)位于布局視圖時(shí)，選擇菜單命令“查看”“標(biāo)尺”“顯示”，就可以打開標(biāo)尺。8.5.2使用網(wǎng)格當(dāng)位于布局視圖時(shí)，選擇菜單命令“查看”“網(wǎng)格”“顯示網(wǎng)格”，就可以顯示網(wǎng)格線。,8.6調(diào)整布局表格及布局單元格,8.6.1選擇布局表格和布局單元格1單擊兩次布局表格標(biāo)簽，當(dāng)表格外框出現(xiàn)定位點(diǎn)時(shí)，就可以確定該表格處于選中狀態(tài)。另外，單擊表格上的灰色區(qū)域，也可以選中表格。如圖所示。,8.6調(diào)整布局表格及布局單元格,8.6.1選擇布局表格和布局單元格2如果鼠標(biāo)單擊的是單元格的外框，當(dāng)單元格外框出現(xiàn)8個(gè)定位點(diǎn)的時(shí)候，可以確定該單元格處于選中狀態(tài)。此外，在按住鍵盤Ctrl鍵的同時(shí)，在單元格的任意位置單擊也可以選中單元格。如圖