第四章 表格和層的應(yīng)用.ppt

1、第四章 表格和層的應(yīng)用 4.1 創(chuàng)建表格的基本操作 4.2 編輯表格的基本操作 4.3 頁面的布局表格和布局單元格 4.4 層的創(chuàng)建和基本操作 4.5 層面板的應(yīng)用 4.6 應(yīng)用實例,DREAMWEAVER,4.1 創(chuàng)建表格的基本操作 4.1.1 關(guān)于表格 在HTML 頁上顯示表格式數(shù)據(jù)以及對文本和圖形進行布局的強有力的工具 一行或多行組成；每行又由一個或多個單元格組成 是創(chuàng)建跨平臺、跨瀏覽器網(wǎng)頁布局的理想方案 在應(yīng)用中應(yīng)該避免表格嵌套過多，表格嵌套過多會增加頁面的下載時間,DREAMWEAVER,4.1.2 新建表格 插入一個新表格有以下兩種種方法 1. 打開“插入”菜單，選擇“表格” 2.

2、 在“插入”面板的“常用”選項卡中選擇 屬性面板中各種參數(shù)的意義 1. 表格ID編輯框中可輸入表格的名字 2. 在對齊下拉列表中可選擇對齊方式 3. 消除列的寬度設(shè)置 4. 消除行的高度設(shè)置 5. 將表格寬度的設(shè)置由百分比轉(zhuǎn)換為像素 6. 將表格寬度轉(zhuǎn)化為百分比,DREAMWEAVER,4.1.3 設(shè)置表格單元格屬性 A 合并單元格（之前要先選擇相應(yīng)的需要合并單元格） 拆分單元格，拆分為多行或多列； B 水平(Z)：單元格內(nèi)部的水平對齊方式；垂直(T)：單元格內(nèi)部的縱向?qū)R方式； C 寬(W)，高(H)：單元格的寬度與高度； D 背景(B)：單元格背景圖； E 背景顏色(G)：單元格背景顏色；

3、 F 邊框(R)：單元格邊框顏色。,DREAMWEAVER,4.1.4 HTML 中的表格格式設(shè)置優(yōu)先順序 當在“設(shè)計”視圖中對表格進行格式設(shè)置時，您可 以設(shè)置整個表格或表格中所選行、列或單元格的 屬性。如果將整個表格的某個屬性（例如背景顏 色或?qū)R）設(shè)置為一個值，而將單個單元格的屬 性設(shè)置為另一個值，則單元格格式設(shè)置優(yōu)先于行 格式設(shè)置，行格式設(shè)置又優(yōu)先于表格格式設(shè)置。 表格格式設(shè)置的優(yōu)先順序如下： 1 單元格 2 行 3 表格,DREAMWEAVER,4.1.5 在表格中導入導出外部數(shù)據(jù)文件 Dreamweaver允許直接導入外部的數(shù)據(jù)文件 外部文件應(yīng)該使用定界符（制表符、冒號、逗號、分號等

4、）分割數(shù)據(jù) 數(shù)據(jù)被導入后將被轉(zhuǎn)換成Dreamweaver格式 導入數(shù)據(jù)文件的兩種方法： 1.選擇“文件” “導入” “表格式數(shù)據(jù)”。 2.擇“插入” “表格對象” “導入表格式數(shù)據(jù)”。 Dreamweaver同樣允許將表格文件導出 導出文件也需要定界符分割數(shù)據(jù) 導出數(shù)據(jù)文件的方法,DREAMWEAVER,4.2 編輯表格的基本操作 4.2.1選擇表格元素 1.選中某個單元格的2種方法 先單擊要選擇的單元格，然后拖動鼠標到相鄰的單元格中，當被選中的單元格四周出現(xiàn)粗框線時釋放鼠標，即可選中該單元格 單擊要選中的單元格，然后單擊狀態(tài)欄左側(cè)標簽選擇器的，便可選中該單元格 2.選中多個相鄰的單元格的2種

5、方法 單擊第一個單元格，然后拖動鼠標到左后一個單元格，即可選中這組相鄰的單元格 單擊第一個單元格，然后按住Shift鍵，再單擊這組相鄰單元格的最后一個單元格即可。,DREAMWEAVER,3. 選擇多個不相鄰的單元格 按住Ctrl鍵，然后再分別單擊要選中的那些不相鄰的單元格即可。 若在按住Ctrl鍵的同時，再次單擊選中的單元格，將取消該單元格的選擇。 4. 選擇表格行的2種方法 將鼠標指向表格的左邊框線，當光標變?yōu)橐粋€箭頭時單擊鼠標，便可選中該行 先單擊某行的單元格，然后單擊狀態(tài)欄左側(cè)標簽選擇器的即可。 5. 選擇表格列的方法 將鼠標指向上邊的表格框線，當鼠標變?yōu)橐粋€向下的箭頭時單擊鼠標，便可

