第3章-表格的使用課件

1、第3章 表格的使用學(xué)習(xí)目標： 本章主要介紹表格的操作，使用表格布局網(wǎng)頁。要求: 1.熟練掌握建立表格、編輯表格、設(shè)置表格屬性基本操作。 2.了解如何用表格來布局網(wǎng)頁元素; 3.掌握表格布局的兩種模式：標準模式和布局模式。并 能熟練運用這兩種模式布局網(wǎng)頁。第3章 表格的使用3.1 創(chuàng)建表格3.2 編輯表格3.3 布局視圖模式3.4 用表格布局網(wǎng)頁3.1 創(chuàng)建表格 表格在網(wǎng)頁中是一種用途廣泛的工具。它可以有序地排列數(shù)據(jù)，更重要的是可以精確定位文本、圖像及其他網(wǎng)頁元素。表格是由行和列組成 .3.1 創(chuàng)建表格單元格：由行和列相交所產(chǎn)生的區(qū)域。單元格填充：單元格中的內(nèi)容與單元格邊框之間的距離。單元格間距

2、：單元格與單元格之間的空間大小。3.1 創(chuàng)建表格3.1.1 建立表格建立表格的方法有以下幾種，可任選一種。將光標定位，單擊【常用】工具欄中的【表格】按鈕;將【常用】工具欄中的【表格】按鈕拖到頁面相應(yīng)的位置。將光標定位，選擇主菜單【插入】/【表格】命令。3.1 創(chuàng)建表格3.1.2 在表格中添加內(nèi)容表格建立好后，就可以向表格中添加內(nèi)容了。例如文本、圖像、表格等網(wǎng)頁元素。文本可直接輸入，隨著文本的增多，表格會自動增高。在單元格中插入圖像同文檔插入圖像方法相同，如果單元格的尺寸小于圖像的尺寸，則圖像插入后，單元格會自動增高或增寬。如果在表格的單元格繼續(xù)插入表格，就構(gòu)成了嵌套表格，內(nèi)嵌表格可以將一個單元

3、格分成許多行和列。內(nèi)嵌表格越多，瀏覽器所花費的下載時間越長，因此一般內(nèi)嵌的表格最多不超過3 層。3.2 編輯表格 表格建立好，就可以對它進行編輯。編輯表格要先選擇表格對象。表格對象的選擇包括選擇行、選擇列、選擇單元格、選擇整個表格。3.2 編輯表格3.2.1 選擇表格對象3.2.2 設(shè)置表格屬性3.2.3 設(shè)置行、列與單元格屬性3.2.4 增加、刪除行或列3.2.5 表格的快速格式化3.2.6 創(chuàng)建細線表格3.2.7 表格的其他操作3.2.1 選擇表格對象1選擇整個表格有多種方法，這里介紹兩種:單擊表格的邊框線，選定表格將光標移到要選擇的表格內(nèi)，單擊狀態(tài)欄的“”標簽。2選擇行將鼠標指針置于表格

4、行最左側(cè)，會變?yōu)橹赶蛴覀?cè)的粗黑箭頭，單擊即選中此行。選中后上下拖動鼠標，可選中多行。將光標移到要選擇的行中，然后單擊狀態(tài)欄的“”標簽，可選擇此行。3.2.1 選擇表格對象3選擇列 將鼠標指針置于表格列最上方，會變?yōu)橹赶蛳聜?cè)的粗黑箭頭，單擊即選中此行。選中后左右拖動鼠標，可選中多列。3.2.1 選擇表格對象4選擇單元格只要在想選擇的單元格內(nèi)單擊，即選擇了該單元格。狀態(tài)欄上的標簽處于選中的狀態(tài)， 3.2.1 選擇表格對象5選擇不相鄰的單元格、行或列按住Ctrl鍵，依次單擊，可選中不相鄰的單元格、行或列。在已選擇的連續(xù)單元格、行或列中按住Ctrl鍵，然后單擊不需選中的單元格、行或列。3.2.1 選擇

