第3章表格和頁面布局ppt課件

《第3章表格和頁面布局ppt課件》由會員分享，可在線閱讀，更多相關《第3章表格和頁面布局ppt課件（32頁珍藏版）》請在裝配圖網上搜索。

1、第三章使用表格使用表格表格的功能v無論用于對齊數據還是在頁面上文本進行排版，表無論用于對齊數據還是在頁面上文本進行排版，表格都體現了強大的功能。它幾乎成了現在所有大型格都體現了強大的功能。它幾乎成了現在所有大型網站排版的首選布局工具。網站排版的首選布局工具。v表格與層能互相轉換。雖然層也能控制元素在頁面表格與層能互相轉換。雖然層也能控制元素在頁面中的顯示位置，但是層對老版本的瀏覽器的支持不中的顯示位置，但是層對老版本的瀏覽器的支持不是很好。所以，我們要更好的運用表格來布局。是很好。所以，我們要更好的運用表格來布局。v表格的三個基本元素：表格的三個基本元素：（1行水平線的間隔，用行水平線的間隔，

2、用定義）定義）（2列垂直線的間隔）列垂直線的間隔）（3單元格行和列的交叉元素，單元格行和列的交叉元素，用用定義）定義）創建表格v在網頁中插入表格在網頁中插入表格（1新建一個新建一個HTML文檔。文檔。（2將光標空位在需要插入表格的位置，在將光標空位在需要插入表格的位置，在“插入欄的插入欄的“常用選項卡中單擊常用選項卡中單擊“插入插入表格按鈕。（也可用菜單實現，或用快捷表格按鈕。（也可用菜單實現，或用快捷鍵鍵Ctrl+Alt+T）（3在彈出的對話框中作相關設置。在彈出的對話框中作相關設置。（4單擊確定即可。單擊確定即可。插入表格對話框v邊框邊框border）:輸入表格線的像素寬度。如果不需要顯示

3、輸入表格線的像素寬度。如果不需要顯示表格線。則輸入為表格線。則輸入為0。v單元格填充單元格填充Cell Padding）:它表示輸入單元格的內容與它表示輸入單元格的內容與單元格邊線之間的像素數。單元格的上、下、左、右都是一單元格邊線之間的像素數。單元格的上、下、左、右都是一個值。個值。v單元格間距單元格間距Cell Spacing）：它單元格之間的距離的像素）：它單元格之間的距離的像素數。數。操作表格v選擇表格及其元素選擇表格及其元素方法多種：方法多種：（1單擊表格的左上角光標呈十字型時），或單擊表格的左上角光標呈十字型時），或單擊表格右邊緣及下邊緣或單元格內邊框的平行光單擊表格右邊緣及下邊緣

4、或單元格內邊框的平行光標線單擊。標線單擊。（2在單元格中單擊，在單元格中單擊，“修改修改”“表格表格”“選中選中表格表格”。（3在狀態欄中單擊在狀態欄中單擊標簽，最常用。標簽，最常用。（4在單元格中單擊，使用兩次在單元格中單擊，使用兩次Ctrl+A。操作表格v選擇表格的行或列選擇表格的行或列（1將光標定位于行的左邊緣或列的上端，將光標定位于行的左邊緣或列的上端，出現選擇箭頭時，單擊即可。出現選擇箭頭時，單擊即可。（2也可使用拖動鼠標的方法來實現選擇多也可使用拖動鼠標的方法來實現選擇多行或多列。行或多列。v選擇單元格選擇單元格在一個單元格中單擊，按住在一個單元格中單擊，按住Shift鍵，可選擇鍵

5、，可選擇連續區域。按住連續區域。按住Ctrl鍵，可以選擇不連續的鍵，可以選擇不連續的單元格。單元格。添加或刪除行列）v添加行或列添加行或列（1要添加行，單擊要添加行，單擊“修改修改”“表格表格”“插入插入行行”。也可在右鍵的關聯菜單中選擇。（默認被插。也可在右鍵的關聯菜單中選擇。（默認被插入的行是在光標的上邊）入的行是在光標的上邊）（2同理，要添加列，只須把同理，要添加列，只須把“插入行改成插入行改成“插入列插入列”。（默認被插入的列是在光標左邊）。（默認被插入的列是在光標左邊）v要一次插入多行和多列：可以使用要一次插入多行和多列：可以使用“插入行或列插入行或列命令。命令。v小技巧：將光標定位

