第7章 網(wǎng)頁的設計ppt課件

1、第七章網(wǎng)頁設計第七章網(wǎng)頁設計 內(nèi)容提要內(nèi)容提要p7.1 HTML語言介紹語言介紹 p7.2 Dreamweaver概述概述p7.3創(chuàng)建網(wǎng)頁文檔創(chuàng)建網(wǎng)頁文檔p7.4網(wǎng)頁定位技術網(wǎng)頁定位技術p7.5超鏈接超鏈接p7.6 CSS樣式樣式p7.7時間軸、事件和行為時間軸、事件和行為p7.8站點的建立和管理站點的建立和管理7.1 HTML語言介紹語言介紹p7.1.1HTML語言結構語言結構p7.1.2文檔頭文檔頭p7.1.3文檔主體文檔主體p7.1.4在網(wǎng)頁中加入在網(wǎng)頁中加入javaScript腳本語言腳本語言7.1.1HTML語言結構語言結構什么是HTML ？超文本標記語言HTMLHyperText

2、Markup Language是用于設計網(wǎng)頁源文件網(wǎng)頁文檔的語言。每一個頁面的代碼保存為一個網(wǎng)頁源文件(.htm文件) 。八十年代初，HTML由萬維網(wǎng)聯(lián)盟W3C：World Wide Web Consortium制訂。 HTML包括一些定義頁面內(nèi)容和格式的符號，稱為標記。它能夠?qū)⑽谋?、圖像、聲音和動畫結合在一個網(wǎng)頁文檔中。這些文檔可以通過Web瀏覽器顯示，還可以通過超鏈接以訪問其它的信息資源。后來，進一步推出了XML擴展標記語言），該語言可以由程序員自己定義標記。 7.1.1HTML語言結構語言結構什么是標記？標記是網(wǎng)頁文檔中的一些有特定意義的符號。這些符號指明如何顯示文檔中的內(nèi)容。標記總是放

3、在三角括號中，大多數(shù)標記都成對出現(xiàn)有開始標記和結束標記）。結束標記和開始標記所用的字符相同，只是前面加一個斜杠。例如： 用于標記一個自然段。 標記可以具有相應屬性即各種參數(shù)，如size、color、 text、 width和noshade等 。 7.1.1HTML語言結構語言結構例如例如整個整個HTML文檔內(nèi)容均在文檔內(nèi)容均在標記之中，標記之中，HTML元素的元素體由兩大部分元素的元素體由兩大部分頭元素頭元素、體元素、體元素和一些注釋組成。和一些注釋組成。 7.1.1HTML語言結構語言結構pHTML語言表示方法語言表示方法 p一般來講，一般來講，HTML的元素有下列的元素有下列3種表示種表示

4、方法：方法：p文件或超文本文件或超文本p文件或超文文件或超文本本p7.1.1HTML語言結構語言結構p如何編寫和瀏覽如何編寫和瀏覽HTML網(wǎng)頁文檔網(wǎng)頁文檔p啟動啟動IE，然后使用，然后使用“查看菜單中的查看菜單中的“源文件源文件菜單項，進入記事本，就可以輸入網(wǎng)頁源文菜單項，進入記事本，就可以輸入網(wǎng)頁源文件了。在輸入完之后，另存為件了。在輸入完之后，另存為.htm文件。文件。p或者直接進入記事本，輸入網(wǎng)頁源文件。在輸或者直接進入記事本，輸入網(wǎng)頁源文件。在輸入完之后，另存為入完之后，另存為.htm文件選擇保存類型為文件選擇保存類型為“所有文件所有文件”）。）。p在瀏覽器中輸入該文件名，就能瀏覽在瀏

5、覽器中輸入該文件名，就能瀏覽HTML源源文件的網(wǎng)頁效果。文件的網(wǎng)頁效果。 7.1.2文檔頭文檔頭文檔頭由文檔頭由和和標記之間的內(nèi)容標記之間的內(nèi)容構成，通常包含一些對文檔進行說明的內(nèi)構成，通常包含一些對文檔進行說明的內(nèi)容。在文檔頭中，各標記之間沒有順序之容。在文檔頭中，各標記之間沒有順序之分，無論誰放在前，誰放在后，其作用是分，無論誰放在前，誰放在后，其作用是一樣的。如一樣的。如:標志標志 標志標志 標志標志 7.1.3文檔主體文檔主體文檔主體由文檔主體由和和標記之間的內(nèi)標記之間的內(nèi)容組成，這是網(wǎng)頁的主要內(nèi)容，即在瀏覽容組成，這是網(wǎng)頁的主要內(nèi)容，即在瀏覽器中所要顯示的內(nèi)容。器中所要顯示的內(nèi)容。下

6、面一一介紹在標記之間常用的各種標記。7.1.3文檔主體文檔主體1背景色彩和文字色彩背景色彩和文字色彩在在中可以使用很多屬性參數(shù)來設定背景和中可以使用很多屬性參數(shù)來設定背景和文字色彩，格式如下：文字色彩，格式如下：bgcolor：背景色彩：背景色彩 background：網(wǎng)頁的背景圖片：網(wǎng)頁的背景圖片text ：非可鏈接文字的色彩：非可鏈接文字的色彩 link ：可鏈接文字的色彩：可鏈接文字的色彩 alink ：正被點擊的可鏈接文字的色彩：正被點擊的可鏈接文字的色彩 vlink ：已經(jīng)點擊：已經(jīng)點擊(訪問訪問)過的可鏈接文字的色彩過的可鏈接文字的色彩 7.1.3文檔主體文檔主體例如：例如： 將網(wǎng)

7、頁的背景顏色設為藍色，將已經(jīng)存在將網(wǎng)頁的背景顏色設為藍色，將已經(jīng)存在的圖片的圖片sun1.jpg設為背景圖片，將文字的設為背景圖片，將文字的顏色設為紅色。顏色設為紅色。 7.1.3文檔主體文檔主體2段落標記段落標記標記用來創(chuàng)建一個段落，在此標標記用來創(chuàng)建一個段落，在此標記之間的文本將按照段落的格式顯示。記之間的文本將按照段落的格式顯示。標記中的標記中的align屬性用來控制段落的對齊屬性用來控制段落的對齊方式的，對齊方式有居中對齊方式的，對齊方式有居中對齊center），右對齊），右對齊right），左對齊），左對齊left） 7.1.3文檔主體文檔主體3換行標記換行標記換行標記換行標記的作用

8、就是告訴瀏覽器到這里要換行了。的作用就是告訴瀏覽器到這里要換行了。內(nèi)容移到下一行，但和前面的內(nèi)容仍是一個段落，并沒有內(nèi)容移到下一行，但和前面的內(nèi)容仍是一個段落，并沒有開始一個新的段落開始一個新的段落,它沒有結束標記。它沒有結束標記。4排版標記排版標記排版標記排版標記用于告訴瀏覽器，用于告訴瀏覽器，和和之間之間的內(nèi)容按照的內(nèi)容按照HTML文檔中的原始格式顯示，這時回車和空文檔中的原始格式顯示，這時回車和空格都會依原樣顯示出來。格都會依原樣顯示出來。 5水平分割線標記水平分割線標記標記是在標記是在HTML文檔中加入一條水平線，它可以文檔中加入一條水平線，它可以直接使用，具有直接使用，具有size、

