从 Photoshop 模型到语义 HTML 和 CSS 的最佳方式是什么？答案

【问题标题】：What's the best way to go from a Photoshop mockup to semantic HTML and CSS?从 Photoshop 模型到语义 HTML 和 CSS 的最佳方式是什么？
【发布时间】：2010-09-06 09:03:12
【问题描述】：

我一般使用手动流程：

查看页面，找出语义元素，然后构建 HTML
将我认为我需要的图像切片
开始编写 CSS
根据需要调整和重复不同的步骤

有更好的方法或工具吗？

【问题讨论】：

标签： html css

【解决方案1】：

嗯，当我建立一个网站时，我倾向于在编写 HTML 时完全忘记设计。我这样做是为了不会得到任何特定于设计的标记，因此我可以专注于元素的语义含义。

一些如何标记事物的指针：

menu - 使用 UL（无序列表）元素，因为这正是菜单。选择的无序列表。示例：

<ul id="menu">
    <li id="home"><a href="/" title="Go to Homepage">Home</a></li>
    <li id="about"><a href="/about" title="More about us">About</a></li>
</ul>

如果你想要一个水平菜单，你可以这样做：

#menu li {
    display: block;
    float: left;
}

徽标 - 为徽标使用 H1（标题）元素而不是图像。示例：

<div id="header">
    <h1>My website</h1>
</div>

还有 CSS（如果您想要带有图形项目的菜单，可以将相同的技术应用于上面的菜单）：

#header h1 {
    display: block;
    text-indent: -9999em;
    width: 200px;
    height: 100px;
    background: transparent url(images/logo.png) no-repeat;
}

ID 和类 - 使用 ID 来标识您只有一个实例的元素。使用类来识别你有几个实例的元素。
使用文本浏览器（例如 lynx）。如果以这种方式导航是有意义的，那么您在可访问性方面做得很好。

我希望这会有所帮助:)

【讨论】：

【解决方案2】：

我基本上和 Jon 做的一样，但这里有一些其他的想法：

在 Photoshop 中使用参考线（并锁定它们）。提前计算出每个框/区域的所有尺寸。
将所有尺寸和颜色十六进制值收集到一个信息文件（我使用 txt 文件）中，您可以轻松参考。这将减少您的 alt-tab 税和多次在 Photoshop 中选择颜色。
在我的所有指南都到位后，我将整个网站分割到我的图像文件夹中，从照片和分组元素开始，并以各种背景图块/图像结束，如果它们存在的话。（提示：使用ctrl-点击图层预览来选择该图层的内容）。

使用 Photoshop 的注意事项：

使用参考线或网格。
使用备注功能获取任何相关信息
始终对相似元素使用图层组。我们需要能够一键关闭整个区域。将所有“标题”内容放在一个图层组中。
始终为您的图层命名。
您可以将每个页面模板放在一个 PSD 文件中，并使用嵌套的图层组来组织它们。这样我们就不必为网站上的每个页面模板设置所有指南和注释。

【讨论】：

【解决方案3】：

另外，了解“图层组合”功能。我用它来改变按钮状态。

为正常、悬停和活动创建图层组合。
在每一个中，设置属于该状态的效果/颜色叠加层和可见层。
保存为网络：为每个状态转到不同的文件夹，除非重命名每个切片更容易（否则您的悬停按钮切片将覆盖您的常规切片）。

【讨论】：

【解决方案4】：

我只是认为值得指出的是，除了您迄今为止所获得的出色建议外，我还建议您获取设计的印刷版本，使用红笔标记设计上的所有块元素你认为你可以发现并与设计师坐下来半个小时，讨论他们如何设想他们的设计适用于不适合静态设计的用例。

在导航中添加更多文本时会发生什么？
这个宽度是固定的还是可变的？
右侧的内容窗格是固定高度还是流动的？如果它是流动的，你为什么要在它上面加上一个不能重复的背景？
您有一个沿页面向下延伸的边框，它打破了两个原本相连的元素。在视觉上它是有道理的，但在语义上我不能只使用 li 来容纳这两个元素。你认为什么更重要？

它还可以帮助您发现在您的肘部深入 css 之前您可能没有意识到的潜在问题。

它不仅会让你的工作在几次之后变得更轻松，你的设计师会更清楚地知道标记他们的工作所涉及的内容 - 一些设计师真的很难理解为什么他们认为看起来很简单的东西会需要几天的 css 调整才能工作。

【讨论】：

【解决方案5】：

我有一种相当自然的编码方式。关键是将页面视为文档或文章。如果你这样想，下面的逻辑就很清楚了：

页面标题是顶级标题
- 您是否将网站标题或实际页面标题设为 h1 取决于您 - 我个人会将 About Us 设为 h1 而不是 Stack Overflow。
导航是一个目录，因此是一个有序列表 - 您也可以在 ul 上使用 ol。
节标题是 h2，这些节中的节是 h3 等。将它们堆叠起来。
尽可能使用块引号和引号。不要只用“。”。
不要使用 b 和 i。使用 strong 和 em。这是因为 HTML 是结构性的而不是表现性的标记。 Strong 和 em 相位标签应该用在强调单词的地方。
<label> 你的表单元素。
尽可能使用<acronym>s 和<abbr>s，但仅限于第一次使用。
最简单的：总是，总是为您的图像添加一些替代文本。
有很多您可能没有使用的 HTML 标记 - 用于邮政地址的地址、屏幕代码输出。看看HTML Dog 的一些内容，这是我最喜欢的参考。

这只是一些建议，我相信我可以想到更多。

哦，如果您想挑战一下，请先编写 XHTML，然后再编写 CSS。 CSS-ing 时不允许触摸 HTML。它实际上比你想象的要难（但我发现它让我更快）。

【讨论】：

【解决方案6】：

没有捷径 :) 但每个人的工作方式略有不同。

昨天在我的提要阅读器中弹出的This tutorial 显示了从头到尾的过程，可能会帮助以前从未做过的人，但由于您是老手，这只是简化您自己的方法。

编辑：对于“平面”设计，listapart 链接肯定更加自动化，从第一天开始，imageready 和 firefox 就得到了很好的支持，并且每个版本都变得更好、更语义化，但是如果你有一个更复杂的设计，那就是那些使设计它是什么，这些都必须手工完成。

【讨论】：

【解决方案7】：

This page 展示了如何使其更加自动化。

【讨论】：

【解决方案8】：

我认识的一些设计师，通常使用 Illustrator 来制作设计元素。

【讨论】：