V5Shop 模板制作流程说明

来自站长百科
跳转至： 导航、​ 搜索

导航: 上一页

模板制作和一般的网站制作的流程基本差不多，先在图像处理软件中把效果图作出来，然后切图，写代码，根据所要实现的功能把标签插入到页面。

  • 进行网页框架布局

下面的一张图是威博行业模板首页效果图，那么当得到了这样一张效果图以后改从何下手呢？

首先是网页框架结构的分析，这个确定以后，就可以进行网页的布局。

V5Shop TemplateFlows1.gif

从效果图横向来看，这个页面的主体部分是左右结构；从效果图纵向来看，头部、中间、底部是比较规整的结构。据此分析，就可以大致把页面做一个划分。当然，这部分工作和制作其他网站是一样，都需要对网页的结构进行分析，这样才能对页面进行布局，对于有经验的网页制作者来说这部分工作应该是轻车熟路的。这下面是搭建框架的代码(CSS部分另行编写，这里不探讨CSS部分) 

<div class="top">这里放置顶部的菜单和搜索</div>
<div class="middle1"> 这里放置广告和公告</div>
<div class="middle2">
<div class="middle2_LEFT">这里放置分类</div>
</div>
<div class="bottom">这里放置底部的信息</div>

下图是页面布局的示意图

V5Shop TemplateFlows2.gif


  • 确定需要使用哪些功能

首页的布局完毕以后，就要把具体要实现的功能摆放在一定的位置了，下图就是功能分析图，根据页面的不同功能来选择不同的功能名

V5Shop TemplateFlows3.gif
  • 让这些功能实现出来

确定了使用哪些功能是不够的，因为功能必须要通过外观文件表现出来。运用标签来实现功能： 

<div class="top">{web_skin_头部标签}</div>
<div class="middle1">
<div class="middle1_LEFT">{web_skin_ 广告标签}</div>
<div class="middle2_right"& gt;{web_skin_公告标签}</div>
</div>
<div class="middle2">
<div class="middle2_LEFT">{web_skin_ 分类标签}</div>
<div class="middle2_right">
<div class="middle2_RIGHT_TOP">{web_skin_ 商品标签1}</div>
<div class="middle2_right_BOTTOM">{web_skin_商品标签2}</div>
</div>
</div>
<div class="bottom"& gt;{web_skin_底部标签}</div>

相关条目[ ]

参考来源[ ]

取自“https://www.zzbaike.com/wiki/V5Shop_模板制作流程说明?oldid=51818”