《DW網(wǎng)頁布局(表格、布局表格).ppt》由會員分享，可在線閱讀，更多相關(guān)《DW網(wǎng)頁布局(表格、布局表格).ppt（30頁珍藏版）》請?jiān)谘b配圖網(wǎng)上搜索。

1、第4章 構(gòu)建網(wǎng)頁布局,使用表格 使用布局表格,4.1 使用表格,所謂表格就是由一個或多個單元格構(gòu)成的集合，表格中橫向的多個單元格稱為行，垂直的多個單元格稱為列。行與列的交叉區(qū)域稱為單元格，網(wǎng)頁中的元素通常都被放置在這些單元格中，以使其“各安其位”。,此處表示未明確設(shè)置單元格的寬度,此處顯示了表格的寬度。如果只顯示一個“”符號，表示未明確設(shè)置表格寬度,4.1.1 創(chuàng)建表格,在Dreamweaver中創(chuàng)建表格的方法非常簡單。確定插入點(diǎn)后，單擊“常用”插入欄中的“表格”按鈕，打開“表格”對話框，設(shè)置各項(xiàng)參數(shù)后，單擊“確定”按鈕，即可插入表格。,4.1.2 選擇表格和單元格,在Dreamweaver中

2、選擇表格的方法非常簡單，只需用鼠標(biāo)單擊表格邊框線即可。 要選擇某個單元格，可首先將插入點(diǎn)放置在該單元格內(nèi)，然后按【CtrlA】組合鍵或單擊“標(biāo)簽選擇器”中對應(yīng)的“”標(biāo)簽。 要選擇某行或某列，可將光標(biāo)置于該行左側(cè)或該列頂部，當(dāng)光標(biāo)形狀變?yōu)楹谏^ 或 時單擊鼠標(biāo)。,,,,4.1.3 設(shè)置表格和單元格的屬性,選中表格后，使用屬性面板可以修改表格的行、列、寬、高，以及填充、間距等。,,在單元格中單擊，屬性面板中將顯示相應(yīng)單元格的屬性。,,1設(shè)置表格和單元格的寬度與高度,制作網(wǎng)頁時，很多情況下都需要改變表格和單元格的寬度與高度，通過拖動邊框或在屬性面板的“寬”和“高”文本框中直接輸入數(shù)值，就可以非常方

3、便地改變表格和單元格的寬度與高度。,,,,設(shè)置表格高度,設(shè)置單元格“寬”和“高”,2為表格和單元格設(shè)置背景顏色及背景圖像,為表格和單元格設(shè)置背景顏色及背景圖像的方法相當(dāng)簡單。,,,,,,,,,,,,,,,,,,,,,將插入點(diǎn)置于單元格中,單擊“背景”文本框后的文件夾圖標(biāo),選擇文件,課堂練習(xí)1 使用表格構(gòu)建“火百合”主頁布局,在學(xué)習(xí)了表格的簡單應(yīng)用后，下面將結(jié)合表格與圖像的應(yīng)用來看一下“火百合”主頁的具體制作方法。,,,,,,課堂練習(xí)2 制作細(xì)線表格,在Dreamweaver中，有多種方法可以制作細(xì)線表格，下面我們講解一種最簡單也是最常用的方法，就是通過設(shè)置表格的間距和背景顏色來制作細(xì)線表格。,

4、,,4.1.4 合并與拆分單元格,1合并單元格,,,,,所謂合并單元格，就是將相鄰的幾個單元格合并成一個單元格。,,拖動鼠標(biāo)選中要合并的單元格,單擊“合并所選單元格，使用跨度”按鈕,2拆分單元格,,,,拆分單元格表示將一個單元格拆分成多個單元格，下面繼續(xù)在前面的文檔中操作，也就是將前面合并的單元格拆分開來，具體操作如下。,在要拆分的單元格中單擊,單擊“拆分單元格為行或列”按鈕,,打開“拆分單元格”對話框，設(shè)置各項(xiàng)參數(shù)后單擊“確定”按鈕,4.1.5 添加或刪除行和列,在使用表格布局網(wǎng)頁時，往往需要在創(chuàng)建好的表格中添加或刪除行和列。,,在要添加行或列的單元格中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“

5、表格”“插入行或列”菜單,在打開的“插入行或列”對話框中設(shè)置各項(xiàng)后單擊“確定”按鈕,4.1.6 格式化表格,在使用表格顯示數(shù)據(jù)信息時，為便于瀏覽者閱讀，往往需要為單元格設(shè)置不同的背景顏色。常用的方法如下。,,,選中表格后，選擇“命令”“格式化表格”菜單,在“格式化表格”對話框中設(shè)置各項(xiàng)后，單擊“確定”按鈕,課堂練習(xí)3 制作嵌套表格,所謂嵌套表格，就是在一個大表格的某個單元格里插入一個新的表格，我們看到的絕大多數(shù)網(wǎng)頁都是由多個表格相互嵌套進(jìn)行網(wǎng)頁布局的。 本節(jié)通過制作“l(fā)ily”網(wǎng)站中的“產(chǎn)品展示”頁面來看看嵌套表格的應(yīng)用和制作方法。,,,課堂練習(xí)4 制作圓角表格,在瀏覽網(wǎng)頁時，經(jīng)常會看到圓角表