5、表格對象3.2.2 設(shè)置表格屬性【表格的ID】：如果要在網(wǎng)頁中使用JavaScript語言來控制表格，就需 要為表格的取名?！拘泻土小浚涸O(shè)置表格的行數(shù)和列數(shù)，這兩個值必須給定。重新設(shè)置行和列，可以增加或減少表格行數(shù)或列數(shù)?！緦捄透摺浚涸O(shè)定表格的寬度和高度。單位可以是像素或百分比。表格的寬度值必須給定。而高度值可以不設(shè)定，由實際內(nèi)容來決定表格的高度。通過設(shè)置表格的寬度和高度可以改變表格的大小。當(dāng)然也可以拖動邊框線來改變表格的大小，但這種方法不準確?！咎畛洹浚涸O(shè)定單元格內(nèi)容與邊距之間的距離。對應(yīng)表格的屬性“cellpadding”?！鹃g距】：單元格與單元格之間的距離。對應(yīng)表格的屬性“cellspa

6、cing”。若不指定填充和間距的值，則多數(shù)瀏覽器按填充為1、間距為2來顯示表格。3.2.2 設(shè)置表格屬性【對齊】：設(shè)定表格的對齊方式，有4 個選項：【默認】、【居中對齊】、【左對齊】、【右對齊】。選擇【默認】選項，則按左對齊顯示?！具吙颉浚涸O(shè)定表格邊框的寬度，單位為像素。絕大多數(shù)瀏覽器以三維線條顯示表格，若設(shè)值為0，表示沒有邊框?？梢栽诰庉嫚顟B(tài)下選擇【查看】/【可視化助理】/【表格邊框】命令，顯示表格的虛線框?！颈尘邦伾浚涸O(shè)置表格的背景顏色?！颈尘皥D像】：設(shè)置表格的背景圖像。【邊框顏色】：設(shè)置表格的邊框顏色。和按鈕：清除行高和列寬。 和按鈕： 根椐當(dāng)前值，把列寬轉(zhuǎn)換為像素值和百分比。和按鈕：

7、根椐當(dāng)前值，把行高轉(zhuǎn)換為像素值和百分比。3.2.3 設(shè)置行、列與單元格屬性 選定表格的行、列或單元格，【屬性】面板顯示的參數(shù)基本是相同。如圖3-5所示。通過【屬性】面板可以重新設(shè)置所選對象。3.2.4 增加、刪除行或列 增加、刪除表格的行數(shù)或列數(shù)，除了可以通過【屬性】面板重新定義表格的行數(shù)、列數(shù)這種方法外，還可以通過菜單命令來實現(xiàn)。步驟： 將光標定位于要插入新行（列）的單元格。要增加一行，選擇菜單【修改】/【表格】/【插入行】命令，或單擊右鍵，選擇快捷菜單中的【表格】/【插入行】命令。則在光標所在單元格的上面增加了一行。要增加一列，選擇菜單【修改】/【表格】/【插入列】命令，或單擊右鍵，選擇快

8、捷菜單中的【表格】/【插入列】命令。則在光標所在單元格的左側(cè)增加了一列。要增加多行或多列，選擇菜單【修改】/【表格】/【插入行或列】命令，彈出【插入行或列】對話框，如圖3-7所示。進行選擇設(shè)置，單擊【確定】按鈕，可完成插入操作。刪除行、列也是先將光標定位于要刪除的行或列中，然后選擇菜單【修改】/【刪除行】或【刪除列】命令；或單擊右鍵，選擇快捷菜單中的【表格】/【刪除行】或【刪除列】命令，將行或列刪除。3.2.5 表格的快速格式化 除了可以通過【屬性】面板對表格格式化外，在Dreamweaver系統(tǒng)中還提供了十幾種表格模板來快速格式化表格。另外，這些模板也不是固定不變，可通過設(shè)置模板參數(shù)，調(diào)整表

