網(wǎng)頁制作 表格圖層行為時(shí)間軸

1、第6單元 表格、圖層、行為、時(shí)間軸課程目標(biāo)：l 掌握在網(wǎng)頁中插入表格方法l 掌握網(wǎng)頁中細(xì)線表格、立體表格等制作方法l 掌握層的使用建議學(xué)時(shí)：理論3學(xué)時(shí)，實(shí)踐3學(xué)時(shí)。6.1 表格表格在網(wǎng)頁中是一種用途非常廣泛的工具，這不僅表現(xiàn)在它可以有序地排列數(shù)據(jù)，還表現(xiàn)在它可以精確地定位文本、圖像及其他網(wǎng)頁中的元素，使這些元素的水平位置、垂直位置發(fā)生細(xì)小變化，這在網(wǎng)頁版面布局方面是非常重要的。對于網(wǎng)頁的排版布局來說，表格是不可或缺的工具。作為一名網(wǎng)頁設(shè)計(jì)人員，表格運(yùn)用得熟練與否直接影響作品外觀的好壞，因上掌握網(wǎng)頁表格是十分重要的。 表格的插入要在頁面中插入表格，可按以下步驟操作。（1）使用菜單【插入】|【表格

2、】，或常用工具欄的【表格】工具。（2）彈出【表格】對話框，如圖6-1所示。圖6-1 表格對話框行數(shù)：設(shè)置表格的行數(shù)。列數(shù)：設(shè)置表格的列數(shù)表格寬度：設(shè)置表格的寬度，可使用“像素值”為單位，也可以使用“百分比”作為單位，在嵌套表格中常使用百分比。邊框粗細(xì)：設(shè)置表格線寬度，單位是像素。單元格邊距：設(shè)置表格單元格內(nèi)部和表格線的距離。單元格間距：設(shè)置單元格之間的距離。其它可使用默認(rèn)設(shè)置，按下確定后，在頁面出現(xiàn)插入的表格，表格下方的淡綠色線條及數(shù)據(jù)為表格的寬度數(shù)據(jù)。圖6-2 插入表格示例 設(shè)置表格屬性選中表格后，屬性面板變?yōu)榱吮砀竦膶傩悦姘?，可以在屬性面板中直接設(shè)置表格的各項(xiàng)屬性。圖6-3 表格屬性面板表

3、格Id：設(shè)置表格的ID號，一般可不輸入。行、列：設(shè)置表格行數(shù)、列數(shù)。寬、高：設(shè)置表格的寬度、高度，有百分比和像素值兩種單位可選。填充、間距：填充欄用于設(shè)置單元格內(nèi)部和表格線的距離，間距欄用于設(shè)置單元格之間的距離，單位是像素。對齊：設(shè)置表格的對齊方式，有左對齊、居中對齊、右對齊、默認(rèn)方式為左對齊。邊框：設(shè)置邊框的寬度，單位是像素。類：使用CSS中定義的類（見有關(guān)CSS章節(jié)）列寬控制、行高控制按鈕組：上行包含有清除表格寬度、將寬度轉(zhuǎn)換為像素值、將寬度轉(zhuǎn)換為百分比三個(gè)按鈕。下行包含有清除表格行高、將行高轉(zhuǎn)換為像素值、將行高轉(zhuǎn)換為百分比三個(gè)按鈕。背景顏色、背景圖像：用于設(shè)置表格的背景。邊框顏色：用于設(shè)

4、置表格邊框的顏色。 設(shè)置單元格屬性當(dāng)選中表格的單元格時(shí)，有關(guān)單元格屬性設(shè)置顯示在屬性面板下方，如圖6-4所示。圖6-4 單元格屬性面板合并單元格、拆分單元格：用于合并選定的單元格或拆分單元格對齊方式：設(shè)置單元格內(nèi)的水平對齊方式（左對齊、居中對齊、右對齊）、垂直對齊方式（頂端對齊、居中對齊、底部對齊、基線對齊），默認(rèn)均為居中對齊。寬、高：設(shè)置單元格的寬度和高度。背景、背景顏色、邊框：設(shè)置所選單元格的背景顏色、背景圖像及邊框顏色。提示：在合并的表格單元格和嵌套表格，通常需要設(shè)置垂直方向?yàn)轫敹藢R方式。6.1.4 1像素細(xì)線表格的制作在Dreamweaver8中插入一個(gè)表格，盡管設(shè)置邊框?yàn)?像素，表

