charles
TW版主
  
UID 19414
精华
26
积分 21148
帖子 13082
阅读权限 100
注册 2006-10-17
状态 离线
|
|
|
网页设计 自适应客户端分辨率的实现
第一种方法：做一个网页解决问题（长了点） $Q6E)K.P(U1p3d$Y
h9s9V#q2@!Itech.techweb.com.cn 如果只是因为浏览者改变了浏览器的设置，或者因为浏览器不兼容，使自己精心制作的网页变得"面目全非"，那多令人沮丧！下面我们以网页爱好者的常用工具Dreamweaver（以下简称DW）为例，列出几个网页制作初学者较常见的网页布局问题以及解决方法，希望对初学者们有所帮助。 TechWeb-技术社区&R2\${3B"h+J
+l!H;_,r#H9d,E z;{/T 一、消除任意缩放浏览器窗口对网页的影响
"}#y&C-~+u&G0T'r5b2I-C!Y6T6M+C(m1r1a'm
一番辛苦做出来的网页，在全屏状态下浏览一切正常。但在改变浏览窗口大小之后，网页就变得"不堪入目"了，这是个很值得注意的问题。
'w9i/q8Y,a'm1j6ytech.techweb.com.cn
)T3f,C4f%S 问题的根源还得从网页的布局说起，在DW中，网页内容的定位一般是通过表格来实现的，解决表格的问题也就成功了大半。
+x;Z8W2C3Q8I(`(Y+s9|.B$Z,C0^9{"~&R3D+^#~
大家应该注意到，在DW中表格属性面板的高宽设定选择上提供了两种不同类型：百分比和像素值。百分比的使用将会产生前面说到的那个毛病。这里所说的百分比是指表格的高或宽设置为上层标记所占区域高或宽的百分比，如在一个表格单元的宽度是600，在它里面嵌入了另外一个表格，表格宽度占表格单元的50%，则这个表格的宽度为300，依此类推，如果在一个表格不是嵌于另一个表格单元中，则其百分比是相对于当时窗口的宽度的。IE浏览器中，随便改动主页窗口的大小时，表格的内容也随之错位、变形，就是因为表格的百分比也要随着窗口的大小而改变成相应的百分比宽度。 tech.techweb.com.cn!T4`&N8S7e3_0z"R;V9l
程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛5d#r1X4N1].p7H.P
自然，解决这个问题的办法就是将表格宽度设置成固定宽度（也就是像素值）。另外如果外层表格已做好固定宽度设置，内层表格也可以适当使用百分比设置。清楚这个原则以后，如果出现类似的问题大家也知道怎么解决。
:p&J!@5z'Z;ttech.techweb.com.cn
3B1q1A3?$f;d"l;W程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛 二、让网页居中
-e&\4~7[$@%Y L'e程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛TechWeb-技术社区$g;w*Z1o&\,l.M0P;L
说到了窗口大小就会顺着路子想到分辨率的问题，在800×600分辨率下制作的网页在1024×768分辨率的机器上打开，整个网页就会跑到左边；1024×768分辨率的网页在800×600分辨率的机器上有时也会变得"不堪入目"。两种分辨率各做一个吧？做起来费时，看起来也费劲。怎么办呢？ 5|%q-e2d!s5F0Z$o
程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛.X2l,R8Y9@4{.v*i
现在大多数网民都还在用800*600的分辨率，所以我们一般可以以此分辨率为主，要想让网页在1024*768时居中，只要在网页原代码的<body>后紧加一句<center>，</body>前加一句</center>就OK了。不过有几个问题这是要注意一下，第一个就是上面说到的百分比的问题，表格、单元格的宽度单位最好要使用像素单位，而不要用百分比。例如width=770。如果你的表格宽度设的是百分比，那么使用大于800×600的像素时，网页就会拉宽，这样网页可能会变形。在<body>中加入leftmargin=0，即<body leftmargin=0>这种情况下，800×600支持的表格宽度为780像素时不会出现滚动条。还有一点要注意的是不能用DW中的层来定位。 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛*W5o(|/e&O*P7u O(e7{
*y(C0[5|.m4y#a*U)F$e%p"D <html> 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛.u2_!m%U3?&D+X.J)X
<head></head>
5w-U9u5i&A8e <body topmargin=0 leftmargin=0> TechWeb-技术社区"K&i:Q#j)]#K
<center> 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛'h+f"l"b)a*_
<table cellspacing cellpadding width=760><tr><td></td></tr></table>
8M$j s'w)X+g9Etech.techweb.com.cn </center>
5G$a#?)y"U5m6PTechWeb-技术社区 </body>
1c(G*}4Z&p#_9NTechWeb-技术社区 </html> !B,Y7A$Z:Y#]
tech.techweb.com.cn,`-O6U r&E1X7H
三、定义固定大小的文字
6E5r4_&C#O7^-N程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛-s ]1|,y)y/K;_.`7b,k
大家都知道,在IE浏览器的功能设置中，有一个可以自由设置窗口内容字体大小的功能，这样由于不同访问者的设置习惯不同，呈现在他们面前的网页有时也会不不相同。比如你可能本来设计时用的是2号字体，结果由于用户对浏览器的额外设定，变的更大了，这时你的网页也可能变得"不堪入目"。虽然不是你的错，但客户是上帝。
'c#~+v-k1\)r:]4ytech.techweb.com.cn5w"y F't,E-J8W
如果使用了网页中的CSS样式表技术，就不会出现上述情况了。使用快捷键"Shift+F11"打开样式表"CSS style"编辑器，在窗口中单击鼠标右键执行"New CSS style..."命令新建一个样式表，然后在给出的列表中选择"类型"选项，定义文字属性参数（一般文字的大小选择12px较为适宜）。完成后选择网页编辑窗中的文本，单击新的样式表名称，可以看到选中的文本发生了变化。预览时试试定义的文本字体尺寸还会不会随浏览器的选择字体大小而改变。
:G X O;Q.[1w7ctech.techweb.com.cn
o'S%H'?3t 四、让网页适应不同的浏览器
.l3i7J2C.u"\#n#p4{+j;h;V:`
浏览器的格局现在是两分天下，一分是IE，另一分是NetScape，在国内Ie有绝对的占有率，在这种情况下我们设计的网页只要兼容它就行了，但NetScape在国外还是有很多人使用，毕竟它是浏览器的元老。 &z/a"{1|+w)p
$q:~2Y8Y9B6qTechWeb-技术社区 虽然没有办法做出让所有浏览器都兼容的网站，但只要注意以下几点，做出来的网页在各个浏览器都中能达到比较好的显示效果：
8Y$x8s3`1Z8f.K)U程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛
;O9R%u'b Y4F4J2K P程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛 不要混合使用层和表格排版，如果是父子关系，如层中表格，不在此原则范围内。
7s(P%A5i-@+i0t3O程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛
0x:y/P4x!E%U;Y 内联式的 CSS 在 Netscape Navigator 中经常会出现问题，使用链式或内嵌式。 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛#{%i7u g0U"X)V
,o%U8~)s S6t"v
有时需要在空层插入表格或者透明图片，以保证在 Netscape Navigator 里的效果。
8W }4|&s8W%A7V;stech.techweb.com.cnTechWeb-技术社区*w#p;F!S7t
对于只有几个像素宽度或高度的层，改用图片来实现。 7o/|0J i7h!I;r"g
5j-B:R7W6]9n'r6o,d 避免使用 W3C 组织不推荐的排版属性，用 CSS 代替。 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛;Z;E4U){&y/`.d.F9q%I
TechWeb-技术社区 g"K*L4y0k
程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛*K:@!D7o6Q$J)V(A#@
7F%}#E.B!c*|([4l;d4NTechWeb-技术社区
1s:r7Q#n;t1D"p-s 第二种方法：做两个适合不同分辨率的页面
:O$o3B%B+s!P'[0S4f4K9P2r9k程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛 TechWeb-技术社区+L!O/q S4j-T
一个是800×600，一个是1024×768，在800×600的页面中加入一下代码就可以实现跳转了：
;L0h.B!u#X(}8f,z(`3b
"];^4_%T)U --------------------------------------------------------------- +g*P S7?"_
(X'E-q)i-y.[ 解决分辨率问题在Dreamweaver中没有此项功能，我们只能手动加入一段Javascript代码。首先在change－ie.html或change－nc.html页面代码中的< head>和< /head>中加入以下代码：
)p1@8x/q:h,u%V
5z'X9x P.|6O7T5T %](m5v"Z#k#\:C3]
< script language=JavaScript>
"i*P.|$r)`0|"^ < !－－ +j0l8~)i1{-?/s8t;i*a
function redirectPage(){ 9E!}!f0l7^"~:F
var url800x600=〃index－ie.html〃; //定义两个页面，此处假设index－ex.html和1024－ie.html同change－ie.html在同一个目录下 5D:H:G!{2S5z;D'D
var url1024x768=〃1024－ie.html〃; tech.techweb.com.cn)G"C5@'`#F9?9j
if ((screen.width==800) ＆＆ (screen.height==600)) //在此处添加screen.width、screen.height的值可以检测更多的分辨率
3V1J+?"P#B1A'm7Xtech.techweb.com.cn window.location.href= url800x600; 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛(o'I#N5[1@/f
else if ((screen.width==1024) ＆＆ (screen.height==768)) %H"T5~+Y9{'r
window.location.href=url1024x768; #a0p7R$`7Q3k1h
else window.location.href=url800x600;
$p2K'^,]'}%~ } TechWeb-技术社区2h1S5w9j6t
// －－>
5T7[(v;k+{ < /script>
.Q!{#P9B7N%p'S5`程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛 然后再在< body…>内加入onLoad=〃redirectPage()〃 tech.techweb.com.cn(E*|2R/M8X*F*G0{3z e;A-J
最后，同样地，在< body>和< /body>之间加入以下代码来显示网页的工作信息： 程序开发，操作系统，服务器，源码下载，Linux,Unix,BSD,PHP,Apach,asp,下载,源码,黑客,安全,技术社区,技术论坛&x.x2W.K9|4^7^:R4|$U
< script language=JavaScript> 1H W9[8}"\!z4C7}1n"W#V
< !－－
:x"M/F8|+h;p(w:v0r var w=screen.width
0z8~:m/Y B:\ H.x C var h=screen.height tech.techweb.com.cn%?*\/E#}#W;z8K4F,U
document.write(〃系统已检测到您的分辨率为:〃);
#b+f;@.G.J1p!I*D document.write(〃< font size=3 color=red>〃); TechWeb-技术社区5Z7K3f-x-h;L3t9M
document.write(w＋〃×〃＋h);
6b:R'B Z0{/j:v7Q:T document.write(〃< /font>〃); TechWeb-技术社区+U8K)r0H;w7a'j!Q
document.write(〃正在进入页面转换,请稍候…〃); /w'^&s/o(Y"~%w6T
// －－> tech.techweb.com.cn7E8{)?,`,_4O*t
< /script>
|
|
引用
回复
|
|
