1、第八章 網(wǎng) 頁(yè) 制 作 DREAMWEAVERMX 2004 第八章知識(shí)點(diǎn)：第八章知識(shí)點(diǎn)：1 1、網(wǎng)頁(yè)制作的語(yǔ)言和工具、網(wǎng)頁(yè)制作的語(yǔ)言和工具2 2、網(wǎng)站制作、網(wǎng)站制作3 3、使用、使用DreamweaverDreamweaver制作網(wǎng)頁(yè)制作網(wǎng)頁(yè)4 4、網(wǎng)頁(yè)特效制作、網(wǎng)頁(yè)特效制作 1 1、網(wǎng)頁(yè)制作的語(yǔ)言和工具、網(wǎng)頁(yè)制作的語(yǔ)言和工具 網(wǎng)頁(yè)與主頁(yè)( Web Page )( Home Page )瀏覽器與瀏覽器與Web服務(wù)器之間服務(wù)器之間是以是以為單位來(lái)傳送信息。為單位來(lái)傳送信息。http:/ 網(wǎng)頁(yè)與網(wǎng)站服務(wù)器服務(wù)器網(wǎng)頁(yè)通常成組出現(xiàn)，并且這組網(wǎng)頁(yè)網(wǎng)頁(yè)通常成組出現(xiàn)，并且這組網(wǎng)頁(yè)之間通過(guò)超鏈接相互組織成為

2、反映之間通過(guò)超鏈接相互組織成為反映某個(gè)主題的網(wǎng)站。某個(gè)主題的網(wǎng)站。8 提高下載速度提高下載速度8 超文本地址引用方便超文本地址引用方便8 Web頁(yè)沒(méi)有固定的長(zhǎng)度頁(yè)沒(méi)有固定的長(zhǎng)度 網(wǎng)頁(yè)的制作工具可利用可利用編輯編輯Web文檔文檔（推薦：記（推薦：記事本）事本）Web文檔以純文本格式存放，取名為文檔以純文本格式存放，取名為*.html或或*.htm。 ，最終在瀏覽器窗口中呈現(xiàn)為圖文并茂的網(wǎng)頁(yè)。，最終在瀏覽器窗口中呈現(xiàn)為圖文并茂的網(wǎng)頁(yè)。NOTEPAD超文本標(biāo)記語(yǔ)言HTML yper ext arkup anguage 歡迎光臨無(wú)名的主頁(yè)歡迎光臨無(wú)名的主頁(yè)歡迎光臨無(wú)名的主頁(yè)歡迎光臨無(wú)名的主頁(yè)樣樣 例例

3、標(biāo)記需要放在中標(biāo)記中有很多是成對(duì)出現(xiàn)，一頭一尾（結(jié)束標(biāo)記前要加“/”）所有標(biāo)記中的字母不區(qū)分大小寫(xiě)通常以“.html”或“htm”為文件后綴標(biāo)記的書(shū)寫(xiě)格式如下： 文件內(nèi)容/ HTML特點(diǎn)特點(diǎn)直接使用HTML編寫(xiě)網(wǎng)頁(yè)簡(jiǎn)單的HTML例子歡迎光臨無(wú)名的主頁(yè)這就是我我常去的網(wǎng)站， Yahoo! HTML在瀏覽器中被解釋簡(jiǎn)單的HTML例子歡迎光臨無(wú)名的主頁(yè)這就是我我常去的網(wǎng)站， Yahoo! 一個(gè)HTML文件總是由（HEAD）和（BODY）兩部分組成。標(biāo)記和用來(lái)說(shuō)明本文件是一個(gè)HTML文件。“所見(jiàn)即所得”的網(wǎng)頁(yè)編輯工具FrontPage易學(xué)易用，適合于網(wǎng)頁(yè)設(shè)計(jì)的初學(xué)者；Dreamweaver強(qiáng)調(diào)的是更強(qiáng)

4、大的網(wǎng)頁(yè)控制、設(shè)計(jì)能力及創(chuàng)意的完全發(fā)揮，適合專(zhuān)業(yè)的制作人員使用。“所見(jiàn)即所得”的網(wǎng)頁(yè)編輯：“頁(yè)面視圖”，所見(jiàn)即所得的編輯環(huán)境；： “源代碼視圖”，直接通過(guò)修改HTML標(biāo)記命令編輯網(wǎng)頁(yè)；：代碼視圖和設(shè)計(jì)視圖同時(shí)顯示。2 2、網(wǎng)站制作、網(wǎng)站制作選擇主題選擇主題規(guī)劃網(wǎng)頁(yè)（結(jié)構(gòu)與鏈接關(guān)系）規(guī)劃網(wǎng)頁(yè)（結(jié)構(gòu)與鏈接關(guān)系）組織素材組織素材選擇視覺(jué)外觀選擇視覺(jué)外觀設(shè)計(jì)有效的頁(yè)面布局設(shè)計(jì)有效的頁(yè)面布局制作具體網(wǎng)頁(yè)制作具體網(wǎng)頁(yè)發(fā)布網(wǎng)站信息發(fā)布網(wǎng)站信息 網(wǎng)站制作步驟 網(wǎng)站基本結(jié)構(gòu)網(wǎng)站是由網(wǎng)頁(yè)組成的，網(wǎng)頁(yè)之間是由超鏈接來(lái)連接的，其連接方網(wǎng)站是由網(wǎng)頁(yè)組成的，網(wǎng)頁(yè)之間是由超鏈接來(lái)連接的，其連接方式有三種：線性網(wǎng)站、樹(shù)狀網(wǎng)站

5、、非線性網(wǎng)站式有三種：線性網(wǎng)站、樹(shù)狀網(wǎng)站、非線性網(wǎng)站：一頁(yè)連接一頁(yè)：一頁(yè)連接一頁(yè)：分層排列：分層排列：上述：上述兩種網(wǎng)站的結(jié)合兩種網(wǎng)站的結(jié)合 網(wǎng)頁(yè)制作步驟可利用可利用編輯編輯Web文檔（推薦：記事本）文檔（推薦：記事本）Web文檔以純文本格式存放，取名為文檔以純文本格式存放，取名為*.html或或*.htm。 其中插其中插入的入的HTML語(yǔ)言只有用瀏覽器才能被解釋翻譯語(yǔ)言只有用瀏覽器才能被解釋翻譯 在瀏覽器中使用在瀏覽器中使用菜單菜單命令，可在本地機(jī)瀏覽命令，可在本地機(jī)瀏覽 Web文文檔，完成編輯后，可利用檔，完成編輯后，可利用FTP將文件及其將文件及其所用到的媒體素材文所用到的媒體素材文件傳

