張正新

摘要：編輯網(wǎng)頁時往往要使用字幕以增加網(wǎng)頁的動態(tài)效果和美感，該文探討了如何使用純html語言設(shè)計多方向滾動的超級字幕，詳細(xì)的介紹了如何在字幕中加入多行多段文字、圖片和表格以及給字幕建立超鏈接的編程設(shè)計思路與技巧。

關(guān)鍵詞：網(wǎng)頁設(shè)計；HTML編程；超級字幕

中圖分類號：TP393文獻(xiàn)標(biāo)識碼：A文章編號：1009-3044(2012)07-1626-03

The Design Method Without JAVA Plain HTML Super Subtitles

ZHANG Zheng-xin

(School of Economics and Law, Shaanxi University of Technology, Hanzhong 723000, China)

Abstract: When making webpages, we often add marquee to improve a webpage's dynamic effects. We explore the method of designing some "super marquee" using pure HTML which can roll in multi-directions. We will introduce the skills and some tricks of how to create marquee with multi-lines texts, pictures or tables and how to create a hyperlink for marquee.

Key words: web design; HTML programming; super subtitles

用Dreamweaver設(shè)計字幕比較麻煩，微軟FrontPage的字幕設(shè)計很容易，但FrontPage的字幕有點(diǎn)簡單，不過我們只要對FrontPage的字幕組件加以改造就可以完全可以制作出功能齊全的超級字幕，無需使用煩瑣的JAVA或vb腳本語言來編程。微軟的FrontPage2000和FrontPage2003都可以作為我們設(shè)計超級字幕的軟件，但FrontPage2000在調(diào)試時往往會打亂我們加入的特殊代碼，所以建議大家在參照本文范例實(shí)踐時用FrontPage2003。

要制作超級字幕，應(yīng)該懂一點(diǎn)HTML標(biāo)記語言，在編寫或閱讀html程序時一定要注意語句的完整性和準(zhǔn)確性。

1多行多段向上滾動字幕的設(shè)計

打開FrontPage2003，單擊菜單“插入”——“wbe組件”——“動態(tài)效果”——“字幕”，然后在“文字”欄輸入你要顯示的文字。為了講解方便，我們用“第一、二、三段文字”代替所要顯示的字幕文字。如果要輸入多行文字，就需要在每一段文字后加入HTML語言的回車換行語句“

”。請雙擊已插入的字幕，在字幕屬性對話框的文字欄輸入：

第一段文字

第二段文字

第三段文字

……

這兒的省略號……表示許多段文字，段落文字可根據(jù)你的需要輸入。預(yù)覽一下就可以看到多行多段的滾動字幕了，但字幕仍然只能左右滾動。FrontPage字幕滾動表現(xiàn)方式一般只有三種：滾動條、幻燈片、交替，滾動方向只能選擇向左或向右，并且你必須選規(guī)則一種，不可為空選擇，默認(rèn)向左滾動。

現(xiàn)在需要添加被隱含了的字幕滾動參數(shù)。要想使字幕向上或向下滾動，不能簡單地通過修改字幕屬性對話框的傳統(tǒng)方法來實(shí)現(xiàn)，應(yīng)該在代碼狀態(tài)下修改字幕的參數(shù)。具體方法是單擊已插入的字幕對象，再單擊屏幕左下角“代碼”切換到HTML編程狀態(tài)，然后在

在定義滾動方向參數(shù)direction=up的后面一定要有至少一個英文空格，不能是中文空格，否則仍為左右滾動。如果參數(shù)是direction=down那么字幕則向下滾動，如果參數(shù)是direction= righ或direction=left，那字幕自然向右或向左滾動。

2給字幕建立多個任意超鏈接

如果要給字幕中的文字建立超鏈接，可以在字幕屬性對話框中，直接修改文字內(nèi)容。方法是在字幕的文字前后加上HTML語言超鏈接的標(biāo)記語句即可，如：

第一段文字

如果字幕中有許多超鏈接，應(yīng)在每個想建立超鏈接的字幕文字前加入“”（注意中文引號不要輸入），在超鏈接的字幕文字后加入“”。如：

第一段文字

第二段文字

第三段文字

……

但是，當(dāng)我們預(yù)覽網(wǎng)頁將鼠標(biāo)移動到字幕上時，字幕仍在滾動，要讓滾動的字幕在鼠標(biāo)移到其上停止?jié)L動，還應(yīng)該給字幕添加鼠標(biāo)事件代碼，現(xiàn)在在代碼狀態(tài)下把本例字幕的屬性修改如下：

＜MARQUEE direction=up height=484 width=124 scrollAmount=1 scrollDelay=60 onmouseout=this.start() onmouseover=this.stop() ＞

各參數(shù)如下：

1）direction：表示字幕滾動的方向，可選的值有right、left、down、up。

2）width和height：表示滾動區(qū)域的大小，width是寬度，height是高度。為了向上滾動我將寬度設(shè)置為124個像素，高度設(shè)置為484個像素。

