網(wǎng)頁制作,清華大學(xué)出版社第13章.ppt

1、第13章 層與表格及其應(yīng)用,13.1 層的創(chuàng)建與基本操作 13.2 層的屬性面板和控制面板 13.3 層的應(yīng)用實(shí)例 13.4創(chuàng)建表格的基本操作 13.5表格的編輯修改與格式化 13.6布局表格和布局單元格 137 本章小結(jié),本章重點(diǎn)： 層的創(chuàng)建、編輯和應(yīng)用的方法 表格的創(chuàng)建、編輯和應(yīng)用的方法 布局表格與布局單元格的創(chuàng)建、編輯和應(yīng)用的方法,3.1 層的創(chuàng)建與基本操作 層是網(wǎng)頁中用來放置文本、圖像、動(dòng)畫、視頻和表單等網(wǎng)頁元素的載體。層在Dreamweaver 8.0網(wǎng)頁編輯窗口中可以自由移動(dòng)，改變層在網(wǎng)頁中的位置，便可實(shí)現(xiàn)層中網(wǎng)頁元素位置的改變，實(shí)際上層的應(yīng)用技術(shù)也是一種網(wǎng)頁元素的定位技術(shù)。層與行

2、為、時(shí)間軸配合使用后，可以控制多個(gè)層的疊放次序，層的顯示或隱藏，以及可以很方便地設(shè)計(jì)出動(dòng)感頁面效果和滾動(dòng)字幕、下拉式菜單等網(wǎng)頁特效。,13.1.1創(chuàng)建和刪除層 在網(wǎng)頁中創(chuàng)建一個(gè)新層可以單擊【插入】欄的【布局】選項(xiàng)中的【繪制層】按鈕，或選擇【插入】|【布局對象】|【層】命令來插入層。在同一個(gè)頁面中，可以創(chuàng)建多個(gè)層。在創(chuàng)建好的層中還可以繼續(xù)創(chuàng)建層，來實(shí)現(xiàn)層的嵌套。嵌套層可稱為子層，包含嵌套層的那個(gè)層稱為父層，嵌套層永遠(yuǎn)在其父層上方，創(chuàng)建層和嵌套層的操作步驟如下。 （1）單擊【插入】面板組的【常用】選項(xiàng)卡中的【描繪層】按鈕，此時(shí)光標(biāo)變?yōu)?+ 形狀。,（2）在網(wǎng)頁編輯區(qū)中上選擇插入層的位置，然后拖動(dòng)鼠

3、標(biāo)便可繪制一個(gè)層，此時(shí)在網(wǎng)頁編輯區(qū)窗口中出現(xiàn)一個(gè)層，如圖13-1所示。在光標(biāo)所在位置上創(chuàng)建了一個(gè)默認(rèn)屬性的層。 （3）將光標(biāo)插入到已建好的層中，然后選擇【插入】|【布局對象】|【層】命令，可在已建的層中插入一個(gè)嵌套層。 嵌套層的子層可以在其父層中間，也可以在其父層外邊，嵌套層永遠(yuǎn)在其父層上方。,圖 13-1 未被選中激活的層 圖13-2 被激活的層 圖13-3 被選中的層,13.1.2 激活和選中層 一個(gè)層在被激活后，才能將文本、圖像、表格、表單、多媒體等網(wǎng)頁元素插入到層中，單擊層中任意位置，就可激活層，此時(shí)光標(biāo)在層中閃爍，層的左上角出現(xiàn)選擇柄，邊框線由灰色變?yōu)樗{(lán)色，如圖13-2所示。選中層后

4、，才能對層設(shè)置屬性和進(jìn)行調(diào)整、移動(dòng)等操作，如圖13-3所示。 選中層的多種方法如下。 （1）先激活層，再單擊層左上角的選擇柄，可選中該層。 （2）單擊層的邊框，也可選中層。 （3）如果在當(dāng)前網(wǎng)頁編輯窗口中沒有層被激活和選中，按住Shift 鍵，單擊層中任意位置，就可選中該層。按住Shift鍵，單擊每一個(gè)要選中的層，可選中多個(gè)層。,（4）如果已經(jīng)選中了多個(gè)層，按住Ctrl+Shift 鍵，再單擊要選中的層，可僅選中該層，同時(shí)取消對其他層的選擇。 （5）按F2功能鍵或選擇【窗口】|【層】命令，在打開的【層】面板中單擊該層的名稱，就可選中該層。 （6）按住Shift鍵，在【層】面板中單擊每一個(gè)要選中

5、的層名稱，可選中多個(gè)層。,13.1.3 調(diào)整、移動(dòng)和對齊層 1調(diào)整層的大小尺寸 創(chuàng)建層后，可通過以下方法調(diào)整層的大小尺寸。 （1）選中需要調(diào)整的層，此時(shí)在層的邊框四周出現(xiàn)八個(gè)藍(lán)色活動(dòng)塊，用鼠標(biāo)拖曳某個(gè)活動(dòng)塊，即可調(diào)整層的大小。 （2）選中需要調(diào)整的層，在層【屬性】面板的【寬】和【高】兩個(gè)文本框中輸入層的寬度和高度尺寸，可精確調(diào)整該層的尺寸。,2移動(dòng)層 移動(dòng)層的2種方法如下。 （1）用鼠標(biāo)移動(dòng)層時(shí)，可將光標(biāo)移到層左上角的選擇柄上，或?qū)⑹髽?biāo)移到層的邊框線上，當(dāng)鼠標(biāo)指針變成四個(gè)十字狀箭頭時(shí)，拖動(dòng)鼠標(biāo)即可移動(dòng)該層。 （2）選中要移動(dòng)的層，在層【屬性】面板的【左】和【上】兩個(gè)文本框中輸入層左上角坐標(biāo)，便