6、選中該列。,DREAMWEAVER,6. 選擇整個表格的4種方法 單擊表格的左上角、表格的頂邊緣或底邊緣的任何位置或者行或列的邊框。 單擊某個表格單元格，然后在“文檔”窗口左下角的標簽選擇器中選擇 標簽。 單擊某個表格單元格，然后選擇“修改” “表格” “選擇表格”。 單擊某個表格單元格，單擊表格標題菜單，然后選擇“選擇表格”。,DREAMWEAVER,4.2.2 單元格的復(fù)制、粘貼、移動和清除 可以一次復(fù)制、粘貼或刪除單個表格單元格或多個單元格，并保留單元格的格式設(shè)置。 可以在插入點或替換現(xiàn)有表格中的所選部分粘貼單元格。 若要粘貼多個表格單元格，剪貼板的內(nèi)容必須和表格的結(jié)構(gòu)或表格中將粘貼這些

7、單元格的所選部分兼容。 剪切或復(fù)制表格單元格的方法 選擇連續(xù)行中形狀為矩形的一個或多個單元格。 選擇“編輯” “剪切”或“編輯” “復(fù)制”,DREAMWEAVER,若選部分是矩形的單元格，則可以剪切或復(fù)制這些單元格。如下圖示： 若部分不是矩形的單元格，則不能剪切或復(fù)制這些單元格。如下圖示： 如果選擇了整個行或列然后選擇“編輯”“剪切”，則將從表格中刪除整個行或列（而不僅僅是單元格的內(nèi)容）。,DREAMWEAVER,粘貼表格單元格的方法 選擇要粘貼單元格的位置： 若要用您正在粘貼的單元格替換現(xiàn)有的單元格，請選擇一組與剪貼板上的單元格具有相同布局的現(xiàn)有單元格。 例如，如果您復(fù)制或剪切了一塊3 x

8、2 的單元格，則可以選擇另一塊3 x 2 的單元格通過粘貼進行替換。 若要在特定單元格上方粘貼一整行單元格，請單擊該單元格。 若要在特定單元格左側(cè)粘貼一整列單元格，請單擊該單元格。 選擇“編輯” “粘貼”。,DREAMWEAVER,刪除單元格內(nèi)容并使單元格保持原樣的方法 選擇一個或多個單元格，選部分不是完全由完整的行或列組成的。 選擇“編輯” “清除”或按Delete 鍵。 刪除包含合并單元格的行或列的方法 選擇行或列。 選擇“修改” “表格” “刪除行”或“修改” “表格” “刪除列”。 4.2.3 單元格的拆分和合并 合并單元格 選擇連續(xù)行中形狀為矩形的單元格 選擇“修改” “表格” “合

9、并單元格”,DREAMWEAVER,若所選部分是矩形的單元格，則可以合并這些單元格 若選部分不是矩形，則不能合并這些單元格 單個單元格的內(nèi)容放置在最終的合并單元格中。所選的第一個單元格的屬性將應(yīng)用于合并的單元格 拆分單元格 單擊單元格 選擇“修改” “表格” “拆分單元格” 在“拆分單元格”對話框中，指定如何拆分單元格,DREAMWEAVER,4.2.4 調(diào)整表格及表格行寬、列高的尺寸 調(diào)整表格大小 選擇該表格，并且該表格周圍出現(xiàn)選擇柄 若要在水平方向調(diào)整表格的大小，請拖動右邊的選擇柄 若要在垂直方向調(diào)整表格的大小，請拖動底部的選擇柄 若要在兩個方向調(diào)整表格的大小，請拖動右下角的選擇柄 調(diào)整列

10、和行的大小 將鼠標指針指向要調(diào)整的行和列的邊框線，拖動您想更改的行或列的邊框,DREAMWEAVER,使用屬性檢查器設(shè)置列寬或行高。首先選擇列或行，然后在屬性檢查器（“窗口” “屬性”）的“寬”文本字段中輸入列寬，或在“高”文本字段中輸入行高。 4.2.5 表格行、列的增加和刪除 添加單個行或列 單擊一個單元格 選擇“修改” “表格” “插入行”或“修改” “表格” “插入列” 添加多行或多列 單擊一個單元格 選擇“修改” “表格” “插入行或列” 選擇“行”或“列”，然后完成該對話框,DREAMWEAVER,刪除某行或列 單擊要刪除的行或列中的一個單元格，然后選擇“修改”“表格” “刪除行”

