0.从图说起

当从设计师手里拿到确定后的PSD源文件后，就可以进行切图这一步工作了，目的是完美实现页面效果形成代码文件，如下图所示是一个概括的流程：

WPCMS在切图这个过程中会和其他的项目略有所不同之处。可以看到效果图中的内容是填满的，是一个完整的最终网站显示效果。而在切页面的时候不需要把用户数据内容部分做出来，只需做一个页面的框架，页面完成后在设计后台进行嵌套即可。

如上图中所标记的，写有module的区块就是栏目区块，栏目都有默认样式（如若另有需求可后期进行覆盖）。

1.HTML

1.1 首页

如图所示：一个设计图到手后先做一个区块划分，按逻辑大概可以分为图中所示四个大块——topBar、header、content、footer。其中的header和footer可以做成库模板（由于topBar里有站内搜索栏目，而我们的系统库模板无法读取栏目，所以不能放在库模板里）。

形成的html文件如下（这是折叠后的代码）：

1是IE6浏览器提示信息，此处内容已放入系统页面中。

2是页面结构主体部分，与上文设计图所划分的结构一样，加上适当的注释方便后期的工作及修改维护。

此处还有几点说明：

A、所有需嵌套内容放在2中。

B、由于系统文件页面中未引用mystyle.css文件，所以此文件引用放在2中。

 

下面是一个具体的栏目结构：

A、Module标识为一个栏目，通常样式设为position:relative;方便“更多”的定位；

B、可以写一个对应的栏目名，这里为中文拼音首字母简写，例如tzgg；

C、此结构包含hd和bd两部分，hd中放栏目名，bd中放栏目内容；

D、Model用于方便嵌套的修饰类，外加样式不要再写在这个类上；

E、标明栏目宽度，方便嵌套（图文类栏目需标明图片大小）。

PS：如果是图文翻动栏目可直接省去hd和bd两部分，如：

 

1.2 更多页

更多页使用一套模板，大概会分成如上图所示的三部分：

面包屑导航、侧边栏和更多页栏目

面包屑可嵌套，留有位置即可。

侧边栏有时除了导航外还有一两个栏目，通常更多页的侧边导航会做成库模板。

3中需获取更多栏目名。

 

1.3 新闻页

新闻页有如上图中的5部分构成，每部分都可嵌套留有位子提供嵌套即可，每部分都有部分的默认样式，可进行覆盖。

2.CSS

尽量用外联样式文件，不要写内联样式和行内样式。WPCMS门户网站的样式右三个样式文件构成：public.css、bigClass.css和mystyle.css。

public.css为基础样式文件，默认集成到系统里，一般不做处理，嵌套时亦无需引用。此文件包含normalize.css、工具类（包括浮动和清除浮动、文本隐藏和对齐及间距类）、全局样式的重置（包括字体颜色和链接）和IE6的提示信息。

bigClass.css文件为系统栏目样式文件，默认集成到系统里，一般不做处理，嵌套时亦无需引用。

mystyle.css通常存放页面样式，每个部分的样式都做一个注释方便后期维护修改。

 

3.JS

JavaScript选用的框架为jQuery，目前在使用的版本为v1.10.1。此文件已放在系统中，嵌套时无需再次引用。

所有代码都写在myscript.js中，其中包括一些长期积累的一些功能（包括tab切换、获取更多页栏目名、菜单导航的选中状态及日期等）

4.后期修改维护

上传css文件的方法（请先在本地文件上修改，改完后通过wpdcc后台上传样式等，并提交SVN。

图片和js上传方式同理。图片和flash的上传默认路径为images文件夹。注意：默认上传路径和文件所在路径是否相同，避免产生文件覆盖）：

1、进入wpdcc后台（IP地址:端口/wpdcc/login.aspx）

2、点击频道页模板其中一个

3、点击“添加模板”按钮——点击图中“CSS”按钮

4、点击“上传”按钮，选择本地的样式文件，上传成功后会出现弹出框，文件自动会添加到/Images/pageItem/template/css下，如果文件名相同会自动替换成新上传的

 

5.附言

此文档只做基本的符合wpcms产品特性的切图思路，不谈具体的实现技术，以上所写不是一成不变的，随着产品的迭代可以做相应的修改。