不用JAVA的纯HTML超级字幕的设计方法

张正新

摘要：编辑网页时往往要使用字幕以增加网页的动态效果和美感，该文探讨了如何使用纯html语言设计多方向滚动的超级字幕，详细的介绍了如何在字幕中加入多行多段文字、图片和表格以及给字幕建立超链接的编程设计思路与技巧。

关键词：网页设计；HTML编程；超级字幕

中图分类号：TP393文献标识码：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设计字幕比较麻烦，微软FrontPage的字幕设计很容易，但FrontPage的字幕有点简单，不过我们只要对FrontPage的字幕组件加以改造就可以完全可以制作出功能齐全的超级字幕，无需使用烦琐的JAVA或vb脚本语言来编程。微软的FrontPage2000和FrontPage2003都可以作为我们设计超级字幕的软件，但FrontPage2000在调试时往往会打乱我们加入的特殊代码，所以建议大家在参照本文范例实践时用FrontPage2003。

要制作超级字幕，应该懂一点HTML标记语言，在编写或阅读html程序时一定要注意语句的完整性和准确性。

1多行多段向上滚动字幕的设计

打开FrontPage2003，单击菜单“插入”——“wbe组件”——“动态效果”——“字幕”，然后在“文字”栏输入你要显示的文字。为了讲解方便，我们用“第一、二、三段文字”代替所要显示的字幕文字。如果要输入多行文字，就需要在每一段文字后加入HTML语言的回车换行语句“

”。请双击已插入的字幕，在字幕属性对话框的文字栏输入：

第一段文字

第二段文字

第三段文字

……

这儿的省略号……表示许多段文字，段落文字可根据你的需要输入。预览一下就可以看到多行多段的滚动字幕了，但字幕仍然只能左右滚动。FrontPage字幕滚动表现方式一般只有三种：滚动条、幻灯片、交替，滚动方向只能选择向左或向右，并且你必须选规则一种，不可为空选择，默认向左滚动。

现在需要添加被隐含了的字幕滚动参数。要想使字幕向上或向下滚动，不能简单地通过修改字幕属性对话框的传统方法来实现，应该在代码状态下修改字幕的参数。具体方法是单击已插入的字幕对象，再单击屏幕左下角“代码”切换到HTML编程状态，然后在

在定义滚动方向参数direction=up的后面一定要有至少一个英文空格，不能是中文空格，否则仍为左右滚动。如果参数是direction=down那么字幕则向下滚动，如果参数是direction= righ或direction=left，那字幕自然向右或向左滚动。

2给字幕建立多个任意超链接

如果要给字幕中的文字建立超链接，可以在字幕属性对话框中，直接修改文字内容。方法是在字幕的文字前后加上HTML语言超链接的标记语句即可，如：

第一段文字

如果字幕中有许多超链接，应在每个想建立超链接的字幕文字前加入“”（注意中文引号不要输入），在超链接的字幕文字后加入“”。如：

第一段文字

第二段文字

第三段文字

……

但是，当我们预览网页将鼠标移动到字幕上时，字幕仍在滚动，要让滚动的字幕在鼠标移到其上停止滚动，还应该给字幕添加鼠标事件代码，现在在代码状态下把本例字幕的属性修改如下：

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

各参数如下：

1）direction：表示字幕滚动的方向，可选的值有right、left、down、up。

2）width和height：表示滚动区域的大小，width是宽度，height是高度。为了向上滚动我将宽度设置为124个像素，高度设置为484个像素。

3）scrollDelay：这是用来控制延迟速度的，即滚动时的停滞时间（毫秒），默认为90，值越大，速度越慢，建议设为60。但如果是默认值（90），则此参数不出现。

4）scrollAmount：它表示速度的数量，其实就是字幕每次滚动多少像素，值越大速度越快。如果没有它，默认为6，建议设为1。同理如果是默认值（6），则此参数也不出现。

5）onmouseout=this.start()：此参数作用是当鼠标移到字幕上时，停止滚动。

6）onmouseover=this.stop()：此参数作用是当鼠标移开字幕时，开始继续滚动。

FrontPage2003的字幕有40多个参数，参数无严格的顺序要求，但必须用空格分开。

至于大小、颜色、字体、字色、边框风格，你可以通过字幕属性对话框很容易设置修改，在此不述了。

以上方法用FrontPage2003很容易实现，修改字幕内容添加HTML语言标志语句时，在FrontPage2003下，可以在字幕属性的文字栏直接修改添加，也可以在代码窗口中对字幕的内容进行修改，用前一种方法比较直观方便。但用FrontPage2000编辑时不可以直接在字幕属性对话框的文字栏中添加HTML语句，可在HTML代码窗口可以修改字幕参数，给字幕文字添加相关的HTML标记语句。虽然FrontPage2000支持多行字幕（修改字幕宽度），但无法实现多段字幕。可以给FrontPage2000的字幕建立多个超链接，如将字幕的文字改为：＜a href="某某网页.htm ＞文字AAAAAAAA，＜/a＞"某某网页.htm ＞文字BBBBBBBB，＜/a＞"某某网页.htm ＞文字CCCCCCC＜/a＞这样字幕中的三个超链接就建立了。

3让图片成为字幕元素