6、送件傳送到某臺(tái)公共到某臺(tái)公共Web服務(wù)器服務(wù)器人人均可在瀏覽器中人人均可在瀏覽器中處，鍵入具體命令，實(shí)現(xiàn)異地瀏覽該處，鍵入具體命令，實(shí)現(xiàn)異地瀏覽該Web文檔文檔 一旦對(duì)該一旦對(duì)該Web文檔內(nèi)容進(jìn)行更新，須文檔內(nèi)容進(jìn)行更新，須它所在它所在Web服務(wù)器上服務(wù)器上的相關(guān)文檔的相關(guān)文檔 網(wǎng)頁(yè)的基本分類(lèi)以網(wǎng)頁(yè)的角度來(lái)看以網(wǎng)頁(yè)的角度來(lái)看, ,一個(gè)網(wǎng)站中的眾多網(wǎng)頁(yè)一個(gè)網(wǎng)站中的眾多網(wǎng)頁(yè)主要可以分成下列兩層主要可以分成下列兩層: :個(gè)人主頁(yè)個(gè)人主頁(yè)興趣愛(ài)好興趣愛(ài)好個(gè)人相冊(cè)個(gè)人相冊(cè)個(gè)人收藏個(gè)人收藏 網(wǎng)站創(chuàng)建的基本方法將本地機(jī)中的某個(gè)文件夾定義為將本地機(jī)中的某個(gè)文件夾定義為Dreamweaver站點(diǎn)，利用站點(diǎn)，利用

7、Dreamweaver管管理這些網(wǎng)頁(yè)理這些網(wǎng)頁(yè) 網(wǎng)站創(chuàng)建步驟舉例（1） 在本地磁盤(pán)上新建站點(diǎn)文件夾，如在本地磁盤(pán)上新建站點(diǎn)文件夾，如d:openlab執(zhí)行執(zhí)行 “站點(diǎn)站點(diǎn)|管理站點(diǎn)管理站點(diǎn)”命令，彈出命令，彈出“管理站點(diǎn)管理站點(diǎn)”對(duì)對(duì)話(huà)框話(huà)框執(zhí)行執(zhí)行“”命令命令 網(wǎng)站創(chuàng)建步驟舉例（2）設(shè)置站點(diǎn)名稱(chēng)：開(kāi)放實(shí)驗(yàn)室設(shè)置站點(diǎn)名稱(chēng)：開(kāi)放實(shí)驗(yàn)室不使用服務(wù)器技術(shù)不使用服務(wù)器技術(shù)設(shè)置開(kāi)發(fā)過(guò)程中設(shè)置開(kāi)發(fā)過(guò)程中,使用文件使用文件的方式和文件的存儲(chǔ)位置的方式和文件的存儲(chǔ)位置設(shè)置無(wú)遠(yuǎn)端服務(wù)器連接設(shè)置無(wú)遠(yuǎn)端服務(wù)器連接 網(wǎng)站創(chuàng)建步驟舉例（3）在文件面板上新建網(wǎng)頁(yè)在文件面板上新建網(wǎng)頁(yè)文件和圖片素材文件夾文件和圖片素材文件夾

8、 網(wǎng)站創(chuàng)建步驟舉例（4）切換到切換到“站點(diǎn)地圖站點(diǎn)地圖”視圖視圖創(chuàng)建的站點(diǎn)結(jié)構(gòu)創(chuàng)建的站點(diǎn)結(jié)構(gòu) 網(wǎng)站創(chuàng)建步驟舉例（5）雙擊某個(gè)網(wǎng)頁(yè)文件名雙擊某個(gè)網(wǎng)頁(yè)文件名進(jìn)入具體網(wǎng)頁(yè)的編輯進(jìn)入具體網(wǎng)頁(yè)的編輯3 3、使用、使用DreamweaverDreamweaver制作網(wǎng)頁(yè)制作網(wǎng)頁(yè)8 基本網(wǎng)頁(yè)編輯基本網(wǎng)頁(yè)編輯8 圖形的插入和圖形格式圖形的插入和圖形格式8 創(chuàng)建超鏈接（超鏈接、書(shū)簽、熱點(diǎn)）創(chuàng)建超鏈接（超鏈接、書(shū)簽、熱點(diǎn)）8 網(wǎng)頁(yè)的布局（表格和框架）網(wǎng)頁(yè)的布局（表格和框架）8 創(chuàng)建和使用表單創(chuàng)建和使用表單認(rèn)識(shí)認(rèn)識(shí)Dreamweaver MX 2004 管理和組織網(wǎng)頁(yè)管理和組織網(wǎng)頁(yè)網(wǎng)頁(yè)編輯網(wǎng)頁(yè)編輯制作導(dǎo)航欄制作導(dǎo)航

9、欄層、時(shí)間軸、行為及其應(yīng)用層、時(shí)間軸、行為及其應(yīng)用樣式表樣式表動(dòng)態(tài)動(dòng)態(tài) gif gif 圖像的制作圖像的制作 認(rèn)識(shí)Dreamweaver界面網(wǎng)頁(yè)間切換標(biāo)簽網(wǎng)頁(yè)間切換標(biāo)簽文件面板文件面板 基本網(wǎng)頁(yè)編輯既可以在站點(diǎn)中創(chuàng)建新網(wǎng)頁(yè)，也可以創(chuàng)建獨(dú)立的網(wǎng)頁(yè)。既可以在站點(diǎn)中創(chuàng)建新網(wǎng)頁(yè)，也可以創(chuàng)建獨(dú)立的網(wǎng)頁(yè)。Dreamweaver 內(nèi)置的各類(lèi)模板可以幫助我們創(chuàng)建不同類(lèi)內(nèi)置的各類(lèi)模板可以幫助我們創(chuàng)建不同類(lèi)型的網(wǎng)頁(yè)。型的網(wǎng)頁(yè)。設(shè)計(jì)視圖中進(jìn)行文本的錄入和設(shè)計(jì)視圖中進(jìn)行文本的錄入和word類(lèi)似，也可以在網(wǎng)頁(yè)類(lèi)似，也可以在網(wǎng)頁(yè)中插入任何一種基于文本的文件，包括中插入任何一種基于文本的文件，包括 .htm 文件、文件、.

10、asp 文件文件、.rtf 文件和文件和 .txt 文件，以及任何文件，以及任何 Microsoft Office 文檔。文檔。 基本網(wǎng)頁(yè)編輯在在 Dreamweaver 中，可以在屬性面板上設(shè)置文本格式，如更改字體、中，可以在屬性面板上設(shè)置文本格式，如更改字體、大小、樣式、顏色等大小、樣式、顏色等.Dreamweaver的插入菜單可以插入換行符、水平線、特殊字符和注的插入菜單可以插入換行符、水平線、特殊字符和注釋等多種類(lèi)型的特殊元素釋等多種類(lèi)型的特殊元素. 基本網(wǎng)頁(yè)編輯 使用項(xiàng)目符號(hào)和編號(hào)使用項(xiàng)目符號(hào)和編號(hào)使用使用“頁(yè)面屬性頁(yè)面屬性”對(duì)話(huà)框設(shè)置網(wǎng)頁(yè)標(biāo)題、背景色對(duì)話(huà)框設(shè)置網(wǎng)頁(yè)標(biāo)題、背景色或背景

