電子商務(wù)網(wǎng)頁制作08課件

1、主編：謝嶸網(wǎng)頁中除了可以添加圖片和超鏈接以外，為了讓頁面更生動，更有吸引力，我們還可以為網(wǎng)頁添加動態(tài)效果。該項目就是學(xué)習(xí)如何制作網(wǎng)頁動態(tài)效果。行為是用來動態(tài)響應(yīng)用戶操作、改變當(dāng)前頁面效果或是執(zhí)行特定任務(wù)的一種辦法。對象是產(chǎn)生行為的主體。web中的很多元素都可以成了對象，例如：整個HTML文檔、插入的一個圖像、一段文本、一個媒體文檔等。事件是觸發(fā)動態(tài)效果的條件。web事件分為不同的種類。有的與鼠標有關(guān)，有的與鍵盤有關(guān)，如鼠標單擊、鍵盤某個鍵按下。有的事件還和web關(guān)于，如web下載完畢，web切換等。對于同一個對象，不同版本的網(wǎng)站頁面瀏覽器支持的事件種類和多少也是不一樣的。 項目8 制作網(wǎng)頁動態(tài)

2、效果 項目導(dǎo)學(xué) 體驗活動一：使用行為制作頁面活動任務(wù)：在頁面的公告欄處使用滾動字母效果。活動指導(dǎo)：如果想要在網(wǎng)頁里顯示最新信息、新聞、通知、布告等較長的文字信息，而又不想占用太多的網(wǎng)頁空間，可以使用滾動公告欄。頁面中動態(tài)效果不易過多，適當(dāng)?shù)奶砑涌梢晕秊g覽者的興趣，在適當(dāng)?shù)奈恢弥谱鲃討B(tài)效果不失為網(wǎng)頁增添亮點。使用Dreamweaver為用戶提供的（ScrollableArea）插件可以快速便捷地制作出滾動公告欄。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用行為制作頁面活動步驟：安裝插件。打開Dreamweaver cs4選擇工具欄中的 “擴展Dreamweaver”按鈕，選擇“擴展管理器”選項

3、，打開擴展管理器。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用行為制作頁面活動步驟：打開Adobe extension manager cs4 選擇“文件”菜單中的“安裝擴展”命令。在“選取要安裝的擴展”對話框中找到“scrollablearea.mxp”文件并打開。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用行為制作頁面活動步驟：安裝“DHTML Scrollable Area”擴展。安裝“DHTML Scrollable Area”擴展后如圖所示，表示安裝操作已完成，并重啟Dreamweaver。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用行為制作頁面活動步驟：設(shè)置滾動公告欄，在Dream

4、weaver cs4中打開網(wǎng)上書店頁面，光標定位于公告欄處。選擇“命令”菜單中的“dhtml AP Scroll area”命令。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用行為制作頁面活動步驟：在彈出的對話框中設(shè)置各參數(shù)。選擇“content”選項卡填充其內(nèi)容。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用行為制作頁面活動步驟：使用“標簽選擇器”插入marquee標簽。把光標插入點放在需要插入滾動字幕的地方。單擊“插入”面板的“標簽選擇器”。選擇 marquee標簽，點擊“插入”按鈕。轉(zhuǎn)換到代碼視圖。把光標插入點放在 marquee標簽內(nèi)。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用行為制作頁

5、面活動步驟：選擇“窗口”菜單中選擇“標簽檢查器”。在窗口右邊的面板中選擇“屬性”，單擊“未分類”前面的“”。點擊behavior設(shè)置項右邊的下拉箭頭，選擇滾動字幕內(nèi)容的運動方式。此處我們選擇“scroll”。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用行為制作頁面活動步驟：設(shè)置direction屬性設(shè)置字幕內(nèi)容的滾動方向，此處向上滾動，選擇“up”。scrollamount屬性設(shè)置字幕滾動的速度。此處直接輸入數(shù)值“1”。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用行為制作頁面活動步驟：scrolldelay屬性設(shè)置字幕內(nèi)容滾動時停頓的時間，單位為毫秒。此處設(shè)置為1毫秒。width屬性設(shè)置滾動字

6、幕的寬度。此處設(shè)為100。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用行為制作頁面活動步驟：style屬性設(shè)置字幕內(nèi)容的樣式。此處設(shè)置字幕文字大小為14，輸入了“font：14px；”。loop屬性設(shè)置字幕內(nèi)容滾動次數(shù)，默認值為無限?！?1”也為無限。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用行為制作頁面活動步驟：設(shè)置2個行為。onMouseOver事件設(shè)置鼠標移動到滾動字幕時的動作，常設(shè)置為停止?jié)L動。onMouseOut事件設(shè)置鼠標離開滾動字幕時的動作，常設(shè)置為開始滾動。在Dreamweaver cs4中需要打開“行為”面板設(shè)置。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動一：使用行為制作頁面活動

