項(xiàng)目四利用表格布局網(wǎng)站首頁任務(wù)一表格規(guī)劃頁面【知識目標(biāo)】1.熟悉典型的網(wǎng)頁布局的類型2.了解常用的網(wǎng)頁布局方法3.了解表格布局規(guī)則任務(wù)一表格規(guī)劃頁面【技能目標(biāo)】1.能根據(jù)網(wǎng)站功能，選擇合適網(wǎng)頁布局形式2.能利用表格，合理規(guī)劃表格布局任務(wù)一表格規(guī)劃頁面【項(xiàng)目描述】

創(chuàng)意家居網(wǎng)站首頁平面效果圖，如圖4-1所示，分析效果圖，完成表格規(guī)劃首頁面，并進(jìn)行效果圖切片為制作首頁面做準(zhǔn)備。圖4-1GS創(chuàng)意家居網(wǎng)站首頁平面效果圖4.1.1項(xiàng)目準(zhǔn)備1.常見的網(wǎng)頁布局類型“國”字型拐角型標(biāo)題正文型封面型混合型2.常見的網(wǎng)頁布局方法常用的網(wǎng)頁布局方法有三種表格布局DIV+CSS布局框架布局3.使用表格布局的一般規(guī)則不要把整個網(wǎng)頁當(dāng)成一個大表格，盡量使用分塊。一是因?yàn)橐粋€大表格的內(nèi)容要全部加載后才會顯示，無疑會降低瀏覽的速度和效率，二是在單元格的調(diào)整時不夠方便，往往只想調(diào)整某一個單元格，但其他行的單元格也會一起產(chǎn)生聯(lián)動效果。因此，應(yīng)盡量考慮分塊處理。可以使用嵌套，但一般嵌套不宜超過三層，否則會影響瀏覽速度，而且在修改表格時，多層嵌套，導(dǎo)致代碼過多，增加了修改的難度。作為布局的表格，表格線邊框?qū)挾纫话阍O(shè)為0，單元格間距設(shè)為0，單元格填充距設(shè)為0。外表格寬度一般使用固定的像素值，嵌套的表格寬度可使用百分比，這樣嵌套表格的寬度就能隨被嵌套單元格寬度的變化而變化。4.1.2項(xiàng)目實(shí)現(xiàn)1.分析效果圖 家居網(wǎng)站首頁由4大矩形塊由上至下組成依次為LOGO標(biāo)題及導(dǎo)航欄、廣告、網(wǎng)站內(nèi)容、版本信息，其中網(wǎng)站內(nèi)容又由3塊內(nèi)容從左至右組成，顯然，GS創(chuàng)意家居網(wǎng)站首頁的頁面布局正是上面提到的“國”字型布局。2.規(guī)劃布局3.效果圖切片任務(wù)二利用表格布局頁面【知識目標(biāo)】1.掌握表格創(chuàng)建的方法2.掌握表格嵌套的方法3.掌握對表格的編輯任務(wù)二利用表格布局頁面【技能目標(biāo)】1.能根據(jù)頁面布局圖，利用表格實(shí)現(xiàn)布局2.會對表格的各種操作任務(wù)二利用表格布局頁面【項(xiàng)目描述】

