1、第3章 網頁布局使用表格、布局表格、 AP元素和Sqry框架布局頁面本章綱要3.1 表格布局3.2 編輯表格3.3 AP元素3.4 Spry框架布局3.1 表格布局 利用表格可以分隔網頁頁面為幾個區域，每個區域用來顯示不同類型的信息一、創立各種表格二、表格中的網頁元素三、表格屬性四、表格標簽一、創立各種表格1.創立表格2.插入嵌套表格3.繪制布局表格與布局單元格1.創立表格翻開“表格對話框：單擊“插入|“布局選項卡中的“表格按鈕在對話框中設置各參數：行數：表格中的行列數：表格中的列表格寬度：以像素或百分比為單位以像素為單位，表格的大小是固定的，以百分比為單位，表格的寬度隨著IE窗口的改變而變化

2、單元格邊距填充:單元格中內容與邊框間的空白單元格間距：單元格與單元格間的空白無、左側、頂部、兩者、標題、對齊標題、摘要7表格的參數邊框表格外標題間距邊距行標題2.嵌套表格 嵌套表格即套在外層表格的一個單元格中的表格，可以布局不規那么頁面。光標定位在指定的單元格中插入表格方法同前注意：實際設計網頁時通常將頁面的大致版面分隔用一個總表格單位用固定，頁面中每一個版塊的布局用嵌套表格單位用百分比。應用實例網站首頁13.繪制布局表格與布局單元格布局表格即在布局模式下的表格，該種模式下創立表格的靈活性較大1切換到“布局模式：“查看|“表格模式|“布局模式2繪制：在“布局選項卡中單擊“繪制布局表格按鈕，在文

3、檔中拖動鼠標，表格的邊框為綠色布局模式中3在表格中，繪制單元格：單擊“繪制布局單元格按鈕，在表格內拖動鼠標。注意：按住Ctrl，可以連續繪制布局單元格；在布局表格內容也可以嵌套表格；布局模式可以隨時切換為標準模式。二、表格中的網頁元素1.表格中的元素文本普通圖像背景圖像2.插入方法定位光標到單元格中插入注意：表格的背景圖像需要選中整個表格，再插入三、表格和單元格屬性1.選擇表格元素1選擇單元格:單擊選擇器中的2選擇行和列通常的方法略選擇器中的標簽：行、單元格、表格單擊或在對應的行上拖動鼠標選擇行在對應的列上的單元格中拖動鼠標選擇列選擇多行或多列3選擇表格鼠標指向任意邊框上時，單擊鼠標修改表格選

4、擇表格單擊2.設置表格屬性表格ID行、列、寬、高對齊邊框、邊框顏色背景顏色、背景圖像填充：內容與單元格邊界間的距離間距：單元格間的距離3.設置行列單元格屬性水平、垂直、寬、高、背景、背景圖像、邊框不換行：單元格中輸入數據時不自動換行標題：將某一單元格設置為表頭合并單元格：單擊屬性面板中的合并單元格按鈕拆分單元格：單擊屬性面板中的拆分單元格按鈕3.設置布局表格和單元格的屬性1.設置布局表格屬性寬、高、背景顏色、填充、間距、去除行高使單元格寬度一致:一個列的寬度有兩個數字，說明 HTML 代碼中設置的列寬度與這些列在屏幕上的外觀寬度不匹配,使用該項可以調整為一致(當設置單元格邊距或間距時會出現該情

5、況)刪除所有間隔圖像:去除布局表格中所有間隔圖像刪除嵌套:刪除嵌套布局表格,但其中的內容不刪除2.設置布局單元格屬性寬、高、背景顏色、水平、垂直不換行：單元格中的文本在一行中，不自動換行自動伸展：單擊“自動伸展單行鈕，當前單元格增加自動伸展后，其左右的單元格會被擠的很小。間隔圖像:也叫做間隔GIF,是透明的圖像,用來控制自動伸展表格中的間距,即自動伸展時不讓后面的單元格的列縮小表格布局頁面的技巧設計草樣在新建頁面中插入表格插入嵌套表格插入圖像占位符設置表格及單元格屬性圖片的寬與要高一致； 4.靈活運用合并或拆分單元格設計不規那么的頁面布局；5.嵌套表格的單位要用百分比。6.整個頁面外層表格的大小可以用固定尺寸居中方式也可以用百分比瀏覽器根據窗口大小自動調整頁面的大小本卷須知：1.整個頁面不要只用一個表格，從上向下盡量使用多個表格;2.表格嵌套層次盡量要少；3.圖片最好放在表格的單元格中，單元格的寬與高與主頁頁