11、或“修改” “表格” “刪除列” 或者選擇完整的一行或列然后選擇“編輯” “清除”或按Delete 鍵。 4.2.6 表格的嵌套 嵌套表格是在另一個表格的單元格中的表格?？梢韵駥θ魏纹渌砀褚粯訉η短妆砀襁M行格式設(shè)置；但是，其寬度受它所在單元格的寬度的限制 在表格單元格中嵌套表格 單擊現(xiàn)有表格中的一個單元格 選擇“插入” “表格”。即會出現(xiàn)“插入表格”對話框 完成對話框，單擊“確定”,DREAMWEAVER,4.2.7 表格的樣式化 使用“表格格式設(shè)置”命令將預(yù)先設(shè)置的設(shè)計快速應(yīng)用到表格。然后，您可以選擇選項進一步自定義該設(shè)計。 注意：只有簡單的表格才能使用預(yù)先設(shè)置的設(shè)計進行格式設(shè)置。您不能使

12、用這些設(shè)計對包含合并單元格（colspan 或rowspan）、列組或任何其他表格（這些表格不是由簡單的矩形單元格網(wǎng)格組成）的表格進行格式設(shè)置。 使用預(yù)先設(shè)置的表格設(shè)計（樣式化）的方法 選擇表格 選擇“命令” “格式化表格” 按需要自定義選項 單擊“應(yīng)用”或“確定”用所選的設(shè)計對表格進行格式設(shè)置,DREAMWEAVER,4.3 頁面布局表格和布局單元格 布局表格和布局單元格是用來規(guī)劃頁面布局的工具，它們與用表格規(guī)劃頁面布局相比，有使用方便、功能強大而且靈活多變的優(yōu)勢。 用布局視圖規(guī)劃網(wǎng)頁布局的操作方法如下： 新建一個頁面，然后選擇“插入”面板里的“布局”選項卡。 選擇“布局視圖”，然后選擇“繪

13、制布局表格”圖標，此時鼠標指針變?yōu)椤?”形狀，在指定位置拖曳鼠標，就可在網(wǎng)頁編輯窗口中畫出布局表格。在畫布局表格的地方不能有任何文字或者圖片。 如果在同一頁面上還需要畫其它布局表格，按住Ctrl鍵重復(fù)上述步驟，可以連續(xù)畫多個布局表格。,DREAMWEAVER,在布局表格中必須畫好布局單元格后才能插入文字或圖片等對象。單擊“繪制布局單元格”按鈕，在布局表格中根據(jù)需要畫出多個布局單元格。 在布局單元格中，可以根據(jù)頁面需要輸入文字或插入圖片等對象。 如果要調(diào)整布局單元格的大小及其中內(nèi)容的屬性，可打開屬性面板，完成屬性的設(shè)置。,DREAMWEAVER,4.4 層的創(chuàng)建和基本操作 層是網(wǎng)頁中用來放置文本

14、、圖像、動畫、表單、插件等網(wǎng)頁元素的載體。改變層在網(wǎng)頁中的位置，便可實現(xiàn)層中元素位置的改變。利用層能夠精確對網(wǎng)頁頁面元素定位。設(shè)計者可以控制多個層的疊放次序、顯示或隱藏層。將層與時間線配合使用，可以設(shè)計出動態(tài)頁面效果。將層與行為配合使用還可以很方便的制作出滾動字幕、下拉式菜單等頁面效果。 4.4.1 插入普通層和嵌套層 在“插入”面板中選擇“布局”選項卡 選擇“標準視圖”，然后單擊“描繪層”圖表 在頁面中畫出一個層,DREAMWEAVER,將光標插入到已建好的層中，然后選擇“插入”菜單，選擇“層”命令，可在已建好的層中插入一個嵌套層。 嵌套層可稱為子層，包含嵌套層的那個層成為父層，嵌套層永遠在