9、格外觀。步驟：選定表格，選擇菜單【命令】/【格式化表格】命令，彈出【格式化表格】對話框。如圖3-8所示。3.2.5 表格的快速格式化3.2.5 表格的快速格式化在列表框中選定一種格式?？梢詫x項進行設(shè)置：【行顏色】：包括3個選項，用于定義表格中每一行的顏色。第一種：為表格中的行設(shè)置一種顏色。第二種：為表格中的行設(shè)置另一種顏色。交錯：兩種行顏色交替出現(xiàn)的方式，共有【不要交錯】、【每一行】、【每二行】、【每三行】、【每四行】5個選項?！镜谝恍小浚喊?個選項，用于設(shè)置表格頂部第一行的各項屬性參數(shù)。對齊：其下拉列表中包括4個選項：【無】、【左對齊】、【居中對齊】、【左對齊】。文字樣式：其下拉列表中包

10、括4個選項：【常規(guī)】、【粗體】、【斜體】、【加粗斜體】。背景色和文本顏色：設(shè)置第一行的背景色和文本顏色?！咀钭罅小浚河糜谠O(shè)置表格左側(cè)第1列的各項屬性參數(shù)。有2個選項：【對齊】、【文字樣式】。設(shè)置方法同上?！具吙颉浚河糜谠O(shè)置表格的邊框?qū)挾?，以像素為單位?！緦⑺袑傩蕴子弥罷D標注而不是TR標簽】：在HTML標簽中，“表示表格的行”，“表示數(shù)據(jù)單元格”。若要將上述設(shè)置用于而不是，則勾選該選項。單擊【確定】按鈕，完成表格的格式化設(shè)置。3.2.6 創(chuàng)建細線表格若設(shè)置表格邊框為“1”，則在瀏覽器中呈示的線條實際為2像素，要制作細線表格，可以使用CSS樣式表來定義，也可以運用表格的屬性參數(shù)來進行設(shè)置。我們

11、先介紹后一種方法，具體步驟如下：在Dreamweaver中按Ctrl+Alt+T，彈出插入表格的對話框，參數(shù)設(shè)置如圖3-9所示。為固定值：表格邊框設(shè)為“0”，間距設(shè)為“1”。3.2.7 表格的其他操作1.復(fù)制粘貼行2.排序3.導(dǎo)入導(dǎo)出其他應(yīng)用程序中的數(shù)據(jù)3.3 布局視圖模式 在編輯網(wǎng)頁前應(yīng)該首先對網(wǎng)頁進行整體布局設(shè)置。合理的布局使網(wǎng)頁看起來美觀大方，并且便于網(wǎng)頁元素的插入與編輯。表格是進行布局的強有力的工具。使用表格的標準模式進行布局不太方便，因為最初創(chuàng)建表格是為了顯示表格數(shù)據(jù)，而不是用于對Web頁進行布局。為了簡化使用表格進行頁布局的過程，Dreamweaver MX 2004提供了布局視圖

12、。在布局視圖中，可以使用表格作為基礎(chǔ)結(jié)構(gòu)來設(shè)計我們的頁面，避免了使用傳統(tǒng)的方法創(chuàng)建時經(jīng)常出現(xiàn)的一些問題。例如，在布局視圖中我們可以在頁上方便地繪制布局單元格，然后將這些單元格移動到所需的位置。我們還可以方便地創(chuàng)建固定寬度的布局和自動伸展為整個瀏覽器窗口寬度的布局等。3.3 布局視圖模式 要使用布局模式，必須打開Dreamweaver MX 2004的布局模式，方法是：選擇【查看】/【表格模式】/【布局模式】命令，或者單擊工具欄上的【常用】下拉列表，選擇【布局】工具欄，如圖3-13所示。點擊【布局】按鈕，切換到表格的布局模式?！静季直砀瘛堪粹o和【繪制布局單元格】按鈕有效。3.3.1 繪制布局單元