9、color、width和和noshade屬性。屬性。size是是設置水平線的厚度，而設置水平線的厚度，而width是設定水平線的寬度，默認是設定水平線的寬度，默認單位是像素。單位是像素。noshade屬性用來加入一條沒有陰影的水平屬性用來加入一條沒有陰影的水平線。線。7.1.3文檔主體文檔主體6標題標記標題標記Web文檔和普通文檔一樣，需要很多的標題，如章、節(jié)等。文檔和普通文檔一樣，需要很多的標題，如章、節(jié)等。HTML中文段落的字體大小通過中文段落的字體大小通過來表示，來表示，n為標題為標題的等級，一共有的等級，一共有6個等級，個等級，h1，h2，h3，h4，h5，h6，表示最大的字，表示最大

10、的字，次之，其余依此類推。次之，其余依此類推。7字符標記字符標記標記用來設置文字的字體、尺寸和顏色等，其屬性標記用來設置文字的字體、尺寸和顏色等，其屬性如下：如下：size：設置文字的大小，可以選擇：設置文字的大小，可以選擇17七種不同大小的文字，七種不同大小的文字，數(shù)值越大，文字越大，默認的字號為數(shù)值越大，文字越大，默認的字號為3。如：。如：，這種設置為絕對設置，也可使用相對設置，這種設置為絕對設置，也可使用相對設置，如：如：。 7.1.3文檔主體文檔主體8文字風格控制標記文字風格控制標記：設置文字為粗體。：設置文字為粗體。：設置文字為大字體：設置文字為大字體：設置文字為小字體：設置文字為小

11、字體：設置文字為斜體：設置文字為斜體：設置文字為加下劃線：設置文字為加下劃線7.1.3文檔主體文檔主體9插入圖片標記插入圖片標記將圖形文件嵌入到網(wǎng)頁文檔中將圖形文件嵌入到網(wǎng)頁文檔中的當前位置的當前位置src屬性用于指明所插入圖片的位置和文件名，文件名必須屬性用于指明所插入圖片的位置和文件名，文件名必須是全名文件名和擴展名），圖片的位置可以是絕對位是全名文件名和擴展名），圖片的位置可以是絕對位置，也可以是相對位置。置，也可以是相對位置。例：例：7.1.3文檔主體文檔主體在在HTML語言中用語言中用標記來定義超鏈接，使用標記來定義超鏈接，使用href屬性屬性來設置要鏈接的地址。例如：來設置要鏈接的

12、地址。例如：武漢大學武漢大學HTML舉例舉例北大文件服務北大文件服務/a這是我的電子信箱這是我的電子信箱(E-Mail信信箱箱)7.1.3文檔主體文檔主體11表格標記表格標記 在網(wǎng)頁文件中使用標記在網(wǎng)頁文件中使用標記和和定義表格，所有的表定義表格，所有的表格內(nèi)容均放在這兩個標記之中。其基本方法為格內(nèi)容均放在這兩個標記之中。其基本方法為 : (定義表格定義表格) (定義表行定義表行) (定義表頭定義表頭)(定義單元格定義單元格(表格的具體數(shù)據(jù)表格的具體數(shù)據(jù))在在標記中有許多屬性，使用這些屬性可以設定表格的外標記中有許多屬性，使用這些屬性可以設定表格的外觀：觀：align：設置表格內(nèi)文字水平方向的

13、對齊方式：設置表格內(nèi)文字水平方向的對齊方式valign：設置表格內(nèi)文字垂直方向的對齊方式：設置表格內(nèi)文字垂直方向的對齊方式border：設置表格邊框的粗細：設置表格邊框的粗細bordercolor：設置表格邊框的顏色：設置表格邊框的顏色width：設置表格邊框的寬度，可以是像素，也可是瀏覽器窗：設置表格邊框的寬度，可以是像素，也可是瀏覽器窗口的百分比。口的百分比。cellspacing：設置表格內(nèi)單元格之間的間距以及單元格與表格：設置表格內(nèi)單元格之間的間距以及單元格與表格邊框的間距邊框的間距cellpadding：設置表格內(nèi)單元格的內(nèi)容與單元格邊框的間距：設置表格內(nèi)單元格的內(nèi)容與單元格邊框的間

14、距7.1.3文檔主體文檔主體例：用表格標記創(chuàng)建以下表格。表格示例 旅游日程 日期1-33-55-7 旅游地點青島黃山杭州 7.1.3文檔主體文檔主體表單標記用于制作對話框） （1）（表單開始和結束標記）（2）（輸入?yún)^(qū)標記） （3）（列表框標記）（4） （多行文本框標記） 分別介紹如下： 標記用來創(chuàng)建一個表單，也即定義表單的開始和結束位置，在標記對之間的一切都屬于表單的內(nèi)容。7.1.3文檔主體文檔主體標記具有action、method和target屬性。 action的值是處理程序的程序名。例如： ，當用戶提交表單時，服務器將執(zhí)行網(wǎng)站xld.home.chinaren/上的counter.cgi

15、程序。 method用來定義處理程序從表單中獲得信息的方式，可取值為 GET 或 POST，缺省值為get。 GET方式是程序從當前網(wǎng)頁文檔中獲取數(shù)據(jù)，然而這種方式傳送的數(shù)據(jù)量是有所限制的，一般限制在1KB以下。 POST方式與GET方式相反，它是當前網(wǎng)頁文檔把數(shù)據(jù)傳送給處理程序，傳送的數(shù)據(jù)量要比使用GET方式大得多。 target用來指定顯示表單的目標窗口。 7.1.3文檔主體文檔主體標記用來定義一個用戶輸入?yún)^(qū)，用戶可在標記用來定義一個用戶輸入?yún)^(qū)，用戶可在其中輸入信息。此標記必須放在其中輸入信息。此標記必須放在標記對標記對之間。之間。標記中共提供文本框、按鈕、復標記中共提供文本框、按鈕、復選

16、框、單選鈕等八種類型的輸入?yún)^(qū)域選框、單選鈕等八種類型的輸入?yún)^(qū)域 。例如：。例如：7.1.3文檔主體文檔主體例：例：請輸入您的姓名、地址和郵編：請輸入您的姓名、地址和郵編：姓名姓名:地址地址:郵政編碼郵政編碼:性別性別:男男女女喜好喜好:音樂音樂美術美術舞蹈舞蹈體育體育密碼：密碼： 7.1.3文檔主體文檔主體標記用來創(chuàng)建一個下拉列表框或可以復選的列表框。標記用來創(chuàng)建一個下拉列表框或可以復選的列表框。此標記對用于此標記對用于標記之間。標記之間。具有具有multiple、name和和size屬性。例如：屬性。例如： 請選擇你所在的城市：請選擇你所在的城市： 北京北京 上海上海 南京南京 武漢武漢 天

