網(wǎng)頁主頁效果圖設(shè)計

1、項目三 主頁的設(shè)計與制作 子項目子項目3-13-1：主頁效果圖設(shè)計（：主頁效果圖設(shè)計（1 1） 。 知識技能目標(biāo)知識技能目標(biāo) 1 1、會進行站點素材的查找與分類管理；、會進行站點素材的查找與分類管理； 2 2、會使用、會使用PhotoshopPhotoshop進行網(wǎng)站主頁的版面設(shè)計；進行網(wǎng)站主頁的版面設(shè)計； 3 3能將設(shè)計好的效果在能將設(shè)計好的效果在DreamweaverDreamweaver中進行預(yù)覽。中進行預(yù)覽。 工作任務(wù)列表工作任務(wù)列表 任務(wù)二：任務(wù)二：使用使用PhotoshopPhotoshop作出規(guī)劃好的主頁效果圖，作出規(guī)劃好的主頁效果圖， 并以并以class.psdclass.ps

2、d為文件名存于為文件名存于C:ClassWebC:ClassWeb文件夾下文件夾下 任務(wù)三：任務(wù)三：將制作好的主頁效果圖保存為網(wǎng)頁形式，將制作好的主頁效果圖保存為網(wǎng)頁形式， 并以文件名并以文件名index.htmlindex.html存于存于C:ClassWebC:ClassWeb文件夾下，文件夾下， 同時在同時在DreamweaverDreamweaver中進行預(yù)覽中進行預(yù)覽 任務(wù)一：任務(wù)一：準(zhǔn)備工作準(zhǔn)備工作(創(chuàng)建動態(tài)站點、設(shè)置主目創(chuàng)建動態(tài)站點、設(shè)置主目 錄錄) 完成步驟完成步驟 （1 1）在）在C C盤下創(chuàng)建盤下創(chuàng)建ClassWebClassWeb文件夾，并將其設(shè)為主目錄。文件夾，并將其設(shè)

3、為主目錄。 （2 2）創(chuàng)建名為）創(chuàng)建名為“MyClassMyClass”的動態(tài)站點。的動態(tài)站點。 由于機房機器安裝了還原卡，所以從這次課開始，每次由于機房機器安裝了還原卡，所以從這次課開始，每次 下課后都要將下課后都要將ClassWebClassWeb文件夾打包上傳到教師機，同時自己文件夾打包上傳到教師機，同時自己 帶走一份。帶走一份。 以后在每次上課前需要做如下三項工作：以后在每次上課前需要做如下三項工作： 將帶走的壓縮包拷貝到將帶走的壓縮包拷貝到C C盤上，解壓；盤上，解壓； 將將C:ClassWebC:ClassWeb文件夾設(shè)為主目錄；文件夾設(shè)為主目錄； 創(chuàng)建名為創(chuàng)建名為“MyClass

4、”MyClass”的動態(tài)站點。的動態(tài)站點。 任務(wù)一任務(wù)一 準(zhǔn)備工作準(zhǔn)備工作 具體要求具體要求 根據(jù)規(guī)劃方案，在作業(yè)本上畫出布局草圖，使用根據(jù)規(guī)劃方案，在作業(yè)本上畫出布局草圖，使用PhotoshopPhotoshop作出作出 規(guī)劃好的主頁效果圖，以規(guī)劃好的主頁效果圖，以class.psdclass.psd為文件名存于為文件名存于C:ClassWebC:ClassWeb 文件夾下。文件夾下。 完成步驟完成步驟 1 1、進入?yún)⒖颊军c，從平面構(gòu)成和色彩兩方面對要借鑒的頁面進、進入?yún)⒖颊军c，從平面構(gòu)成和色彩兩方面對要借鑒的頁面進 行分析行分析 ； 2 2、依據(jù)規(guī)劃及借鑒完成主頁的版面布局，畫出布局草圖；

5、、依據(jù)規(guī)劃及借鑒完成主頁的版面布局，畫出布局草圖； 3 3、采用借鑒與創(chuàng)新相結(jié)合的方法進行網(wǎng)站主頁效果圖設(shè)計、采用借鑒與創(chuàng)新相結(jié)合的方法進行網(wǎng)站主頁效果圖設(shè)計 ； 任務(wù)二任務(wù)二 主頁效果圖制作主頁效果圖制作 （1 1）啟動）啟動PhotoshopCSPhotoshopCS，新建文檔。，新建文檔。 啟動啟動PhotoshopCSPhotoshopCS，執(zhí)行，執(zhí)行“文件文件”“新建新建”命令，在彈出的命令，在彈出的 “新建新建”對話框的名稱框中輸入：班級網(wǎng)站主頁效果圖，對話框的名稱框中輸入：班級網(wǎng)站主頁效果圖，寬度：寬度： 10031003像素，高度：像素，高度：850850像素像素，分辨率：，分

6、辨率：7272像素像素/ /英寸，顏色模式：英寸，顏色模式： RGBRGB顏色，背景內(nèi)容：白色，如圖所示。（注意高度要視內(nèi)容和顏色，背景內(nèi)容：白色，如圖所示。（注意高度要視內(nèi)容和 版面而定，一般情況下不超過版面而定，一般情況下不超過3 3屏為宜）屏為宜） 任務(wù)二任務(wù)二 主頁效果圖制作主頁效果圖制作 （2 2）設(shè)計網(wǎng)頁）設(shè)計網(wǎng)頁LogoLogo、BannerBanner和整體效果圖和整體效果圖 。下圖僅為參考：。下圖僅為參考： 任務(wù)二任務(wù)二 主頁效果圖制作主頁效果圖制作 用于制作用于制作 輪番滾動輪番滾動 圖片效果圖片效果 制作圖片制作圖片 無縫滾動無縫滾動 效果效果 任務(wù)二任務(wù)二 主頁效果圖制

7、作主頁效果圖制作 大家可以參考優(yōu)秀網(wǎng)站的結(jié)構(gòu)、版式設(shè)計、色彩搭配進行大家可以參考優(yōu)秀網(wǎng)站的結(jié)構(gòu)、版式設(shè)計、色彩搭配進行 自己的主頁設(shè)計。自己的主頁設(shè)計。 必須包含的部分：必須包含的部分： 導(dǎo)航欄中必須包含導(dǎo)航欄中必須包含班級新聞、班級相冊、留言板班級新聞、班級相冊、留言板三個三個 部分；部分； 主頁頁面中必須包含主頁頁面中必須包含公共欄、管理員登錄、班級新聞、公共欄、管理員登錄、班級新聞、 用于制作圖片輪番滾動的圖片部分以及用于制作圖片無縫用于制作圖片輪番滾動的圖片部分以及用于制作圖片無縫 滾動效果的一組圖片、網(wǎng)絡(luò)導(dǎo)航、版權(quán)信息欄（上包含加滾動效果的一組圖片、網(wǎng)絡(luò)導(dǎo)航、版權(quán)信息欄（上包含加 入

