psd 转成 div+css的形式，基本操作的流程是什么，多谢

html-css018

psd 转成 div+css的形式，基本操作的流程是什么，多谢,第1张

1、如果是个别图片需要插入到网站里，可以在ps里做好后，在div里引用；

2、如果是一整张图，作为一个网站，可以在ps里，用切片工具切成一块块（尽可能的规则，需要加链接的地方，则要切成一整块），然后“保存成web所用格式”（Ctrl+Shift+Alt+S），

→ 图片显示区域，

① 预设：设置保存图片的格式

② 箭头：编辑输出设置

③ 选择“html” 格式（自动生成css代码），选择“切片”格式（自动生成table代码）

安装nodejs

打开CMD命令行工具, windows+R ==>输入 cmd 回车

输入代码: npm install -g less 回车执行, 就会安装less工具

打开webStorm, File-->Settings-->Tools-->File Watchers

右边有一列, 找到一个"+"号的图标, 点击, 选中里面的"less", 看看是不是和下图一样, 不同版本的WebStorm可能会有区别

配置PhpStorm

在PhpStorm中新建一个LESS文件，PhpStorm将提示你添加FileWatcher，或者通过Settings->Tools->File Watcher进入File Watcher界面添加一个LESS的File Watcher

添加界面如下：

我们主要修改的是Arguments和Output paths to refresh。

Arguments: --no-color --source-map=../css/$FileNameWithoutExtension$.css.map $FileName$

Output paths to refresh: $FileParentDir$/css/$FileNameWithoutExtension$.css: $FileParentDir$/css/$FileNameWithoutExtension$.css.map

最终生成的目录结构：

好了，经过这样的设置就能使用PhpStorm自动编译LESS了。