CSS设计-创建包含侧栏的页面布局

时间:2005/10/31 12:26:50      阅读:3386          
本系列文章目的是一步一步引导您使用Dreamweaver MX 2004来进行CSS布局.在前三篇文章中我们已经学会了使用ID,class和标签选择器,并且现在我们已经熟悉了使用代码提示直接书写源代码,这样做对于熟悉CSS语法是很有帮助的,速度也快得多.
在第四部分中我们将继续第三部分未完成的工作.我们将做一些简单的改变,使basiclayout.html页面结构发生很大变化.您可以下载本章的例子作为参考,或者,让我们直接从第三部分完成处开始做起吧.
我还要建议您阅读一下之前我写的关于CSS页面定位的文章: Introduction to CSS Positioning in Dreamweaver MX 2004,这对您理解定位的基本概念将大有帮助.

点击下载本章实例

准备好将要调试的页面

在之前的系列中我们曾讨论过浮动(float)技巧,现在是把它应用到设计中来创建侧栏的时候了.在段落中使用浮动图片可以使其中文本移到图片侧面.我们曾在basiclayout.html中向h1与h2中插入了两张浮动图片.创建一个侧栏的原理是相同,只不过这会使得主内容浮动到旁边.
我曾在第二部分中讨论过”使用浮动元素”.我们将把在basiclayout.html中创建的content区域改为右边栏.而wrapper则是其父容器.
将不同的div用不同的背景色区分开来是一个很好的习惯,这能使我们很容易地判断其位置是否符合要求.我称这种做法为”调试颜色”.
选来创建一个#content选择器.在本章中我们还会修改这个选择器很多次,不过现在我们先只需要加上背景色,这会使调整页面结构变得很清晰.请记住在第三部分我们并没有创建此选择器.
1.打开basiclayout.css,找到”#content p”继承选择器规则(大约在第56行).
2.在该行上方插入几行空行来容纳代码.
3.输入:#content{
4.输入:background-color:,并选择红色.
5.输入:;
6.输入:}
7.保存.
8预览一下.
这使content div加上了背景(见图一).
按此在新窗口打开图片
图1:给div加上背景色会易于调试.

图1中是在Firefox中预览的效果,我们很清晰地看到红色的分界线.如果在IE中预览,您会发现content div延长了,包住了Image2探出的部分.这缘于IE对CSS规范中关于float的理解完全错误.造成红色上面的白条(图一)是因为在#content h1选择器中设定的边界值所致.改变该属性值看看它是怎样影响布局的.
下一节里我们将在basiclayout.css中创建将要用于左侧栏的规则.

添加左侧栏

打开basiclayout.css,我们要加入新的选择器规则:
1.输入:#leftcol{ ,回车.
2.输入:width:170px; 回车.
3.输入:height:150px; 回车.
4.输入:background-color: 并选择黄色.
5.输入: ; 回车.
6.输入:} 回车.
完成代码应如下所示:

#leftcol{
  width: 170px;
  height: 150px;
  background-color: #FFFF00;
  }

提示:正如在第二部分所说的那样,慎用height属性!这里我是为了更好地演示而使用的.
在basiclayout.html中约24行处您会发现content div的开始标签,上一行则是nav div的结束标签.在它们中间插入一行以插入leftcol div(见图2).请确保leftcol div在nav结束标签与content div开始标签之间.如图2所注释的那样:
按此在新窗口打开图片
图2:添加leftcol div
完成后预览(见图3).
按此在新窗口打开图片
图3:黄色的left div加到了content div上面.
这并不是我们想要的,图3显示了leftcol div未加修饰时在文档流中的位置.一旦我们添加上float属性,leftcol div就好像从文档流中消失了一样,而content div又会回到原来的位置,就好像没有插入leftcol div一样.

添加Float(浮动属性)

回到#leftcol规则,我想您现在可以很容易地为它添加上float属性并设值为left了吧?完成后整个选择器规则应如下所示:

#leftcol{
  float: left;
  width: 170px;
  height: 150px;
  background-color:#FFFF00;
  }

保存并预览(如图4).
按此在新窗口打开图片
图4:加入float后的页面.
图4中content div位置又提升了,尽管在XHTML代码中leftcol div在它上面,但感觉leftcol div对content div没有任何影响,好像排除了文档流之外去了.
当然,banner在leftcol前面,所以leftcol div影响不了它.如果您把leftcol div移到banner前面,您就可以看到截然不同的布局了.您可以自行实验并预览一下.

组织栏目

目前为止两个栏目位置还凑合,我们需要把它们摆放得更好看一些.排列两个栏目是需要一点技巧的,我们使用不同背景色区分,这会使工作更加清晰.
让我们先看看目前要解决的问题有哪些吧:
第一点:leftcol div位置比content div高.content div中的h1元素边界值决定了定高度.我们应该改变它使之与leftcol div顶端对夜里.
第二点:leftcol div应与wrapper div左边有一段距离.div没有默认边界.所以我们需要显式地定义其边界.
第三点:content div跑到leftcol div下面去了.这是因为我们没有设定div的宽度,所以默认宽度为其父容器wrapper div的宽度.我们应控制一下content div的位置.
第四点:两个栏目无法区分.这是因为leftcol div写在了content div前面.这并不是我们所希望的.由于没有边界与填充的约束,所以content div宽度与其父容器wrapper div宽度相同.在完成第三点问题后我们再学习如何修正这个问题.

我们先修正第一点.想要要使leftcol div与content div上对齐,我们应将其边界设为20像素,与content div中的h1边界相同.
1.打开basiclayout.css,找到#leftcol规则.
2.在{符号后回车,插入一新行.
3.输入:margin-top:20px;(记得代码提示)
4.保存.
5.重新预览(见图5).
按此在新窗口打开图片
图5:黄色的leftcol div上对齐.
接着是第二点.按以下步骤来使leftcol div有一段左边界:
1.定位到#leftcol规则.
2.在{后回车,插入一新行.
3.输入:margin-left:10px;(记住有代码提示)
4.保存.
5.重新预览(见图6)
按此在新窗口打开图片
图6:黄色leftcol div留出左边界.
下面还剩第三点与第四点.两个问题都要修改#content规则.第三点修正了也就等于第四点修正了.首先我们想将content div移出不被leftcol div盖住,这需要给#content加上左边界.那么多少左边界值合适呢?下面有个计算方法:
* leftcol div的左边界是10像素.
* leftcol div宽度为170像素.
* 我们希望leftcol div 与 content div之间距离为20像素.
那么content div的左边距应该是10+170+20=200像素.这个值足够了,当然您也可以改为您认为的合适的值.

请按以下步骤加为content div加上左边界:
1.定位到#content 规则.
2.在{后回车,插入一新行.
3.输入:margin-left:200px;
4.保存.
5.重新预览.(见图7)
按此在新窗口打开图片
图7:content div加上左边界——有点儿像样了!
看起来还不错,我们已经正确分栏了.目的好像已经达到了,不过仍然有一个很烦人的问题.我们将光标移到leftcol div中间,如图8所示:
按此在新窗口打开图片
图8:定位光标.
加点儿内容进去.按下SHIFT+ENTER组合键,插入<br/>换行标签.目的是把leftcol变长一点儿,比content div长.我们加进足够多的<br/>.在预览之前,先到basiclayout.css中清除掉height属性:
1.定位于#leftcol规则.
2.找到定义height属性一行,应该是height:150px;
3.删除.
4.保存.
提示:为了更好地演示,我给wrapper加上了背景色.请按我们给#leftcol加上背景色的方法为#wrapper加上背景色.
现在预览一下(见图9).我把在第三部分加入的水平线标为绿色背景以看得更清楚问题所在.
按此在新窗口打开图片
图9:水平线分隔了content!

这并不是我们想要的结果,到底哪儿出错了?

此问题的原因是我们没有清除divs:尽管看起来是在content div里面,但是却不是.它们强迫content div往下压直到浏览器能显示它们自己的那条线.第一条清除线在h2上面,左侧栏下面,第二条是在图片Image2下面.清除效果看起来执行得并不良好.当清除浮动时,所有浮动都被清除了——所以第一条清除线以下的内容都跑到下面去了,而左边栏始终在清除线以上.
下一节我们来看看如何修正这个问题.

浮动Content

首先我们到basiclayout.html中找到那两条清除线并删掉.

想要修正那个问题,我们得把content div放到一个容器中,最好把这个容器写成一个类,因为我们可能在页面中不止一次用到:
1.打开basiclayout.css,在底端插入一些新行.
2.输入:.container{ ,回车.
3.输入:width:99% ,回车.
4.输入:float:right; ,回车.
5.输入:background-color:#6633CC; ,回车.
6.输入}
7.保存.
在第四点我们将此容器浮动到右边.这样做就避免了清除线将content div排到左侧栏的下面.第三步我们设宽度为99%,这样与content div的宽度基本相当.之所以不用100%全宽度是因为有可能content会下沉以留出空间来显示全宽度.这种情况在浏览器容错设置不同的情况下可能会发生.
提示:John Gallant与Holly Bergevin为Community MX写的系列文章专注于讨论浮动元素的BUG与解决. Float: The Theory[/url[, [url=http://www.communitymx.com/abstract.cfm?cid=47F29]Float: The Bugs (Part 1). 以及 Float: The Bugs (Part 2).如果您想进一步了解,可以获取10日免费阅读资格.
现在两个元素都向左和向右浮动了,所以我们应更改一下footer(页脚)div:
1.打开basiclayout.css.
2.找到#footer选择器.
3.在{符号后回车插入一新行.
4.输入:clear:both;
5.保存.
“clear:both”属性/值保证了无论leftcol div与content div有多长,footer div都会在它们下方.(您可以在本章学习完后将其值变为left/right以加深对clear属性的了解.)
现在我们应该创建container(容器) div 了.如图10所示,在两段内容中均插入container,您可以尝试着手写输入.
按此在新窗口打开图片
图10:一个container标为绿色,另一个标为蓝色.
更改后预览一下(见图11).
按此在新窗口打开图片
图11:footer div移到contennt div下边了——很好!
我们再向左侧栏加入一些<br/>以增加其高度(见图12).
按此在新窗口打开图片
图12:footer div移到了左侧栏下面.

练习

清除<br/>,并为leftcol div加入一些继承选择器规则以定义其中元素属性,如h1,p,确保新的选择器不会影响到之前创建的content div中的内容和布局.
评论
  • Re:CSS设计-创建包含侧栏的页面布局  (2006/8/16 12:50:39) by 飘萍 
    好文章,帮助学习页面布局。谢谢!
  • Re:CSS设计-创建包含侧栏的页面布局  (2008/11/25 2:59:27) by zhan 
    喜欢CSS,
  • Re:CSS设计-创建包含侧栏的页面布局  (2009/3/24 12:40:42) by ylp1588 
    关于CSS的元素属性还不是很清楚.
  • Re:CSS设计-创建包含侧栏的页面布局  (2010/6/19 14:35:58) by 闂佺粯绮岄澶岀不?Url= 

    受教了.很能说明问题.

标 题:
 
姓 名:
 
主 页:

验证码:

评论:
 

Because of the cache,you may see your comments several minutes later.