因此,大部分的入口型網站都有製作一些使用機制,讓使用者依個人需求去選擇要顯示的文字大小,這些基本上都是使用 Javascript 或 jQuery 所撰寫而成的,若不會撰寫前面敘述兩種語法的人當然無法完成這種互動式更改文字。
現在各位只要會使用 Dreamweaver 行為便可輕易地完成此效果,在 Dreamweaver 中提供了許多的行為功能讓各位去點選使用,點選後即會幫我們產生 Javascript 程式碼,所以各位也不必擔心不會撰寫 Javascript 語法的問題。
各位可點選下方的 Demo 連結以檢視成品展示。
以下提供幾個相關的網站,都有使用到相關的技術,各位可以去看看喔!
http://tw.sports.yahoo.com/article/aurl/d/a/120904/36/949c.html
接下來,我們就開始使用 Dreamweaver 行為來製作我們所需要的互動式更改文字大小。
請各位先了解一下待會兒要控制的區塊,如下圖所示:
- 請為元素加上 id 以便 Javascript 可以尋找到其 id 並予以控制 ( 可不做 )。
- 選取控制元素。
- 選擇所需的行為指令。
- 選擇或輸入參數。
加上 id 以便 Javascript 可以尋找到其 id 並予以控制 ( 可不做 )
請各位依上圖的標示為五個 HTML 標籤加上 id。選取控制元素
請選取 <li#small> 標籤。選擇所需的行為指令
開啟「標籤檢視窗 \ 行為」面板,選擇「新增行為 \ 更改屬性」。選擇或輸入參數
- 元素類型:Div
- id : con
- 屬性:fontSize
- 值:1em
- <li#middle>:1.2 em
- <li#big>:1.4 em
- <li#max>:1.6 em
沒有留言 :
張貼留言