让网页版面自动适应屏幕分辨率的技巧

style="WIDTH: 89.81%; HEIGHT: 64px" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-4577827332549849&dt=1192819750500&lmt=1192819750&prev_fmts=468x60_as&format=468x15_0ads_al_s&output=html&correlator=1192819750437&channel=1741427766&pv_ch=1741427766%2B&url=http%3A%2F%2Fyzkzoo.5d6d.com%2Fthread-68-1-1.html&color_bg=FFFFFF&color_text=000000&color_link=0000FF&color_url=008000&color_border=336699&ref=http%3A%2F%2Fyzkzoo.5d6d.com%2Fforum-16-1.html&cc=100&ga_vid=1025434795.1192631677&ga_sid=1192817968&ga_hid=1871659779&ga_fc=true&flash=8&u_h=768&u_w=1024&u_ah=738&u_aw=1024&u_cd=32&u_tz=480&u_his=2&u_java=true">

style="WIDTH: 82.23%; HEIGHT: 74px" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-4577827332549849&dt=1192818497343&lmt=1192818497&format=468x60_as&output=html&correlator=1192818497343&channel=1741427766&url=http%3A%2F%2Fyzkzoo.5d6d.com%2Fthread-68-1-1.html&color_bg=FFFFFF&color_text=000000&color_link=0000FF&color_url=008000&color_border=336699&ad_type=text_image&ref=http%3A%2F%2Fyzkzoo.5d6d.com%2Fforumdisplay.php%3Ffid%3D16%26page%3D1&ui=rc%3A6&cc=100&ga_vid=1025434795.1192631677&ga_sid=1192817968&ga_hid=1000484876&ga_fc=true&flash=8&u_h=768&u_w=1024&u_ah=738&u_aw=1024&u_cd=32&u_tz=480&u_his=6&u_java=true">

 让网页版面自动适应屏幕分辨率的技巧
如何让网页版面更适合浏览者呢?这里有技巧
刚做好网页的朋友们经常收到网友们的反馈，说自己的网页排版乱得一塌糊涂，或者被拉伸，或者被压缩，要不就是不能完整显示在屏幕内。这是为什么呢？因为通常初学者朋友都按照自己的屏幕分辨率对网页进行设计，但是却没有考虑到网友们可能使用了别的屏幕分辨率，以至于看起来版面混乱。
    目前，网友们上网通常会采用800×600、1024×768两种分辨率，由于网页不是用来给自己看的，所以我们必须让自己的网页能够兼顾这两种情况，让不同分辨率设置的网友都能够看到一个排版美观正确的网页。下面就介绍几种常用的方法，特别说明一下除非你的网站是艺术类的，有特别需求，通常我们都会首先照顾分辨率设置为800×600的大众化标准。
    一、 自然拉伸
    如果你的网站结构没有用到大量的图形来衔接，主要*表格来定结构，那么你就可以使用该方法。非常适用于主要*表格、文字来表达信息的简单的网页页面。
制作表格时，只要你把表格的宽度属性定义为100% ，表格就会根据分辨率的不同自行调整宽度。
    二、 固定居中
    自然拉伸法的好处自不必说，可以总是充满整个屏幕，但是弱点也很明显：一来如果网页版面复杂，各图形元素之间有精确的的定位关系，一旦拉开或者压缩就会彻底变形；二来即使版面不太复杂，文字行数亦不好控制。有时候分辨率一旦变化，要么太密，要么太挤，就失去了作者设计版面的意图了。所以目前各大网站普遍采用的方法是固定居中法！
该方法的制作方法很简单。在制作最大的表格时，把表格属性的宽度像素定义为一个固定数值，并且让表格居中即可。以后制作的表格，就会限定在这个表格之内，永远都不会超出800×600分辨率的屏幕，网页的大小相当于固定死了。当浏览者使用1024×768的分辨率浏览网页时，屏幕两边就会留下白边，看起来觉得比较自然。
    三、 兵分两路
    如果你的网页不经常更新，而且对页面效果极其在意，那好，你就设计两个页面，分别对应800×600和1024×768两种分辨率。把这两个首页文件分别命名为index800.htm和index1024.htm 。然后在空白的索引页index.htm中加入以下代码到前面：
