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

2016-02-01 08:46:34 栏目:网站建设

浏览器的格局现在是两分天下，一分是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>