| 网站首页 | 文章中心 | 电子书下载 | 矢量图库 | 视频教程 | 素材下载 | 程序代码下载 | JS代码 | 论坛 | 
常用软件类:
|杀毒安全 |联络聊天 |网络软件 |多媒体类 |系统工具 |图形图像 |系统工具 |应用软件 |行业软件
开发设计类:
|动画制作 |图像处理 |3D设计 |操作系统 |站长学院 |网络相关 |WEB设计 |数据库类 |程序开发
joomla模版制作过程

作者:未知    文章来源:网络    点击数:    更新时间:2007-9-24
收藏此文到百度搜藏 百度搜藏| 新浪VIvi| 365key| Younote| 搜狐 | 博采中心| 你好BLOG| 亿友网摘| 网摘博客| POCO网摘| 和讯网摘|
  一直想写一篇关于Joomla模版制作的一个通行教程,最近正好在编辑一个新模版就以此为例讲述新手如何学习和制作Joomla的模版。
       一般来说制作模版首先要有个总体观念,我们可以使用photoshop、fireworks等平面软件先整体构思一个设计方案的平面图来。以下我需要设计一个展览行业的站点,我首先用fireworks来设计了一张平面的效果图如下图:

joomla模版制作

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

joomla模版制作


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

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

joomla模版制作


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

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

joomla模版制作


转换步骤:
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达到显示效果
  • 上一篇文章:

  • 下一篇文章: 没有了
  • 相关文章