在網(wǎng)頁制作中，簡單的頁面布局一般用表格實(shí)現(xiàn)。上一個任務(wù)分析了家居網(wǎng)站首頁效果圖，根據(jù)效果圖，規(guī)劃了該頁面的表格布局圖，并制作了用于家居網(wǎng)站首頁的圖像素材。本任務(wù)根據(jù)上一任務(wù)的布局圖，利用表格實(shí)現(xiàn)布局。4.2.1項(xiàng)目準(zhǔn)備1.創(chuàng)建表格 在DreamweaverCS6中創(chuàng)建表格的方法有以下三種：單擊菜單欄【插入記錄】，選擇【表格】，彈出【表格】對話框。將插入面板切換至【常用】選項(xiàng)卡，單擊表格按鈕，彈出【表格】對話框。使用快捷鍵Alt+Ctrl+T，彈出【表格】對話框。2.【表格】屬性表格對話框中有以下這些屬性：表格寬度：設(shè)置表格的寬度，單位有百分比和像素，考慮到不同計(jì)算機(jī)分辨率不同，因此最外層的表格寬度的單位應(yīng)使用像素。邊框粗細(xì)：設(shè)置表格邊框的寬度，默認(rèn)為1，一般用于布局的表格是不需要邊框的，可將其設(shè)為0。單元格邊距：設(shè)置表格單元格內(nèi)對象與單元格邊框的距離，默認(rèn)值為3，一般用于布局的表格是不需要邊距，此處可設(shè)為0。單元格間距：設(shè)置表格單元格與單元格之間的距離，默認(rèn)值為3，一般用于布局的表格是不需要間距，此處可設(shè)為0。頁面：可以在表格中添加行或者列標(biāo)題。標(biāo)題：設(shè)置一個顯示在表格上的表格標(biāo)題。對齊標(biāo)題：設(shè)置標(biāo)題相對于表格的位置，包括默認(rèn)、頂部、底部、左、右5個選項(xiàng)。摘要：給出表格的說明，在頁面編輯時可以讀取摘要文本，但是該文本不會顯示在用戶的瀏覽器中。用于布局的表格無需設(shè)置輔助功能。3.編輯表格

選擇表格選擇整個表格 選擇整個表格方法一般有以下四種方法：將鼠標(biāo)置于表格的下/左邊緣（或者表格的左上角），此時表格邊框變成紅色實(shí)線，鼠標(biāo)變成狀態(tài)（鼠標(biāo)變成狀態(tài)），單擊即可選中表格。單擊表格內(nèi)任一處，選擇菜單欄中的【修改】|【表格】，單擊【選擇表格】命令。在表格左上角的單元格內(nèi)按住鼠標(biāo)左鍵，拖曳至表格右下角單元格，將其中所有的單元格選中，并選擇菜單欄中的【編輯】，單擊【全選】命令。單擊表格內(nèi)任一處，通過狀態(tài)欄上的HTML標(biāo)簽來選擇表格。選擇行與列 選擇表格的行和列也有以下三種不同的方法：當(dāng)鼠標(biāo)位于欲選擇表格的行首或列頂時，鼠標(biāo)變成黑色實(shí)心箭頭狀態(tài)，此時單擊即可選擇行或列。鼠標(biāo)從一行左至右或者從一列上至下左擊拖曳，即選中了行或者列。這種方法只用于選擇行。單擊欲選擇的行的任意一單元格，然后在狀態(tài)欄中單擊<tr>即可選中該該單元格所在的行，此方法無法選擇列。選擇表格選擇單元格 選擇一個單元格的方法有以下三種：在要選擇的單元格左擊并拖曳，當(dāng)單元格邊框成黑色實(shí)線，松開鼠標(biāo)即選中了該單元格。將鼠標(biāo)置于要選擇的單元格內(nèi)，按住【shift】鍵并單擊單元格即可將其選擇，按住【shift】鍵可以選擇多個不連續(xù)的單元格。鼠標(biāo)單擊欲選擇的單元格，然后單擊狀態(tài)欄中的<td>可以將其選擇。合并單元格

完成合并有兩種方式。先使用上述任意一種方法，選擇同一行或者同一列的若干個單元格，然后右擊，在彈出的對話框中選擇【表格】，然后單擊【合并單元格】，完成合并。點(diǎn)擊【屬性】面板的按鈕，即可將多個單元格合并拆分單元格使用上述任意一種方法，選擇單元格，然后右擊，在彈出的對話框中選擇【表格】，然后【拆分單元格】，彈出【拆分單元格】對話框。與合并單元格一樣，點(diǎn)擊【屬性】面板的按鈕，也可拆分單元格。選擇【行】或【列】，這表明可以將一個單元格拆分成多行或者多列；設(shè)置拆分的行數(shù)或列數(shù)。單擊【確定】按鈕完成拆分插入行、列 若要在已創(chuàng)建的表格內(nèi)增加行或列，要先將光標(biāo)移到欲插入行或列的單元格內(nèi)，然后選擇以下幾種操作均可實(shí)現(xiàn)插入行或列操作：右擊單元格，在彈出菜單中選擇【表格】，單擊【插入行】命令，則在光標(biāo)所在單元格的上面增加一行，右擊單元格彈出菜單中選擇【表格】，單擊【插入列】命令，則在光標(biāo)所在單元格的左側(cè)增加一列。選擇菜單欄中的【插入記錄】，單擊【表格對象】，選擇【在上面插入行】、【在下面插入行】、【在左側(cè)插入】或【在右側(cè)插入列】命令。右擊單元格，彈出菜單中選擇【表格】，單擊【插入行或列】命令，打開【插入行或列】對話框，進(jìn)行設(shè)置即可完成操作。刪除行、列