6、可精確設(shè)置這個(gè)層在網(wǎng)頁中的目標(biāo)位置。,3對齊層 對齊層的方法如下。 先選中多個(gè)要對齊的層，選擇【修改】|【排列順序】命令的下一級(jí)菜單中的【左對齊】、【右對齊】、【對齊上緣】、【對齊下緣】命令，可對齊選中的層。選擇【設(shè)成寬度相同】和【設(shè)成高度相同】命令，可使選中的層具有相同的寬度和高度。,13.2 層的屬性面板與控制面板 13.2.1設(shè)置層的屬性 創(chuàng)建了層以后，可利用層的【屬性】面板設(shè)置層的名稱、位置、大小尺寸、背景顏色或背景圖像、層的可見性、堆棧順序、層標(biāo)記、當(dāng)層內(nèi)容溢出時(shí)的處理方法、以及層中可見區(qū)域的位置和尺寸等等。 選中層的選擇柄就可打開層的【屬性】面板，如圖13-4所示。,圖13-4 層

7、的屬性面板,層的【屬性】面板中的各項(xiàng)設(shè)置的意義如下 （1）在【層編號(hào)】文本框中設(shè)置當(dāng)前層的名稱。層名稱中不能帶有符號(hào)和漢字，也不能以數(shù)字開頭，只能是英文字母和數(shù)字。 （2）在【左】和【上】文本框中設(shè)置當(dāng)前層相對于頁面或父層的左上角距離。 （3）在【寬】和【高】文本框中指定層的寬度和高度。 （4）在【Z軸】文本框中可設(shè)置當(dāng)前層的層次屬性值。 可以把整個(gè)網(wǎng)頁的頁面看成X-Y平面，把網(wǎng)頁上層的Z軸值可看成Z軸的坐標(biāo)值。這個(gè)值決定了當(dāng)前層放置在哪個(gè)層面上，一般Z軸值大的層放在上面，Z軸值小的層放在下面。,（5）在【可見性】下拉式列表中可以設(shè)置層的可見性。下拉式列表中的四個(gè)選項(xiàng)分別是Default (默

8、認(rèn)狀態(tài))、Inherit (繼承父層的可見性)、Visible（設(shè)置層為可見）、Hidden（設(shè)置層為隱藏）。 （6）在【背景圖像】和【背景顏色】文本框中可設(shè)置層的背景圖片和背景顏色。 （7）在【溢出】拉式列表中，確定當(dāng)層的內(nèi)容超出層范圍時(shí)處理的方式。 其中溢出部分的處理的四個(gè)選項(xiàng)分別為Visible（增加層尺寸，顯示超出部分的內(nèi)容）、Hidden（保持層尺寸不變，隱藏超出部分的內(nèi)容）、Scroll（增加滾動(dòng)條）、Auto（當(dāng)內(nèi)容超出層尺寸時(shí)，自動(dòng)增加滾動(dòng)條）。 （8）在【剪輯】文本框中設(shè)置層的可視區(qū)域，【左】、【上】、【右】、【下】文本框中輸入的數(shù)值表示層可視區(qū)域與層邊界之間的距離。,13.