11、圖片、文本顏色、超鏈接顏色和樣式等。或背景圖片、文本顏色、超鏈接顏色和樣式等。 圖形的插入和簡(jiǎn)單編輯 圖形的插入：圖形的插入：執(zhí)行執(zhí)行“插入插入|圖像圖像” 菜單命令菜單命令 直接拖拽來(lái)改變圖片的大小直接拖拽來(lái)改變圖片的大小 大圖像不能通過(guò)減小該圖像尺寸以達(dá)到減少大圖像不能通過(guò)減小該圖像尺寸以達(dá)到減少 其文件大小和下載時(shí)間的目的。其文件大小和下載時(shí)間的目的。 使用屬性面板設(shè)置圖片屬性使用屬性面板設(shè)置圖片屬性HTML并不能包含圖像，它只是包含圖像文件的名稱(chēng)并不能包含圖像，它只是包含圖像文件的名稱(chēng)和相應(yīng)的格式代碼。和相應(yīng)的格式代碼。重新取樣圖片重新取樣圖片 網(wǎng)頁(yè)中圖片不能正常顯示問(wèn)題原因原因1：圖

12、片沒(méi)有保存到網(wǎng)站中：圖片沒(méi)有保存到網(wǎng)站中原因原因2：圖片保存到網(wǎng)站中，但保存的路徑不正確。：圖片保存到網(wǎng)站中，但保存的路徑不正確。網(wǎng)頁(yè)中的圖像、動(dòng)畫(huà)等素材都有自己固定的存放位置，網(wǎng)頁(yè)網(wǎng)頁(yè)中的圖像、動(dòng)畫(huà)等素材都有自己固定的存放位置，網(wǎng)頁(yè)只是通過(guò)路徑使用只是通過(guò)路徑使用HTML語(yǔ)言來(lái)調(diào)用它們，然后把它們顯示語(yǔ)言來(lái)調(diào)用它們，然后把它們顯示在網(wǎng)頁(yè)中。網(wǎng)頁(yè)中的路徑有在網(wǎng)頁(yè)中。網(wǎng)頁(yè)中的路徑有，在應(yīng)該使，在應(yīng)該使用相對(duì)路徑的地方使用了絕對(duì)路徑，或相對(duì)路徑的引用不正用相對(duì)路徑的地方使用了絕對(duì)路徑，或相對(duì)路徑的引用不正確都會(huì)導(dǎo)致瀏覽器無(wú)法在指定的位置打開(kāi)指定的文件，使素確都會(huì)導(dǎo)致瀏覽器無(wú)法在指定的位置打開(kāi)指定的

13、文件，使素材不能正常顯示。材不能正常顯示。 絕對(duì)路徑與相對(duì)路徑(1)：文件在硬盤(pán)上的真正路徑文件在硬盤(pán)上的真正路徑D:/myweb/wuming.htmlD:/myweb/images/wm.gif如果在如果在wuming.html網(wǎng)頁(yè)中網(wǎng)頁(yè)中插入插入wm.gif圖片，使用絕對(duì)圖片，使用絕對(duì)路徑，那么在本地電腦中將一切正常，因?yàn)樵诼窂剑敲丛诒镜仉娔X中將一切正常，因?yàn)樵贒:/myweb/images路徑下的確存在路徑下的確存在wm.gif這個(gè)圖片。這個(gè)圖片。但你將它們拿到另一臺(tái)機(jī)器上或傳到網(wǎng)站服務(wù)器上后，但你將它們拿到另一臺(tái)機(jī)器上或傳到網(wǎng)站服務(wù)器上后，就會(huì)出錯(cuò)，因?yàn)橐疆?dāng)前的機(jī)器的就會(huì)出錯(cuò)，因

14、為要到當(dāng)前的機(jī)器的D:/myweb/images路路徑下找徑下找wm.gif文件文件。 絕對(duì)路徑與相對(duì)路徑(2)相對(duì)路徑相對(duì)路徑：當(dāng)前網(wǎng)頁(yè)相對(duì)目標(biāo)文件的位置當(dāng)前網(wǎng)頁(yè)相對(duì)目標(biāo)文件的位置/ 根目錄根目錄 ./ 上一級(jí)上一級(jí) ././ 上兩級(jí)上兩級(jí)例例1：D:/myweb/wuming.html D:/myweb/images/wm.gif相對(duì)路徑：相對(duì)路徑：例例2：D:/myweb/web/index.htm D:/myweb/img/wm.gif相對(duì)路徑：相對(duì)路徑： 絕對(duì)路徑與相對(duì)路徑(3)例例3:D:/myweb/web/zhang/index.htm D:/myweb/img/images/

15、wm.gif把絕對(duì)路徑轉(zhuǎn)化為相對(duì)路徑的時(shí)候，兩個(gè)文件絕對(duì)路徑中把絕對(duì)路徑轉(zhuǎn)化為相對(duì)路徑的時(shí)候，兩個(gè)文件絕對(duì)路徑中相同的部分忽略相同的部分忽略,只考慮他們不同之處。只考慮他們不同之處。相對(duì)路徑：相對(duì)路徑： 為了避免在制作網(wǎng)頁(yè)時(shí)出現(xiàn)路徑錯(cuò)誤，我們可以使用為了避免在制作網(wǎng)頁(yè)時(shí)出現(xiàn)路徑錯(cuò)誤，我們可以使用Frontpage或或dreamweaver的站點(diǎn)管理功能來(lái)管理站點(diǎn)。的站點(diǎn)管理功能來(lái)管理站點(diǎn)。站點(diǎn)中的網(wǎng)頁(yè)保存時(shí)將把圖片保存到站點(diǎn)中并自動(dòng)把絕對(duì)站點(diǎn)中的網(wǎng)頁(yè)保存時(shí)將把圖片保存到站點(diǎn)中并自動(dòng)把絕對(duì)路徑轉(zhuǎn)化為相對(duì)路徑，并且當(dāng)你在站點(diǎn)中移動(dòng)文件的時(shí)候，路徑轉(zhuǎn)化為相對(duì)路徑，并且當(dāng)你在站點(diǎn)中移動(dòng)文件的時(shí)候，與這

16、些文件關(guān)聯(lián)的連接路徑都會(huì)自動(dòng)更改。與這些文件關(guān)聯(lián)的連接路徑都會(huì)自動(dòng)更改。 建立超鏈接超鏈接的實(shí)現(xiàn)方法：將某個(gè)文本串或某幅圖像和其他超鏈接的實(shí)現(xiàn)方法：將某個(gè)文本串或某幅圖像和其他網(wǎng)頁(yè)的地址（網(wǎng)頁(yè)的地址（URL）聯(lián)系在一起。）聯(lián)系在一起。單擊此處單擊此處可獲得某某信息。可獲得某某信息。創(chuàng)建超鏈接：創(chuàng)建超鏈接： 其他其他Web服務(wù)器上的網(wǎng)頁(yè)文件服務(wù)器上的網(wǎng)頁(yè)文件 本地機(jī)器中網(wǎng)頁(yè)文件本地機(jī)器中網(wǎng)頁(yè)文件 同一個(gè)網(wǎng)頁(yè)文件中（書(shū)簽）同一個(gè)網(wǎng)頁(yè)文件中（書(shū)簽） 圖像地圖圖像地圖是另一種形式的超鏈接，允許將不同的圖像地圖是另一種形式的超鏈接，允許將不同的URL指定給一幅圖指定給一幅圖像的不同部分，使訪問(wèn)者根據(jù)不同