17、津天津 重慶重慶 標記指定列表框中的一個選項，此標記具有selected和value屬性。value指定選項值，這個值要傳送到服務器上。服務器正是通過調(diào)用區(qū)域的名字的value屬性來獲得該區(qū)域選中的數(shù)據(jù)項的。 7.1.4在網(wǎng)頁中加入在網(wǎng)頁中加入javaScript腳本語言腳本語言JavaScript腳本語言是一種可以直接加入到腳本語言是一種可以直接加入到HTML代碼中的一種計算機語代碼中的一種計算機語言，使用它可以完成很多言，使用它可以完成很多HTML語言無法完成的工作。語言無法完成的工作。JavaScript腳本語言使用腳本語言使用標記進行說明，從標記進行說明，從到到完完畢，這個范圍內(nèi)的語言

18、瀏覽器會按照畢，這個范圍內(nèi)的語言瀏覽器會按照JavaScript腳本語言進行操作，腳本語言進行操作，而不會當成普通的網(wǎng)頁內(nèi)容。而不會當成普通的網(wǎng)頁內(nèi)容。例：例：顯示信息框顯示信息框 if(window.confirm(請單擊按鈕。請單擊按鈕。)document.writeln(您單擊的是您單擊的是“確確定按鈕。定按鈕。) else document.writeln(您單擊的是您單擊的是“取消按鈕取消按鈕) 有關JavaScript腳本語言的使用，請讀者參看有關資料 。7.2 Dreamweaver概述概述p7.2.1中文中文Dreamweaver簡介簡介p7.2.2中文中文Dreamweave

19、r窗口窗口7.2.1中文中文Dreamweaver簡介簡介p Dreamweaver 是在多媒體方面頗有建樹的Macromedia公司推出的可視化網(wǎng)頁制作工具，它與Flash、Fireworks合在一起被稱為網(wǎng)頁制作三劍客，這三個軟件相輔相承，是制作網(wǎng)頁的最佳選擇。其中，Dreamweaver主要用來制作網(wǎng)頁文件，制作出來的網(wǎng)頁兼容性比較好，制作效率也很高，F(xiàn)lash用來制作精美的網(wǎng)頁動畫，而Fireworks用來處理網(wǎng)頁中的圖形。 p Dreamweaver 是基于Windows操作系統(tǒng)的網(wǎng)頁制作與網(wǎng)站管理專業(yè)軟件， Dreamweaver是所見即所得的圖形化操作方式，可以使新手上路較快。同

20、時，其功能強大，更適合專業(yè)人士用于對網(wǎng)站的開發(fā)。中文Dreamweaver 8是Macromedia公司專為中國市場設計的，是在Dreamweaver的早期的版本發(fā)展起來的，其功能有較大的提高。 Macromedia Dreamweaver 8 是一款專業(yè)的 HTML 編輯器，用于對 Web 站點、Web 頁和 Web 應用程序進行設計、編碼和開發(fā)。無論您是喜歡直接編寫 HTML 代碼，還是偏愛在可視化編輯環(huán)境中工作，Dreamweaver 都會為您提供幫助良多的工具，豐富您的 Web 創(chuàng)作體驗。 7.2.2中文中文Dreamweaver窗口窗口p 執(zhí)行“開場”/“程序”/“Macromedi

21、a”/“Macromedia Dreamweaver 8命令后，即可啟動Dreamweaver 8程序，出現(xiàn)啟始頁后，可以打開已有的網(wǎng)頁文件進行編輯，也可創(chuàng)建一個新項目，如要創(chuàng)建一新的空文檔，選擇“創(chuàng)建新項目這一列的“HTML文檔，將看到如下圖所示的窗口。這個窗口從外觀上看，大體可以分為6大部分。 7.3創(chuàng)建網(wǎng)頁文檔創(chuàng)建網(wǎng)頁文檔 p制作網(wǎng)頁的基本流程制作網(wǎng)頁的基本流程p1準備階段準備階段p2整體設計整體設計 p3制作網(wǎng)頁階段制作網(wǎng)頁階段 p4效果測試階段效果測試階段 p5網(wǎng)站發(fā)布階段網(wǎng)站發(fā)布階段7.3.2網(wǎng)站的建設網(wǎng)站的建設1網(wǎng)站建設的準備網(wǎng)站建設的準備 2Dreamweaver 8站點的建立

22、站點的建立網(wǎng)站建設的準備網(wǎng)站建設的準備1建立相關文件夾建立相關文件夾2.用拼音或英文命名文件：網(wǎng)頁文件的命名用拼音或英文命名文件：網(wǎng)頁文件的命名也是非常重要的，最好能一看到文件名字也是非常重要的，最好能一看到文件名字就知道是作什么內(nèi)容的文件，使用有一定就知道是作什么內(nèi)容的文件，使用有一定意義的字母或單詞來為文件命名。命名時意義的字母或單詞來為文件命名。命名時不要使用中文的名字，因為有些機器對中不要使用中文的名字，因為有些機器對中文文件名不支持，特別是有些服務器更是文文件名不支持，特別是有些服務器更是如此。這樣很容易導致出現(xiàn)鏈接錯誤。如此。這樣很容易導致出現(xiàn)鏈接錯誤。 Dreamweaver 8

23、站點的建立站點的建立 p新建站點新建站點p建立站點文件夾建立站點文件夾p通過站點管理器建立站點通過站點管理器建立站點p單擊單擊“管理站點對話框中的管理站點對話框中的“完成按完成按鈕結束站點的定義，此時鈕結束站點的定義，此時“文件面板將文件面板將會顯示本地站點的名稱和存儲路徑。會顯示本地站點的名稱和存儲路徑。修改站點信息修改站點信息p用戶對于建立的站點設置有不滿意的地方，用戶對于建立的站點設置有不滿意的地方，還可以在站點管理器中繼續(xù)修改。還可以在站點管理器中繼續(xù)修改。p進入站點管理對話框進入站點管理對話框 p選擇菜單命令選擇菜單命令“站點站點/管理站點管理站點”，翻開，翻開“管理站點對話框，單擊

24、管理站點對話框，單擊“編輯按鈕。編輯按鈕。進入站點定義對話框。選擇進入站點定義對話框。選擇“高級選項高級選項卡卡 7.3.3創(chuàng)建網(wǎng)頁文檔創(chuàng)建網(wǎng)頁文檔p新建網(wǎng)頁新建網(wǎng)頁 p設置頁面屬性設置頁面屬性 p添加網(wǎng)頁文字添加網(wǎng)頁文字 p在網(wǎng)頁中加入圖片在網(wǎng)頁中加入圖片 p保存并預覽網(wǎng)頁保存并預覽網(wǎng)頁 新建網(wǎng)頁新建網(wǎng)頁（1在在Dreamweaver 8窗口中執(zhí)行窗口中執(zhí)行“文件文件”/“新建命令。新建命令。（2在出現(xiàn)的對話話框中選擇一種在出現(xiàn)的對話話框中選擇一種“新建的類型。如新建的類型。如果選中果選中“模板模板”，將使用模板創(chuàng)建一個新的網(wǎng)頁文件；，將使用模板創(chuàng)建一個新的網(wǎng)頁文件；如果選擇了如果選擇了“常

25、規(guī)常規(guī)”，則可以在，則可以在“基本頁基本頁”、“動態(tài)動態(tài)頁頁”、“模板頁等模板頁等9個類型中選擇一種頁面類型。個類型中選擇一種頁面類型。（3在完成以上設置后，可單擊在完成以上設置后，可單擊“創(chuàng)建按鈕，新建網(wǎng)創(chuàng)建按鈕，新建網(wǎng)頁的操作過程基本完成。頁的操作過程基本完成。（4在創(chuàng)建完網(wǎng)頁后，可執(zhí)行在創(chuàng)建完網(wǎng)頁后，可執(zhí)行“文件文件”/“保管命令，在保管命令，在出現(xiàn)的出現(xiàn)的“另存為對話框中，輸入要保存的文件名后，另存為對話框中，輸入要保存的文件名后，單擊單擊“保管按鈕，即可完成網(wǎng)頁的創(chuàng)建操作。保管按鈕，即可完成網(wǎng)頁的創(chuàng)建操作。 設置頁面屬性設置頁面屬性 p 執(zhí)行執(zhí)行“修改修改”/“頁面屬性命令也可用快捷

26、鍵頁面屬性命令也可用快捷鍵Ctrl+J）。系統(tǒng)彈出頁面屬性對話框）。系統(tǒng)彈出頁面屬性對話框設置頁面屬性設置頁面屬性p 在外觀類，可設置頁面的字體其大小和顏色，還可設置網(wǎng)頁的背景和頁面的邊距。網(wǎng)頁背景可以是圖片，也可以是顏色。 p 選中鏈接類，可以設定超鏈接的顏色，不設定則默認為藍色。 p 選中標題/編碼類，可以設置“標題和網(wǎng)頁的編碼。 標題文本框中用來添加標題，。p 在完成其他的設置后，單擊“確定按鈕就結束頁面屬性的操作。 添加網(wǎng)頁文字添加網(wǎng)頁文字 p輸入文字輸入文字 p直接輸入怎樣輸入空格？）直接輸入怎樣輸入空格？）p復制復制/粘貼粘貼p導入已有導入已有Word文檔文檔 p插入特殊符號插入特

27、殊符號p設置文字及段落格式設置文字及段落格式p通過通過“屬性面板屬性面板” 設置設置在網(wǎng)頁中加入圖片在網(wǎng)頁中加入圖片 p 將光標 定位于需要插入圖像文件的位置。p 在“插入面板中切換到“常用選項，單擊“插入圖像按鈕。 p 在出現(xiàn)的“選擇圖像源對話框中，翻開“查找范圍后的下拉列表，選擇打開的文件夾，在“查找范圍下選擇需要插入的圖片，點“確認按鈕，圖片被插入到文檔中p 選定剛才插入的圖片，可以在圖片屬性面板中對圖片的屬性進行設置。如圖像的大小尺寸等等。p 在圖像屬性面板中可以通過單擊三個對齊方式按鈕來設置圖像的水平對齊方式，也可通過對齊下拉按鈕來設置p 將圖像放在段落中后，文本緊挨著圖像的邊緣顯示

28、?？梢岳脠D像屬性工具欄上的“垂直邊距和“水平邊距來設置圖片與文本之間的邊距。p 有的上網(wǎng)者為了加快頁面下載速度，會設置不讓圖片顯示，這時我們可以給圖形加個說明文字。 保存并預覽網(wǎng)頁保存并預覽網(wǎng)頁 保存頁面，一個簡單的個人主頁編輯完畢了，要查看效果，保存頁面，一個簡單的個人主頁編輯完畢了，要查看效果，單擊單擊“文檔工具欄中文檔工具欄中“預覽按鈕或按預覽按鈕或按F12鈕），鈕），可瀏覽器中查看實際的效果。可瀏覽器中查看實際的效果。7.4網(wǎng)頁定位技術網(wǎng)頁定位技術7.4.1使用表格定位內(nèi)容使用表格定位內(nèi)容7.4.2使用框架定位內(nèi)容使用框架定位內(nèi)容7.4.3使用層定位內(nèi)容使用層定位內(nèi)容7.4.1使用表

29、格定位內(nèi)容使用表格定位內(nèi)容表格是用于在HTML頁上顯示表格式數(shù)據(jù)以及對對文本和圖形進行布局的強有力的工具。表格由一行或多行組成；每行又由一個或多個單元格組成。雖然HTML代碼中通常不明確指定列，但Dreamweaver 8允許像操作行和單元格那樣來操作。制作簡單表格制作簡單表格 p 將光標定位到要插入表格的地方，單擊“插入菜單中的“表格命令，打開如圖所示的“表格對話框。p 在 “插入表格對話框中，可設置行數(shù)、列數(shù)、表格的寬度、邊框的像素、表格和邊框的填充顏色等。 p “表格寬度輸入框用于設置表格的寬度，右側(cè)的列表中可選擇“像素或“百分比”。各選項的含義如下：p 像素：若選擇該項則將表格設置為固

30、定寬度。p 百分比：若選擇該項，則按占瀏覽器窗口的百分比指定表格的寬度。p “邊框粗細輸入框用于設置表格邊框的粗細。輸入大于0的整數(shù)表示有邊框，若輸入0表示在網(wǎng)頁中不顯示邊框，在設計頁面中以虛線表示，如果只為定位，需將邊框粗細改為“0”。完成設置后，單擊“確定按鈕，即可完成表格的插入。 制作簡單表格制作簡單表格p 在表格的任意線上單擊，即可選定整個表格。在表格屬在表格的任意線上單擊，即可選定整個表格。在表格屬性面板中對表格的屬性進行重新設置和格式化。性面板中對表格的屬性進行重新設置和格式化。 “表格Id輸入框用于輸入表格名。“行和“列輸入框用于修改表格的行數(shù)和列數(shù)，修改完后按Enter鍵進行確

31、認。 “寬和“高輸入框用于修改表格的寬度和高度，并在其后的列表框中選擇“像素或“百分比”?！疤畛漭斎肟蛴糜谛薷膯卧裰械膬?nèi)容和單元格邊框之間的距離。“間距輸入框用于設置相鄰的單元格之間的距離。“對齊下拉列表框中選擇表格與同一段落中的文本或圖像的對齊方式。“邊框輸入框用于設置邊表格線的粗細。制作簡單表格制作簡單表格設置表格線的顏色設置表格的背景色輸入背景圖像的路徑，或單擊輸入框右側(cè)的圖標指定背景圖像的路徑選擇設置的CSS樣式清除表格的列寬列寬）表格寬度高度從瀏覽器窗口的百分比轉(zhuǎn)換為像素表格寬度高度從像素轉(zhuǎn)換為瀏覽器窗口的百分比制作簡單表格制作簡單表格p 用鼠標將光標定位于表格的任意單元格中，輸入

