Joomla模板制作教程二.docx
《Joomla模板制作教程二.docx》由会员分享，可在线阅读，更多相关《Joomla模板制作教程二.docx（20页珍藏版）》请在冰豆网上搜索。
Joomla模板制作教程二
joomlajoomla模板制作joomla教程杂谈
使用CSS进行布局
我们将使用CSS对JOOMLA模板进行”三栏布局”.
而且这个三栏布局是可变宽窄的（fluid）。
页面的宽窄布局迄今有两种主要的模式，一种是固定宽窄（fixed），还有一种就是可变宽窄。
这两种布局模式都是控制页面宽度的。
页面宽度一直是一个问题,当人们访问你的站点的时候,.最高分辨率往往得不到应用,大约20%的浏览者使用800*600的分辨率.
76%的人使用1024*768以上或者更高的分辨率（source:
）.
这个统计结果表明你不仅要考虑大多数也要考虑那20%人可以正常浏览.
通常,设计者喜欢用table来进行布局,表格可以方便的使用”百分比”模式进行栏宽度设置,但是这种方法有下列弊端:
*与CSS布局相比table布局有很多”额外代码”.首当其冲的就是load时间（访问者反感）搜索引擎也不易接受.
代码通常是CSS布局的双倍尺寸,还有图像占位“spacergifs”在使用table时也是问题.请参考newdisney.co.ukwebsite.
*表格不易控制difficulttomaintain.你做修改的时候要用td/tr标签做很多事情.而CSS布局将会非常简单.
*内容无法sourceordered（来源排序）.很多浏览者不是用浏览器而是用文本阅读器或者屏幕浏览器访问你的WEB.他们的阅读顺序是从左上到右下.
首先他们看到的是左上栏（三栏布局来说）而不是主要的中间栏.而CSS使用一种所谓”source-ordered”排序内容,
这意味着内容将在代码中由CSS布置.可能你最重要的访问者就是GOOGLE了,它就是以一种屏幕阅读的方式工作的.
让我们来看看使用CSS布局.学习CSS知识有很多方法,这里推荐Brainjar’sCSSPositioning.
如果你是CSS的初学者你最好看下”beginnersguidetoCSS”.这里推荐:
KevinHale’s-AnOverviewofCurrentCSSLayoutTechniques
htmldog’sCSSBeginner’sGuide
Mulder’sStylesheetsTutorial
我们将使用float去定位我们的内容.最基础的,我们的模板文件看起来可能是这样:
phpdefined（‘_VALID_MOS’）ordie（‘DirectAccesstothislocationisnot
allowed.’）;?
>
DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”
“http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
//www.w3.org/1999/xhtml”lang=”
phpecho_LANGUAGE;?
>”
xml:
lang=”
phpecho_LANGUAGE;?
>”
phpecho_ISO;?
>”/>
php
if（$my->id）{initEditor（）;}?
>
phpmosShowHead（）;?
>
–
phpecho$cur_template;?
>/css/template_css.css”
rel=”stylesheet”type=”text/css”media=”screen”/>
–
#wrap{width:
80%;}
#header{}
#sidebar{float:
left;width:
20%;}
#content{float:
left;width:
60%;}
#sidebar-2{float:
left;width:
20%;}
#footer{clear:
both;}
–>
phpecho$mosConfig_sitename;?
>
phpmospathway（）?
>