Dreamweaver 行為 - 互動式更改文字大小

各位有在上網時發現到某些網站內的文字內容過小而導致不易閱讀的情況嗎？遇到此情形，一般人通常都會使用 Browser 來縮放文字或畫面。但是，連結至其他網頁後，如果該網站在還沒放大時的文字顯示是合宜一般人的閱讀時，往往會因為之前的放大設定而套用到目前網頁中，此時就要再做縮小顯示。這樣一來一往的放大又縮小的確挺費時地。

因此，大部分的入口型網站都有製作一些使用機制，讓使用者依個人需求去選擇要顯示的文字大小，這些基本上都是使用 Javascript 或 jQuery 所撰寫而成的，若不會撰寫前面敘述兩種語法的人當然無法完成這種互動式更改文字。

現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果，在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用，點選後即會幫我們產生 Javascript 程式碼，所以各位也不必擔心不會撰寫 Javascript 語法的問題。
各位可點選下方的 Demo 連結以檢視成品展示。

• Demo
• Download

---

以下提供幾個相關的網站，都有使用到相關的技術，各位可以去看看喔！

http://tw.sports.yahoo.com/article/aurl/d/a/120904/36/949c.html

http://www.cw.com.tw/article/article.action?id=5043124

---

接下來，我們就開始使用 Dreamweaver 行為來製作我們所需要的互動式更改文字大小。

請各位先了解一下待會兒要控制的區塊，如下圖所示：

在我們的教學過程中常常會碰到 " 觸發對象 " 設定錯誤這類的問題，所以，請在使用行為時遵循下面幾個步驟，否則在控制對象時會設定錯誤喔！

1. 請為元素加上 id 以便 Javascript 可以尋找到其 id 並予以控制 ( 可不做 )。
2. 選取控制元素。
3. 選擇所需的行為指令。
4. 選擇或輸入參數。

加上 id 以便 Javascript 可以尋找到其 id 並予以控制 ( 可不做 )

請各位依上圖的標示為五個 HTML 標籤加上 id。

選取控制元素

請選取 <li#small> 標籤。

選擇所需的行為指令

開啟「標籤檢視窗 \ 行為」面板，選擇「新增行為 \ 更改屬性」。

選擇或輸入參數

1. 元素類型：Div
2. id : con
3. 屬性：fontSize
4. 值：1em

依此類推，設定完畢即可。

• <li#middle>：1.2 em
• <li#big>：1.4 em
• <li#max>：1.6 em

---

總結：

雖然 Dreamweaver 行為提供給我們這樣便利的工具，但在 HTML 中也是有產生一些程式碼喔！就是當左鍵按下並放開後便呼叫 MM_changeProp 函數，將我們剛剛所設定的參數代入到函數內執行。

位於檔頭內的 Javascript 將參數代入後再以行內樣式寫入到標籤中。