2006-03-30[原]一个三栏布局(2)
TAG：CSS 原创 布局在《一个三栏布局(1)》中讲到了一个三栏布局，里面使用了JS脚本的方法来达到栏目自适应高度，缺点很明显，当浏览器禁用脚本的时候，布局就会变得混乱，特别是当左边栏或右边栏的高度小于中间栏的时候。下面来看一种不使用脚本的方法，还是按原来的要求，不过得对HTML代码做一下修改：
-----------------------------------------------------
<div id="top">top</div>
<div id="main">
<div id="nojs">
<div id="midpart"><p>midpart</p></div>
<div id="leftpart"><p>leftpart</p></div>
</div>
<div id="rightpart"><p>rightpart</p></div>
</div>
<div id="bottom">bottom</div>
-----------------------------------------------------
这里是将中间栏跟左边栏放到了一个层里，这样总的结构就变成了是二栏了，然后再中左边里分出二栏。这样就可以不使用绝对定位了，也能使用负边界来解决栏目的高度自适应问题。来看下CSS样式部分：
-----------------------------------------------------
body,html{
font-family:Arial;
font-size:12px;
background-color:#FFFFFF;
text-align: center;
}
*{
margin:0;
padding:0;
}
#top,#bottom{
width:770px;
background-color:#0099FF;
height:50px;
margin:0 auto;
clear:both;
}
#main{
width:770px;
margin-right: auto;
margin-left: auto;
padding: 0px;
color: black;
height:auto;
overflow:hidden;
}
#nojs{
width:570px;
height:100%;
float:left;
}
#leftpart{
width:200px;
height:auto;
float:left;
background-color:#999900;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#midpart{
width:370px;
height:auto;
background-color:#00CC99;
margin-right: auto;
margin-left: auto;
float:right;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#rightpart{
width:200px;
height:auto;
float:right;
background-color:#FF9900;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
-----------------------------------------------------
使用负边界的方法来实现栏目的自适应高度，不过这里就不然需要JS脚本了。
2006-03-29[原]一个三栏布局(1)
TAG：原创 CSS 布局用CSS布局做一个页面：
首先要一个top，下面是一个bottom，中间是一个三列块的模式，leftpart，midpart，rightpart，整个页面宽度770px，HTML代码顺序为先中间再两边。
首先，按要求写出HTML代码部分，如下：
-----------------------------------------------------
<div id="top">top</div>
<div id="main">
<div id="midpart"><p>midpart</p></div>
<div id="leftpart"><p>leftpart</p></div>
<div id="rightpart"><p>rightpart</p></div>
</div>
<div id="bottom">bottom</div>
-----------------------------------------------------
加了个id为“main”的层，是为了控制中间宽度，下面写最基本的CSS样式：
-----------------------------------------------------
body,html{
font-family:Arial;
font-size:12px;
background-color:#FFFFFF;
text-align: center;
}
*{
margin:0;
padding:0;
}
#top,#bottom{
width:770px;
background-color:#0099FF;
margin:0 auto;
clear:both;
}
#main{
width:770px;
margin:0 auto;
padding: 0;
color: black;
background-color:#00CC99;
}
#leftpart{
width:200px;
height:auto;
float:left;
background-color:#999900;
}
#midpart{
width:370px;
height:auto;
background-color:#00CC99;
float:left;
margin:0 auto;
padding: 0px;
}
#rightpart{
width:200px;
height:auto;
float:right;
background-color:#FF9900;
}
-----------------------------------------------------
上面的样式是最常见的三栏布局所用的样式，但在这里，中间部分跑到最左边了，这可不是我们所要的效果。怎样改呢？想要让中间跟左边的位置调换，只能用到绝对定位了，看看修改后的样式：
----------------------------------------------------
#main{
width:770px;
margin:0 auto;
padding: 0px;
color: black;
position: relative;/*让中间栏的定位从层的左边开始*/
height:auto;
background-color:#00CC99;
}
#midpart{
width:370px;
height:auto;
background-color:#00CC99;
position: absolute;
/* margin:0 auto; 因为使用了绝对定位，所以这一句可以去掉*/
padding: 0px;
left: 200px;/*距离为左边栏的宽*/
}
----------------------------------------------------
这样，看起来就像是三栏的了，不过还有个问题，往栏里面加内容试试，出问题了，栏目不会自动适应高度的变化。还是用负边界的方法：
----------------------------------------------------
#main{
width:770px;
margin:0 auto;
padding: 0px;
color: black;
position: relative;
height:100%;
overflow:hidden;
background-color:#00CC99;
}
#leftpart{
width:200px;
height:auto;
float:left;
background-color:#999900;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
#rightpart{
width:200px;
height:auto;
float:right;
background-color:#FF9900;
padding-bottom: 32767px;
margin-bottom: -32767px;
}
----------------------------------------------------
不过这样也只是让左右两栏自适应高度，对于中间那一栏，因为使用了绝对定位，所以负边界的方法不起做用，只能用JS脚本啦：
----------------------------------------------------
<script type="text/javascript">
document.getElementById("leftpart").style.height=document.getElementById("midpart").scrollHeight+"px";
document.getElementById("rightpart").style.height=document.getElementById("midpart").scrollHeight+"px";
</script>
----------------------------------------------------
我觉得这个方法的缺点是用到了JS脚本，如果浏览器禁用了脚本，那页面布局就会乱了。再看看另一个不用JS的方法吧《一个三栏布局(2)》
2006-03-23[原]我的页面制作经验
TAG：原创 经验之谈前两天跟群里的"白菜"兄谈到了学习web标准中遇到的问题，觉得很值得写一下，是我对标准的一些理解，希望对在学习web标准的朋友有所帮助。
现在学习web标准的人越来越多，对于刚接触标准的人来说，我想大多数人的第一个印象就是用DIV+CSS制作页面，使用DIV来布局的确是标准的一个主要的特点，但标准并不只是用DIV+CSS布局，看过w3cn网站上的文章，你应该也了解到标准是"由符合标准的XHTML组成；用CSS来布局而不是表格；使用结构化、语义化的标记；能够在任何浏览器中显示"最后二点被大多数学习标准的朋友所忽略，结果就是现在很多用DIV+CSS制作的所谓"用标准制作"的页面，一查看源文件，都是 <DIV> <DIV> <DIV>……</DIV> </DIV> <DIV> …… </DIV> …… </DIV> ……，这样的页面在不支持样式表文件的浏览器中就是一堆没有分隔的文字，阅读都有困难，更谈不上可访问性了。"使用结构化、语义化的标记"是标准的一个重点，因为这直接就对不支持样式表文件的浏览器起作用。
下面是我的制作页面的一点经验，权当是总结吧，跟大家分享一下：
第一阶段：
开始制作的时候，应该先从没有样式表文件的页面做起，做到最基本的结构，就是使用结构化、语义化的标记，如用ul,li标签或dl,dt,dd标签等，这时你可以先不考虑布局的问题，只要做到在没有样式表文件的情况下也可以正常的阅读页面中的内容就可以了。要注意使用符合标准的(X)HTML语言，在这个阶段中不使用DIV标签。
第二阶段：
当完成第一个阶段后，再来就是布局了。我们要使用支持标准的浏览器来做为制作时查看的浏览器，推荐使用Firefox。这是为了让我们制作出来的页面更接近标准。这个阶段也要注意少使用DIV标签，因为CSS可以应用于任意的标签上，要好好利用现有的标签，只有当没有标签可以定义或现在的标签不能满足布局上的需要时，再使用DIV标签进行布局。也许你会觉得奇怪，为什么要少用DIV标签呢？因为DIV标签没有语义，添加过多的DIV标签会影响源文件的可读性，不利于日后的维护。
这阶段还有另一点需要注意的，就是图片的问题，图片分为"内容图片"和"背景图片"两种。意思很明显，内容图片就是用于内容中的图片，可使用img标签加入，注意要加alt属性；而背景图片就是用于装饰页面的图片，使用CSS的background-image属性加入。这一步也是为了保持我们上一步的成果，使之在没有样式表文件的情况下也不影响到显示。
第三阶段：
做完上面两个阶段，你的页面基本上已经可以通过W3C的验证了。现在我们来让它偏离一点标准，使它兼容多个浏览器。这个阶段是很无奈的，为什么呢？在IE中打开刚刚制作的页面就清楚了，也许你已经看到，整个页面的布局乱了。因为浏览器对CSS样式的兼容问题，使到我们现在还要做这一步。这时就得出动多个浏览器啦，最基本的IE5/IE5.5/IE6/FF，目前我就只有这几个版本的浏览器，应该也已经足够了吧。因为是在FF中做的页面，所以现在主要要解决页面在IE中的显示问题，在我BLOG上可以找到相关的一些资料，主要是使用hack，但hack不是标准，所以使用hack有可能会通不过W3C的代码验证。
我们不能为了通过验证而做页面，验证只是一种手段，让你知道页面是否符合基本的规范，但能通过验证，并不就是说你的页面达到标准，只能表示没有语法错误，象最开始提到的用DIV+CSS布局的页面，也是可以通过验证的。
还有就是一些细节，主要是一些制作上的习惯问题，像关闭每个标记、标记的每个属性都要有值等等，可能会觉得很烦琐，但只要在制作的时候注意一下，慢慢成为习惯，对于提高页面质量和制作效率是很有帮助的。
由于本人的写作能力较差，如果看得不太明白，欢迎给我留言。
2006-03-21[原]无刷新读取ASP文件
TAG：原创 ASP 无刷新 AJAX JScript改了一下昨天的脚本，想要实现读取ASP文件的结果，主要是改了handleStateChange() 函数，但是遇到了编码的问题，读取出来的内容是乱码，找了一些资料，有提到一些方式，不过是使用隐藏一个框架或隐藏一个span标签，再通过定时刷新之类的方法，这与AJAX的XMLHTTP方法不太一样，虽然也可以实现无页面刷新（好像有点跑题了
）。说回编码的问题，网上的解决方法还真的很少，找了半天没找到一种合适的，不到倒是知道了原因，是因为ResponseText属性默认将响应数据的编码定为UTF-8。还好遇到个高手，介绍了一种方法，就是在服务器端用escape()编码内容，再在客户端用unescape()解编码。下面是相关的代码：
---------------------js---------------------------
<script language="javascript">
var xmlHttp;
var ready = false;
//创建对象
function createXMLHttpRequest(){
if (window.ActiveXObject){
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}else if (window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest("Msxml2.XMLHTTP.3.0");
}
}
//发请请求
function doSearch(url){
createXMLHttpRequest();
xmlHttp.onreadystatechange = handleStateChange;
xmlHttp.open("GET",url,"true");
xmlHttp.send(null);
}
//处理响应
function handleStateChange(){
if (xmlHttp.readyState == 4){
if (xmlHttp.status == 200){
document.getElementById("results").innerHTML = unescape(xmlHttp.ResponseText);//用unescape()解编码
}
}
else {
document.getElementById("results").innerHTML = "请稍候……";
}
}
//取得URL
function createURL(text){
var url;
url = "BranchAreaInfo.asp?AreaID=";
if (text != ""){
url += escape(text);
doSearch(url);
}
}
</script>
-------------------------------------------------
--------------------ASP--------------------------
<%
Dim WDiv
.....
do while not rsBAI.eof
WDiv = WDiv & "<div class='shop_list2'>"
WDiv = WDiv & "<div class='shop_list'>"
WDiv = WDiv & "<a href='#'><img alt='" & rsBAI("name") & "' src='" & rsBAI("photo") & "' /></a>"
WDiv = WDiv & "<dl>"
WDiv = WDiv & "<dt><a href='#'>"& rsBAI("name") & "</a></dt>"
WDiv = WDiv & "<dd>电话：" & rsBAI("phone")& "</dd>"
WDiv = WDiv & "<dd>传真：" & rsBAI("fax")& "</dd>"
WDiv = WDiv & "<dd>地址：" & rsBAI("address")& "</dd>"
WDiv = WDiv & "<dd class='lookall'><a href='#'>参观一下</a></dd>"
WDiv = WDiv & "</dl>"
WDiv = WDiv & "</div>"
WDiv = WDiv & "</div>"
rsBAI.movenext
loop
response.Write(vbescape(WDiv))
%>
<script language="javascript" runat="server">
function vbescape(text){
return escape(text);//用escape()编码
}
</script>
------------------------------------------------
