22

我通常使用手动过程：

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

有更好的方法或工具吗？

4

8 回答 8

10

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

  1. 页面标题是顶级标题

    • 无论您是制作网站标题还是实际页面标题，h1 都由您决定——我个人会将关于我们制作为 h1 而不是 Stack Overflow。

  2. 导航是一个目录，因此是一个有序列表- 您也可以在 ul 上使用 ol。

  3. 部分标题是 h2，这些部分中的部分是 h3s 等。将它们堆叠起来。

  4. 尽可能使用块引号和引号。不要只用“。

  5. 不要使用 b 和 i。使用 strong 和 em。这是因为 HTML 是结构性的而不是表现性的标记。强调单词的地方应该使用强和强调标签。

  6. <label>你的表单元素。

  7. 尽可能使用<acronym>s 和<abbr>s，但仅限于第一种情况。

  8. 最简单的：总是，总是给你的图像一些替代文本。

  9. 有很多您可能没有使用的 HTML 标记 - 邮政地址的地址、屏幕代码输出。看看HTML Dog的一些内容，这是我最喜欢的参考。

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

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

于 2008-08-22T11:21:22.697 回答
4

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

我希望这有帮助 ：）

于 2008-08-22T11:13:18.923 回答
3

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

  1. 在 Photoshop 中使用参考线（并锁定它们）。提前计算出每个盒子/区域的所有尺寸。

  2. 将所有尺寸和颜色十六进制值收集到一个信息文件（我使用 txt 文件）中，您可以轻松参考。这将减少您的 alt-tab 税和多次在 Photoshop 中选择颜色。

  3. 在我的所有指南都到位后，我将整个网站切分成我的图像文件夹，从照片和分组元素开始，并以各种背景图块/图像结束，如果它们存在的话。（提示：使用 -ctrl单击图层预览来选择该图层的内容）。

使用 Photoshop 的注意事项：

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

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

昨天在我的 feedreader 中弹出的这个教程显示了从开始到结束的过程，可能会帮助以前从未做过的人，但由于你是老手，它只是关于简化你自己的方法。

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

于 2008-08-21T09:03:26.780 回答
1

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

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

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

这样做不仅会让你的工作在几次之后变得更容易，你的设计师会对标记他们的工作所涉及的内容有更深刻的认识——一些设计师很难理解为什么他们认为看起来很简单的东西需要一些时间几天的 CSS 调整工作。

于 2009-02-08T12:30:38.250 回答
0

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

于 2008-08-21T08:39:33.750 回答
0

这个页面展示了如何让它更加自动化。

于 2008-08-21T09:30:34.890 回答
0

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

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