網(wǎng)站設(shè)計(jì) 個(gè)人版 網(wǎng)頁布局

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

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

3、檔中拖動(dòng)鼠標(biāo)，表格的邊框?yàn)榫G色布局模式中3在表格中，繪制單元格：單擊“繪制布局單元格按鈕，在表格內(nèi)拖動(dòng)鼠標(biāo)。注意：按住Ctrl，可以連續(xù)繪制布局單元格；在布局表格內(nèi)容也可以嵌套表格；布局模式可以隨時(shí)切換為標(biāo)準(zhǔn)模式。二、表格中的網(wǎng)頁元素1.表格中的元素文本普通圖像背景圖像2.插入方法定位光標(biāo)到單元格中插入注意：表格的背景圖像需要選中整個(gè)表格，再插入三、表格和單元格屬性1.選擇表格元素1選擇單元格:單擊選擇器中的2選擇行和列通常的方法略選擇器中的標(biāo)簽：行、單元格、表格單擊或在對應(yīng)的行上拖動(dòng)鼠標(biāo)選擇行在對應(yīng)的列上的單元格中拖動(dòng)鼠標(biāo)選擇列選擇多行或多列3選擇表格鼠標(biāo)指向任意邊框上時(shí)，單擊鼠標(biāo)修改表格選

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

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