下载掌阅APP，畅读海量书库
立即打开
收到一个网页效果图后不要急于开始制作，要先进行分析和规划，分析好了，后期的制作会很轻松。
制作前先建立好几个文件夹，通常文件夹images存放切好的网页图片，文件夹pic用于存放临时图片，文件夹css用于存放CSS文件，文件夹js用于存放JavaScript文件。
网页都是由一个个的小模块组成的，对于一个页面，如果它的页面结构和表现有很多统一和相似的地方，便可以运用网页模块化来制作页面，省去重复劳动。如图1.1所示的是划分模块前的原始页面。
图1.1 划分模块前的原始页面
如图1.2所示是划分模块后的页面。
图1.2 划分模块后的页面
网页上表现相同或相近的区域能提取出可以重复使用的CSS样式，就是CSS模块化。如图1.3所示，①②③④区域的XHTML结构和CSS样式都一样，不同的只是④区域的新闻条目是3条，而其他①②③区域是5条。
图1.3 对页面划分模块
CSS模块化对于大型网页制作，尤其门户类首页是很实用的一个技巧。
根据图1.3所示，编写代码1-1。
代码1-1
红色块①②③区域的XHTML代码如下：
01 <div> 02 <ul class="newlist-1"> 03 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 04 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 05 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 06 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 07 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 08 </ul> 09 </div>
红色块④区域的XHTML代码如下：
01 <div> 02 <ul class="newlist-1"> 03 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 04 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 05 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 06 </ul> 07 </div>
红色块区域的CSS代码如下：
01 .newlist-1{padding:10px;font-size:14px;}
02 .newlist-1 li{height:22px;line-height:22px;overflow:hidden;background:url(../images/dot.gif)
no-repeat left center;}
03 .newlist-1 li a{color:#C2C2C2;}
04 .newlist-1 li a:hover{color:#C2C2C2;text-decoration:none;}
红色块④区域的XHTML代码只比红色块①②③区域的XHTML代码少了两行li标签，而CSS样式newlist-1可以重复使用。
用class组合就是一个XHTML模块的表现样式用几个class样式组合在一起实现，而少用class继承，这样可以有效减少CSS样式的重复编写，可减少代码量，既提高开发效率又提高页面性能。
将代码1-1优化一下，变为如代码1-2所示。
代码1-2
①②③区域的XHTML代码如下：
01 <div> 02 <ul class="newslist-1 p10 fs12"> 03 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 04 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 05 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 06 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 07 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 08 </ul> 09 </div>
④区域的XHTML代码如下：
01 <div> 02 <ul class="newlist-1 p10 fs12"> 03 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 04 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 05 <li><a href="#" target="_blank">MINI再度联手，邀请狗狗开汽车</a></li> 06 </ul> 07 </div>
图1.3中加框区域的CSS代码如下：
01 .p10{padding:10px;}
02 .fs12{font-size:14px;}
03 .newlist-1{ }
04 .newlist-1 li{height:22px;line-height:22px;overflow:hidden;background:url(../images/dot.gif)
no-repeat left center;}
05 .newlist-1 li a{color:#C2C2C2;}
06 .newlist-1 li a:hover{color:#C2C2C2;text-decoration:none;}
将.newlist-1中的padding和font-size拆分到另外两个样式中，这样如果将来红色块①②③④中任意一个区域需要修改字体或边距都可以轻松修改。
“切图”是制作网页必不可少的一个环节。所谓切图，就是把视觉设计师给的网页效果图切成一块一块的小图片供制作时使用，这些小图片也被称为“切片”。一般切图软件有Photoshop、Fireworks等。
切图的原则是尽量使切片最简单，面积最小，并且一个模块能在高度和宽度上自由伸缩。
切图技巧主要有以下几点：
（1）颜色渐变或图案重复的图片只需切其中任意一块重复的区域。
（2）反之，颜色不是渐变，没有重复图案或不是纯色的图片将其整体作为一个切片。
（3）能用CSS的background-color属性显示的尽量不用图片。
（4）切图的时候将网页效果图放大，切片边缘精确到一个px，否则达不到网页与效果图一致的目的。