5、格的邊框還是顯得比較粗，看起來并不象是1像素的表格線，視覺效果不佳。為了獲得1像素細(xì)線表格效果，可以采用以下方法來制作。方法一：通過顏色來實(shí)現(xiàn)，步驟如下：按一般方法插入表格，設(shè)置間距為1像素，邊框?yàn)?像素。設(shè)置表格顏色為黑色。選定表格所有單元格，設(shè)置顏色為白色。圖6-5 細(xì)線表格效果方法二：設(shè)置style屬性的設(shè)置(1)插入表格，設(shè)置邊框?yàn)?像素。(2)切換到代碼視圖，在表格的標(biāo)簽中增加style=border-collapse:collapse，參考如下：此時(shí)，在設(shè)計(jì)視圖中仍顯示為粗線邊框，但預(yù)覽可看到細(xì)線表格。6.1.5 立體表格特效通過設(shè)置表格標(biāo)簽Table的兩個(gè)屬性borderColo

6、rDark（邊框暗影）、borderColorLight（邊框亮影），并加上適當(dāng)背景bgcolor，就可以制作出三維立體表格表格。效果1：（1）插入表格，設(shè)置邊框?yàn)?，間距為0。（2）打開代碼視圖，修改Table標(biāo)簽，增加borderColorLight、boderColorDark、bgcolor三個(gè)顏色值，參考如下：預(yù)覽，效果如圖6-6所示：圖6-6 立體表格效果一（3）將代碼改為：預(yù)覽，效果如圖6-7所示。圖6-7 立體表格效果二6.1.6 圓角表格在Dreamweaver8中并無直接的圓角表格，但在網(wǎng)頁設(shè)計(jì)中，設(shè)計(jì)者常常喜歡用一些圓角表格以獲得布局表現(xiàn)上的特別感覺。如何獲得圓角表格效果

7、，常用的方法是使用圓角的圖形來實(shí)現(xiàn)。（1）使用Photoshop等軟件，制作如圖6-8所示的四個(gè)圓角圖形。圖6-8（2）插入3行3列表格，并設(shè)邊框、邊距、間距均為0。（3）在表格四個(gè)角的單元格，分別插入1.gif、2.gif、3.gif、4.gif，并調(diào)整單元格的大小與圓角圖表一致，如圖6-9。圖6-9（4）第1行第2列、第3行第2列，均使用與圓角圖形相同的顏色進(jìn)行填充。（5）合并第2行的三個(gè)單元格。插入一個(gè)1行1列的內(nèi)嵌表格，設(shè)置邊框?yàn)?，表格線顏色與圓角相同，并調(diào)整寬度為100%，高度與外表格相同。即可得到如圖6-10所示的圓角表格。圖6-10 圓角表格效果6.1.7 本節(jié)小結(jié)在網(wǎng)頁上插入

8、表格，通過設(shè)置屬性，可以達(dá)到編輯表格的目的。通過在代碼中更進(jìn)一步的設(shè)置表格的屬性，可以增強(qiáng)表格的效果。6.2 層“層”可以比作一張透明的紙，網(wǎng)頁的元素可以畫在這張紙上，當(dāng)將多張這樣的紙重疊在一起，上層有元素的地方，就會(huì)遮住下層，下層的元素可以透過上層透明的地方顯示出來。層的上下順序通過設(shè)置“Z”軸的數(shù)值來設(shè)定，數(shù)值大的在上層，數(shù)值小的在下層。 插入層插入層，可使用布局工具欄的【繪制層】工具，在編輯的頁面“畫”出一個(gè)層，也可以使用菜單【插入】|【布局對象】|【層】。圖6-11 使用布局工具“繪制層”如果要連續(xù)繪制多個(gè)層，只需按住Ctrl鍵，就可以使用“繪制層”工具，“畫”出多個(gè)層，這在使用層進(jìn)行

