第5章 制作表格、表單.ppt

1、第5章 制作表格、表單與框架,本章要點 創(chuàng)建表格、表單與框架的方法 設置表格以及單元格的屬性 編輯表單以及處理表單 設置框架屬性并制作框架網(wǎng)頁 本章主要介紹了網(wǎng)頁頁面布局工具表格和框架，以及作為收集信息使用的表單。 表格是網(wǎng)頁中一種用途非常廣泛的工具，它不僅可以有序地排列數(shù)據(jù)，還表現(xiàn)在它可以精確地定位文本、圖像及其他網(wǎng)頁中的元素是網(wǎng)頁布局排版不可缺少的工具。 表單是用于實現(xiàn)網(wǎng)頁瀏覽者與服務器之間信息交互的一種頁面元素，被廣泛用于各種信息的搜集和反饋。 框架網(wǎng)頁是一種網(wǎng)頁，當在瀏覽器中顯示時，每個框架都可以顯示不同的網(wǎng)頁。框架網(wǎng)頁本身并不包括可見內(nèi)容，它只是一個容器，用于指定要在框架中顯示的其他

2、網(wǎng)頁以及顯示方式。 5.1 表格 表格是網(wǎng)頁中一種用途非常廣泛的工具，它不僅可以有序地排列數(shù)據(jù)，還表現(xiàn)在它可以精確地定位文本、圖像及其他網(wǎng)頁中的元素，這在網(wǎng)頁版面布局方面是很重要的，所以表格是網(wǎng)頁布局排版不可缺少的工具。作為一個網(wǎng)頁設計人員，表格運用得熟練與否直接影響作品外觀的好壞，這也是劃分專業(yè)制作人士與業(yè)余愛好者的一種客觀標準。 5.1.1表格的新建和編輯 1.創(chuàng)建新表格 將光標移到要插入表格的位置，然后可以通過下列四種方式中的任意一種，均可以彈出插入表格對話框如圖5-1所示：,1）插入面板“常用”類上，單擊“插入表格”按鈕。 2）通過主窗口的菜單“插入表格”命令。 3）使用快捷組合鍵“C

