web前端静态网页制作步骤

web前端静态网页制作步骤

web前端静态网页的制作流程：制作静态网页效果图——将制作好的静态网页效果图进行PS切片——使用HTML5和CSS3进行网页布局——使用JS代码制作特效——最后优化网页代码，删除冗余的文件。

第一步：制作一个静态网页之前，我们需要先制作一个网页1:1的效果图，又称静态网页效果图。制作静态网页效果图可以使用Photoshop CS4中文版制作。

第二步：将制作好的静态网页效果图进行PS切片。通过PS切片可将一张大的效果图切成多张小图片，以后可直接用在网页上。

第三步：使用HTML5和CSS3进行网页布局，网页布局遵从“先大后小，先外后里”的原则，先将整个静态网页大结构写出来，然后再按照效果图写各个部分的小版块。(这个部分需要有代码基础，可先学习HTML入门教程)

第四步：制作网页上的特效，例如轮播图，需要使用JS代码制作。再将PS切片出来的小图片通过代码插入网页中，并且使用测试数据填充各个小版块，达到与效果图一样的效果。

第五步：最后优化网页代码，删除冗余的文件，整理出一个简洁的静态网页，这样静态网页就制作好了。