Joomla! 1.5 模板开发step by step（四）创建CSS布局

现在我们创建三栏式的JOOMLA模板，而且这个三栏布局弹性的。页面宽度一直是一个问题,大约17%的浏览者使用800*600的分辨率. 79%的人使用1024*768以上或者更高的分辨率，采用弹性布局可以避免页面在1024分辨率下显得过窄，同时在更小的分辨率先也能正常浏览。

通常,设计者喜欢用table来进行布局,表格可以方便的使用"百分比"模式进行栏宽度设置,但是这种方法有下列弊端:

与CSS布局相比table布局有很多"额外代码".
搜索引擎也不易接受.
代码通常是CSS布局的双倍尺寸
还有图像占位 "spacer gifs"在使用table时也是问题.
采用table布局不容易维护。

即使一些大的网站也存在tables布局的问题，比如disney.co.uk website.

现在我们来开始CSS布局吧，如果你是CSS的初学者你最好看下 "beginners guide to CSS". 这里推荐:

Kevin Hale's - An Overview of Current CSS Layout Techniques
htmldog's CSS Beginner's Guide
Mulder's Stylesheets Tutorial
yourhtmlsource.com

来看看template_css.css,基本上全部的CSS代码都集中在这个文件中，而所有的内容都防止在#wrap的div内。大约占据视觉宽度的80%。我们要实现的效果如下图：

小贴士：
CSS 缩写
通常有可能对某些CSS代码进行 "缩写"，从而减少代码量. 我们来看一个关于 padding 和 margin 的例子
margin-top:5px; margin-bottom:5px; margin-left:10px; margin-right:10px;
可以这样写:
margin: 5px 10px;
每种样式定义几乎都可以"缩写". 当你完成样式表, 用"缩写"去替换掉比较复杂的书写格式,比如标准格式关于font:
font: font-size |font-style | font-variant | font-weight | line-height | font-family
这里有个例子:
font-size:1em; font-family:Arial,Helvetica,sans-serif; font-style:italic; font-weight:bold; line-height:1.3em;
变成这样:
font:bold 1em/1.3em Arial,Helvetica,sans-serif italic;

http://home.no.net/
这里是相关资料的链接 An Introduction to CSS shorthand properties 关于语法.

左/中/右三栏都被给出了它们自己的元素. 每部分都向左靠并形成"100%"屏幕宽度. clear:both 页脚的div跨越三栏,实现100%宽度.

为了使布局美观, 让每部分内容周围有一定的空间, 我们需要加入一些"栏空间", 被称为"gutter". 很不幸,这里会发生一个问题. 由于IE没有正确的解析border(box框架，有兴趣的可以看看相关的书籍，译者)，我们这里采用在区域之间再加上一个div来解决区域之间的空隙问题. 下面是代码：

<body>
<div id="wrap">
  <div id="header">
    <div class="inside">
 <h1><?php echo $mainframe->getCfg('sitename');?></h1>
      <jdoc:include type="modules" name="top" style="xhtml" />
    </div>
  </div>
  <?php if($this->countModules('left')) : ?>
  <div id="sidebar">
    <div class="inside">
      <jdoc:include type="modules" name="left" style="xhtml" />
    </div>
  </div>
  <?php endif; ?>
  <div id="content<?php echo $contentwidth; ?>">
    <div class="inside">
      <div id="pathway">
        <jdoc:include type="module" name="breadcrumbs" />
      </div>
      <jdoc:include type="component" style="xhtml" />
    </div>
  </div>
  <?php if($this->countModules('right')) : ?>
  <div id="sidebar-2">
    <div class="inside">
      <jdoc:include type="modules" name="right" style="xhtml" />
    </div>
  </div>
  <?php endif; ?>
  <?php if($this->countModules('footer')) : ?>
  <div id="footer">
    <div class="inside">
      <jdoc:include type="modules" name="footer" style="raw" />
    </div>
  </div>
  <?php endif; ?>
</div>
<!--end of wrap-->
</body>

添加inside类:
.inside {padding:10px;}

这种简单的布局方式是我们使用CSS定义JOOMLA模板的好方法. 这样的方式带来两个优点, 代码短和容易控制. 然而,这并不是所谓的合理的代码顺序. 我们必须使用一些类似于 "nested float"的高级CSS技巧.合理代码顺序有助于搜索引起收录，而目前的布局显然重要的组件的内容会最后出现。虽然这优点复杂，compassdesigns.com有一个文件来说明如何创建这样的文件，这里不再详细说明了。

默认的Joomla CSS

到目前为止，我们的CSS都是关于布局的，这样的页面看起来是一点也不生动漂亮，接下来，我们加入一个格式CSS代码。先来添加两个定义，代码如下：

body {
text-align:center; /*center hack*/
}
#wrap {
min-width:760px;
max-width:960px;
width: auto !important; /*IE6 hack*/
width:960px; /*IE6 hack*/
margin:0 auto; /*center hack*/
text-align:left; /*center hack*/
}
#header {} 
#sidebar {float:left;width:20%; overflow:hidden; } 
#content60 {float:left;width:60%;overflow:hidden;}
#content80 {float:left;width:80%;overflow:hidden;}
#content100 {float:left;width:100%;overflow:hidden;}
#sidebar-2 {float:left;width:20%; overflow:hidden;} 
#footer {clear:both;}
.inside {padding:10px;}

首先我们使用一些小技巧，保持页面居中。这主要是由于IE6,IE7的问题。（具体还是参考CSS文档吧，译者）

小贴士：
我们定义column的宽度是百分比，而他们的容器div是固定宽度的，这可能看起来很奇怪，其实这是有好处的，一是更加灵活的弹性布局，如果我们要改变宽度，我们仅仅需要改动一个数值。

接下来的CSS我们做了一些全局性的设置，代码如下：

/*typography*/

* {
margin:0;
padding:0;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address {
margin: 0.5em 0; 
}
li,dd { 
margin-left:1em;
}
fieldset { 
padding:.5em; 
}
body {
font-size:76.1%;
font-family:Verdana, Arial, Helvetica, sans-serif;
line-height:1.3em;
}
#header {
background:#0099FF;
}
#footer {
background:#0099FF;
}
#main-body {
background: #CC0000;
}
#sidebar-2 {
background:#009933;
}
#content {
background: #999999;
}
#sidebar {
background: #009933;
}

每元素都被设定为"0"margin 和 "0" padding ,然后所有的块被定义了底部边距. 你可以在这里找到关于全局定义的相关内容clagnut and left-justified.

字体大小被设置成76.1%. 这也是为了在不同浏览器访问时自适应屏幕分辨率. 字体的单位都设置成 em. 字高 line-height:1.3em 设定更便于阅读. 这意味着页面可以适应不同访问者的不同页面分辨率. 这里有详细的讨论:
An experiment in typography at The Noodle Incident (Owen Briggs)

最后我们加入背景颜色设定,得到下图的显示效果.

请注意边栏并没有达到它们的底部. 我们看到左右栏各有一个红色和白色的空白区域. 如果我们设定整个模板的背景色是白色. 如果你想要三栏的背景色都填满，那么要使用背景图片垂直堆砌。这种技术被称为"Faux Columns" ，Douglas Bowman and Eric Meyer创造的.

下一篇我们将Joomla!特殊的CSS.

youjoomla.com发布的一款Joomla!1.5免费模板social bug

joomla 1.0系列的免费模板

Happiness - A Free Joomla 1.5 Template from TemplateJoomla!

olyra模板的问题 user3模块位置显示

来自templateplazza的免费模板

新增两款Joomla! 1.5模板下载

一款还没有开发完的模板，但是挺酷的

Joomla! 1.5 模板开发step by step（九）创建一个实际模板

Joomla! 1.5 模板开发step by step（八）隐藏列