8、收藏和聯(lián)系我們項），入收藏和聯(lián)系我們項），但形式不拘泥于一種，可自行發(fā)但形式不拘泥于一種，可自行發(fā) 揮創(chuàng)造。揮創(chuàng)造。 在對話框中圖像格式選取在對話框中圖像格式選取GIFGIF。 4 4、效果圖制作完畢，進行文件保存及效果預(yù)覽、效果圖制作完畢，進行文件保存及效果預(yù)覽 （1 1）先將效果圖以）先將效果圖以“class.psd”class.psd”為文件名存于為文件名存于 C:ClassWebC:ClassWeb文件夾下；文件夾下； （2 2）再使用）再使用“文件文件”/“/“存儲為存儲為webweb所用格式所用格式”命令，將彈命令，將彈 出的出的 “ “存儲為存儲為webweb所用格式所用格式”對

9、話框，如圖所示：對話框，如圖所示： 任務(wù)二任務(wù)二 主頁效果圖制作主頁效果圖制作 （3 3）單擊單擊“存儲存儲”按鈕，在彈出的按鈕，在彈出的“將優(yōu)化結(jié)果存儲為將優(yōu)化結(jié)果存儲為” 對話框中進行各項的設(shè)置，存儲位置為自己的站點文件夾，對話框中進行各項的設(shè)置，存儲位置為自己的站點文件夾， 文件名取為文件名取為index.htmlindex.html，“保存類型保存類型” ” 選選“HTMLHTML和圖像和圖像 （* *.html.html）”, ,選好后，單擊選好后，單擊“保存保存”按鈕即可保存網(wǎng)頁。按鈕即可保存網(wǎng)頁。 （4 4）在在dreamweaverdreamweaver打開剛才存儲的打開剛才存

10、儲的index.htmlindex.html，使用，使用 F12F12鍵檢查網(wǎng)頁效果是否滿足需要，若不滿足，再到鍵檢查網(wǎng)頁效果是否滿足需要，若不滿足，再到 class.psdclass.psd文件中進行修改，直到滿意為止。文件中進行修改，直到滿意為止。 任務(wù)二任務(wù)二 主頁效果圖制作主頁效果圖制作 班級網(wǎng)站的設(shè)計要求班級網(wǎng)站的設(shè)計要求 （1 1）網(wǎng)站主頁設(shè)計新穎別致，能夠突出班級特征。）網(wǎng)站主頁設(shè)計新穎別致，能夠突出班級特征。 （2 2）內(nèi)容豐富、健康充實，思想積極向上，能夠反映班）內(nèi)容豐富、健康充實，思想積極向上，能夠反映班 級風(fēng)貌。級風(fēng)貌。 （3 3）不但要反映出班級整體風(fēng)貌，還要體現(xiàn)出班級

11、中的）不但要反映出班級整體風(fēng)貌，還要體現(xiàn)出班級中的 每一位成員都是這個大家庭中不可缺少的一份子。每一位成員都是這個大家庭中不可缺少的一份子。 （4 4）色彩搭配和諧，網(wǎng)頁布局合理。）色彩搭配和諧，網(wǎng)頁布局合理。 （5 5）鏈接準(zhǔn)確無誤）鏈接準(zhǔn)確無誤 （6 6）寫出設(shè)計方案。）寫出設(shè)計方案。 （7 7）最后要剔除網(wǎng)站中未使用的素材和未鏈接的網(wǎng)頁）最后要剔除網(wǎng)站中未使用的素材和未鏈接的網(wǎng)頁 任務(wù)二任務(wù)二 主頁效果圖制作主頁效果圖制作 總結(jié)與作業(yè)總結(jié)與作業(yè) 作業(yè)作業(yè) 總結(jié)總結(jié) 1 1、使用、使用PSPS進行效果圖的制作進行效果圖的制作 2 2、主頁效果圖另存為網(wǎng)頁形式、主頁效果圖另存為網(wǎng)頁形式 1

12、1、將自己規(guī)劃的班級網(wǎng)站布局草圖畫于作業(yè)本上；、將自己規(guī)劃的班級網(wǎng)站布局草圖畫于作業(yè)本上； 2 2、繼續(xù)完成效果圖的制作，并加以完善、繼續(xù)完成效果圖的制作，并加以完善 項目三 主頁的設(shè)計與制作 子項目子項目3-13-1：主頁效果圖設(shè)計（：主頁效果圖設(shè)計（2 2） 知識技能目標(biāo)知識技能目標(biāo) 3 3、會將切片處理后的文件進行存儲管理及網(wǎng)頁效果的預(yù)覽。、會將切片處理后的文件進行存儲管理及網(wǎng)頁效果的預(yù)覽。 1 1、會使用、會使用PhotoshopPhotoshop中的切片工具對效果圖進行切片處理中的切片工具對效果圖進行切片處理; ; 2 2、會進行切片的屬性設(shè)置、會進行切片的屬性設(shè)置; ; 工作任務(wù)列

13、表工作任務(wù)列表 任務(wù)一：任務(wù)一：用實例圖練習(xí)切片的使用及存儲管理用實例圖練習(xí)切片的使用及存儲管理 任務(wù)二：任務(wù)二：將自己制作好的班級網(wǎng)站效果圖進行將自己制作好的班級網(wǎng)站效果圖進行 切片處理切片處理,并進行效果預(yù)覽并進行效果預(yù)覽 準(zhǔn)備工作 1 1、將、將ClassWebClassWeb壓縮包拷貝到壓縮包拷貝到C C盤上，解壓；盤上，解壓； 2 2、將、將ClassWebClassWeb設(shè)置為主目錄；設(shè)置為主目錄； 3 3、建立名為、建立名為MyClassMyClass的動態(tài)站點。的動態(tài)站點。 （一）利用（一）利用PhotoshopPhotoshop切割網(wǎng)頁圖片應(yīng)遵循的原則切割網(wǎng)頁圖片應(yīng)遵循的原則

14、 1 1、最好依靠參考線。、最好依靠參考線。切圖時更要用好參考線。參考線切圖時更要用好參考線。參考線 能保證我們切出圖在同一表格中的尺寸統(tǒng)一協(xié)調(diào)，有能保證我們切出圖在同一表格中的尺寸統(tǒng)一協(xié)調(diào)，有 效避免效避免“留白留白”和和“爆邊爆邊”。 2 2、 LogoLogo和和BannerBanner必切。必切。如果效果圖中存在如果效果圖中存在LogoLogo和和 Banner,Banner,我們必須切片這部分，主要是為預(yù)先設(shè)計的我們必須切片這部分，主要是為預(yù)先設(shè)計的 LogoLogo和和BannerBanner留下空間，在留下空間，在DreamWeaverDreamWeaver整合時最好不整合時最好