9、2.2 層的控制與操作 Dreamweaver 8.0中的層面板是一種能方便、輕松、直觀地對層進(jìn)行控制和操作的工具。選擇【窗口】 |【層】命令，或按F2功能鍵，可打開層面板，如圖13-5所示。 在層面板中可以完成對層改名，選定層，修改層的可見性，設(shè)置層的疊放次序以及設(shè)置層嵌套等操作，操作方法如下。 （1）選定某個(gè)層：只需在【層】面板列表中單擊該層，即可選定這個(gè)層。 （2）更改層名：雙擊層名稱，層名稱處出現(xiàn)光標(biāo)，便可刪除原來的層名稱，輸入新的層名稱。,圖 13-5 層面板,（3）顯示、隱藏層：單擊【層】面板左邊的顯示與隱藏列，可顯示或隱藏該層。如果在該列中顯示一個(gè)睜眼的圖標(biāo) ，表示顯示該層；如果

10、在該列中顯示一個(gè)閉眼的圖標(biāo) ，表示隱藏該層；如果在該列中不顯示任何圖標(biāo)，表示該層繼承其父層的可見性。 （4）改變層的疊放次順序：單擊該層控制窗口的Z列，便可修改該層的層次屬性值?；蛘哂檬髽?biāo)拖曳層，也可以調(diào)整該層的疊放次序。 （5）創(chuàng)建和取消嵌套層：按住Ctrl鍵，然后在【層】面板中拖曳子層到父層上，當(dāng)父層上出現(xiàn)黑框時(shí)松開鼠標(biāo)，便可創(chuàng)建一個(gè)嵌套層，如圖13-5示。子層可隨父層移動(dòng)而移動(dòng)，可繼承父層的可見屬性，也可另外設(shè)置可見屬性。只需用鼠標(biāo)將子層拖離父層，便可取消嵌套層。,（6）禁止層重疊：選中【層】面板【防止重疊】復(fù)選框，表示對層操作時(shí)禁止各層重疊。要?jiǎng)?chuàng)建嵌套層時(shí)必須取消該復(fù)選框。 在圖13-

11、5所示的【層】面板中，Layer1在最底層，Layer3和 Layer4是 Layer2的嵌套層，在最上層。嵌套層在頁面上顯示時(shí)并不一定位于其父層之中，它的HTML代碼嵌套在其父層的HTML代碼中，移動(dòng)父。層時(shí)嵌套層會(huì)一齊移動(dòng)。如果從頁面上看到某一層位于另一層之中，它們的HTML代碼互不包含，就不是嵌套層,13.3 層的應(yīng)用實(shí)例 例13.1制作具有下列要求的網(wǎng)頁，網(wǎng)頁示意如圖13-6所示。 （1）頁面的背景圖片為bg0040.gif； （2）在頁面合適的位置上插入4個(gè)層，層的大小為150 150像素。 （3）在層中插入【鼠標(biāo)經(jīng)過圖像】，原始圖像分別是ch13中的tu1_1.jpg、tu2_1.

12、jpg、tu3_1.jpg、tu4_1.jpg，鼠標(biāo)經(jīng)過圖像分別是ch13中的tu1.jpg、tu2.jpg、tu3.jpg、tu4.jpg； （4）創(chuàng)建2個(gè)層，層中輸入文字“書精神的糧食”，設(shè)置【字體】為“方正舒體”，【大小】為7，【顏色】為#993300，【樣式】為“粗體”，將層中文字格式化。并將下面1個(gè)層中文字由黃色改為黑色。 （5）將2個(gè)文字層略微錯(cuò)開疊放在一起，設(shè)計(jì)出文字陰影效果，如圖13-6所示。 （6）網(wǎng)頁文件以exa13-1.htm 為名保存在在本地站點(diǎn)My site中。,制作分析： 本例是用層作為網(wǎng)頁元素定位方式的網(wǎng)頁實(shí)例，制作時(shí)要注意層在網(wǎng)頁文檔窗口和瀏覽器窗口中位置可能會(huì)

13、有偏差，需要調(diào)整好。另外，在完成網(wǎng)頁制作前，需要正確創(chuàng)建本地站點(diǎn)。新建網(wǎng)頁并設(shè)置頁面屬性后，需要將網(wǎng)頁保存在本地站點(diǎn)中，這樣以后在網(wǎng)頁上添加的網(wǎng)頁元素就是以相對路徑插入的。 操作步驟 見教材259-260頁,圖 13-6應(yīng)用實(shí)例示意圖,13.4創(chuàng)建表格的基本操作 表格不但在組織頁面數(shù)據(jù)時(shí)非常有用，而且在網(wǎng)頁元素的布局安排上也起著重要的作用，利用表格可以控制文本和圖像等對象在頁面上的位置。網(wǎng)頁一般可用表格和層來對網(wǎng)頁元素定位，用層定位的網(wǎng)頁元素有時(shí)瀏覽時(shí)會(huì)發(fā)生位置偏移，用表格定位是比較理想的方案。對于頁面元素布局不規(guī)則的網(wǎng)頁則可用布局表格和布局單元格來對網(wǎng)頁元素定位，布局表格和布局單元格是使用方

