滾動(dòng)字幕制作

魚過大海 2010-08-01

展開全文

http://hi.baidu.com/juweng/blog/item/a4a16edf16ac86124954034c.html/cmtid/a91b831bee6a0e148618bf37

滾動(dòng)字幕會(huì)讓很多人感到興奮，特別是第一次使用滾動(dòng)字幕時(shí)，會(huì)愛不釋手。滾動(dòng)字幕我也做得不少了，對(duì)它也不會(huì)興奮了，所以現(xiàn)在也用得不多了。有不少朋友常問到這是怎么做的，現(xiàn)在做一個(gè)詳細(xì)的專題，讓你更全面地了解一下。

滾動(dòng)字幕在FrontPage的組件里有，但是FrontPage這個(gè)軟件只能支持單行文字，一出現(xiàn)多行文字它就無能為力了，而且它只能支持一行滾動(dòng)！Dreamweaver也只能用編寫HTML代碼的方法。所以建議用記事本打開網(wǎng)頁源代碼來編輯。

1.建立第一個(gè)滾動(dòng)字幕。代碼：
<marquee scrollAmount=2 width=300>歡迎光臨</marquee>
效果如：歡迎光臨

2.各參數(shù)詳解：
a)scrollAmount。它表示速度，值越大速度越快。如果沒有它，默認(rèn)為6，建議設(shè)為1～3比較好。
b)width和height，表示滾動(dòng)區(qū)域的大小，width是寬度，height是高度。特別是在做垂直滾動(dòng)的時(shí)候，一定要設(shè)height的值。
c)direction。表示滾動(dòng)的方向，默認(rèn)為從右向左：←←←?？蛇x的值有right、down、up。滾動(dòng)方向分別為：right表示→→→，up表示↑，down表示↓。
d)scrollDelay，這也是用來控制速度的，默認(rèn)為90，值越大，速度越慢。通常scrollDelay是不需要設(shè)置的。
e)behavior。用它來控制屬性，默認(rèn)為循環(huán)滾動(dòng)，可選的值有alternate(交替滾動(dòng))、slide(幻燈片效果，指的是滾動(dòng)一次，然后停止?jié)L動(dòng))

3.實(shí)例：
a)如何給滾動(dòng)字幕加超鏈接？這跟平時(shí)的超鏈接是完全一樣的。只要在文字外面加上<a href=***>和</a>就可以了。如下效果，代碼是<marquee _fcksavedurl=***>和</a>就可以了。如下效果，代碼是<marquee _fcksavedurl="***>和</a>就可以了。如下效果，代碼是<marquee" scrollAmount=2 width=300><a href=http://www.>杭州網(wǎng)通</a></marquee>，點(diǎn)擊杭州網(wǎng)通就可以進(jìn)入了：
杭州網(wǎng)通

b)如何制作當(dāng)鼠標(biāo)停留在文字上，文字停止?jié)L動(dòng)？
代碼如：
<marquee scrollAmount=2 width=300 onmouseover=stop() onmouseout=start()>鼠標(biāo)懸停</marquee>
效果如：
鼠標(biāo)懸停

c)交替效果。代碼如：
<marquee scrollAmount=2 width=99 behavior=alternate>交替效果</marquee>
效果如：
交替效果

d)多行文本向上滾動(dòng)。代碼如：
<marquee scrollAmount=2 width=300 height=160 direction=up>·床前明月光<br>·疑是地上霜<br>·舉頭望明月<br>·低頭思故鄉(xiāng)<p>·<a href=http://www.>我的網(wǎng)站</a></marquee>
效果如：
·床前明月光
·疑是地上霜
·舉頭望明月
·低頭思故鄉(xiāng)

·我的網(wǎng)站

e)改變滾動(dòng)字幕的顏色？可以用樣式表來控制。如下效果，代碼是<marquee scrollAmount=2 width=300><a style=color:FF0000></a></marquee>。

圖片的滾動(dòng)

已有兩位朋友來電話咨詢此問題，在此做個(gè)實(shí)例。這里還是用到marquee語句。
滾動(dòng)字幕，在FrontPage或Dreamweaver下無法直接編輯，只能用記事本編寫HTML語言這一途徑。為了防止這段marquee語句被FrontPage或Dreamweaver格式化，所以把marquee嵌入到JavaScript的document.write文檔中。
HTML語言對(duì)初學(xué)者來說是很難的，但如果要想會(huì)做網(wǎng)頁，學(xué)習(xí)HTML是肯定的。