9、布局時(shí)是十分有用的。 層面板執(zhí)行菜單【窗口】|【層】，顯示出層面板，如圖6-12所示。圖6-12 層面板左邊（小眼睛）為控制層的顯示/隱藏，缺省為顯示?！皬堥_眼睛”圖標(biāo)為顯示，“合上眼睛”為隱藏。單擊左列可控制眼睛的開合，達(dá)到控制層的顯示/隱藏的目的。名稱Layer1、Layer2為層的名稱，右邊顯示的是層的Z層數(shù)值。通過數(shù)值的調(diào)整可控制層重疊的順序。如圖6-13所示。圖6-13 層的Z軸數(shù)值對重疊順序的影響6.2.3 嵌套層層與層之間可以嵌套，被嵌套層稱為子層，嵌套層稱為父層。當(dāng)父層移動(dòng)時(shí)，子層隨之移動(dòng)，反之，子層的移動(dòng)不影響父層的位置。（1）插入嵌套層當(dāng)光標(biāo)位于層里面時(shí)，執(zhí)行菜單【插入】|

10、【布局對象】|【層】，則插入的新局成為嵌套層。在層面板中可看到以下嵌套關(guān)系，如圖6-14所示。圖6-14 在層面板中的嵌套關(guān)系（2）撤消嵌套關(guān)系在層面板中，將子層拖出，即可撤消嵌套關(guān)系。嵌套層的子層隨父層的位置改變，在對象定位方面有一定的用處，但建議盡量少用，因?yàn)橛行g覽器（如Netscape）不支持嵌套層。6.2.4 層的屬性設(shè)置在屬性面板中，可以直接設(shè)置層的一般層性，如層編號（名稱）、背景、可見性、溢出、剪輯等，如圖6-12所示。圖6-15 面屬性面板（1）溢出：溢出選項(xiàng)共有4個(gè)。當(dāng)層內(nèi)部的內(nèi)容過多時(shí)，進(jìn)行設(shè)置。Visuble:：使超出部分顯示。Hidden：將超出部分隱藏。Scroll：

11、無論是否超出，均顯示滾動(dòng)條Auto：自動(dòng)，當(dāng)超出時(shí)，顯示滾動(dòng)條。見圖6-16所示。圖6-16 當(dāng)圖象超出層的大小時(shí)，顯示滾動(dòng)條（2）剪輯當(dāng)層內(nèi)的對象（如圖片）尺寸大于層的大小時(shí)，使用剪輯設(shè)置其顯示的區(qū)域。 層與表格的轉(zhuǎn)換層與表格是可以相互轉(zhuǎn)換的，通過執(zhí)行菜單【修改】|【轉(zhuǎn)換】，可以選擇【層到表格】也可以選擇【表格到層】，可以實(shí)現(xiàn)表格與層的相互轉(zhuǎn)換。但層轉(zhuǎn)為表格時(shí)，必須清楚不存在有重疊、嵌套，否則轉(zhuǎn)換將無法進(jìn)行。 本節(jié)小結(jié)本節(jié)簡單介紹插入層及設(shè)置層的屬性。6.3 行為首先我們對行為做一個(gè)簡單的了解，一個(gè)行為是由一個(gè)事件觸發(fā)一個(gè)動(dòng)作組成的，因此行為由兩個(gè)基本元素構(gòu)成：事件和動(dòng)作。舉一個(gè)例子：事件是

