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
姜智豪
老師

 

當您對本文有任何問題或指教,歡迎到我們的【網頁設計交流討論區】一起交流討論喔!

 

關於「姜智豪 老師」

於 1996 年開始從事網頁設計工作 20 多年,參與設計過許多網站專案的開發,一直熱衷網頁設計工作至今。從 1998 年開始從事教學工作,對於網頁設計教學有相當高的熱忱,於 2006 年創立飛肯設計學苑。主要專長 Photoashop、 HTML、CSS、RWD、JavaScript、jQuery 等網頁技術,對於 SEO 優化搜尋引擎排名提昇,以及 Instructional Design 教學專案設計亦有深入的研究。
posted in Dreamweaver 網頁設計 and tagged , , , , , .

留言功能已關閉。