14、便的網(wǎng)頁元素定位工具。,13.4.1 新建表格 在網(wǎng)頁制作時(shí)要新建一個(gè)表格，可選擇【插入】|【表格】命令，或選擇【插入】欄【布局】選項(xiàng)，單擊【表格】按鈕，也可用快捷鍵Ctrl+Alt+T，此時(shí)網(wǎng)頁編輯窗口中會(huì)彈出【表格】對話框，如圖13-8所示。在此對話框中，可設(shè)置表格的屬性，然后單擊【確定】按鈕確認(rèn)，便可在網(wǎng)頁光標(biāo)所在位置上插入表格。 【表格】對話框中各項(xiàng)參數(shù)具體意義如下。 （1）在【行數(shù)】和【列數(shù)】文本框中可設(shè)置表格的行數(shù)和列數(shù)。 （2）在【表格寬度】文本框中設(shè)置表格的寬度，并在右側(cè)的下拉式列表中選擇表格寬度的單位，選項(xiàng)分別為像素和百分比，其中百分比是指表格與瀏覽器窗口的百分比。,（3）在

15、【邊框粗細(xì)】文本框中設(shè)置表格外框線的粗細(xì)。 （4）在【單元格邊距】文本框中設(shè)置單元格的內(nèi)容和單元格邊框之間空白處的寬度。 （5）在【單元格間距】文本框中設(shè)置表格中各單元格之間的寬度。 （6）在【頁眉】區(qū)域中，可選【無】對表格不啟用列或行標(biāo)題；選【左側(cè)】可以將表格的第一列作為標(biāo)題列，以便為表中的每一行輸入一個(gè)標(biāo)題；選【頂部】可以將表的第一行作為標(biāo)題行，以便為表中的每一列輸入一個(gè)標(biāo)題；選【兩者】能夠在表中輸入列標(biāo)題和行標(biāo)題。 （7）在【輔助功能】區(qū)域中，可以在【標(biāo)題】文本框中輸入一個(gè)顯示在表格外的表格標(biāo)題；可在【對齊標(biāo)題】下拉列表中指定表格標(biāo)題相對于表格的顯示位置；在【摘要】文本框中給出了表格的說

16、明，但是該文本不會(huì)顯示在用戶的瀏覽器中。,圖13-8插入【表格】對話框,在網(wǎng)頁上插入一個(gè)表格后，可根據(jù)需要在某些單元格中插入文本、圖像或各種多媒體對象。在插入文字對象前必須先將光標(biāo)定位在該單元格中，然后可直接輸入文字或?qū)?fù)制在剪貼板中的文字對象粘貼進(jìn)單元格內(nèi)。 在表格中插入圖像或其它多媒體對象的方法是先將光標(biāo)定位在某一單元格內(nèi)，然后單擊【插入】欄【布局】選項(xiàng)中的【圖像】或【媒體：flash】按鈕，在下拉列表中選擇要插入的相應(yīng)選項(xiàng)，便可插入圖像或其它多媒體對象。,13.4.2 設(shè)置表格和單元格的屬性 1設(shè)置表格的屬性 新建表格后，可在表格屬性面板中設(shè)置表格屬性，來改變表格的外觀特性。 先在網(wǎng)頁編

17、輯器窗口中選中整個(gè)表格，此時(shí)表格的屬性面板，如圖13-9所示。 表格屬性面板中參數(shù)的具體意義如下： （1）在【表格Id】文本框中可輸入表格名稱。 （2）在【行】、【列】、【寬】、【高】、【填充】、【間距】、【邊框】等參數(shù)設(shè)置方法與【表格】對話框的參數(shù)設(shè)置方法相同。,圖13-9 表格的屬性面板,（3）在【對齊】下拉式列表中可選擇表格的對齊方式。 （4）單擊【清除列寬】按鈕 及【清除行高】按鈕，可清除表格屬性面板中列寬和行高的數(shù)據(jù)。 （5）單擊【將表格寬度轉(zhuǎn)換成像素】按鈕和【將表格高度轉(zhuǎn)換成像素】按鈕，可將表格寬度和高度的單位由百分比方式轉(zhuǎn)換成像素。 （6）單擊【將表格寬度轉(zhuǎn)換成百分比】按鈕和【將