3）scrollDelay：這是用來控制延遲速度的，即滾動時的停滯時間（毫秒），默認(rèn)為90，值越大，速度越慢，建議設(shè)為60。但如果是默認(rèn)值（90），則此參數(shù)不出現(xiàn)。

4）scrollAmount：它表示速度的數(shù)量，其實(shí)就是字幕每次滾動多少像素，值越大速度越快。如果沒有它，默認(rèn)為6，建議設(shè)為1。同理如果是默認(rèn)值（6），則此參數(shù)也不出現(xiàn)。

5）onmouseout=this.start()：此參數(shù)作用是當(dāng)鼠標(biāo)移到字幕上時，停止?jié)L動。

6）onmouseover=this.stop()：此參數(shù)作用是當(dāng)鼠標(biāo)移開字幕時，開始繼續(xù)滾動。

FrontPage2003的字幕有40多個參數(shù)，參數(shù)無嚴(yán)格的順序要求，但必須用空格分開。

至于大小、顏色、字體、字色、邊框風(fēng)格，你可以通過字幕屬性對話框很容易設(shè)置修改，在此不述了。

以上方法用FrontPage2003很容易實(shí)現(xiàn)，修改字幕內(nèi)容添加HTML語言標(biāo)志語句時，在FrontPage2003下，可以在字幕屬性的文字欄直接修改添加，也可以在代碼窗口中對字幕的內(nèi)容進(jìn)行修改，用前一種方法比較直觀方便。但用FrontPage2000編輯時不可以直接在字幕屬性對話框的文字欄中添加HTML語句，可在HTML代碼窗口可以修改字幕參數(shù)，給字幕文字添加相關(guān)的HTML標(biāo)記語句。雖然FrontPage2000支持多行字幕（修改字幕寬度），但無法實(shí)現(xiàn)多段字幕?？梢越oFrontPage2000的字幕建立多個超鏈接，如將字幕的文字改為：＜a href="某某網(wǎng)頁.htm ＞文字AAAAAAAA，＜/a＞"某某網(wǎng)頁.htm ＞文字BBBBBBBB，＜/a＞"某某網(wǎng)頁.htm ＞文字CCCCCCC＜/a＞這樣字幕中的三個超鏈接就建立了。

3讓圖片成為字幕元素

傳統(tǒng)的字幕只能顯示文字，太呆板了，把圖片作為字幕的元素，讓圖片滾動并超級鏈接不是很多網(wǎng)頁設(shè)計者美好的追求嗎？要在字幕中出現(xiàn)圖片，有兩種途徑，一是給字幕添加背景圖片，加入背景圖片的語句是：background-image:url('圖片文件路徑及名稱')"，如：

background-image:url('file:///C:/My Documents/楓林.jpg')"

第二種途徑是我們可以在字幕文字中的適當(dāng)位置加入以下代碼就把圖片加入到字幕中去了：

＜img width="180" height="60" border="0" src="tupian.gif" ＞

注意：tupian.gif是你圖片的文件名，可以帶上路徑，省略為當(dāng)前目錄。

如果要給圖片建立超級鏈接，應(yīng)把字母圖片的代碼修改如下：

＜a href="鏈接對象名稱"＞＜img border="0" src="tupian.gif" width="180" height="60"＞＜/a＞

4把藝術(shù)字放到字幕里去

一般文字只有字型字體字色盒大小的變化，不能產(chǎn)生立體字、陰影字、反片字，太單調(diào)，藝術(shù)字可以設(shè)計出許多絢麗的文字效果，我們也可以把藝術(shù)字放到字幕里去。藝術(shù)字的html語句太長太復(fù)雜，其實(shí)你不懂HTML語言也無關(guān)大局，現(xiàn)在我們用另一種簡單方法制作超級字幕，前提是你要會讀懂HTNL程序。如果要把藝術(shù)字做成字幕，可以先把藝術(shù)字設(shè)置好，然后把藝術(shù)字代碼復(fù)制到字幕代碼中，要注意代碼的對稱性和完整性。要切記不可以刪除原先的藝術(shù)字，否則字幕中部無法顯示藝術(shù)字。那么如何隱藏原先的藝術(shù)字呢？可以把原先的藝術(shù)字格式大小設(shè)置為高寬都為1個像素，“布局”選擇“絕對”在下一層，藝術(shù)字的“藝術(shù)字庫”設(shè)置為任意一行的最后一個，這樣可以達(dá)到隱藏的原先藝術(shù)字的目的。

為了使字幕在某個位置，或使其與其他對象搭配合理，可以使用絕對位置定位。原先的藝術(shù)字內(nèi)容已不起作用，你完全可以在字幕的代碼中或字幕的文字屬性里更改要顯示的字幕內(nèi)容及其特征。

5流動的按鈕