7、步驟：在IE中瀏覽該頁面，此處為由下往上滾動顯示的文字。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動二：插入動畫圖片活動任務(wù)：在頁面中插入GIF動畫?；顒又笇?dǎo)：通過插入GIF動畫圖片實現(xiàn)動畫效果。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動二：插入動畫圖片活動步驟：將光標定位于需要加入gif圖片的地方。選擇“插入”菜單中的圖像命令。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動二：插入動畫圖片活動步驟：在選擇圖像源文件中選擇圖片。將圖片出入到頁面中，并在“屬性”面板中調(diào)整大小及位置。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動二：插入動畫圖片活動步驟：在IE中瀏覽效果。 項目8 制作網(wǎng)頁動態(tài)效果 活動小結(jié)完成體驗活動二后，填寫

8、下表 項目8 制作網(wǎng)頁動態(tài)效果 通過內(nèi)置編輯器改變圖像的大小的幾個關(guān)鍵步驟1定位需要插入圖片的位置2選擇“ ”菜單，“ ”選項命令；3. 在彈出“ ”對話框；4. 5. 在IE瀏覽器中預(yù)覽。 體驗活動三：插入FLASH動畫活動任務(wù)：通過菜單及屬性面板設(shè)置在頁面中插入Flash動畫?；顒又笇?dǎo)：Flash動畫是網(wǎng)頁上最流行的動畫格式。在DW CS4中，F(xiàn)lash動畫也是最常用的多媒體插件之一，它將聲音、圖像和動畫等內(nèi)容加入到一個文件中，并能制作較好的動畫效果，同時還使用了優(yōu)化的算法將多媒體數(shù)據(jù)進行壓縮，使文件變得很小，因此，非常適合在網(wǎng)上傳播。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動三：插入FLASH

9、動畫活動步驟：將光標移至所需插入Flash動畫的位置，選擇“插入”菜單下“媒體”選項中的SWF命令，打開“選擇文件”對話框。選擇所需插入的Flash動畫，單擊“確定”按鈕，即可插入到網(wǎng)頁文檔中。在網(wǎng)頁文檔中插入的SWF文件顯示為一個Flash動畫圖標。可以在“屬性”面板中設(shè)置SWF文件的大小。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動三：插入FLASH動畫活動步驟：在IE中預(yù)覽。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動四：插入flashpaper動畫活動任務(wù)：在頁面中插入flashpaper動畫。在瀏覽器中打開包含F(xiàn)lashPaper文檔的頁面時，可以瀏覽FlashPaper文檔中的所有頁面，并且不需要

10、加載新的Web頁?；顒又笇?dǎo)：FlashPaper的功能是將通用格式轉(zhuǎn)為Flash格式后，在網(wǎng)頁中顯示。例如將word、pdf格式的文件轉(zhuǎn)為swf格式后，用FlashPaper插入這個Flash后，就可以在網(wǎng)頁中像電子閱讀器那樣瀏覽這個Flash了。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動四：插入flashpaper動畫活動步驟：將光標移至要插入Flash文本的位置，選擇“插入”菜單“媒體”中的“FlashPaper”命令，打開“插入FlashPaper”對話框。在“源”文本框中輸入FlashPaper文件的路徑，同時還可以修改FlashPaper文件的高度和寬度。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活

11、動五：插入FLV視頻活動任務(wù)：插入FLV視頻?；顒又笇?dǎo)：FLV是Flash視頻文件，在文檔中插入的FLV文件是以SWF組件顯示的，當(dāng)在瀏覽器中查看時，該組件顯示所選的FLV文件以及一組播放控件。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動五：插入FLV視頻活動步驟：將光標移至要插入FLV文件的位置，選擇“插入”菜單中選擇“媒體”中的FLV命令，打開“插入FLV”對話框。累進式下載視頻：將FLV文件下載到站點訪問者的硬盤上，然后進行播放。流視頻：對視頻內(nèi)容進行流式處理，并在一段可確保流暢播放的很短的緩沖時間后在網(wǎng)頁上播放該內(nèi)容 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動六：創(chuàng)建其他媒體文件活動任務(wù)：在頁面中插入

12、其他媒體文件。活動指導(dǎo)：我除了插入的Flash媒體文件外，還可以插入Shockwave影片、Java Applet和插件等，但這些元素并不常用，下面就簡單介紹這些元素的插入方法。插入的Shockwave和Java Applet文件必須安裝相應(yīng)的播放器才可以播放。 項目8 制作網(wǎng)頁動態(tài)效果 體驗活動六：創(chuàng)建其他媒體文件活動步驟：選擇“插入”菜單下“媒體”選項中的“Shockwave”命令，選擇要插入的Shockwave影片，單擊“確定”按鈕即可插入到網(wǎng)頁文檔中。選擇“插入”菜單下“媒體”選項中的“Apple”命令，選擇插入的Java Applet文件插入到網(wǎng)頁文檔中。 項目8 制作網(wǎng)頁動態(tài)效果 相關(guān)知識一、Flash動畫類型Flash源文件(.fla)：使用Flash應(yīng)用程序創(chuàng)建的項目的原始文件。這種類型的文件