18、表格高度轉(zhuǎn)換成百分?jǐn)?shù)】按鈕可將表格寬度和高度的單位由像素方式轉(zhuǎn)換成百分比。 （7）在【背景顏色】和【邊框顏色】文本框中分別可設(shè)置表格的背景顏色和邊框線的顏色。 （8）在【背景圖像】文本框中輸入表格背景圖片的路徑和文件名。,2設(shè)置單元格的屬性 在對表格的操作過程中，為了突出顯示某一部分?jǐn)?shù)據(jù)的重要性，常常會(huì)設(shè)置選中的行、列或者是某幾個(gè)單元格的屬性。選中一個(gè)或多個(gè)單元格后，打開單元格的【屬性】面板，如圖13-10所示。其中各項(xiàng)參數(shù)意義如下： （1）在【水平】和【垂直】下拉式列表中可以選擇單元格內(nèi)容水平對齊和垂直對齊的方式，四種水平對齊方式為“默認(rèn)”、“左對齊”、“”居中、“右對齊”，五種垂直對齊方式

19、為“默認(rèn)”、“頂端對齊”、“中間對齊”、“底部對齊”、“基線對齊”； （2）【寬】和【高】文本框中輸入以像素為單位的單元格的寬度和高度。若輸入的數(shù)據(jù)以百分比為單位，則可在數(shù)據(jù)后面加百分比符號(hào) % ；,圖13-10單元格的屬性面板,（3）選中【不換行】復(fù)選框，可設(shè)置文本自動(dòng)換行； （4）在【標(biāo)題】復(fù)選框中，選擇是否將單元格設(shè)置為表格的標(biāo)題。默認(rèn)情況下，標(biāo)題單元格中的內(nèi)容將被設(shè)為粗體，并且居中對齊； （5）在【背景】文本框中設(shè)置背景圖片的文件名和路徑。 （6）在【背景顏色】和【邊框】文本框中設(shè)置表格的背景顏色和邊框線的顏色。 （7）單擊【合并所選的單元格】按鈕 ，可用于合并選中的單元格。 （8）單

20、擊【拆分單元格為行和列】按鈕 ，可用于拆分選中的單元格。 單元格【屬性】面板的上半部分與文字【屬性】面板相同，這些參數(shù)意義這里不再敘述。,13.4.3選取表格和單元格 要對表格編輯操作，首先要掌握表格行、列以及單元格的選擇方法。在Dreamweaver 8.0中選擇表格元素的方法與MS Office 軟件中表格元素的選擇方法相同，以下是選擇表格元素的操作方法。 1選擇單元格 （1）選中某個(gè)單元格的2種方法如下： 先單擊要選擇的單元格，然后拖動(dòng)鼠標(biāo)到相鄰的單元格中，當(dāng)被選中的單元格四周出現(xiàn)粗邊框線時(shí)釋放鼠標(biāo)，即可選中該單元格； 單擊要選擇的單元格，然后單擊狀態(tài)欄左側(cè)標(biāo)簽選擇器的，便可選中該單元格

21、。 （2）選中多個(gè)相鄰的單元格2種方法如下： 單擊第1個(gè)單元格，然后拖動(dòng)鼠標(biāo)到最后一個(gè)單元格，即可將這組相鄰的單元格選中；,單擊第1個(gè)單元格，然后按住Shift 鍵，再單擊這組相鄰單元格的最后一個(gè)單元格，就可選中這組相鄰的單元格。 （3）選擇多個(gè)不相鄰的單元格的方法如下： 按住Ctrl 鍵，然后再分別單擊要選中的那些不相鄰的單元格，這時(shí)被單擊的單元格就可被選中。 若在按住Ctrl 鍵的同時(shí)，再次單擊選中的單元格，將取消該單元格的選擇。 （4）選擇表格行的2種方法如下： 將鼠標(biāo)指向表格的左邊框線，當(dāng)光標(biāo)變?yōu)?時(shí)單擊鼠標(biāo)，可選中該行，此時(shí)如果拖動(dòng)鼠標(biāo)可同時(shí)選擇多行； 先單擊某行的單元格，然后單擊狀