1、marquee的HTML語法，請(qǐng)見我寫的這篇：《專題：滾動(dòng)字幕制作手冊(cè)》，這里可以暫時(shí)不看。
2、圖片的HTML標(biāo)簽是img，語法是<img src="圖片路徑/文件名">，這里的路徑要使用相對(duì)路徑，關(guān)于相對(duì)路徑，請(qǐng)見《相對(duì)路徑概念詳解(圖)》

了解了marquee和img的用法，就可以輕松制作了。實(shí)例效果：

上述效果的代碼如：

webshu.htm - 記事本

文件(F) 編輯(E) 搜索(S) 幫助(H)

問1：scrollAmount=2 width=340 height=160 direction=up onmouseover=stop() onmouseout=start()這些表示什么？
其中height表示區(qū)域的高度。

問2：如何插入圖片？
用<img src=相對(duì)路徑/文件名>的語句。并且要注意圖片名不要中文，要注意區(qū)分英文大小寫。

問3：如何為圖片做超鏈接？
答：用<a href=>和</a>把<img>包圍，并且img必須設(shè)border=0，否則圖片會(huì)出現(xiàn)藍(lán)框。正確的例子如：<a href=http://www.><img src=../../j/01.jpg border=0></a>
其中a href=表示超鏈接，這是最常用的。練習(xí)的方法也很簡(jiǎn)單，就是平時(shí)用FP或DW做網(wǎng)頁的時(shí)候，要多查看源代碼。

問4：如何做多張圖片排列滾動(dòng)？
答：通常圖片和圖片之間用<br>(回行)或<p style=margin-top:9>(精確調(diào)整圖片間的距離)來鏈接。也可以把你的圖片先用表格排版，然后把這個(gè)表格的所有語句也加入到marquee中，讓這個(gè)表格來滾動(dòng)。

滾動(dòng)字幕效果：

<MARQUEE ScrollAmount=3 Direction=up width=400 height=40 ScrollDelay=150 >
<center><FONT face=黑體 color=#FFAA00 size=5>
黑馬來教你如何制作滾動(dòng)字幕<br>
滾動(dòng)字幕需要用到 marquee 元素<br>
MARQUEE 的主要參數(shù)及其含義是<br>
Derection：文字滾動(dòng)方向<br>
Width 和 Height：窗口的寬度和高度<br>
ScrollDelay：延遲(單位為毫秒)<br>
ScrollAmount：移動(dòng)的步長(zhǎng)<br>
最后別忘了用 br 給每一行文字換行<br>
現(xiàn)在，你也可以制作滾動(dòng)字幕了吧？<br>
</font></center>
</MARQUEE>

效果如下：

黑馬來教你如何制作滾動(dòng)字幕
滾動(dòng)字幕需要用到 marquee 元素
MARQUEE 的主要參數(shù)及其含義是
Derection：文字滾動(dòng)方向
Width 和 Height：窗口的寬度和高度
ScrollDelay：延遲(單位為毫秒)
ScrollAmount：移動(dòng)的步長(zhǎng)
border：窗口的邊框粗細(xì)
最后別忘了用 br 給每一行文字換行
現(xiàn)在，你也可以制作滾動(dòng)字幕了吧？

3HTML滾動(dòng)字幕的制作

1、〈元素名〉文件或超文本〈/元素〉

2、〈元素名屬性名=“屬性值...”〉文件或超文本〈/元素〉

3、〈元素名〉

示范：

<html>

<body>

<TABLE border=0 cellpadding=0 cellspacing=0

height=157 width=320>

<TBODY>

<TR>

<marquee direction=up height=156

onmouseout=this.scrollamount=1

onmouseover=this.scrollamount=0

scrollamount=1 scrolldelay=20

scrollleft="0" scrolltop="0">

靖邊中學(xué)第一行<br>

現(xiàn)代教育技術(shù)中心第二行<br>

我們要努力學(xué)習(xí)第三行<br>

</marquee>

</td>

</tr>

</table>

</div>

</body>

</html>

HTML的基本結(jié)構(gòu)
           <html>
                   <head>
                             <title>標(biāo)題</title>
                   </head>

                   <bo***>
                             顯示的html內(nèi)容
                   </bo***>
           </html>