12、訪問者對網(wǎng)頁的某個(gè)對象所做的事情，比如把鼠標(biāo)移動(dòng)到一個(gè)鏈接上，這就生一個(gè)鼠標(biāo)經(jīng)過的事件，這個(gè)事件觸發(fā)瀏覽器去執(zhí)行一段JavaSceipt代碼，這就是動(dòng)作，然后產(chǎn)生了JavaScript設(shè)計(jì)的效果，可能是顯示信息，包可能是打開窗口等，這就是行為。 行為面板執(zhí)行菜單【窗口】|【行為】或使用Shift+F4可以打開行為面板，如圖6-17所示。圖6-17 行為面板（1）窗口上方顯示行為面板對象操作按鈕，包括：顯示設(shè)置事件；僅顯示所設(shè)計(jì)的事件。顯示所有事件：顯示瀏覽器支持的所有事件添加行為：添加一個(gè)行為刪除行為：刪除選定的行為上移行為/下移行為：調(diào)整行為觸發(fā)的順序（2）面板左邊顯示頁面對象可用的動(dòng)作，根

13、據(jù)所選觸發(fā)動(dòng)作的源對象，可以包括不同的動(dòng)作，如onClick、onMouseOut等。（3）面板右邊顯示選用的動(dòng)作，如彈出信息、交換圖像等6.3.2 事件觸發(fā)行為的對象可以是文字、圖像、表格，甚至是整個(gè)頁面等，根據(jù)選定的觸發(fā)源的不同，可以有不同的事件，常用的事件有：OnLoad：當(dāng)圖像或頁面結(jié)束載入進(jìn)產(chǎn)生。OnUnload：當(dāng)訪問者離開頁面時(shí)產(chǎn)生。OnClick：當(dāng)訪問者單擊指定的元素（比如一個(gè)鏈接、按鈕或圖像地圖）時(shí)產(chǎn)生。單擊直到訪問者釋放鼠標(biāo)按鍵時(shí)才完成，只要按下onMouseDown按鈕便會(huì)令某些現(xiàn)象發(fā)生。OnDblClick：當(dāng)訪問者雙擊指定的元素時(shí)產(chǎn)生（雙擊是指向元素時(shí)迅速按下及釋放

14、鼠標(biāo)按鍵）。OnMouseDown：當(dāng)訪問者按下鼠標(biāo)按鍵時(shí)產(chǎn)生（訪問者不必釋放鼠標(biāo)按鍵以產(chǎn)生這個(gè)事件）。OnMouseMove：當(dāng)訪問者在指向一個(gè)特定元素并移動(dòng)鼠標(biāo)時(shí)產(chǎn)生（那是指光標(biāo)停留在元素的邊界以內(nèi)）。OnMouseOut：當(dāng)光標(biāo)從特定的元素（該特定元素通常是一個(gè)圖像或一個(gè)附加于圖像的鏈接）移走時(shí)產(chǎn)生。這個(gè)事件經(jīng)常被用來和“恢復(fù)交換圖像（Swap Image Restore0“動(dòng)作關(guān)聯(lián)，當(dāng)訪問者不再指向一個(gè)圖像時(shí)，把它返回到其初始狀態(tài)。OnMouseOver：當(dāng)鼠標(biāo)首次指向特定元素時(shí)產(chǎn)生（指當(dāng)光標(biāo)從不是指向該元素到指向該元素），該特定元素通常是一個(gè)鏈接。OnMouseUp：當(dāng)一個(gè)被按下的鼠

15、標(biāo)按鍵被釋放時(shí)產(chǎn)生。OnSelect：當(dāng)訪問者在一個(gè)文本區(qū)域內(nèi)選擇文本時(shí)產(chǎn)生6.3.3 動(dòng)作當(dāng)在【行為面板】上按下“+”按鈕添加行為時(shí)，彈出可選用的各種動(dòng)作，如圖6-18所示。圖6-18 行為6.3.4 行為應(yīng)用示例網(wǎng)頁菜單的制作對于較多頁面的網(wǎng)站，常使用菜單導(dǎo)航，菜單的制作方法很多，使用行為中的“顯示彈出式菜單”制作菜單是一種較簡單的方法，下面介紹使用“顯示彈出式菜單制作”網(wǎng)頁菜單的步驟。（1）新建網(wǎng)頁menu.html，插入1行7列表格（邊框線粗細(xì)0、邊距0、間距0），輸入一級菜單文字，并設(shè)置各一級菜單文字鏈接到“#”，即空鏈接。系部簡介師資力量專業(yè)介紹實(shí)訓(xùn)環(huán)境作品欣賞學(xué)子風(fēng)采網(wǎng)絡(luò)教程（2

