Question

我通常使用手动过程：

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

有更好的方法，还是工具？

Answer 1

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

页面标题是顶级标题
- 无论您是制作网站标题还是实际页面标题，h1都取决于您 - 我个人认为h1而不是Stack Overflow。
导航是一个目录，因此是一个有序列表 - 您也可以使用ul而不是ul。
节标题是h2，这些节中的节是h3等。堆叠起来。
尽可能使用blockquotes和quotes。不要只用“。
请勿使用b和i。使用strong和em。这是因为HTML是结构性而非表示性标记。强和 em phasis标签应该用在你强调单词的地方。
<label>您的表单元素。
尽可能使用<acronym>和<abbr>，但仅限于第一个实例。
最简单：始终总是为您的图片提供一些替代文字。
你可能没有使用很多HTML标签 - 地址用于邮政地址，屏幕代码输出。看看HTML Dog的某些内容，这是我最喜欢的参考资料。

这只是一些指示，我相信我能想到更多。

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

Answer 2

好吧，当我建立一个网站时，我倾向于在编写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）。如果以这种方式导航是有意义的，那么在可访问性方面你做得很好。

我希望这会有所帮助：）

Answer 3

我基本上做了Jon做的事情，但这里有一些其他的想法：

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

使用Photoshop的注意事项：

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

Answer 4

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

昨天在我的feedreader中弹出的

This tutorial显示了从开始到结束的过程，可能会帮助那些从未做过的人，但是因为你是老手，只是简化你自己的方法。

编辑： listapart链接当然对于“平面”设计更加自动化，其中图像准备和烟花从第一天开始就得到了相当好的支持，并且每次发布都有更好的语义和更多的语义，但是如果你有更复杂的设计，那么它就会变得非常简单。设计它是什么，这些必须手工完成。

Answer 5

我只是觉得值得指出的是，除了你迄今为止提供的优秀建议外，我还建议使用红笔来标记设计中的所有块元素，以获得设计的印刷版本。你认为你可以和设计师一起坐下来坐半个小时，然后谈谈他们如何设想他们的设计是否适合不适合静态设计的用例。

当导航中放入更多文字时会发生什么？
这个宽度是固定的还是流畅的？
此内容窗格是否为正确的固定高度或流体？如果它是流动的，你为什么要在它上面放一个不能重复的背景？
您在页面下方有一个边框，可以断开另外两个连接的元素。在视觉上它是有道理的，但从语义上来说，我不能只用一个li来容纳这两个元素。您认为什么更重要？

它还可以帮助你发现潜在的问题，否则你可能没有意识到这些问题会在你的肘部深陷css之前出现问题。

经过几次操作后，它不仅可以让您的工作更轻松，您的设计师将更加了解标记工作所涉及的内容 - 有些设计师真正难以理解为什么他们认为看起来很简单的事情会花几天的时间来调整工作。

Answer 6

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

Answer 7

This page显示了如何更加自动化。

Answer 8

另外，了解“Layer Comps”功能。我用它来改变按钮状态。

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

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

8 个答案: