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