15、不 用用LogoLogo和和BannerBanner的切片，而是直接用的切片，而是直接用LogoLogo和和BannerBanner原原 文檔，這是提高文檔，這是提高LogoLogo和和BannerBanner效果的需要。效果的需要。 完成工作任務(wù)所需知識點（P65） 3 3、虛線和轉(zhuǎn)角形狀必切。、虛線和轉(zhuǎn)角形狀必切。虛線和轉(zhuǎn)角形狀在虛線和轉(zhuǎn)角形狀在DreamWeaverDreamWeaver 不能實現(xiàn)，只能使用不能實現(xiàn)，只能使用PhotoshopPhotoshop切片。切片。 4 4、漸變必切。、漸變必切。這也是這也是DreamWeaverDreamWeaver實現(xiàn)不了的。實現(xiàn)不了的。 5

16、5、大圖必切。、大圖必切。大的圖像必須切分成均勻圖，這樣可以提大的圖像必須切分成均勻圖，這樣可以提 高網(wǎng)頁下載速度。高網(wǎng)頁下載速度。 6 6、特殊文字效果必切。、特殊文字效果必切。除黑體和宋體外，其他字體必須除黑體和宋體外，其他字體必須 切片。切片。DreamWeaverDreamWeaver下最有效的字體只有宋體和黑體，其下最有效的字體只有宋體和黑體，其 它字體瀏覽器也可能不兼容。它字體瀏覽器也可能不兼容。 完成工作任務(wù)所需知識點（P65） 7 7、導(dǎo)航條必切。、導(dǎo)航條必切。一般情況下導(dǎo)航條都是特別設(shè)計的，一般情況下導(dǎo)航條都是特別設(shè)計的， 其效果在其效果在Dream WeaverDream

17、Weaver下不能實現(xiàn)，因此必須形成切下不能實現(xiàn)，因此必須形成切 片供后期使用。片供后期使用。 8 8、有效存儲切片。、有效存儲切片。存儲切片的文件夾必須位于站點的存儲切片的文件夾必須位于站點的 根目錄下，文件夾名必須是英文名字（站點文件夾根目錄下，文件夾名必須是英文名字（站點文件夾 名）名）。存儲切片時用。存儲切片時用“文件文件存儲為存儲為webweb所用格式所用格式”命命 令。切片存儲格式要求一般存為令。切片存儲格式要求一般存為GifGif格式。格式。GifGif占用體占用體 積小。要求較高的圖像存儲為積小。要求較高的圖像存儲為JPEGJPEG格式，格式，JPGJPG格式顯格式顯 示更多的

18、圖片細節(jié)。示更多的圖片細節(jié)。 完成工作任務(wù)所需知識點（P65） （二）切片的種類（二）切片的種類 1 1、切片的分類、切片的分類 依據(jù)切片是否是自動生成而劃分為如下兩類：依據(jù)切片是否是自動生成而劃分為如下兩類： （1 1）用戶切片）用戶切片：用戶使用切片工具創(chuàng)建的切片（圖標(biāo)為藍用戶使用切片工具創(chuàng)建的切片（圖標(biāo)為藍 色）。色）。 （2 2）自動切片：）自動切片：用戶在創(chuàng)建切片時由軟件自動形成的切片用戶在創(chuàng)建切片時由軟件自動形成的切片 （圖標(biāo)為灰色）。（圖標(biāo)為灰色）。 2 2、兩種切片的區(qū)別（、兩種切片的區(qū)別（P66P66） 完成工作任務(wù)所需知識點（P65） 3 3、自動切片轉(zhuǎn)換為用戶切片、自動切

19、片轉(zhuǎn)換為用戶切片 建議在進行效果圖切片處理時，都切分成用戶切片。也可建議在進行效果圖切片處理時，都切分成用戶切片。也可 以將自動切片轉(zhuǎn)換成用戶切片。方法有兩種：以將自動切片轉(zhuǎn)換成用戶切片。方法有兩種： 法一：法一：選擇這個切片，使用切片選項工具欄中【提升到用戶切選擇這個切片，使用切片選項工具欄中【提升到用戶切 片】按鈕，如圖所示。片】按鈕，如圖所示。 法二：法二：右擊選擇的自動切片，在彈出的快捷菜單中選擇右擊選擇的自動切片，在彈出的快捷菜單中選擇“提升提升 到用戶切片到用戶切片”命令。命令。 完成工作任務(wù)所需知識點（P64） 利用利用PhotoshopPhotoshop中的切片工具對下發(fā)的網(wǎng)頁

20、效果圖進行中的切片工具對下發(fā)的網(wǎng)頁效果圖進行 切片處理切片處理 將將 C盤根目錄下的盤根目錄下的exercise1.psd和和exercise2.psd文件文件 進行切片處理。進行切片處理。 準(zhǔn)備工作：準(zhǔn)備工作：在站點文件夾在站點文件夾ClassWeb下新建文件夾下新建文件夾exercises1 和和exercises2 （一）（一） exercise1.psd進行切片處理的步驟進行切片處理的步驟 1、利用、利用PhotoshopCS打開打開exercise1.psd文件文件; 2、選取左側(cè)工具箱里的切片工具，如下圖所示：、選取左側(cè)工具箱里的切片工具，如下圖所示： 任務(wù)一 切片練習(xí) 3 3、

21、使用使用“切片工具切片工具”在標(biāo)題部分的左右在標(biāo)題部分的左右 各切一刀，使用各切一刀，使用“切片選取工具切片選取工具”雙擊右雙擊右 側(cè)部分（或右擊這部分，在彈出的快捷菜側(cè)部分（或右擊這部分，在彈出的快捷菜 單中選取單中選取“編輯切片選項編輯切片選項”），在彈出的），在彈出的 面板中設(shè)置切片類型為面板中設(shè)置切片類型為無圖像無圖像。因為該部。因為該部 分是純色，為了在網(wǎng)頁中顯示效果相同，分是純色，為了在網(wǎng)頁中顯示效果相同， 在在“切片選項切片選項”對話框的下側(cè)對話框的下側(cè)“切片背景切片背景 類型類型”下拉列表框中選取其他，用工具箱下拉列表框中選取其他，用工具箱 中的吸管工具吸取效果圖中中的吸管工具

22、吸取效果圖中0202切片的顏色，切片的顏色， 從而設(shè)置切片背景與效果圖中切片顏色一從而設(shè)置切片背景與效果圖中切片顏色一 致，這樣該部分輸出成網(wǎng)頁后將由透明占致，這樣該部分輸出成網(wǎng)頁后將由透明占 位符和同色背景色代替，如圖所示（見下位符和同色背景色代替，如圖所示（見下 頁）。頁）。 任務(wù)一 切片練習(xí) 注意這里選項的選取注意這里選項的選取 任務(wù)一 切片練習(xí) 4 4、切割的導(dǎo)航條按鈕：由于導(dǎo)航條上各按鈕大小基本相同，選、切割的導(dǎo)航條按鈕：由于導(dǎo)航條上各按鈕大小基本相同，選 取切片工具選項工具欄中的取切片工具選項工具欄中的“切片樣式切片樣式”為固定大小，設(shè)置寬為固定大小，設(shè)置寬 度為度為“115p11

