網(wǎng)頁的排版和布局

1、本章學(xué)習(xí)目標(biāo) 通過學(xué)習(xí)表格、框架和層等方面的知識，掌握網(wǎng)頁的排版和布局。表格通常用于以行列形式來組織文字、圖像、數(shù)字等數(shù)據(jù)，方便用戶瀏覽。為了簡化使用表格進(jìn)行頁面布局的過程，Macromedia Dreamweaver MX 2004還提供了“布局”模式。在“布局”模式中，可以使用布局表格和布局單元格來設(shè)計網(wǎng)頁?？蚣芎蛯右彩蔷W(wǎng)頁布局的工具。 3.1 頁面布局概述 所謂“網(wǎng)頁布局”，就是給將要出現(xiàn)在網(wǎng)頁中的所有元素進(jìn)行定位。 網(wǎng)頁的具體布局還與網(wǎng)頁內(nèi)容、網(wǎng)頁風(fēng)格、網(wǎng)頁大小等因素有關(guān)。 3.2 表格的應(yīng)用 321 標(biāo)準(zhǔn)模式、擴(kuò)展模式和布局模式 “標(biāo)準(zhǔn)模式”是基本按瀏覽器預(yù)覽結(jié)果來顯示網(wǎng)頁 “擴(kuò)展模

2、式”下，表格被強(qiáng)制以雙線形式顯示，方便了對表格的操作 “布局模式”中，可以在添加內(nèi)容前使用布局單元格和表格來對頁面進(jìn)行布局 3.2 表格的應(yīng)用 322 新建表格 1插入表格(新建表格) 2插入嵌入表格,即在一個已有的單元格中再插入另外一個表格 （1）如果一個單元格中的元素（如文字、數(shù)字、圖像等）比較多，為了很好安排這些元素位置，可以在該單元格中再插入一個單元格。 （2）把表格用于網(wǎng)頁布局的情況下，每個單元格都有可能安排多個元素，使用嵌入表格能使得這些元素排列整齊。3.2 表格的應(yīng)用 3）把表格用于網(wǎng)頁布局的情況下，在一個單元格需要用表格來組織數(shù)據(jù)。 3導(dǎo)入表格式數(shù)據(jù) 注意:當(dāng)導(dǎo)出表格時，將導(dǎo)出

3、整個表格，不能選擇導(dǎo)出部分表格。 4表格的HTML語言表達(dá) 表格的標(biāo)簽： 表格行： 表格列：3.2 表格的應(yīng)用 323 表格結(jié)構(gòu)的修改 1選擇表格元素 （1）在首選參數(shù)中更改高亮顏色 （2）選取表格 （3）選擇行或列 （4）選擇單元格 2添加表格的行或列 3刪除表格的行或列 4拆分和合并單元格3.2 表格的應(yīng)用 5復(fù)制和粘貼單元格 （1）選擇要粘貼單元格的位置 （2）選擇“編輯”/“粘貼” 324 設(shè)置表格屬性3.2 表格的應(yīng)用 325 設(shè)置單元格、行和列屬性 水平 垂直 寬和高 背景 背景顏色 邊框 合并單元格按鈕 拆分單元格按鈕 不換行按鈕 標(biāo)題 3.2 表格的應(yīng)用 326 表格用于布局3

4、.3 布局表格的應(yīng)用 331 繪制布局表格和布局單元格 1繪制布局表格 把表格視圖切換到“布局”模式中 在“插入”欄的“布局”類別中，單擊“繪制布局表格”按鈕，或單擊“插入”/“布局對象”/“布局表格” 2繪制布局單元格 把表格視圖切換到“布局”模式中 在“插入”欄的“布局”類別中，單擊“繪制布局單元格”按鈕，或單擊“插入”/“布局對象”/“布局單元格” 3.3 布局表格的應(yīng)用 3布局單元格與布局表格的區(qū)別 布局表格僅僅用于對網(wǎng)頁進(jìn)行布局,布局表格只是布局單元格的容器 網(wǎng)頁的內(nèi)容是添加在布局單元格中 4將內(nèi)容添加到布局單元格中 將文本添加到布局單元格 將圖像添加到布局單元格中 332 使用輔助

5、設(shè)計手段 1顯示標(biāo)尺 2顯示和編輯網(wǎng)格 3跟蹤圖像3.3 布局表格的應(yīng)用 所謂“跟蹤圖像”是在設(shè)計網(wǎng)頁之前Dreamweaver導(dǎo)入的草圖。它的作用就相當(dāng)于紅本上的文字。設(shè)計者可以根據(jù)草圖的設(shè)計進(jìn)行布局，如下圖所示。 圖3-23 導(dǎo)入跟蹤圖像并設(shè)置其透明度3.3 布局表格的應(yīng)用 跟蹤圖像與背景圖像的區(qū)別 : 在 Dreamweaver中只顯示跟蹤圖像，頁面的實(shí)際背景圖像和顏色在“文檔”窗口中是不可見的 ; 在瀏覽器中查看頁面時，背景圖像和顏色是可見的，跟蹤圖像不會被用戶下載，所以是不可見的。 333 調(diào)整布局表格和布局單元格 1調(diào)整和移動布局單元格 （1）調(diào)整布局單元格的大小以及移動它們 （2

