适应不同的浏览器的网页设计方法

2016-06-03 10:33:51 栏目:益众动态 查看(3337)

       浏览器的格局现在是两分天下,一分是IE,另一分是NetScape,在国内Ie有绝对的占有率,在这种情况下我们设计的网页只要兼容它就行了,但NetScape在国外还是有很多人使用,毕竟它是浏览器的元老。


  虽然没有办法做出让所有浏览器都兼容的网站,但只要注意以下几点,做出来的网页在各个浏览器都中能达到比较好的显示效果:


  不要混合使用层和表格排版,如果是父子关系,如层中表格,不在此原则范围内。


  内联式的 CSS 在 Netscape Navigator 中经常会出现问题,使用链式或内嵌式。


  有时需要在空层插入表格或者透明图片,以保证在 Netscape Navigator 里的效果。


  对于只有几个像素宽度或高度的层,改用图片来实现。


  避免使用 W3C 组织不推荐的排版属性,用 CSS 代替。



第二种方法:做两个适合不同分辨率的页面,一个是800×600,一个是1024×768,在800×600的页面中加入一下代码就可以实现跳转了:



   解决分辨率问题在Dreamweaver中没有此项功能,我们只能手动加入一段Javascript代码。首先在change-ie.html或change-nc.html页面代码中的< head>和< /head>中加入以下代码:





   < script language=JavaScript>  

   < !--

   function redirectPage(){  

   var url800x600=〃index-ie.html〃; //定义两个页面,此处假设index-ex.html和1024-ie.html同change-ie.html在同一个目录下  

   var url1024x768=〃1024-ie.html〃;  

   if ((screen.width==800) && (screen.height==600)) //在此处添加screen.width、screen.height的值可以检测更多的分辨率  

   window.location.href= url800x600;  

   else if ((screen.width==1024) && (screen.height==768))  

   window.location.href=url1024x768;  

   else window.location.href=url800x600;  

   }  

   // -->  

   < /script>

   然后再在< body…>内加入onLoad=〃redirectPage()〃

   最后,同样地,在< body>和< /body>之间加入以下代码来显示网页的工作信息:



   < script language=JavaScript>  

   < !--

   var w=screen.width  

   var h=screen.height  

   document.write(〃系统已检测到您的分辨率为:〃);  

   document.write(〃< font size=3 color=red>〃);  

   document.write(w+〃×〃+h);  

   document.write(〃< /font>〃);  

   document.write(〃正在进入页面转换,请稍候…〃);  

   // -->  

   < /script>

沟通
扫二维码与项目经理沟通

我们在微信上24小时期待你的声音

解答本文疑问/技术咨询/运营咨询/技术建议/互联网交流

转载请注明出处:适应不同的浏览器的网页设计方法 - 益众网络
分享:
标签: