學員:謝毓仁

網路上經常可以看到跑馬燈的效果,在聯成上課時老師提到只要在Dreamweaver上透過 MX16440_Marquee.mxp 這個擴充功能小程式,也能輕鬆達到想要的效果喔!

1.首先請先安裝 MX16440_Marquee.mxp 這個套件。
  命令-->管理擴充功能-->安裝 MX16440_Marquee.mxp -->安裝完畢後記得Dreamweaver要
重新開啟擴充功能才能使用喔!

14d914cd193853.jpg  

2.開啟頁面將滑鼠移至希望跑馬燈出現的位置後點擊(本範例點在紅色打勾處)。

14d914dcbb6850.jpg  
 
3.點擊常用工具列類別右方新增的(Marquee)功能開啟Marquee視窗。

14d915274e6230.jpg     

4.Marquee視窗功能設定如下。

 14d9152a720731.jpg  
TEXT:輸入想要看到的跑馬燈內容。

Font:可以選擇字體  Size:選擇文字大小

Font Color:文字的顏色   BG Color:跑馬燈背景顏色(預設是紅色)

Direction:跑馬燈跑動方向,有Left:左  Right:

Speed:文字捲動的速度
(Delay:跑馬燈捲動後延遲時間  Amount:跑馬燈移動速度)

Behavior :文字捲動的形式
(scroll:不斷捲動  slide:到邊界就停止  alternate:左右邊界來回碰撞)

Align:文字對齊的方式

Size: 來設定跑馬燈的大小(也就是跑馬燈活動的範圍大小)

Width 輸入寬度的值、Height 輸入高度。單位可以選擇使用百分比(in Percent)或像素(in Pixels)。

Repeat:設定是否要重複捲動,要的話就打勾,並且輸入重複的次數。如果要不斷重複,打勾後就不要輸入次數讓它留空白。

5.也能在文字跑馬燈前面插入小圖示,小圖也會跟著跑馬燈一起動喔,完成後效果如下。

14d915fe6b1d71.jpg   

 
如果發現跑馬燈背景出現一片紅色,表示BG Color這個選項現在為預設值(預設值紅色),只要切換到程式碼將bgcolor="#FF0000" 這一段刪除即可,當然也能設定自己喜歡的顏色。

14d916802d06b0.jpg   


6. 如果想要有滑鼠滑入滑出跑馬燈會對應停止動作的效果,請在程式碼 <marquee 後面多加上這一段 onMouseOver="this.stop()" onMouseOut="this.start()" 即可(背景顏色不想刪除的話加在 bgcolor="#FF0000" 後面)

1234567899.jpg  

 其實圖片也能套用跑馬燈效果。

1.開啟想要附加的頁面。

14d915e6c05862.jpg   

2.重複文字跑馬燈步驟3.4的動作,要注意的是本範例Behavior這邊選擇的是Altemate(交替)
   高度選擇的是114(本範例圖片高度為114要跟選擇的圖片一樣大)。
14d91616de5350.jpg    

 

3.將出現的跑馬燈文字跟預設背景去除後插入想要展示的圖片。
14d956cc49305f.jpg  

14d91621c6d0e8.jpg   


4.想要有滑鼠滑入滑出圖片會對應停止動作的效果,請切換到程式碼,將想要的效果加上去(文字跑馬燈步驟6)
14d91630157f35.jpg   


如果預覽時圖片沒有跑馬燈效果請檢察程式碼
插入圖片語法是否在標籤<marquee> </marquee>中間
<marquee  onMouseOver="this.stop()" onMouseOut="this.start()"  border="0" align="middle" scrollamount="2"  scrolldelay="90" behavior="alternate"  width="100%" height="114" style="color: #0000FF; font-size: 14" >
-----------------------------------插入圖片語法------------------------
<a href="
http://www.joj.com.tw"><img src="images/marquee1.jpg" width="141" height="114" border="0"></a><a href="http://www.joj.com.tw"><img src="images/marquee2.jpg" width="141" height="114" border="0"></a><a href="http://www.joj.com.tw"><img src="images/marquee3.jpg" width="141" height="114" border="0"></a><a href="http://www.joj.com.tw"><img src="images/marquee4.jpg" width="141" height="114" border="0"></a><a href="http://www.joj.com.tw"><img src="images/marquee5.jpg" width="141" height="114" border="0"></a><a href="http://www.joj.com.tw"><img src="images/marquee6.jpg" width="141" height="114" border="0"></a>
-----------------------------------插入圖片語法-------------------------</marquee>

PS:以上範例圖片均取自聯成電腦上課範例圖片請勿轉載。

文章出處:http://blog.yam.com/pocyler/article/36571441

 

arrow
arrow

    聯成電腦 發表在 痞客邦 留言(0) 人氣()