Dreamweaver 外掛程式 – 上下滑動式區塊

Dreamweaver 外掛程式

Dreamweaver 外掛程式一直是網頁設計師的好朋友,不用寫程式,輕輕點一點就可以完成。

這一支 Dreamweaver 外掛程式「flevPersistentDivs.mxp」可以製作上下滑動式區塊,當網頁捲軸拉動時,區塊會跟著上下滑動,大部份網站拿來做滑動廣告,也可以拿來做滑動選單,是網路上很常用到的效果…. 省時省力,美觀實用,老闆最愛,贊!

【範例預覽 】
http://www.flycan.com/example/2011_0211_persistener_div

【範例下載 】
http://www.flycan.com/example/2011_0211_persistener_div/persistener_div.zip

【外掛程式下載 】
http://www.flycan.com/deux2/extensions/MX508561_flevPersistentDivs.mxp

使用方法


Step 1

自已在網頁上寫一個 <div> ,然後幫 <div> 用 id 取一個名字。

不會寫 <div> 的同學,可以使用 Dreamweaver 插入 AP Div ,他預設的 id 名字是 apDiv1 ,如下圖 ↓

Dreamweaver 網頁設計  - Dreamweaver 外掛程式 - 上下滑動式區塊 - fly012


Step 2

在 div 內放圖片,如下圖 ↓

Dreamweaver 網頁設計  - Dreamweaver 外掛程式 - 上下滑動式區塊 - fly023


Step 3

下載 【外掛程式 】
http://www.flycan.com/deux2/extensions/MX508561_flevPersistentDivs.mxp

裝起來以後,先點選左下角的<body>,然後在【行為】面版選用 「RibbersZeewolde」→「Persistent Layers」

Dreamweaver 網頁設計  - Dreamweaver 外掛程式 - 上下滑動式區塊 - fly032


Step 4

注意看「Select Layer」處是不是剛剛我們設定的 <div> 名稱

選定「Stick to the position specified by the following options」

選定「Animated」

Dreamweaver 網頁設計  - Dreamweaver 外掛程式 - 上下滑動式區塊 - fly043

存檔,打開來看看…

【範例預覽 】
http://www.flycan.com/example/2011_0211_persistener_div

水啦!!水啦!!

by
姜智豪
老師

當您對本文有任何問題或指教,歡迎到我們的【飛肯粉絲團】一起交流討論喔!

posted in Dreamweaver 網頁設計 and tagged , , , , , .

迴響已被關閉。