如何让网站适应各种分辨率的浏览器.doc

第一种方法：做一个网页解决问题（长了点） 如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得面目全非，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们有所帮助。 一、消除任意缩放浏览器窗口对网页的影响 一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得不堪入目了，这是个很值得注意的问题。 问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。 大家应该注意到，在DW中表格属性面板的高宽设定选择上提供了两种不同类型：百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的。IE浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。 自然，解决这个问题的办法就是将表格宽度设置成固定宽度（也就是像素值）。另外如果外层表格已做好固定宽度设置，内层表格也可以适当使用百分比设置。清楚这个原则以后，如果出现类似的问题大家也知道怎么解决。 二、让网页居中 说到了窗口大小就会顺着路子想到分辨率的问题，在800600分辨率下制作的网页在1024768分辨率的机器上打开，整个网页就会跑到左边；1024768分辨率的网页在800600分辨率的机器上有时也会变得不堪入目。两种分辨率各做一个吧？做起来费时，看起来也费劲。怎么办呢？ 现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主，要想让网页在1024*768时居中，只要在网页原代码的后紧加一句，前加一句就OK了。不过有几个问题这是要注意一下，第一个就是上面说到的百分比的问题，表格、单元格的宽度单位最好要使用像素单位，而不要用百分比。例如width=770。如果你的表格宽度设的是百分比，那么使用大于800600的像素时，网页就会拉宽，这样网页可能会变形。在中加入leftmargin=0，即这种情况下，800600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。 三、定义固定大小的文字 大家都知道,在IE浏览器的功能设置中，有一个可以自由设置窗口内容字体大小的功能，这样由于不同访问者的设置习惯不同，呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体，结果由于用户对浏览器的额外设定，变的更大了，这时你的网页也可能变得不堪入目。虽然不是你的错，但客户是上帝。 如果使用了网页中的CSS样式表技术，就不会出现上述情况了。使用快捷键Shift+F11打开样式表CSS style编辑器，在窗口中单击鼠标右键执行New CSS style.命令新建一个样式表，然后在给出的列表中选择类型选项，定义文字属性参数（一般文字的大小选择12px较为适宜）。完成后选择网页编辑窗中的文本，单击新的样式表名称，可以看到选中的文本发生了变化。预览时试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。 四、让网页适应不同的浏览器 浏览器的格局现在是两分天下，一分是IE，另一分是NetScape，在国内Ie有绝对的占有率，在这种情况下我们设计的网页只要兼容它就行了，但NetScape在国外还是有很多人使用，毕竟它是浏览器的元老。 虽然没有办法做出让所有浏览器都兼容的网站，但只要注意以下几点，做出来的网页在各个浏览器都中能达到比较好的显示效果： 不要混合使用层和表格排版，如果是父子关系，如层中表格，不在此原则范围内。 内联式的 CSS 在 Netscape Navigator 中经常会出现问题，使用链式或内嵌式。 有时需要在空层插入表格或者透明图片，以保证在 Netscape Navigator 里的效果。 对于只有几个像素宽度或高度的层，改用图片来实现。 避免使用 W3C 组织不推荐的排版属性，用 CSS 代替。 第二种方法：做两个适合不同分辨率的页面 一个是800600，一个是1024768，在800600的页面中加入一下代码就可以实现跳转了： - 解决分辨率问题在Dreamweaver中没有此项功能，我们只能手动加入一段Javascript代码。首先在changeie.html或changenc.html页面代码中的和中加入以下代码： 然后再在内加入onLoad=redirectPage() 最后，同样地，在和之间加入以下代码来显示网页的工作信息： ! var w=screen.width var h=screen.height document.write(系统已检测到您的分辨率为:); document.write(); document.write(wh); document.write(); document.write(正在进入页面转换,请稍候); / 探究客户端浏览器分辨率的自适应问题（如何使网站脚本自动适应客户端分辨率）(2)有人建议直接使用JavaScript方式（感谢jack4811(这么简单还问，楼下的告诉他 (|) ）：或者CSS方式（感谢 Miracle(新一代的开山怪) ）1、制作一组css文件，分被用于在不同分辨率下的屏幕布局设置2、根据css文件，设计页面布局2、在页面加载过程中取得屏幕分辨率（上面已经贴了代码了），然后根据分辨率，重新设定页面元素应该应用的css class。这个过程中完全不需要服务器代码参与，没有post-back。另外，要将最佳分辨率下的css模板设置为默认，这样的话可以大大减少重新应用style的可能性。使用CSS不失为一个办法，就类似的Theme功能，这样做也会有困难：如何根据分辨率加载不能的css文件呢？如果一个网站有非常多的页面时，每个文件都需要加入相应的分辨率判定和CSS引导的JavaScript如果在服务器端采用IHttpHandler或者使用自定义控件，在客户端浏览文件前做出处理，然后由IIS自动处理岂不更好？以下是我昨晚探索出来的结果，仍需要大力完善，欢迎大家继续探讨。1、首先按照本贴开头的方法，建立一个GetScreen.aspx取得客户端分辨率并将之赋予SessionScreenResolution，同时为了自动转向在本贴开头所示代码中加入以下关键代码：string w=Request.FormWidthPixel;/得到屏幕分辨率Xstring h=Request.FormHeightPixel;/得到屏幕分辨率YSessionScreenResolution=w+*+h;/赋值给Session/转向（更多相关代码见下）if(SessionUrlReferrer!=null)Response.Redirect(SessionUrlReferrer.ToString();2、在Global.asax中：public static string strUrl;/用于取得用户刚进入时的页面链接protected void Application_BeginRequest(Object sender,EventArgs e) strUrl=Request.RawUrl.ToString();protected void Application_EndRequest(Object sender, EventArgs e)protected void Application_Start(Object sender, EventArgs e) protected void Session_Start(Object sender, EventArgs e) if (SessionScreenResolution = null) Response.Redirect(/GetScreen.aspx); /如果未取得客户端浏览器分辨率，则定向到GetScreen.aspx，获取之。SessionUrlReferrer = strUrl;/将最初请求页面放在Session中，以便在第1条所示代码中重定向protected void Session_End(Object sender, EventArgs e) 3、在需要做分辨率处理的页面中：private string screenWidth;void Page_Load(Object sender,EventArgs e)if(SessionScreenResolution!=null)screenWidth=SessionScreenResolution.ToString().Split(*)0.ToString();这里在区内作示例：body bgcolor=#0000FF background=MyPicture.gif leftmargin=0 topmargin=0 marginwidth=0 marginheight=0优点：一次检测，多次使用。缺点：需要客户端COOKIE的支持，因为使用了Session.-备注：-在上述示例中可以更简化一下，那就是:在第1条中：设置SessionScreenResolutionX和SessionScreenResolutionY：SessionScreenResolutionX=Request.FormWidthPixel;/得到屏幕分辨率X并赋值给SessionSessionScreenResolutionY=Request.FormHeightPixel;/得到屏幕分辨率Y并赋值给Session在第3条中直接在区内使用：body bgcolor=#0000FF background=MyPicture.gif leftmargin=0 topmargin=0 marginwidth=0 marginheight=0另外：检测分辨率的代码可以更简化一些：/GetScreen.aspx(注：未做仔细调试) public void Page_Load(Object sender, EventArgs e) if (Request.QueryStringaction != null) SessionScreenResolutionX = Request.QueryStringresX.ToString(); SessionScreenResolutionY = Request.QueryStringresY.ToString(); SessionScreenResolutionD