joomla模版制作过程（上手篇）

上一篇 / 下一篇 2007-04-01 16:27:34 / 个人分类：joomla

一直想写一篇关于Joomla模版制作的一个通行教程，最近正好在编辑一个新模版就以此为例讲述新手如何学习和制作Joomla的模版。
一般来说制作模版首先要有个总体观念，我们可以使用photoshop、fireworks等平面软件先整体构思一个设计方案的平面图来。以下我需要设计一个展览行业的站点，我首先用fireworks来设计了一张平面的效果图如下图：

有了一个整体的设计思路之后我们可以通过辅助线和裁减，将其完整的用HTML来显现出来，当然这时候可以不是很完美的可以仅仅作为一个框架：

当用HTML完整的实现了我们先前的设计思路之后，接下来的工作就是如何将HTML转换到JOOMLA的PHP模版中，为了让我们的工作确保无误，刚开始的时候可以打开一个JOOMLA的范例模版做比较。1.0.X版本中的rhuk_solarflare_ii模版是官方非常规范的一个模版，这时候可以打开rhuk_solarflare_ii模版文件夹中的index.php文件对照来转换我们的HTML文件模版。

这里需要说明的是JOOMLA模版文件夹中的各个文件和文件夹的用处：

CSS:                        用来存储模版的CSS文件
IMAGES:                 用来存储模版的图片文件
index.php               模版文件
template_thumbnail.png    模版的缩略图
templateDetails.xml            模版安装的XML文件

明白以上文件夹的结构，接下来要做的事情就是将原来HTML---->转换到 JOOMLA的PHP模版中，比较两个模版（HTML已经设计好的）、（rhuk_solarflare_ii）

转换步骤：
1.HTML另存为PHP，并且新建CSS文件夹，将rhuk_solarflare_ii中的CSS复制过来
2.将HTML头部代码用以下代码替换：

<?php
defined( '_VALID_MOS' ) or die( 'Restricted access' );
// needed to seperate the ISO number from the language file constant _ISO
$iso = explode( '=', _ISO );
// xml prolog
echo '<?xml version="1.0" encoding="'. $iso[1] .'"?' .'>';
?>
<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; <?php echo _ISO; ?>" />
<?php mosShowHead(); ?>
<?php
if ( $my->id ) {
initEditor();
}?>
<link href="<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/css/template_css.css" rel="stylesheet" type="text/css"/>
</head>

修改其中CSS的路径

3.HTML文件中的图片地址均转换为：

<?php echo $mosConfig_live_site;?>/templates/rhuk_solarflare_ii/images/advertisement.png

类似地址

4.增加模块位置，在需要的地方增加如：<?php mosLoadModules ( 'user1', -2 ); ?>、<?php mosLoadModules ( 'left', -2 ); ?>、<?php mosMainBody(); ?>等等，具体位置模块的参数含义可以参考下边的文章

5.安装模版文件调整CSS达到显示效果

参考文章：模版位置模块参数含义
CSS定义

写的比较匆忙，很多地方都是大概说了一下，大家看了有什么建议和补充欢迎提出来！

导入论坛引用链接收藏分享给好友管理举报

TAG: 网管资料 joomla