17、的圖像區(qū)域跳轉(zhuǎn)到不同的位置，像的不同部分，使訪問(wèn)者根據(jù)不同的圖像區(qū)域跳轉(zhuǎn)到不同的位置，這些區(qū)域稱(chēng)做這些區(qū)域稱(chēng)做“熱點(diǎn)熱點(diǎn)”，每一個(gè)熱點(diǎn)與一個(gè)超鏈接相對(duì)應(yīng)。，每一個(gè)熱點(diǎn)與一個(gè)超鏈接相對(duì)應(yīng)。如下圖汽車(chē)生產(chǎn)商的站點(diǎn)可以用新車(chē)的圖像地圖：當(dāng)站點(diǎn)訪問(wèn)者單如下圖汽車(chē)生產(chǎn)商的站點(diǎn)可以用新車(chē)的圖像地圖：當(dāng)站點(diǎn)訪問(wèn)者單擊擊“車(chē)子車(chē)子”時(shí)，就會(huì)顯示詳細(xì)說(shuō)明車(chē)子的網(wǎng)頁(yè)。時(shí)，就會(huì)顯示詳細(xì)說(shuō)明車(chē)子的網(wǎng)頁(yè)。 網(wǎng)頁(yè)布局（表格） 網(wǎng)頁(yè)布局（表格） 表格布局舉例補(bǔ)充利用單元格的合并與拆利用單元格的合并與拆分分 ，創(chuàng)建不規(guī)則的表格。，創(chuàng)建不規(guī)則的表格。單元格的不同填充色、邊單元格的不同填充色、邊框線顏色分割區(qū)域。框線顏色分割區(qū)域

18、。設(shè)置單元格屬性，單元格設(shè)置單元格屬性，單元格內(nèi)對(duì)象的排版方式。內(nèi)對(duì)象的排版方式。設(shè)置表格屬性，整個(gè)表格設(shè)置表格屬性，整個(gè)表格的排版方式。的排版方式。表格單位的設(shè)置8像素是絕對(duì)單位，不隨瀏覽器窗口尺寸變化而變化。像素是絕對(duì)單位，不隨瀏覽器窗口尺寸變化而變化。8% %是相對(duì)單位，隨著瀏覽器窗口尺寸變化而變化。是相對(duì)單位，隨著瀏覽器窗口尺寸變化而變化。0-0-顯示器分辯率值顯示器分辯率值0%-100%0%-100%表格有兩種度量單位：像素和表格有兩種度量單位：像素和% % 表格布局補(bǔ)充要用表格來(lái)布局網(wǎng)頁(yè)，首先應(yīng)決定表格在水平方向和要用表格來(lái)布局網(wǎng)頁(yè)，首先應(yīng)決定表格在水平方向和垂直方向上所需的單元格

19、數(shù)量，然后為需要跨越多行垂直方向上所需的單元格數(shù)量，然后為需要跨越多行或多列的對(duì)象合并單元格。或多列的對(duì)象合并單元格。大多數(shù)網(wǎng)頁(yè)布局采用了帶有大多數(shù)網(wǎng)頁(yè)布局采用了帶有的表格。的表格。 框架布局框架是一種將瀏覽器窗口劃分為功能獨(dú)立的多個(gè)區(qū)域的常框架是一種將瀏覽器窗口劃分為功能獨(dú)立的多個(gè)區(qū)域的常用方法。用方法。定義每個(gè)框架的大小、位置、名稱(chēng)和初始定義每個(gè)框架的大小、位置、名稱(chēng)和初始網(wǎng)頁(yè)，普通網(wǎng)頁(yè)提供每個(gè)框架的內(nèi)容。一個(gè)框架的超鏈接網(wǎng)頁(yè)，普通網(wǎng)頁(yè)提供每個(gè)框架的內(nèi)容。一個(gè)框架的超鏈接可以更改顯示在另一個(gè)框架中的網(wǎng)頁(yè)。可以更改顯示在另一個(gè)框架中的網(wǎng)頁(yè)。框架名稱(chēng)框架名稱(chēng) 初始網(wǎng)頁(yè)初始網(wǎng)頁(yè)vivaband.

20、htm 認(rèn)識(shí)框架集網(wǎng)頁(yè)是一種特殊的網(wǎng)頁(yè)，該網(wǎng)頁(yè)定義了整體的框架布局，是一種特殊的網(wǎng)頁(yè)，該網(wǎng)頁(yè)定義了整體的框架布局，但不提供實(shí)際內(nèi)容。但不提供實(shí)際內(nèi)容。VIVABAND 此網(wǎng)頁(yè)使用了框架，但您的瀏覽器不支持框架。 vivaband.htm 框架網(wǎng)頁(yè)的創(chuàng)建（1） 框架網(wǎng)頁(yè)的創(chuàng)建（2）分別為不同的框架設(shè)定初始網(wǎng)頁(yè)文件分別為不同的框架設(shè)定初始網(wǎng)頁(yè)文件bannerbanner頁(yè)頭頁(yè)頭.html.htmlContentsContents菜單菜單.htm.htmMain Main 檸檬寢室檸檬寢室.html.html 框架網(wǎng)頁(yè)的創(chuàng)建（3）在框架面板上選擇具體的框架或框架集，在屬性面板上設(shè)置框架或框架集屬性。

21、在框架面板上選擇具體的框架或框架集，在屬性面板上設(shè)置框架或框架集屬性。 框架網(wǎng)頁(yè)的保存需要分別保存每一個(gè)框架對(duì)應(yīng)的網(wǎng)頁(yè)文件，并要需要分別保存每一個(gè)框架對(duì)應(yīng)的網(wǎng)頁(yè)文件，并要保存保存“”文件本身。文件本身。 執(zhí)行執(zhí)行“文件文件|保存全保存全部部”命令命令,保存所有保存所有的框架和框架集的框架和框架集,以以虛框突出顯示的框虛框突出顯示的框架就是當(dāng)前需要保架就是當(dāng)前需要保存的框架。存的框架。 框架之間的超鏈接指定超鏈接目的網(wǎng)頁(yè)出現(xiàn)在哪個(gè)框架中。指定超鏈接目的網(wǎng)頁(yè)出現(xiàn)在哪個(gè)框架中。在框架網(wǎng)頁(yè)中，單擊某框架內(nèi)網(wǎng)頁(yè)上的超鏈接時(shí)，被在框架網(wǎng)頁(yè)中，單擊某框架內(nèi)網(wǎng)頁(yè)上的超鏈接時(shí)，被超鏈接所指定的網(wǎng)頁(yè)通常在另一個(gè)框

