第3章-表格和頁面布局.ppt

1、第三章,使用表格,表格的功能,無論用于對齊數(shù)據(jù)還是在頁面上文本進行排版，表格都體現(xiàn)了強大的功能。它幾乎成了現(xiàn)在所有大型網站排版的首選布局工具。 表格與層能互相轉換。雖然層也能控制元素在頁面中的顯示位置，但是層對老版本的瀏覽器的支持不是很好。所以，我們要更好的運用表格來布局。 表格的三個基本元素：（1）行（水平線的間隔，用定義）（2）列（垂直線的間隔）（3）單元格（行和列的交叉元素， 用定義）,創(chuàng)建表格,在網頁中插入表格（1）新建一個HTML文檔。（2）將光標空位在需要插入表格的位置，在“插入”欄的“常用”選項卡中單擊“插入表格”按鈕。（也可用菜單實現(xiàn)，或用快捷鍵Ctrl+Alt+T）（3）在彈

2、出的對話框中作相關設置。（4）單擊確定即可。,插入表格對話框,邊框（border）:輸入表格線的像素寬度。如果不需要顯示表格線。則輸入為0。 單元格填充（Cell Padding）:它表示輸入單元格的內容與單元格邊線之間的像素數(shù)。單元格的上、下、左、右都是一個值。 單元格間距（Cell Spacing）：它單元格之間的距離的像素數(shù)。,操作表格,選擇表格及其元素方法多種：（1）單擊表格的左上角（光標呈十字型時），或單擊表格右邊緣及下邊緣或單元格內邊框的平行光標線單擊。（2）在單元格中單擊，“修改”“表格”“選中表格”。（3）在狀態(tài)欄中單擊標簽，最常用。（4）在單元格中單擊，使用兩次Ctrl+A。

3、,操作表格,選擇表格的行或列（1）將光標定位于行的左邊緣或列的上端，出現(xiàn)選擇箭頭時，單擊即可。（2）也可使用拖動鼠標的方法來實現(xiàn)選擇多行或多列。 選擇單元格在一個單元格中單擊，按住Shift鍵，可選擇連續(xù)區(qū)域。按住Ctrl鍵，可以選擇不連續(xù)的單元格。,添加或刪除行（列）,添加行或列（1）要添加行，單擊“修改”“表格”“插入行”。也可在右鍵的關聯(lián)菜單中選擇。（默認被插入的行是在光標的上邊）（2）同理，要添加列，只須把“插入行”改成“插入列”。（默認被插入的列是在光標左邊） 要一次插入多行和多列：可以使用“插入行或列”命令。 小技巧：將光標定位在最后一行的最后的一個單元格中，按下Tab 鍵可快速追

4、回一行。,添加或刪除行（列）,刪除行或列在需要刪除行或列的位置單擊，執(zhí)行下列操作（教材中有誤，請注意?。?）刪除行：“修改” “表格” “刪除行”。（2）刪除列：“修改” “表格” “刪除列”。 小技巧：在表格選中一整行或一整列，然后按下Delete鍵。,拆分與合并單元格,拆分單元格具體步驟：（1）在要拆分的單元格中單擊。（2）“修改”“表格”“分割單元格”命令，或在屬性中單擊分割單元格按鈕。（左下角）（3）可以在彈出面板中，選擇“行”或“列”，還可以是多行或多列。 合并單元格具體步驟：注：要合并的單元格必須是連續(xù)且是矩形。（1）選中要合并的多個單元格。（2） “修改”“表格”“合并單元格”

5、命令，或在屬性面板中使用合并單元格按鈕。合并后每個單元格的內容都將放在一個單元格里面。,表格屬性面板,對表格中的數(shù)據(jù)進行排序,具體步驟：（1）在網頁中插入表格，填入數(shù)據(jù)項目。（2）使用鼠標選擇要重新排序的表格。（3）打開“命令”菜單，選擇“表格排序”命令。打開如下對話框。（4）在對話設置框中，可以選擇多種排序方式。還可以使用二級排序。,對表格中的數(shù)據(jù)進行排序,排序表格對話框,對表格中的數(shù)據(jù)進行排序,“排序方式”確定哪個列的值將用于對表格的行進行排序。 “順序”確定是按字母還是按數(shù)字順序以及是以升序（A 到 Z，小數(shù)字到大數(shù)字）還是降序對列進行排序。當列的內容是數(shù)字時，選擇“按數(shù)字順序”。如果按