15、其父層上方。對于普通層而言，他的層標記依次出現(xiàn)在網(wǎng)頁編輯器窗口的左上角，而對于嵌套層來說，它的層標記將出現(xiàn)在父層的窗口中。 4.4.2 激活和選中層 4.4.3 調(diào)整、移動和對齊層,DREAMWEAVER,4.5 層面板的應(yīng)用 層的屬性面板中的各項設(shè)置的意義如下所示： 在“層編號”中設(shè)置當前層的名稱。層名稱中不能帶有符號和漢字，也不能以數(shù)字開頭，只能是英文字母和數(shù)字 在“左”和“上”中設(shè)置曾向?qū)τ陧撁婊蚋笇拥淖笊辖蔷嚯x 在“寬”和“高”中指定層的高度和寬度 在Z軸中可設(shè)置當前層的前后位置（值越大越靠上）,DREAMWEAVER,在“顯示”下拉式列表中可以設(shè)置層的可見性。下拉列表中的4個選項分別

16、是：Default（默認狀態(tài)）、Inherit（繼承父層的可見性）、Visible（設(shè)置層為可見）、Hidden（設(shè)置層為隱藏）。 在“溢出”下拉列表中，確定當層的內(nèi)容超出層范圍是的處理方式。 在“編輯”的“上下左右”中設(shè)置層的可視區(qū)域，輸入的數(shù)值表示層可視區(qū)域與邊界之間的距離,DREAMWEAVER,4.5.2 設(shè)置層控制面板 選擇“窗口”菜單里的“其它”命令，然后選擇“層”，就會打開層控制面板 層控制面板的操作方法如下 選定某個層：只需在層面板列表中單擊該層 顯示、隱藏層：單擊層面板左邊的顯示與隱藏列，可顯示或隱藏該層 改變層的疊放次序：單擊層控制窗口的Z列，便可修改該層的層次屬性值。或者

17、用鼠標拖曳層，也可調(diào)整層的疊放次序。 創(chuàng)建和取消嵌套層 禁止層重疊,DREAMWEAVER,第一次作業(yè)： 1、Html的基本標識都有哪些？ 2、哪些Html標識不是成對出現(xiàn)的？ 3、的size屬性表示什么？ 4、Html里的表單主要有什么用途？ 5、和哪一個表示的字體更大？,DREAMWEAVER,DREAMWEAVER,第二次作業(yè)： 1、為何要定義一個站點？ 2、定義站點有哪些注意事項 3、頁面屬性都可以設(shè)置哪些頁面內(nèi)容？,第三次作業(yè)： 1、在DW中如何插入多個空格？ 2、什么是Rollover圖片? 3、創(chuàng)建超級鏈接都有哪些方法？ 4、什么是相對路經(jīng)與絕對路徑？,第四次作業(yè)： 1、表格的主

18、要作用是什么？ 2、對于向表格中導入的外部數(shù)據(jù)文件有什要求？ 3、布局表格主要是用來做什么的？它有哪些優(yōu)點？ 4、層的主要作用是什么?,DREAMWEAVER,4.6 應(yīng)用實例跑動的小貓 在例子中，單擊這個小貓，活動菜單就會跟著它出來，再單擊，菜單又回去了。 在制作這個例子之前，請把這些圖片保存到你的img目錄下。 首先建立一個新層（如何插入層），寬250，高157，Left值為0，Top值為22。,DREAMWEAVER,當前層的名字為Layer1,選img目錄下的b-bg.gif文件作為layer1層的背景，新層變成下面的樣子 接下來在這個圖層中再插入一個圖層，也就是層的嵌套。單擊對象面板

19、中的圖層圖標，并將其拖動到layer1層中，釋放鼠標。,DREAMWEAVER,調(diào)出圖層窗口。從圖層窗口中可以看到，新建的圖層layer2在layer1下，表示layer1為父圖層，layer2為子圖層 我們將layer2圖層改名為cat1，然后在圖層中插入做好的動態(tài)卡通圖cat1.gif，是一只向右行走的卡通貓。調(diào)整圖層的大小，使其剛好容納這幅圖，移動圖層，使其處于右側(cè)居中位置,DREAMWEAVER,選中cat1圖層，按下Ctrl+C鍵進行復(fù)制，在layer1圖層中單擊鼠標，將光標定位在此圖層中，再按Ctrl+V鍵進行粘貼，從圖層窗口中看到layer1圖層包含了兩個名為cat1的子圖層，將

20、第二個子圖層改名為cat2,DREAMWEAVER,選中cat2圖層，雙擊圖層中的卡通圖，彈出圖片選擇對話框，當前圖形為cat1.gif，選擇cat2.gif，cat2圖層中的圖片就變成了一個向左行走的卡通貓 接下來我們制作Timelines動畫。選擇“Windows”菜單中的“Timelines”命令，調(diào)出Timelines編輯窗口。,DREAMWEAVER,Timelines可以根據(jù)時間改變圖層及圖片的屬性，比如改變圖層的位置、尺寸、可見性等。 選中l(wèi)ayer1圖層，將其拖到“Timelines窗口”中，一個紫色的長條顯示在Timeline的第一行通道中，里面還有圖層的名字layer1,D

