6.2 当面对设计稿的时候，该如何下手

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

1，本节目标

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

2，将页面切割成模块

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

2.1 确认主要内容（组件输出部分）

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

2.2 分隔模块位置

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

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

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

2.3，给模块命名

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

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

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