修飾文本標(biāo)簽
           <h1>標(biāo)題1</h1>
           ...
           <h6>標(biāo)題6</h6>
           <font>文字<font>
網(wǎng)頁元素標(biāo)簽
           <img>
           <a>鏈接</a>

           <form>
                      <Input type="text/password">
                      <input type="radio/checkbox">
                      <input type="submit/reset/button">
                      <input type="image">
                      <select></select>
                      <input type="file">
                      <textarea></textarea>
           </form>
布局標(biāo)簽
           <p>段落</p>
           <br>
           <hr>
           <div>塊內(nèi)容</div>

           <table>
                 <tr>
                       <td>單元格內(nèi)容</td>
                 </tr>
           </table>

           <frameset>
                    <frame>
                    <frame>
           </frameset>
其他標(biāo)簽
           <link>
           <meta>
           <style></style>
           <script></script>
標(biāo)簽的常見屬性參數(shù)
指向性：href、src、action，找到一個(gè)圖片的位置、說明網(wǎng)頁轉(zhuǎn)向的url或者找到用于處理表單的應(yīng)用程序文件。
基本屬性：face、size、width、height、color、align、alt、bgcolor、border，聲明字體、大小、寬高、顏色、對(duì)齊等。
參數(shù)聲明：type、name、class、value、method。

滾動(dòng)字幕
marquee為滾動(dòng)字幕標(biāo)記,應(yīng)用格式為:
<marquee>...</marquee>
屬性:
align 指定對(duì)齊方式top,middle,bottom
behavior指定動(dòng)畫的運(yùn)動(dòng)屬性;
scroll單向運(yùn)動(dòng),
slide如幻燈片,一格格的，效果是文字一接觸左邊就停止。
alternate左右往返運(yùn)動(dòng)
direction 設(shè)定文字的卷動(dòng)方向,left表示向左,right表示向右
bgcolor="#0000FF" 設(shè)定文字卷動(dòng)范圍的背景顏色。
loop設(shè)定文字卷動(dòng)次數(shù)，其值可以是正整數(shù)或 infinite表示無限次。
height="30" 設(shè)定字幕高度
width="150" 設(shè)定字幕寬度
scrollamount="30" 指定每次移動(dòng)的距離,距離越大速度越快
scrolldelay="500" 文字卷動(dòng)的停頓時(shí)間，單位是毫秒。時(shí)間越短滾動(dòng)越快;
hspac 指定字幕左右空白區(qū)的大小
vspac 指定字幕上下空白區(qū)的大小
示例1：
<html>
<body>
<font face="字體2" size=6 color="#ff0000">
滾動(dòng)字幕寬度設(shè)置
</font><br>
<marquee width=250>滾動(dòng)字幕</marquee>?
</body>
</html>
示例2：
<html>
<body>
<font face="字體2" size=6 color="#ff0000">
滾動(dòng)字幕左右往返運(yùn)動(dòng)設(shè)置
</font><br>
<marquee behavior=alternate>左右往返運(yùn)動(dòng)</marquee>?
</body>
</html>
示例3
<html>
<body>
<font face="字體2" size=6 color="#ff0000">
滾動(dòng)字幕接觸左邊停止
</font><br>
<marquee behavior=slide>文字一接觸左邊就停止</marquee>?
</body>
</html>
示例4
<html>
<body>
<font face="字體2" size=6 color="#ff0000">
滾動(dòng)字幕移動(dòng)速度
</font><br>
<marquee scrolldelay=50>滾動(dòng)字幕移動(dòng)速度</marquee>
</body>
</html>
示例5
<html>
<body>
<font face="字體2" size=6 color="#ff0000">
滾動(dòng)字幕移動(dòng)距離
</font><br>
<marquee scrollamount="3" >滾動(dòng)字幕移動(dòng)距離</marquee>
</body>
</html>

如何使用上下滾動(dòng)字幕？

如何在圖片中加入文字？

代碼如下：

