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

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

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

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

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

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

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

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

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

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

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

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

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

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

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