第3章-表格和頁面布局.ppt_第1頁
第3章-表格和頁面布局.ppt_第2頁
第3章-表格和頁面布局.ppt_第3頁
第3章-表格和頁面布局.ppt_第4頁
第3章-表格和頁面布局.ppt_第5頁
已閱讀5頁,還剩27頁未讀, 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說明:本文檔由用戶提供并上傳,收益歸屬內(nèi)容提供方,若內(nèi)容存在侵權(quán),請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

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è)

溫馨提示

  • 1. 本站所有資源如無特殊說明,都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等,如果需要附件,請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙,網(wǎng)頁內(nèi)容里面會(huì)有圖紙預(yù)覽,若沒有圖紙預(yù)覽就沒有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫網(wǎng)僅提供信息存儲(chǔ)空間,僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理,對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯,并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容,請(qǐng)與我們聯(lián)系,我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

評(píng)論

0/150

提交評(píng)論