Search

㊗ 新的一年,祝福讀者們 2020 新年新希望!! ◆ Welcome to Laird Studio! 歡迎蒞臨萊爾德工作室! ◎ Android Studio 基礎教學籌備中,敬請期待! ☏ 對網站有任何問題或建議,都非常歡迎使用留言板或至 Facebook 粉絲團發訊息,讓我們知道您的想法 (੭ु´ ᐜ `)੭ु

2015年5月17日 星期日

[ Blogger ] [ HTML ] 如何在網站或部落格中放入跑馬燈


相信讀者們都有注意到我們的網站上方有一個跑馬燈會一直跑吧~

究竟這個跑馬燈是怎麼做的呢?

這篇教學就是來教大家如何在自己的網站或部落格放置跑馬燈喔~



本文開始~


跑馬燈的基本 HTML 語法為:

<marquee> 你想要顯示的文字 </marquee>


針對 <marquee> ,萊德我整理出以下屬性語法以及參數,如果你想要做出其他不同效果的跑馬燈,只要把下列參數含括到 <marquee> 語法裡面就可以做出多種效果的跑馬燈囉!

使用方法:

<marquee 屬性語法以及參數 > 你想要顯示的文字 </marquee>


*屬性語法以及參數:

scrollamount :調整跑馬燈的捲動速度,數值越大跑得越快, ex: scrollamount="5"

bgcolor :改變跑馬燈背景顏色, ex: bgcolor=#333333

direction :調整跑馬燈的捲動方向,參數有:leftrightupdown , ex: direction="up"

height :調整跑馬燈區域的高度, ex: height="30"

width :調整跑馬燈區域的寬度, ex: width="100"

behavior :調整跑馬燈的行為,參數有:alternate(文字在跑馬燈區域來回),slide(進入之後停止捲動),scroll(預設語法,文字跑完後會重複繼續), ex: behavior="alternate"


在這邊提供我們網站目前使用的語法給大家參考:

<font color=#ffd966 size="5"><marquee scrollamount="5" bgcolor=#333333> ◆ Welcome to Laird Studio! 歡迎蒞臨萊爾德工作室! ♫ 本站推薦使用 Chrome 瀏覽器以獲得最佳的瀏覽品質! ★ 建議瀏覽之螢幕解析度:1280 x 768 以上 ◎ 本站的留言系統全面採用 Google+ ,歡迎大家多多與我們互動! ✽ 交換連結強力募集中!歡迎到"Friends"頁面提出申請,大家一起來當好朋友~ ☏ 對網站有任何問題或建議,都非常歡迎使用"Guestbook"留言板,讓我們知道您的想法喔 (っ● ω ●)っ </marquee></font>


如果把這個語法結構化的話會變成下面這樣:

<font color=#ffd966 size="5">

<marquee scrollamount="5" bgcolor=#333333>

◆ Welcome to Laird Studio! 歡迎蒞臨萊爾德工作室! ♫ 本站推薦使用 Chrome 瀏覽器以獲得最佳的瀏覽品質! ★ 建議瀏覽之螢幕解析度:1280 x 960 以上 ☎ 非常歡迎讀者們與我們交換連結唷 (≧▽≦)/

</marquee>

</font>


這樣是不是比較好懂呢~
以下再為大家做更詳盡的解釋~

第一行的 <font> 語法是調整文字的顏色 ( color ) 以及大小 ( size ) ,和最後一行的 </font> 是配對關係~



第二行的 <marquee> 語法就是跑馬燈的語法囉!和最後一行的 </marquee> 為配對關係~

其中 scrollamount 是用來調整跑馬燈的捲動速度,數值越大跑得越快,記得數值要用雙引號 " " 刮起來喔!

而 bgcolor 則是改變跑馬燈背景顏色的語法~

色碼表的部分,大家可以到下列連結查詢:

http://www.toodoo.com/db/color.html


由於 <marquee> 語法預設是由右到左的方向direction="left"反覆做捲動 ( behavior="alternate,所以我們網站的跑馬燈語法就沒有多做這些屬性的調整~




此外,如果你是想要跑超連結的話,只要把連結網址的語法含括到 <marquee> 語法裡面就可以囉!

超連結的語法如下:

<a href="想要連結的網址" target="_blank">想要顯示的文字</a>

註:target="_blank" 語法是按下連結之後,會以開啟新分頁的方式打開連結!



詳細請參考以下範例:


<marquee scrollamount="5" bgcolor=#333333>

<a href="http://www.laird.tw" target="_blank">◆ Welcome to Laird Studio!</a>

</marquee>



學會了<marquee> 語法之後,要怎麼放到 Blogger 部落格呢~

其實很簡單,請登入至你的 Blogger 管理後台 > 版面配置



然後在你想要放跑馬燈的位置新增一個小工具,選擇 " HTML/JavaScript "




把你寫好的 HTML 程式碼填入框框中,按下 " 儲存 " 之後就完成囉!

重新整理你的部落格頁面,就會發現跑馬燈開始運作了~





跑馬燈的教學就到這邊~

我們下次見~