第四章 表格和層的應用.ppt

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

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

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

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

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

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

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

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

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

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

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

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

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

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

15、其父層上方。對于普通層而言，他的層標記依次出現在網頁編輯器窗口的左上角，而對于嵌套層來說，它的層標記將出現在父層的窗口中。 4.4.2 激活和選中層 4.4.3 調整、移動和對齊層,DREAMWEAVER,4.5 層面板的應用 層的屬性面板中的各項設置的意義如下所示： 在“層編號”中設置當前層的名稱。層名稱中不能帶有符號和漢字，也不能以數字開頭，只能是英文字母和數字 在“左”和“上”中設置曾向對于頁面或父層的左上角距離 在“寬”和“高”中指定層的高度和寬度 在Z軸中可設置當前層的前后位置（值越大越靠上）,DREAMWEAVER,在“顯示”下拉式列表中可以設置層的可見性。下拉列表中的4個選項分別

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

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

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

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

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

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

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

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

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

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