22、態(tài)欄左側(cè)標(biāo)簽選擇器的，便可選中該行。,（5）選擇表格列的方法如下： 將鼠標(biāo)指向表格的上邊框線，當(dāng)光標(biāo)變?yōu)?時(shí)單擊鼠標(biāo)，可選中該列，此時(shí)如果拖動(dòng)鼠標(biāo)可同時(shí)選擇多列。 2選擇表格 選擇整個(gè)表格有4種方法： （1）先單擊某個(gè)單元格，然后單擊狀態(tài)欄左側(cè)標(biāo)簽選擇器的，便可選中該表格。 （2）先單擊表格中某一單元格，然后選擇【修改】|【表格】|【選擇表格】命令，也可選中整個(gè)表格。 （3）先單擊表格中某一單元格，按兩次Ctrl + A，也可選中整個(gè)表格。 （4）單擊表格的右邊框線或下邊框線，可選中整個(gè)表格。,13.4.4表格的嵌套 在Dreamweaver 8.0中，對于表格的嵌套沒有特別的限制，表格完全可

23、以像文本和圖像一樣直接插入到其它表格的單元格中，然后通過對單元格的拆分和合并等編輯操作，完成更復(fù)雜表格的嵌套操作。 嵌套的表格往往用作頁面布局，它起到了頁面元素定位的作用，此時(shí)表格邊框線的寬度應(yīng)該設(shè)為0，否則將會(huì)影響頁面的美觀。 將光標(biāo)插入當(dāng)前表格的某個(gè)單元格內(nèi)，然后可選擇【插入】|【表格】命令，在【表格】對話框中輸入新表格的屬性，這樣便可以在當(dāng)前單元格內(nèi)再插入一個(gè)表格，這就是表格的嵌套操作。 在網(wǎng)頁表格中理論上可以有多層嵌套，但是表格多層嵌套后會(huì)直接影響瀏覽速度，故表格嵌套層數(shù)不宜過多。,13.5表格的編輯修改與格式化 13.5.1改變表格或單元格的大小 在表格實(shí)際應(yīng)用中，往往會(huì)根據(jù)需要對表

24、格的尺寸進(jìn)行調(diào)整。修改表格尺寸的方法有兩種：一種是用鼠標(biāo)拖曳表格線或表格的活動(dòng)塊來調(diào)整表格的大小；另一種是用表格的【屬性】面板來修改表格尺寸。 1用鼠標(biāo)拖曳調(diào)整表格大小 用鼠標(biāo)拖曳調(diào)整表格大小的操作步驟如下： （1）選中整個(gè)表格； （2）表格四周被黑色邊框線和8個(gè)活動(dòng)塊框住； （3）用鼠標(biāo)對準(zhǔn)活動(dòng)塊，鼠標(biāo)變成雙向箭頭后拖曳活動(dòng)塊，就可調(diào)整表格的尺寸； （4）將鼠標(biāo)指針指向要調(diào)整的行和列的邊框線； （5）此時(shí)鼠標(biāo)指針變?yōu)?和形狀，拖曳鼠標(biāo)便可調(diào)整行高和列寬。,2用表格的【屬性】面板調(diào)整表格和單元格的行高及列寬 （1）先選中整個(gè)表格，在表格的【屬性】面板中直接修改【寬】和【高】的數(shù)值，可修改表格的

25、尺寸； （2）選中某個(gè)單元格，在表格的【屬性】面板中直接修改【寬】和【高】的數(shù)值，就可調(diào)整該單元格所在行和列的行高及列寬。 13.5.2表格行、列的增加和刪除 在網(wǎng)頁設(shè)計(jì)的過程中常常會(huì)根據(jù)需要增加和刪除表格中的行或列，這類操作可以通過表格的【屬性】面板和【修改】菜單來完成。,1.通過【屬性】面板完成增加與刪除表格的行和列 選中當(dāng)前表格，在表格的【屬性】面板的【行】和【列】文本框中記錄了當(dāng)前表格的行列數(shù)，可以通過調(diào)整其中的數(shù)值來增加和刪除表格的行數(shù)、列數(shù)，用這種方法完成表格增、刪行與列的操作都是針對表格的最下邊的行和最右邊的列而言的。 2通過【修改】菜單完成增加與刪除表格行和列 用【修改】菜單完

26、成增加與刪除表格行和列的操作方法如下。,（1）選中表格的某個(gè)單元格或?qū)⒐鈽?biāo)插入該單元格中。 （2）選擇【修改】|【表格】|【插入行】命令 或選擇【修改】|【表格】|【插入列】命令，在該單元格上邊增加一行或在該單元格左邊增加一列。 （3）選擇菜單 【修改】|【表格】|【插入行或列】命令，此時(shí)屏幕彈出【插入行或列】對話框，在對話框中設(shè)置插入行還是列，插入行、列的數(shù)量，在當(dāng)前行（列）上邊（前邊）還是下邊（后邊）插入行（列），如圖13-11所示。 （4）選中表格中的某行或列，選擇菜單【編輯】|【清除】命令，便可刪除該行或列。,（5）將光標(biāo)插入在表格的某個(gè)單元格中，選擇【修改】|【表格】|【刪除行】或【

