来谈谈：利用 CSS 创立流动宽度的结构
网上冲浪无论你用InternetExplorer还是NetscapeNavigator，几乎随时都在与CSS打交道，在网上没有使用过CSS的网页可能不好找。我比来的几篇专栏文章会商了利用XHTML和CSS完成两列或三列页面结构的各个方面。到今朝为止，一切例子都利用流式结构（也就是结构会主动扩大和顺应扫瞄器窗口的宽度）。如今是时分思索别的一种次要的页面结构办法了，这类结构办法是流动宽度结构。
良多Web构建职员偏向于利用流动宽度的结构举行页面计划，由于它们能天生准确且可预知的了局。这类办法与打印结构十分靠近，关于计划职员和会见者来讲都是一个很主要的温馨要素；别的，关于包括良多年夜图片和别的元素的内容，因为它们在流式结构中不克不及很好地体现，因而流动宽度结构也是处置这类内容的最好办法。
从table到div
最近几年来，计划职员都利用表（table）来创立流动宽度的结构。表的列和行是对计划职员的结构表格（grid）的一种可行的摹拟，以是一点也不奇异计划职员为何接纳HTML表来完成页面结构。
但是，基于表的结构有一个分明的成绩。除语义上不合适用表来举行结构以外，发生的代码也很凌乱，难于浏览，乃至难于保护――特别是在包括兼并的表单位格（cell）和嵌套表时。
利用div举行页面结构效果要好很多。除这是保举利用的最好办法以外，代码的装载速率会更快，也更容易于处置。
表及其单位格的格局（formatting）属性被借用到流动宽度结构中，由于指定这些元素的尺寸相称复杂。实在经由过程div能够做到一样的事变，只需断定div准确的维数并利用相对和绝对定位将这些div定位到页面上便可。
图A展现了一个典范的流动宽度的结构，该结构由顶部的一个题目，一个三列内容的地区（主内容列，每侧有一个工具条），和页面底部的一个页脚所构成。一切元素的宽度都是流动的；在扫瞄器窗口公布变更时它们的尺寸都不会变更。
上面的XHTML标志天生图A所示的页面。（出于复杂思索，内容被截短。）1234下一页
上面是将页面计划为流动宽度结构的CSS代码。
以下是援用片断：
body{
font-family:Verdana,Arial,Helvetica,sans-serif;
font-size:12px;
margin:0px;
padding:0px;
}
h2,h3{
margin-top:0px;
padding-top:0px;
}
div#head{
position:absolute;
width:750px;
height:100px;
left:0px;
top:0px;
background-color:#FFFF66;
}
div#columns{
position:relative;
width:750px;
top:100px;
background-color:#CCCCCC;
}
div#side1{
position:absolute;
width:150px;
top:0px;
left:0px;
background-color:#FF6666;
}
div#content{
position:relative;
width:450px;
top:0px;
left:150px;
background-color:#999999;
}
div#side2{
position:absolute;
width:150px;
top:0px;
left:600px;
background-color:#00FF66;
}
div#foot{
position:relative;
width:750px;
clear:both;
margin-top:100px;
background-color:#99FFFF;
}
上一页1234下一页
分化代码
这段标志并非出格地值得注重――只是在每一个次要页面元素的表面（题目、页脚、工具条和主内容）包抄着div。每一个div有一个id，响应的CSS款式可使用这个id援用它。只要一个分外的div（divid="columns"）包抄着三列内容地区。在InternetExplorer中将页脚放在三列中最长一列的上面是需要的。
像平常用法一样，CSS代码完成一切的主要义务。起首它完成一些家务办理。Body款式将页面的边距设为零，h2,h3款式将默许间距设为零。不然的话，这该结构四周就会有一个边距，而在某些扫瞄器（好比Netscape和Mozilla）中题目将会在在主内容和页脚的下面发生一个空缺地区。
款式div#head为题目div设置一个明白的高度和宽度。题目利用position:absolute,top:0px和left:0px划定规矩显式地定位在页面的左上角。划定规矩position:absolute长短常主要的，由于定位属性（top、left、right、bottom）在惯例（静态）定位时会被疏忽。但是要记着，任何相对定位的元素城市从惯例的页面流中被移撤除，而属于页面流的元素将会像相对定位元素不存在一样被定位到页面上。
款式div#columns把持div的格局，使其充任三个列的容器。它利用position:relative创立属于惯例页面流的一个元素（它会依据其内容举行扩大和顺应，因此影响别的元素的定位），可是它将从其惯例地位偏移。划定规矩top:100px供应一个偏移量，将列容器向下推，使其掩盖题目。
划定规矩div#side1把持第一个工具条列的款式。它设置该列的宽度（width:150px）并利用相对定位将该列安排在其父元素的左上角。父元素是该列的div，假如该元素利用相对body元素的绝对定位，那末它将注释top:0px划定规矩而非你所希冀的100px设置。划定规矩div#side2以一样的体例设置左工具条所用的列。div#side1和div#side2独一分歧的地方是背景致和left:600px划定规矩，后者将该列定位在别的两列的右侧。
款式div#content中的主内容所用的列的款式把持与别的两列的款式把持类似。它显式地计划宽度（width:450px）并利用left:150px和top:0px划定规矩在其父元素（包抄着三个列的div）内定位该列。次要的分歧的地方在于position:relative划定规矩。我们利用绝对定位使主内容列能够影响其父元素（包抄着三个列的div）的尺寸并因而影响页脚元素的尺寸。
款式div#foot设置页脚的宽度（width:750px），该款式还包括一个clear:both划定规矩，该划定规矩包管它接在别的元素上面，而不是中间。因为它利用绝对定位，以是它在页面上的地位是由别的元素的流所决意的，在这里详细是由包抄着三个列的div所决意的。划定规矩margin-top:100px是一个很主要的细节，它避免页脚被下面的列所掩盖。这些列在页面流中从它们的惯例地位偏移，从而为相对定位的题目和必要响应偏移的页脚腾出空间。上一页1234下一页
居中款式的变更
在流动宽度页面结构中最多见且次要的变更多是流动宽度的内容块漂在扫瞄器窗口的两头，而不是粘附于扫瞄器窗口的右边。你能够很简单地完成这一效果，办法是在其他标志四周（也就是body标签内）增加一个包装器（wrapper）div，并创立一个CSS款式来居中谁人div。
比方，图B是在图A的基本上增加了一个标签（<divid="wrapper">）和一个响应的CSS款式后的了局。上面是新增加的CSS款式的代码：
以下是援用片断：
div#wrapper{
position:relative;
margin-left:auto;
margin-right:auto;
top:20px;
width:750px;
background-color:#CCCCCC;
}
这类办法之以是能用，是由于一切的结构div都是相对它们的父元素绝对定位的。在图A中，题目、内容列和页脚地点div的父元素是body标签，可是在图B中，它们的父元素是wrapperdiv。这类居中办法在“CreatingacenteredpagelayoutwithCSS（利用CSS创立居中页面结构）”一文中有具体的注释。
本文MichaelMeadhra在Web开展的最后阶段就在这一范畴处置开辟。他介入编著的书已积累几十本，包含由Osborne/McGraw-Hill出书的《HowtoDoEverythingwithDreamweaverMX2004》。
上一页1234
可以将站点上所有的网页风格都使用一个CSS文件进行控制，只要修改这个CSS文件中相应的行，那么整个站点的所有页面都会随之发生变动。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 使用内容管理系统进行开发并实现快速、精确的浏览器兼容性测试。 在Dreamweaver里可以很轻松的完成图文混排、插入图片、插入Flash、插入音频、插入视频。 帧(frames)和表格的制作速度快的令您无法想像。进阶表格编辑功能使您简单的选择单格、行、栏或作未连续之选取。 Adobe Dreamweaver CS5 软件使设计人员和开发人员能充满自信地构建基于标准的网站。由于同新的 Adobe CS Live 在线服务 Adobe BrowserLab 集成。 只要我们努力，无论是怎样的艰难险阻，成功依然会迎面直击。在刚开始时我觉得dreamweaver mx XX很难理解。 您在所见即所得网页编辑器进行网页制作和在WORD中进行文本编辑不会感到有什么区别，但它同时也存在着致命的弱点。
页:
[1]