22、架中打開(kāi)，這個(gè)超鏈接所指定的網(wǎng)頁(yè)通常在另一個(gè)框架中打開(kāi)，這個(gè)框架稱(chēng)為框架稱(chēng)為。 網(wǎng)頁(yè)背景音樂(lè)處理盡量使用盡量使用mid格式的音樂(lè)文件，避免產(chǎn)生慢速網(wǎng)頁(yè)。格式的音樂(lè)文件，避免產(chǎn)生慢速網(wǎng)頁(yè)。 Dreamweaver本身沒(méi)有提供設(shè)置背景音樂(lè)的命令，需本身沒(méi)有提供設(shè)置背景音樂(lè)的命令，需要在代碼視圖中要在代碼視圖中之間直接輸入代碼。之間直接輸入代碼。 網(wǎng)頁(yè)背景音樂(lè)處理設(shè)置開(kāi)啟新窗口的超鏈接設(shè)置開(kāi)啟新窗口的超鏈接利用框架使網(wǎng)頁(yè)背景音樂(lè)連貫1. 把把index.htm重命名為重命名為index-content.htm2. 新建一個(gè)新建一個(gè) “上方固定上方固定”框架網(wǎng)頁(yè)框架網(wǎng)頁(yè)3. 下框架設(shè)置初始網(wǎng)頁(yè)為下框架

23、設(shè)置初始網(wǎng)頁(yè)為index-conten.htm利用框架使網(wǎng)頁(yè)背景音樂(lè)連貫4. 取消取消index-content網(wǎng)頁(yè)的背景音樂(lè)設(shè)置網(wǎng)頁(yè)的背景音樂(lè)設(shè)置5. 保存框架集網(wǎng)頁(yè)為保存框架集網(wǎng)頁(yè)為index.htm,上框架網(wǎng)頁(yè)為上框架網(wǎng)頁(yè)為index-top.htm6. 在在index-top.htm網(wǎng)頁(yè)中設(shè)置背景音樂(lè)網(wǎng)頁(yè)中設(shè)置背景音樂(lè)7. 設(shè)置上框架屬性設(shè)置上框架屬性:框架高度為框架高度為1像素像素, 不顯示邊框。不顯示邊框。 創(chuàng)建和使用表單表單能夠向網(wǎng)頁(yè)中添加文本框、表單能夠向網(wǎng)頁(yè)中添加文本框、單選按鈕、復(fù)選框、按鈕等用單選按鈕、復(fù)選框、按鈕等用戶(hù)界面控件。戶(hù)界面控件。每個(gè)網(wǎng)頁(yè)可以包含一個(gè)或多個(gè)表每

24、個(gè)網(wǎng)頁(yè)可以包含一個(gè)或多個(gè)表單，每個(gè)表單占據(jù)網(wǎng)頁(yè)中的一個(gè)單，每個(gè)表單占據(jù)網(wǎng)頁(yè)中的一個(gè)特定區(qū)域。特定區(qū)域。表單中必須有一個(gè)元素作為表單中必須有一個(gè)元素作為“提交提交”按鈕。按鈕。單擊單擊“提交提交”按鈕后，瀏覽器將數(shù)據(jù)傳送給服務(wù)器，站點(diǎn)服務(wù)器按鈕后，瀏覽器將數(shù)據(jù)傳送給服務(wù)器，站點(diǎn)服務(wù)器需要某種程序讀取這些數(shù)據(jù)并進(jìn)行處理。程序可能將數(shù)據(jù)保存在需要某種程序讀取這些數(shù)據(jù)并進(jìn)行處理。程序可能將數(shù)據(jù)保存在文件或數(shù)據(jù)庫(kù)中，也可能作為電子郵件發(fā)出等等。文件或數(shù)據(jù)庫(kù)中，也可能作為電子郵件發(fā)出等等。 應(yīng)用圖像作網(wǎng)頁(yè)背景選擇選擇的圖像文件的圖像文件選擇選擇圖像圖像 使用導(dǎo)航條交互式按鈕交互式按鈕 普通狀態(tài)普通狀態(tài) 鼠

25、標(biāo)經(jīng)過(guò)狀態(tài)鼠標(biāo)經(jīng)過(guò)狀態(tài) 鼠標(biāo)按鈕狀態(tài)鼠標(biāo)按鈕狀態(tài)在在Dreamweaver中，所有網(wǎng)頁(yè)中使用的圖像文件中，所有網(wǎng)頁(yè)中使用的圖像文件都必須保存在一個(gè)已經(jīng)定義好的本地站點(diǎn)中。都必須保存在一個(gè)已經(jīng)定義好的本地站點(diǎn)中。執(zhí)行執(zhí)行“插入插入|圖像對(duì)象圖像對(duì)象|導(dǎo)導(dǎo)航條航條”命令命令 創(chuàng)建交互式按鈕PhotoImpact 導(dǎo)出交互式按鈕圖像 設(shè)計(jì)各種網(wǎng)頁(yè)部件圖標(biāo)圖標(biāo)橫幅橫幅按鈕按鈕按鈕欄按鈕欄Rollover按鈕按鈕分隔條分隔條 層的使用網(wǎng)頁(yè)中的元素，如文本、圖像，都可以放置到網(wǎng)頁(yè)中的元素，如文本、圖像，都可以放置到中，層中，層不僅不僅具有具有表格的表格的平面布局網(wǎng)頁(yè)對(duì)象的功能平面布局網(wǎng)頁(yè)對(duì)象的功能，而且可

26、以而且可以使網(wǎng)頁(yè)中的使網(wǎng)頁(yè)中的對(duì)象對(duì)象在空間垂直方向（在空間垂直方向（Z軸）上互相重疊軸）上互相重疊，再配合時(shí)間線，再配合時(shí)間線（Timeline）的應(yīng)用可以做出很多效果，使網(wǎng)頁(yè)動(dòng)感十足，）的應(yīng)用可以做出很多效果，使網(wǎng)頁(yè)動(dòng)感十足，還可以配合行為（還可以配合行為（Behaviors），使得網(wǎng)頁(yè)在某種事件發(fā)生），使得網(wǎng)頁(yè)在某種事件發(fā)生時(shí)顯示隱藏的指定層等。時(shí)顯示隱藏的指定層等。用鼠標(biāo)拖動(dòng)的方法畫(huà)出一用鼠標(biāo)拖動(dòng)的方法畫(huà)出一個(gè)任意尺寸大小的層。個(gè)任意尺寸大小的層。繪制層按鈕繪制層按鈕 層的編輯激活圖層：激活圖層：?jiǎn)螕魣D層中任一位置，圖層只有被激活后單擊圖層中任一位置，圖層只有被激活后才可以插入對(duì)象。才

