第3版HTML5DreamweaverPhotoshopCSS3AnimateAdobeCC網(wǎng)頁(yè)設(shè)計(jì)與制作應(yīng)用教程網(wǎng)頁(yè)設(shè)計(jì)與制作第5章表格和表單本章重點(diǎn)表格的創(chuàng)建與編輯表單的創(chuàng)建與編輯五、表格和表單5.1表格的應(yīng)用5.3Spry組件5.2表單的應(yīng)用5.1表格的應(yīng)用表格的應(yīng)用

表格是用于在HTML頁(yè)上顯示表格式數(shù)據(jù)以及對(duì)文本和圖形進(jìn)行布局的強(qiáng)有力的工具。表格由一行或多行組成；每行又由一個(gè)或多個(gè)單元格組成。在Dreamweaver中可以很方便地創(chuàng)建表格，并操作列、行和單元格。5.1.1表格的創(chuàng)建在“設(shè)計(jì)”視圖中，將光標(biāo)置于頁(yè)面需要插入表格的位置，選擇主菜單【插入】/【Table表格】命令，彈出“Table”表格對(duì)話框，如圖所示。在表格對(duì)話框中，可以對(duì)表格大小、標(biāo)題，及輔助功能等選項(xiàng)進(jìn)行設(shè)置。行數(shù)：確定表格具有的行的數(shù)目。列數(shù)：確定表格具有的列的數(shù)目。表格寬度width：以像素為單位或按占瀏覽器窗口寬度的百分比指定表格的寬度。（圖例中修改為百分比寬度，不管網(wǎng)頁(yè)打開多大多小，表格總寬度按照網(wǎng)頁(yè)的寬度比例顯示）表格高度height：定義表格的高度，y為像素?cái)?shù)或占窗口的百分比。邊框粗細(xì)border：指定表格邊框的寬度（以像素為單位）。單元格邊距cellpadding：確定單元格邊框和單元格內(nèi)容之間的像素?cái)?shù)。單元格間距cellspacing：確定相鄰的表格單元格之間的像素?cái)?shù)。5)表格內(nèi)文字的對(duì)齊方式2)在“標(biāo)題”部分選擇一個(gè)標(biāo)題選項(xiàng)3)在“輔助功能”部分指定選項(xiàng)4)表頭看做一行、只不過(guò)使用的是<th>標(biāo)簽。在瀏覽器中顯示時(shí)，<th>標(biāo)簽的文字按粗體顯示，<td>標(biāo)簽的文字按正常字體顯示。1)在“表格大小”部分中指定選項(xiàng)6)表格的色彩和圖像背景7)跨行、跨列表項(xiàng)設(shè)計(jì)表格的設(shè)置5.1表格的應(yīng)用表項(xiàng)數(shù)據(jù)的水平對(duì)齊用標(biāo)簽<td>的align屬性。align的屬性值分別為：center：表項(xiàng)數(shù)據(jù)的居中l(wèi)eft：左對(duì)齊right：右對(duì)齊justify：左右調(diào)整表項(xiàng)數(shù)據(jù)的垂直對(duì)齊用標(biāo)簽<td>的valign屬性實(shí)現(xiàn)。valign的屬性值分別為：top：靠單元格頂bottom：靠單元格底middle：靠單元格中baseline：同行單元數(shù)據(jù)項(xiàng)位置一致在<table>、<th>、<tr>、<td>標(biāo)簽中，使用下面屬性可以改變表格的背景和邊框的色彩、添加背景圖像，也可以為行和單元格改變色彩、添加背景圖像。bgcolor：設(shè)置背景色彩。background：設(shè)置背景圖像。bordercolor：設(shè)置表格邊框的色彩。bordercolorlight：設(shè)置表格邊框亮部的色彩。rules＝＂row，cols或none＂：設(shè)置表格內(nèi)線的顯示方法，none為無(wú)內(nèi)線。對(duì)表格進(jìn)行格式設(shè)置時(shí)，可以對(duì)整個(gè)表格、行、單元格的屬性進(jìn)行設(shè)置。表格格式設(shè)置的優(yōu)先順序如下：?jiǎn)卧?、行、表格。跨行、跨列表?xiàng)設(shè)計(jì)用<tr>、<td>、<th>標(biāo)簽中的colspan和rowspan屬性，可以設(shè)置多行（合并行）多列（合并列）的表項(xiàng)。5.1表格的應(yīng)用5.1.2編輯表格5.1表格的應(yīng)用1.選擇表格與單元格2.設(shè)置表格、單元格、行和列的屬性3.在表格中插入/刪除行或列4.在表格中插入對(duì)象5.合并/拆分單元格