23、5px”x”，高度為，高度為“42px42px”，如圖所示。注意將切片和被，如圖所示。注意將切片和被 切對象對齊。切的時候要小心，可放大圖像，避免切片之間重切對象對齊。切的時候要小心，可放大圖像，避免切片之間重 疊。疊。 任務(wù)一 切片練習(xí) 提示：提示：若切割的過程中發(fā)現(xiàn)切片錯誤，使用鍵盤上的【若切割的過程中發(fā)現(xiàn)切片錯誤，使用鍵盤上的【deletedelete】 鍵刪除當(dāng)前選區(qū)。鍵刪除當(dāng)前選區(qū)。 5 5、設(shè)置切片選項工具欄中的樣式為、設(shè)置切片選項工具欄中的樣式為“正常正?！保懈罘椒ㄍ?，切割方法同 上，完成左側(cè)圖像的切割，形成切片上，完成左側(cè)圖像的切割，形成切片1616， 同樣方法完成右同樣方法

24、完成右 側(cè)的切割，完成切片側(cè)的切割，完成切片1717、1818和和1919，其中切片，其中切片1818為單色，處理為單色，處理 方法同切片方法同切片0202，這樣在輸出成網(wǎng)頁后將由透明占位符和同色，這樣在輸出成網(wǎng)頁后將由透明占位符和同色 背景色代替，加快網(wǎng)頁速度。背景色代替，加快網(wǎng)頁速度。 6 6、將上方產(chǎn)生的一些自動切片提升為用戶切片，并將為單、將上方產(chǎn)生的一些自動切片提升為用戶切片，并將為單 色的切片進行處理，處理方法同切片色的切片進行處理，處理方法同切片0202，這樣在輸出成網(wǎng)頁，這樣在輸出成網(wǎng)頁 后將由透明占位符和同色背景色代替，加快網(wǎng)頁速度。后將由透明占位符和同色背景色代替，加快網(wǎng)頁

25、速度。 任務(wù)一 切片練習(xí) 7 7、切割圖像左下角部分（牡丹所在部分），經(jīng)觀察發(fā)現(xiàn)，切割圖像左下角部分（牡丹所在部分），經(jīng)觀察發(fā)現(xiàn)， 圖層的大小正好與切片的大小一致，如果某個圖層的范圍正圖層的大小正好與切片的大小一致，如果某個圖層的范圍正 好是要切割的大小，則選中要切割的圖層，好是要切割的大小，則選中要切割的圖層，執(zhí)行執(zhí)行“圖圖 層層”“基于圖層的切片基于圖層的切片”命令命令，從而完成切片的切割。，從而完成切片的切割。 8、采用合適的方法完成、采用合適的方法完成“墨妙亭墨妙亭”、“弇山堂弇山堂”和和“版權(quán)版權(quán) 所有所有”區(qū)域的切割。區(qū)域的切割。 提示：提示：一定要使用一定要使用“放大工具放大工具

26、”檢查各切片間是否有重疊現(xiàn)檢查各切片間是否有重疊現(xiàn) 象。象。 任務(wù)一 切片練習(xí) 9 9、完成導(dǎo)航欄中【休閑】按鈕的超鏈接。、完成導(dǎo)航欄中【休閑】按鈕的超鏈接。 超鏈接的設(shè)置方法有多種，在完成切片的切割后，可以完成超鏈接的設(shè)置方法有多種，在完成切片的切割后，可以完成 其超鏈接工作。其超鏈接工作。 方法：方法：選取工具欄中的選取工具欄中的“切片選取工具切片選取工具”，雙擊【休閑】按，雙擊【休閑】按 鈕所在的切片，彈出鈕所在的切片，彈出“切片選項切片選項”對話框，并在對話框內(nèi)完對話框，并在對話框內(nèi)完 成參數(shù)的設(shè)置，由于成參數(shù)的設(shè)置，由于“休閑休閑”頁面還未完成，這里我們設(shè)置頁面還未完成，這里我們設(shè)置

27、 空鏈接（空鏈接（# #），目標(biāo)為），目標(biāo)為_blank_blank，表示在新窗口中打開該鏈接，表示在新窗口中打開該鏈接 。 任務(wù)一 切片練習(xí) 1010、切片輸出。、切片輸出。 執(zhí)行執(zhí)行“文件文件”“存為存為WebWeb所有格式所有格式”命令，此時將優(yōu)化命令，此時將優(yōu)化 的文件以的文件以GIFGIF格式進行存儲，在格式進行存儲，在“將優(yōu)化結(jié)果存儲為將優(yōu)化結(jié)果存儲為”對話對話 框中，選取框中，選取C:ClassWebexercises1C:ClassWebexercises1文件夾，將優(yōu)化后的結(jié)文件夾，將優(yōu)化后的結(jié) 果存儲在該文件夾中，各選項的設(shè)置為：果存儲在該文件夾中，各選項的設(shè)置為： 文件名

28、：文件名：exercises1.htmlexercises1.html 保存類型：保存類型：HTMLHTML和圖像（和圖像（* *.html.html） 設(shè)置：默認設(shè)置設(shè)置：默認設(shè)置 切片：所有切片切片：所有切片 任務(wù)一 切片練習(xí) 1111、按下【保存】按鈕后，即可在、按下【保存】按鈕后，即可在exercises1exercises1文件中產(chǎn)生一文件中產(chǎn)生一 個網(wǎng)頁文件個網(wǎng)頁文件exercieses1.htmlexercieses1.html，及一個保存切片圖片文件的，及一個保存切片圖片文件的 文件夾文件夾imagesimages。打開。打開imagesimages文件夾，不難發(fā)現(xiàn)各切片圖片文

29、文件夾，不難發(fā)現(xiàn)各切片圖片文 件名有數(shù)字序號件名有數(shù)字序號0101、0202等作為標(biāo)記。等作為標(biāo)記。 1212、啟動、啟動DreamweaverDreamweaver，在，在DreamweaverDreamweaver中打開中打開 exercise1.htmlexercise1.html，按下【，按下【F12F12】鍵進行效果圖預(yù)覽?！挎I進行效果圖預(yù)覽。 任務(wù)一 切片練習(xí) 1 1、將、將C C盤根目錄下的盤根目錄下的exercises2.psdexercises2.psd文件進行切片處文件進行切片處 理，并將切片處理好的文件以理，并將切片處理好的文件以exercises2.htmlexerci

30、ses2.html為文為文 件名存于件名存于C:ClassWebexercises2C:ClassWebexercises2文件夾下文件夾下 注意：切割時切片的編號注意：切割時切片的編號 2 2、將自己制作好的班級網(wǎng)站主頁效果圖利用切片工、將自己制作好的班級網(wǎng)站主頁效果圖利用切片工 具進行切割。并將切片處理好的文件以具進行切割。并將切片處理好的文件以index.htmlindex.html為為 文件名存于文件名存于C:ClassWebC:ClassWeb文件夾下文件夾下 課堂實踐 總結(jié)與作業(yè)總結(jié)與作業(yè) 作業(yè)作業(yè) 總結(jié)總結(jié) 使用使用PhotoshopPhotoshop對效果圖進行切片處理及存儲對

