部落格學習記錄：Dreamweaver效果─文字圖片跑馬燈－聯成電腦-讓你價值連城

學員：謝毓仁

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

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

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

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

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

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.也能在文字跑馬燈前面插入小圖示，小圖也會跟著跑馬燈一起動喔，完成後效果如下。

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

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

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

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

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

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

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

如果預覽時圖片沒有跑馬燈效果請檢察程式碼
插入圖片語法是否在標籤<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>