將光標(biāo)置于要刪除的行或列中的單元格，然后選擇菜單欄中的【修改】、選擇【表格】，單擊【刪除行】（或【刪除列】）命令，刪除行（或列）；右擊要刪除的行或列中的單元格，在彈出的對話框中，選擇選擇【表格】，單擊【刪除行】（或【刪除列】）命令，刪除行（或列）；選中要刪除的行或者列，然后選擇菜單欄中的【修改】、選擇【表格】，單擊【刪除行】（或【刪除列】）命令，刪除行（或列）；選中要刪除的行或者列，在彈出的對話框中，選擇選擇【表格】，單擊【刪除行】（或【刪除列】）命令，刪除行（或列）；選中要刪除的行或者列，單擊“Delete”鍵，即可刪除行或列。4.表格嵌套

表格嵌套的具體操作如下：將光標(biāo)置于要嵌套表格的單元格中插入表格，如此即完成了表格的嵌套4.2.2項(xiàng)目實(shí)現(xiàn) 根據(jù)4.1.2的規(guī)劃，按照由外往里，從上而下的順序依次進(jìn)行布局，依次順序如下：1．控制網(wǎng)頁總體布局的外層表格的創(chuàng)建2．頁面導(dǎo)航欄表格創(chuàng)建3．頁面內(nèi)容、頁腳區(qū)域表格布局4.2.3知識拓展1.排序表格

DreamweaverCS6中，提供對表格內(nèi)的信息排序命令，能夠?qū)Ρ砀裰械囊涣袃?nèi)容進(jìn)行簡單的排序，也能對兩列的內(nèi)容進(jìn)行更為復(fù)雜的排序，但是無法對含有合并單元格的表格進(jìn)行排序操作。 排序的操作步驟如下：選擇需要排序的表格，然后選擇菜單欄【命令】，單擊【排序表格】，彈出【排序表格】對話框設(shè)置排序規(guī)則單擊【確定】按鈕完成表格排序2.導(dǎo)入、導(dǎo)出表格數(shù)據(jù) 在DreamweaverCS6中可以實(shí)現(xiàn)表格數(shù)據(jù)的導(dǎo)入導(dǎo)出。通過解析可以將以制表符、逗號、句號、分號或其他分隔符分割數(shù)據(jù)的格式保存的表格式數(shù)據(jù)導(dǎo)入網(wǎng)頁文檔中，也可以將表格導(dǎo)出為文本文件保存，相鄰單元格的內(nèi)容由分隔符隔開。當(dāng)導(dǎo)出表格時只能導(dǎo)出整張表格，而不能導(dǎo)出部分表格。這對于需要在網(wǎng)頁中放置大量格式化數(shù)據(jù)的情況提供了更快捷、方便的方法。具體操作步驟如下：選擇要導(dǎo)出表格，然后選擇菜單欄【文件】，選擇【導(dǎo)出】，單擊【表格】，彈出【導(dǎo)出表格】對話框。設(shè)置定界符和換行符，一般情況定界符可根據(jù)設(shè)計(jì)者自行選擇，而換行符默認(rèn)選擇【windows】。單擊，將表格導(dǎo)出到文本文檔“score.txt”。反過來，將score.txt文件中的表格導(dǎo)入Dreamweaver中。選擇【文件】菜單，選擇【導(dǎo)入】，單擊【表格式數(shù)據(jù)】，打開【導(dǎo)入表格式數(shù)據(jù)】對話框，設(shè)置相關(guān)參數(shù)。單擊【確定】按鈕，完成導(dǎo)入操作。4.2.4項(xiàng)目訓(xùn)練 請根據(jù)4.1.3項(xiàng)目訓(xùn)練規(guī)劃的熱門游戲網(wǎng)站首頁規(guī)劃的表格布局圖，利用創(chuàng)建表格、表格編輯及表格嵌套相關(guān)操作，創(chuàng)建熱門游戲網(wǎng)站首頁的表格布局。任務(wù)三完善表格布局【知識目標(biāo)】1.熟練掌握表格相關(guān)的屬性任務(wù)三完善表格布局【技能目標(biāo)】1.會設(shè)置表格相關(guān)屬性任務(wù)三完善表格布局【項(xiàng)目描述】

