Dreamweaver輕鬆製作網頁滾動布告欄

來源:互聯網
上載者:User

  如果想要在網頁裡顯示最新資訊、新聞、通知、布告等較長的文字資訊,而又不想佔用太多的網頁空間,可以使用滾動報告欄。

  滾動報告欄通常是通過利用 Javascript 技術控制網頁中的層的滾動來實現的,然而手工編寫 Javascript 代碼進行製作肯定是比較複雜、困難的事情。使用 Dreamweaver 為使用者提供的【 ScrollableArea 】外掛程式可以快速便捷地製作出滾動報告欄。

  效果說明

  使用者可以通過滾動欄上的【向上滾】和【向下滾】兩個按鈕控制報告欄文字的捲動速度和方向。實際效果請瀏覽隨書光碟片中【源檔案】下的對應檔案。

  創作思想

  在隨書光碟片中找到“ ScrollableArea ”外掛程式,然後運行 Macromedia 的外掛程式管理器安裝外掛程式。接著開啟 Dreamweaver MX 2004, 在【命令】菜單中單擊【 dHTML AP Scrollable Area 】選項,就可以開始設計滾動布告欄了。

  操作步驟

  ( 1 )安裝外掛程式。首先在隨書光碟片中的【源檔案】 / 【執行個體 56 】目錄裡面找到 Dreamweaver 的“ ScrollableArea.mxp ”外掛程式,接著運行 Macromedia 的外掛程式管理器“ Extension Manager.exe ”, Macromedia 的外掛程式管理器是隨 Dreamweaver 自動安裝的,通常和 Dreamweaver 安裝在同一目錄下面的“ Extension Manager ”檔案夾裡面。

  ( 2 )選擇外掛程式管理器功能表列上的【檔案】菜單進行操作,如圖 56-1 所示。

  提示:如果外掛程式檔案已經和 Macromedia 的外掛程式管理器建立了檔案關連,那麼直接雙擊外掛程式檔案就可以自動開啟 Macromedia 的外掛程式管理器安裝外掛程式了。

  ( 3 )單擊【安裝】按鈕後會彈出一個安裝協議視窗。單擊安裝協議視窗上面的【接受】按鈕完成安裝。

  ( 4 )設定 滾動布告欄。 安裝完外掛程式後運行 Dreamweaver MX 2004 ,開啟或者建立一個 web 文檔,進行如圖 56-2 、圖 56-3 和圖 56-4 所示的操作。

  ( 5 )經過上面的操作,基本完成了滾動布告欄的製作。在 Dreamweaver 中執行【檔案】 / 【在瀏覽器中預覽】 / 【 IE 瀏覽器】命令或者單擊鍵盤上的 F12 鍵預覽網頁時,可能會出現不正常顯示的情況,這是由於 ScrollableArea 產生的代碼中沒有設定圖層位置的單位。執行如圖 56-5 和圖 56-6 所示的操作,即可解決這個問題。

  ( 6 )執行完如圖 56-6 所示的操作後,在圖 56-5 中所示的第 3 步再分別選擇【# divDownControl 】、【# divContainer 】和【# divContent 】選項,然後再分別執行如圖 56-6 所示的操作。給 4 種樣式分別加上【像素】單位後測試網頁,就可以看到如圖 56-7 所示的滾動公告欄了。

  ( 7 )將滑鼠游標分別移動到【 Scroll up 】和【 Scroll down 】上面,就可以看到中間的文字上下滾動了。

  Dreamweaver 的外掛程式種類繁多,功能強大。善於發現和使用外掛程式,可以製作出一些 Dreamweaver 本身望塵莫及的效果。

 

        :更多精彩教程請關注三聯網頁設計教程 欄目,

相關文章

Beyond APAC's No.1 Cloud

19.6% IaaS Market Share in Asia Pacific - Gartner IT Service report, 2018

Learn more >

Apsara Conference 2019

The Rise of Data Intelligence, September 25th - 27th, Hangzhou, China

Learn more >

Alibaba Cloud Free Trial

Learn and experience the power of Alibaba Cloud with a free trial worth $300-1200 USD

Learn more >

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。