31、效果圖進行切片處理及存儲 1、繼續(xù)完善班級網(wǎng)站主頁效果圖，并對班級網(wǎng)站效果、繼續(xù)完善班級網(wǎng)站主頁效果圖，并對班級網(wǎng)站效果 圖進行切片圖進行切片 ，同時進行效果預(yù)覽，同時進行效果預(yù)覽 2、P71同步訓(xùn)練二、習(xí)題同步訓(xùn)練二、習(xí)題 項目三 主頁的設(shè)計與制作 子項目子項目3-23-2：主頁制作（特殊效果的制作）：主頁制作（特殊效果的制作） 4 4、會使用、會使用JavascriptJavascript代碼完成圖片輪番顯示、無縫滾動效果的制作代碼完成圖片輪番顯示、無縫滾動效果的制作 知識技能目標(biāo)知識技能目標(biāo) 3 3、會利用、會利用APAP元素、時間軸和行為技術(shù)完成運動廣告的制作元素、時間軸和行為技術(shù)完成

32、運動廣告的制作 。 1 1、會使用行為技術(shù)完成主頁中背景音樂的插入；、會使用行為技術(shù)完成主頁中背景音樂的插入； 2 2、會使用、會使用MarqueeMarquee標(biāo)簽制作滾動字幕；標(biāo)簽制作滾動字幕；; ; 工作任務(wù)列表工作任務(wù)列表 任務(wù)一：任務(wù)一：為主頁插入背景音樂為主頁插入背景音樂 任務(wù)二：任務(wù)二：制作滾動公告欄制作滾動公告欄 任務(wù)四：任務(wù)四：制作圖片輪番顯示效果制作圖片輪番顯示效果 任務(wù)五：任務(wù)五：制作圖片連續(xù)滾動效果制作圖片連續(xù)滾動效果 任務(wù)三：任務(wù)三：制作運動廣告制作運動廣告 效果展示效果展示 準(zhǔn)備工作 1 1、將帶走的、將帶走的ClassWebClassWeb壓縮包解壓壓縮包解壓,

33、,并設(shè)并設(shè)ClassWebClassWeb文文 件夾為主目錄；件夾為主目錄； 2 2、建立名為、建立名為“Myclass”Myclass”的動態(tài)站點；的動態(tài)站點； 3 3、在站點文件夾下新建、在站點文件夾下新建mediamedia文件夾，并在文件夾，并在mediamedia 文件下新建文件下新建musicmusic文件夾；文件夾； 4 4、利用搜索引擎搜索自己喜歡的背景音樂（、利用搜索引擎搜索自己喜歡的背景音樂（midmid格格 式或式或wavwav格式，不要采用格式，不要采用mp3mp3格式格式），將搜索到的），將搜索到的 背景音樂以背景音樂以bg.midbg.mid（或（或bg.wavbg

34、.wav）為文件名存于）為文件名存于 musicmusic文件夾下。文件夾下。 給網(wǎng)站主頁插入背景音樂給網(wǎng)站主頁插入背景音樂 步驟步驟1 1、在在DreamWeaverDreamWeaver中打開存于站點文件夾中打開存于站點文件夾ClassWebClassWeb下下 的的index.htmlindex.html文件，文件，進入進入“設(shè)計設(shè)計”視圖方式視圖方式，然后然后選擇選擇 頁面左下角的頁面左下角的標(biāo)簽，以選中整個頁面（表示將行標(biāo)簽，以選中整個頁面（表示將行 為添加給整個文檔為添加給整個文檔bodybody部分）部分）； 步驟步驟2 2、執(zhí)行執(zhí)行“窗口窗口”/“/“行為行為”命令，在窗口的右

35、側(cè)打開命令，在窗口的右側(cè)打開 行為面板。在行為面板中單擊行為面板。在行為面板中單擊 按鈕，在彈出的菜單按鈕，在彈出的菜單 中選擇中選擇”建議不在使用建議不在使用”/“/“播放聲音播放聲音”命令，彈出命令，彈出“播播 放聲音放聲音”對話框，如圖所示。對話框，如圖所示。 工作任務(wù)一為主頁插入背景音樂 步驟步驟3 3、單擊單擊“播放聲音播放聲音”對話框中的對話框中的“瀏覽瀏覽”按鈕，按鈕， 彈出彈出“選擇文件選擇文件”對話框，在對話框中選擇存放于對話框，在對話框中選擇存放于 musicmusic文件夾中的文件夾中的bg.mid(bg.mid(或或bg.wav) bg.wav) 文件，單擊文件，單擊

36、“確定確定”按鈕。按鈕。 步驟步驟4 4、檢查檢查“行為行為”面板中的事件是否為面板中的事件是否為“onLoad”onLoad” （表示主頁加載就播放聲音），若不是，在事件下（表示主頁加載就播放聲音），若不是，在事件下 拉列表框中選取該事件。拉列表框中選取該事件。 工作任務(wù)一為主頁插入背景音樂 步驟步驟5 5、選擇插入的聲音文件（一般位于所插背景音樂選擇插入的聲音文件（一般位于所插背景音樂 的主頁下方），在的主頁下方），在“屬性屬性”面板中單擊面板中單擊“參數(shù)參數(shù)”按鈕，按鈕， 打開參數(shù)窗口，設(shè)置其參數(shù)，后按打開參數(shù)窗口，設(shè)置其參數(shù)，后按“確定確定”按鈕，如圖按鈕，如圖 所示。所示。 工作任務(wù)

37、一為主頁插入背景音樂 1、選、選 取取 該該 聲聲 音音 文文 件件 2、單擊、單擊“參數(shù)參數(shù)”按鈕按鈕 3、設(shè)置以下參數(shù)、設(shè)置以下參數(shù) 各參數(shù)的含義：各參數(shù)的含義： LOOP LOOP 音樂是否循環(huán)播放音樂是否循環(huán)播放 AUTOSTART AUTOSTART 音樂是否自動播放音樂是否自動播放 MASTETSOUND MASTETSOUND 允許將多個允許將多個標(biāo)識組合起標(biāo)識組合起 來，來， 作為一個進行控制作為一個進行控制 HIDDEN HIDDEN 是否完全隱藏媒體播放器，若沒是否完全隱藏媒體播放器，若沒 有隱藏，則會顯示出系統(tǒng)默認的媒體播放插件有隱藏，則會顯示出系統(tǒng)默認的媒體播放插件 工