任務(wù)一規(guī)劃了家居網(wǎng)站首頁布局圖，參照該圖，任務(wù)二利用表格實(shí)現(xiàn)了該布局。對比兩張圖，很容易發(fā)現(xiàn)布局還未真正完成，本任務(wù)根據(jù)家居網(wǎng)站首頁平面效果圖，結(jié)合任務(wù)一制作的圖像切片，在任務(wù)二的基礎(chǔ)上，通過設(shè)置表格相關(guān)屬性，完善表格的布局。7.3.1項(xiàng)目準(zhǔn)備1.表格屬性面板表格Id：表格命名，可表示表格的唯一性，一般可以省略不設(shè)置，但如果要在網(wǎng)頁中使用JavaScript來控制表格，就需要為表格命名。行、列：表格的行數(shù)和列數(shù)，這兩個值是必須在表格創(chuàng)建后即自動給定。重新設(shè)置行和列，可以增加或減少表格的行和列。寬：表格寬度，單位為像素或百分比。填充：表格中單元格內(nèi)對象與單元格邊框的距離，一般用于布局的表格填充設(shè)置為0。間距：表格中單元格之間的距離，一般用于布局的表格間距設(shè)置為0。對齊：表格在頁面文檔中水平方向的位置，取值有左對齊（left）、右對齊（right）、居中對齊（center），默認(rèn)為左對齊邊框：表格邊框的粗細(xì)，一般用于布局的表格間距設(shè)置為0。類：表格的CSS樣式。背景顏色：表格的背景顏色，取值為16進(jìn)制的RGB色。背景圖像：表格的背景圖像。邊框顏色：表格邊框的顏色，取值為16進(jìn)制的RGB色。和：清除行高和列寬。和：根據(jù)當(dāng)前寬度值，把列寬轉(zhuǎn)換為像素值和百分比。2.行、列、單元格屬性面板水平：單元格內(nèi)的元素在單元格內(nèi)水平方向上的對齊方式，取值有左對齊（left）、右對齊（right）、居中對齊（center），默認(rèn)為左對齊垂直：單元格內(nèi)的元素在單元格內(nèi)垂直方向上的對齊方式，取值有頂端（top）、居中（middle）、底部（bottom）、基線（baseline），默認(rèn)為居中高：單元格高度，單位為像素或百分比。同一個表格中，同一行單元格的高度是一致的，以最大值為準(zhǔn)。寬：單元格寬度，單位為像素或百分比。同一個表格中，同一列單元格的寬度是一致的，以最大值為準(zhǔn)。背景顏色：單元格的背景顏色，取值為16進(jìn)制的RGB色。背景圖像：單元格的背景圖像。邊框顏色：單元格邊框的顏色，取值為16進(jìn)制的RGB色。不換行：禁止文字換行，這樣當(dāng)文字長度超過單元格寬度，單元格即自動擴(kuò)展以容納所有文字。標(biāo)題：將選中的單元格設(shè)置為表格的標(biāo)題單元格。按鈕：合并單元格按鈕。選擇多個連續(xù)的單元格，單擊按鈕，即可實(shí)現(xiàn)將這些單元格合并為一個單元格。按鈕：拆分單元格按鈕。選擇需要拆分的單元格，單擊按鈕，彈出【拆分單元格】對話框，設(shè)置拆分參數(shù)，即可將一個單元格拆分成多個單元格。4.3.2項(xiàng)目實(shí)現(xiàn) 按照由外往里，由整體到局部，從上而下，從左往右的順序依次進(jìn)行屬性設(shè)置，依次順序如下：1．網(wǎng)頁總體布局的外層表格屬性設(shè)置2．導(dǎo)航欄表格屬性設(shè)置3．頁面內(nèi)容、頁腳區(qū)域?qū)傩栽O(shè)置任務(wù)四表格源代碼