27、修改】|【表格】|【刪除列】命令，也可刪除該行或列。 （6）將光標(biāo)插入在表格的某個(gè)單元格中，單擊鼠標(biāo)右鍵，在快捷菜單中選擇【表格】|【刪除行】或【表格】|【刪除列】命令，也可完成刪除該行或列的操作。,圖13-11 【插入行或列】對話框,13.5.3單元格的拆分和合并 在表格編輯操作過程中，還常常會(huì)根據(jù)需要對表格的某些單元格進(jìn)行拆分和合并的操作。 1單元格的合并操作 單擊表格屬性面板右下角的按鈕 ，將表格的屬性面板全部展開，選中要合并的幾個(gè)單元格，這些單元格四周會(huì)被出現(xiàn)的粗框線框住，單擊表格屬性面板左下方的合并按鈕 ，完成單元格的合并操作。,2單元格的拆分操作 單擊表格屬性面板右下角的 按鈕，將

28、面板全部展開，將光標(biāo)定位在要拆分的單元格中，單擊表格屬性面板左下方的拆分按鈕 ，此時(shí)屏幕彈出【拆分單元格】對話框，如圖13-12所示。在【拆分單元格】對話框中設(shè)定拆分方式。若要上下拆分單元格，選【行】選項(xiàng)；若要左右拆分單元格，選【列】選項(xiàng)，在【行數(shù)】或【列數(shù)】文本框中輸入拆分單元格的數(shù)值，單擊【確定】按鈕完成單元格格的拆分操作。 若單元格拆分前有內(nèi)容，單元格拆分后內(nèi)容要作相應(yīng)的調(diào)整。,圖13-12 拆分單元格對話框,圖13-12 拆分單元格對話框,13.5.4單元格的復(fù)制、粘貼、移動(dòng)和清除 網(wǎng)頁設(shè)計(jì)時(shí)文本、圖片等對象可以被復(fù)制、粘貼、移動(dòng)或清除，表格中的單元格同樣也支持這些操作。在網(wǎng)頁設(shè)計(jì)時(shí)可

29、以一次復(fù)制、粘貼、移動(dòng)和清除一個(gè)或多個(gè)單元格。 單元格復(fù)制與粘貼的操作方法如下。 （1）在網(wǎng)頁編輯窗口中選中要復(fù)制的對象，按快捷鍵Ctrl + C，或者選擇【編輯】|【拷貝】命令，將對象復(fù)制到剪貼板。 （2）在網(wǎng)頁編輯窗口中選中要移動(dòng)的對象，按快捷鍵Ctrl + X，或者選擇【編輯】|【剪切】命令，將對象移動(dòng)到剪貼板。,（3）單擊目標(biāo)單元格，按快捷鍵Ctrl + V，或者選擇【編輯】|【粘貼】命令，將對象復(fù)制或移動(dòng)到目標(biāo)單元格中。 （4）在編輯窗口中選中要復(fù)制的對象，按住Ctrl鍵后，可將復(fù)制的對象拖入目標(biāo)單元格，便完成了對象的復(fù)制操作。直接拖曳選中的對象到目標(biāo)單元格中就可完成對象的移動(dòng)操作。

30、 單元格內(nèi)容清除的操作方法是選中目標(biāo)單元格中要清除的對象，按Delete鍵或者選擇【編輯】| 【清除】命令可清除單元格中的內(nèi)容，但是該單元格的格式仍舊還保留著沒有被清除。,13.5.5表格的樣式化 表格樣式化是利用Dreamweaver 8.0中提供的17種預(yù)先設(shè)置好的表格格式，對頁面上當(dāng)前選中的表格進(jìn)行快速格式化。用系統(tǒng)提供的表格樣式可以統(tǒng)一網(wǎng)頁上表格的形式，簡化對表格格式化的過程。 應(yīng)用表格樣式格式化表格的操作步驟如下： （1）選中網(wǎng)頁上要套用格式的表格。 （2）選擇【命令】|【格式化表格】命令，此時(shí)屏幕彈出【格式化表格】對話框，如圖13-13所示。 （3）從列表框中選擇內(nèi)置的某種表格格式

