DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁製作工具 >> Dreamweaver教程 >> Dreamweaver入門 >> 用Dreamweaver插件輕松制作隨機廣告圖片
用Dreamweaver插件輕松制作隨機廣告圖片
編輯:Dreamweaver入門     

  浏覽者浏覽網頁時可以發現,網頁中動態更新的廣告圖片比靜態固定的圖像更具有活力和吸引力。如何制作網頁中的隨機廣告圖片是本實例所要研究的問題。

  效果說明

  在浏覽網頁時,網頁的 banner 區域將出現一張廣告圖片,如圖 38-1 所示。隨後每兩秒更新一次廣告圖片,而且廣告圖片是以隨機的方式出現的,如圖 38-2 所示。

用Dreamweaver插件輕松制作隨機廣告圖片

  創作思想

  通過使用 Macromedia 的擴展插件 Advance_Random_Images ,可以輕松地完成網頁中隨機廣告圖片的制作。

  操作步驟

  ( 1 )安裝插件。使用菜單欄中的【命令】|【擴展管理】命令調出【 Macromedia 擴展管理器】對話框,安裝 Advance_Random_Images 擴展,如圖 38-3 所示。

用Dreamweaver插件輕松制作隨機廣告圖片

  ( 2 )調用命令。打開本實例源文件夾中的 banner.htm 文件,將光標置於要插入廣告的位置上,並調出【 AdvancedRandomImages 】命令,如圖 38-4 所示。

用Dreamweaver插件輕松制作隨機廣告圖片

  ( 3 ) 設置圖像。 在彈出的【 RandomImages 】對話框中對圖片變換屬性進行設定,如圖 38-5 所示。

用Dreamweaver插件輕松制作隨機廣告圖片

  ( 4 )添加圖片。添加第一張廣告圖片,如圖 38-6 所示。

用Dreamweaver插件輕松制作隨機廣告圖片

  提示:本實例所用到的圖片放於本實例素材文件夾中的 banner 文件夾中。

  ( 5 )接著用同樣的方法添加其他圖片,添加完成後單擊【 OK 】按鈕確定操作,如圖 38-7 所示。

用Dreamweaver插件輕松制作隨機廣告圖片

  ( 6 )然後保存頁面文件並進行預覽,隨機廣告圖片的效果就制作出來了。讀者可參考本實例素材文件夾中的 bannerok.htm 效果文件,看制作的結果是否正確。至此本實例制作完成。

  本實例所講的技術常用於各類的網站中,如國內幾個較大的門戶網站上,幾乎在他們的每個頁面中都可看到這些變換廣告,讀者可參考這些內容來多加練習。

XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved