joomla模板完美开发教程.doc

资源描述

Joomla模板制作实战教程【一】-创建一个简单的模板 Joomla绝对是一款优秀的CMS，相较一些国产CMS她始终不能占据优势地位，很多人说Joomla做模板难、Joomla不支持静态生成、 Joomla执行效率低等等，但其实Joomla团队为这些东西做了很多的功夫，细细研究不难发现，Joomla模板只需要会Html+CSS就行了，Joomla的静态生成其实就是System-cache(缓存插件)，当做足了优化之后，Joomla的执行效率是相当可观的，如本站www.J（优化的方法会在后面的教程中提及）话说Joomla模板难做，这是很多入门的学习者遇上的足以让他放弃Joomla的门槛，那么我要说的是Joomla模板一点不难，它的难点根本不在于“是否会PHP”，而是在于不敢钻研的心，那么为了砍掉这个所谓的“门槛”，我将为大家带来这个系列的模板实战教程。做之前我们必须要准备这几样东西！ 1 1、持之以恒的心 2 2、必要的HTML+CSS基础知识 3 3、熟悉了Joomla的使用方法、工作原理 4 4、一丝不苟的工作态度。 5 5、认认真真的看好教程，不要急着复制粘贴。开始我们的模板制作（以Joomla 1.5.x为例，完结之后会推出Joomla 1.7.x相关教程）安装好Joomla 1.5.x，在templates/目录下建立一个我们要制作的模板文件夹，命名为jk_joomlask，这时候在后台我们尚且看不到有jk_joomlask的这个模板选项。 *Joomla网站系统是基于utf-8编码编写的，所以以下所有操作的文件都务必保存为utf-8编码。第一步我们需要让其在Joomla后台中显示这个模板选项，创建文件templateDetails.xml，不要担心会不会xml，很简单，根据官方文档给出的说明，照着写便是： <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">  <install version="1.5" type="template">  <name>JK JOOMLASK</name>  <creationDate>2011-09-05</creationDate>  <author>Joomlasker</author>  <authorEmail>joomlasker(at)</authorEmail>  <authorUrl></authorUrl> <copyright>JOOMLASK 2011</copyright> <license>GNU/GPL</license> <version>1.0.0</version>  <description>JOOMLASK</description>  <files>  <filename>index.php</filename> <filename>templateDetails.xml</filename> </files>  <positions> <position>top</position> <position>bottom</position> </positions> </install> 请细心看看上述文档，即是官方文档的标准设置这时候我们进入后台，可以看到JK JOOMLASK的模板已经出现了（如下图：）这时候可以将JK JOOMLASK设为默认，但保存后前台会显示一片空白。第二步，我们要让这个模板在前台能显示内容  <?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head>  <jdoc:include type="head" />  <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/jk_joomlask/css/template.css" type="text/css" /> </head> <body>  <jdoc:include type="modules" name="top" />  <jdoc:include type="component" />  <jdoc:include type="modules" name="bottom" /> </body> </html> 普及一下PHP的简单知识，<?php echo "打印内容" ?>，就是我们所熟知的程序基本打印功能，示例即是打印出隐号部分内容，那么上述index.php中的 <?php echo $this->baseurl ?> 便是打印当前网站的绝对路径， <?php echo $this->language; ?> 的意思便是当前网站的语言设置，如果我们在后台设置的网站前台语言为中文，那么通过浏览器查看源码得到的就是<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-cn" lang="zh-cn" >。回到正题，index.php中，我们创建了top和bottom的两个模块位置，格式：<jdoc:include type="modules" name="top" />，这里的top和bottom就是我们在templateDetails.xml预设的位置配置，另外还创建了一个非常重要的组件，那就是 Joomla的基本组件：文章格式如：<jdoc:include type="component" />，大部分新手忽略了这个从而测试的时候发现不了文章内容。保存好文件之后，刷新前台，即可看到被设定位frontpage的文章了！如下图，虽然难看了点： Joomla模板制作实战教程-创建各种模块位置 2011-09-27 22:22 在上一节(Joomla模板制作实战教程【一】-创建一个简单的模板 )中我们创建了一个非常简单的模板，包含了默认的文章组件、top和bottom两个模块位置。虽然看起来比较不养眼，但是我们掌握了Joomla模板的一个基本结构，这节我们要针对一个设计完整的设计稿进行规划。首先需要解释一下“模块位置”的概念。之前做的一些开发分享，总是会碰到一些似乎入门的朋友容易把模板和“模块”当成两回事，所以有必要把它们的概念讲清楚，Joomla的模板其实就相当于一个白纸，你需要在上面画上各种具体对象，它才能成为一真正模板，而我这里说的具体对象，不仅仅包括文章内容，它主要各种模块，诸如你看到的一条一条的新闻列表、排列整齐的图片列表、带输入用户名密码的登陆区域。他们构成了一个真正的模板。所以当你下载了一个新的纯模板，它安装在Joomla系统之后，是看不到你所看到的模板样子，它需要各种模块去、组件内容（如文章内容）填充这张空白的纸，模块又是组件的另一种表现形式。便于大家理解，请看下图那么看了上图之后，我们就知道模块的重要性了，它的意义在中式网站上甚至大于组件内容，理论上来说，一个JOOMLA网站可以由N个模块组成，却不需要组件内容，当然这没什么意义。第一步：我们需要针对一个完整的设计稿做出规划此次制作模板是以J为例，所以把很中式的Joomlask设计稿拿出来，针对设计稿，我们把Joomlask的设计稿划分为以下模块位置 jk_logo 设计为LOGO位置 jk_adtop 设计为网站最顶部广告位置 jk_headinfo 设计为顶部右上角信息位置 jk_mainmenu 设计为主菜单位置 jk_adlong 设计为整条横幅广告位置 jk_left 设计为左边模块位置 jk_right 设计为右边模块位置（仅子页显示） jk_user1, jk_user2, jk_user3, jk_user4, jk_user5, jk_user6, jk_user7, jk_user8 设计为图中分别指定位置，可以放一些通用的内容 jk_admid_1,jk_admid_2设计为网站中部的两个广告位 jk_link 设计为底部友情链接位置 jk_bnav 设计为底部菜单 jk_footer 设计为底部综合信息 compontent 就是组件内容的位置（本演示设计为仅子页显示）第二步：根据规划的模块位置将其编写到模板中打开文件templates/jk_joomlask/templateDetails.xml填写代码 <?xml version="1.0" encoding="utf-8"?> <!DOCTYPE install PUBLIC "-//Joomla! 1.5//DTD template 1.0//EN" "http://www.joomla.org/xml/dtd/1.5/template-install.dtd">  <install version="1.5" type="template">  <name>JK JOOMLASK</name>  <creationDate>2011-09-05</creationDate>  <author>Joomlasker</author>  <authorEmail>joomlasker(at)</authorEmail>  <authorUrl></authorUrl> <copyright>JOOMLASK 2011</copyright> <license>GNU/GPL</license> <version>1.0.0</version>  <description>JOOMLASK</description>  <files>  <filename>index.php</filename> <filename>templateDetails.xml</filename> </files>  <positions> <position>jk_logo</position> <position>jk_adtop</position> <position>jk_headinfo</position> <position>jk_mainmenu</position> <position>jk_adlong</position> <position>jk_left</position> <position>jk_right</position> <position>jk_user1</position> <position>jk_user2</position> <position>jk_user3</position> <position>jk_user4</position> <position>jk_user5</position> <position>jk_user6</position> <position>jk_user7</position> <position>jk_user8</position> <position>jk_admid_1</position> <position>jk_admid_2</position> <position>jk_link</position> <position>jk_bnav</position> <position>jk_footer</position> </positions> </install> 这时候神奇的事情发生了，我们回到后台，扩展->模块->创建一个新模块（以mod_custom）为示例，在选择模块位置的时候我们就看到了刚才规划的这些模块位置了第三步：在模块文件index.php中调用安装模块位置当然完成第二步之后，有的同学肯定迫不及待的测试?tp=1了，第二步仅是让其在后台可显示，现在我们开始安装这些预设的模块位置：打开/templates/jk_joomlask/index.php，编写如下代码： <?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/mynewtemplate/css/template.css" type="text/css" /> </head> <body> <jdoc:include type="modules" name="jk_logo" /> <jdoc:include type="modules" name="jk_adtop" /> <jdoc:include type="modules" name="jk_headinfo" /> <jdoc:include type="modules" name="jk_mainmenu" /> <jdoc:include type="modules" name="jk_adlong" /> <jdoc:include type="modules" name="jk_left" /> <jdoc:include type="modules" name="jk_right" /> <jdoc:include type="modules" name="jk_user1" /> <jdoc:include type="modules" name="jk_user2" /> <jdoc:include type="modules" name="jk_user3" /> <jdoc:include type="modules" name="jk_user4" /> <jdoc:include type="modules" name="jk_user5" /> <jdoc:include type="modules" name="jk_user6" /> <jdoc:include type="modules" name="jk_user7" /> <jdoc:include type="modules" name="jk_user8" /> <jdoc:include type="modules" name="jk_admid_1" /> <jdoc:include type="modules" name="jk_admid_2" /> <jdoc:include type="modules" name="jk_link" /> <jdoc:include type="modules" name="jk_bnav" /> <jdoc:include type="modules" name="jk_footer" /> </body> </html> 好了，请前往你的网站前台测试吧，在URL最后面，如：到这里我们创建了很多胀眼的模块位置，有的同学可能会问了，怎么又是没内容，这简单，我们就来填充一个模块内容，就以mod_custom模块为例，后台->扩展->模块->创建一个定制html模块（mod_custom），在定制HTML模块中我们输入任意内容，模块位置就选择第一个jk_logo，保存好创建的模块。保存之后我们前台刷新如下： Joomla模板制作实战教程-美化我们的模板【一】 2011-10-21 16:44 上一节（Joomla模板制作实战教程-创建各种模块位置）中我们学了关于在模板中制作各种模块位置，作为模板的骨架，模块位置的外观自然占有很重要的分量。当然制作模板首先最重要的一门知识就是前端制作（HTML＋CSS）在这里一些HTML+CSS的细节性知识就不多阐述了，首先我们要明确整个站点的前端框架，完了我们再针对模块位置进行制作。首先创建好整站的前端框架及基础样式根据上一节中提供的设计稿模块规划，我们将前端分为5个部分，分别是：jk_header(头部）、jk_nav（菜单）、jk_ad_top（设计之初是考虑这里放置多个广告）、jk_body（内容主体部分）、jk_bottom（底部），我们将这5个部分制作在index.php中打开/templates/jk_joomlask/index.php，编写如下代码： <?php defined( '_JEXEC' ) or die( 'Restricted access' );?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/jk_joomlask/css/template.css" type="text/css" /> </head> <body> <div id="jk_wrapper"> <div id="jk_header"> <div class="main"> <jdoc:include type="modules" name="jk_logo" /> <jdoc:include type="modules" name="jk_adtop" /> <jdoc:include type="modules" name="jk_headinfo" /> </div> </div> <div id="jk_nav"> <div class="main"> <jdoc:include type="modules" name="jk_mainmenu" /> </div> </div> <div id="jk_ad_top"> <div class="main"> <jdoc:include type="modules" name="jk_adlong" /> </div> </div> <div id="jk_body"> <div class="main"> <jdoc:include type="modules" name="jk_left" /> <jdoc:include type="modules" name="jk_right" /> <jdoc:include type="modules" name="jk_user1" /> <jdoc:include type="modules" name="jk_user2" /> <jdoc:include type="modules" name="jk_user3" /> <jdoc:include type="modules" name="jk_user4" /> <jdoc:include type="modules" name="jk_user5" /> <jdoc:include type="modules" name="jk_user6" /> <jdoc:include type="modules" name="jk_user7" /> <jdoc:include type="modules" name="jk_user8" /> <jdoc:include type="modules" name="jk_admid_1" /> <jdoc:include type="modules" name="jk_admid_2" /> </div> </div> <div id="jk_bottom"> <div class="main"> <jdoc:include type="modules" name="jk_link" /> <jdoc:include type="modules" name="jk_bnav" /> <jdoc:include type="modules" name="jk_footer" /> </div> </div> </div> </body> </html> 然后我们要给这些前端框架一些外观样式打开文件/templates/jk_joomlask/css/template.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 significant part. -------------------------------------------------------------------------*/ /*--------------*/ body{background:#fff;color:#000;font-family:Tahoma, Geneva, sans-serif;line-height:1.5;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 1.5自带的广告管理），将我们设计好的广告图片上传至/images/banners/ad_top_1.jpg 进入后台->旗帜广告->分类管理->创建一个新的广告分类，定名为“JOOMLASK”，再回到旗帜广告->客户管理->创建一个新的客户，定名为“JOOMLASK” 回到旗帜广告->广告管理->创建一个新的广告，名称设置为“头部中间广告”,分类和客户设置为“JOOMLASK”，广告URL设定为，广告图片选择我们刚才上传的广告ad_top_1.jpg 广告创建结束后，模块中并未显示，所以我们再回到扩展->模块管理->创建一个旗帜广告模块模块位置选择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=" target="_blank"><img src=" alt="button_temp_03" width="123" height="26" /></a>&nbsp;&nbsp;<a href=" target="_blank"><img src=" alt="button_temp_05" width="123" height="26" /></a></p> 创建定制HTML模块就不多说了，同第一步创建LOGO模块一样那么这时候jk_header的这三个模块没有实质样式，再打开/templates/jk_joomlask/css/template.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 significant part. -------------------------------------------------------------------------*/ /*--------------*/ body{background:#fff;color:#000;font-family:Tahoma, Geneva, sans-serif;line-height:1.5;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:60px;} #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' );?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" > <head> <jdoc:include type="head" /> <link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/jk_joomlask/css/template.css" type="text/css" /> </head> <body> <div id="jk_wrapper"> <div id="jk_header"> <div class="main"> <div class="jk_logo"><jdoc:include type="modules

展开阅读全文