27、可以插入對(duì)象。 選取圖層選取圖層：?jiǎn)螕魣D層邊框或單擊文檔窗口狀態(tài)欄左側(cè)：?jiǎn)螕魣D層邊框或單擊文檔窗口狀態(tài)欄左側(cè)層標(biāo)記層標(biāo)記圖標(biāo)圖標(biāo) ，或單擊圖層圖標(biāo)，或單擊圖層圖標(biāo) 。 選中的圖層四周出現(xiàn)選中的圖層四周出現(xiàn)8個(gè)黑色的小方塊。個(gè)黑色的小方塊。圖層標(biāo)記圖層標(biāo)記閃爍插入光標(biāo)閃爍插入光標(biāo)黑色的圖層邊框黑色的圖層邊框 層的編輯移動(dòng)層移動(dòng)層 ：選中層時(shí)，可用鼠標(biāo)拖動(dòng)層的邊框移動(dòng)圖選中層時(shí)，可用鼠標(biāo)拖動(dòng)層的邊框移動(dòng)圖層的位置，或者在層的位置，或者在“層層”屬性面板中精確設(shè)置圖層的屬性面板中精確設(shè)置圖層的新位置（左和上的值）。新位置（左和上的值）。改變圖層尺寸改變圖層尺寸 ：選中圖層時(shí)，可用鼠標(biāo)拖動(dòng)圖層：選中圖

28、層時(shí)，可用鼠標(biāo)拖動(dòng)圖層四周的小方塊調(diào)整圖層的尺寸，或者在四周的小方塊調(diào)整圖層的尺寸，或者在“層層”屬性屬性面板中精確設(shè)置圖層的寬高尺寸（寬和高的值）。面板中精確設(shè)置圖層的寬高尺寸（寬和高的值）。 時(shí)間軸時(shí)間軸是一條貫穿時(shí)間的軸線時(shí)間軸是一條貫穿時(shí)間的軸線, ,時(shí)間軸動(dòng)畫(huà)是把動(dòng)畫(huà)對(duì)象時(shí)間軸動(dòng)畫(huà)是把動(dòng)畫(huà)對(duì)象放置在不同的層中放置在不同的層中, ,通過(guò)改變層的位置、大小、可見(jiàn)性和通過(guò)改變層的位置、大小、可見(jiàn)性和疊放順序等屬性來(lái)創(chuàng)建動(dòng)畫(huà)疊放順序等屬性來(lái)創(chuàng)建動(dòng)畫(huà)執(zhí)行執(zhí)行“窗口窗口| |時(shí)間軸時(shí)間軸”命令，調(diào)出時(shí)間軸面板命令，調(diào)出時(shí)間軸面板 制作時(shí)間軸動(dòng)畫(huà)1.1.插入一個(gè)層插入一個(gè)層2.2.在層中插入對(duì)象在

29、層中插入對(duì)象3. 3. 使用使用“窗口窗口| |時(shí)間軸時(shí)間軸”命令打開(kāi)時(shí)間軸面板命令打開(kāi)時(shí)間軸面板4.4.將層拖到時(shí)間軸的第將層拖到時(shí)間軸的第1 1幀上幀上5.5.選中第選中第1 1幀幀, ,將圖層拖到將圖層拖到動(dòng)畫(huà)開(kāi)始位置動(dòng)畫(huà)開(kāi)始位置6.6.選中第選中第1515幀幀, ,將圖層拖將圖層拖到動(dòng)畫(huà)結(jié)束位置到動(dòng)畫(huà)結(jié)束位置7.7.選中自動(dòng)播放復(fù)選框選中自動(dòng)播放復(fù)選框步驟步驟: : 行為行為是在網(wǎng)頁(yè)中進(jìn)行的一系列動(dòng)作行為是在網(wǎng)頁(yè)中進(jìn)行的一系列動(dòng)作,通過(guò)這些動(dòng)作實(shí)現(xiàn)用通過(guò)這些動(dòng)作實(shí)現(xiàn)用戶(hù)與頁(yè)面的交互戶(hù)與頁(yè)面的交互,使用使用Dreamweaver內(nèi)置的行為內(nèi)置的行為(實(shí)質(zhì)是實(shí)質(zhì)是JavaScript代碼代

30、碼), 用戶(hù)不需編寫(xiě)代碼用戶(hù)不需編寫(xiě)代碼,就可以實(shí)現(xiàn)交互和就可以實(shí)現(xiàn)交互和控制功能控制功能.行為由事件和動(dòng)作組成行為由事件和動(dòng)作組成,事件是動(dòng)作被觸發(fā)的條件事件是動(dòng)作被觸發(fā)的條件,動(dòng)作動(dòng)作是用于完成特定任務(wù)預(yù)先編好的是用于完成特定任務(wù)預(yù)先編好的JavaScript代碼代碼. 使用行為步驟步驟: :1.1.執(zhí)行執(zhí)行“窗口窗口| |行為行為”命命令令, ,打開(kāi)行為面板打開(kāi)行為面板2.2.選中要添加行為的對(duì)象選中要添加行為的對(duì)象, ,單擊加號(hào)按鈕單擊加號(hào)按鈕3.3.在彈出的動(dòng)作菜單中選在彈出的動(dòng)作菜單中選擇某個(gè)動(dòng)作擇某個(gè)動(dòng)作4.4.根據(jù)所選的動(dòng)作根據(jù)所選的動(dòng)作, ,在參在參數(shù)窗口中設(shè)置參數(shù)數(shù)窗口中設(shè)

31、置參數(shù)5.5.在事件菜單中為動(dòng)作選在事件菜單中為動(dòng)作選擇觸發(fā)事件擇觸發(fā)事件動(dòng)作菜單動(dòng)作菜單事件菜單事件菜單 利用圖層實(shí)現(xiàn)下拉菜單（1）圖層默認(rèn)為隱藏狀態(tài)圖層默認(rèn)為隱藏狀態(tài)步驟一：步驟一：分別為各個(gè)菜單項(xiàng)分別為各個(gè)菜單項(xiàng)創(chuàng)建對(duì)應(yīng)的下拉菜創(chuàng)建對(duì)應(yīng)的下拉菜單圖層。單圖層。 利用圖層實(shí)現(xiàn)下拉菜單（2）指定行為動(dòng)作：指定行為動(dòng)作：當(dāng)鼠標(biāo)指向菜單項(xiàng)時(shí)，當(dāng)鼠標(biāo)指向菜單項(xiàng)時(shí)，隱藏的指定圖層將被隱藏的指定圖層將被顯示，當(dāng)鼠標(biāo)移開(kāi)菜單顯示，當(dāng)鼠標(biāo)移開(kāi)菜單項(xiàng)時(shí)，顯示的指定圖層項(xiàng)時(shí)，顯示的指定圖層重被隱藏。重被隱藏。步驟二：步驟二：分別為各個(gè)菜單項(xiàng)分別為各個(gè)菜單項(xiàng)和下拉菜單圖層指和下拉菜單圖層指定行為動(dòng)作。定行為動(dòng)作

32、。 讓圖層中的對(duì)象沿路徑動(dòng)起來(lái)“修改修改| |時(shí)間軸時(shí)間軸| |錄錄制層路徑制層路徑”命令命令 讓圖層中的內(nèi)容動(dòng)起來(lái)（1）的創(chuàng)建：的創(chuàng)建：創(chuàng)建圖層，如創(chuàng)建圖層，如layer7選中該圖層，按住選中該圖層，按住Alt鍵的同時(shí)，在其鍵的同時(shí)，在其中創(chuàng)建其嵌套圖層。中創(chuàng)建其嵌套圖層。利用利用“剪輯剪輯”選項(xiàng)設(shè)置選項(xiàng)設(shè)置layer7圖層的可見(jiàn)區(qū)域圖層的可見(jiàn)區(qū)域 讓圖層中的內(nèi)容動(dòng)起來(lái)（2）起始幀起始幀結(jié)束幀結(jié)束幀選中圖層選中圖層Layer8，執(zhí)，執(zhí)行行“修改修改|時(shí)間軸時(shí)間軸|錄制錄制層路徑層路徑”命令，制作命令，制作該圖層從圖層該圖層從圖層Layer7底部移動(dòng)到圖層底部移動(dòng)到圖層Layer7頂部的運(yùn)頂部