38、作任務(wù)一為主頁插入背景音樂 認識行為認識行為： 1 1、什么是行為？、什么是行為？ 行為的特點是強大的網(wǎng)頁交互功能。它行為的特點是強大的網(wǎng)頁交互功能。它是事件與動作是事件與動作 的彼此結(jié)合的彼此結(jié)合。是。是基于基于JavaScriptJavaScript來實現(xiàn)動態(tài)網(wǎng)頁和交互的。來實現(xiàn)動態(tài)網(wǎng)頁和交互的。 一個行為是由一個事件觸發(fā)一個動作組成的，因此行為的一個行為是由一個事件觸發(fā)一個動作組成的，因此行為的 基本元素有兩個：事件和動作?；驹赜袃蓚€：事件和動作。 例如，插入背景音樂，此時的頁面加載稱為事件，播例如，插入背景音樂，此時的頁面加載稱為事件，播 放音樂稱為動作，一般的行為都是要放音樂稱為

39、動作，一般的行為都是要由事件來激活動作由事件來激活動作。 完成工作任務(wù)一所需的知識 2 2、行為面板、行為面板 ： 在在DreamwaeverDreamwaever中，對行為的添加和控制主要通中，對行為的添加和控制主要通 過過“行為行為”面板來實現(xiàn)。選擇面板來實現(xiàn)。選擇“窗口窗口”/“/“行為行為”命命 令，打開行為面板，如圖所示。令，打開行為面板，如圖所示。 顯示設(shè)置事件顯示設(shè)置事件 完成工作任務(wù)一所需的知識 3 3、添加行為、添加行為 ： 用戶可以將行為添加給整個文檔（用戶可以將行為添加給整個文檔（bodybody部分），也可部分），也可 以添加給鏈接、圖像、表單等對象或任何其他以添加給鏈

40、接、圖像、表單等對象或任何其他HTMLHTML元素。元素。 每個事件可以指定多個動作。動作按順序列表依次每個事件可以指定多個動作。動作按順序列表依次 發(fā)生。各事件的含義如下表所示發(fā)生。各事件的含義如下表所示： 完成工作任務(wù)一所需的知識 事件（事件（Events）說說 明明 OnBlur取消選中對象時 OnClick單擊對象 OndblClick雙擊對象 OnError發(fā)生錯誤時 OnFocus選中指定對象時 OnKeyDown按下任意鍵盤鍵時 OnKeyPress按下并釋放任意鍵盤鍵時 OnKeyUp按下鍵盤鍵后釋放時 OnLoad圖像或頁面載入完成時 OnMouseDown按下光標(biāo)鍵時 On

41、MouseMove光標(biāo)在指定對象上移動時 OnMouseOut光標(biāo)離開指定對象時 OnMouseOver光標(biāo)剛開始指向指定對象時 OnMouseUp釋放按下的光標(biāo)鍵 OnSubmit提交表單時 onUnload離開頁面時 完成工作任務(wù)一所需的知識 4 4、編輯行為、編輯行為 ： 在添加了行為以后，可以改變觸發(fā)動作的事件、添在添加了行為以后，可以改變觸發(fā)動作的事件、添 加或刪除動作以及改變動作的參數(shù)等。加或刪除動作以及改變動作的參數(shù)等。 修改事件修改事件：只需在事件下拉列表框中進行選取即可：只需在事件下拉列表框中進行選取即可 修改動作修改動作：在行為面板中右擊（或雙擊）欲修改的動：在行為面板中右

42、擊（或雙擊）欲修改的動 作，在彈出的快捷菜單中選取作，在彈出的快捷菜單中選取“編輯行為編輯行為”命令，在命令，在 彈出的窗口中進行修改即可。彈出的窗口中進行修改即可。 完成任務(wù)所需的知識 工作任務(wù)一課堂實踐 為自己的班級網(wǎng)站主頁添加彈出信息窗口，使為自己的班級網(wǎng)站主頁添加彈出信息窗口，使 之在主頁面加載時即彈出信息，如下圖所示。之在主頁面加載時即彈出信息，如下圖所示。 制作滾動公告欄制作滾動公告欄 步驟步驟1 1、將需制作滾動通知處的原來切片刪除，在刪除之前將需制作滾動通知處的原來切片刪除，在刪除之前 記下其高度和寬度；記下其高度和寬度； 步驟步驟2 2、選擇選擇“插入記錄插入記錄”/“/“標(biāo)

43、簽標(biāo)簽”命令，在命令，在HTMLHTML標(biāo)簽下標(biāo)簽下 的頁元素右側(cè)選取的頁元素右側(cè)選取marqueemarquee，單擊，單擊“插入插入”按鈕，如圖所示。按鈕，如圖所示。 工作任務(wù)二制作滾動公告欄 步驟步驟3 3、切換到代碼視圖方式，將光標(biāo)定位于切換到代碼視圖方式，將光標(biāo)定位于 標(biāo)簽之間，輸入滾動的文字標(biāo)簽之間，輸入滾動的文字, ,當(dāng)滾動的當(dāng)滾動的 文字多行時，文字多行時，每一行文字后加每一行文字后加htmlhtml換行標(biāo)識符換行標(biāo)識符； 步驟步驟4 4、使用使用“窗口窗口”/“/“標(biāo)簽檢查器標(biāo)簽檢查器”命令，單擊命令，單擊“屬性屬性”選選 項卡，單擊項卡，單擊“屬性屬性”中中“未分類未分類”

44、前的前的“+”+”，展開，展開marqueemarquee 標(biāo)簽的屬性，進行屬性設(shè)置，如圖所示。標(biāo)簽的屬性，進行屬性設(shè)置，如圖所示。 屬性值各參數(shù)設(shè)置如下：屬性值各參數(shù)設(shè)置如下： behaviorbehavior：alternatealternate directiondirection：rightright looploop： -1-1 stylestyle： font:14px; color:red; font:14px; color:red; 工作任務(wù)二制作滾動公告欄 direction direction 參數(shù)：參數(shù)：表示滾動的方向，默認為表示滾動的方向，默認為left left 工作

45、任務(wù)二制作滾動公告欄 BehaviorBehavior參數(shù)：表示滾動的方式參數(shù)：表示滾動的方式 工作任務(wù)二制作滾動公告欄 looploop 表示循環(huán)的次數(shù)，值是正整數(shù)，默認為無限循環(huán)，默表示循環(huán)的次數(shù)，值是正整數(shù)，默認為無限循環(huán)，默 認值為無限。認值為無限?！?1”-1”也為無限也為無限 工作任務(wù)二制作滾動公告欄 scrollamountscrollamount 表示運動速度，值是正整數(shù)，單位為像素，表示運動速度，值是正整數(shù)，單位為像素， 默認為默認為6 6，即每次移動，即每次移動6 6像素的距離像素的距離, ,數(shù)值越小移動速度越數(shù)值越小移動速度越 慢。慢。 Scrolldelay Scrol