16、）作為示例，選中“專業(yè)介紹”，在【行為】面板中，按下“+”添加“顯示彈出式菜單”行為，進(jìn)入如圖6-19所示的菜單編輯面板。圖6-19 彈出式菜單內(nèi)容選項(xiàng)面板在【內(nèi)容】選項(xiàng)中，提供有相關(guān)操作按鈕，依次為增加菜單項(xiàng)、刪除菜單項(xiàng)、左縮進(jìn)項(xiàng)、縮進(jìn)項(xiàng)、上移、下移等。在文本中逐條輸入菜單項(xiàng)文字，如“電腦藝術(shù)設(shè)計(jì)”，并設(shè)置鏈接文件及目標(biāo)。通過縮進(jìn)調(diào)整按鈕，可設(shè)置次級菜單項(xiàng)，如圖6-19中的環(huán)境藝術(shù)設(shè)計(jì)專業(yè)下分為室內(nèi)設(shè)計(jì)方向、景觀規(guī)劃設(shè)計(jì)方向等，作為“環(huán)境藝術(shù)設(shè)計(jì)”下的兩個(gè)次級菜單。 在【外觀】選項(xiàng)中，可設(shè)置菜單的放置方式“垂直菜單”/“水平菜單”，以及文字的大小、顏色等屬性。圖6-20 彈出式菜單外觀面板在

17、【高級】選項(xiàng)中，可設(shè)置邊框、單元格高度及間距等。在【位置】選項(xiàng)中，可設(shè)置彈出式菜單的具體位置。制作完畢，按下“確定”按鈕，完成一個(gè)彈出式菜單制作。（3）重復(fù)步驟（2）設(shè)置其它菜單文字對應(yīng)的二級菜單項(xiàng)。（4）如果需要修改，則打開行為面板，選中“onMouseOver|顯示彈出式菜單”行為，雙擊即可進(jìn)行修改。（5）制作完畢，預(yù)覽。效果如圖6-21所示。圖6-21 彈出式菜單示例6.3.5 本節(jié)小結(jié)本節(jié)簡單介紹了行為的使用，使用Dreamweaver88中的行為，就可以方便地完成菜單、彈出信息、檢查插件等較復(fù)雜的功能。本節(jié)著重講述了關(guān)于“行為”的定義和基本功能。我們知道行為就是由一段段JaveScr

18、ipt代碼組成的，它主要是為更好地控制其他網(wǎng)頁中的元素而設(shè)置的，因此嚴(yán)格來說，行為不是網(wǎng)頁中的元素。Dreamweaver8提供了22種行為動(dòng)作，對于普通使用者來說已經(jīng)足夠了，當(dāng)然行為的擴(kuò)展是無限制的，只要掌握了JaveScript，就可以編寫行為了，也可以從Dreamweave的官方網(wǎng)站中獲得。6.4 時(shí)間軸在瀏覽網(wǎng)頁時(shí)，常常會(huì)看到有些小廣告在頁面上隨意游動(dòng)，這是如何實(shí)現(xiàn)的呢？將浮動(dòng)的廣告作為一個(gè)層，然后通過時(shí)間軸來控制其游動(dòng)路線，就是一個(gè)十分簡單的方法，這種方法創(chuàng)建的動(dòng)畫又稱為時(shí)間軸動(dòng)畫。這種動(dòng)畫是如何實(shí)現(xiàn)的呢？與電影的原理是一樣的，電影是通過連續(xù)放映不同的圖像，從而在人的眼中加以看到運(yùn)動(dòng)