31、，此時(shí)在對話框中右側(cè)可以看到預(yù)覽的效果。,在對話框中的參數(shù)還可以重新設(shè)置，參數(shù)的意義如下： 【行顏色】是設(shè)置表格中行的顏色方案； 在【第一種】與【第二種】是分別輸入表格行使用的第1、2種顏色； 在【交錯(cuò)】下拉式列表中，可以選擇兩種以上的顏色，在表格中交替顯示的方式； 在【第一行】區(qū)域中可分別設(shè)置表格頂行的對齊方式、字形、背景顏色和文本顏色； 在【最左列】區(qū)域中可分別設(shè)置表格左邊第一列的對齊方式和文字樣式； 在【邊框】文本框中，可以設(shè)置表格邊框線的寬度； 如果選中對話框底部的復(fù)選項(xiàng)，則該操作將屬性值全部寫在標(biāo)注中，而不寫在標(biāo)簽中。 （4）設(shè)置完成后，單擊【應(yīng)用】按鈕觀察效果。如果正確無誤，可單擊

32、【確定】按鈕確認(rèn)。,圖13-13【格式化表格】對話框,13.6布局表格和布局單元格 Dreamweaver 8.0網(wǎng)頁頁面布局有兩種工作模式，分別是【標(biāo)準(zhǔn)模式】和【布局模式】。Dreamweaver 8.0默認(rèn)的工作模式是【標(biāo)準(zhǔn)模式】，在【標(biāo)準(zhǔn)模式】模式下，用表格或嵌套表格可對網(wǎng)頁的頁面元素進(jìn)行定位。但在規(guī)劃網(wǎng)頁頁面布局時(shí)，使用【布局模式】來對網(wǎng)頁的頁面元素進(jìn)行定位更為方便。在【布局模式】中，系統(tǒng)設(shè)置了一些很方便、直觀、人性化的功能，使設(shè)計(jì)者在【布局模式】中對頁面的布局處理起來更加得心應(yīng)手。 在Dreamweaver 8.0的【插入】欄的【布局】選項(xiàng)中有【標(biāo)準(zhǔn)模式】和【布局模式】2個(gè)按鈕，單擊

33、這2個(gè)按鈕可進(jìn)行2種模式的切換，如圖13-14所示。,圖13-14切換為標(biāo)準(zhǔn)模式,13.6.1創(chuàng)建和調(diào)整布局表格與布局單元格 用【布局視圖】規(guī)劃網(wǎng)頁布局的操作步驟如下。 (1)新建一個(gè)頁面，并在【插入】面板組的【布局】選項(xiàng)卡中進(jìn)行視圖工作模式切換，如圖13-14所示。 （2）單擊【布局模式】按鈕后，系統(tǒng)顯示【從布局模式開始】對話框，對話框中顯示一些簡單的布局視圖的使用信息，如圖13-15所示。單擊【確定】按鈕便可進(jìn)入【布局模式】。 （3）單擊【布局模式】區(qū)域中的【布局表格】的按鈕 ， 將鼠標(biāo)移到網(wǎng)頁編輯窗口中，此時(shí)鼠標(biāo)指針變?yōu)?+ 字形狀，在指定位置處拖曳鼠標(biāo)，就可以在網(wǎng)頁編輯窗口中畫出布局表

34、格。在繪制布局表格的地方不能有任何文字和圖片。,圖13-15【從布局模式開始】對話框,（4）如果在同一頁面上若還需要繪制其它的布局表格，按住Ctrl鍵重復(fù)上述步驟可以連續(xù)畫多個(gè)布局表格。 （5）在布局表格中必須畫好布局單元格后才可以插入文字或圖片等對象。單擊【布局模式】區(qū)域中的【布局單元格】的按鈕 ，在布局表格中根據(jù)需要畫出多個(gè)布局單元格。 （6）在布局單元格中，可以根據(jù)頁面需要輸入文字或插入圖片等對象，如圖13-16所示。 （7）如果要調(diào)整布局表格或布局單元格的大小及其中內(nèi)容的屬性，可選中布局表格或布局單元格，并在布局表格或布局單元格的【屬性】面板中完成它們的屬性設(shè)置。,圖 13-16 網(wǎng)頁中插入布局表格和布局單元格,13.6.2標(biāo)準(zhǔn)模式和布局模式的應(yīng)用實(shí)例 例13.2 制作滿足下列要求的網(wǎng)頁，網(wǎng)頁效果如圖13-17所示。 （1）頁面的背景圖片為：bg0005.jpg； （2）在合適的位置插入圖片：bg0012.jpg 和 welcome.jpg （3）在網(wǎng)頁中輸入豎排的文字： “普羅米修斯為人們帶來了火的種子，所以我們熱愛這個(gè)嶄新的世界，為了她的光明。 現(xiàn)在我們的書也將引領(lǐng)你走進(jìn)另一個(gè)世界，為了它的絢爛。 （4）將網(wǎng)頁用exa13-2.htm為名