前言

隨著網頁設計潮流演進，單純的「跑馬燈」已不夠看。本文介紹三項進階技巧：JavaScript 動態按鈕、CSS 樣式表可視化編輯、彈出式視窗，讓你的網頁更具互動性與專業感。

一、製作滑鼠懸停變圖的動態按鈕（JavaScript 版）

FP 內建動態按鈕基於 Java Applet，速度慢、無提示文字、滑鼠不變手型。改用 Dreamweaver 2.0 製作 JS 版本：

1. 準備兩張同尺寸圖片：正常態 button.gif、懸停態 button_1.gif。
2. FP 插入第一張圖並設超連結，存檔後用 DW 開啟。
3. 選取圖片，開啟「行為」面板（F8），點「+」→「互換影像」，選第二張圖確定。
4. 完成，滑鼠移入即切換圖片，輕量高效。

二、可視化編輯 CSS 樣式表

FP 可直接編輯內嵌樣式表，無需手寫代碼：

1. 「格式」→「樣式表...」開啟對話框，顯示 <!-- ... --> 間的 CSS 內容。
2. 新增規則：輸入選擇器（如 a:hover），游標置於尾端，點「樣式...」按鈕。
3. 在「顏色」分頁設前景/背景色，「文字」分頁設 text-decoration: none 移除底線。
4. 確定後 FP 自動生成 {background-color: rgb(...); color: rgb(...); text-decoration: none}。

範例：滑鼠移至連結，文字變紅、背景變黃、無底線。

三、製作彈出式視窗

在 <body> 後插入 JS 代碼：

<script language="javascript">
window.open('url', '視窗名稱', '屬性列表');
</script>

常用屬性（1=是, 0=否）：

• 工具列 toolbar、網址列 location、常用連結 directories、狀態列 status、選單列 menubar、捲軸 scrollbars、可縮放 resizable
• 尺寸位置：width, height, top, left

範例：window.open('ad.htm','adWin','width=400,height=300,top=100,left=200,scrollbars=1,resizable=1')

結語

善用 FP 與 DW 協同、CSS 可視化編輯、JS 彈出視窗，能以最小成本實現專業級互動效果。