22 五 07 根据浏览器分辨率自动调整网页宽度的一个例子
）及更高的分辨率，将逐步成为主流。就用户的使用习惯而言，纵向滚动是很自然的，但横向滚动，就让人恼火了。所以，当前的大部分web页面设计，均采用800px宽度居中的形式来设计。这样的好处无疑是很明显的，较好的兼容性，无横向滚动，并且由于固定大小，界面可以设计得很美观。Transitional//EN”
“http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=GBK”
/>
<meta name=”Security” content=”public” />
<meta name=”DC.Rights” content=”Copyright (c) 2007 by Johnson
Zhong” />
<meta name=”KEYWords” contect=”xhtml sample” />
<meta name=”DEscription” contect=”xhtml sample” />
<meta name=”Author” contect=”Johnson Zhong” />
<meta name=”Robots” contect=”all” />
<style type=”text/css”>
BODY{
MARGIN: 0px;
}
#wrap {
PADDING-RIGHT: 5px; PADDING-LEFT: 5px;
BACKGROUND: #ffffff; PADDING-BOTTOM: 10px; OVERFLOW: hidden;
WIDTH:
expression(this.offsetParent.clientWidth<800?”770px”:”99%”);
PADDING-TOP: 2px; min-width: 770px
}
#main {
CLEAR: both; BACKGROUND: #fff; MARGIN-TOP:
6px;
}
#leftbar {
BORDER-RIGHT: #dddddd 1px solid; BORDER-LEFT:
#dddddd 1px solid; BORDER-TOP: #dddddd 1px solid; BORDER-BOTTOM:
#dddddd 1px solid; BACKGROUND: #F2F9DC; FLOAT: left;
PADDING-BOTTOM: 5px; WIDTH: 188px; height:100%
}
#cenbar {
FLOAT: left; PADDING-BOTTOM: 10px; WIDTH:
100%;
}
#sublogopanel {
CLEAR: both; width:100%; height:80px;
position:relative; BACKGROUND: url(/_img/ad-bg.jpg) repeat-y
left;
}
#rightbar {
FLOAT: left; PADDING-BOTTOM: 10px; OVERFLOW:
hidden; WIDTH: 180px; margin-left:0px; margin-top:0px;
background:#cccccc
}
</style>
<title>xhtml sample!</title>
</head>
<body>
<!–body层开始–>
<div id=”wrap”>
<div id=”main”>
<table width=”100%” height=”100%”
cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td width=”188″
height=”100%” valign=”top”>
<!–左边–>
<div id=”leftbar”>
<table
width=”100%” height=”100%” cellspacing=”0″ cellpadding=”0″
border=”0″>
<tr>
<td
height=”72″ valign=”top”> </td>
</tr>
</table>
</div>
<!–左边结束–>
</td>
<td width=”100%”
valign=”top”>
<!–中间内容–>
<div id=”cenbar”>
<table width=”100%”
height=”100%” cellpadding=”0″ cellspacing=”0″ border=”0″>
<tr>
<td
width=”100%”>
<div
id=”sublogopanel”>
<img
height=”80″ width=”388″
src=”/_img/sublogo_esource.jpg”>
</div>
</td>
</tr>
</table>
</div>
<!–中间内容结束–>
</td>
<td width=”180″
valign=”top”>
<!–右边–>
<div id=”rightbar”>
<table width=”100%”
height=”72″>
<tr>
<td
width=”180″ height=”1″>
</td>
</tr>
</table>
</div>
<!–右边结束–>
</td>
</tr>
</table>
</div>
</div>
</body>
</html>
以上代码中，将页面树向分为三栏，其中左右栏宽度固定，中间栏宽度自动调整。
加红的两处地方比较关键，第一处：
WIDTH:
expression(this.offsetParent.clientWidth<800?”770px”:”99%”);
通过在CSS样式表中应用javascript判断：如果当前窗口宽度小于800，则页面宽度为770px，否则为当前窗口宽度*99%；
<img height=”80″
width=”388″ src=”/_img/sublogo_esource.jpg”>
在中间层插入一张图片，确保当用户窗口宽度小于800时候，页面宽度不在缩小。
浏览效果分别如下：
1280*1024
1024*768
800*600
Tags: CSS, javascript, xhtml, 宽度, 开放代码, 浏览器, 窗口
07 三 07 根据用户浏览器语言向用户显示合适的页面
我们的用户来自五湖四海，一个成功的网站，应该具备多种语言版本以适应不同国家的用户。一些网站的做法是提供了语言选择的链接，一些网站则直接根据用户所使用的语言直接跳转到相应的页面。
要知道用户所使用的语言，一个简单的办法就是根据Http
Request信息检测到用户所使用的浏览器的语言代码。知道了用户所使用的语言，即可跳转到相应语言版本的页面对用户请求进行反馈。
在ASP中，我们可以通过Request对象的ServerVariables集合中的HTTP_ACCEPT_LANGUAGE值获得我们想要的语言信息，下面是一个用ASP写成的简单的跳转例子。
|
‘获取客户端浏览器HTTP_ACCEPT_LANGUAGE值 Request.ServerVariables(”HTTP_ACCEPT_LANGUAGE”) ‘将该值转为小写
‘取该值前两位
strArea = if Response.Redirect(”cn/index.asp”) else Response.Redirect(”en/index.asp”) end if |
HTTP_ACCEPT_LANGUAGE的相关值如下：
Afrikaans (af)
Albanian (sq)
Basque (eu)
Bulgarian (bg)
Byelorussian (be)
Catalan (ca)
Chinese (zh)
Chinese/China (zh-cn)
Chinese/Taiwan (zh-tw)
Chinese/Hong Kong (zh-hk)
Chinese/singapore (zh-sg)
Croatian (hr)
Czech (cs)
Danish (da)
Dutch (nl)
Dutch/Belgium (nl-be)
English (en)
English/United Kingdom (en-gb)
English/United Satates (en-us)
English/Australian (en-au)
English/Canada (en-ca)
English/New Zealand (en-nz)
English/Ireland (en-ie)
English/South Africa (en-za)
English/Jamaica (en-jm)
English/Belize (en-bz)
English/Trinidad (en-tt)
Estonian (et)
Faeroese (fo)
Farsi (fa)
Finnish (fi)
French (fr)
French/Belgium (fr-be)
French/France (fr-fr)
French/Switzerland (fr-ch)
French/Canada (fr-ca)
French/Luxembourg (fr-lu)
Gaelic (gd)
Galician (gl)
German (de)
German/Austria (de-at)
German/Germany (de-de)
German/Switzerland (de-ch)
German/Luxembourg (de-lu)
German/Liechtenstein (de-li)
Greek (el)
Hindi (hi)
Hungarian (hu)
Icelandic (is)
Indonesian (id or in)
Irish (ga)
Italian (it)
Italian/ Switzerland (it-ch)
Japanese (ja)
Korean (ko)
Latvian (lv)
Lithuanian (lt)
Macedonian (mk)
Malaysian (ms)
Maltese (mt)
Norwegian (no)
Polish (pl)
Portuguese (pt)
Portuguese/Brazil (pt-br)
Rhaeto-Romanic (rm)
Romanian (ro)
Romanian/Moldavia (ro-mo)
Russian (ru)
Russian /Moldavia (ru-mo)
Scots Gaelic (gd)
Serbian (sr)
Slovack (sk)
Slovenian (sl)
Sorbian (sb)
Spanish (es or es-do)
Spanish/Argentina (es-ar)
Spanish/Colombia (es-co)
Spanish/Mexico (es-mx)
Spanish/Spain (es-es)
Spanish/Guatemala (es-gt)
Spanish/Costa Rica (es-cr)
Spanish/Panama (es-pa)
Spanish/Venezuela (es-ve)
Spanish/Peru (es-pe)
Spanish/Ecuador (es-ec)
Spanish/Chile (es-cl)
Spanish/Uruguay (es-uy)
Spanish/Paraguay (es-py)
Spanish/Bolivia (es-bo)
Spanish/El salvador (es-sv)
Spanish/Honduras (es-hn)
Spanish/Nicaragua (es-ni)
Spanish/Puerto Rico (es-pr)
Sutu (sx)
Swedish (sv)
Swedish/Findland (sv-fi)
Thai (ts)
Tswana (tn)
Turkish (tr)
Ukrainian (uk)
Urdu (ur)
Vietnamese (vi)
Xshosa (xh)
Yiddish (ji)
Zulu (zu)
Tags: HTTP_ACCEPT_LANGUAGE, 开放代码, 浏览器, 语言, 跳转
