網(wǎng)頁(yè)制作與網(wǎng)站設(shè)計(jì)_DreamweaverCS3表格布局

1、項(xiàng)目項(xiàng)目七七Dreamweaver CS3表格布局 l 內(nèi)容摘要內(nèi)容摘要 介紹了表格的創(chuàng)建及其參數(shù)設(shè)置 介紹了單元格的基本編輯及單元格屬性 介紹了選擇表格及增加行和列并設(shè)置其屬性 介紹了布局表格和布局單元格的創(chuàng)建方法 l 學(xué)習(xí)創(chuàng)建表格方法及在擴(kuò)展表格模式下編輯表格l 了解表格屬性參數(shù)及單元格屬性參數(shù)含義 l 學(xué)習(xí)選擇、添加、刪除、拆分、合并表格行列、單元格的方法并能正確設(shè)置表格內(nèi)容的格式 l 掌握布局表格及布局單元格的創(chuàng)建方法及運(yùn)用布局表格布局頁(yè)面l 學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo)任務(wù)1表格的創(chuàng)建 1. 任務(wù)描述任務(wù)描述 在Dreamweaver中表格可以實(shí)現(xiàn)將網(wǎng)頁(yè)劃分為不同的部分，實(shí)現(xiàn)對(duì)元素的準(zhǔn)確定位，使

2、得頁(yè)面中的文本、圖像等元素排列得更有條理 2. 任務(wù)說(shuō)明任務(wù)說(shuō)明 本任務(wù)主要介紹在標(biāo)準(zhǔn)模式下創(chuàng)建表格，以及使用擴(kuò)展表格模式編輯表格兩個(gè)操作。擴(kuò)展表格模式臨時(shí)向文檔中的所有表格添加單元格邊距和間距，以使編輯操作更加容易。利用這種模式，可以選擇表格中的項(xiàng)目或精確地放置插入點(diǎn)。 3. 操作步驟操作步驟 （1） 在標(biāo)準(zhǔn)模式下創(chuàng)建表格 1）打開(kāi)一個(gè)網(wǎng)頁(yè)，光標(biāo)插入點(diǎn)定位在要放置表格的地方。 2）選擇菜單“插入/表格”命令，或單擊“插入”工具欄按鈕圖標(biāo)，調(diào)出“插入表格”對(duì)話框，如圖7-1所示。3）設(shè)置插入表格的行數(shù)和列數(shù)，如按圖7-1參數(shù)設(shè)置后，得到圖7-2所示表格。 圖7-1 “插入表格”對(duì)話框圖7-2

3、3行3列的表格（2）使用擴(kuò)展表格模式編輯表格 1）選擇“查看”菜單下的“表格模式/擴(kuò)展表格模式”命令，或者單擊“布局”選項(xiàng)卡中的“擴(kuò)展”按鈕圖標(biāo)，即可進(jìn)入擴(kuò)展表格模式。2）單擊文檔頂部的“擴(kuò)展表格模式”條上的“退出”，或單擊“布局”選項(xiàng)卡中的“標(biāo)準(zhǔn)”按鈕圖標(biāo)退出擴(kuò)展表格模式，如圖7-3所示 。圖7-3 擴(kuò)展表格模式 任務(wù)2單元格的基本編輯 1. 任務(wù)描述任務(wù)描述 規(guī)則的表格插入后，有可能還要將它修改成不規(guī)則的表，或者調(diào)整表格大小 。 2. 任務(wù)說(shuō)明任務(wù)說(shuō)明 單元格是構(gòu)成表格的基本元素，應(yīng)熟練掌握單元格的編輯方法。 本任務(wù)介紹單元格的選中方法，拆分和合并單元格，單元格的屬性的設(shè)置 。 3. 操作

4、步驟操作步驟 （1）選中單元格 1）選中一個(gè)單元格。 將光標(biāo)置于要選中的單元格中，按住CTRL鍵的同時(shí)單擊該單元格。 將光標(biāo)置于要選中的單元格中，單擊文檔窗口底部的“標(biāo)簽選擇器”中的標(biāo)簽。 將光標(biāo)置于要選中的單元格中，按住CTRL+A組合鍵 2）選中相鄰的多個(gè)單元格 將光標(biāo)置于要選中的相鄰單元格中的第一個(gè)單元格中，按住SHIFT鍵的同時(shí)單擊最后一個(gè)單元格。 將光標(biāo)置于要選中的相鄰單元格中的第一個(gè)單元格中，拖動(dòng)鼠標(biāo)至最后一個(gè)單元格后再釋放鼠標(biāo) 3）選中不相鄰的多個(gè)單元格按住CTRL鍵，用鼠標(biāo)左鍵分別點(diǎn)選相應(yīng)的單元格，則當(dāng)前單元格即被選中 （2）合并和拆分單元格 1）拆分單元格 選中需要拆分的單元

