joomla模板完美开发教程

Joomla模板制作实战教程【一】-创建一个简单的模板
Joomla绝对是一款优秀的CMS相较一些国产CMS她始终不能占据优势地位，很多人说Joomla做模板难、Joomla不支持静态生成、Joomla执行效率低等等，但其实Joomla团队为这些东西做了很多的功夫，细细研究不难发现，Joomla模板只需要会Html+CSS就行了，
Joomla的静态生成其实就是System-cache （缓存插件），当做足了优化之后，Joomla的执行效率是相当可观的，如本站（优化的方法会在后面的教程中提及）
话说Joomla模板难做，这是很多入门的学习者遇上的足以让他放弃Joomla的门槛，那么我
要说的是Joomla模板一点不难，它的难点根本不在于"是否会PHP，而是在于不敢钻研
的心，那么为了砍掉这个所谓的“门槛”，我将为大家带来这个系列的模板实战教程。

做之前我们必须要准备这几样东西！
11、持之以恒的心
22、必要的HTML+CS基础知识
33、熟悉了Joomla的使用方法、工作原理
44、一丝不苟的工作态度。

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

开始我们的模板制作（以Joomla为例，完结之后会推出Joomla相关教程）
安装好Joomla，在templates/目录下建立一个我们要制作的模板文件夹，命名为jk_joomlask ，这时候在后台我们尚且看不到有jk_joomlask 的这个模板选项。

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

