Joomla模板教程二 joomla模板使用教程

1,开始做模板


A),新模板
用平面设计软件把界面设计出来,效果如下图所示:




分析下首页的布局



根据上图判断,找出规律,把页面结构分为左右两栏,右侧为侧边栏,左侧为主体布局。

B),开始写模板
还是在以下空框架里填实际内容。


header


footer
在分析下首页主体内容,把首页主体内容分为上下两部分,上部分再分为小三栏或两栏都可以。我这里分为两栏。


如上图所示:模块位置indexContentLeft,indexContentRight,indexContentBottom,其中ndexContentLeft,indexContentRight分别占据首页上半部分左右两栏,其中indexContentLeft用来放置登录模块。而indexContentBottom占据首页下半部分内容。如下图所示:



至于添加新模块位置,需要到templateDetails.xml里添加。
template0116Flash
indexContentLeft
indexContentRight
indexContentBottom

把图片以及css放在相应的文件里。

2,细化工作

到管理后台,扩展—>模板管理把所做的模板设为默认模板,点击预览,就可以看到新模板啦。

因为模板新增加很多新模块位置,屏蔽了left模块,看到的跟设计的模板有出入,没关系,接下来进一步做细化工作。

模块管理—>创建新模块。



选择 "定制HTML" 新建一模块,如下图:



定义显示在右侧侧边栏的上半部分内容,模块位置选right。同理,把右侧侧边栏的下半部分内容也定义出来。

同样道理把首页flash放到新定义的template0116Flash,这个位置。

内容—>首页文章

把所有在首页显示的文章改为停止发布。
扩展—>模块管理,筛选位置为right的所有模块,把原默认显示在right位置的模块“启用”状态改为 “禁用”。
预览模板,效果如下:





首页除了主体内容,其他内容都已经搞好了。

扩展—>模块管理,找到Login Form模块,选中前面的checkbox,点击复制按钮,复制一"loginForm"模块

选择此模块的位置为indexContentLeft。

预览下网站,效果如下:



因为自定义的几个模块位置都是用div表示,所以需要下功夫来写css,让其显示在相应的位置。所以才会出现在上图中的位置。
接下来定义页面主体内容的其他部分:
同样是模块—>创建新模块,方法跟上面的定义右侧侧栏相同,这里就不详细描述。唯一要下功夫的就是css,调试位置以及内容style样式。
哈哈,效果跟设计的平面图相差无几。

最后看看二级也页面:


备注:比较难的就是css定位的问题,一定要多调试,在各种浏览器来调试。我这里用了三种浏览器:IE6.0,Firefox,Opera来调试。

自定义模块,我们还可以通过另外一种方式来制作。然后通过扩展——>安装卸载来上传模块,比如说自定义首页新闻等。有时间我会写个“最新新闻”模块教程,放于首页。

另外,其他细节调整,可以参照我的第一个模板教程。
Joomla模板教程二 joomla模板使用教程
http://blog.sina.com.cn/s/blog_4933599a0100gxm5.html


****我的小店****

  

爱华网本文地址 » http://www.aihuau.com/a/25101016/295391.html

更多阅读

QQ空间大图模板使用入门 空间模板大图

QQ空间大图模板使用入门 QQ空间大图模板使用入门:1:点击自定义{就是装扮空间}2:点击右侧的新建模块→点击大图片模块。3:模块名称随便,用一个空格最好,图片地址上输入图片的地址,【把图片传到QQ相册,或百度空间相

Joomla模板教程二 joomla模板使用教程

1,开始做模板A),新模板用平面设计软件把界面设计出来,效果如下图所示:分析下首页的布局根据上图判断,找出规律,把页面结构分为左右两栏,右侧为侧边栏,左侧为主体布局。B),开始写模板还是在以下空框架里填实际内容。headerfooter

声明:《Joomla模板教程二 joomla模板使用教程》为网友有种努力叫奋斗分享!如侵犯到您的合法权益请联系我们删除