现在的位置: 首页 > 综合 > 正文

Joomla模板制作教程:使用CSS布局

2013年11月27日 ⁄ 综合 ⁄ 共 10939字 ⁄ 字号 评论关闭

我们将使用CSS对JOOMLA模板进行”三栏布局”. 而且这个三栏布局是可变宽窄的(fluid)。页面的宽窄布局迄今有两种主要的模式,一种是固定宽窄(fixed),还有一种就是可变宽窄。这两种布局模式都是控制页面宽度的。

页 面宽度一直是一个问题,当人们访问你的站点的时候,. 最高分辨率往往得不到应用, 大约20%的浏览者使用800*600的分辨率. 76%的人使用1024*768以上或者更高的分辨率 (source:www.upsdell.com). 这个统计结果表明你不仅要考虑大多数也要考虑那20%人可以正常浏览.

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

* 与CSS布局相比table布局有很多”额外代码”. 首当其冲的就是load时间(访问者反感) 搜索引擎也不易接受. 代码通常是CSS布局的双倍尺寸,还有图像占位 “spacer gifs”在使用table时也是问题. 请参考new disney.co.uk website.
* 表格不易控制 difficult to maintain. 你做修改的时候要用td/tr标签做很多事情. 而CSS布局将会非常简单.
* 内容无法 source ordered(来源排序). 很多浏览者不是用浏览器而是用文本阅读器或者屏幕浏览器访问你的WEB.他们的阅读顺序是从左上到右下. 首先他们看到的是左上栏(三栏布局来说) 而不是主要的中间栏. 而CSS使用一种所谓”source-ordered” 排序内容, 这意味着内容将在代码中由CSS布置. 可能你最重要的访问者就是GOOGLE了,它就是以一种屏幕阅读的方式工作的.

让我们来看看使用CSS布局. 学习CSS知识有很多方法,这里推荐Brainjar’s CSS Positioning.

如果你是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

我们将使用 float 去定位我们的内容. 最基础的, 我们的模板文件看起来可能是这样:

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”<?php echo _LANGUAGE; ?>” xml:lang=”<?php echo _LANGUAGE; ?>”
<head>
<meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” />
<?php
if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<script type=”text/javascript”> </script>
<!–http://www.bluerobot.com/web/css/fouc.asp–>
<link xhref=”templates/<?php echo $cur_template; ?>/css/template_css.css” rel=”stylesheet” type=”text/css” media=”screen” />
<style type=”text/css”> <!–
#wrap {width:80%;}
#header {}
#sidebar {float:left;width:20%;}
#content {float:left;width:60%;}
#sidebar-2 {float:left;width:20%;}
#footer {clear:both;}
–> </style>
</head>

<body>

<div id=”wrap”>

<div id=”header”>
<?php echo $mosConfig_sitename; ?> <?php mospathway() ?>
</div>

<div id=”sidebar”>
<?php mosLoadModules(’left’);?>
</div>

<div id=”content”>
<?php mosLoadModules(’top’);?> <?php mosMainBody(); ?>
</div>

<div id=”sidebar-2″>
<?php mosLoadModules(’right’);?>
</div>

<div id=”footer”>
<?php include_once( $mosConfig_absolute_path .’/includes/footer.php’);?>
</div>

</div> <!–end of wrap–>

</body>
</html>

CSS样式在这里被定义(CSS文件的具体路径), 但是具体内容还是在template_css.css 文件里面.

所有定义被封装在一个类似于box的#wrap里面. 通常他们控制了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;

这里是相关资料的链接 An Introduction to CSS shorthand properties 关于语法.

左/中/右三栏都被给出了它们自己的元素. 每部分都向左靠并形成”100%”屏幕宽度. clear:both 告诉浏览器停止浮动并且跨越三栏,实现100%宽度.

为 了使布局美观, 让每部分内容周围有一定的空间, 我们需要加入一些”栏空间”, 被称为”gutter”. 很不幸,这里会发生一个问题. 这里有关于IE浏览器这方面特性的叙述Internet Explorer does not interpret CSS correctly. 问题是计算宽度大家的方法不同. 解决这样的问题我们采用了一种 not using any padding or borders on something that has a width (不使用padding和borders标记)的方法. 在这一栏里面我们嵌套一个<div> 来实现 gutter . 下面就是例子:

