转至繁体中文版     | 网站首页 | 图文教程 | 资源下载 | 站长博客 | 图片素材 | 武汉seo | 武汉网站优化 | 
最新公告:     敏韬网|教学资源学习资料永久免费分享站!  [mintao  2008年9月2日]        
您现在的位置: 学习笔记 >> 图文教程 >> 站长学院 >> Web开发 >> 正文
消除主页在不同浏览器中效果的差异         ★★★★

消除主页在不同浏览器中效果的差异

作者:闵涛 文章来源:闵涛的学习笔记 点击数:719 更新时间:2009/4/23 11:16:10

 在网上游荡,看着别人的精彩主页难免心里痒痒,但自己悬梁刺股之后养出的烘培鸡如果在不同的浏览器中搞得像基因突变,连你自己都认不出来的话,你的个人主页恐怕也就真的成了你个人看的主页了。痛定思痛,给烘培鸡进行一次现代点的基因重组吧!

   一个优秀的网页制作工具,会让你的烘培鸡开始就有一副较为强壮的身子骨。FrontPage98系出名门,才貌双全,又有大名鼎鼎的兄弟IE撑腰,是当然的选择。只是靠这个大家闺秀养出的“烘培鸡”只对IE百依百顺,见了Netscape等外人就多少非要闹点情绪。更严重的是在不同分辨率下,显示的页面会忽大忽小(你也不希望一些东东上下乱窜吧),所以对其严加管教是理所当然的,以便让你的烘培鸡在任何浏览器中都呈现相同的模样,真正地全天候工作。
   把所有的工作留给自己,充分满足访问者的个性,你的烘培鸡会看起来更加讨人喜欢:

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

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

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

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

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

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

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

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

  9.分二帧的情况下,FrontPage98有时非要让你左面选择右面显示,如想要标新立异,使右页面选择,左页面显示,可以做如下调整:
   我们假设左帧名:left.htm 右帧名right.htm在你的框架页HTML中应会包含类似
的语句。只须在right.htm中加入 并删除left.htm中类似的语句就一切OK了!

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

  11.有时要求利用一个超链来同时打开两个帧页。我们先假设要通过超链1来同时载入帧页first.htm和next.htm到不同的帧页窗口,其中将next.htm在窗口banner处打开(窗口名称可以在框架页中类似
的语句中找到)。需要在first.htm中加入onload指令:
  
   具体加入形式:
  
  
   此处是该文件原有的其他内容
  
  
   原理很简单,超链1打开first.htm,而first.htm中加入的onload语句自动打开next.htm到指定的窗口,从而实现利用一个链接控制两个帧页的功能(你完全可以进一步发挥)。

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

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

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

第二段无换行文本
(其中
为经典换行符)

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

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

如果你一定要让访问者知晓本页使用了javascript,可以继续添加NoScript标志:

此时会显示英文字母[javascript]

  17.应慎用软回车。例如:我们在FrontPage98的表格中输入一段文字时,到达表格边界后文字会自动换行,这在IE中浏览时是没有什么毛病的,然而不要指望在NC和Opera中也会自动换行,他们会一行到底!要解决这个问题可以在每行的结尾按住Shift加个硬回车,或者直接在源文件中插入回车。前者由于取消了自动换行所以在选择大字体浏览时会出现一行分两行显而第二行可能只有1、2个字的情况;后者在IE浏览时并不取消自动换行功能但源文件中的回车将用空格代替,在其他浏览器中则处理为换行,所以相对来说比较好一点。
   “啊——”喘口气,就写到这里吧。 顺便说一句,任何一种主页制作工具都无法囊括HTML,对于一些高级效果只有采取手工录入的方法,更何况FrontPage98这类软件所提供的效果支持有其难以避免的商业竞争因素,所以烘培鸡在公布前,最好用不同的浏览器预览一下,这会帮你方便地发现问题。有空记得来我这里小坐(http://info.cq.cninfo.net/zxd/)指教呦。
(表一)
R   G  B
00 00 00
33 33 33
66 66 66
99 99 99
CC CC CC
FF FF FF 


[办公软件]如何在同一演示文稿的不同幻灯片中使用不同的设计…  [Web开发]asp.net 编译错误类型“同时存在于”不同的dll中
[Web开发]ASP.NET动态加载不同CSS,实现切换皮肤效果  [网页制作]如何去掉主页超链接的下划线?
[网页制作]客户是上帝—网站主页设计不容忽视  [网页制作]不同的CSS写法介绍
[办公软件]在excel中查找重复值并标上不同的颜色  [办公软件]利用分隔符中的分节符实现Word文档不同页面使用不…
[办公软件]在Word中不同的页面设置不同的页眉页脚  [办公软件]怎样把多个不同类型的文件合并到Word里面
教程录入:mintao    责任编辑:mintao 
  • 上一篇教程:

  • 下一篇教程:
  • 【字体: 】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口
      注:本站部分文章源于互联网,版权归原作者所有!如有侵权,请原作者与本站联系,本站将立即删除! 本站文章除特别注明外均可转载,但需注明出处! [MinTao学以致用网]
      网友评论:(只显示最新10条。评论内容只代表网友观点,与本站立场无关!)

    同类栏目
    · Web开发  · 网页制作
    · 平面设计  · 网站运营
    · 网站推广  · 搜索优化
    · 建站心得  · 站长故事
    · 互联动态
    更多内容
    热门推荐 更多内容
  • 没有教程
  • 赞助链接
    更多内容
    闵涛博文 更多关于武汉SEO的内容
    500 - 内部服务器错误。

    500 - 内部服务器错误。

    您查找的资源存在问题,因而无法显示。

    | 设为首页 |加入收藏 | 联系站长 | 友情链接 | 版权申明 | 广告服务
    MinTao学以致用网

    Copyright @ 2007-2012 敏韬网(敏而好学,文韬武略--MinTao.Net)(学习笔记) Inc All Rights Reserved.
    闵涛 投放广告、内容合作请Q我! E_mail:admin@mintao.net(欢迎提供学习资源)

    站长:MinTao ICP备案号:鄂ICP备11006601号-18

    闵涛站盟:医药大全-武穴网A打造BCD……
    咸宁网络警察报警平台