传统的字幕只能显示文字，太呆板了，把图片作为字幕的元素，让图片滚动并超级链接不是很多网页设计者美好的追求吗？要在字幕中出现图片，有两种途径，一是给字幕添加背景图片，加入背景图片的语句是：background-image:url('图片文件路径及名称')"，如：

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

第二种途径是我们可以在字幕文字中的适当位置加入以下代码就把图片加入到字幕中去了：

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

注意：tupian.gif是你图片的文件名，可以带上路径，省略为当前目录。

如果要给图片建立超级链接，应把字母图片的代码修改如下：

＜a href="链接对象名称"＞＜img border="0" src="tupian.gif" width="180" height="60"＞＜/a＞

4把艺术字放到字幕里去

一般文字只有字型字体字色盒大小的变化，不能产生立体字、阴影字、反片字，太单调，艺术字可以设计出许多绚丽的文字效果，我们也可以把艺术字放到字幕里去。艺术字的html语句太长太复杂，其实你不懂HTML语言也无关大局，现在我们用另一种简单方法制作超级字幕，前提是你要会读懂HTNL程序。如果要把艺术字做成字幕，可以先把艺术字设置好，然后把艺术字代码复制到字幕代码中，要注意代码的对称性和完整性。要切记不可以删除原先的艺术字，否则字幕中部无法显示艺术字。那么如何隐藏原先的艺术字呢？可以把原先的艺术字格式大小设置为高宽都为1个像素，“布局”选择“绝对”在下一层，艺术字的“艺术字库”设置为任意一行的最后一个，这样可以达到隐藏的原先艺术字的目的。

为了使字幕在某个位置，或使其与其他对象搭配合理，可以使用绝对位置定位。原先的艺术字内容已不起作用，你完全可以在字幕的代码中或字幕的文字属性里更改要显示的字幕内容及其特征。

5流动的按钮

按钮也具有动态效果，每当把鼠标移动或单击或移开按钮，按钮都会发生一些变化，产生动态效果。如果把按钮加到字幕中去，就形成了流动的按钮，效果当然很好。不过设计过程要求特别。我们先插入字幕以及必要的按钮并分别设置好他们的属性特色，在确定无误的情况下存盘，这一步非常关键，如果不存盘，后面就无法在字幕中显示按钮。现在可以把按钮的代码全部复制到字幕代码中，再能删除原先的。

注意：艺术字和按钮一般不要一起加到字幕中，否则会出现运行时间错误，影响效果。

6嵌套的字幕

字幕嵌套的方法是先插入并用以上方法设计好一个字幕，然后再在字幕里添加若干个字幕代码。添加代码的方法有两种，一是手工直接输入，二是在其他位置再插入若干个字幕，再把这若干字幕的代码剪切粘贴到前一个字幕的代码中，同样要注意代码的对称性和完整性。例如：

＜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;

//以上之外嵌套字幕的特色设置，包括向上滚动，长、高、速度以及边框特征

＜br＞外字幕的内容1

＜br＞外字幕的内容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"＞

//嵌套进去的字幕特征特色设置：长、高、速度、背景色等等，没有设置滚动方向则默认为向左滚东。

＜br＞嵌套进去的内字幕显示内容1

＜br＞嵌套进去的内字幕显示内容2

＜br＞嵌套进去的内字幕显示内容3

＜/marquee＞ //内字幕结束标记

＜br＞外字幕的内容4

＜/marquee＞ //外字幕结束标记

如果要字幕既向上又向右滚动，那么就把外字幕设置为向上滚动，无内容，内字幕设置为上右滚动，大小比外字幕稍微小一点，有必要的内容即可。如：

＜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＞嵌套进去的内字幕显示内容1

＜br＞嵌套进去的内字幕显示内容2

…………

＜br＞嵌套进去的内字幕显示内容n

＜/marquee＞

＜/marquee＞

注意：如果要在字幕内容前加入空格，不能用常用的空格键输入，必须用HTML的空格标记语句“ ”（输入时无引号）。

可能有人以为所有的东西都可以添加到字幕里去，其实这是不对的。网页里的对象是有层次关系的，上级对象的可以包含本级和下级对象，反之则不尽然，有时候上下级有可以互相包含，如字幕里可以嵌套表格，而表格中也可以嵌套字幕。网页中在字幕上一级的对象层次关系如表1所示。

表1

因此象窗口、框架式網页层和嵌入式网页等不可以镶嵌到字幕中。

FrontPage2003的字幕里可以镶嵌许多对象，如表格、列表、表单等等，也支持HTML的许多修饰标记语句，如果精通HTML语言，可以根据需要进行更复杂的修饰修改，而FrontPage2000则不尽然，所以应特别注意：用FrontPage2003设计的特殊的字幕不要用FrontPage2000再次编辑存盘，否则出错。

该文中所列举的程序都经作者严格测试，在多种浏览器和多种windows操作系统下运行无误。

参考文献：

[1]张福成,谭国鹏.制作网页宝典[M].北京:人民邮电出版社,2000.

[2] Oliver D.循序渐进HTML与XHTML教程[M].5版.北京:人民邮电出版社,2001.

[3]王传华.网页设计与制作技术教程[M].2版.北京:清华大学出版社,2010.