32、需要的內(nèi)容。同用鼠標將光標定位于表格的任意單元格中，輸入需要的內(nèi)容。同時也可以在時也可以在“屬性面板中進行格式化。將鼠標定位于單元格中屬性面板中進行格式化。將鼠標定位于單元格中時，單元格屬性面板如圖所示時，單元格屬性面板如圖所示 p 合并：將選中的連續(xù)單元格合并成為一個單元格合并：將選中的連續(xù)單元格合并成為一個單元格p 分割：將一個單元格分割成若干單元格分割：將一個單元格分割成若干單元格p 水平對齊方式：分為左）（中）（右三種。水平對齊方式：分為左）（中）（右三種。p 垂直對齊方式：分為頂）（居中）（居底）（基線對齊）垂直對齊方式：分為頂）（居中）（居底）（基線對齊）p 表格還可以增加或者刪除

33、行或者列表格還可以增加或者刪除行或者列p 在一個表格的單元格中可以再插入一個表格，稱為嵌套表格，它在一個表格的單元格中可以再插入一個表格，稱為嵌套表格，它是表格布局中一個十分重要的應用，經(jīng)常用到。是表格布局中一個十分重要的應用，經(jīng)常用到。7.4.2使用框架定位內(nèi)容使用框架定位內(nèi)容在瀏覽網(wǎng)頁的時候，我們常常會看到這樣的一種導航結構。就是超級連接做在左邊單擊以后鏈接的部分出現(xiàn)在右面?；蛘咴谏线厗螕翩溄又赶虻捻撁娉霈F(xiàn)在下面。這就是框架的應用。 框架示意圖 框架的作用就是把瀏覽器劃分為若干區(qū)域，每個區(qū)域分別顯示不同的網(wǎng)頁。框架由兩部分組成，框架集和單個框架 在網(wǎng)頁中插入框架的步驟在網(wǎng)頁中插入框架的步驟