<div id=”sidebar”>
<div class=”inside”>
<?php mosLoadModules(’left’);?>
</div></div>

<div id=”content”>
<div class=”inside”>
<?php mosLoadModules(’top’);?>
<?php mosMainBody(); ?>
</div></div>

<div id=”sidebar-2″>
<div class=”inside”>
<?php mosLoadModules(’right’);?>
</div></div>

在CSS样式表里面我们加入这样的设置来定义一个inside的含义:

.inside {padding:10px;}

这 种简单的布局方式是我们使用CSS定义JOOMLA模板的好方法. 这样的方式带来两个优点, 代码短和容易控制. 然而,这并不是所谓的 source ordered . 我们必须使用一些类似于 “nested float”的高级CSS技巧. 我们可以在 Dan Cederholm 的书中得到更多的知识.
Source Ordered Three Column CSS Layout(资源排序三栏CSS布局)

为了便于理解和说明,我们先看下最后的结论.

[TO DO: PICTURE OF NESTED FLOAT HERE]

下 面的代码定义了这样的布局:页面被分割成两个主要的”浮动”块. 首先, #main-body 向左浮动, 其次, #sidebar-2 向右浮动. 代码中 #main-body ”浮动”首先出现. 现在,在 main-body 里面, 我们有另外两个”浮动”; #content 向右; #sidebar 向左. 为了保证我们宽度设置的正确, #content”浮动”的代码放在前面.

<div id=”wrap”>

<div id=”header”>
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
</div>

<div id=”main-body”>

<div id=”content”>
<div class=”inside”>
<?php mosLoadModules(’top’);?>
<?php mosMainBody(); ?>
</div></div>

<div id=”sidebar”>
<div class=”inside”>
<?php mosLoadModules(’left’);?>
</div></div>

</div> <!–end of main-body–>

<div id=”sidebar-2″>
<div class=”inside”>
<?php mosLoadModules(’right’);?>
</div></div>

<div id=”footer”> <?php include_once($mosConfig_absolute_path .’/includes/footer.php’);?>
</div>

</div> <!–end of wrap–>

现在我们在代码内有这样的顺序:

1. #content
2. #sidebar
3. #sidebar-2

为 了指明宽度, 我们需要计算一些尺寸. 比如我们打算让所有的栏边距为总宽(相对每个DIV)的25%. #sidebar-2 比较简单, 只要设定width:25%. 然而, #sidebar 稍复杂,应为它的栏边距是基于其所在的 <div> 的75%. 那么应该设置成 33%.

显然是这样, 33% 的 75% = 25%

#content 的宽度就是剩下的尺寸了.我们把它设置成66%. 最后的1%我们用来把它分割 #content和#sidebar.

样式表是这样的:

#wrap {width:80%;}
#header {} #footer {
clear:both;
}
#main-body { float:left; width:75%; } #sidebar-2 { float:right; width:25%; } #content { float:right; width:66.5%; } #sidebar { float:left; width:33.5%; }
.inside {
padding:10px;
}

一些CSS设计者推荐使用一个小尺寸边栏去建立一个小的 “gutter” . 这样可以帮助布局在IE中被破坏. 如果你希望如此你可以简单的设置 #sidebar-2 到 24%.

如下面的模板代码. 它就像在一个收起的盒子里面并且可以COPY和放置在index.php文件里. 注意我们把CSS的具体语法从HEAD部分去掉了. 我们把其内容用独立的CSS文件封装.

<?php defined( ‘_VALID_MOS’ ) or die( ‘Direct Access to this location is not allowed.’ ); ?>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml” lang=”<?php echo _LANGUAGE; ?>” xml:lang=”<?php echo _LANGUAGE; ?>”
<head>
<meta http-equiv=”Content-Type” content=”text/html; <?php echo _ISO; ?>” />
<?php
if ($my->id) { initEditor(); } ?>
<?php mosShowHead(); ?>
<script type=”text/javascript”> </script>
<!–http://www.bluerobot.com/web/css/fouc.asp–>
<link href=”templates/<?php echo $cur_template; ?>/css/template_css.css” rel=”stylesheet” type=”text/css” media=”screen” />
</head>