6、字母順序對一組由一位或兩位數(shù)組成的數(shù)字進行排序，則會將這些數(shù)字作為單詞進行排序（排序結果如 1、10、2、20、3、30），而不是將它們作為數(shù)字進行排序（排序結果如 1、2、3、10、20、30）。,對表格中的數(shù)據(jù)進行排序,“再按”/“順序”確定在不同列上第二種排序方法的排序順序。在“再按”彈出式菜單中指定應用第二種排序方法的列，并在“順序”彈出式菜單中指定第二種排序方法的排序順序。 “排序包含第一行”指定表格的第一行應該包括在排序中。如果第一行是標題，不應移動，則不選擇此選項。 “對 THEAD 行（如果存在）進行排序”指定使用與 body 行相同的條件對表格 thead 部分（如果存在）中

7、的所有行進行排序。（請注意，即使在排序后 thead 行仍將保留在 thead 部分中并仍顯示在表格的頂部。）,對表格中的數(shù)據(jù)進行排序,“對 TFOOT 行（如果存在）進行排序”指定使用與 body 行相同的條件對表格 tfoot 部分（如果存在）中的所有行進行排序。（請注意，即使在排序后 tfoot 行仍將保留在 tfoot 部分中并仍顯示在表格的底部。） “排序的行保留 TR 屬性”指定排序后表格行的屬性（例如顏色）應該保持與相同內容的關聯(lián)。如果表格行使用兩種交替的顏色，則取消選擇此選項以確保排序后的表格仍具有顏色交替的行。如果行屬性特定于每行的內容，則選擇此選項以確保這些屬性保持與排序后

8、表格中正確的行關聯(lián)在一起。,注意事項,使用交替的顏色格式化表格如果以前使用了交替的顏色格式化表格，在重新排序后，可能會發(fā)生混亂。如果不選擇“排序的行保留TR屬性”復選框，就可以避免這種情況的發(fā)生。 將第一行排序：在默認的情況下，Dreamweaver不對第一行排序，如果表格中無標題行，選擇“排序包含第一行”復選框。 將頭文件進行排序：在默認情況下，Dreamweaver不對頭行進行排序，如要對頭行進行排序，可選擇“對THEAD行（如果存在）進行排序”復選框。 對腳文件進行排序：在默認情況下，Dreamweaver不對腳行進行排序，如要對腳行進行排序，可選擇“對TFOOT行（如果存在）進行排序”

9、復選框。,將表格轉化為層,網頁設計者可以調整頁面布局。如是是表格布局，調整比較麻煩，此時，我們可以將表格轉化成層，然后通過移動層來調整布局，方便又快捷。 具體步驟：選擇菜單“修改”“轉換”“表格到層”命令。注：文檔中的表格被轉換成層，但空的表格單元格不會轉換。,自動套用表格格式,Dreamweaver MX中預置了多種表格設計風格，使用這些預置設計風格格式化表格，可以大大提高表格的設計效率。 具體步驟：（1）選定需要格式化的表格，然后選擇菜單“命令”“格式化表格”。（2）在出現(xiàn)的對話框中，從左邊的列表內選擇一個設計方案。右邊顯示出設計示例。,格式化表格對話框,第六章,頁面布局,簡介,由于網頁設

10、計中進行頁面布局常用的是使用表格。表格排版定位準確，整齊劃一，有強烈的美感，但它比較專業(yè)，對初學者來說，要掌握好表格的使用還需很長的時間，所以DreamweaverMX為我們提供了布局視圖功能。 在布局視圖中，我們可以隨意的拖放布局單元格到所需的位置。操作起來比較簡單。,具體特征,在“插入”欄單擊“布局”選項，它有“標準視圖”和“布局視圖”兩個按鈕。 在這里我們單擊“布局視圖”按鈕，會彈出消息框。 注：此時只有“繪制布局表格”和“繪制布局單元格”兩個按鈕可用。而“插入表格”和“描繪層”將不可用。我們單擊“標準視圖”可回到標準視圖下，但此時的在布局視圖中使用的表格和單元格所排的版面，都將會轉化為

