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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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