33、的運(yùn)動(dòng)效果動(dòng)效果。 調(diào)整多個(gè)圖層的疊放順序選中圖層選中圖層Layer7，直接用鼠，直接用鼠標(biāo)將其拖拽到相應(yīng)層次。標(biāo)將其拖拽到相應(yīng)層次。 CSS樣式CSS（Cascading Style Sheet ）層疊式樣式）層疊式樣式表，是國(guó)際組織表，是國(guó)際組織W3C制定的擴(kuò)展制定的擴(kuò)展HTML功能的功能的標(biāo)準(zhǔn)，標(biāo)準(zhǔn)，CSS樣式廣泛適用于文本、圖形等網(wǎng)頁(yè)樣式廣泛適用于文本、圖形等網(wǎng)頁(yè)元素的格式化工作，方便網(wǎng)頁(yè)的制作和維護(hù)，元素的格式化工作，方便網(wǎng)頁(yè)的制作和維護(hù)，還能產(chǎn)生半透明圖像等特殊效果。還能產(chǎn)生半透明圖像等特殊效果。“”命令命令 CSS樣式嵌入式樣式表嵌入式樣式表:對(duì)某個(gè)具體的網(wǎng)頁(yè)定義的樣式對(duì)某個(gè)具體

34、的網(wǎng)頁(yè)定義的樣式,它的表現(xiàn)它的表現(xiàn)形式是直接將樣式插入到網(wǎng)頁(yè)的形式是直接將樣式插入到網(wǎng)頁(yè)的HTML代碼中，定義的代碼中，定義的樣式自動(dòng)應(yīng)用到網(wǎng)頁(yè)中。樣式自動(dòng)應(yīng)用到網(wǎng)頁(yè)中。外部樣式表：將外部樣式表：將CSS樣式保存為單獨(dú)的一個(gè)樣式保存為單獨(dú)的一個(gè)文件文件(.css)，網(wǎng)頁(yè)中可以創(chuàng)建對(duì)某個(gè)現(xiàn)成樣，網(wǎng)頁(yè)中可以創(chuàng)建對(duì)某個(gè)現(xiàn)成樣式表的鏈接，而且多個(gè)網(wǎng)頁(yè)可以使用同一個(gè)式表的鏈接，而且多個(gè)網(wǎng)頁(yè)可以使用同一個(gè)樣式表的樣式樣式表的樣式.局部應(yīng)用樣式表：也是對(duì)某個(gè)具體的網(wǎng)頁(yè)定義的樣式局部應(yīng)用樣式表：也是對(duì)某個(gè)具體的網(wǎng)頁(yè)定義的樣式,定義的樣式顯示在樣式表面板中定義的樣式顯示在樣式表面板中,可以選擇某段文本或可以選擇

35、某段文本或圖像使用所定義的樣式。圖像使用所定義的樣式。 去除超鏈接的下劃線選擇新建選擇新建CSS樣式命令樣式命令直接將樣式插直接將樣式插入到網(wǎng)頁(yè)的入到網(wǎng)頁(yè)的HTML代碼中代碼中 定義文字樣式選擇選擇“導(dǎo)出導(dǎo)出”命令，命令，導(dǎo)出為外部樣式表，導(dǎo)出為外部樣式表，在其它的網(wǎng)頁(yè)中可應(yīng)在其它的網(wǎng)頁(yè)中可應(yīng)用此樣式表的樣式用此樣式表的樣式 動(dòng)畫(huà)原理與制作的形成是由連續(xù)顯示數(shù)張圖片所造的視覺(jué)效果，其原理的形成是由連續(xù)顯示數(shù)張圖片所造的視覺(jué)效果，其原理與卡通影片是一樣的，我們可以設(shè)定每張圖片所停滯時(shí)間，與卡通影片是一樣的，我們可以設(shè)定每張圖片所停滯時(shí)間，從而造成不同的動(dòng)畫(huà)顯示速度。從而造成不同的動(dòng)畫(huà)顯示速度。當(dāng)

36、要制作一張動(dòng)畫(huà)時(shí)，可使用有支持當(dāng)要制作一張動(dòng)畫(huà)時(shí)，可使用有支持GIF格式的繪圖軟件來(lái)格式的繪圖軟件來(lái)制作圖像制作圖像(或掃描進(jìn)來(lái)的影像或掃描進(jìn)來(lái)的影像)，將這些構(gòu)成動(dòng)畫(huà)的連續(xù)數(shù)張，將這些構(gòu)成動(dòng)畫(huà)的連續(xù)數(shù)張圖像分別儲(chǔ)存成不同檔名的圖像分別儲(chǔ)存成不同檔名的GIF文檔，然後再使用動(dòng)畫(huà)制作文檔，然後再使用動(dòng)畫(huà)制作軟件，如軟件，如GIF Construction Set或或動(dòng)動(dòng)畫(huà)制作軟件來(lái)整合這些圖像，針對(duì)每張圖像設(shè)定相關(guān)的屬性畫(huà)制作軟件來(lái)整合這些圖像，針對(duì)每張圖像設(shè)定相關(guān)的屬性(如顯示的停滯時(shí)間如顯示的停滯時(shí)間)，以完成一幅動(dòng)畫(huà)的制作，且在這些軟，以完成一幅動(dòng)畫(huà)的制作，且在這些軟件中就可以直接觀看動(dòng)畫(huà)

37、的顯示。件中就可以直接觀看動(dòng)畫(huà)的顯示。 動(dòng)態(tài)Gif圖片的制作（1）工作窗口工作窗口對(duì)象管理器對(duì)象管理器幀窗格幀窗格 動(dòng)態(tài)Gif圖片的制作（2）：在啟動(dòng)在啟動(dòng)ulead gifanimator 程序時(shí)，會(huì)顯示一個(gè)啟程序時(shí)，會(huì)顯示一個(gè)啟動(dòng)向?qū)?lái)引導(dǎo)我們創(chuàng)建動(dòng)畫(huà)。動(dòng)向?qū)?lái)引導(dǎo)我們創(chuàng)建動(dòng)畫(huà)。 使用動(dòng)畫(huà)向?qū)е谱鲃?dòng)畫(huà)(1)步驟步驟1:1:設(shè)置畫(huà)布尺寸設(shè)置畫(huà)布尺寸步驟步驟2:2:選擇文件選擇文件步驟步驟3:3:設(shè)置幀延遲時(shí)間設(shè)置幀延遲時(shí)間將一系列靜態(tài)圖片連接生成動(dòng)將一系列靜態(tài)圖片連接生成動(dòng)畫(huà)畫(huà) 使用動(dòng)畫(huà)向?qū)е谱鲃?dòng)畫(huà)(2)編輯模式下的顯示編輯模式下的顯示步驟步驟5:輸出輸出gif動(dòng)畫(huà)動(dòng)畫(huà):執(zhí)行執(zhí)行“文件文件|