6.嵌套表格可以將單元格拆分成任意數(shù)目的行或列，或者將多個(gè)單元格合并成為一個(gè)單元格嵌套表格是在另一個(gè)表格的單元格中的表格5.1.3數(shù)據(jù)的導(dǎo)入和導(dǎo)出在Dreamweaver中，可以將

Excel文檔的完整內(nèi)容插入到網(wǎng)頁(yè)中，也可以將網(wǎng)頁(yè)文件中數(shù)據(jù)表格導(dǎo)出。5.2表單的應(yīng)用創(chuàng)建表單在“設(shè)計(jì)”視圖中，選擇主菜單【插入】/【表單】/【表單】命令，則窗口出現(xiàn)一個(gè)紅色虛線框?yàn)楸韱斡虮韱沃饕邢旅嬉恍┲饕獙傩裕篒D：為表單設(shè)置一個(gè)ID，在本網(wǎng)頁(yè)中對(duì)該對(duì)象的唯一標(biāo)識(shí)符。動(dòng)作（Action）：編寫服務(wù)器端表單處理程序。方法（Method）：定義表單數(shù)據(jù)處理的處理程序。分為GET、POST和默認(rèn)等方式。其中，POST會(huì)將表單數(shù)據(jù)嵌入HTTP請(qǐng)求中。GET會(huì)將值附加到請(qǐng)求頁(yè)面的URL中。默認(rèn)值會(huì)使用瀏覽器的默認(rèn)設(shè)置將表單數(shù)據(jù)發(fā)送到服務(wù)器。5.2表單的應(yīng)用表單中可以添加的對(duì)象還有很多，主要作用如下：文本字段：可以接受任何文本、字母和數(shù)字類型。輸入內(nèi)容可設(shè)置顯示為星，單行顯示。文本區(qū)域：可以多行文本。復(fù)選框：在選項(xiàng)中允許選擇多個(gè)項(xiàng)目。單選按鈕：在選項(xiàng)中只允許選擇一個(gè)項(xiàng)目。按鈕：用于執(zhí)行提交或取消任務(wù)。列表：列出一組可供用戶選擇的值。文件域：允許從磁盤上選擇文件。5.3Spry組件

本節(jié)介紹Spry組件的建立和使用，屬于DreamweaverCS5版本的知識(shí)。這部分內(nèi)容在DreamweaverCC2017之后就不再使用。為了結(jié)合之前的版本的相關(guān)知識(shí)點(diǎn)，繼續(xù)在本教材中保留這部分內(nèi)容。如果直接使用DreamweaverCC2017之后的版本軟件，則可以忽略本節(jié)知識(shí)，對(duì)應(yīng)內(nèi)容將在第7章“行為”中進(jìn)一步體現(xiàn)。本章小結(jié)本章介紹的表格是網(wǎng)頁(yè)設(shè)計(jì)中的重要頁(yè)面元素，表格的創(chuàng)建和編輯方法靈活多樣，單元格可以嵌套表格，使表格的表達(dá)形式更加豐富，對(duì)數(shù)據(jù)的表現(xiàn)形式也更多樣，也可以實(shí)現(xiàn)頁(yè)面布局效果。表單是動(dòng)態(tài)頁(yè)面設(shè)計(jì)中不可或缺的元素，表單對(duì)象及驗(yàn)證表單組件的創(chuàng)建與