1在桌面上右键点击鼠标，出现对话框之后，点击新建2新建一个文本问档，用于写网页代码3打开记事本，现在我们就可以编写简单的HTML代码了4现在，我们把文本的命名改成1html5一个简单的HTML网页就搭建完成；2视觉稿，网页设计的内容中视觉稿阶段就是要根据原型图确定的内容和大体板式完成网站的界面设计，在网站设计的时候，需要一些图像和灵感的素材3设计规范，当视觉稿通过之后，去做设计规范具体来说一个产品的设计规范。

4初学者可以把dw设置为设计界面，方便边做边查看效果然后我们点击插入image来插入一张图片5因为是初学者，就不网页切图了我们直接把设计好的一整张网页设计稿插进来，这样就可以看到网页的效果了。

网页设计稿px转换

前端开发不包含ui设计部分，主要工作在于切图制作静态页面制作特效jqajax与后台程序结合部分网页设计一般包含整站网页视觉方案，提供PSD或PNG格式的主要页面预览图，高级一点的还会给出标准配色表，风格设计指南内含。

设计师在交付设计稿时，往往需要根据网页和移动端不同的界面开发需求，独立制作各个参数的切割图也就是切图，标注大小和间距，然后以html+css布局交付到静态页面通俗意义上说，“切图”是指将设计切割成易于制作成页面。

就是您用PS设计界面的时候，画布的宽度要大于2000px。

切片工具可以将一个完整的网页切割许多小片，以便上传是将我们设计的网页设计稿切成一片一片的，或一个表格一个表格的，这样我们可以对每一张进行单独的优化，以便于网络上的下载可以做成网格的，然后可以用dreamweaver来。

网页设计稿大小

网页设计好后的切图是将设计稿切成便于制作成页面的图片，并完成html+css布局的静态页面，有利于交互，形成良好的视觉感通俗来讲，把一张设计图利用到切片工具，把自己所需的切成一张张小图，然后用DIV+CSS完成静态页面。

这就相当于一个干脑力活，一个是干体力活，但是一个优秀的网页设计师对着两到工序都是十分了解的，因为他要知道自己的设计稿，是否会为网页制作人员制作页面带来麻烦网页制作包括两个部分1UIUser Interface，用户界面。