【8A文】DW網(wǎng)頁(yè)布局(表格、布局表格).ppt

《【8A文】DW網(wǎng)頁(yè)布局(表格、布局表格).ppt》由會(huì)員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在工程資料-天天文庫(kù)。

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)后，單擊“常用”插入欄中的“表格”按鈕，打開(kāi)“表格”對(duì)話框，設(shè)置各項(xiàng)參數(shù)后，單擊“確定”按鈕，即可插入表格。4.1.2選擇表格和單

2、元格在Dreamweaver中選擇表格的方法非常簡(jiǎn)單，只需用鼠標(biāo)單擊表格邊框線即可。要選擇某個(gè)單元格，可首先將插入點(diǎn)放置在該單元格內(nèi)，然后按【Ctrl＋A】組合鍵或單擊“標(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ò)拖

3、動(dòng)邊框或在屬性面板的“寬”和“高”文本框中直接輸入數(shù)值，就可以非常方便地改變表格和單元格的寬度與高度。設(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)單也是最常用的方法，就是通

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

5、列的單元格中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“表格”>“插入行或列”菜單在打開(kāi)的“插入行或列”對(duì)話框中設(shè)置各項(xiàng)后單擊“確定”按鈕4.1.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)看看嵌

6、套表格的應(yīng)用和制作方法。課堂練習(xí)4制作圓角表格在瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)常會(huì)看到圓角表格，這使得整個(gè)網(wǎng)頁(yè)看起來(lái)更加柔和、美觀。制作圓角表格的方法有很多，下面就以制作下圖左側(cè)的表格為例，具體講解一下此類表格的制作方法。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)容添加到布局單元格中

7、，這和在標(biāo)準(zhǔn)模式中一樣。布局模式同時(shí)具有表格和層的共同性質(zhì)，繼承了層的準(zhǔn)確定位和可移動(dòng)性，還繼承了表格的行列屬性。模式切換的操作方式：查看---表格模式----標(biāo)準(zhǔn)模式/布局模式/表格擴(kuò)展模式。在不同模式下，工具欄的各個(gè)按鈕作用不同。注意：只有在“設(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)容

8、，則只能在現(xiàn)有內(nèi)容的下方空白區(qū)繪制新的布局表格。在一個(gè)布局表格中可創(chuàng)建多個(gè)布局單元格;布局單元格不能存在于布局表格之外;更不能在一個(gè)布局單元格中創(chuàng)建布局表格。也可以僅在準(zhǔn)備添加內(nèi)容時(shí)繪制每一個(gè)