21、REAMWEAVER,用鼠標在紫色長條開始處單擊，此時處于Timeline第一幀處，在layer1圖層的屬性面板中，將left值改為-180pt，敲回車后，在文檔中就只能看到卡通圖了，表示在第一幀圖層處于這個位置，在第紫色長條最后點一下，看到圖層又在最初設(shè)定的位置了，表示第十五幀圖層回到原來位置,DREAMWEAVER,在“Timelines窗口”中，可以看到當前動畫名字為Timeline1，用鼠標此文本框中單擊，輸入“cat1”作為這個Timeline動畫的名字。 在“Timelines窗口”中上部的前面有B字樣那個通道第十五幀處單擊，按F8鍵調(diào)出“Behavior窗口”。點“+”按鈕，選擇

22、“Show-Hide Layers”命令,DREAMWEAVER,設(shè)置cat1層不可見，cat2層可見。意思是當cat1動畫播放到最后時，向右走的貓隱藏起來，向左走的貓出現(xiàn)。 接下來再制作一個Timeline動畫。單擊“Timelines窗口”右上角的小三角，選擇“Add Timeline”命令，一個新的Timeline出現(xiàn)了，將其重命名為cat2，把layer1圖層先右拖一下，露出選擇層的手柄，然后選擇此圖層，把它拖到Timeline中。設(shè)置第一幀時圖層的left值為0，第十五幀時圖層的left值為-180。在第十五幀添加Behavior，設(shè)置cat1層可見，cat2層不可見,DREAMWE

23、AVER,注意，Timeline1與Timeline2中的兩個停留位置必須相同，否則就會出現(xiàn)跳動的現(xiàn)象！ 接下來我們給卡通圖加上相應(yīng)的語句，以便在單擊它時開始播放動畫。,DREAMWEAVER,選取cat1圖層，選中cat1.gif圖，單擊“Behaviors”窗口中的“+”，選擇“Timeline”項中的“Go to Timeline Frame”，指定從第一幀開始播放名為“cat1”的Timeline 單擊“OK”，“Behaviors”窗口中出現(xiàn)一個“onMouseDown”事件，單擊事件名旁的向下小箭頭，將事件名改為“onClick”,DREAMWEAVER,再單擊“+”，選擇“Tim

24、eline”項中的“Play Timeline”，從下拉列表中選擇要播放的動畫，當前選項為“cat1”，點“OK”，又添加了一個“onMouseDown”事件，同樣將其改為“onClick”事件,DREAMWEAVER,這樣當瀏覽者單擊cat1.gif圖時，頁面就會播放由畫面外移入畫面內(nèi)的動畫，即名為cat1的Timeline。同樣道理，選取cat2圖層中的cat2.gif圖像，指定從第一幀開始播放名為“cat2”的Timeline，并且單擊（onClick）時開始播放這個Timeline動畫。這樣當瀏覽者單擊cat2.gif圖時，頁面就會播放由畫面內(nèi)移出到畫面外的動畫，即名為cat2的Tim

25、eline動畫 最后別忘了，設(shè)置cat2圖層為不可見。 好了，會跑的菜單做完了，啟動瀏覽器看一下,DREAMWEAVER,接下來我們制作動態(tài)菜單，所謂動態(tài)菜單，就是指網(wǎng)頁中排列著一排導航菜單，當鼠標移到其中一個菜單時，在網(wǎng)頁其他位置（本例中為右側(cè)）就會出現(xiàn)相應(yīng)的子菜單，這樣不但生動了網(wǎng)頁，而且節(jié)省了有限空間，使網(wǎng)頁充滿新意 選擇“View”菜單下的“Invisible Elements”命令，將文檔中表示層的標記隱藏。 將光標定位在Layer1圖層中，按下Shift+Enter，然后插入事先做好的內(nèi)容“我的愛好”的圖片（001.gif），再按Shift+Enter換到下一行，插入內(nèi)容為“我的收藏”的圖片（002.gif）。同樣，把其它表示導航菜單的圖片都插進來，效果就是這樣的,DREAMWEAVER,接下來制作“我的愛好”子菜單。在Layer1圖層插入一個子圖層，名為mylike，W=75pt，H=80pt，L=95pt，T=-23pt。在此圖層