用一个项目讲解网页设计流程

1、准备工作

1.1文件夹结构的准备

一半一个网页开发需要包括以下文件夹。项目文件夹（根文件夹），html文件夹，css文件夹，图片资源文件夹（一般是两个，一个是更换频率较小的背景、logo等图片，一个是更换较为频繁的商品等图片），字体资源文件夹，js文件夹。

 1.2项目资源的准备

网页前端实现的前置流程一般是由UI设计人员（美工），提供相关的ps文件和图片。我们以此为基准进行代码实现。psd格式的文件可以用photoshop打开，其内的文字字体可以直接选择。psd中的图片需要进行切图处理。切图可以用cutterman插件。

1.3字体文件的准备

字体文件包括字体和字体图标。字体图标相比图片的优势在于，可以更改大小（不失真）和颜色。

字体图标的下载网站Icon Font & SVG Icon Sets ❍ IcoMoon

优势：如果需要添加新的字体图标可以直接在网站上添加，生成新的字体文件后下载即可。

2、布局设计