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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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