我通常使用手动过程：

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

有更好的方法还是工具？

解决方案

回答

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

回答

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

昨天在我的feedreader中弹出的该教程从头到尾显示了该过程，它可能会帮助从未使用过它的人，但是由于我们老了，它只是简化了自己的方法。

编辑：
对于"扁平"设计，listapart链接当然更加自动化，从第一天开始，图像就绪和烟火都得到了很好的支持，并且每个发行版的语义和语义都变得更好，但是如果我们设计更复杂，那么可能是因为设计它是什么，这些必须手工完成。

回答

此页面显示了如何使其自动化程度更高。

回答

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

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

• 菜单-使用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)。如果以这种方式导航很有意义，那么在可访问性方面我们做得很好。

我希望这有帮助 ：)

回答

我有一种相当自然的编码方式。关键是将页面视为文档或者文章。如果我们这样看待，以下内容在逻辑上将变得清晰：

• 导航是一个目录，因此是一个有序列表-我们也可以在ul上使用ol。
• 节标题是h2，这些节中的节是h3，依此类推。将它们堆叠起来。
• 尽可能使用块引号和引号。不要只用"包围"。
• 不要使用b和i。使用强和em。这是因为HTML是结构性标记，而不是表示性标记。在强调单词的地方应使用强力和强调标签。
• <label>表单元素。
• 尽可能使用<acronym>s和<abbr>s，但仅在第一种情况下使用。
• 最简单的方法：总是始终为图像提供一些替代文本。
• 我们可能没有很多可以使用的HTML标记-邮政地址，屏幕代码输出。看看HTML Dog，这是我最喜欢的参考。

那只是一些指针，我敢肯定我还能想到更多。

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

回答

我基本上会执行Jon的相同操作，但是这里还有其他一些想法：

• 在Photoshop中使用指南(并锁定它们)。提前找出每个盒子/区域的所有尺寸。
• 将所有尺寸和彩色十六进制值收集到一个易于参考的信息文件(我使用txt文件)中。这将减少Alt-Tab税，并在Photoshop中多次选择颜色。
• 放置好所有指南后，我将整个网站切成我的图像文件夹，从照片和分组的元素开始，然后以各种背景图块/图像(如果存在)结束。 (提示：使用" ctrl"并单击图层预览以选择该图层的内容)。

使用Photoshop的注意事项：

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

回答

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

• 在导航中放置更多文本时会发生什么？
• 这个宽度是固定的还是可变的？
• 该内容窗格是否位于正确的固定高度或者流体上？如果很不稳定，为什么要在它上面加上一个不能重复的背景？
• 我们有一个边框向下延伸到页面，该边框打破了两个原本相连的元素。在视觉上这是有道理的，但在语义上我不能仅仅使用li来容纳这两个元素。我们认为更重要的是什么？

它还可以发现可能的问题，否则肘部陷入CSS之前可能没有意识到。

经过几次这样做，不仅使工作变得更轻松，设计师还将对标记工作的内容有更深刻的了解。一些设计师确实很难理解为什么他们认为外观看起来很简单的东西需要几天的时间CSS调整以使工作正常进行。

回答

此外，了解"图层压缩"功能。我用它来改变按钮状态。

• 为普通，悬停和活动创建图层复合。
• 在每种状态下，设置效果/颜色叠加层和属于该状态的可见层。
• 为网络保存：请为每个状态进入不同的文件夹，除非更容易重命名每个切片(否则，悬停按钮切片将覆盖常规切片)。