第3章 使用表格布局網(wǎng)頁(yè)課件

1、1第第3章章 使用表格布局網(wǎng)頁(yè)使用表格布局網(wǎng)頁(yè)將文本與圖像插入頁(yè)面后，就形成了最簡(jiǎn)單的網(wǎng)頁(yè)。在生成的網(wǎng)頁(yè)中，發(fā)現(xiàn)其中的文本或者圖像會(huì)隨著IE窗口的放大或者縮小發(fā)生變化，這使得網(wǎng)頁(yè)處于不穩(wěn)定狀態(tài)。要想改變這種情況，最簡(jiǎn)單的方法就是使用表格。表格不僅能夠控制網(wǎng)頁(yè)在IE窗口中的位置，還可以控制網(wǎng)頁(yè)元素在網(wǎng)頁(yè)中的顯示位置，這樣無(wú)論IE窗口如何變化，其中的網(wǎng)頁(yè)都會(huì)保持默認(rèn)的狀態(tài)。2本章知識(shí)要點(diǎn)：本章知識(shí)要點(diǎn)：創(chuàng)建表格 創(chuàng)建嵌套表格 創(chuàng)建布局表格 創(chuàng)建Spry框架33.1 表格建立表格建立 日常生活中，最常見的表格是用來顯示數(shù)據(jù)的，比如Excel中的表格。在Dreamweaver中，表格除了可以顯示數(shù)據(jù)外

2、，最主要的功能是定位與排版。這樣才能夠?qū)⑶懊娼榻B過的文本與圖像定位在網(wǎng)頁(yè)中的任何想要顯示的區(qū)域中。所以說，網(wǎng)頁(yè)設(shè)計(jì)就是從創(chuàng)建表格開始的，先學(xué)習(xí)表格的創(chuàng)建可以為后來的網(wǎng)頁(yè)設(shè)計(jì)奠定基礎(chǔ)。3.1.1 創(chuàng)建各種表格創(chuàng)建各種表格 表格在網(wǎng)頁(yè)中是用來定位與排版的，而有時(shí)一個(gè)表格無(wú)法滿足所有的要求，這時(shí)就需要運(yùn)用到嵌套表格。嵌套表格，顧名思義就是在表格中插入表格。這樣一來，由總表格負(fù)責(zé)整體的排版，由嵌套的表格負(fù)責(zé)各個(gè)子欄目的排版，并插入到總表格的相應(yīng)位置中。各司其職，互不沖突。4選項(xiàng)選項(xiàng)作用作用行數(shù)用于確定表格的行數(shù)。列數(shù)用于確定表格的列數(shù)。表格寬度以像素或者百分比為單位確定表格的寬度。邊框粗細(xì)以像素為單位

3、指定表格邊框的寬度。單元格邊距指定單元格邊框和單元格內(nèi)容之間的像素?cái)?shù)，如果不希望顯示邊框時(shí)，設(shè)置為0像素。單元格間距指定相鄰的單元格之間的像素?cái)?shù)。無(wú)對(duì)表不啟用列或行標(biāo)題，默認(rèn)情況下此項(xiàng)被選中。左側(cè)將表的第一列作為標(biāo)題列，便于為每一行輸入一個(gè)標(biāo)題。頂部將表的第一行作為標(biāo)題行，便于為每一列輸入一個(gè)標(biāo)題。兩者在表中輸入列標(biāo)題和行標(biāo)題。標(biāo)題指定在表格外顯示的標(biāo)題。對(duì)齊標(biāo)題指定表格標(biāo)題相對(duì)于表格的顯示位置，采用默認(rèn)方式。摘要用于說明表格。3.1.2 在表格中插入網(wǎng)頁(yè)元素在表格中插入網(wǎng)頁(yè)元素 為了使網(wǎng)頁(yè)中的元素能夠有序地、按照要求顯示在IE窗口中，在插入文本或者圖像之前，插入表格是最好的解決方法。在表格中

4、插入文本或者圖像的方法與直接在網(wǎng)頁(yè)中插入方法是基本相同的，只是在插入之前，將光標(biāo)放置在表格中即可。53.1.3 設(shè)置表格屬性設(shè)置表格屬性 即使在網(wǎng)頁(yè)中插入一個(gè)最簡(jiǎn)單的表格，也具有表格的幾個(gè)重要的元素，那就是表格整體、行、列和單元格。所以插入表格后，【屬性】面板中顯示的是該表格的基本屬性。6參數(shù)參數(shù)含義含義表格Id設(shè)置表格的名稱，也就是表格的Id。行/列在文本框中分別輸入表格中行和列的數(shù)目寬在文本框中輸入表格寬度，以像素為單位或按占瀏覽器窗口寬度的百分比進(jìn)行計(jì)算。填充在文本框中輸入單元格內(nèi)容和單元格邊框之間的像素?cái)?shù)。間距在文本框中輸入相鄰單元格之間的像素?cái)?shù)。對(duì)齊用于確定表格相對(duì)于同一段落中其他元