11、表格。,建立布局單元格和表格,如果在新建布局表格之前新建一個布局單元格，系統(tǒng)會自動為創(chuàng)建一個布局表格為布局單元格來作為它的容器。即布局單元格不能脫離布局表格而獨立存在。 要一次創(chuàng)建多個布局單元格，請按住Ctrl鍵不放，連續(xù)拖動鼠標即可。 如何取消自動吸附功能：當新建布局單元格時，如果與另一個單元格的距離很近（小于8個像素），那這個單元格會自動吸附到另一個單元格，要取消，只需在畫單元格時，按住ALT鍵即可。 注：單元格內不能嵌套單元格。,新建布局表格,邊框顏色：在默認的狀態(tài)下，單元格邊框是藍色，當鼠標放上時是紅色。表格邊框是綠色，背景色是灰色，我們也可以在參數(shù)設置中改變它們。 表格可以嵌套，但嵌

12、套表格不能超過外層表格的大小。 為了更好的對布局單元格和布局表格定位，我們可以調用網格。 如果要在表格中加入元素（文字，圖片等），必須在表格中建立布局單元格，然后在單元格中輸入所需元素。,消除布局單元格的高度,當向布局單元格中添加內容之后，默認的單元格高度很有可能與內容的高度不符，這時候我們要清除單元格的高度。 單擊布局表格的標簽或者邊框，選中要清除單元格高度的表格。 單擊列頭，在彈出菜單中選擇“清除單元格高度”命令。,設置布局單元格和表格的屬性,單擊單元格的邊框，如果出現(xiàn)控制句柄，表示已經選中要設置的單元格。如果不好選中，可以按住Ctrl鍵，再在單元格中任意處單擊，便可快速選擇單元格，推薦使

13、用。 它的屬性中的“寬”有兩種方式。一種為固定數(shù)值，另一種為自動伸縮?？梢岳斫鉃闃藴室晥D中表格中使用像素或百分比。大家可以對比聯(lián)想。“水平”“垂直”可以設置元素的對齊方式?！安粨Q行”復選框可以防止單元格中的文本自動換行。,設置布局單元格和表格的屬性,在表格屬性中，有四個小按鈕要清楚它們的功能。一個是清除表格的行高；一個是單元格的寬度和單元格的內容一致；一個是可移除所有分隔符圖像；一個可以清除嵌套表格，它只清除嵌套表格，而不會清除其中的內容。 固定寬度可以與自由伸縮寬度互相轉化。但沒多大實際意義。,設置“布局”參數(shù),執(zhí)行“編輯”菜單的“參數(shù)選擇”命令（Ctrl+U） 選擇“分類”列表框中的“布局

14、視圖”選項。,間隔圖像,所謂間隔圖像是在自由伸縮表格中用來控制表格寬度的透明圖像，這幅圖片不會顯示在瀏覽器中，可以在列頭菜單中添加間隔圖像。 注：此間隔圖像可以由DreamweaverMX自動生成。,網頁屬性的兩個的重點,標題的設置任何一個網頁文件，都要給它加上標題，一可方便瀏覽者閱讀和切換，二便于收藏。我們一定要記住給每個文檔加上標題。 文件頭的設置文件頭的作用是為了方便搜索引擎搜索頁面，以便達到良好的宣傳效果。關鍵字、內容提示等內容都是很重要的設置。,如何設置,新建一個HTML文檔。 在編輯區(qū)內單擊右鍵（或用菜單操作，快捷鍵為Ctrl+J），在關聯(lián)菜單中選擇“頁面屬性”。 在彈出的“頁面屬性”對話框中，來進行設置。 具體設置見詳細操作講解。注：其中的“跟蹤圖像”選項是網頁排版的一種輔助方式，主要用來進行圖像的對位，它只是網頁編輯有效，對HTML文檔不會產生任何效果。它不會在瀏覽器中顯示出來。當透明度為100%時，為全可見，為50%時，為半透明，當為0%時，為不可見。,如何設