书签 分享 收藏 举报 版权申诉 / 20
立即下载 加入VIP,免费下载
当前位置： 首页 > 经管营销 > 经济市场 > Joomla模板制作教程二.docx

类型Joomla模板制作教程二.docx

  • 文档编号：11966545
  • 上传时间：2023-04-16
  • 格式：DOCX
  • 页数：20
  • 大小：24.88KB

phpmosLoadModules（’left’）;?

>

phpmosLoadModules（’top’）;?

>

phpmosMainBody（）;?

>

phpmosLoadModules（’right’）;?

>

phpinclude_once（$mosConfig_absolute_path.’/includes/footer.php’）;?

>

–endofwrap–>

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:

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;

变成这样:

font:

bold1em/1.3emArial,Helvetica,sans-serifitalic;

这里是相关资料的链接AnIntroductiontoCSSshorthandproperties关于语法.

左/中/右三栏都被给出了它们自己的元素.每部分都向左靠并形成”100%”屏幕宽度.clear:

both告诉浏览器停止浮动并且跨越三栏,实现100%宽度.

为了使布局美观,让每部分内容周围有一定的空间,我们需要加入一些”栏空间”,被称为”gutter”.很不幸,这里会发生一个问题.

这里有关于IE浏览器这方面特性的叙述InternetExplorerdoesnotinterpretCSScorrectly.

问题是计算宽度大家的方法不同.解决这样的问题我们采用了一种notusinganypaddingorbordersonsomething

thathasawidth（不使用padding和borders标记）的方法.在这一栏里面我们嵌套一个

来实现gutter.

下面就是例子:

phpmosLoadModules（’left’）;?

>

phpmosLoadModules（’top’）;?

>

phpmosMainBody（）;?

>

phpmosLoadModules（’right’）;?

>

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

.inside{padding:

10px;}

这种简单的布局方式是我们使用CSS定义JOOMLA模板的好方法.这样的方式带来两个优点,代码短和容易控制.然而,这并不是所谓的source

ordered.我们必须使用一些类似于“nestedfloat”的高级CSS技巧.我们可以在DanCederholm的书中得到更多的知识.

SourceorderedThreeColumnCSSLayout（资源排序三栏CSS布局）

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

[TODO:

PICTUREOFNESTEDFLOATHERE]

下面的代码定义了这样的布局:

页面被分割成两个主要的”浮动”块.首先,#main-body向左浮动,其次,#sidebar-2向右浮动.代码中

#main-body”浮动”首先出现.现在,在main-body里面,我们有另外两个”浮动”;#content向右;#sidebar向左.

为了保证我们宽度设置的正确,#content”浮动”的代码放在前面.

phpecho$mosConfig_sitename;?

>

phpmospathway（）?

>

phpmosLoadModules（’top’）;?

>

phpmosMainBody（）;?

>

phpmosLoadModules（’left’）;?

>

–endofmain-body–>

phpmosLoadModules（’right’）;?

>

phpinclude_once（$mosConfig_absolute_path

.’/includes/footer.php’）;?

>

–endofwrap–>

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

1.#content

2.#sidebar

3.#sidebar-2

为了指明宽度,我们需要计算一些尺寸.比如我们打算让所有的栏边距为总宽（相对每个DIV）的25%.#sidebar-2比较简单,

只要设定width:

25%.然而,#sidebar稍复杂,应为它的栏边距是基于其所在的

的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文件封装.

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”/>

phpecho$mosConfig_sitename;?

>

phpmospathway（）?

>

phpmosLoadModules（’top’）;?

>

phpmosMainBody（）;?

>

phpmosLoadModules（’left’）;?

>

–endofmain-body–>

phpmosLoadModules（’right’）;?

>

phpinclude_once（$mosConfig_absolute_path

.’/includes/footer.php’）;?

>

–endofwrap–>

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

width:

80%;

margin:

0auto;

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.这主要是由于InternetExplorer浏览器.对于大多数的浏览器只要这样定义margin:

0

10%;来居中对齐页面,但是IE浏览器不能识别这样的设定.因此我们必须先对齐整个页面的文本“然后再对齐此栏的背景?

这里我们还定义了两个规则,一是在每栏定义一个overflow:

hidden,用来让页面分离减小其宽度,其次,我们加入了一个”压缩边界”设置

sidebar-2.这完全是为了适应IE浏览器在解释CSS时的缺陷.我们可以接受这种”仅仅为了IE”而做的Hack,

*html#sidebar-2{margin-left:

-3px;}

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

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

*{

margin:

0;

padding:

0;

}

h1,h2,h3,h4,h5,h6,p,blockquote,form,label,ul,ol,dl,fieldset,address{

margin:

0.5em0;

}

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,然后所有的块被定义了底部边距.你可以在这里找到关于全局定义的相关内容clagnutand

left-justified.

字体大小被设置成76.1%.这也是为了在不同浏览器访问时自适应屏幕分辨率.字体的单位都设置成em.字高line-height:

1.3em

设定更便于阅读.这意味着页面可以适应不同访问者的不同页面分辨率.这里有详细的讨论:

AnexperimentintypographyatTheNoodleIncident（OwenBriggs）

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

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

1stversionofblankjoomlatemplate

请注意边栏并没有达到它们的底部.这是因为要根据页面的具体内容,我们看到左右栏各有一个红色和白色的空白区域.如果我们设定整个模板的背景色是白色.

我们如果需要给一个栏目加上一个BOX.如果希望给块加上颜色,或者单独封装,你就要使用一个与标题垂直的背景.这种技术被称为”FauxColumns”

这里有详细描述DouglasBowmanandEricMeyer.

[TODO:

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;

height:

100%!

Important;height:

1%;}

请注意使用IE浏览器展示一些屏幕宽度小于600像素的情况

举报
举报 版权申诉
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：
Joomla 模板 制作 教程
提示  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
关于本文
本文标题：Joomla模板制作教程二.docx
链接地址：https://www.bdocx.com/doc/11966545.html

热门标签

关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2022 冰点文档网站版权所有

经营许可证编号:鄂ICP备2022015515号-1

收起
在线客服
意见反馈
返回顶部
展开
QQ交谈
返回顶部