13、格和表格 在布局模式中，可以在頁面上直接繪制布局單元格和布局表格。當(dāng)不在布局表格中繪制布局單元格時，Dreamweaver MX 2004會自動創(chuàng)建一個布局表格以容納該單元格。布局單元格不能存在于布局表格之外。1. 繪制布局單元格的操作步驟如下;2繪制布局表格操作步驟如下;3.3.1 繪制布局單元格和表格 說明：不能在現(xiàn)有內(nèi)容旁邊繪制布局表格。如果我們的頁上已包含內(nèi)容，則只能在現(xiàn)有內(nèi)容的下方繪制新的布局表格。如果我們嘗試在現(xiàn)有內(nèi)容之下繪制布局表格，就會出現(xiàn)禁止繪制鼠標指針，請重新調(diào)整文檔窗口的大小以使現(xiàn)有內(nèi)容底部和窗口底部之間產(chǎn)生更多的空白空間。3.3.1 繪制布局單元格和表格3繪制嵌套布局表

14、格 可以將一個布局表格繪制在另一個布局表格中，創(chuàng)建嵌套表格。對外部表格所進行的更改不會影響嵌套表格中的單元格；例如，當(dāng)更改外部表格中行或列的大小時，內(nèi)部表格中單元格的大小不發(fā)生變化。4將布局單元格靠齊到網(wǎng)格 可以打開Dreamweaver MX 2004文檔窗口中的網(wǎng)格，將其用作繪制布局的可視化向?qū)?，讓頁面元素在移動時自動靠齊到網(wǎng)格。還可以通過指定網(wǎng)格設(shè)置更改網(wǎng)格或控制靠齊行為。不管網(wǎng)格是否可見，靠齊都將發(fā)揮作用。3.3.2 向布局單元格中添加內(nèi)容 在布局模式中可以將文本、圖像和其他內(nèi)容添加到布局單元格中，就象在標準模式中一樣。但在布局模式中不能向布局表格的空白（灰色）區(qū)域插入內(nèi)容，因此在添加

15、內(nèi)容之前，必須先創(chuàng)建布局單元格，當(dāng)添加內(nèi)容的寬度大于布局單元格時，該單元格自動擴展。3.3.3 調(diào)整布局表格和布局單元格 為了調(diào)整頁面布局，可以對布局單元格和嵌套布局表格進行移動并調(diào)整它們的大小，（最外面的布局表格只能調(diào)整大小）。布局單元格不能重疊，對單元格進行移動或調(diào)整大小之后，該單元格不能跨越包含它的布局表格的邊框。1調(diào)整布局單元格的大小具體步驟如下：單擊布局單元格的邊框或者按住CTRL鍵并單擊布局單元格里的任何區(qū)域，在布局單元格的邊框上會出現(xiàn)控制點。拖動控制點就可以改變布局單元格的大小?；蛲ㄟ^【屬性】面板調(diào)整單元格的大小。3.3.3 調(diào)整布局表格和布局單元格2調(diào)整布局表格的大小當(dāng)布局表格

16、的大小不合適時，就需要調(diào)整布局表格的大小。具體步驟如下：單擊狀態(tài)欄上的表格標簽，選中表格。通過【屬性】面板調(diào)整表格的大小，或拖動控制點調(diào)整大小。3移動布局表格或布局單元格布局表格或布局單元格不在正確的位置時，需要調(diào)整布局單元格或布局表格的位置。具體步驟如下：選定布局單元格。拖動布局單元格到頁面上所需的地方?；蛘呤褂面I盤上的方向鍵，按一下方向鍵可以移動1個像素的距離，如果同時按住Shift鍵，一次可以移動10個像素的距離。 可以通過使用【屬性】面板來更改布局單元格或表格的多種屬性，包括寬度和高度、背景顏色以及單元格內(nèi)容的對齊方式。設(shè)置布局表格，具體步驟如下：選定布局表格，【屬性】面板顯示布局表格