34、 p 在一個空白頁面中選擇在一個空白頁面中選擇“插入面板中的布局項中的框插入面板中的布局項中的框架按鈕（架按鈕（ ）的下拉列表框，將列出許多的框架選項）的下拉列表框，將列出許多的框架選項供選擇。單擊需要的框架樣式就可以插進去了。供選擇。單擊需要的框架樣式就可以插進去了。p 將鼠標放在框架線上，鼠標指針變?yōu)樽笥壹^，按下鼠將鼠標放在框架線上，鼠標指針變?yōu)樽笥壹^，按下鼠標就可以拖動框架線在頁面上移動，調(diào)整框架在窗口中標就可以拖動框架線在頁面上移動，調(diào)整框架在窗口中的合適位置。一個框架結構做好了，如圖生成了三個頁的合適位置。一個框架結構做好了，如圖生成了三個頁面。系統(tǒng)對左右框架生成命名，左框架名為

35、：面。系統(tǒng)對左右框架生成命名，左框架名為：leftFrame，右框架名為：，右框架名為：mainFrame，p 在框架頁中，用鼠標單擊框架線任一位置，在屬性面板在框架頁中，用鼠標單擊框架線任一位置，在屬性面板中將顯示如圖所示的框架的屬性。利用它可對框架各項中將顯示如圖所示的框架的屬性。利用它可對框架各項屬性進行設置。屬性進行設置。p 將光標分別移動到框架中的每個頁面中，執(zhí)行將光標分別移動到框架中的每個頁面中，執(zhí)行“修修改改”/“頁面屬性命令，在出現(xiàn)的頁面屬性命令，在出現(xiàn)的“頁面屬性對話框頁面屬性對話框中對各個頁面分別設置其屬性，如命名、背景等。中對各個頁面分別設置其屬性，如命名、背景等。 p

36、將框架網(wǎng)頁分別命名保存，要保存三個網(wǎng)頁。將框架網(wǎng)頁分別命名保存，要保存三個網(wǎng)頁。p 在左部的框架網(wǎng)頁中輸入內(nèi)容，如輸入文字“Dreamweaver按Enter鍵后，再插入一個5行1列的表格，在各單元格內(nèi)輸入文字。 p 如果我們要實現(xiàn)按左邊的超級鏈接，對應的頁面出現(xiàn)在右邊。在左邊的頁面中做上超級鏈接。 如下圖“mainFrame：指主框架，也就是右邊的，單擊鏈接時，內(nèi)容將在右邊出現(xiàn)。leftFrame：單擊鏈接時，內(nèi)容將在左邊出現(xiàn)。topFrame：單擊鏈接時，內(nèi)容將在左上邊出現(xiàn)。_blank ：單擊鏈接以后，指向頁面出現(xiàn)在新窗口中。_parent：用指向頁面替換他外面所在的框架結構。_self

37、：連接頁面顯示在當前框架中。_top：跳出所有框架，頁面直接出現(xiàn)在瀏覽器中。7.4.3使用層定位內(nèi)容使用層定位內(nèi)容層是一種網(wǎng)頁元素定位的技術，使用層，可以用像素作為單位，精確定位網(wǎng)頁元素。層的出現(xiàn)使網(wǎng)頁從二維平面拓展到三維。簡單的說就好像大樓的樓層一樣，可以使頁面上元素進行重疊。層可以放在網(wǎng)頁的任意位置?？梢詫⒕W(wǎng)頁元素插入到層中，層可以重疊，可以隱藏，可以縮放大小，可以嵌套，可以配合時間軸的使用，完成動畫制作。 插入層插入層（1將將“插入面板切換到插入面板切換到“規(guī)劃選項卡，單擊規(guī)劃選項卡，單擊“繪制層按鈕繪制層按鈕（ ），此時光標會成為一個十字狀后，在編輯窗口上拖動，就可），此時光標會成為一

38、個十字狀后，在編輯窗口上拖動，就可以創(chuàng)建出一個層。操作如圖所示。以創(chuàng)建出一個層。操作如圖所示。（2用鼠標單擊這個層選中它，可用鼠標在頁面中調(diào)整層在頁面中用鼠標單擊這個層選中它，可用鼠標在頁面中調(diào)整層在頁面中的位置、大小和形狀。的位置、大小和形狀。（3可在這個層中插入圖片、文字、表格等網(wǎng)頁元素。并可以將層可在這個層中插入圖片、文字、表格等網(wǎng)頁元素。并可以將層放置在頁面的任意位置。放置在頁面的任意位置。（4用鼠標單擊這個層的邊框線，在屬性面板中可對層的屬性進行用鼠標單擊這個層的邊框線，在屬性面板中可對層的屬性進行設置。如設置層的背景，可見性等。設置。如設置層的背景，可見性等。層轉(zhuǎn)換為表格層轉(zhuǎn)換為表