46、ldelay 用于設(shè)定兩次滾動操作之間的間隔時間，單用于設(shè)定兩次滾動操作之間的間隔時間，單 位為毫秒。如果要讓滾動看起來流暢，數(shù)值應(yīng)該盡量小。位為毫秒。如果要讓滾動看起來流暢，數(shù)值應(yīng)該盡量小。 heightheight、widthwidth 表示運動區(qū)域（滾動字幕）的高度和寬度，表示運動區(qū)域（滾動字幕）的高度和寬度， 值是正整數(shù)（單位是像素）或百分?jǐn)?shù)，默認值是正整數(shù)（單位是像素）或百分?jǐn)?shù)，默認width=100% width=100% heightheight為標(biāo)簽內(nèi)元素的高度。為標(biāo)簽內(nèi)元素的高度。 Style Style 設(shè)置字幕內(nèi)容的樣式。如設(shè)置字幕文字大小為設(shè)置字幕內(nèi)容的樣式。如設(shè)置字幕

47、文字大小為1212像像 素，則輸入素，則輸入“font:12px;”font:12px;”。 工作任務(wù)二制作滾動公告欄 步驟步驟5、設(shè)置鼠標(biāo)放上去時字幕停止，移開時字幕流動的、設(shè)置鼠標(biāo)放上去時字幕停止，移開時字幕流動的 效果。效果。各參數(shù)設(shè)置完畢，設(shè)置鼠標(biāo)行為。各參數(shù)設(shè)置完畢，設(shè)置鼠標(biāo)行為。 進入進入“行為行為”面板，單擊面板，單擊“顯示所顯示所 有事件有事件”按鈕，出現(xiàn)事件，選取按鈕，出現(xiàn)事件，選取 其中的其中的onMouseOver和和 onMouseOut兩個事件兩個事件 顯顯 示示 所所 有有 事事 件件 按按 鈕鈕 onMouseOveronMouseOver事件設(shè)置鼠標(biāo)移動事件設(shè)置

48、鼠標(biāo)移動 到滾動字幕時的動作，常設(shè)置為到滾動字幕時的動作，常設(shè)置為 停止?jié)L動。設(shè)置為停止?jié)L動。設(shè)置為this.stop();this.stop(); onMouseOutonMouseOut事件設(shè)置鼠標(biāo)離開滾事件設(shè)置鼠標(biāo)離開滾 動字幕時的動作，常設(shè)置為開始動字幕時的動作，常設(shè)置為開始 滾動。設(shè)置為滾動。設(shè)置為this.start();this.start(); 工作任務(wù)二制作滾動公告欄 制作運動廣告制作運動廣告( (需用到需用到APAP元素和時間軸元素和時間軸) ) 1 1、 制作簡單路徑的運動廣告制作簡單路徑的運動廣告 步驟步驟1 1、準(zhǔn)備工作：、準(zhǔn)備工作：自己制作或網(wǎng)上搜索自己制作或網(wǎng)上搜

49、索二幅二幅用來制作運動廣用來制作運動廣 告效果的圖片，將其以告效果的圖片，將其以move1move1和和move2move2為文件主名存于站點根為文件主名存于站點根 目錄（目錄（ClassWebClassWeb）下的）下的imagesimages文件夾中；文件夾中； 步驟步驟2 2、打開需放置運動廣告的網(wǎng)頁文件：、打開需放置運動廣告的網(wǎng)頁文件：打開打開index.htmlindex.html網(wǎng)網(wǎng) 頁文件；頁文件； 步驟步驟3 3、插入、插入APAP元素：元素：選擇選擇“插入對象插入對象”/“/“布局對象布局對象”/“AP /“AP Div”Div”命令，在網(wǎng)頁文件中插入命令，在網(wǎng)頁文件中插入A

50、PAP元素；（插入元素；（插入AP元素元素的另一的另一 種方法：選擇種方法：選擇“窗口窗口”/“/“插入插入”命令，在文檔編輯窗口的上命令，在文檔編輯窗口的上 方將出現(xiàn)如下圖所示的工具欄，選中其中的方將出現(xiàn)如下圖所示的工具欄，選中其中的“布局布局”項，選項，選 取其中的取其中的“繪制繪制AP Div”AP Div”按鈕）按鈕） 工作任務(wù)三運動廣告的制作 繪制繪制AP元素按鈕就是我元素按鈕就是我 步驟步驟4 4：向：向APAP元素中插入圖像：元素中插入圖像：選中選中APAP元素，使用元素，使用“插入記插入記 錄錄”/“/“圖像圖像”命令，在彈出的命令，在彈出的“圖像標(biāo)簽輔助功能屬性圖像標(biāo)簽輔助功

51、能屬性” 對話框的對話框的“替換文件替換文件”框中輸入文本（也可以不輸），詳細框中輸入文本（也可以不輸），詳細 說明框中可根據(jù)需要進行輸入或不輸，這里我們在替換文本說明框中可根據(jù)需要進行輸入或不輸，這里我們在替換文本 框中輸入框中輸入“班級文學(xué)班級文學(xué)”后按后按“確定確定”按鈕。按鈕。 工作任務(wù)三運動廣告的制作 步驟步驟5 5：將圖像移入將圖像移入APAP元素中，調(diào)整元素中，調(diào)整APAP元素的大小與圖像的元素的大小與圖像的 大小一致；大小一致； 步驟步驟6 6：選中選中APAP元素及其內(nèi)的圖像，使用元素及其內(nèi)的圖像，使用“修改修改”/“/“時間時間 軸軸”/“/“添加對象到時間軸添加對象到時間

52、軸”命令（或選中命令（或選中AP元素元素及其內(nèi)的圖及其內(nèi)的圖 像，右擊，在彈出的快捷菜單中選取像，右擊，在彈出的快捷菜單中選取“添加到時間軸添加到時間軸”命命 令），此時將在窗口下方彈出令），此時將在窗口下方彈出“時間軸時間軸”屬性對話框；屬性對話框； 工作任務(wù)三運動廣告的制作 步驟步驟7 7：插入一個關(guān)鍵幀：插入一個關(guān)鍵幀：將最后一幀拖長到將最后一幀拖長到5050幀，將幀，將“播放播放 頭頭”拖到拖到1010幀處，右擊動畫條，在彈出的菜單中選幀處，右擊動畫條，在彈出的菜單中選“增加關(guān)增加關(guān) 鍵幀鍵幀”命令（或按下命令（或按下CtrlCtrl鍵，在動畫條上單擊，這時就在鍵，在動畫條上單擊，這時

53、就在1010 幀處插入了一個關(guān)鍵幀）。同樣的分別在幀處插入了一個關(guān)鍵幀）。同樣的分別在2020幀、幀、3030幀和幀和4040幀幀 處增加關(guān)鍵幀。處增加關(guān)鍵幀。 步驟步驟8 8：選中第選中第1010幀，將幀，將APAP元素（包括圖像）拖向合適位置；元素（包括圖像）拖向合適位置； 在時間軸上選第在時間軸上選第2020幀，將幀，將APAP元素（包括圖像）拖向另一合適元素（包括圖像）拖向另一合適 位置；在時間軸上選第位置；在時間軸上選第3030幀，將幀，將APAP元素（包括圖像）拖向另元素（包括圖像）拖向另 一合適位置；在時間軸上選第一合適位置；在時間軸上選第4040幀，將幀，將APAP元素（包括圖

