消除主页浏览器差异的一些基本要点

最新推荐文章于 2021-10-29 11:46:56 发布

蝈蝈俊

最新推荐文章于 2021-10-29 11:46:56 发布

阅读量9.7k

点赞数

文章标签：浏览器 javascript 框架 html ie opera

本文链接：https://blog.csdn.net/ghj1976/article/details/3544

版权

消除主页浏览器差异的一些基本要点

吴泽平
(Email: wu-zeping@163.net)

一个优秀的网页制作工具，会让你的网页有一副强壮的身体。FrontPage2000系出名门，才貌双全，又有其兄弟IE撑腰，是多数版主的选择。但是用这个FrontPage养出的“烘培鸡”只对IE百依百顺，见了Netscape等外人就可能要闹点情绪。所以对其严加管教是必须的，以便让你的烘培鸡在任何浏览器中都能呈现相同的模样，让你成为真正“行不更名、坐不改姓”的英雄。
这里列出一些常用的基本方法，希望其它读者能继续补充。

1.很多人为了优化系统，会适当删除一些字体。如果你顽固地认为浏览器的默认字体绝对不适用于你的主页，而又不愿让删除了该种字体的访问者失望，大可以使用FACE=" "来指定一系列字体类型，按优先级依次排列（中间用逗号分开。例如:welcome

2.应慎用软回车。例如：我们在FrontPage2000的表格中输入一段文字时，到达表格边界后文字会自动换行，这在IE中浏览时是没有什么毛病的，然而不要指望在NC和Opera中也会自动换行，他们会一行到底！要解决这个问题可以在每行的结尾按住Shift加个硬回车，或者直接在源文件中插入回车。前者由于取消了自动换行所以在选择大字体浏览时会出现一行分两行显而第二行可能只有1、2个字的情况；后者在IE浏览时并不取消自动换行功能但源文件中的回车将用空格代替，在其他浏览器中则处理为换行，所以相对来说比较好一点。

3.如果不希望页面上的东东在一些浏览器中显示时连你都不知道会被放在哪里的话，用表格来定位所有的文字和图形就显得非常必要了。在用空格来校准位置时要千万小心，因为在Netscape Gold和Opera等浏览器中半角的空格(在打开汉字输入法的情况下)会被显示成怪字符,应关闭汉字输入法输入空格或输入全角空格来定位。

4.想加入背景音乐？又要针对IE和Netscape分别设置
IE:〈BGSOUND SRC="sound.mid" LOOP=1> (sound.mid是文件名，LOOP是播放次数，缺省值无限循环）
Netscape:〈EMBED SRC="sound.mid" AUTOSTART="True" HIDDEN="True" LOOP="false">
AUTOSTART="True"允许自动播放；因Netscape播放时会出现播放控制器，用HIDDEN="True"可以隐藏；LOOP="false"只播放一次,如要无限循环将false改为true即可。需要注意的是，一些版本IE中如同时出现上面两句，会产生错误。没问题啦，加入〈NOEMBED〉〈/NOEMBED〉标签:
〈NOEMBED〉〈BGSOUND SRC="sound.mid" LOOP=1> 〈/NOEMBED〉
〈EMBED SRC="sound.mid" AUTOSTART="True" HIDDEN="True" LOOP="false">

5.定义颜色时要小心。我们管不了浏览者对其个人计算机的设置，你精心设计的背景颜色可能因产生雀斑一样的疵点而大杀风景。因为如果你的访问者的调色板中没有设置你自定义的某种颜色，那么访问者的浏览器会使用一种叫“高频振动”的技术来显示这种颜色，但由于不能显示正确的透明度和清晰度，最后所得效果将严重失真。所以在背景和大块颜色处选择适合Web页面的安全色还是相当必要的。以下是推荐的RGB安全值（颜色代码），只要从表中每列中任意选择一组16进制数即可构成6位RGB值（见文末表一)。事实上，在256色设置的浏览方式中，仅有此216种RGB值是绝对安全的，例如:CC66FF。另:HTML中设置背景颜色的语句是<body bgcolor="#CC66FF">

