joomla模板完美开发教程

Joomla模板制作实战教程【一】-创建一个简单的模板

Joomla绝对是一款优秀的CMS，相较一些国产CMS她始终不能占据优势地位，很多人说Joomla做模板难、Joomla不支持静态生成、 Joomla执行效率低等等，但其实Joomla团队为这些东西做了很多的功夫，细细研究不难发现，Joomla模板只需要会Html+CSS就行了，Joomla的静态生成其实就是System-cache(缓存插件)，当做足了优化之后，Joomla的执行效率是相当可观的，如本站（优化的方法会在后面的教程中提及）

话说Joomla模板难做，这是很多入门的学习者遇上的足以让他放弃Joomla的门槛，那么我要说的是Joomla模板一点不难，它的难点根本不在于“是否会PHP”，而是在于不敢钻研的心，那么为了砍掉这个所谓的“门槛”，我将为大家带来这个系列的模板实战教程。

做之前我们必须要准备这几样东西！

11、持之以恒的心

22、必要的HTML+CSS基础知识

33、熟悉了Joomla的使用方法、工作原理

44、一丝不苟的工作态度。

55、认认真真的看好教程，不要急着复制粘贴。

开始我们的模板制作（以Joomla 为例，完结之后会推出Joomla 相关教程）

安装好Joomla ，在templates/目录下建立一个我们要制作的模板文件夹，命名为jk_joomlask，这时候在后台我们尚且看不到有jk_joomlask的这个模板选项。

*Joomla网站系统是基于utf-8编码编写的，所以以下所有操作的文件都务必保存为utf-8编码。

第一步我们需要让其在Joomla后台中显示这个模板选项，创建文件，不要担心会不会xml，很简单，根据官方文档给出的说明，照着写便是：

# @license - Copyrighted Commercial Software

# Author: JOOMLASK

# Websites: This file may not be redistributed in whole or significant part.

-------------------------------------------------------------------------*/

/*--------------*/

body{background:#fff;color:#000;font-family:Tahoma, Geneva, sans-serif;line-height:;font-size:12px;}

/*global*/

#jk_wrapper{}

/*定义每个框架的宽度、居中对齐*/

#jk_wrapper.main{width:1000px; margin:0auto;}

/*定义需要设定固定高度的DIV高度*/

#jk_header.main{ height:70px; background:black;}

#jk_nav.main{ height:63px; background:red;}

#jk_ad_top.main{ height:90px; background:yellow;}

#jk_body.main{ height:800px; background:blue;}

#jk_bottom.main{ height:170px; background:green;}

上述样式是给大框加进行了大体上的设定，并附加了颜色加以区分，在后面的控制中我们会把这些背景色全部去掉。

那么我们现在测试以上改的结果如下图

那么这样确实蛮难看的！我们现在就开始创建三个头部模块，一个LOGO，一个顶部广告，一个右上角的快捷信息。

进入后台->扩展->模块管理->创建一个定制HTML（mod_custom）模块，在编辑器中插入一张图片（LOGO），这个模块定名为LOGO，模块标题隐藏，模块位置选择jk_logo

然后我们再创建顶部广告（利用Joomla 自带的广告管理），将我们设计好的广告图片上传至/images/banners/

进入后台->旗帜广告->分类管理->创建一个新的广告分类，定名为“JOOMLASK”，再回到旗帜广告->客户管理->创建一个新的客户，定名为“JOOMLASK”

回到旗帜广告->广告管理->创建一个新的广告，名称设置为“头部中间广告”,分类和客户设置为“JOOMLASK”，广告URL设定为，广告图片选择我们刚才上传的广告

广告创建结束后，模块中并未显示，所以我们再回到扩展->模块管理->创建一个旗帜广告模块

模块位置选择jk_adtop，保存创建的广告模块。

下面我们还要创建右上角的相关信息模块，这是一个定制HTML模块，模块管理->创建一个定制HTML模块，在编辑器中输入以下代码：

新用户注册| 会员登陆 | 商务合作 | 正體中文

  

创建定制HTML模块就不多说了，同第一步创建LOGO模块一样

那么这时候jk_header的这三个模块没有实质样式，再打开/templates/jk_joomlask/css/修改代码为：

@charset "utf-8";

/*------------------------------------------------------------------------

# Copyright (C) JOOMLASK. All Rights Reserved.

# @license - Copyrighted Commercial Software