如何用photoshop输出html网页(psd网页模板)

1、中的一模板为例如何用photoshop 输出html网页（psd网页模板） 本次教程就以 /mb/200701/50.html 使用工具：photoshop 8.0.1点击下载彳戛板王con下载后解压，打开 PSD文件。複棱王亡萌；打开0）溢解压文件 倉解压到当前文件萸QL）洒解压到2007010G4V磴） 打开方式发送劉班）勢切呈制创建快捷方式 删除 重命名（M）w 雇性（|200701004subOl在修改好相应的文字与图象之后，我们就将PSD文件输出（X）HTML文件首先得先对PSD文件做切片，有两种方法: 使用工具栏上的切片工具”，然后在图

2、象上划岀一块一块的区域。 使用基于参考线的切片，按ctrl+R调出标尺栏,iser ID把鼠标移动到标尺上，按住鼠标左键，移动到图象上，将会看到一条绿色的参考线，如图将参考线；排好，然后点一下工具栏上的切片工具图表，然后点上面选项栏里的基于参考线的切片”。于是在原来的参考线上就变成了一块一块的切片了接下来就可以输岀了 ：依次选择菜单栏上的 文件”-存储为Web所用格式”f“储接下来就会弹出一个将优化结果存储为”的窗口，如图在保存类型”处有个下拉列框可以选择，因为我们要存储为网页的格式，所以选择“HTML和图象(* html)，”再选择 保存”就可以输出一个网页格式的HTML文件与一个包含图象的

3、名为“images的文件夹。L-fTfflL 如果我们需要输出“div+css的网页我们还可以这么做:在 设置”处的下拉列框，选择 其他”目定 背昌图像XHTML就会弹岀一个输岀设置”的窗口设這:广输岀XTfTML-榕式化标签大小耳：何、写fbodyJ二!雇性大小垢：环写仗呼span)編进：|制表符行皓尾:二!編碍：自动広M312)好I取消|上一个()| 下 伞 | 载入空| 存储7包含注釋P总呈慕口 Alt属性总星肯属性加上引号r结東所有标怛7在正文标记中包含零边距在第2个下拉列框处选择切片选择生成CSS33F1C生成表格空单云格:|GirWAHTE waff：隔分隔符单元格：|自动（底部）

4、参考：单击好”t保存就可以输出一个目前流行的div+css的HTML网页。其实标准的网制作完成的工作实际是：psd to html , 一般情况下，我们会拿到美工的psd,这时候不同的人会有不同的做法：1. 打开fireworks 将图片切割导出为 html。2. 直接在dreamweaver之类的工具去拖拉布局，导入相关的图片,flash资源。3. 先在ps中完成切图后，在文本编辑器中看着效果图一步步的制作。以上是大多被采用的方法，但都不好：第一种方法最为不好，这样的代码根本不具维护性和可读性。第二种方法也不好，代码难免会有冗余，做出来的东西基本需要排查一遍。第三种方法也不好，因为你需要看效

5、果图一点点的拼，也就是说写html标签的时候，你在不断的假设这块要怎么去显示。正确的做法是：1. 拿到psd后，先不要做别的，直接在文本编辑器中将网页的框架写岀来，不要假设这块将来css要去怎么渲染，完全自然化的标签，不加任何的css。2. 写完之后在各个浏览器运行之后确保大体定位都没有问题。3. 书写总体css,这里的css只负责大块的定位及样式。4. 切岀需要的图片资源，在写好的框架中一点点的去构造，不断的调试，最终为成品。5. 最后，为自己的代码添加注释，在css , html中都要合适的为自己的代码添加注释。要想做岀能灵活切换皮肤，让 css主导表现，还有很多要注意的地方，但大体的流程就是这样的，当然我 们一开始不能直接就做到先写 html，但起码要有这个意识，循序渐进。PSD出网站从两个大点考虑一、一个独立的页面1、分析这个页面，先在脑袋中或者草稿纸上描绘大概的结构2、 根据设计稿的的情况，分析背景图的分布、ICO图的分布等3、切割相应的图片，导岀、合并图片4、在编辑器中写整体结构 XHTML代码，包括页面中出现的所有元素的结构5、编写CSS样式中的整体以及模块代码6、细节调整7、收工，浏览器验证是否正确二、由多个页面组成的小站点或者大站点1、浏览所有设计稿，统一规划站点模块、图片、