6、格，這使得整個網(wǎng)頁看起來更加柔和、美觀。 制作圓角表格的方法有很多，下面就以制作下圖左側(cè)的表格為例，具體講解一下此類表格的制作方法。,,4.2使用布局表格布局網(wǎng)頁 4.2.1.模式簡介及注意事項(xiàng) 在dw中使用表格有以下3種模式： 標(biāo)準(zhǔn)模式：具體內(nèi)容添加和顯示的模式。 表格擴(kuò)展模式：使用表格對頁面進(jìn)行布局的模式，也是傳統(tǒng)模式。 布局模式：使用布局表格對頁面進(jìn)行布局的模式，可以在添加內(nèi)容前使用布局單元格和表格來對頁面進(jìn)行布局；也可以在布局模式中將文本、圖像和其他內(nèi)容添加到布局單元格中，這和在標(biāo)準(zhǔn)模式中一樣。 布局模式同時具有表格和層的共同性質(zhì)，繼承了層的準(zhǔn)確定位和可移動性，還繼承了表格的行列屬性。

7、,模式切換的操作方式：查看---表格模式----標(biāo)準(zhǔn)模式/布局模式/表格擴(kuò)展模式。 在不同模式下，工具欄的各個按鈕作用不同。 注意：只有在“設(shè)計(jì)”視圖中才可切換到“布局”模式。在布局模式中不能像布局表格的空白區(qū)域插入內(nèi)容，只能創(chuàng)建布局單元格，布局單元格才是承載具體內(nèi)容的容器。 4.2.2.繪制布局表格 按住ctrl鍵可以繪制多個布局表格。,4.2.3繪制布局單元格： 按住ctrl鍵拖動可以連續(xù)繪制多個布局單元格。 注意要點(diǎn)： 如果頁面已包含內(nèi)容，則只能在現(xiàn)有內(nèi)容的下方空白區(qū)繪制新的布局表格。 在一個布局表格中可創(chuàng)建多個布局單元格;布局單元格不能存在于布局表格之外;更不能在一個布局單元格中創(chuàng)建布

8、局表格。 也可以僅在準(zhǔn)備添加內(nèi)容時繪制每一個單元格。 當(dāng)繪制的布局單元格不在布局表格中，則自動創(chuàng)建一個布局表格作為該單元格的容器，這時表格與頁邊距相差8個像素。 表格不能互相重疊，可以嵌套。一個表格可以完全包含在另一個表格當(dāng)中。將插入點(diǎn)放置到一個布局表格中，即可繪制嵌套布局表格 。嵌套布局表格的大小不能超過包含它的表格。,布局表格不能添加在布局單元格中,布局單元格只能添加在布局表格中,不能在原有內(nèi)容的右側(cè)，添加布局表格了,布局表格不能互相重疊，只能嵌套,,繪制完布局表格后的代碼： 布局表格和布局單元格本質(zhì)上還是表格和單元格，只是在添加布局表格和布局單元格時dw自動添加了其它空白單元格。

9、,4.2.4設(shè)置布局表格和布局單元格的屬性和參數(shù) 1.布局表格可以設(shè)置尺寸、背景、自動伸展等屬性。 2.設(shè)置布局單元格屬性 在布局模式中，只有在布局單元格內(nèi)部插入頁面內(nèi)容。 （1）設(shè)置布局單元格的位置（移動：單擊該單元格的邊緣用鼠標(biāo)拖放；設(shè)置背景、對齊方式；清除單元格高度：選擇屬性檢查器中的“清除行高”）。 （2）設(shè)置布局單元格內(nèi)容的格式（調(diào)整大?。簩傩悦姘寤蛑苯油戏?（3）為布局單元格添加間隔圖像（需設(shè)置列自動伸展）,3.在布局模式中查看表格與單元格寬度 布局表格和單元格的寬度會出現(xiàn)在該表格的頂部或底部。寬度旁邊是表格標(biāo)題菜單與列標(biāo)題菜單的箭頭。使用菜單可以快速訪問一些常用命令。 有時可能不

10、出現(xiàn)列寬；可能會看到以下任何一種情況： （1）無寬度：如果您未看到表格的寬度或列的寬度，則說明沒有在 HTML 代碼中指定該表格或列的寬度。 （2）波浪線：出現(xiàn)波浪線表示這種列是置為自動伸展的列。 （3）雙線：包含間隔圖像的列在列寬周圍具有雙線。該列可能稍有移位，頂部或底部會顯示雙線以表明它包含一個間隔圖像。,（4）兩個數(shù)字：當(dāng)拖動表格的右下角來調(diào)整表格的大小，或者添加到單元格中的內(nèi)容比該單元格的設(shè)置寬度大時，會出現(xiàn)這種情況。如果出現(xiàn)兩個數(shù)，則說明“設(shè)計(jì)”視圖中顯示的可視寬度與 HTML 代碼中指定的寬度不一致。 例如，如果您將某列的寬度設(shè)置為 200 像素，而添加的內(nèi)容將寬度延長為 250

