我们很多时候知道xhtml+css 网页布局结构对网页优化有好处，但是大家可能不知道，用Photoshop也可以做出简单的xhtml+css网页，一起来试试吧！  　　1、在photoshop cs2中打开设计好的网站视觉设计稿。用切片工具切好。　　　　2、点 “文件-》存储为web所用格式”， 快捷键为ctrl+alt+shift+s ，点右上倒

步骤 11、充实内容框。 步骤 12、创建新图层，添加导航符号。最终效果如下：呵呵，感觉不错吧。

   得到如下效果： 步骤 10、为导航按钮添加标题。

得到如下效果： 步骤 8、设置棕色内容框图层样式。 

步骤 4、在背景层上方创建新图层，并用渐变工具填充该层，得到如下效果。  步骤 5、在渐变层上方创建新图层，选择云彩笔刷(没有此笔刷请上网搜索下载)，添加云彩效果。 步骤 6、选择圆角矩形工具绘制导航按钮（注意将按钮层置于棕色内容框下方）。 步骤 7、为按钮添加图层样式。 

一般我们都知道用PS设计、处理图片,其实我们完全可以来设计网页效果图，制作网页模版，然后我们再PS切片。但是有必要我们知道PS是怎么来设计网页效果图的，设计网页效果图的过程是怎么样的。其过程是重要的。下面一一道来：该网页设计教程最终结果图，设计工具是photoshop： 步骤 1、创建新画布，将树木素材置于画布左上角。步骤 2、使用圆角矩形工具在树的下方绘制一矩形框。步骤 3、绘制其他矩