5、格，執(zhí)行命令“修改/表格/拆分單元格”，在彈出的“拆分單元格”對(duì)話框中輸入要拆分的行數(shù)和列數(shù)。 選中需要拆分的單元格，單擊“屬性”面板中的“拆分單元格為行或列”按鈕,在彈出的對(duì)話框中進(jìn)行相應(yīng)設(shè)置。 2）合并單元格 選中需要合并的單元格，執(zhí)行命令“修改/表格/合并單元格”。 選中需要合并的單元格，單擊“屬性”面板中的“合并所選單元格”按鈕 （3）設(shè)置單元格屬性 在文檔窗口中選中需要設(shè)置的單元格后，在“屬性”面板（如圖7-7所示）就會(huì)顯示出相關(guān)屬性。 屬性面板中各個(gè)參數(shù)的含義如下：1) 格式：用于設(shè)置單元格中內(nèi)容的格式。2) 樣式：用于設(shè)置單元格中文本的CSS樣式。3) 字體和大小：用于設(shè)置單元格

6、中文本的字體樣式和大小。4) 水平：用于設(shè)置單元格中內(nèi)容的水平對(duì)齊方式。5) 垂直：用于設(shè)置單元格中內(nèi)容的垂直對(duì)齊方式。6) 不換行：如果不選中該選項(xiàng)，則當(dāng)單元格中輸入的文本長(zhǎng)度超過(guò)單元格寬度時(shí)文本將自動(dòng)換行，以保持表格單元格的寬度不變。7) 背景：設(shè)置當(dāng)前選中單元格的背景圖片，可以直接在后面對(duì)話框中輸入背景圖片路徑，也可以點(diǎn)擊旁邊的文件夾圖標(biāo)選擇背景圖片所在位置。8) 邊框：設(shè)置單元格的邊框顏色。 圖7-7 單元格屬性任務(wù)3表格的屬性設(shè)置 1. 任務(wù)描述任務(wù)描述 表格是處理數(shù)據(jù)時(shí)常用的形式，也是網(wǎng)頁(yè)的一個(gè)重要元素，廣泛的應(yīng)用于數(shù)據(jù)、資料的顯示和處理中。 固定行列的表格制作后，還需增加行和列。

7、 2. 任務(wù)說(shuō)明任務(wù)說(shuō)明 本任務(wù)介紹表格的選中方法，增加行和列、刪除行和列，表格的屬性設(shè)置 。3. 操作步驟操作步驟 （1）選擇表格 將鼠標(biāo)移到表格的邊框頂部，鼠標(biāo)旁邊出現(xiàn)一個(gè)網(wǎng)格，單擊可以選擇表格，如圖6-8所示。 鼠標(biāo)點(diǎn)擊表格內(nèi)任意一個(gè)單元格，單擊文檔窗口下部標(biāo)簽選擇器中的標(biāo)簽按鈕，可以選擇表格。 右擊表格，在出現(xiàn)的快捷菜單中選擇命令“表格/選擇表格”。 鼠標(biāo)單擊表格內(nèi)任意一個(gè)單元格，點(diǎn)擊表示表格寬度的數(shù)字旁邊的小箭頭，選擇命令“選擇表格”。 1）插入單行或者單列 將光標(biāo)置于單元格中，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格/插入行”菜單項(xiàng),即可在選中的單元格上方插入一新行?；蛘哌x中單元

8、格后，點(diǎn)擊文檔窗口菜單“修改/表格/插入行”命令，同樣在選中的單元格上方插入一新行。 如果在上述操作中，將快捷菜單命令改為“表格/插入列”，或者將文檔窗口菜單命令改為“修改/表格/插入列”，則可在選中的單元格左側(cè)插入一新列。2）插入多行或者多列將光標(biāo)置于單元格中，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格/插入行或列”菜單項(xiàng),彈出“插入行或列”對(duì)話框。在出現(xiàn)的對(duì)話框中，可以選擇插入行或者列，以及插入的數(shù)量，或者是插入的位置 。（2） 增加行和列 （3） 刪除行和列 將光標(biāo)置于要?jiǎng)h除的單元格中，單擊鼠標(biāo)右鍵，從彈出的快捷菜單中選擇“表格/刪除行”菜單項(xiàng)可刪除光標(biāo)所在行，如果選擇“表格/刪除列”