38、另存為另存為 |gif文件文件”命令命令步驟步驟4:在預(yù)覽模式下在預(yù)覽模式下觀看動(dòng)畫(huà)效果觀看動(dòng)畫(huà)效果 制作橫幅文字(1)先創(chuàng)建一個(gè)空白的動(dòng)畫(huà)文檔，然后在先創(chuàng)建一個(gè)空白的動(dòng)畫(huà)文檔，然后在 “ “幀幀”菜單菜單中選擇中選擇 “ “添加橫幅文本添加橫幅文本”在文本標(biāo)簽中在文本標(biāo)簽中設(shè)置字體、字設(shè)置字體、字號(hào)、顏色、陰號(hào)、顏色、陰影等效果影等效果 制作橫幅文字(2)設(shè)置文字動(dòng)畫(huà)效果設(shè)置文字動(dòng)畫(huà)效果設(shè)置幀畫(huà)面的延遲時(shí)間設(shè)置幀畫(huà)面的延遲時(shí)間添加霓虹效果添加霓虹效果最終效果最終效果 漸變動(dòng)畫(huà)（1）工作區(qū)（畫(huà)布）工作區(qū)（畫(huà)布）幀窗格幀窗格對(duì)象管理器對(duì)象管理器延時(shí)延時(shí) 漸變動(dòng)畫(huà)（2）添加圖像添加圖像改變畫(huà)布大小

39、改變畫(huà)布大小選定范圍工具：魔術(shù)棒選定范圍工具：魔術(shù)棒自動(dòng)創(chuàng)建自動(dòng)創(chuàng)建手動(dòng)創(chuàng)建手動(dòng)創(chuàng)建 用視頻片段制作 GIF 動(dòng)畫(huà)1. 創(chuàng)建一個(gè)新的空白動(dòng)畫(huà)。創(chuàng)建一個(gè)新的空白動(dòng)畫(huà)。2. 單擊標(biāo)準(zhǔn)工具欄上的單擊標(biāo)準(zhǔn)工具欄上的 “添加視頻添加視頻”按鈕，打開(kāi)按鈕，打開(kāi) “添加視頻文件添加視頻文件”對(duì)話(huà)框。對(duì)話(huà)框。3. 找到要用的影片文件并選中后，單找到要用的影片文件并選中后，單擊擊Duration按鈕。按鈕。4. Duration對(duì)話(huà)框打開(kāi)后，有兩個(gè)屬對(duì)話(huà)框打開(kāi)后，有兩個(gè)屬性需要定義性需要定義:要使用的起始和結(jié)束的視要使用的起始和結(jié)束的視頻段頻段, Mark in和和Mark out。通過(guò)預(yù)覽窗口和視頻控件，決定

40、起始通過(guò)預(yù)覽窗口和視頻控件，決定起始幀和結(jié)束幀的幀號(hào)幀和結(jié)束幀的幀號(hào), 在在Mark in和和Mark out中分別輸入中分別輸入.5. 單擊單擊OK。Duration對(duì)話(huà)框關(guān)閉，對(duì)話(huà)框關(guān)閉，返回到返回到“添加視頻文件添加視頻文件”對(duì)話(huà)框。再對(duì)話(huà)框。再單擊單擊OK，選擇的幀就被加載到，選擇的幀就被加載到 GIF Animator 中了。中了。 4 4、網(wǎng)頁(yè)特效制作、網(wǎng)頁(yè)特效制作 網(wǎng)頁(yè)特效所謂所謂“特效特效”是指用某種編輯語(yǔ)言編寫(xiě)，或用特效軟件是指用某種編輯語(yǔ)言編寫(xiě)，或用特效軟件編制的，實(shí)現(xiàn)某種網(wǎng)頁(yè)特殊效果的一段編程代碼。編制的，實(shí)現(xiàn)某種網(wǎng)頁(yè)特殊效果的一段編程代碼。JavaScript是一種擴(kuò)展

41、到是一種擴(kuò)展到HTML的腳本設(shè)計(jì)語(yǔ)言的腳本設(shè)計(jì)語(yǔ)言,它使網(wǎng)它使網(wǎng)頁(yè)開(kāi)發(fā)者可以更有效地控制頁(yè)面頁(yè)開(kāi)發(fā)者可以更有效地控制頁(yè)面,并能對(duì)用戶(hù)觸發(fā)事件并能對(duì)用戶(hù)觸發(fā)事件作出即時(shí)響應(yīng)作出即時(shí)響應(yīng),諸如單擊鼠標(biāo)、表單操作等諸如單擊鼠標(biāo)、表單操作等,而且這些都而且這些都不需要客戶(hù)機(jī)與服務(wù)器的交互通信不需要客戶(hù)機(jī)與服務(wù)器的交互通信,既為用戶(hù)提供了更既為用戶(hù)提供了更快速的操作快速的操作,又減小了服務(wù)器端的負(fù)擔(dān)。又減小了服務(wù)器端的負(fù)擔(dān)。JavaScript不不能脫離能脫離HTML而獨(dú)立存在而獨(dú)立存在,只有在支持只有在支持JavaScript的瀏覽的瀏覽器中器中,它才能作為它才能作為HTML頁(yè)面的一部分起作用頁(yè)面的一

42、部分起作用,但它增強(qiáng)但它增強(qiáng)了網(wǎng)頁(yè)的表現(xiàn)力。了網(wǎng)頁(yè)的表現(xiàn)力。 網(wǎng)頁(yè)特效制作許多網(wǎng)頁(yè)的特殊效果都是用許多網(wǎng)頁(yè)的特殊效果都是用來(lái)裝點(diǎn)的。不懂點(diǎn)編來(lái)裝點(diǎn)的。不懂點(diǎn)編程知識(shí)人要想使用這些特效就有些困難了，因此國(guó)內(nèi)共享軟程知識(shí)人要想使用這些特效就有些困難了，因此國(guó)內(nèi)共享軟件作者便寫(xiě)了許多便于使用的件作者便寫(xiě)了許多便于使用的Javascript模式程序，呼吸主模式程序，呼吸主頁(yè)秀就屬于這類(lèi)軟件。頁(yè)秀就屬于這類(lèi)軟件。呼吸主頁(yè)秀包含了窗口、鼠標(biāo)、文字、菜單等九類(lèi)共呼吸主頁(yè)秀包含了窗口、鼠標(biāo)、文字、菜單等九類(lèi)共350種種特效。特效。為了便于用戶(hù)的使用為了便于用戶(hù)的使用,既可既可以先對(duì)已生成的代碼進(jìn)行以先對(duì)已生成的代碼進(jìn)行效果預(yù)覽，也可以直接修效果預(yù)覽，