<body>

<div id=”wrap”>

<div id=”header”>
<?php echo $mosConfig_sitename; ?>
<?php mospathway() ?>
</div>

<div id=”main-body”>

<div id=”content”>
<div class=”inside”>
<?php mosLoadModules(’top’);?>
<?php mosMainBody(); ?>
</div></div>

<div id=”sidebar”>
<div class=”inside”>
<?php mosLoadModules(’left’);?>
</div></div>

</div> <!–end of main-body–>

<div id=”sidebar-2″>
<div class=”inside”>
<?php mosLoadModules(’right’);?>
</div></div>

<div id=”footer”> <?php include_once($mosConfig_absolute_path .’/includes/footer.php’);?>
</div>

</div> <!–end of wrap–>

</body> </html>

{mostitle=The Default Joomla CSS}
预设置的Joomla CSS

完全用CSS实现布局看上去很遥远.它将给我们展示一个完美的页面, 现在我们将加入一些标准格式. 我们也会把所有的CSS代码从index.php 文件分离,并把它们放入到一个独立的CSS文件当中.

尽管这会让你的站点稍微有点慢, 因为你要为独立的CSS文件花费一定的开销, 它们都会在 template_css.css 文件中引入, 下面是一个例子:

/*Compass Design template CSS file*/

@import url(”layout.css”); /*layout css file*/
/* @import url(”color.css”); color css file*/
@import url(”customize.css”); /*Use this file to customize your website*/

早一些时间,我们使用 @import 因为 Netscape 4 不能理解这样的命令. 它也不理解CSS语法, 因此它会按照文本浏览器的方式来呈现结果.

所 有关于 layout 的布局将在 layout.css 文件中描述. 一旦这个文件被建立,当需要对此类样式做修改时只需要对次文件做相应的修改. color.css 主要是反映配色方案的. 我们可以很容易的对这些颜色设置进行 “color packs”打包. 最后关于基本布局和JOOMLA样式都在 customize.css 文件中定义.

我们的 layout.css 文件现在是这样的:

/*Compass Design layout.css CSS file*/
body {
text-align:center; /*center hack*/
}
#wrap {
width:80%; /*center hack*/
margin:0 auto; /*center hack*/
text-align:left;
}
#header {
text-align:left;
}
#footer {
clear:both;
}
#main-body {
float:left;
width:75%;
}
#sidebar-2 {
float:right;
width:25%;
overflow:hidden;
margin-left:-3px;
}
#content {
float:right;
width:66.5%;
overflow:hidden;
}
#sidebar {
float:left;
width:33.5%;
overflow:hidden;
}
.inside {
padding:10px;
}

我 们要对有居中对齐要求的页面进行一些小的Hack. 这主要是由于 Internet Explorer浏览器. 对于大多数的浏览器只要这样定义 margin:0 10%; 来居中对齐页面, 但是IE浏览器不能识别这样的设定. 因此我们必须先对齐整个页面的文本 “然后再对齐此栏的背景?

这 里我们还定义了两个规则,一是在每栏定义一个overflow:hidden ,用来让页面分离减小其宽度,其次,我们加入了一个”压缩边界”设置 sidebar-2. 这完全是为了适应IE浏览器在解释CSS时的缺陷.我们可以接受这种”仅仅为了IE”而做的Hack,

* html #sidebar-2 {margin-left:-3px;}

然而, hacks 通常带来问题. 总比(作者观点) 去适应所有的浏览器要好些, 毕竟, 它只有3个像素.

在 customize.css 文件的开始部分,我们将设置一些全局的定义通常叫做”global reset”.

/*Compass Design Customize.css file */

* {
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)

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

在Joomla 1.0.8默认自带演示安装完毕后, 这个模板的样子:

1st version of blank joomla template

请 注意边栏并没有达到它们的底部. 这是因为要根据页面的具体内容, 我们看到左右栏各有一个红色和白色的空白区域. 如果我们设定整个模板的背景色是白色. 我们如果需要给一个栏目加上一个BOX. 如果希望给块加上颜色, 或者单独封装, 你就要使用一个与标题垂直的背景. 这种技术被称为”Faux Columns” 这里有详细描述 Douglas Bowman and Eric Meyer.

