Photoshop做简单的xhtml+css网页- Photoshop

当前位置: 首页 > 图文教程 > 平面设计 > Photoshop > Photoshop做简单的xhtml+css网页

Photoshop: Photoshop制作鹅卵石路面; Photoshop日月穿梭之术－日景变黄昏; Photoshop路径终极教程Ⅰ：钢笔工具和路径的概念; Photoshop路径终极教程Ⅱ：如何来控制曲线的形态(一); Photoshop路径终极教程Ⅲ：如何来控制曲线的形态(二); Photoshop路径终极教程Ⅳ：小练习:画鼠标外廓的曲线; Photoshop路径终极教程Ⅴ：曲线形态的分类:C形和S形; Photoshop路径终极教程Ⅵ：制作实例:麦当劳的标志; Photoshop路径终极教程Ⅶ：制作实例:网页中的应用(一); 如何用Photoshop制作像素化文字; 素描原理在PS鼠绘实物中的应用; Photoshop CS绘制小巧圆珠笔; 做标本浸泡罐 [1]; 做标本浸泡罐 [2]; 做标本浸泡罐 [3]; 做标本浸泡罐 [4]; 做标本浸泡罐 [5]; 做标本浸泡罐 [6]; PS与ImageReady打造动态Logo [1]; PS与ImageReady打造动态Logo [2]

技术文章搜索

关键字

出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-09-15 浏览: 495 ::

收藏到网摘: n/a

大家可能不知道，用Photoshop也可以做出简单的xhtml+css网页，一起来试试吧！

　　1、在photoshop cs2中打开设计好的网站视觉设计稿。用切片工具切好。

Photoshop做简单的xhtml+css网页
图1 用切片工具切好

　　2、点 “文件-》存储为web所用格式”，快捷键为ctrl+alt+shift+s ，点右上倒三角的小图片，选择Edit output settings。

Photoshop做简单的xhtml+css网页
图2 存为Web格式

　　3、见图，在第二个下拉中选择 Slices，选择Generate CSS ，然后在后面的下拉中选By ID。

Photoshop做简单的xhtml+css网页
图3 输出设置

　　4、点OK保存并关闭设置窗口，在Save for Web窗口中点Save按扭，在保存类型中选择Html and Images，随便输入一个文件名，点保存。

Photoshop做简单的xhtml+css网页
图4 设置5、完成任务。看一下代码，是不是xhtml+css的？

Photoshop做简单的xhtml+css网页(2)
图5 代码

　　没想到吧？这么简单就做出了个xhtml+css的页面。当然实际应用中，这种自动生成的页面还是不太规范，建议大家还是要用dreamweaver 8或者editplus调整代码。