除非您有兴趣花大量时间学习 CSS 布局，否则您最简单的成功途径是将 Photoshop 文件发送给psd2html 之类的人，它可以非常快速地完成这种事情，而且价格低得惊人。这将允许您将开发工作集中在应用程序功能上。
在 Photoshop 中设计 Web 模板非常棒，因为您不受任何预先存在的关于如何使用 CSS 的概念的限制。但出于同样的原因，这很危险。某些布局模式已经非常成熟且易于使用 CSS 完成，而其他看起来应该很容易的事情却并非如此。
要扩展先前的评论：
这是您需要的： CSS/HTML 布局的分步流程？
这是加强上述链接的一些额外指导： https ://stackoverflow.com/questions/1321097/seo-where-do-i-start/1321284#1321284
如果没有必要，不要像其他人建议的那样对图像进行切片。这是极其低效的。图像切片是一种过时的做法，它会导致将许多不同的图像发送给您的用户，每个图像都有自己的 HTTP 标头。这会占用带宽并浪费人们的时间。为用户提供尽可能少的图像文件，并使用 CSS 使它们在您的布局中工作。查找一种称为CSS Sprites的技术，以查看可以在单个文件中提供多少种不同的图像来表示布局的各种组件。
是的。您将需要使用切片工具将图像分成多个区域。从那里我相信您可以“保存为 Web”，它会生成包含表格的 HTML 和图像，您可以自己将其转换为页面。Photoshop 只是其中的一部分。
使用图像编辑工具将您的图像切成必要的图像以制作您的页面。知道切片的位置和内容需要经验，但这里有一些提示 -
所有图像都是矩形的，因此在进行切片时考虑“列”和“行”可能会有所帮助。但请仅将表格用于表格数据而不用于布局:)
如果您在图像中有重复图案，请切片最小尺寸的图像，以允许图案镶嵌并使用 css 重复它。
为正确的工作使用正确的图像类型，例如 .gifs 用于小动画，.png 用于叠加，.jpg 用于照片等。wiki页面在这里可能会有所帮助
为作业使用正确的图像文件大小和尺寸。我通常会尽量使图像文件大小尽可能小，同时又不失图像的整体效果。请记住，更大的图像 = 更多的带宽 = 更长的下载时间
一旦你有了你的图片，我建议你看看使用 Firefox 和像素完美插件和Firebug来把页面放在一起。像素完美插件允许您将图像叠加到网页上，以便您可以对齐所有内容以匹配原始模型。
一旦你有了一个使用 HTML 和 CSS 的基本功能页面，我将通过 JavaScript/JavaScript 框架介绍客户端功能。在你完成布局之前做它可能会开始变得混乱，所以我会到达你对你所拥有的感到满意的地步，然后介绍功能。这样做也有助于渐进式增强并鼓励不显眼的 JavaScript。
切片图像通常是这样做的，但要注意编写的教程已经把你画到了一个角落。
请注意，整个图像（我假设是为了将浏览器填充为网站）只有 766 x 700 像素。这只是现代显示器大小的一半多一点，因此您将在内容右侧（或居中内容的任一侧）拥有大量空白。
平均显示器尺寸因地理位置而异，因此请熟悉您的观众的典型尺寸，并使您的背景层具有该尺寸或更大的尺寸。五年前，我所有网站的尺寸都为 800 x 600 显示器，而现在它们的尺寸为 1024 x 768。但我正在关注我网站的流量数据，因为近一半的访问者使用更大的显示器。
您用于创建 HTML 以显示图像和文本的方法取决于您这样做的原因。如果是业余爱好或副业，请使用任何所见即所得的网站创建软件包或在线工具。如果您打算学习如何将其作为职业，那么请帮自己一个忙，学习如何使用 Web 标准（语义 HTML/CSS）创建网站。每个人都通过查看其他人的代码来学习，但要小心你从谁的代码中学习。
查看关于 CSS的Eric Meyer书籍和关于 Web 标准的Jeffrey Zeldman书籍，了解如何使网站不仅可以在当今的浏览器中运行，而且还可以在现代移动设备和明年的浏览器上运行。在他们的网站上，查看他们的文章和帖子，看看他们的 HTML 源代码，看看他们是如何做到的。
此外，请查看这篇包含七种不同 PSD 到 HTML 教程的文章，了解其他设计师将如何解决该问题。
我使用的一种常见方法是首先使用 Photoshop、Illustrator 等设计页面布局。
一旦你有了布局，从高层次检查设计，看看图像如何在页面上占据对称形状。
接下来确定哪些图像可以平铺、精灵（如前所述）或在 CSS 中重新创建。例如，在上图中，您可以主要使用 CSS 创建平铺框。
您当然可以将其分割为一张图像，但随后会创建大量浪费的像素，这些像素只会降低页面性能并增加加载时间。
远离在您的设计中使用表格，并着眼于使用 div 标签/layers 使用 div 标签与正确格式化的 CSS 相结合，将产生一个从上面反映确切布局的轻量级页面。
在您的设计中，我还会考虑一些项目（其中一些在上面提到过）设计页面以进行流畅的演示。如果您必须将图像锁定到特定大小，即 700 像素，则设计页面，使其位于页面中心，并干净地呈现出更大的屏幕分辨率。
尽可能多地使用 CSS 并在多个浏览器（即 safari、firefox 等）上进行交叉测试 Internet Explorer 将呈现与其他浏览器不同的 CSS，因此您应该在开发过程中注意并测试这一点。
尝试创建一个可以平铺的背景图像，或者在大分辨率下具有快速加载时间的背景图像。例如，如果您的网站以 1024x768 的分辨率进行最佳查看，则使用与多面通用背景颜色相当的大小和渐变混合的小调色板创建背景。这将使您的背景成为网站设计的一部分，但也支持更大的分辨率。定位可以在css中为后台处理。
如果您是编码页面的新手，那么我认为使用一些应用程序（如 photoshop、illustrator 等）将图像转换为 html 会有所帮助。请注意，在执行此操作时，您将获得大量使页面膨胀的多余代码，并且您还将获得大量不必要的图像平铺在页面中构成背景等。
简而言之，没有什么可以替代自己阅读、解释和手动编码文档的能力。您将在设计中获得更大的灵活性，并可以访问在某些所见即所得应用程序中无法访问的许多样式、属性和属性。
互联网上的 CSS 搜索和 DIV 标签的使用将为您返回大量示例和入门指南。祝你好运！
在Microsoft Expression Web SuperPreview中，您可以将图像叠加在 html 上。更新 html，直到它们在您计划支持的所有浏览器中看起来都一样。
