《2022年用photoshop输出html网页 .pdf》由会员分享，可在线阅读，更多相关《2022年用photoshop输出html网页 .pdf（6页珍藏版）》请在taowenge.com淘文阁网|工程机械CAD图纸|机械工程制图|CAD装配图下载|SolidWorks_CaTia_CAD_UG_PROE_设计图分享下载上搜索。
1、1 / 6 如何用 photoshop 输出 html 网页(psd 网页模板 ) 2010-11-03 14:52 在修改好相应的文字与图象之后，我们就将PSD 文件输出 (X)HTML文件。首先得先对PSD 文件做切片，有两种方法：使用工具栏上的“ 切片工具 ” ，然后在图象上划出一块一块的区域。使用基于参考线的切片，按ctrl+R 调出标尺栏，精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 1 页，共 6 页2 / 6 把鼠标移动到标尺上，按住鼠标左键，移动到图象上，将会看到一条绿色的参考线，如图将参考线；排好，然后点一下工具栏上的切片工具图
2、表，然后点上面选项栏里的 “ 基于参考线的切片” 。于是在原来的参考线上就变成了一块一块的切片了。精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 2 页，共 6 页3 / 6 接下来就可以输出了: 依次选择菜单栏上的“ 文件 ”“存储为 Web 所用格式 ”“存储 ” 。接下来就会弹出一个“ 将优化结果存储为” 的窗口，如图在“ 保存类型 ” 处有个下拉列框可以选择，因为我们要存储为网页的格式，所以选择“HTML和图象 (* html)”， 再选择 “ 保存 ” 就可以输出一个网页格式的HTML 文件与一个包含图象的名为“images”的文件夹。精
3、选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 3 页，共 6 页4 / 6 如果我们需要输出“div+css的网页 ” 我们还可以这么做：在“ 设置 ” 处的下拉列框，选择“ 其他 ”就会弹出一个 “ 输出设置 ” 的窗口在第 2 个下拉列框处选择“ 切片 ”精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 4 页，共 6 页5 / 6 选择 “ 生成 CSS ”单击 “ 好”“保存 ” 就可以输出一个目前流行的“div+css ”的 HTML网页。其实标准的网制作完成的工作实际是：psd to html
4、，一般情况下，我们会拿到美工的psd,这时候不同的人会有不同的做法：1.打开 fireworks 将图片切割导出为html。2.直接在 dreamweaver 之类的工具去拖拉布局，导入相关的图片,flash 资源。3.先在 ps 中完成切图后，在文本编辑器中看着效果图一步步的制作。以上是大多被采用的方法，但都不好：第一种方法最为不好，这样的代码根本不具维护性和可读性。第二种方法也不好，代码难免会有冗余，做出来的东西基本需要排查一遍。第三种方法也不好，因为你需要看效果图一点点的拼，也就是说写html 标签的时候，你在不断的假设这块要怎么去显示。正确的做法是：1.拿到 psd 后，先不要做别的，
5、直接在文本编辑器中将网页的框架写出来，不要假设这块将来 css要去怎么渲染，完全自然化的标签，不加任何的css。2.写完之后在各个浏览器运行之后确保大体定位都没有问题。精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 5 页，共 6 页6 / 6 3.书写总体css,这里的 css只负责大块的定位及样式。4.切出需要的图片资源，在写好的框架中一点点的去构造，不断的调试，最终为成品。5.最后，为自己的代码添加注释，在css，html 中都要合适的为自己的代码添加注释。要想做出能灵活切换皮肤，让css主导表现，还有很多要注意的地方，但大体的流程就是这样的
6、，当然我们一开始不能直接就做到先写html，但起码要有这个意识，循序渐进。PSD 出网站从两个大点考虑一、一个独立的页面1、分析这个页面，先在脑袋中或者草稿纸上描绘大概的结构2、根据设计稿的的情况，分析背景图的分布、ICO 图的分布等3、切割相应的图片，导出、合并图片4、在编辑器中写整体结构XHTML代码，包括页面中出现的所有元素的结构5、编写 CSS 样式中的整体以及模块代码6、细节调整7、收工，浏览器验证是否正确二、由多个页面组成的小站点或者大站点1、浏览所有设计稿，统一规划站点模块、图片、文件分布2、开始第一点的操作，但规划站点的内容分布很重要整体考虑点：图片的合并，减少请求量结构的合理性，语义化样式的简洁，便于后期维护多为后期的维护以及程序开发着想，如何简单实现效果。精选学习资料 - - - - - - - - - 名师归纳总结 - - - - - - -第 6 页，共 6 页