根据设计图生成html?
发布网友
发布时间：2024-09-27 00:04
共1个回答
热心网友
时间：2024-10-31 23:25
做好的网站效果图导入到PS里，用切片工具把需要单独放置的图片一块一块切出来，切好之后，选择存储为web所用格式，保存时可以选择同时保存图片和html，这样之后会自动生成出一个和效果图一样的网页，方便修改。然后跟后台做好对接，网站就完成了。
修改建议：
1、保存后的网页是table自动布局，建议前端技术修改成div+css。特效部分可以用jquery或H5+CSS3技术实现。
2、有文字部分，建议使用网页文字，不要使用切好的图片。图片组合，建议用div+无序列表实现，纯大图会影响网页加载。
咋样将设计图转化成HTML页面现在好多软件可以设计图直接转代码的，像蓝湖。
设计师做好ui设计图之后直接上传上去就可以，设计稿一件转代码，工程师直接复制去用就行。完全不用自己手动画静态页面。
如何把美工的设计图转换成HTML5的界面
这是web前端开发的工作，
首先用ps将设计图中需要用到的图片或者图标切片取下
然后通过htmlcssjs按照设计图用代码还原
当然你也可以下个Dreamweaver最新版的有那种可以一键导出页面，不用你写代码，不过很是很方便用，
如何将一张美工设计图实现为html编码的网页首先得用photoshop切图，把你需要的地方切成图片，最好是jpg或者jpeg格式的，
然后用MacromediaDreamweaver8设计网页，用代码编辑，把你需要的图片部分插进去就可以了
怎样可以把一个PSD格式的设计图很快速地变成一个HTML网页呢?使用Photoshop的切图工具，将图片切分为不同的小图片，然后导出，导出时选择HTML和图片
ps做出来的图片如何生成html代码ps做出来的图片生成html代码方法
工具/原料
ps工具
方法/步骤
打开ps软件，选中要转换成html静态页的图片，这边就以百度经验的页面为例！
1、打开百度经验页面的保存为一张图片；看清楚是图片是jpg的；用ps打开这张图片，如图；
2、下面就开始操作；html静态网页一般都是图片、文字和效果组成的，这边主要是教用ps生成html静态页，就是把图片转换成静态页；因为网页为了保证网速都不会把图片裁减的太大，所以这边就按照正常的图片切图片；
3、首页选择“切片工具”，如果没有就右击工具那边的右下角箭头，选择切片工具；
4、选好工具就可以开始切图，切图就是把一张大的图片切成小的图片，记住一定要保证小图拼起来和原图一样，这就要求切图的时候线最好对其，不然会看的错位；先把图片切割成几条长条图；
5、切完图片，右击菜单栏“文件——选择存储为web和设备所用格式”；弹出“存储页面”；点击“存储”；
6、接下来才是重点，切记不要按步就直接保存；点击下面的“格式”，选择“html和图像”；然后保存；
7、保存以后就生成了image文件和html页面两个文件夹，然后点html那个页面；
8、打开以后是不是发现和图片一样，而且是代码格式的静态页；