5、素（例如文本或圖像）的顯示位置。包括左對(duì)齊、右對(duì)齊和居中對(duì)齊。當(dāng)對(duì)齊方式為【默認(rèn)】時(shí)，其他內(nèi)容不顯示在表格的旁邊。邊框用于指定表格邊框的寬度（以像素為單位）。類可以將CSS規(guī)則應(yīng)用于對(duì)象。背景顏色設(shè)置表格的背景顏色。邊框顏色設(shè)置表格邊框的顏色。背景圖像為表格添加背景圖像。3.2 編輯表格編輯表格 當(dāng)創(chuàng)建的表格不符合要求時(shí)，可以通過對(duì)表格中的單元格進(jìn)行拆分與合并，或者增加與刪除表格的行或者列來完成所需的要求。在表格中還可以進(jìn)行復(fù)制、剪切、粘貼等操作，因?yàn)樗梢员Ａ粼瓎卧竦母袷健?3.2.1 選中表格元素選中表格元素 在設(shè)置表格屬性時(shí)發(fā)現(xiàn)，將光標(biāo)放置在表格中，【屬性】面板中顯示的是單元格屬性，而

6、是表格屬性，這說明選中的是單元格，而不是表格。創(chuàng)建一個(gè)表格，既包含其本身，還包含單元格、行與列元素，而這些元素的選擇方法各不相同。83.2.2 調(diào)整表格大小調(diào)整表格大小 當(dāng)選中整個(gè)表格后，在表格右下角區(qū)域顯示3個(gè)控制點(diǎn)，分別通過這3個(gè)控制點(diǎn)能夠?qū)⒈砀駲M向、縱向或者整體放大。93.2.3 合并及拆分表格元素合并及拆分表格元素 當(dāng)創(chuàng)建的表格不符合要求時(shí)，可以通過刪除或者增加表格的行與列，以及合并或者拆分單元格來實(shí)現(xiàn)。10113.2.4 復(fù)制及粘貼單元格復(fù)制及粘貼單元格 表格中的單元格就像文本、圖片能夠被復(fù)制與粘貼一樣，單元格也可以復(fù)制與粘貼，并且可以在保留單元格格式化的情況下，復(fù)制并且粘貼多個(gè)單元

7、格。表格中的單元格既可以覆蓋現(xiàn)有的單元格，也可以生成新的表格。123.3 布局表格布局表格 在使用表格布局網(wǎng)頁(yè)時(shí)發(fā)現(xiàn)，表格與單元格是有規(guī)律的創(chuàng)建。要想使用表格拼圖，必須經(jīng)過精密地計(jì)算，以及拆分或者合并單元格來實(shí)現(xiàn)。為了簡(jiǎn)化利用表格布局頁(yè)面，Dreamweaver提供了一種【布局】模式。在這種模式下使用布局工具，設(shè)計(jì)者可以輕松地在頁(yè)面中畫出布局表格以及單元格，然后對(duì)其進(jìn)行修改、移動(dòng)等。3.3.1 創(chuàng)建布局表格與單元格創(chuàng)建布局表格與單元格 要想在頁(yè)面中創(chuàng)建布局表格與單元格，確切地說應(yīng)該是繪制表格和單元格，首先要進(jìn)入【布局】模式。方法是執(zhí)行【查看】|【表格模式】|【布局模式】命令（快捷鍵AltF6）

8、，由【標(biāo)準(zhǔn)】模式切換到【布局】模式。133.3.2 布局表格與單元格屬性布局表格與單元格屬性 繪制布局表格與布局單元格后，既可以隨意設(shè)置其屬性，也可以在【屬性】面板中精確地設(shè)置其各個(gè)選項(xiàng)。14選項(xiàng)選項(xiàng)作用作用寬有【固定】和【自動(dòng)伸展】?jī)蓚€(gè)選項(xiàng)：當(dāng)選中【固定】單選按鈕時(shí)，可以直接在右側(cè)的文本框中輸入表格的寬度值。當(dāng)選中【自動(dòng)伸展】單選按鈕時(shí)，則表格的寬度可以根據(jù)插入的內(nèi)容自動(dòng)進(jìn)行調(diào)整。高在其后的文本框中輸入表格的高度。背景顏色用于設(shè)置表格的背景顏色。填充用于設(shè)置單元格內(nèi)容和邊框的距離。間距用于設(shè)置表格內(nèi)單元格之間的距離。清除行高按鈕 ：對(duì)行高進(jìn)行清除使單元格寬度一致按鈕 ：表格內(nèi)的單元格寬度自動(dòng)