第一步我们需要让其在Joomla后台中显示这个模板选项，创建文件，不要担心会不会xml，
很简单，根据官方文档给出的说明，照着写便是：
<xml version ="" encoding ="utf-8" >
VDOCTYPE in stall PUBLIC "- All Rights Reserved.
#@lice nse - Copyrighted Commercial Software
#Author: JOOMLASK
#Websites: This file may not be redistributed in whole or significant part.
*/
/* */
body{background : #fff ;color: #00O;font-family :Tahoma, Geneva, sans-serif ;line-height : ;font-size : 12px;}
/*global*/
#jk_wrapper {}
/*定义每个框架的宽度、居中对齐*/
#jk_wrapper .main {width : 1000px; margin : 0 auto ; }
/*定义需要设定固定高度的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
<div><a href= "" target= "_blank" ><img src= "" border= "0" /></a></div>
然后我们再创建顶部广告(利用Joomla 自带的广告管理) ，将我们设计好的广告图片上传
至/images/ba nn ers/
进入后台-> 旗帜广告-> 分类管理-> 创建一个新的广告分类，定名为“ JOOMLASK,再回到旗
帜广告->客户管理->创建一个新的客户，定名为“ JOOMLAS”K
回到旗帜广告->广告管理->创建一个新的广告，名称设置为“头部中间广告” ,分类和客户设置为“ JOOMLASK,广告URL设定为，广告图片选择我们刚才上传的广告
广告创建结束后，模块中并未显示，所以我们再回到扩展->模块管理->创建一个旗帜广告模块
模块位置选择jk_adtop ，保存创建的广告模块。

下面我们还要创建右上角的相关信息模块，这是一个定制HTML模块，模块管理-> 创建一个
定制HTML莫块，在编辑器中输入以下代码：
<p><a href= "" target= "_blank" ><span style= "color: #ff0000;" > 新用户注册
</span></a>| <a href= "" target= "_blank" >会员登陆</a>| <a href= "" target= "_blank" > 商务合作</a> | <strong><a id= "translateLink" style= "color: red; font-weight: bold;" > 正體中文</a></strong></p><p><a href= "&amp;amp;fid=14" target= "_blank" ><img src= "" alt= "button_temp_03" width= "123" height= "26"
/></a>&amp;nbsp;&amp;nbsp;<a href= "&amp;amp;fid=6" target= "_blank" ><img src= "" alt= "button_temp_05" width= "123" height= "26" /></a></p> 创建定制HTML模块就不多说了，同第一步创建LOGO模块一样
那么这时候jk_header 的这三个模块没有实质样式，再打开/templates/jk_joomlask/css/ 修改代码为：
@charset "utf-8";
/* -------------------------------------------
#Copyright (C) JOOMLASK. All Rights Reserved.
#@license - Copyrighted Commercial Software
# Author: JOOMLASK
# Websites:
# This file may not be redistributed in whole or sig nifica nt part.
-------------------------------------------- */
/* */
body{background : #fff ;color: #000;font-family :Tahoma,
sans-serif ;line-height : ;font-size : 12px;} a{ color : #006699;text-decoration :none ;}
/*global*/
#jk_wrapper {}
#jk_wrapper .main {width : 1000px; margin : 0 auto ; }
#jk_header .main { height : 70px;}
#jk_header .jk_logo { float :left ; width : 252px; padding-top : 10px; height #jk_header .jk_headad { float :left ; width : 468px;}
#jk_header .jk_headinfo { float :right ; width : 260px; height : 60px;}
#jk_header .jk_headinfo p { margin : 0; padding-bottom : 10px;}
#jk_nav .main { height : 63px; background :red ;}
#jk_ad_top .main { height : 90px; background :yellow ;}
#jk_body .main { height : 300px; background :blue ; }
#jk_bottom .main { height : 170px; background :green ;}
我们定义了头部的这些样式，自然也要在前端给它装上，更改头部代码如下 <php defined ( '_JEXEC' ) or die ( 'Restricted access' );>
VDOCTYPE html PUBLIC "- ain 部分，并将颜色标识去除， CSS 中的调用 图片见安装包） Gen eva,
:60px;}
并且我们新加了一些公用样式，和菜单配套的图片以及菜单、广告的底边距，请注意区分
@charset "utf-8";
/* -------------------------------------------
# Copyright (C) JOOMLASK. All Rights Reserved.
# @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; }
/* 新加了一些公用样式 */
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input,textarea,select ,button,th,td { margin : 0;padding :0;}
ol,ul,li { list-style-type :none ; }
/*global*/
#jk_wrapper {}
/* 定义每个框架的宽度、居中对齐 */
#jk_wrapper .main { width : 1000px; margin : 0 auto ; }
/*定义需要设定固定高度的DIV 高度*/
#jk_header .main { height : 70px; background :black ; }
/* 菜单详细样式代码 */
#jk_nav { margin-bottom : 6px; }
#jk_nav .main { height : 63px; background : url ( ../images/ repeat-x left top ; }
#jk_nav ul #dropdown { display : block ;height: 63px ;margin: 0; padding : 0 0 0 16px;
position : relative ;}
#jk_nav ul #dropdown li { float : left ; font-family : " 微 软 雅 黑 " ,Tahoma,Geneva, sans-serif ;font- size : 14px;font-weight: bold ;height: 35px; }
#jk_nav ul #dropdown li a { color : #FFFFFF;display: inline- block ; height : 29px; padding : 6px 12px 0; } #jk_nav ul #dropdown a { color : #336699; } { background : url ( ../images/
repeat-x scroll 50%
{ background : none repeat scroll 0 0 normal ;height: 28px !important; } 28px !important;visibility: visible ; } #jk_nav ul #dropdown ul { font-weight : normal ;height: 28px;left: 0; position absolute ; top : 34px; visibility : hidden ; width : 728px;z-index: 9999; } #jk_nav ul #dropdown ul li
{ background : none repeat scroll 0 0 transparent ;color: #000000;float: left ; font-weight : normal ; height : 28px; } #jk_nav ul #dropdown ul { background : none repeat scroll 0 0
transparent ; font-weight : normal ; }
#jk_nav ul #dropdown , ul #dropdown
top transparent ; }
#jk_nav ul #dropdown ul
transparent !important;font-weight:
#jk_nav ul #dropdown ul { display : block ;font-weight: normal ;height:
#jk_nav ul #dropdown ul li a { background : none repeat scroll 0 0 transparent ; color :
#006699; display : inline- block !important; font-size : 12px; font-weight : normal ; height : 22px !important;
#jk_nav ul #dropdown ul li a span { display : inline- block ;height: 22px; }
/* 最新的广告尺寸为1000*80的大小*/ #jk_ad_top { margin-bottom :6px; }
#jk_ad_top .main { height : 80px; background :yellow ;} #jk_body .main { height : 800px; background :blue ; } #jk_bottom .main { height : 170px ; background :green ;} 上述样式是针对主菜单进行的设计，保存之后打开前台测试得下图结果：那么我们现在测试以上改的结果如下图菜单就成形了。

大横幅广告
上一节中我们有提过，旗帜广告和广告模块的创建，同上节，我们把演示中的黄色部分替换为广告，把准备好的广告上传到/images/banners 目录下。

记得在旗帜广告管理中，要创建一个新的分类，因为广告模块要按分类调用。

