教程栏目

joomla中文网出品的官方教程

当看到目标网站或者网站页面设计稿的时候,该如何下手?该如何将它转换为joomla模板呢?在这一节中我们就来讨论一下这个问题

1,本节目标


理解如何将页面按照joomla的模板机制进行划分

2,将页面切割成模块


在实际中,一个网站的设计稿肯定不是一张图的,大家要尽量找到这些页面的共同之处,将其提取出来,作为一个模块位置。为了方便,我们先从一个具体的页面设计稿开始。假设现在美工给的设计稿如下:

 

2.1 确认主要内容(组件输出部分)

通过直观的观察网页的布局,判断哪一部分是页面的主要内容。将这个部分作为组件的输出位置。这个页面主要是展示一个图文列表,如图:

 

2.2 分隔模块位置

将页面所有非主要内容进行分割,作为辅助的模块。

为了增加网站管理的灵活性,在分割模块位置的时候,模块位置可以尽量多,这样便于管理员的修改。按照上面的步骤,我们可以大概将页面分隔为如下

页脚部分的分隔就不截图了。大家可以自己做 。

2.3,给模块命名

为了便于管理,一般我们会按照实际的需要来给相应的模块取名。最终的效果如下: 

这样,我们就完成了整个页面的设计思路的转换。也就是说,我们已经成功的将普通的设计页面转换为Joomla模板的思考方式了

接下来要做的就是将这些设计进行代码实现

作者: 樱木花道

Joomla程序员,从J1.5到J4.x始终都在做Joomla相关开发定制工作,有超过10年行业经验,国内Joomla扩展开发商ZMAX团队的核心成员

作者网站:ZMAX程序人

评论 (0)

  • 最新在前
  • 最佳在前

第3章 Joomla模板机制

第13章 让模板支持多语言

第16章 结束语