9、菜單項(xiàng)可刪除光標(biāo)所在列。 或者將光標(biāo)置于要?jiǎng)h除的單元格中，單擊文檔窗口菜單項(xiàng)“修改/表格/刪除行”或 “修改/表格/刪除列”命令，同樣能刪除光標(biāo)所在單元格的行或列。（4）表格的屬性 在文檔窗口中選中需要設(shè)置屬性的表格后，在“屬性”面板中就會(huì)顯示出相關(guān)屬性，如圖7-10 所示。 圖7-10 表格屬性 屬性面板中各個(gè)參數(shù)的含義如下：表格 Id：Id是表格的名字。行和列：用于設(shè)置表格的行數(shù)和列數(shù)。寬：以像素為單位或按瀏覽器窗口寬度的百分比指定表格的寬度。按鈕：用于清除表格的列寬值。按鈕：用于清除表格的行高值。按鈕：用于將表格的寬度轉(zhuǎn)換成像素。按鈕：用于將表格的寬度轉(zhuǎn)換百分比。背景顏色：用于設(shè)置表格的

10、背景顏色，可直接在文本框中輸入顏色數(shù)值，或在顏色拾色器中選擇所需顏色。背景圖像：用于設(shè)置表格的背景圖像，可直接在文本框中輸入背景圖像文件的路徑，也可單擊旁邊的“文件夾圖標(biāo)”按鈕，從彈出的“選擇圖像源文件”對(duì)話框中選擇所需文件。填充：即單元格的邊距，用于設(shè)置單元格邊界和單元格中內(nèi)容之間的距離。間距：用于設(shè)置單元格之間的距離。對(duì)齊：用于設(shè)置表格的對(duì)齊方式。邊框：用于設(shè)置表格邊框的寬度，以像素為單位。 邊框顏色：用于設(shè)置邊框的顏色。 任務(wù)4表格布局 1.1.任務(wù)說(shuō)明任務(wù)說(shuō)明 如果您想像畫(huà)畫(huà)一樣繪制一個(gè)專(zhuān)業(yè)的表格，例如沿頁(yè)的頂部繪制一個(gè)單元格放置標(biāo)題圖形，在頁(yè)的左邊繪制另一個(gè)單元格放置導(dǎo)航條，在右邊繪

11、制第三個(gè)單元格放置內(nèi)容。 要完成這樣一個(gè)表格，通過(guò)“表格布局”操作就可以實(shí)現(xiàn)。 2 2任務(wù)說(shuō)明任務(wù)說(shuō)明 在“布局”模式中，使用布局單元格和布局表格可對(duì)頁(yè)面進(jìn)行布局，也就是使用表格作為基礎(chǔ)結(jié)構(gòu)來(lái)設(shè)計(jì)自己的網(wǎng)頁(yè)。 3. 操作步驟（1）創(chuàng)建布局表格1）在文檔窗口中，選擇菜單“查看/表格模式/布局模式”選項(xiàng)，可以切換到布局模式。2）在布局模式下，單擊“插入”菜單下的“布局對(duì)象”選項(xiàng)，選擇“布局表格”命令。此時(shí)鼠標(biāo)指針變?yōu)椤?”形，按住鼠標(biāo)左鍵拖動(dòng)，即可繪制出相應(yīng)的布局表格。如圖6-11所示。3）若要在不重復(fù)選擇該菜單項(xiàng)的情況下繪制多個(gè)布局表格，在繪制布局表格時(shí)按住 Ctrl鍵拖動(dòng)，只要繼續(xù)按住 Ctrl鍵便可以連續(xù)繪制出多個(gè)布局表格。 4）頁(yè)上顯示的布局表格外框默認(rèn)為綠色。（2） 創(chuàng)建布局單元格 1） 在布局模式下，單擊菜單“插入/布局對(duì)象/布局單元格”命令，此時(shí)鼠標(biāo)指針變?yōu)椤?”