创建广告模块并设置到我们预设的jk_adlong 模块位置，结果如下图
* 注意上述的样式中，我们也要把原来预设的黄色背景去掉，高度改成现在的80px, 并且让广告的下面显的有一些边距
#jk_ad_top { margin-bottom :6px; }
#jk_ad_top .main { height : 90px; }
底部版权信息
一）底部主菜单（底部友情链接本节不讲）
上面我们创建过了主菜单，也创建了主菜单的模块，这里我们还要创建一个底部的主菜单模块，样式与上面的主菜单也略有不同
进入后台-> 扩展-> 模块管理-> 创建一个新的菜单模块（mod_mainmenU ,模块位置选择
jk_bnav ，不显示子菜单，上
在我们也讲到了高级配置中设置的菜单ID 来区分，这里的底部菜单我们就填入ID 为：
dropdown_bottom
继续给底部菜单添加样式，补充后的样式为（底部的绿色标识背景也去除）：
@charset "utf-8";
/* ----------
# Copyright (C) JOOMLASK. All Rights Reserved.
# @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; }
/* 新加了一些公用样式 */
body,ul,ol,dl,dd,h1,h2,h3,h4,h5,h6,p,form,fieldset,legend,input,textarea,select ,button,th,td { margin : 0;padding :0;}
ol,ul,li { list-style-type :none ; }
/*global*/
#jk_wrapper {}
/* 定义每个框架的宽度、居中对齐 */
#jk_wrapper .main { width : 1000px; margin : 0 auto ; }
/*定义需要设定固定高度的DIV 高度*/
#jk_header .main { height : 70px; background :black ; }
/* 菜单详细样式代码 */
#jk_nav { margin-bottom : 6px; }
#jk_nav .main { height : 63px; background : url ( ../images/ repeat-x left top ; }
#jk_nav ul #dropdown { display : block ;height: 63px ;margin: 0; padding : 0 0 0 16px;
position : relative ;}
#jk_nav ul #dropdown li { float : left ; font-family : " 微 软 雅 黑 " ,Tahoma,Geneva, sans-serif ;font- size : 14px;font-weight: bold ;height: 35px; }
#jk_nav ul #dropdown li a { color : #FFFFFF;display: inline- block ; height : 29px; padding : 6px 12px 0; }
#jk_nav ul #dropdown a { color : #336699; }
#jk_nav ul #dropdown , ul #dropdown top transparent ; } #jk_nav ul
#dropdown transparent !important;font-weight: #jk_nav ul #dropdown 28px !important;visibility: #jk_nav ul #dropdown ul { background : url { background : normal ;height: { display : block visible ; }
ul ul { font-weight : : ( ../images/ repeat-x scroll 50% none repeat 28px !important; ;font-weight: scroll 0 0
}
normal ;height: normal ;height: 28px;left: ; width : 728px;z-index: none repeat scroll 0 0 absolute ; top : 34px; visibility #jk_nav ul #dropdown ul li { background : #000000;float: left ; font-weight : normal ; height : 28px; } #jk_nav ul #dropdown ul font-weight : normal ; } #jk_nav ul
#dropdown ul li #006699; display : inline- { background : none repeat scroll 0; position
: 9999;
}
transparent ;color: 0 0 transparent ;
a { background : none repeat scroll 0 0 transparent ; color :
block !important; font-size : 12px; font-weight : normal ;
height : 22px !important; #jk_nav ul #dropdown ul li a span
/* 最新的广告尺寸为 1000*80的大
小 */
#jk_ad_top { margin-bottom :6px; }
#jk_ad_top .main { height : 80px; background :yellow ;}
/* 给中间内容部分一个底外边距 */
#jk_body { margin-bottom :6px;} #jk_body .main { height : 800px; background :blue ; }
#jk_bottom .main { height :170px;}
/* 新加了底部主菜单的样式 */
#jk_bottom ul #dropdown_bottom { overflow : hidden ;text-align: center ; width : 100%; }
#jk_bottom ul #dropdown_bottom li { border-left : 1px solid #CCCCC;Cdisplay : inline ; padding : 0 8px; }
#jk_bottom ul #dropdown_bottom { border-left : medium none; }
二) 版权信息及联系方式等
这个应该算是最简单的了，后台 -> 扩展->模块管理-> 创建一个定制HTML 模块，命名为：底
部版权 ，并选择 jk_footer 模块位置，编辑器代码模式下插入以下代码：
<p style= "text-align: center;" >Copyright ? 2010-2011 JOOMLASKA. ll rights reserved Server.
Power by style= "text-align: center;" >邮箱： joomlasker ( at ) 本站目前 PR=4， 提供 <strong><a href= "" target= "_blank" >友情互链 </a></strong> 、<strong><a href= "" target= "_blank" >广告赞助 </a></strong></p>
<p style= "text-align: center;" ><a href= "" target= "_blank" >JOOMLA 技术支持 </a>，
客服 </p>
<p style= "text-align:
center;" ><a href= "82" target= "_blank" ><img src= "" alt= "microblog 30" width= "104" height= "20" /></a> <a href= "" target= "_blank" ><img src= ""
alt= "microblog 32" width= "104" height= "20" /></a></p> 保存后，观看一下本前的所有内容前台效果：
结束！
{ display : inline- block ;height: 22px; }
教材。