39、格 （1在網(wǎng)頁中選定用層做的框架。在網(wǎng)頁中選定用層做的框架。（2執(zhí)行執(zhí)行“修改修改”/“轉(zhuǎn)換轉(zhuǎn)換”/“層到表格命令。出現(xiàn)如圖層到表格命令。出現(xiàn)如圖所示的對話框。在所示的對話框。在“表格布局中選擇一種布局方式后，表格布局中選擇一種布局方式后，單擊單擊“確定按鈕，即可完成將層轉(zhuǎn)換成表格的操作。確定按鈕，即可完成將層轉(zhuǎn)換成表格的操作。7.5超鏈接超鏈接 7.5.1超鏈接簡介超鏈接簡介7.5.2文本鏈接文本鏈接7.5.3圖片鏈接圖片鏈接7.5.4書簽鏈接書簽鏈接7.5.5設置熱區(qū)的鏈接設置熱區(qū)的鏈接7.5.6電子郵件鏈接電子郵件鏈接7.5.1超鏈接簡介超鏈接簡介p 超鏈接是網(wǎng)頁上連接其它網(wǎng)頁或網(wǎng)頁上指

40、定位置的超文超鏈接是網(wǎng)頁上連接其它網(wǎng)頁或網(wǎng)頁上指定位置的超文本和超媒體本和超媒體p 超鏈接分為文字和圖像包括動畫兩種，網(wǎng)頁中的一超鏈接分為文字和圖像包括動畫兩種，網(wǎng)頁中的一段文字、一副圖像或圖像的某一個部分等都可以定義為段文字、一副圖像或圖像的某一個部分等都可以定義為超鏈接超鏈接p 超鏈接分為內(nèi)部鏈接與外部鏈接，它們是相對站點目錄超鏈接分為內(nèi)部鏈接與外部鏈接，它們是相對站點目錄而言的。如果超級鏈接所鏈接的站點目錄內(nèi)的文件，這而言的。如果超級鏈接所鏈接的站點目錄內(nèi)的文件，這樣的鏈接就是內(nèi)部鏈接；相反，如果鏈接的是站點目錄樣的鏈接就是內(nèi)部鏈接；相反，如果鏈接的是站點目錄之外的文件，這樣的鏈接就被稱

41、為外部鏈接。之外的文件，這樣的鏈接就被稱為外部鏈接。 7.5.2文本鏈接文本鏈接p 在網(wǎng)頁編輯窗口，用鼠標選定需要設置超鏈接的文本，在網(wǎng)頁編輯窗口，用鼠標選定需要設置超鏈接的文本，如如“歡迎您瀏覽我的主頁！歡迎您瀏覽我的主頁！”這幾個字這幾個字p 單擊如屬性面板上的單擊如屬性面板上的“鏈接后面鏈接后面“瀏覽文件按鈕，瀏覽文件按鈕，翻開翻開“選擇文件對話框。在選擇文件對話框。在“選擇文件對話框中，選擇文件對話框中，選擇需要插入鏈接的對象，這些對象可以是網(wǎng)頁，也可選擇需要插入鏈接的對象，這些對象可以是網(wǎng)頁，也可以是其他程序編輯的文本內(nèi)容或圖片等。也可以手工在以是其他程序編輯的文本內(nèi)容或圖片等。也可

42、以手工在連接域中輸入地址。連接域中輸入地址。p 設置完超鏈接后，已經(jīng)被設置鏈接的文本內(nèi)容將用藍色設置完超鏈接后，已經(jīng)被設置鏈接的文本內(nèi)容將用藍色顯示，并被加上了下劃線。顯示，并被加上了下劃線。7.5.3圖片鏈接圖片鏈接p打開一個包含圖片的網(wǎng)頁，或者在當前網(wǎng)頁中打開一個包含圖片的網(wǎng)頁，或者在當前網(wǎng)頁中插入一幅圖片，。插入一幅圖片，。p在編輯窗口中選中圖片，在圖片的屬性面板中在編輯窗口中選中圖片，在圖片的屬性面板中進行鏈接設置，或右擊圖片，在彈出的快捷菜進行鏈接設置，或右擊圖片，在彈出的快捷菜單中執(zhí)行單中執(zhí)行“創(chuàng)建鏈接命令，進行鏈接目標的創(chuàng)建鏈接命令，進行鏈接目標的設置。設置。p完成以上操作之后，

43、按完成以上操作之后，按F12鍵在瀏覽器中瀏覽剛鍵在瀏覽器中瀏覽剛才設置的效果。才設置的效果。 7.5.4書簽鏈接書簽鏈接p書簽鏈接的作用就是在網(wǎng)頁中做一個記號，書簽鏈接的作用就是在網(wǎng)頁中做一個記號，以便在一個內(nèi)容較多的網(wǎng)頁中快速定位。以便在一個內(nèi)容較多的網(wǎng)頁中快速定位。p先將光標放置在網(wǎng)頁中需要插入錨記的位先將光標放置在網(wǎng)頁中需要插入錨記的位置，單擊工具欄中的置，單擊工具欄中的 按鈕，在彈出的對按鈕，在彈出的對話框中插入錨記的名稱，設置完畢后單擊話框中插入錨記的名稱，設置完畢后單擊完成。選中將要建立錨點鏈接的內(nèi)容，在完成。選中將要建立錨點鏈接的內(nèi)容，在屬性檢查器的屬性檢查器的“鏈接文本框中輸入

44、錨記鏈接文本框中輸入錨記名稱名稱p也可以通過拖動也可以通過拖動“鏈接文本框后的鏈接文本框后的 到到要鏈接的錨點處來鏈接錨點要鏈接的錨點處來鏈接錨點7.5.5設置熱區(qū)的鏈接設置熱區(qū)的鏈接p熱區(qū)鏈接就是在圖片上定義一定形狀的區(qū)熱區(qū)鏈接就是在圖片上定義一定形狀的區(qū)域，然后給這些區(qū)域加上鏈接，這些區(qū)域域，然后給這些區(qū)域加上鏈接，這些區(qū)域被成為熱點。被成為熱點。p制作熱點鏈接制作熱點鏈接p在展開的在展開的“屬性屬性“面板上的繪圖工具在畫面板上的繪圖工具在畫面上繪制熱區(qū)點。面上繪制熱區(qū)點。 在在“屬性面板的左屬性面板的左下有下有3個分別繪制矩形、橢圓形、多邊形個分別繪制矩形、橢圓形、多邊形熱點的工具。選中

45、熱點，進行相應設置。熱點的工具。選中熱點，進行相應設置。7.5.6電子郵件鏈接電子郵件鏈接p 在網(wǎng)頁制作中，還經(jīng)?？吹竭@樣的一些超級鏈接。單擊在網(wǎng)頁制作中，還經(jīng)常看到這樣的一些超級鏈接。單擊了以后，會彈出郵件發(fā)送程序，連聯(lián)系人的地址也已經(jīng)了以后，會彈出郵件發(fā)送程序，連聯(lián)系人的地址也已經(jīng)寫好了。這也是一種超級鏈接。寫好了。這也是一種超級鏈接。p 制作方法是：在編輯狀態(tài)下，先選定要鏈接的圖片或文制作方法是：在編輯狀態(tài)下，先選定要鏈接的圖片或文字，單擊字，單擊“插入工具欄常用）插入工具欄常用）”中的中的 或單擊或單擊“插插入菜單選入菜單選“電子郵件鏈接彈出如圖的對話框，填入電子郵件鏈接彈出如圖的對話