[TO DO: DESCRIPTION OF FAUX COLUMNS HERE]

很遗憾, 在IE里面这种技术也带来了一些小麻烦. 某些情况下, 栏背景可能会小时消失. 通常叫做躲猫猫错误 “Peekaboo bug”,这里有详细的描述 Position Is Everything. 这里是解决办法 Holly Hack (指定一个 height 是 1% 在使用IE时). 下面是IE6.0是使用 !Important 进行修改的代码. 如果不进行这样的Hack,IE可能识别就有问题.

#wrap{ border:1px solid #999; background: url(../images/threecol-r.gif) repeat-y 75% 0; height:100% !Important;height:1%; }
#wrap-inner { background: url(../images/threecol-l.gif) repeat-y 25.125% 0; height:100% !Important;height:1%; }

请注意使用IE浏览器展示一些屏幕宽度小于600像素的情况, 布局会混乱. 我们也可以定义一个 minimum width 来解决, 不过这里就当成一个练习留给读者吧 (!-_-) .
Joomla 特定的CSS

写 这这些东西的时候, JOOMLA当前的稳定版本是 1.0.X series. 这个版本还是使用table来输出main body部分的重要模块. 关于这些table的相关CSS信息. 下面是清单. 注意它不包括一些主要的页面标记 H1, H2, p, ul, a, form 等等.

#active_menu
#blockrandom
#contact_email_copy
#contact_text
#emailForm
#mod_login_password
#mod_login_remember
#mod_login_username
#poll
#search_ordering
#search_searchword
#searchphraseall
#searchphraseany
#searchphraseexact
#voteid1,#voteid2….
.adminform
.article_seperator
.back_button
.blog
.blog_more
.blogsection
.button
.buttonheading
.category
.clr
.componentheading
.contact_email
.content_rating
.content_vote
.contentdescription
.contentheading
.contentpagetitle
.contentpane
.contentpaneopen
.contenttoc
.createdate
.fase4rdf
.footer
.frontpageheader
.inputbox
.latestnews
.mainlevel
.message
.modifydate
.module
.moduletable
.mostread
.newsfeed
.newsfeeddate
.newsfeedheading
.pagenav
.pagenav_next
.pagenav_prev
.pagenavbar
.pagenavcounter
.pathway
.polls
.pollsborder
.pollstableborder
.readon
.search
.searchintro
.sectionentry1
.sectionentry2
.sectionheader
.sitetitle
.small
.smalldark
.sublevel
.syndicate
.syndicate_text
.text_area
.toclink
.weblinks
.wrapper

关于这张清单请注意.

我们看到的很多设计有其自定义的CSS布局设计. 一些定义的是有优先顺序的.

比如:

a {color:blue;} a:link {color:red;}

.contentheading {color:blue;}
div.contentheading {color:red;}

链接的颜色和 .contentheading 的颜色将是红色的, 定义是特殊的(as .contentheading 是包含在一个 <div> 里面的)

在我们的模板例子中, 你常常会看到一些特殊的规则应用. 比如一个class 出现于 table. 下面是例子:

.moduletable table.moduletable

* .moduletable 是一个包含组件的<div>的名字. table.moduletable 将应用一个样式到 table 类型是 =”moduletable” on it.
* .moduletable 将应用自己的样式而不考虑 class 里面的定义.

a.contentpagetitle:link .contentpagetitle a:link

* a.contentpagetitle:将应用样式只要有 a .contentpagetitle 标记的class 链接上.
* .contentpagetitle a:link 会应用所有的INSIDE .contentpagetitle 链接.

这并不难理解, 这常常使绝大多数的样式应用比较容易,你也不希望看到有很多的特例.

一些有价值的链接:
<!-- m -->http://www.htmldog.com/guides/cssadvanced/specificity/<!-- m -->
<!-- m -->http://www.meyerweb.com/eric/css/link-specificity.html<!-- m -->
<!-- m -->http://www.stuffandnonsense.co.uk/archi ... _wars.html<!-- m -->

此刻我们的模板使用了很多 table, 实际上多于20个! 早期, 这会导致页面访问慢和难以变更. 为了减少 table 我们使用 $style 标记在index.php 中调用组件.

抱歉!评论已关闭.