11、像素，則該列的頂部將顯示兩個數(shù)字：200（代碼中指定的寬度）和 (250)（帶括號，表示該列呈現(xiàn)在屏幕上的可視寬度）。,4.使用間隔圖像： 間隔圖像是不可見的、單像素的、透明 GIF圖像，用于控制自動伸展表格中的間距，以維持表格和單元格的寬度。若不在自動伸展表格中使用間隔圖像，則表格列的大小將發(fā)生改變或消失（如果表格不包括內(nèi)容）。若要將列的最小寬度限制到某一特定值，可在該列中插入一個間隔圖像。單擊列標(biāo)題菜單，然后選擇“添加間隔圖像”（也可同法 “刪除間隔圖像 ）。 5.網(wǎng)格線：從任何新布局單元格的邊緣向外延伸到包含該單元格的布局表格的邊緣，這些線可以方便將新單元格和以前的單元格對齊，并顯現(xiàn)基礎(chǔ)

12、 HTML 表格的結(jié)構(gòu)。Dreamweaver 網(wǎng)格已設(shè)置，并且這種網(wǎng)格不會根據(jù)單元格的位置發(fā)生更改，因此可以用它來設(shè)計(jì)頁面的布局。,6.固定寬度列 ：具有特定的寬度值。 7.自動伸展列 ：就是表格可以按照屏幕比例來自動調(diào)整寬度，相當(dāng)于將表格的寬度定義為百分比；如果布局中包括自動伸展列，則該布局會始終填充訪問者瀏覽器窗口的整個寬度。常見的布局是讓頁上包含主要內(nèi)容的列自動伸展，這會將所有其它列自動設(shè)置為固定寬度。例如，假設(shè)您的布局在頁的左邊有一個較寬的圖像，在右邊有一列文本。您可能將左邊的列設(shè)置為固定寬度，讓側(cè)欄區(qū)域自動伸展。 8.設(shè)置“布局”模式的首選參數(shù)，打開對話框首選參數(shù)，然后從左側(cè)的類別

13、列表中選擇“布局模式”。 在其中可以設(shè)置自動插入間隔圖像 、單元格外框、單元格高亮、表格外框、表格背景 。,8.設(shè)置布局表格屬性 固定、自動伸展、調(diào)整大小 （最外面的布局表格只能調(diào)整大小，不能移動，嵌套的表格可以移動）。 移動：通過單擊表格頂部的標(biāo)簽選擇一個表格后，用鼠標(biāo)拖放。也可以使用方向鍵移動。 9.表格的格式化，可以通過屬性檢查器完成；也可以通過設(shè)計(jì)方案完成，操作方式是“命令格式化表格”。 4.2.5添加內(nèi)容 布局表格和布局單元格創(chuàng)建好后，在“布局”模式中可以將文本、圖像和其它內(nèi)容添加到布局單元格中，就像在“標(biāo)準(zhǔn)”模式中將內(nèi)容添加到表格單元格一樣。,單擊要添加內(nèi)容的單元格，然后鍵入文本或

14、插入其它內(nèi)容。不能將內(nèi)容插入至布局表格的空白（灰色）區(qū)域，因此在可以將內(nèi)容添加至表格前，必須先創(chuàng)建布局單元格。 當(dāng)添加寬度大于布局單元格的內(nèi)容時，該單元格將自動擴(kuò)展。當(dāng)單元格擴(kuò)展時，該單元格所在的列也隨之?dāng)U展，這可能會改變周圍單元格的大小。該列的列寬變?yōu)轱@示代碼中出現(xiàn)的寬度，后面的括號中是該列的可視寬度（屏幕上顯示的寬度）。,4.2.6課堂實(shí)例1用布局表格布局網(wǎng)站主頁 要設(shè)計(jì)一個精美的網(wǎng)頁，先要規(guī)劃好版式。網(wǎng)頁中最常用的版式類似于報(bào)刊，這種版式采用規(guī)范的、理性的分割方法，把網(wǎng)頁分成豎向通欄、雙欄、三欄、四欄或橫向的通欄、雙欄、三欄、四欄等。一般以豎向分欄為多，這種版式給人以和諧、理性的美。幾種分欄方式結(jié)合使用，既理性、條理，又活潑而富有彈性。,練習(xí) 使用布局表格排版網(wǎng)站首頁,在布局模式下，通過使用布局表格設(shè)計(jì)一個網(wǎng)站首頁的版式，效果如圖所示。,