19、的畫面。時(shí)間軸動(dòng)畫就是通過時(shí)間的變化而不斷改變層的位置所產(chǎn)生的動(dòng)畫效果。 時(shí)間軸面板要了解時(shí)間軸的使用，首先認(rèn)識一下時(shí)間軸面板。執(zhí)行菜單【窗口】|【時(shí)間軸】，即可將時(shí)間軸面板顯示出來，為了方便起見，我們先建立一個(gè)圖層，然后拖動(dòng)圖層的“選擇柄”到時(shí)間軸上，結(jié)果如圖6-22所示。圖6-22 時(shí)間軸面板下面介紹時(shí)間軸面板各控件的功能： 播放開始：顯示當(dāng)前頁面上的層是時(shí)間軸的哪一幀開始播放。 時(shí)間軸下拉菜單：指定當(dāng)前顯示在“時(shí)間軸”面板中的是文檔的哪一條時(shí)間軸。 動(dòng)畫條：顯示每個(gè)對象的動(dòng)畫持續(xù)時(shí)間。一行可包含多個(gè)代表不同對象的動(dòng)畫條，不同的動(dòng)畫條不能控制同一幀中同一對象。 當(dāng)前幀：表示當(dāng)前幀的序列號。

20、 播放速度：即每秒鐘播放的幀數(shù)來控制動(dòng)畫的持續(xù)時(shí)間，通常的默認(rèn)設(shè)置是每秒鐘播放15幀，這對于運(yùn)行在Window系統(tǒng)上的大多數(shù)瀏覽器是一個(gè)較好的平均速率。速率并不是越快越好，太快的速率不一定能提高性能瀏覽器總是播放動(dòng)畫的每一幀，即使它們不能達(dá)到用戶系統(tǒng)上指定的幀速率，高于瀏覽器可管理速率的幀速率將被忽略。 自動(dòng)播放：選中后，在瀏覽器打開該頁面，動(dòng)畫就自動(dòng)播放。 循環(huán)播放：選中后在瀏覽器中會(huì)無限循環(huán)播放，在行為通道中可以看到循環(huán)的標(biāo)簽，雙擊標(biāo)簽可以修改行為的參數(shù)和循環(huán)次數(shù)。6.4.2 創(chuàng)建浮動(dòng)廣告要?jiǎng)?chuàng)建一個(gè)時(shí)間軸動(dòng)畫，第一步就是在頁面中插入一個(gè)層；第二步在層中插入圖像、文字或動(dòng)畫（GIF動(dòng)畫、Fl

21、ash動(dòng)畫）；第三步使用時(shí)間軸窗口改變層的位置，創(chuàng)建時(shí)間軸動(dòng)畫。其詳細(xì)步驟如下：（1）在網(wǎng)頁編輯窗口插入一個(gè)層，并在層中插入一幅圖片、文字或動(dòng)畫，并設(shè)置相應(yīng)的鏈接，如圖6-23所示。圖6-23 圖層（2）執(zhí)行菜單【窗口】|【時(shí)間軸】，顯示出【時(shí)間軸】面板（3）拖動(dòng)圖層左上角的選擇柄到時(shí)間軸第1行第1幀上，結(jié)果在時(shí)間軸上形成了動(dòng)畫條，共有15幀。（4）在時(shí)間軸面板上拖動(dòng)動(dòng)畫條的結(jié)束幀至60幀位置。按缺省的15Fps的速度，則共有4秒鐘的動(dòng)畫。（5）在時(shí)間軸面板第1幀是單擊，然后在網(wǎng)頁上拖動(dòng)圖層到設(shè)定的初始位置。（6）在時(shí)間軸面板最后一幀（即60幀）上單擊，然后在網(wǎng)頁上拖動(dòng)圖層到設(shè)定的結(jié)束位置?？煽吹皆诰W(wǎng)頁上形成一條從初始位置到結(jié)束位置的直線，表示此時(shí)圖層將作直線運(yùn)動(dòng)。（7）在時(shí)間軸面板的第10幀位置右擊，在彈出的菜單中選擇“增加關(guān)鍵幀”，然后在網(wǎng)頁上拖動(dòng)圖層到另一個(gè)位置，可看到原來的直線軌跡發(fā)生了變化。如圖6-24所示。圖6-24 增加了關(guān)鍵幀的圖層軌跡（8）根據(jù)需要可重復(fù)步驟（7）分別在第20、30、40、50幀位置增加關(guān)鍵幀，并改變圖層的位置，