9、隨著單元格的內(nèi)容寬度變化。刪除所有間隔圖像按鈕 ：清除表格中的所有間隔圖像。刪除嵌套按鈕 ：清除嵌套表格，只有當(dāng)存在嵌套表格時(shí)，該選項(xiàng)才顯示。類可以將CSS規(guī)則應(yīng)用于對(duì)象3.4 Spry框架框架 Spry框架是一個(gè)可以用來構(gòu)建更加豐富的Web頁(yè)的JavaScript和CSS庫(kù)。使用該框架，可以顯示XML數(shù)據(jù)，并創(chuàng)建用來顯示動(dòng)態(tài)數(shù)據(jù)的交互式頁(yè)面元素，而無(wú)需刷新整個(gè)頁(yè)面。以前創(chuàng)建Spry框架是通過代碼完成的，這需要有一定的JavaScript基礎(chǔ)知識(shí)的用戶使用。而Dreamweaver CS3在設(shè)計(jì)視圖中新增了創(chuàng)建Spry框架的構(gòu)件，使復(fù)雜的Spry框架建立變成了簡(jiǎn)單的可視化操作。153.4.1

10、Spry框架概念框架概念 Spry框架支持一組用標(biāo)準(zhǔn)HTML、CSS和JavaScript編寫的可重用構(gòu)件。Spry構(gòu)件是一個(gè)頁(yè)面元素，通過啟用用戶交互來提供更豐富的用戶體驗(yàn)。每一個(gè)Spry構(gòu)件均由以下幾個(gè)部分組成： 構(gòu)件結(jié)構(gòu) 用來定義構(gòu)件結(jié)構(gòu)組成的HTML代碼塊。 構(gòu)件行為 用來控制構(gòu)件如何響應(yīng)用戶啟動(dòng)事件的JavaScript。 構(gòu)件樣式 用來指定構(gòu)件外觀的CSS。163.4.2 Spry菜單欄構(gòu)件菜單欄構(gòu)件 菜單欄構(gòu)件是一組可導(dǎo)航的菜單按鈕，當(dāng)訪問者將鼠標(biāo)指向其中的某個(gè)按鈕上時(shí)，將顯示相應(yīng)的子菜單。使用菜單欄可以在緊湊的空間中顯示大量可導(dǎo)航信息，并使訪問者無(wú)需深入瀏覽即可了解網(wǎng)站中提供的

11、內(nèi)容。17選項(xiàng)選項(xiàng)作用作用菜單欄名稱默認(rèn)菜單欄名稱為MenuBar1，該名稱不能以漢字命名，可以使用字母或者數(shù)字。禁用樣式單擊該按鈕，菜單欄變成項(xiàng)目列表，并且按鈕名稱更改為【啟用樣式】。菜單欄目在【屬性】面板中包括主菜單欄目、一級(jí)菜單欄目與二級(jí)菜單欄目文本在該選項(xiàng)文本框中設(shè)置欄目名稱。鏈接該選項(xiàng)可以為菜單欄目添加鏈接文件，默認(rèn)情況下為空鏈接。單擊【瀏覽】按鈕 可以選擇鏈接文件。目標(biāo)該選項(xiàng)指定要在何處打開所鏈接的頁(yè)面。標(biāo)題該選項(xiàng)為菜單欄目提示文本3.4.3 Spry選項(xiàng)卡式面板構(gòu)件選項(xiàng)卡式面板構(gòu)件 選項(xiàng)卡式面板構(gòu)件是一組面板，用來將內(nèi)容存儲(chǔ)到緊湊空間中。訪問者可以通過單擊要訪問的面板上的選項(xiàng)卡，

12、來隱藏或者顯示在選項(xiàng)卡式面板中的內(nèi)容。當(dāng)訪問者單擊不同的選項(xiàng)卡時(shí)，構(gòu)件的面板會(huì)相應(yīng)地打開。183.4.4 Spry折疊構(gòu)件折疊構(gòu)件 Spry折疊構(gòu)件是可折疊的面板，可以將大量?jī)?nèi)容存儲(chǔ)在一個(gè)緊湊的空間中。訪問者可以通過單擊該面板上的選項(xiàng)卡來隱藏或者顯示在折疊構(gòu)件中的內(nèi)容。折疊面板分為兩種：一種是多個(gè)面板的折疊式面板構(gòu)件，一種是只有一個(gè)面板的可折疊面板構(gòu)件。193.5 課堂練習(xí)：一像素表格課堂練習(xí)：一像素表格 一像素表格的制作方法多種多樣，可以將11像素的圖像以背景圖片的形式插入到表格中，也可以直接在Dreamweaver中利用表格的屬性制作一像素表格。同樣，一像素表格可以是一像素細(xì)線效果，也可以是一像素邊框效果，為了更好的顯示效果，這里以一像素邊框?yàn)槔?03.6 課堂練習(xí)：圓角相框課堂練習(xí)：圓角相框