54、像）元素（包括圖像） 拖向另一合適位置；在時間軸上選第拖向另一合適位置；在時間軸上選第5050幀，將幀，將APAP元素（包括元素（包括 圖像）拖回起始位置。圖像）拖回起始位置。 步驟步驟9 9：若希望有更復(fù)雜的動畫路徑，可多定義一些關(guān)鍵幀及若希望有更復(fù)雜的動畫路徑，可多定義一些關(guān)鍵幀及 在畫面中的位置。在畫面中的位置。 工作任務(wù)三運動廣告的制作 步驟步驟1212：按中時間軸中部的按中時間軸中部的“ ”“ ”按鈕，即可觀察動按鈕，即可觀察動 畫效果。畫效果。 步驟步驟1313：按按F12F12鍵預(yù)覽效果鍵預(yù)覽效果 思考：我們發(fā)現(xiàn)廣告圖像運動的速度較快，如何改變運動思考：我們發(fā)現(xiàn)廣告圖像運動的速度

55、較快，如何改變運動 的速度呢？的速度呢？ 工作任務(wù)三運動廣告的制作 步驟步驟1111：勾選時間軸屬性中的自動播放和循環(huán)兩個選項。勾選時間軸屬性中的自動播放和循環(huán)兩個選項。 步驟步驟1515：給時間軸加入交互（當(dāng)鼠標(biāo)放到圖像上時，圖：給時間軸加入交互（當(dāng)鼠標(biāo)放到圖像上時，圖 像停止運動，當(dāng)鼠標(biāo)離開圖像時，圖像繼續(xù)運動）像停止運動，當(dāng)鼠標(biāo)離開圖像時，圖像繼續(xù)運動） （1 1）選中動畫條，打開行為面板，單擊行為面板中的添選中動畫條，打開行為面板，單擊行為面板中的添 加行為按鈕加行為按鈕“ ”“ ”，在彈出的快捷菜單中選，在彈出的快捷菜單中選“播放時間播放時間 軸軸”動作，從彈出的動作，從彈出的“播放

56、時間軸播放時間軸”對話框中選擇要播對話框中選擇要播 放的時間軸，單擊放的時間軸，單擊“確定確定”按鈕，如圖所示：按鈕，如圖所示： 工作任務(wù)三運動廣告的制作 步驟步驟1414：改變廣告運動的速度：改變廣告運動的速度： 將時間軸屬性欄中的將時間軸屬性欄中的Fps(Frame per second)Fps(Frame per second)框中的值框中的值 改?。J值為改?。J值為1515），即可改變運動速度。），即可改變運動速度。 （2 2）將默認的鼠標(biāo)事件改變?yōu)閷⒛J的鼠標(biāo)事件改變?yōu)閛nMouseOutonMouseOut事件（即鼠標(biāo)離事件（即鼠標(biāo)離 開時，圖像運動）。開時，圖像運動）。 同

57、樣操作，再次選同樣操作，再次選“停止時間軸停止時間軸”動作，改變動作，改變onclickonclick事件事件 為為onMouseOveronMouseOver事件。事件。 （即鼠標(biāo)放到圖像上時，圖像停止（即鼠標(biāo)放到圖像上時，圖像停止 運動）；這樣就完成了當(dāng)鼠標(biāo)指針移到圖像上時，圖像停運動）；這樣就完成了當(dāng)鼠標(biāo)指針移到圖像上時，圖像停 止，當(dāng)鼠標(biāo)移開圖像時，圖像運動，完成交互的效果。止，當(dāng)鼠標(biāo)移開圖像時，圖像運動，完成交互的效果。 步驟步驟1616：完成廣告圖片的交替變換效果：完成廣告圖片的交替變換效果 （1 1）選中要交替圖像的）選中要交替圖像的APAP元素及圖像。元素及圖像。 （2 2）在

58、）在“行為行為”面板中單擊面板中單擊“添加行為添加行為”按鈕，在彈出的按鈕，在彈出的 快捷菜單中選擇快捷菜單中選擇“交換圖像交換圖像”命令。命令。 工作任務(wù)三運動廣告的制作 （3 3）在彈出的交換圖像對話框中，單擊在彈出的交換圖像對話框中，單擊“瀏覽瀏覽”按鈕，把按鈕，把 當(dāng)鼠標(biāo)移上后替換的圖像選中。勾選當(dāng)鼠標(biāo)移上后替換的圖像選中。勾選“預(yù)先載入圖像預(yù)先載入圖像”復(fù)復(fù) 選框，如圖所示。選框，如圖所示。 工作任務(wù)三運動廣告的制作 要確保這項出現(xiàn)喲！要確保這項出現(xiàn)喲！ 工作任務(wù)三運動廣告的制作 （4 4） 再次單擊再次單擊“添加行為添加行為”按鈕，在彈出的快捷菜單中選按鈕，在彈出的快捷菜單中選 “

59、恢復(fù)交換圖像恢復(fù)交換圖像”，從而完成鼠標(biāo)離開后又變回原來的圖，從而完成鼠標(biāo)離開后又變回原來的圖 章章 像；像； 步驟步驟17 17 為運動廣告加入超鏈接，使之鏈接到對應(yīng)的頁面中。為運動廣告加入超鏈接，使之鏈接到對應(yīng)的頁面中。 （1 1）選中選中APAP元素內(nèi)的圖像。元素內(nèi)的圖像。 （2 2）在圖像在圖像“屬性屬性”面板的面板的“鏈接鏈接”后的文本框中單擊后的文本框中單擊 瀏覽按鈕，選中所要鏈接的網(wǎng)頁文件，若想鏈接到其他網(wǎng)瀏覽按鈕，選中所要鏈接的網(wǎng)頁文件，若想鏈接到其他網(wǎng) 站中，在文本框內(nèi)輸入網(wǎng)址即可，如要鏈接到新浪網(wǎng)，則站中，在文本框內(nèi)輸入網(wǎng)址即可，如要鏈接到新浪網(wǎng)，則 在文本框中輸入在文本框

60、中輸入http:/http:/即可。即可。 2 2 制作復(fù)雜路徑的動畫制作復(fù)雜路徑的動畫 若按上述方法創(chuàng)建一個復(fù)雜路徑的動畫，創(chuàng)建一個個關(guān)鍵幀的方若按上述方法創(chuàng)建一個復(fù)雜路徑的動畫，創(chuàng)建一個個關(guān)鍵幀的方 法比較麻煩，我們通過使用法比較麻煩，我們通過使用錄制錄制APAP元素的時間軸運動路徑元素的時間軸運動路徑的方法的方法 來完成：來完成： 步驟步驟1 1 使用使用“插入記錄插入記錄”/“/“布局對象布局對象”/“AP/“AP元素元素”命令，插入命令，插入 一個新一個新AP元素元素； 步驟步驟2 選中剛插入的選中剛插入的APAP元素，使用元素，使用“插入記錄插入記錄”/“/“圖像圖像”命令，命令，