按鈕也具有動態(tài)效果，每當(dāng)把鼠標(biāo)移動或單擊或移開按鈕，按鈕都會發(fā)生一些變化，產(chǎn)生動態(tài)效果。如果把按鈕加到字幕中去，就形成了流動的按鈕，效果當(dāng)然很好。不過設(shè)計過程要求特別。我們先插入字幕以及必要的按鈕并分別設(shè)置好他們的屬性特色，在確定無誤的情況下存盤，這一步非常關(guān)鍵，如果不存盤，后面就無法在字幕中顯示按鈕?，F(xiàn)在可以把按鈕的代碼全部復(fù)制到字幕代碼中，再能刪除原先的。

注意：藝術(shù)字和按鈕一般不要一起加到字幕中，否則會出現(xiàn)運(yùn)行時間錯誤，影響效果。

6嵌套的字幕

字幕嵌套的方法是先插入并用以上方法設(shè)計好一個字幕，然后再在字幕里添加若干個字幕代碼。添加代碼的方法有兩種，一是手工直接輸入，二是在其他位置再插入若干個字幕，再把這若干字幕的代碼剪切粘貼到前一個字幕的代碼中，同樣要注意代碼的對稱性和完整性。例如：

＜marquee direction=up width="200" height="300" scrollAmount="2" scrollDelay="30" bgcolor="#00FF00" style="position: absolute; left: 248; top: 218; border: 5px inset #FF0000; color:#00FF00; font-size:14pt;

//以上之外嵌套字幕的特色設(shè)置，包括向上滾動，長、高、速度以及邊框特征

＜br＞外字幕的內(nèi)容1

＜br＞外字幕的內(nèi)容2

＜br＞＜img border="0" src="logo.gif" width="180" height="60"。//外字幕的滾動圖像

＜marquee width="100" height="30" scrollAmount="2" scrollDelay="100" bgcolor="#FF0000" style="border: 4px groove #800000"＞

//嵌套進(jìn)去的字幕特征特色設(shè)置：長、高、速度、背景色等等，沒有設(shè)置滾動方向則默認(rèn)為向左滾東。

＜br＞嵌套進(jìn)去的內(nèi)字幕顯示內(nèi)容1

＜br＞嵌套進(jìn)去的內(nèi)字幕顯示內(nèi)容2

＜br＞嵌套進(jìn)去的內(nèi)字幕顯示內(nèi)容3

＜/marquee＞ //內(nèi)字幕結(jié)束標(biāo)記

＜br＞外字幕的內(nèi)容4

＜/marquee＞ //外字幕結(jié)束標(biāo)記

如果要字幕既向上又向右滾動，那么就把外字幕設(shè)置為向上滾動，無內(nèi)容，內(nèi)字幕設(shè)置為上右滾動，大小比外字幕稍微小一點(diǎn)，有必要的內(nèi)容即可。如：

＜marquee direction=up width="200" height="300" scrollAmount="2" scrollDelay="30" bgcolor="#00FF00" style="position: absolute; left: 74; top: 20; border: 5px inset #FF0000; color:#00FF00; font-size:14pt;

＜marquee width="200" height="300" scrollAmount="2" scrollDelay="100" bgcolor="#FF0000" style="border: 4px groove #800000"＞

＜br＞嵌套進(jìn)去的內(nèi)字幕顯示內(nèi)容1

＜br＞嵌套進(jìn)去的內(nèi)字幕顯示內(nèi)容2

…………

＜br＞嵌套進(jìn)去的內(nèi)字幕顯示內(nèi)容n

＜/marquee＞

＜/marquee＞

注意：如果要在字幕內(nèi)容前加入空格，不能用常用的空格鍵輸入，必須用HTML的空格標(biāo)記語句“?”（輸入時無引號）。

可能有人以為所有的東西都可以添加到字幕里去，其實(shí)這是不對的。網(wǎng)頁里的對象是有層次關(guān)系的，上級對象的可以包含本級和下級對象，反之則不盡然，有時候上下級有可以互相包含，如字幕里可以嵌套表格，而表格中也可以嵌套字幕。網(wǎng)頁中在字幕上一級的對象層次關(guān)系如表1所示。

表1

因此象窗口、框架式網(wǎng)頁層和嵌入式網(wǎng)頁等不可以鑲嵌到字幕中。

FrontPage2003的字幕里可以鑲嵌許多對象，如表格、列表、表單等等，也支持HTML的許多修飾標(biāo)記語句，如果精通HTML語言，可以根據(jù)需要進(jìn)行更復(fù)雜的修飾修改，而FrontPage2000則不盡然，所以應(yīng)特別注意：用FrontPage2003設(shè)計的特殊的字幕不要用FrontPage2000再次編輯存盤，否則出錯。

該文中所列舉的程序都經(jīng)作者嚴(yán)格測試，在多種瀏覽器和多種windows操作系統(tǒng)下運(yùn)行無誤。

參考文獻(xiàn)：

[1]張福成,譚國鵬.制作網(wǎng)頁寶典[M].北京:人民郵電出版社,2000.

[2] Oliver D.循序漸進(jìn)HTML與XHTML教程[M].5版.北京:人民郵電出版社,2001.

[3]王傳華.網(wǎng)頁設(shè)計與制作技術(shù)教程[M].2版.北京:清華大學(xué)出版社,2010.