<Script language=”javascript”>
if (window.screen){
var w=screen.width;
url_800=”index800.htm”;
url_1024=”index1024.htm”
//请根据你的文件命名修改
if (w<835){
self.location.replace(url_800);
}//加入判断条件，还可以用“&”加入多个判断条件
if (w>=835){
self.location.replace(url_1024);
}
}
</Script>
    这样，当访问者打开你的索引页时，系统就会判断访问者的屏幕分辨率，然后转到相应的首页。

style="WIDTH: 44.33%; HEIGHT: 259px" src="http://pagead2.googlesyndication.com/cpa/ads?client=ca-pub-4577827332549849&cpa_choice=CAEaCB94-nvUZWENUB9QugJQtwRQTVAgULcCUB4&oe=gb2312&dt=1192720966468&lmt=1192720966&format=250x250_as&output=html&correlator=1192720966453&channel=2735220158&url=http%3A%2F%2Fyzkzoo.5d6d.com%2Fthread-67-1-1.html&color_bg=FFFFFF&color_text=000000&color_link=0000FF&color_url=008000&color_border=336699&ad_type=text_image&region=_google_cpa_region_&ref=http%3A%2F%2Fyzkzoo.5d6d.com%2Fforum-16-1.html&cc=100&ga_vid=1025434795.1192631677&ga_sid=1192720940&ga_hid=1155529757&ga_fc=true&flash=8&u_h=768&u_w=1024&u_ah=738&u_aw=1024&u_cd=32&u_tz=480&u_his=2&u_java=true"> style="WIDTH: 52.39%; HEIGHT: 259px" src="http://pagead2.googlesyndication.com/cpa/ads?client=ca-pub-4577827332549849&cpa_choice=CAEaCKcC4yuPlq5lUDRQDVAtUK4BUENQCA&oe=gb2312&dt=1192819388296&lmt=1192819388&format=300x250_as&output=html&correlator=1192819388281&channel=2735220158&url=http%3A%2F%2Fyzkzoo.5d6d.com%2Fviewthread.php%3Ftid%3D70%26page%3D1%26extra%3Dpage%253D1&color_bg=FFFFFF&color_text=000000&color_link=0000FF&color_url=008000&color_border=336699&ad_type=text_image&region=_google_cpa_region_&ref=http%3A%2F%2Fyzkzoo.5d6d.com%2Fpost.php%3Faction%3Dedit%26fid%3D16%26tid%3D70%26pid%3D70%26page%3D1%26extra%3Dpage%253D1&cc=100&ga_vid=1025434795.1192631677&ga_sid=1192817968&ga_hid=1527165455&ga_fc=true&flash=8&u_h=768&u_w=1024&u_ah=738&u_aw=1024&u_cd=32&u_tz=480&u_his=5&u_java=true">

 

style="WIDTH: 82.23%; HEIGHT: 74px" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-4577827332549849&dt=1192818497343&lmt=1192818497&format=468x60_as&output=html&correlator=1192818497343&channel=1741427766&url=http%3A%2F%2Fyzkzoo.5d6d.com%2Fthread-68-1-1.html&color_bg=FFFFFF&color_text=000000&color_link=0000FF&color_url=008000&color_border=336699&ad_type=text_image&ref=http%3A%2F%2Fyzkzoo.5d6d.com%2Fforumdisplay.php%3Ffid%3D16%26page%3D1&ui=rc%3A6&cc=100&ga_vid=1025434795.1192631677&ga_sid=1192817968&ga_hid=1000484876&ga_fc=true&flash=8&u_h=768&u_w=1024&u_ah=738&u_aw=1024&u_cd=32&u_tz=480&u_his=6&u_java=true">

style="WIDTH: 58.41%; HEIGHT: 156px" src="http://pagead2.googlesyndication.com/pagead/ads?client=ca-pub-4577827332549849&dt=1192819750656&lmt=1192819750&prev_fmts=468x60_as%2C468x15_0ads_al_s%2C234x60_as&format=200x90_0ads_al_s&output=html&correlator=1192819750437&channel=1741427766&pv_ch=1741427766%2B&url=http%3A%2F%2Fyzkzoo.5d6d.com%2Fthread-68-1-1.html&color_bg=FFFFFF&color_text=000000&color_link=0000FF&color_url=008000&color_border=336699&ref=http%3A%2F%2Fyzkzoo.5d6d.com%2Fforum-16-1.html&cc=100&ga_vid=1025434795.1192631677&ga_sid=1192817968&ga_hid=1871659779&ga_fc=true&flash=8&u_h=768&u_w=1024&u_ah=738&u_aw=1024&u_cd=32&u_tz=480&u_his=2&u_java=true">