如何用ps制作网页首页

很建议这么做，用photoshop做出效果图后用切片工具切割网页生成素材。

这样做的好处是

利于排版布局，单凭心里想到哪就做到哪很难做出好看的网页；

各种绚丽的效果在不同浏览器下都是一样的可以显示，有很好的兼容性（相对于借助代码实现诸如发光阴影等效果，在不同浏览器或不同版本的同一浏览器下差别很大，如火狐-chrome-ie6-ie8），虽然有人说这样可能会加重服务器的负担，但实际上这是最有效也是最通用的做法（你可以看看现在的各个好看的网站，都是一个一个的拼接起来的，代码实现的效果反而很少，虽然这可能比较“高科技”）

你可以去网上下些模板看看，一个网站首页应该包括banner（网站最上面的部分）,然后是menu(主菜单),然后就是一个个的box(模块)，只要ps不是很烂，应该没问题用ps可以把一个网页切片后导入dreamweaver，这样就形成了html格式的网页了！用ps做主页，也是先用ps把主页画好，布局好，在导入dreamweaver（导出html和图像）后，就变成html格式的主页了

1
使用工具栏上的“切片工具”
2
然后在图象上划出一块一块的区域。
3
使用基于参考线的切片，按ctrl+R调出标尺栏
4
把鼠标移动到标尺上，按住鼠标左键，移动到图象上，将会看到一条绿色的参考线，如图
5
将参考线；排好，然后点一下工具栏上的切片工具图表，然后点上面
选项栏里的“基于参考线的切片”。于是在原来的参考线上就变成了一块一块的切片了。
6
接下来就可以输出了:
①依次选择菜单栏上的“文件”→“存储为Web所用格式”→“存储”。
②接下来就会d出一个“将优化结果存储为”的窗口，如图
7
在“保存类型”处有个下拉列框可以选择，因为我们要存储为网页的格式，所以选择“HTML和图象( html)”，再选择“保存”就可以输出一个网页格式的HTML文件与一个包含图象的名为“images”的文件夹。
8
如果我们需要输出“div+css的网页”我们还可以这么做：
在“设置”处的下拉列框，选择“其他”
9
就会d出一个“输出设置”的窗口
10
在第2个下拉列框处选择“切片”
11
选择“生成CSS”
12
单击“好”→“保存”就可以输出一个目前流行的“div+css”的HTML网页。

我的建议是，首先你要对PS的 *** 作比较熟练，一些最常见的网页效果，你看到后，要能用PS实现出来，也就是能画出来。这些都达到要求后，下面你就开始了解一些最基本的网页设计知识。比如一般的网页宽度960像素，字体大小是12号宋体。等等这些内容。接下来就找几个别人设计的网页效果图来临摹下，自己在PS里边临摹边想，看看别人是怎么一步步从构思到实现网页效果图的。可以从简单的网页开始练习，慢慢复杂。里面很多东西，建议您多看一些漂亮的网页。这些漂亮的网页都是用制图软件一点点设计出来的，不难，但需要耐心去设计，不能急于求成~

---