6、）若要移動布局單元格，可執(zhí)行以下操作： 2調(diào)整和移動布局表格3.3 布局表格的應(yīng)用 334 設(shè)置布局單元格和表格的格式 （1）設(shè)置布局單元格屬性圖 3-25 布局單元格屬性面板3.3 布局表格的應(yīng)用 （2）設(shè)置布局表格屬性圖3-27 布局表格屬性面板3.3 布局表格的應(yīng)用 335 設(shè)置列寬 （1）列自動伸展 （2）將某個列設(shè)置為固定寬度 （3）列自動伸展的應(yīng)用 34 建立框架網(wǎng)頁 框架集結(jié)構(gòu)圖框架：TopFrame文件名：dFrame-1.htm框架：bottomFrame文件名：Frame-4.htm框架：leftFrame文件名：Frame-2.htm框架：mainFrame文件名：Fra

7、me-3.htm框架集(主)文件名：FrameSet.htm框架集框架集圖3-35 框架集結(jié)構(gòu)34 建立框架網(wǎng)頁 341 使用框架的優(yōu)、缺點(diǎn) 優(yōu)點(diǎn)： （1）訪問者的瀏覽器不需要為每個頁面重新加載與導(dǎo)航相關(guān)的圖形。 （2）每個框架都具有自己的滾動條（如果內(nèi)容太大，在窗口中顯示不下），因此訪問者可以獨(dú)立滾動這些框架。 （3）各個頁面之間的邏輯關(guān)系可以很好的表示出來。 缺點(diǎn)： （1）可能難以實(shí)現(xiàn)不同框架中各元素的精確圖形對齊。 （2）有些瀏覽器可能不支持框架。34 建立框架網(wǎng)頁 342 創(chuàng)建框架和框架集 1選擇預(yù)定義的框架集 （1）“新建文檔”對話框創(chuàng)建新的空框架集 （2）通過插入欄創(chuàng)建預(yù)定義的框架

8、集 2設(shè)計框架集 （1）創(chuàng)建自定義框架集 （2）刪除一個框架 （3）調(diào)整框架的大小 34 建立框架網(wǎng)頁 343 在框架中打開文檔 將插入點(diǎn)放置在框架中 選擇“文件”/“在框架中打開” 選擇要在該框架中打開的文檔，然后單擊“確定” 34 建立框架網(wǎng)頁 344 選擇框架和框架集 （1）在“框架”面板中選擇框架和框架集 在“框架”面板中單擊框架 在“設(shè)計”視圖中，按住 Alt 鍵的同時單擊框架內(nèi)部。 （2）選擇一個框架集34 建立框架網(wǎng)頁 345 保存框架和框架集文件 （1）要保存框架集文件 （2）保存框架文件 346 設(shè)置框架屬性 “框架名稱” “源文件” “滾動” “不能調(diào)整大小” “邊框” “

9、邊框顏色” “邊距寬度” “邊距高度” 圖3-39 框架的屬性面板34 建立框架網(wǎng)頁 347 設(shè)置框架集屬性 注意：框架屬性優(yōu)先于框架集屬性 屬性元素： “行列選擇范圍” “值” “單位”圖3-40 框架集屬性面板34 建立框架網(wǎng)頁 348 通過超級鏈接控制框架內(nèi)容 所謂“通過超級鏈接控制框架內(nèi)容”，其實(shí)就是指定超級鏈接的目標(biāo)屬性，使得希望鏈接的材料在指定的框架中打開 操作步驟： （1）在“設(shè)計”視圖中，選擇作為超級鏈接的對象，如文本、圖像等 （2）在屬性檢查器（“窗口”/“屬性”）的“鏈接”字段中，執(zhí)行操作 （3）在屬性檢查器的“目標(biāo)”彈出式菜單中，選擇鏈接的文檔應(yīng)在其中顯示的框架或窗口 3

10、4 建立框架網(wǎng)頁 目標(biāo)框架或窗口類型： _blank ：在新的瀏覽器窗口中打開鏈接的文檔，同時保持當(dāng)前窗口不變 _parent：在顯示鏈接的框架的父框架集中打開鏈接的文檔，同時替換整個框架集 _self：在當(dāng)前框架中打開鏈接，同時替換該框架中的內(nèi)容 _top：在當(dāng)前瀏覽器窗口中打開鏈接的文檔，同時替換所有框架 349 處理不能顯示框架的瀏覽器 Dreamweaver 允許指定在不支持框架的瀏覽器中顯示的內(nèi)容。此類內(nèi)容存儲在框架集文件中，用 noframes 標(biāo)簽括起來 35 層 351 理解層的概念 層的概念 層的使用與瀏覽器的版本 層的使用與HTML 352 在頁面中添加層 1插入層 2插入嵌套層35 層 353設(shè)置層屬性 “層 ID” “左”和“上” “寬”和“高” “Z 軸“ “可見性” “背景圖像” “背景顏色” “溢出”