<TABLE height=300 cellPadding=10 width=500 align=center background=http://image13.360doc.com/DownloadImg/2010/08/0112/4365226_16.gifborder=3 table="0">
<TBODY>
<TR>
<TD>
<DIV align=center><FONT face=楷體_GB2312><FONT size=4><FONT color=#ffffff></FONT></FONT></FONT>
<MARQUEE style="WIDTH: 380px; HEIGHT: 84px" scrollAmount=2 direction=up height=84><FONTcolor=#ff00ff>
<DIV align=center><FONT face=楷體_GB2312 color=#c709f7 size=4>如何在圖片中加入文字？</FONT></DIV>
<DIV align=center><FONT face=楷體_GB2312 color=#c709f7 size=4></FONT><BR></DIV>
<DIV align=center><FONT face=楷體_GB2312 color=#1ae66b size=4>如何在圖片中加入文字？</FONT></DIV>
<DIV align=center><FONT face=楷體_GB2312 color=#1ae66b size=4></FONT><BR></DIV>
<DIV align=center><FONT face=楷體_GB2312 color=#ffff00 size=4>如何在圖片中加入文字？</FONT></DIV>
<DIV align=center><FONT face=楷體_GB2312 color=#ffff00 size=4></FONT><BR></DIV>
<DIV align=center><FONT face=楷體_GB2312><FONT size=4><FONT color=#ffffff>如何在圖片中加入文字？</FONT></FONT></FONT></DIV></FONT></MARQUEE></DIV></TD></TR></TBODY></TABLE>

==============================

文字上下滾動(dòng)代碼：<MARQUEE style="WIDTH: 380px; HEIGHT: 84px" scrollAmount=2 direction=up height=84><FONTcolor=#ff00ff>注：scrollAmount=2 是控制字速，數(shù)值越大字速就越快！

　　如何在新浪博客種植組滾動(dòng)字幕？

　　用<marquee></marquee>語句可以做到字幕的滾動(dòng)，方法如下：

　　第一步、登錄新浪博客，輸入“登錄名”“密碼”和“驗(yàn)證碼”后點(diǎn)擊“登錄”。

登錄新浪博客

　　第二步、進(jìn)入首頁右上方的“控制面板”。

進(jìn)入控制面板

　　第三步、進(jìn)入“個(gè)人首頁維護(hù)”。

進(jìn)入個(gè)人首頁維護(hù)

　　第四步、進(jìn)入“自定義空白面板欄”。

進(jìn)入自定義空白面板欄

　　第五步、點(diǎn)擊“增加”增加空白面板。

增加空白面板

　　第六步、填好面板標(biāo)題，勾選文本框下方的“顯示源代碼”勾選框，記住，一定要勾選否則面板無法添加，在文本框中添加下面代碼，然后點(diǎn)擊保存。

　　代碼說明：

　　1、scrollAmount。它表示速度，值越大速度越快。如果沒有它，默認(rèn)為6，建議設(shè)為1～3比較好。

2、width和height，表示滾動(dòng)區(qū)域的大小，width是寬度，height是高度。特別是在做垂直滾動(dòng)的時(shí)候，一定要設(shè)height的值。

３、direction。表示滾動(dòng)的方向，默認(rèn)為從右向左：←←←?？蛇x的值有right、down、up。滾動(dòng)方向分別為：right表示→→→，up表示↑，down表示↓。

４、scrollDelay，這也是用來控制速度的，默認(rèn)為90，值越大，速度越慢。通常scrollDelay是不需要設(shè)置的。

５、behavior。用它來控制屬性，默認(rèn)為循環(huán)滾動(dòng)，可選的值有alternate(交替滾動(dòng))、slide(幻燈片效果，指的是滾動(dòng)一次，然后停止?jié)L動(dòng)) 。

　　６、每行文字添加在<br></br>之間。

貼入代碼，點(diǎn)擊“保存”

　　第七步、點(diǎn)擊“控制面板”左側(cè)“BLOG信息設(shè)置”中的“定制我的首頁”。

點(diǎn)擊定制我的首頁

　　第八步、點(diǎn)擊“添加模塊”。

點(diǎn)擊添加模塊

　　第九步、勾選剛剛建立的模板，點(diǎn)擊下方的“選取”。

選取面板

　　第十步、出現(xiàn)在頁面上，將之托拽到合適的位置上點(diǎn)擊“保存設(shè)置”，完成播放器面板添加。

面板添加完成

<marquee scrollAmount=2 width=300>魚過大海歡迎光臨</marquee>

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來自：魚過大海 > 《空間制作》

舉報(bào)/認(rèn)領(lǐng)