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

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

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

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

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

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

6、，具體講解一下此類表格的制作方法。,4.2使用布局表格布局網(wǎng)頁(yè) 4.2.1.模式簡(jiǎn)介及注意事項(xiàng) 在dw中使用表格有以下3種模式： 標(biāo)準(zhǔn)模式：具體內(nèi)容添加和顯示的模式。 表格擴(kuò)展模式：使用表格對(duì)頁(yè)面進(jìn)行布局的模式，也是傳統(tǒng)模式。 布局模式：使用布局表格對(duì)頁(yè)面進(jìn)行布局的模式，可以在添加內(nèi)容前使用布局單元格和表格來(lái)對(duì)頁(yè)面進(jìn)行布局；也可以在布局模式中將文本、圖像和其他內(nèi)容添加到布局單元格中，這和在標(biāo)準(zhǔn)模式中一樣。 布局模式同時(shí)具有表格和層的共同性質(zhì)，繼承了層的準(zhǔn)確定位和可移動(dòng)性，還繼承了表格的行列屬性。,模式切換的操作方式：查看-表格模式-標(biāo)準(zhǔn)模式/布局模式/表格擴(kuò)展模式。 在不同模式下，工具欄的各個(gè)

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

8、作為該單元格的容器，這時(shí)表格與頁(yè)邊距相差8個(gè)像素。 表格不能互相重疊，可以嵌套。一個(gè)表格可以完全包含在另一個(gè)表格當(dāng)中。將插入點(diǎn)放置到一個(gè)布局表格中，即可繪制嵌套布局表格 。嵌套布局表格的大小不能超過(guò)包含它的表格。,布局表格不能添加在布局單元格中,布局單元格只能添加在布局表格中,不能在原有內(nèi)容的右側(cè)，添加布局表格了,布局表格不能互相重疊，只能嵌套,繪制完布局表格后的代碼： 布局表格和布局單元格本質(zhì)上還是表格和單元格，只是在添加布局表格和布局單元格時(shí)dw自動(dòng)添加了其它空白單元格。,4.2.4設(shè)置布局表格和布局單元格的屬性和參數(shù) 1.布局表格可以設(shè)置尺寸、背景、自動(dòng)伸展等屬性。 2.設(shè)置布局單元格屬

9、性 在布局模式中，只有在布局單元格內(nèi)部插入頁(yè)面內(nèi)容。 （1）設(shè)置布局單元格的位置（移動(dòng)：?jiǎn)螕粼搯卧竦倪吘売檬髽?biāo)拖放；設(shè)置背景、對(duì)齊方式；清除單元格高度：選擇屬性檢查器中的“清除行高”）。 （2）設(shè)置布局單元格內(nèi)容的格式（調(diào)整大?。簩傩悦姘寤蛑苯油戏?（3）為布局單元格添加間隔圖像（需設(shè)置列自動(dòng)伸展）,3.在布局模式中查看表格與單元格寬度 布局表格和單元格的寬度會(huì)出現(xiàn)在該表格的頂部或底部。寬度旁邊是表格標(biāo)題菜單與列標(biāo)題菜單的箭頭。使用菜單可以快速訪問一些常用命令。 有時(shí)可能不出現(xiàn)列寬；可能會(huì)看到以下任何一種情況： （1）無(wú)寬度：如果您未看到表格的寬度或列的寬度，則說(shuō)明沒有在 HTML 代碼中指

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

11、4.使用間隔圖像： 間隔圖像是不可見的、單像素的、透明 GIF圖像，用于控制自動(dòng)伸展表格中的間距，以維持表格和單元格的寬度。若不在自動(dòng)伸展表格中使用間隔圖像，則表格列的大小將發(fā)生改變或消失（如果表格不包括內(nèi)容）。若要將列的最小寬度限制到某一特定值，可在該列中插入一個(gè)間隔圖像。單擊列標(biāo)題菜單，然后選擇“添加間隔圖像”（也可同法 “刪除間隔圖像 ）。 5.網(wǎng)格線：從任何新布局單元格的邊緣向外延伸到包含該單元格的布局表格的邊緣，這些線可以方便將新單元格和以前的單元格對(duì)齊，并顯現(xiàn)基礎(chǔ) HTML 表格的結(jié)構(gòu)。Dreamweaver 網(wǎng)格已設(shè)置，并且這種網(wǎng)格不會(huì)根據(jù)單元格的位置發(fā)生更改，因此可以用它來(lái)設(shè)計(jì)

12、頁(yè)面的布局。,6.固定寬度列 ：具有特定的寬度值。 7.自動(dòng)伸展列 ：就是表格可以按照屏幕比例來(lái)自動(dòng)調(diào)整寬度，相當(dāng)于將表格的寬度定義為百分比；如果布局中包括自動(dòng)伸展列，則該布局會(huì)始終填充訪問者瀏覽器窗口的整個(gè)寬度。常見的布局是讓頁(yè)上包含主要內(nèi)容的列自動(dòng)伸展，這會(huì)將所有其它列自動(dòng)設(shè)置為固定寬度。例如，假設(shè)您的布局在頁(yè)的左邊有一個(gè)較寬的圖像，在右邊有一列文本。您可能將左邊的列設(shè)置為固定寬度，讓側(cè)欄區(qū)域自動(dòng)伸展。 8.設(shè)置“布局”模式的首選參數(shù)，打開對(duì)話框首選參數(shù)，然后從左側(cè)的類別列表中選擇“布局模式”。 在其中可以設(shè)置自動(dòng)插入間隔圖像 、單元格外框、單元格高亮、表格外框、表格背景 。,8.設(shè)置布局

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

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