3、trl+Alt+T”。 4）將插入面板調(diào)整到“常用”類上，拖動“插入表格”按鈕到主窗口的工作區(qū)中。 圖5-1插入表格對話框,5.1.2操作表格和單元格 1.選擇表格 (1）選擇整個表格，方法如下： 將光標置于表格中的某個單元格中，選擇主菜單“修改表格選擇表格”命令。 將光標置于表格中的某個單元格中，再按兩次組合鍵“Ctrl+A”。 將光標置于表格中的某個單元格中，單擊鼠標右鍵，在彈出的快捷菜單中選擇“選 擇表格”命令。 將光標置于表格的尾部（在表格的同一行，但不在表格之內(nèi)），向左拖動鼠標， 單擊表格的邊線。 圖5-2選擇整個表格 (2）選擇單個單元格，方法有以下幾種： 將光標置于所要選擇的單元

4、格中，按一次組合鍵“Ctrl+A”。 將光標置于所要選擇的單元格中，向右拖動鼠標。 將光標置于所要選擇的單元格中，選擇“編輯全選”命令。 按住Ctrl鍵，單擊所要選擇的單元格，再單擊一次則取消對單元格的選擇。,圖5-3選擇單個單元格 (3）選擇多個單元格，方法有以下幾種： 按住Ctrl鍵，單擊所要選擇的所有單元格。 將光標置于單元格中，拖動鼠標，選擇多個單元格。 如果要選擇整行，將光標置于該行的左邊緣，當光標變成圖標 時單擊鼠標左鍵。 如果要選擇整列，將光標置于該列的上邊緣，當光標變成圖標 時單擊鼠標左鍵。 圖5-4選擇多個單元格,(4）選擇全部單元格的方法有以下幾種： 將光標置于第1個單元格

5、中，并拖動鼠標至最后一個單元格。 將光標置于第1個單元格中，按住Shift鍵，再單擊最后一個單元格。 將光標置于第1行的左邊緣，當光標變成 圖標時，向下拖動鼠標至最后一行。 將光標置于第1列的上邊緣，當光標變成 圖標時，向右拖動鼠標至最后一列。 圖5-4選擇所有單元格 2.添加和刪除行、列 (1）在現(xiàn)有的表格中插入單元行，可以選擇以下的操作之一： 將光標移到要插入單元行的下一行，選擇“修改表格行”命令。 將光標移到要插入單元行的下一行，按組合鍵“Ctrl+M”。 將光標移到要插入單元行的下一行，單擊鼠標右鍵，在彈出的快捷菜單中選擇“表格插入行”命令。 （2）在現(xiàn)有的表格中插入單元列，可以選擇以

6、上的操作之一： 將光標移到在插入單元列的右邊一列，選擇“修改表格插入行”命令。 將光標移到要插入單元列的右邊一列，按組合鍵“Ctrl+Shift+A”。 將光標移到要插入單元列的右邊一列，單擊鼠標右鍵，在彈出的快捷菜單中選擇“修改表格插入列”命令。,(3）如果想在現(xiàn)有的表格中添加多行或多列，操作是： 首先將光標移到要插入行或列附近的單元格中，單擊鼠標右鍵，在彈出的下拉菜單中選擇“表格插入行或列”命令，彈出 “插入行或列”對話框。在圖5-5所示對話框中進行相關(guān)的設置。 圖5-5插入行或列對話框 (4）刪除整行整列，可以采用下列辦法之一： 先選擇欲刪除的整行或整列，直接按Del鍵，即可刪除。 先將

7、光標移到要刪除的行或列中，選擇“修改表格刪除行”或“刪除列”命令。 將光標移到要刪除的行或列中，單擊鼠標右鍵，在彈出的快捷菜單中選擇“表格刪除行”或“刪除列”命令。 5.1.3設置表格和單元格屬性 1.編輯表格 (1）設置表格高度 在創(chuàng)建表格時，可以通過表格對話框來設置表格的寬度，但無法設置表格的高度，如果要設置表格的高度，則必須通過表格屬性面板來確定。,(2)合并拆分單元格 對表格中的單元格進行合并拆分，既可以通過菜單命令來實現(xiàn)，也可以通過單元格屬性面板（單擊任意單元格，屬性面板將會自動切換）上的快捷按鈕來完成。 (3)設置單元格的寬度及高度 在單元格屬性面板上可以改變單元格默認的寬度和高度

8、。 圖5-6顯示表格屬性 2.表格屬性的設置 (1）設置表格的邊框顏色 設置表格的邊框顏色時，必須指定表格的邊框線的寬度不為0。要為表格的邊框指定顏色，首先選擇表格，單擊屬性面板上“邊框顏色”的顏色框，在彈出的調(diào)色板中選擇顏色，或者是在后面的文本框中直接輸入顏色的色碼，即可為表格的邊框添加顏色。 圖5-7表格邊框顏色設置,(2）設置表格的背景 表格的背景與網(wǎng)頁背景一樣，即可以設定為單一的顏色，也可以用圖片作為表格的背景。要將表格背景設為單一的顏色，首先選擇整個表格，再單擊屬性面板上“背景顏色”后面的顏色框，在彈出的調(diào)色板中選擇顏色，或者是在后面的文本框中直接輸入顏色的色碼； 要將圖像設為表格的

9、背景，首先選擇整個表格，再在屬性面板上的“背景圖片”文本框中輸入圖像所在的路徑，或是單擊其后的文件夾圖標，在彈出的對話框中選擇圖像文件。 圖5-8表格背景設置 3.格式化表格 (1）設置行、列、單元格的屬性 首先選擇行、列或單元格，打開【表格】的全部屬性面板，設置水平排列方式、垂直排列方式、寬、高、背景、背景顏色、邊框等，如圖5-7所示。 圖5-9表格列屬性面板,(2）表格模板 Dreamweaver 8中有一個格式化表格的功能，套用系統(tǒng)提供的十幾種表格模板。選擇表格，單擊菜單“命令”下的“格式化表格”命令，打開“格式化命令”對話框，如圖5-10所示。 圖5-10格式化表格對話框 4.導入表格

10、數(shù)據(jù) 在Dreamweaver 8中可以將一些具有制表符、逗號、句號、分號或其他分隔符的格式化好了的表格導入到網(wǎng)頁文檔中，這對于需要在網(wǎng)頁中放置大量格式化數(shù)據(jù)的情況提供了更快捷的方法。,單擊菜單“文件導入表格式數(shù)據(jù)”命令，打開“導入表格數(shù)據(jù)”對話框，如圖5-11所示。數(shù)據(jù)文件一般是.txt或者其他程序創(chuàng)建的文件。 圖5-11導入表格數(shù)據(jù)對話框 5.表格排序 主要是針對具有格式數(shù)據(jù)的表格而言，根據(jù)表格列中的數(shù)據(jù)來排序。選擇表格，單擊菜單“命令排序表格”命令，打開對話框如圖5-12所示。 圖5-12排序表格對話框,5.1.4使用布局表格和布局單元格 前面提到可以利用表格來進行頁面的布局，但處理起來

11、較難掌握。Dreamweaver提供了布局視圖，簡化了用表格進行頁面布局的過程。 單擊“插入”欄上的“布局”選項中的“布局視圖”按鈕，同理，可以單擊“標準視圖”回到標準視圖下，在布局視圖下使用的單元格和布局表格所排的版面全部轉(zhuǎn)化為表格，如圖5-13所示 圖5-13布局視圖 1.新建布局表格，步驟如下： (1)將標準視圖切換到布局視圖。 (2)單擊“繪制布局表格”按鈕，鼠標變?yōu)椤啊弊中螤?，在編輯區(qū)拖動鼠標繪制布局表格。效果如圖5-14所示。 圖5-14布局表格 2.新建布局單元格，步驟如下： 在繪制好的表格里繼續(xù)繪制布局單元格： 在布局視圖下，單擊“繪制布局單元格”按鈕，在編輯區(qū)拖動鼠標繪制一個

12、單元格，如果事先沒有繪制布局表格，則系統(tǒng)會自動創(chuàng)建一個布局表格作為布局單元格的容器。 需要注意的是，單擊一次按鈕，只繪制一個單元格，按住Ctrl的同時可繪制多個布局單元格；當相鄰單元格之間距離很小時，會自動吸附，如圖5-15所示。,圖5-15布局單元格 3.創(chuàng)建嵌套布局表格 在已經(jīng)創(chuàng)建好的布局表格中，再繪制布局表格，即是嵌套布局表格。效果如圖5-16所示。如果要在建立好的布局表格中輸入數(shù)據(jù)，必須建立布局單元格。 圖5-16嵌套布局表格 使用布局表格和布局單元格的時候應注意： (1）由于單元格不能從重疊，一個單元格中內(nèi)容變化將導致單元格被撐大，從而影響到其他相鄰的單元格。 (2）所以最有效的方法

13、就是繪制多個布局表格，以使頁面布局的各部分相互隔離，這樣不會相互影響。 (3）在使用布局表格時，可以使用標尺和網(wǎng)格來輔助設計表格的尺寸大小。,4.設置布局表格和布局單元格屬性 (1）設置布局表格屬性 單擊布局表格的標題欄或者邊框，選中布局表格，出現(xiàn)“屬性”檢查器，進行相關(guān)的設置，如圖5-17所示。 圖5-17布局表格屬性對話框 (2）設置布局單元格屬性 單擊單元格邊框，選中要設置的單元格，會出現(xiàn)控制句柄，在“屬性”檢查器中進行相關(guān)的設置，如圖5-18所示。 圖5-18布局單元格屬性對話框 5.1.5案例：使用表格制作一個完整頁面,1.案例效果，如圖5-19所示。 圖5-19 案例效果,2.案例

14、目標 本例中利用Dreamweaver 8中的表格制作一個網(wǎng)站導航的頁面，通過單擊頁面上的網(wǎng)站超級鏈接就可以進入到相應的網(wǎng)站。表格在Dreamweaver 8中的排版方面有著不可替代的作用，能否靈活應用表格對于制作優(yōu)美的網(wǎng)頁是至關(guān)重要的。通過本例的練習，能夠熟練掌握使用表格進行頁面布局的方法和技巧。 3.操作步驟 1）新建一個文件，命名為“table.htm”。 2）單擊屬性面板上的【頁面屬性】按鈕，在“頁面屬性”對話框中設置頁面字體為“宋體”，大小為13，背景顏色為“#fcfff7”。如圖5-20頁面屬性對話框所示 。 圖5-20 頁面屬性對話框設置背景頁面外觀,3）單擊“插入”“表格”命令

15、，打開“表格”對話框，在文檔中插入一個1行4列的表格。設置邊框粗細為0，表格寬度為900像素。在表格內(nèi)插入文字，從左到右分別為“歡迎光臨”、“設為首頁”、“網(wǎng)友留言”、“論壇”。設置文字字體為宋體，顏色為“#ffffff”，大小為13。 4）在表格下方輸入文字“推薦欄： 首頁修復PSP掌機 時尚美容減肥基金視頻MP4考研WAP激戰(zhàn)NBA人才天氣海南手機圖鈴更多.”，設置文字字體為“宋體”，大小為13，顏色為“#000000”。 5）單擊“插入”“表格”命令，打開“表格”對話框，在文檔中插入一個1行1列的表格。設置邊框粗細為0，表格寬度為200像素。在表格內(nèi)插入如圖5-21所示的文字，設置文字字

16、體為“宋體”，顏色為“#ffffff”，大小為13。 圖5-21 插入的文字,6）單擊“插入”“表格”命令，打開“表格”對話框，在文檔中插入一個3行4列的表格。設置邊框粗細為1，表格寬度為700像素。在屬性面板中設置邊框顏色為“#00FF00”。對第一行單元格合并單元格，在表格內(nèi)插入“名站導航”文字，設置單元格背景顏色為“00EE00”，設置文字字體為“宋體”，顏色為“#ffffff”，大小為13。 7）在第2行中輸入如圖5-22所示文字，設置文字字體為“宋體”，顏色為“#ffffff”，大小為13。 圖5-22 插入的文字 8）在第3行中輸入如圖5-24所示文字，設置文字字體為“宋體”，顏色

17、為“#ffffff”，大小為13。,圖5-23 插入的文字 9）保存，按F12鍵在瀏覽器中預覽。效果如圖5-19所示。,5.2表單 表單是用于實現(xiàn)網(wǎng)頁瀏覽者與服務器之間信息交互的一種頁面元素，被廣泛用于各種信息的搜集和反饋。網(wǎng)頁上的表單和我們?nèi)粘Ｉ钪械谋韱卧诠δ苌嫌邢嗤帲韱翁峁┱呖梢酝ㄟ^表單收集瀏覽者填寫和發(fā)送的信息. 5.2.1建立表單 Dreamweaver 8提供了大量的表單元素，包括文本域、按鈕、圖像域、復選框、單選按鈕、列表/菜單、文件域以及隱藏域等。組合使用這些表單可以滿足絕大部分得信息收集需要。將“插入”面板切換到“表單”類下，即可看到各種表單元素 。如圖5-24所示：

18、圖5-24表單元素面板 1.建立空白表單 單擊“插入”“板下“表單”“類項下的“表單”按鈕或單擊 按鈕即可插入空白表單，在文檔中將以紅色虛線表示，代表一個表單區(qū)域，表單對象只能插入在紅色虛線內(nèi)。這個過程也可稱之為建立表單布局得過程。其屬性面板如圖5-25所示： 圖5-25空白表單屬性面板,其中： 表單名稱：為表單分配一個名稱，表單命名之后就能使用JavaScript等腳本語言對它進行控制。 動作：輸入一個在服務器端處理表單信息的應用程序的URL，可輸入應用程序路徑或單擊文件夾圖標確定文件位置。 方法：指的是將表單數(shù)據(jù)傳給服務器的傳送方式：GET (默認)、POST。 目標：將表單處理完成后所顯示的結(jié)果，所在的應用程序或腳本程序。 MIME類型：指定對提交給服務器進行處理的數(shù)據(jù)使用MIME編碼類型。默認設置是application/x-www-form-urlencode,通常與POST方法協(xié)同使用。如果要建立文件上傳域，則可指定multipart/form