6、在最后一行的最后的一個單元小技巧：將光標定位在最后一行的最后的一個單元格中，按下格中，按下Tab 鍵可快速追回一行。鍵可快速追回一行。添加或刪除行列）v刪除行或列刪除行或列在需要刪除行或列的位置單擊，執行下列操在需要刪除行或列的位置單擊，執行下列操作教材中有誤，請注意?。┳鹘滩闹杏姓`，請注意?。?刪除行：刪除行：“修改修改”“表格表格”“刪除刪除行行”。（2刪除列：刪除列：“修改修改”“表格表格”“刪除刪除列列”。v小技巧：在表格選中一整行或一整列，然后小技巧：在表格選中一整行或一整列，然后按下按下Delete鍵。鍵。拆分與合并單元格v拆分單元格具體步驟：拆分單元格具體步驟：（1在要拆分的單

7、元格中單擊。在要拆分的單元格中單擊。（2）“修改修改”“表格表格”“分割單元格命令，或在屬性中分割單元格命令，或在屬性中單擊分割單元格按鈕。（左下角）（單擊分割單元格按鈕。（左下角）（3可以在彈出面板中，可以在彈出面板中，選擇選擇“行或行或“列列”，還可以是多行或多列。，還可以是多行或多列。v合并單元格具體步驟：合并單元格具體步驟：注：要合并的單元格必須是連續且是矩形。注：要合并的單元格必須是連續且是矩形。（1選中要合并的多個單元格。選中要合并的多個單元格。（2）“修改修改”“表格表格”“合并單元格命令，或在屬性面合并單元格命令，或在屬性面板中使用合并單元格按鈕。板中使用合并單元格按鈕。合并后

8、每個單元格的內容都將放在一個單元格里面。合并后每個單元格的內容都將放在一個單元格里面。表格屬性面板對表格中的數據進行排序v具體步驟：具體步驟：（1在網頁中插入表格，填入數據項目。在網頁中插入表格，填入數據項目。（2使用鼠標選擇要重新排序的表格。使用鼠標選擇要重新排序的表格。（3翻開翻開“命令菜單，選擇命令菜單，選擇“表格排序表格排序命令。打開如下對話框。命令。打開如下對話框。（4在對話設置框中，可以選擇多種排序方在對話設置框中，可以選擇多種排序方式。還可以使用二級排序。式。還可以使用二級排序。對表格中的數據進行排序v排序表格對話框對表格中的數據進行排序“排序方式排序方式”確定哪個列的值將用于對

9、表格的行進行排序。確定哪個列的值將用于對表格的行進行排序?！绊樞蝽樞颉贝_定是按字母還是按數字順序以及是以升序確定是按字母還是按數字順序以及是以升序A 到到 Z，小數字到大數字還是降序對列進行排序。，小數字到大數字還是降序對列進行排序。當列的內容是數字時，選擇當列的內容是數字時，選擇“按數字順序按數字順序”。如。如果按字母順序對一組由一位或兩位數組成的數字果按字母順序對一組由一位或兩位數組成的數字進行排序，則會將這些數字作為單詞進行排序進行排序，則會將這些數字作為單詞進行排序排序結果如排序結果如 1、10、2、20、3、30），而不是），而不是將它們作為數字進行排序排序結果如將它們作為數字進行排

10、序排序結果如 1、2、3、10、20、30）。）。對表格中的數據進行排序“再按再按”/“順序順序”確定在不同列上第二種排序方法的排序順序。在確定在不同列上第二種排序方法的排序順序。在“再按再按彈出式菜單中指定應用第二種排序方法的列，并在彈出式菜單中指定應用第二種排序方法的列，并在“順序順序彈出式菜單中指定第二種排序方法的排序順序。彈出式菜單中指定第二種排序方法的排序順序?！芭判虬谝恍信判虬谝恍小敝付ū砀竦牡谝恍袘摪ㄔ谂判蛑?。如果第一行是標題，指定表格的第一行應該包括在排序中。如果第一行是標題，不應移動，則不選擇此選項。不應移動，則不選擇此選項?！皩?THEAD 行如果存在進行排序

11、行如果存在進行排序”指定使用與指定使用與 body 行相同的條件對表格行相同的條件對表格 thead 部分如果部分如果存在中的所有行進行排序。（請注意，即使在排序后存在中的所有行進行排序。（請注意，即使在排序后 thead 行仍將保留在行仍將保留在 thead 部分中并仍顯示在表格的頂部分中并仍顯示在表格的頂部。）部。）對表格中的數據進行排序“對對 TFOOT 行如果存在進行排序行如果存在進行排序”指定使用與指定使用與 body 行相同的條件對表格行相同的條件對表格 tfoot 部分如果部分如果存在中的所有行進行排序。（請注意，即使在排序后存在中的所有行進行排序。（請注意，即使在排序后 tfo

12、ot 行仍將保留在行仍將保留在 tfoot 部分中并仍顯示在表格的底部。）部分中并仍顯示在表格的底部。）“排序的行保留排序的行保留 TR 屬性屬性”指定排序后表格行的屬性例如顏色應該保持與相同內指定排序后表格行的屬性例如顏色應該保持與相同內容的關聯。如果表格行使用兩種交替的顏色，則取消選擇容的關聯。如果表格行使用兩種交替的顏色，則取消選擇此選項以確保排序后的表格仍具有顏色交替的行。如果行此選項以確保排序后的表格仍具有顏色交替的行。如果行屬性特定于每行的內容，則選擇此選項以確保這些屬性保屬性特定于每行的內容，則選擇此選項以確保這些屬性保持與排序后表格中正確的行關聯在一起。持與排序后表格中正確的行

13、關聯在一起。本卷須知v使用交替的顏色格式化表格使用交替的顏色格式化表格如果以前使用了交替的顏色格式化表格，在重新排序后，可如果以前使用了交替的顏色格式化表格，在重新排序后，可能會發生混亂。如果不選擇能會發生混亂。如果不選擇“排序的行保留排序的行保留TR屬性復選屬性復選框，就可以避免這種情況的發生?？?，就可以避免這種情況的發生。v將第一行排序：在默認的情況下，將第一行排序：在默認的情況下，Dreamweaver不對第一不對第一行排序，如果表格中無標題行，選擇行排序，如果表格中無標題行，選擇“排序包含第一行復排序包含第一行復選框。選框。v將頭文件進行排序：在默認情況下，將頭文件進行排序：在默認情況

14、下，Dreamweaver不對頭不對頭行進行排序，如要對頭行進行排序，可選擇行進行排序，如要對頭行進行排序，可選擇“對對THEAD行行如果存在進行排序復選框。如果存在進行排序復選框。v對腳文件進行排序：在默認情況下，對腳文件進行排序：在默認情況下，Dreamweaver不對腳不對腳行進行排序，如要對腳行進行排序，可選擇行進行排序，如要對腳行進行排序，可選擇“對對TFOOT行行如果存在進行排序復選框。如果存在進行排序復選框。將表格轉化為層v網頁設計者可以調整頁面布局。如是是表格布局，網頁設計者可以調整頁面布局。如是是表格布局，調整比較麻煩，此時，我們可以將表格轉化成層，調整比較麻煩，此時，我們可

15、以將表格轉化成層，然后通過移動層來調整布局，方便又快捷。然后通過移動層來調整布局，方便又快捷。v具體步驟：具體步驟：選擇菜單選擇菜單“修改修改”“轉換轉換”“表格到層命令。表格到層命令。注：文檔中的表格被轉換成層，但空的表格單元格注：文檔中的表格被轉換成層，但空的表格單元格不會轉換。不會轉換。自動套用表格格式vDreamweaver MX中預置了多種表格設計風格，使用這些預置設計風格格式化表格，可以大大提高表格的設計效率。v具體步驟：（1選定需要格式化的表格，然后選擇菜單“命令”“格式化表格”。（2在出現的對話框中，從左邊的列表內選擇一個設計方案。右邊顯示出設計示例。格式化表格對話框第六章頁面

16、布局頁面布局簡介v由于網頁設計中進行頁面布局常用的是使用由于網頁設計中進行頁面布局常用的是使用表格。表格排版定位準確，整齊劃一，有強表格。表格排版定位準確，整齊劃一，有強烈的美感，但它比較專業，對初學者來說，烈的美感，但它比較專業，對初學者來說，要掌握好表格的使用還需很長的時間，所以要掌握好表格的使用還需很長的時間，所以DreamweaverMX為我們提供了布局視圖功為我們提供了布局視圖功能。能。v在布局視圖中，我們可以隨意的拖放布局單在布局視圖中，我們可以隨意的拖放布局單元格到所需的位置。操作起來比較簡單。元格到所需的位置。操作起來比較簡單。具體特征v在在“插入欄單擊插入欄單擊“規劃選項，它

17、有規劃選項，它有“標準視圖標準視圖和和“布局視圖兩個按鈕。布局視圖兩個按鈕。v在這里我們單擊在這里我們單擊“布局視圖按鈕，會彈出消息框。布局視圖按鈕，會彈出消息框。v注：此時只有注：此時只有“繪制布局表格和繪制布局表格和“繪制布局單元繪制布局單元格兩個按鈕可用。而格兩個按鈕可用。而“插入表格和插入表格和“描繪層描繪層將不可用。將不可用。我們單擊我們單擊“標準視圖可回到標準視圖下，但此時標準視圖可回到標準視圖下，但此時的在布局視圖中使用的表格和單元格所排的版面，的在布局視圖中使用的表格和單元格所排的版面，都將會轉化為表格。都將會轉化為表格。建立布局單元格和表格v如果在新建布局表格之前新建一個布局

18、單元格，系如果在新建布局表格之前新建一個布局單元格，系統會自動為創建一個布局表格為布局單元格來作為統會自動為創建一個布局表格為布局單元格來作為它的容器。它的容器。即布局單元格不能脫離布局表格而獨立存在。即布局單元格不能脫離布局表格而獨立存在。v要一次創建多個布局單元格，請按住要一次創建多個布局單元格，請按住Ctrl鍵不放，鍵不放，連續拖動鼠標即可。連續拖動鼠標即可。v如何取消自動吸附功能：當新建布局單元格時，如如何取消自動吸附功能：當新建布局單元格時，如果與另一個單元格的距離很近小于果與另一個單元格的距離很近小于8個像素），個像素），那這個單元格會自動吸附到另一個單元格，要取消，那這個單元格會

19、自動吸附到另一個單元格，要取消，只需在畫單元格時，按住只需在畫單元格時，按住ALT鍵即可。鍵即可。v注：單元格內不能嵌套單元格。注：單元格內不能嵌套單元格。新建布局表格v邊框顏色：在默認的狀態下，單元格邊框是藍色，邊框顏色：在默認的狀態下，單元格邊框是藍色，當鼠標放上時是紅色。當鼠標放上時是紅色。表格邊框是綠色，背景色是灰色，我們也可以在參表格邊框是綠色，背景色是灰色，我們也可以在參數設置中改變它們。數設置中改變它們。v表格可以嵌套，但嵌套表格不能超過外層表格的大表格可以嵌套，但嵌套表格不能超過外層表格的大小。小。v為了更好的對布局單元格和布局表格定位，我們可為了更好的對布局單元格和布局表格定

20、位，我們可以調用網格。以調用網格。v如果要在表格中加入元素文字，圖片等），必須如果要在表格中加入元素文字，圖片等），必須在表格中建立布局單元格，然后在單元格中輸入所在表格中建立布局單元格，然后在單元格中輸入所需元素。需元素。消除布局單元格的高度v當向布局單元格中添加內容之后，默認的單當向布局單元格中添加內容之后，默認的單元格高度很有可能與內容的高度不符，這時元格高度很有可能與內容的高度不符，這時候我們要清除單元格的高度。候我們要清除單元格的高度。v單擊布局表格的標簽或者邊框，選中要清除單擊布局表格的標簽或者邊框，選中要清除單元格高度的表格。單元格高度的表格。v單擊列頭，在彈出菜單中選擇單擊列頭

21、，在彈出菜單中選擇“清除單元格清除單元格高度命令。高度命令。設置布局單元格和表格的屬性v單擊單元格的邊框，如果出現控制句柄，表示已經單擊單元格的邊框，如果出現控制句柄，表示已經選中要設置的單元格。選中要設置的單元格。如果不好選中，可以按住如果不好選中，可以按住Ctrl鍵，再在單元格中任鍵，再在單元格中任意處單擊，便可快速選擇單元格，推薦使用。意處單擊，便可快速選擇單元格，推薦使用。v它的屬性中的它的屬性中的“寬有兩種方式。寬有兩種方式。一種為固定數值，另一種為自動伸縮?？梢岳斫鉃橐环N為固定數值，另一種為自動伸縮?？梢岳斫鉃闃藴室晥D中表格中使用像素或百分比。大家可以對標準視圖中表格中使用像素或百

22、分比。大家可以對比聯想。比聯想?！八剿健薄啊薄按怪笨梢栽O置元素的對齊方式。垂直可以設置元素的對齊方式?！安粨Q行復選框可以防止單元格中的文本自動換不換行復選框可以防止單元格中的文本自動換行。行。設置布局單元格和表格的屬性v在表格屬性中，有四個小按鈕要清楚它們的在表格屬性中，有四個小按鈕要清楚它們的功能。功能。一個是清除表格的行高；一個是清除表格的行高；一個是單元格的寬度和單元格的內容一致；一個是單元格的寬度和單元格的內容一致；一個是可移除所有分隔符圖像；一個是可移除所有分隔符圖像；一個可以清除嵌套表格，它只清除嵌套表格，一個可以清除嵌套表格，它只清除嵌套表格，而不會清除其中的內容。而不會清除

23、其中的內容。v固定寬度可以與自由伸縮寬度互相轉化。但固定寬度可以與自由伸縮寬度互相轉化。但沒多大實際意義。沒多大實際意義。設置“規劃參數v執行執行“編輯菜單的編輯菜單的“參數選擇命令參數選擇命令Ctrl+U）v選擇選擇“分類列表框中的分類列表框中的“布局視圖選項。布局視圖選項。間隔圖像v所謂間隔圖像是在自由伸縮表格中用來控制所謂間隔圖像是在自由伸縮表格中用來控制表格寬度的透明圖像，這幅圖片不會顯示在表格寬度的透明圖像，這幅圖片不會顯示在瀏覽器中，可以在列頭菜單中添加間隔圖像。瀏覽器中，可以在列頭菜單中添加間隔圖像。v注：此間隔圖像可以由注：此間隔圖像可以由DreamweaverMX自自動生成。

24、動生成。網頁屬性的兩個的重點v標題的設置標題的設置任何一個網頁文件，都要給它加上標題，一任何一個網頁文件，都要給它加上標題，一可方便瀏覽者閱讀和切換，二便于收藏。我可方便瀏覽者閱讀和切換，二便于收藏。我們一定要記住給每個文檔加上標題。們一定要記住給每個文檔加上標題。v文件頭的設置文件頭的設置文件頭的作用是為了方便搜索引擎搜索頁面，文件頭的作用是為了方便搜索引擎搜索頁面，以便達到良好的宣傳效果。關鍵字、內容提以便達到良好的宣傳效果。關鍵字、內容提示等內容都是很重要的設置。示等內容都是很重要的設置。如何設置v新建一個新建一個HTML文檔。文檔。v在編輯區內單擊右鍵或用菜單操作，快捷鍵為在編輯區內單

25、擊右鍵或用菜單操作，快捷鍵為Ctrl+J），在關聯菜單中選擇），在關聯菜單中選擇“頁面屬性頁面屬性”。v在彈出的在彈出的“頁面屬性對話框中，來進行設置。頁面屬性對話框中，來進行設置。v具體設置見詳細操作講解。具體設置見詳細操作講解。注：其中的注：其中的“跟蹤圖像選項是網頁排版的一種輔跟蹤圖像選項是網頁排版的一種輔助方式，主要用來進行圖像的對位，它只是網頁編助方式，主要用來進行圖像的對位，它只是網頁編輯有效，對輯有效，對HTML文檔不會產生任何效果。它不會文檔不會產生任何效果。它不會在瀏覽器中顯示出來。當透明度為在瀏覽器中顯示出來。當透明度為100%時，為全時，為全可見，為可見，為50%時，為半

26、透明，當為時，為半透明，當為0%時，為不可時，為不可見。見。如何設置頭元素v新建一個新建一個HTML文檔。文檔。v在在“插入欄中選擇插入欄中選擇“文件頭選項卡。文件頭選項卡。v“文件頭中共包括：文件頭中共包括：Meta來描述創作者的內容）來描述創作者的內容）關鍵字供搜索引擎搜索之用，尤為重要）關鍵字供搜索引擎搜索之用，尤為重要）說明對說明對HTML文檔的內容描述）文檔的內容描述）刷新用作大型實時變更的數據，如股票，航空刷新用作大型實時變更的數據，如股票，航空論壇等，或當主頁遷移時，為了方便瀏覽者，可論壇等，或當主頁遷移時，為了方便瀏覽者，可設置為自動跳轉到新的站點。設置為自動跳轉到新的站點。）根底設置文檔的相對位置及打開方式）根底設置文檔的相對位置及打開方式）鏈接與鏈接與CSS樣式的鏈接）樣式的鏈接）v建議大家在設置之后，在代碼視圖里觀察源代碼建議大家在設置之后，在代碼視圖里觀察源代碼的變化。有什么變化，了解它們各自的作用。）的變化。有什么變化，了解它們各自的作用。）