进入专题模式查看 >>

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

1,本节目标


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

2,将页面切割成模块


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

c计划的目标页面.png 博客页面的下部分.png

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

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

joomla判断组件输出.png

 

2.2 分隔模块位置

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

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

joomla模块分隔.png

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

2.3,给模块命名

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

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

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

评论

  • 未找到评论