Joomla模板制作教程二Word文件下载.docx
- 文档编号:4682508
- 上传时间:2023-05-03
- 格式:DOCX
- 页数:20
- 大小:24.88KB
Joomla模板制作教程二Word文件下载.docx
《Joomla模板制作教程二Word文件下载.docx》由会员分享,可在线阅读,更多相关《Joomla模板制作教程二Word文件下载.docx(20页珍藏版)》请在冰点文库上搜索。
phpdefined(‘_VALID_MOS’)ordie(‘DirectAccesstothislocationisnot
allowed.’);
?
>
!
DOCTYPEhtmlPUBLIC“-//W3C//DTDXHTML1.0Transitional//EN”
“http:
//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
htmlxmlns=”http:
//www.w3.org/1999/xhtml”lang=”<
phpecho_LANGUAGE;
”
xml:
lang=”<
”
head>
metahttp-equiv=”Content-Type”content=”text/html;
<
phpecho_ISO;
”/>
php
if($my->
id){initEditor();
}?
phpmosShowHead();
scripttype=”text/javascript”>
/script>
–
linkxhref=”templates/<
phpecho$cur_template;
/css/template_css.css”
rel=”stylesheet”type=”text/css”media=”screen”/>
styletype=”text/css”>
#wrap{width:
80%;
}
#header{}
#sidebar{float:
left;
width:
20%;
#content{float:
60%;
#sidebar-2{float:
#footer{clear:
both;
–>
/style>
/head>
body>
divid=”wrap”>
divid=”header”>
phpecho$mosConfig_sitename;
phpmospathway()?
/div>
divid=”sidebar”>
phpmosLoadModules(’left’);
divid=”content”>
phpmosLoadModules(’top’);
phpmosMainBody();
divid=”sidebar-2″>
phpmosLoadModules(’right’);
divid=”footer”>
phpinclude_once($mosConfig_absolute_path.’/includes/footer.php’);
–endofwrap–>
/body>
/html>
CSS样式在这里被定义(CSS文件的具体路径),但是具体内容还是在template_css.css文件里面.
所有定义被封装在一个类似于box的#wrap里面.通常他们控制了80%的外观.
CSS缩写
有可能对某些CSS代码进行”缩写”.我们来看一个关于padding和margin的例子
margin-top:
5px;
margin-bottom:
margin-left:
10px;
margin-right:
可以这样写:
margin:
5px10px;
每种样式定义几乎都可以”缩写”.当你完成样式表,用”缩写”去替换掉比较复杂的书写格式,比如标准格式关于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;
变成这样:
bold1em/1.3emArial,Helvetica,sans-serifitalic;
这里是相关资料的链接AnIntroductiontoCSSshorthandproperties关于语法.
左/中/右三栏都被给出了它们自己的元素.每部分都向左靠并形成”100%”屏幕宽度.clear:
both告诉浏览器停止浮动并且跨越三栏,实现100%宽度.
为了使布局美观,让每部分内容周围有一定的空间,我们需要加入一些”栏空间”,被称为”gutter”.很不幸,这里会发生一个问题.
这里有关于IE浏览器这方面特性的叙述InternetExplorerdoesnotinterpretCSScorrectly.
问题是计算宽度大家的方法不同.解决这样的问题我们采用了一种notusinganypaddingorbordersonsomething
thathasawidth(不使用padding和borders标记)的方法.在这一栏里面我们嵌套一个<
div>
来实现gutter.
下面就是例子:
divclass=”inside”>
在CSS样式表里面我们加入这样的设置来定义一个inside的含义:
.inside{padding:
这种简单的布局方式是我们使用CSS定义JOOMLA模板的好方法.这样的方式带来两个优点,代码短和容易控制.然而,这并不是所谓的source
ordered.我们必须使用一些类似于“nestedfloat”的高级CSS技巧.我们可以在DanCederholm的书中得到更多的知识.
SourceorderedThreeColumnCSSLayout(资源排序三栏CSS布局)
为了便于理解和说明,我们先看下最后的结论.
[TODO:
PICTUREOFNESTEDFLOATHERE]
下面的代码定义了这样的布局:
页面被分割成两个主要的”浮动”块.首先,#main-body向左浮动,其次,#sidebar-2向右浮动.代码中
#main-body”浮动”首先出现.现在,在main-body里面,我们有另外两个”浮动”;
#content向右;
#sidebar向左.
为了保证我们宽度设置的正确,#content”浮动”的代码放在前面.
divid=”main-body”>
–endofmain-body–>
phpinclude_once($mosConfig_absolute_path
.’/includes/footer.php’);
现在我们在代码内有这样的顺序:
1.#content
2.#sidebar
3.#sidebar-2
为了指明宽度,我们需要计算一些尺寸.比如我们打算让所有的栏边距为总宽(相对每个DIV)的25%.#sidebar-2比较简单,
只要设定width:
25%.然而,#sidebar稍复杂,应为它的栏边距是基于其所在的<
的75%.那么应该设置成33%.
显然是这样,33%的75%=25%
#content的宽度就是剩下的尺寸了.我们把它设置成66%.最后的1%我们用来把它分割#content和#sidebar.
样式表是这样的:
#header{}#footer{
clear:
#main-body{float:
width:
75%;
}#sidebar-2{float:
right;
25%;
}
#content{float:
66.5%;
}#sidebar{float:
33.5%;
}
.inside{
padding:
一些CSS设计者推荐使用一个小尺寸边栏去建立一个小的“gutter”.这样可以帮助布局在IE中被破坏.如果你希望如此你可以简单的设置
#sidebar-2到24%.
如下面的模板代码.它就像在一个收起的盒子里面并且可以COPY和放置在index.php文件里.注意我们把CSS的具体语法从HEAD部分去掉了.
我们把其内容用独立的CSS文件封装.
linkhref=”templates/<
{mostitle=TheDefaultJoomlaCSS}
预设置的JoomlaCSS
完全用CSS实现布局看上去很遥远.它将给我们展示一个完美的页面,现在我们将加入一些标准格式.我们也会把所有的CSS代码从index.php
文件分离,并把它们放入到一个独立的CSS文件当中.
尽管这会让你的站点稍微有点慢,因为你要为独立的CSS文件花费一定的开销,它们都会在template_css.css文件中引入,下面是一个例子:
@importurl(”layout.css”);
@importurl(”customize.css”);
早一些时间,我们使用@import因为Netscape4不能理解这样的命令.它也不理解CSS语法,因此它会按照文本浏览器的方式来呈现结果.
所有关于layout的布局将在layout.css文件中描述.一旦这个文件被建立,当需要对此类样式做修改时只需要对次文件做相应的修改.
color.css主要是反映配色方案的.我们可以很容易的对这些颜色设置进行“colorpacks”打包.最后关于基本布局和JOOMLA样式都在
customize.css文件中定义.
我们的layout.css文件现在是这样的:
body{
text-align:
center;
#wrap{
0auto;
#header{
#footer{
#main-body{
float:
#sidebar-2{
overflow:
hidden;
margin-left:
-3px;
#content{
#sidebar{
我们要对有居中对齐要求的页面进行一些小的Hack.这主要是由于InternetExplorer浏览器.对于大多数的浏览器只要这样定义margin:
0
10%;
来居中对齐页面,但是IE浏览器不能识别这样的设定.因此我们必须先对齐整个页面的文本“然后再对齐此栏的背景?
这里我们还定义了两个规则,一是在每栏定义一个overflow:
hidden,用来让页面分离减小其宽度,其次,我们加入了一个”压缩边界”设置
sidebar-2.这完全是为了适应IE浏览器在解释CSS时的缺陷.我们可以接受这种”仅仅为了IE”而做的Hack,
*html#sidebar-2{margin-left:
然而,hacks通常带来问题.总比(作者观点)去适应所有的浏览器要好些,毕竟,它只有3个像素.
在customize.css文件的开始部分,我们将设置一些全局的定义通常叫做”globalreset”.
*{
0;
h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address{
0.5em0;
li,dd{
fieldset{
.5em;
76.1%;
font-family:
Verdana,Arial,Helvetica,sans-serif;
line-height:
background:
#0099FF;
#CC0000;
#009933;
#999999;
#009933;
每元素都被设定为”0″margin和“0″padding,然后所有的块被定义了底部边距.你可以在这里找到关于全局定义的相关内容clagnutand
left-justified.
字体大小被设置成76.1%.这也是为了在不同浏览器访问时自适应屏幕分辨率.字体的单位都设置成em.字高line-height:
1.3em
设定更便于阅读.这意味着页面可以适应不同访问者的不同页面分辨率.这里有详细的讨论:
AnexperimentintypographyatTheNoodleIncident(OwenBriggs)
最后我们加入背景颜色设定,得到下图的显示效果.
在Joomla1.0.8默认自带演示安装完毕后,这个模板的样子:
1stversionofblankjoomlatemplate
请注意边栏并没有达到它们的底部.这是因为要根据页面的具体内容,我们看到左右栏各有一个红色和白色的空白区域.如果我们设定整个模板的背景色是白色.
我们如果需要给一个栏目加上一个BOX.如果希望给块加上颜色,或者单独封装,你就要使用一个与标题垂直的背景.这种技术被称为”FauxColumns”
这里有详细描述DouglasBowmanandEricMeyer.
DESCRIPTIONOFFAUXCOLUMNSHERE]
很遗憾,在IE里面这种技术也带来了一些小麻烦.某些情况下,栏背景可能会小时消失.通常叫做躲猫猫错误“Peekaboobug”,这里有详细的描述
PositionIsEverything.这里是解决办法HollyHack(指定一个height是1%在使用IE时).
下面是IE6.0是使用!
Important进行修改的代码.如果不进行这样的Hack,IE可能识别就有问题.
#wrap{border:
1pxsolid#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-y25.125%0;
请注意使用IE浏览器展示一些屏幕宽度小于600像素的情况
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- Joomla 模板 制作 教程
![提示](https://static.bingdoc.com/images/bang_tan.gif)