6.不要轻易使用FrontPage2000提供的动态插件。她所提供的这些东东因多半基于ActiveX，有时不能在Netscape中正常显示。对于FrontPage2000提供的动态效果，我们大多可以通过一些“低端”的JavaScript来实现（IE3.0已开始支持JavaScript），这一类效果的JavaScript代码很容易找到，而且有较快的实现速度。

7.重要的提示性语句最好不要放置在Java滚动屏中。Netscape Gold和Opera等浏览器对Java的中文支持不尽如人意，会出现乱码现象，而且在同一页面上应尽少使用JavaApplet，否则会严重影响访问速度。

8.还有一些版本的浏览器不显示表格背景图形，只显示缺省背景颜色，甚至有的访问者关闭了多媒体(图形)选项来访问（如笔者），为了满足这部分来访者，最好同时设定表格背景图片和颜色，更何况并不是所有的浏览器都默认白底黑字呦。

9.首先写一个例子给大家<frameset frameborder="0" border="0" SCROLLING="NO" noresize cols="165,10%，2*，*">
你会在你的烘培鸡中发现类似的语句（以下均假设你已经使用FrontPage2000制作出了大致的模样），可以根据需要做适当的调整。
frameborder="n" border="n" :均为设置或删除帧边框，n=1设置边框，n=0则删除边框。其中frameborder是HTML4标准和IE用法，border是Netscape用法。要实现统一的效果就只好都设置了。
滚动条的出现会让“唯美主义者”大动肝火。如果不想让它在某帧出现可以加入SCROLLING="NO"来隐藏（YES是要求出现，AUTO是根据需要出现），做得极端一些，你甚至可以将SCROLLING="NO"加在框架页的<frameset>中，一举消灭所有的滚动条——只要你不怕访问者使用低分辨率浏览时只看到半个页面；noresize:禁止访问者用鼠标拖动移动帧边框；cols="165,10%，2*，*"依次设定各帧宽度。165是像素数，10%是占窗口的10%，"2*，*"是将窗口剩余部分按2:1分配。
HTML4标准中，各属性设置项次序可以任意打乱，但必须置于被描述对象的前端，至于字母大小写倒是无所谓，只是记住不要随便加入空格就行（同样适用于其它对象的描述）。

10.有时要求利用一个超链来同时打开两个帧页。我们先假设要通过超链1来同时载入帧页first.htm和next.htm到不同的帧页窗口，其中将next.htm在窗口banner处打开（窗口名称可以在框架页中类似
<frame name="banner" target="main" src="left.htm">的语句中找到）。需要在first.htm中加入onload指令:
<body οnlοad="parent.banner.location.href=
'next.htm'"></body>
具体加入形式:
<html>
<body οnlοad="parent.banner.location.href=
'next.htm'">
此处是该文件原有的其他内容
</body>
</html>
原理很简单，超链1打开first.htm，而first.htm中加入的onload语句自动打开next.htm到指定的窗口，从而实现利用一个链接控制两个帧页的功能（你完全可以进一步发挥）。

11.分二帧的情况下，FrontPage2000有时非要让你左面选择右面显示，如想要标新立异，使右页面选择，左页面显示，可以做如下调整:
我们假设左帧名:left.htm 右帧名right.htm在你的框架页HTML中应会包含类似 <frame name=“contents” target=“main” src=“left.htm”>
<frame name=“main” src=“right.htm”>的语句。只须在right.htm中加入<base target=“contents”> 并删除left.htm中类似的语句就一切OK了！

12.虽然将你的文件名保存为.htm或.html在浏览上效果相同，但如果访问者使用早期的WIN3.x操作系统保存你的.html文档，由于其不支持4字母的扩展名，他可能无法顺利在本机打开，所以请尽量保存为.htm形式。
使用带框架的分帧页面是最流行（或者说是最老土）的表现方式，而且在某些方面无疑是最有效的。但如果设置不当，FrontPage2000在这方面有点认死理，不但固执地把你的一些她看起来不顺眼的代码强行篡改，而且即使在单帧页面上，由于IE和Netscape对一些基本的功能有不同的语法支持，她就只顺从IE，而使你的烘培鸡在Netscape中显得有些先天不足，只有由我们亲自动手来改动一些代码来改善这种情况了。改动代码最好在记事本等无格式控制符的文本编辑器中进行，而且改动后的页面文件最好不要拿到FrontPage2000中再次做保存操作，否则她偷偷给你改回来，可别说我事先没告诉过你。清楚地认识框架设置方面的HTML标准，直接修改代码来实现某种功能，对于主页制作者来说可取得事半功倍的效果（这里可千万别偷懒）。