46、框，填入E-Mail地址后按地址后按“確定鍵即可。確定鍵即可。還可以選中圖片或者文字，直接在屬性面板連接域中填寫“mailto：郵件地址”。 7.6 CSS樣式樣式p何為何為CSS？CSS是一種樣式表技術，其全是一種樣式表技術，其全稱為層疊樣式表，是稱為層疊樣式表，是Cascading Style Sheet的縮寫，又稱為風格樣式單。的縮寫，又稱為風格樣式單。CSS是一系列格式規(guī)則，它們控制網(wǎng)頁內(nèi)容的是一系列格式規(guī)則，它們控制網(wǎng)頁內(nèi)容的外觀。使用外觀。使用 CSS 樣式可以非常靈活并更樣式可以非常靈活并更好地控制確切的網(wǎng)頁外觀，從精確的布局好地控制確切的網(wǎng)頁外觀，從精確的布局定位到特定的字體和

47、樣式。定位到特定的字體和樣式。 在網(wǎng)頁中使用在網(wǎng)頁中使用CSS方法一方法一: p鏈接外部樣式表文件鏈接外部樣式表文件 (Linking to a Style Sheet)p可以先建立外部樣式表文件（可以先建立外部樣式表文件（.css），然），然后使用后使用HTML的的link對象鏈接樣式表文件。對象鏈接樣式表文件。示例如下：示例如下：pp文檔標題文檔標題pp在網(wǎng)頁中使用在網(wǎng)頁中使用CSS方法二方法二: p定義內(nèi)部樣式塊對象 (Embedding a Style Block)p在HTML文檔的部分插入樣式定義。示例如下： ppp文檔標題ppppp 在網(wǎng)頁中使用在網(wǎng)頁中使用CSS方法三方法三: p

48、內(nèi)聯(lián)定義 (Inline Styles)p內(nèi)聯(lián)定義即是在對象的標記內(nèi)使用對象的style屬性定義適用其的樣式表屬性。示例如下：p這一行被設定行邊距CSS樣式規(guī)則樣式規(guī)則pCSS樣式規(guī)則由兩部分組成：選擇器和聲明。選擇器是樣式名稱如 TR 或 P），而聲明則用于定義樣式元素。聲明由兩部分組成：屬性如 font-family和值如 Helvetica）。pCSS 樣式表的主要優(yōu)點是提供便利的更新功能：更新CSS樣式時，使用該樣式的所有文檔的格式都自動更新為新樣式，因此網(wǎng)站的維護變得更容易。 CSS樣式面板樣式面板 p 若要打開“CSS 款式面板，請執(zhí)行下列操作之一：p 選擇“窗口”“CSS 款式”

49、。p 按 Shift+F11 鍵。 “CSS 屬性屬性選項卡選項卡p“CSS 屬性選項卡使用戶可以直接編輯CSS規(guī)則的屬性和值。p用戶可以修改每個CSS規(guī)則的屬性p翻開“CSS屬性選項卡的方法是選擇“窗口”“標簽檢查器”。 新建新建CSS樣式樣式l在“CSS樣式面板中，單擊面板右下角區(qū)域中的“新建CSS樣式按鈕。l或者選擇“文本”“CSS樣式”“新建CSS樣式”。定義定義CSS樣式樣式應用自定義應用自定義CSS樣式樣式在文檔中，選擇要將CSS 樣式應用于的文本在網(wǎng)頁中選中文字，然后單擊屬性面板中樣式下拉列表按鈕，在列表中選擇新建的myclass樣式。7.6.2設置固定的背景設置固定的背景p 打

50、開樣式面板，按新建按鈕。打開樣式面板，按新建按鈕。p 在新建在新建CSS規(guī)格對話框中選擇規(guī)格對話框中選擇“標簽重新定義特定標標簽重新定義特定標簽的外觀）簽的外觀）”。單擊標簽后下拉列表按鈕，選中。單擊標簽后下拉列表按鈕，選中body作作為被重定義的標簽。點擊為被重定義的標簽。點擊“確定按鈕，存盤后，彈出確定按鈕，存盤后，彈出對話框。對話框。p 在分類欄選擇在分類欄選擇“背景選項卡，在樣式定義對話框中選背景選項卡，在樣式定義對話框中選擇如下參數(shù)。之后確定。擇如下參數(shù)。之后確定。p 背景圖像：單擊瀏覽按鈕選擇背景圖片。背景圖像：單擊瀏覽按鈕選擇背景圖片。p 背景圖像重復：選擇重復或任意）。背景圖像

51、重復：選擇重復或任意）。p 附加：固定附加：固定p 水平位置：默認水平位置：默認p 垂直位置：默認垂直位置：默認p 保存網(wǎng)頁，預覽效果。可看到文字滾動而背景不動保存網(wǎng)頁，預覽效果?？煽吹轿淖譂L動而背景不動 7.6.3改變字體鏈接改變字體鏈接p 打開樣式面板，按新建按鈕。打開樣式面板，按新建按鈕。p 在新建在新建CSS規(guī)格對話框中選擇規(guī)格對話框中選擇“高級高級ID、偽類選擇器、偽類選擇器等）等）”。單擊選擇器后下拉列表按鈕，選擇。單擊選擇器后下拉列表按鈕，選擇a:link。并。并定義為內(nèi)部樣式選擇僅對該文檔）。定義為內(nèi)部樣式選擇僅對該文檔）。p 確定后出現(xiàn)確定后出現(xiàn) “CSS樣式定義對話框，在其

52、中的樣式定義對話框，在其中的“分類分類下的下的“類型選項中，設置字體顏色如類型選項中，設置字體顏色如“紫色紫色”），），最后單擊最后單擊“確定按鈕。確定按鈕。p 重復以操作可分別將重復以操作可分別將“a:hover”（鼠標放在熱點文字的（鼠標放在熱點文字的狀態(tài)的字體顏色設為狀態(tài)的字體顏色設為“青色青色”，并加，并加“上劃線修飾；上劃線修飾；“a:visted”（已鏈接過的熱點的字體設置為（已鏈接過的熱點的字體設置為“紅色紅色”，加刪除線修飾；加刪除線修飾；“a:visted”（已鏈接過的熱點的字體（已鏈接過的熱點的字體設置為設置為“紅色紅色”，加刪除線修飾；，加刪除線修飾；“a:active”

53、（鼠標左（鼠標左鍵在熱點文字按下的狀態(tài)的字體設置為鍵在熱點文字按下的狀態(tài)的字體設置為“黃色黃色”p 在完成以上設置之后，單擊在完成以上設置之后，單擊“確定按鈕，即可完成字確定按鈕，即可完成字體超鏈接屬性的設置。實際效果在瀏覽窗口中體現(xiàn)。體超鏈接屬性的設置。實際效果在瀏覽窗口中體現(xiàn)。7.6.4CSS濾鏡濾鏡Dreamweaver的濾鏡和我們所熟悉的的濾鏡和我們所熟悉的Photoshop濾鏡相似，能夠渲染對象元素，濾鏡相似，能夠渲染對象元素，創(chuàng)建出藝術效果。創(chuàng)建出藝術效果。 7.6.4CSS濾鏡濾鏡p“CSS濾鏡一共有濾鏡一共有16種，如設置圖片的種，如設置圖片的翻轉(zhuǎn)、模糊波紋、去色等，設置和透明