17、的參數(shù)。如圖3-14所示。圖3-14 【屬性】面板【寬】：可選擇【固定】單選按鈕，然后在文本框中輸入以像素為單位的值，或者選擇【自動伸展】單選按鈕。如果選擇【自動伸展】，無論瀏覽器的窗口設(shè)置為多大，設(shè)計的布局會充滿瀏覽器的窗口。【高】：在文本框中輸入以像素為單位的值。最小值為1?！颈尘邦伾浚和ㄟ^調(diào)色板來選取背景色?！咎畛洹浚涸O(shè)置單元格內(nèi)容與邊框之間的距離，單位為像素?！鹃g距】：設(shè)置單元格與單元格之間的距離。單位為像素。3.3.4 設(shè)置布局表格和布局單元格的格式3.3.5 使用間隔圖 間隔圖是透明圖，在瀏覽器里看不見，但它可以用來控制自動伸展表的間隔，使用間隔圖能維持頁面上設(shè)置的布局表格和布局

18、單元格的寬度。在一列插入間隔圖或設(shè)置一列自動伸展時會出現(xiàn)一個對話框，詢問怎樣建立間隔圖文件。如果已經(jīng)在Dreamweaver mx 2004 的站點參數(shù)中建立了間隔圖的話，該對話框就不會出現(xiàn)。在某一列中建立間隔圖的步驟如下：選定一列，寬度設(shè)為自動伸展，將彈出【選擇占位圖像】對話框，如圖3-15所示。選擇【創(chuàng)建占位圖像文件】單選按鈕，單擊【確定】按鈕。3.3.5 使用間隔圖3.3.5 使用間隔圖彈出如圖3-16所示對話框，輸入間隔圖文件名。圖3-16【保存間隔圖像文件】對話框單擊【保存】按鈕，間隔圖就創(chuàng)建好了。要刪除某一列的間隔圖，可以在該列底部單擊三角按鈕，在彈出的菜單選擇【刪除間隔圖像】命令

19、。如圖3-17所示。3.3.5 使用間隔圖圖3-17 【刪除間隔圖像】命令要刪除表格中所有的間隔圖，可以選定表格，單擊【屬性】面板上的【刪除所有間隔圖像】按鈕。3.4 用表格布局網(wǎng)頁 網(wǎng)頁的布局應(yīng)遵循的原則有對稱平衡、異常平衡、對比、凝視和空白等。在Dreamweaver 中我們可以用表格、框架、層來布局網(wǎng)頁，但表格是使用最廣泛的一種。3.4.1 頁網(wǎng)的布局的幾種常見形式1國字型結(jié)構(gòu)布局： 國字型結(jié)構(gòu)布局也稱同字型，是一些大型網(wǎng)站所喜歡的類型，即最上面是網(wǎng)站的標題+橫幅廣告條+主菜單，下半部分分為3個區(qū)域，左右分列一些兩小條內(nèi)容，中間是主題內(nèi)容，與左右一起羅列到底，最下面是網(wǎng)站的一些基本信息、聯(lián)系方式、版權(quán)聲明等。這種布局的優(yōu)點是能夠充分利用版面，信息量大；缺點是頁面擁擠，不夠靈活。3.4 用表格布局網(wǎng)頁2拐角型布局： 這種結(jié)構(gòu)與上一種其實是很相近的，上面是標題+廣告橫幅，下半部分左列是主菜單，右列是主要內(nèi)容。或者左列是主要內(nèi)容，右列是主菜單。下面是一些網(wǎng)站的輔助信息。這種布局方式的優(yōu)點是頁面結(jié)構(gòu)清晰，主次分明，初學(xué)者最容易上手；缺點是較為呆板，如果不注意細節(jié)色彩，很容易讓人產(chǎn)生雜亂的感覺。3.4 用表格布局網(wǎng)頁3綜合框架型： 由上下框架、左右框架組合成的一種框架結(jié)構(gòu)，類似于“拐