13.在框架页设置中（事实上如果你将表格的外框看作框架，而将单元格看作帧页的话，就会发现，设置表格和设置框架页属性方面是彼此相通的），各帧页宽、高的属性非常重要。我们这里以左右各一帧的框架页中各帧页宽度设置为例来说明（高度设置方面与宽度设置相同）:
a:左右帧页要求一定的比例（假设要求3:2）。应设置左帧为60%，右帧40%，这样可以保证在任意分辨率下都保持预定比例。但需注意若不是想达到特别效果，应保证左帧比例+右帧比例=100%
b:有一个帧页有严格宽度限制（假设左帧要求150个像素）。应设置左帧为150，右帧为*（即设定右帧占满剩余窗口），这样右帧作为宽度可伸缩帧页，可自动随着窗口大小的变化而变化，有效适应不同分辨率。实际应用中，大多数情况下都会要求某部分一定要放置在窗口的固定位置，设置一个可变化部分尤其重要。表格中如已设定表格宽度为nn%的话，对于其中的一列要求不太严格的单元格（注意是一整列或一整行，单元格的宽度有可能相互影响）不设定其宽度，也可以起到相同的作用。
c:超过100%宽度的设置并非完全没有用。如果设置为110%而同时设定不出现滚动条，你可以达到隐藏一部分帧页的目的。

14.在文字两侧加入“<BLINK>闪烁</BLINK>”会使其中文字闪烁，但并不适用于所有的浏览器。不要单单指望它来增加页面动感。

15.使用JavaScript会让你的主页看起来更酷，但在对JavaScript感觉麻木和关闭此项功能的浏览器来说，你精心调教的JavaScript甚至会被显示成字符串。解决方法：加入说明标志使不支持JavaScript的浏览器将其忽略:

如果你一定要让访问者知晓本页使用了JavaScript，可以继续添加NoScript标志:
<NOSCRIPT>
[JavaScript]
</NOSCRIPT>
此时会显示英文字母[JavaScript]

16.在已定义宽度为窗口nn%的表格内加入无回车的文本（排列为一行）可以帮助我们轻易实现任意分辨率下的自动换行。但由于Netscape对一些中文字体不能提供很好的支持（例如:楷体_GB2312），即使访问者的系统中安装有该种字体，也可能显示为默认字体，设置不当甚至会产生乱码。对于字体问题，你可以用上面的方法设置多重字体，而为避免异常乱码，最好在换行后的文本两端再次加入文本属性标志。(其实并非一定要这样做，但有时对解决异常乱码很有效。）例如:
第一段无换行文本 
第二段无换行文本
（其中 为经典换行符）

17.标识所有文档的字体和字号。具体结构组件的显示结果完全取决于浏览器，如果采用默认值会出现不同的显示结果。值得一提的是，尽量不要定义一些大多数用户所没有装载的特效字体，在你本机上运行也许没什么问题，但在别人看来就远不是那么回事了。需要的话可以制作成图片以求高度保真。

最后说一句，任何一种主页制作工具都无法囊括HTML，对于一些高级效果只有采取手工编程的方法，更何况FrontPage2000这类软件所提供的效果支持有其难以避免的商业竞争因素，所以烘培鸡在公布前，最好用不同的浏览器预览一下，这会帮你方便地发现问题。

(表一)
R 　 G　 B

00 00 00
33 33 33
66 66 66
99 99 99
CC CC CC
FF FF FF

蝈蝈俊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
消除主页浏览器差异的一些基本要点

消除主页浏览器差异的一些基本要点吴泽平(Email: [email protected])一个优秀的网页制作工具，会让你的网页有一副强壮的身体。FrontPage2000系出名门，才貌双全，又有其兄弟IE撑腰，是多数版主的选择。但是用这个FrontPage养出的“烘培鸡”只对IE百依百顺，见了Netscape等外人就可能要闹点情绪。所以对其严加管教是必须的，以便让你的烘培鸡在任何浏览器
复制链接

扫一扫