54、度翻轉(zhuǎn)、模糊波紋、去色等，設置和透明度類似，但具體的參數(shù)不同，設置不再細數(shù)，類似，但具體的參數(shù)不同，設置不再細數(shù)，有興趣的同學可自己查資料在有興趣的同學可自己查資料在Dreamweaver 8中嘗試。中嘗試。7.7時間軸、事件和行為時間軸、事件和行為p7.7.1動畫在網(wǎng)頁中的應用動畫在網(wǎng)頁中的應用p7.7.2互動效果的設置互動效果的設置p7.7.3利用圖層設置動態(tài)效果利用圖層設置動態(tài)效果7.7.1動畫在網(wǎng)頁中的應用動畫在網(wǎng)頁中的應用p 在在Dreamweaver 8中有一個時間軸，可以和行為一起結中有一個時間軸，可以和行為一起結合起來使用，通過它在網(wǎng)頁中可以設置出非常不錯的動合起來使用，通過它

55、在網(wǎng)頁中可以設置出非常不錯的動態(tài)效果來。態(tài)效果來。p 首先我們來理解時間軸。圖片按時間軸上的設定進行運首先我們來理解時間軸。圖片按時間軸上的設定進行運動。而動畫的實現(xiàn)原理就是將畫面連起來播放，產(chǎn)生運動。而動畫的實現(xiàn)原理就是將畫面連起來播放，產(chǎn)生運動的錯覺。所以動畫的基本單位就是一個畫面，也叫做動的錯覺。所以動畫的基本單位就是一個畫面，也叫做幀。而在動畫中有些畫面是關鍵的，可以影響整個動畫幀。而在動畫中有些畫面是關鍵的，可以影響整個動畫的，這樣的幀叫做關鍵幀。很多的畫面按照時間先后順的，這樣的幀叫做關鍵幀。很多的畫面按照時間先后順序連起來就是動畫。時間軸就是用來排列畫面的順序的。序連起來就是動畫

56、。時間軸就是用來排列畫面的順序的。時間軸由通道組成。每一個通道里面放一個要運動的物時間軸由通道組成。每一個通道里面放一個要運動的物體。關鍵幀用圓點表示。還有一個播放頭，播放頭所指體。關鍵幀用圓點表示。還有一個播放頭，播放頭所指的位置就是動畫當前所在的幀。的位置就是動畫當前所在的幀。利用用層和時間軸制作動畫利用用層和時間軸制作動畫 p 在網(wǎng)頁中畫出一個層。在層中插入一張圖片，調(diào)整圖層的大小，使其適合于圖片。p 選擇“窗口”/“時間軸命令或按下快捷鍵ATL+F9調(diào)出時間軸面板。 p 拖動層的控制柄，將層不是圖片拖拽入時間軸的第一幀處，系統(tǒng)會彈出一個對話框。提示層的一些屬性是可以做成動畫的。單擊“確

57、定按鈕。將層拖拽在時間軸中。應該看到時間軸中顯示的是Layer字樣。時間軸生成了一段長15幀的畫面。 p 如果覺得太短可以將第15那個格拉遠一些，如拉到50，這樣可以主動畫放得慢些。p 現(xiàn)在第一幀和最后一幀都是關鍵幀。我們來設置最后一幀確定動畫的結束位置。單擊最后一幀50幀），將層拖拽到指定位置。 利用用層和時間軸制作動畫利用用層和時間軸制作動畫p 增加一個關鍵幀。單擊時間軸當中的位置如增加一個關鍵幀。單擊時間軸當中的位置如15幀處），按鼠標幀處），按鼠標右鍵，選擇增加關鍵幀，時間軸增加一個關鍵幀。右鍵，選擇增加關鍵幀，時間軸增加一個關鍵幀。 單擊該關鍵幀單擊該關鍵幀將層拖拽到合適位置；用同樣

58、的方法分別將層拖拽到合適位置；用同樣的方法分別27和和38幀處插入關鍵幀，幀處插入關鍵幀，并將圖層拖拽到合適位置，效果如圖并將圖層拖拽到合適位置，效果如圖7-63所示，動畫制作完畢了所示，動畫制作完畢了 p 如果要在頁面裝入瀏覽器的時候動畫就播放?？梢栽跁r間軸上選如果要在頁面裝入瀏覽器的時候動畫就播放?？梢栽跁r間軸上選中中“自動播放自動播放”；如果要循環(huán)播放，可以將；如果要循環(huán)播放，可以將“循環(huán)選中。循環(huán)選中。 7.7.2互動效果的設置互動效果的設置p行為是實現(xiàn)網(wǎng)頁上交互的一種手段。行為是實現(xiàn)網(wǎng)頁上交互的一種手段。 p行為是事件和動作的組合，它允許用戶改變網(wǎng)行為是事件和動作的組合，它允許用戶改

59、變網(wǎng)頁內(nèi)容以及執(zhí)行特定的任務。利用頁內(nèi)容以及執(zhí)行特定的任務。利用Dreamweaver的行為，可以輕松制作出動態(tài)的的行為，可以輕松制作出動態(tài)的網(wǎng)頁效果，從而使網(wǎng)頁更具吸引力。網(wǎng)頁效果，從而使網(wǎng)頁更具吸引力。p下畫介紹常見的幾種效果下畫介紹常見的幾種效果 設置變換圖片效果設置變換圖片效果 p準備兩張大小相同的圖片，一經(jīng)是鼠標還沒有移上的狀準備兩張大小相同的圖片，一經(jīng)是鼠標還沒有移上的狀態(tài)，另一張是鼠標移上去后的圖片。態(tài)，另一張是鼠標移上去后的圖片。p將鼠標定位于要插入變換圖片的位置。將鼠標定位于要插入變換圖片的位置。p在在“插入面板的插入面板的“常用選項卡面板中單擊常用選項卡面板中單擊“鼠標經(jīng)鼠

60、標經(jīng)過圖像按鈕（過圖像按鈕（ ）。）。p在出現(xiàn)的對話框中，分別單擊在出現(xiàn)的對話框中，分別單擊“原始圖像和原始圖像和“鼠標經(jīng)鼠標經(jīng)過圖像后的過圖像后的“閱讀按鈕，選中圖片，其他的如需要閱讀按鈕，選中圖片，其他的如需要也作設置，設置好后按也作設置，設置好后按“確定按鈕即可完成動態(tài)圖片確定按鈕即可完成動態(tài)圖片效果的設置。效果的設置。p本卷須知本卷須知p因為只有圖像的因為只有圖像的src屬性受此動作的影響，所以應該換屬性受此動作的影響，所以應該換入一個與原始圖像具有相同尺寸的圖像；否則，換入的入一個與原始圖像具有相同尺寸的圖像；否則，換入的圖像顯示時會被壓縮或擴展，以使其適應原始圖像的大圖像顯示時會被