【知識目標(biāo)】1.熟悉HTML中的表格標(biāo)簽2.熟悉表格相關(guān)屬性的HTML表示【技能目標(biāo)】1.能根據(jù)效果圖，編寫表格源代碼2.能編寫表格相關(guān)屬性，完善表格任務(wù)四表格源代碼【項(xiàng)目描述】

本任務(wù)主要學(xué)習(xí)表格的源代碼，編寫表格源代碼實(shí)現(xiàn)世界杯德國與法國隊(duì)比賽結(jié)果頁面，如下圖所示。任務(wù)四表格源代碼4.4.1項(xiàng)目準(zhǔn)備1.表格源代碼 表格——table

行——tr

單元格——td2.表格屬性屬性源代碼表示屬性源代碼表示表格Idid邊框border高h(yuǎn)eight類class寬width背景顏色bgcolor填充cellpadding背景圖像background間距cellspacing邊框顏色bordercolor對齊align該屬性有三個可選值：left（左對齊）、right（右對齊）、center（居中對齊2.單元格屬性屬性源代碼表示屬性源代碼表示高h(yuǎn)eight寬width背景顏色bgcolor背景圖像background邊框顏色bordercolor不換行nowrap水平合并單元格rowspan垂直合并單元格colspan水平align該屬性有三個可選值：left（左對齊）、right（右對齊）、center（居中對齊）垂直valign該屬性有四個可選值：top（頂端）、middle（居中）、bottom（底部）、baseline（基線）4.4.2項(xiàng)目實(shí)現(xiàn)參照前面介紹的網(wǎng)頁布局步驟，設(shè)計(jì)頁面規(guī)劃布局表格創(chuàng)建設(shè)置表格屬性4.4.3知識拓展1.th標(biāo)簽

<th>與<td>一樣是單元格標(biāo)記。<td>是普通單元格，而<th>是標(biāo)題單元格，標(biāo)題單元格中的文字以粗體出現(xiàn)，并且在單元格內(nèi)居中顯示。2.<caption>標(biāo)記

<caption>標(biāo)記是表格標(biāo)題標(biāo)記，標(biāo)題以<caption>開始,</caption>結(jié)束。<caption>標(biāo)記有兩個屬性用來控制標(biāo)題相對于表格的位置：align和valign。4.5實(shí)訓(xùn)項(xiàng)目1．實(shí)訓(xùn)目標(biāo)學(xué)會根據(jù)效果圖，規(guī)劃頁面表格布局，并利用Dreamweaver實(shí)現(xiàn)表格布局。2．實(shí)訓(xùn)內(nèi)容使用表格布局實(shí)現(xiàn)陽澄湖大閘蟹網(wǎng)站首頁，頁面效果如下圖所示。。4.5實(shí)訓(xùn)項(xiàng)目4.5實(shí)訓(xùn)項(xiàng)目制作步驟1.規(guī)劃布局根據(jù)4.1所述的表格布局一般規(guī)則，為了提高頁面加載效率，本文將陽澄湖大閘蟹網(wǎng)站首頁分為三個表格，分別顯示頁眉（LOGO、菜單欄、廣告圖片）、網(wǎng)頁主體、頁腳的版本信息。4.5實(shí)訓(xùn)項(xiàng)目2.創(chuàng)建表格創(chuàng)建陽澄湖大閘蟹網(wǎng)站站點(diǎn)。基于此站點(diǎn)，設(shè)置資源文件夾【images】