从Photoshop模型到语义HTML和CSS,最好的方法是什么?

我有一种相当自然的编码方式。关键是将页面视为文档或文章。如果你这样想的话,下面的逻辑就变得清晰了:

1. 页面标题是顶级标题

   • 无论是网站标题还是实际的页面标题,h1都取决于你自己——我个人认为h1是我们的,而不是堆栈溢出。

2. 导航是一个目录,因此 有序表 -您也可以在UL上使用OL。

3. 节头是h2,这些节内的节是h3等。将它们堆叠起来。

4. 尽可能使用双引号和引号。不要仅仅是围绕着它”。

5. 不要使用b和i。使用strong和em。这是因为HTML是结构化的,而不是表示性标记。 强的 和 相对长度单位 在强调单词的地方应该使用phasis标记。

6. <label> 您的窗体元素。

7. 使用 <acronym> S和 <abbr> 在可能的情况下,但仅在第一种情况下。

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

9. 有很多HTML标记可以使用,但您可能没有-地址为邮政地址,屏幕代码输出。看一看 HTML Dog 对一些人来说,这是我最喜欢的参考资料。

这只是一些建议,我相信我能想到更多。

哦,如果你想要挑战,先写XHTML,然后写CSS。当使用CSS时,不允许触摸HTML。实际上比你想象的要难(但我发现它让我更快)。

嗯,当我建立一个网站时,我倾向于在编写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;
  }
  

• logo-将h1(heading)元素用于徽标,而不是图像。示例:

  <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)。如果用这种方式导航是有意义的,那么在可访问性方面就做得很好。

希望这有帮助:)

我基本上和乔恩做的一样,但这里有一些其他的想法:

1. 使用Photoshop中的辅助线(并锁定它们)。提前计算出每个盒子/区域的所有尺寸。

2. 将所有的尺寸和颜色十六进制值收集到一个信息文件中(我使用一个txt文件),您可以很容易地引用它。这将减少你的alt标签税,并在photoshop中多次选择颜色。

3. 在我的所有指南都就位之后,我将整个网站分割到我的图像文件夹中,从照片和分组元素开始,到各种背景图块/图像结束(如果它们存在的话)。(提示:使用 CTRL -单击层预览以选择该层的内容)。

使用Photoshop的注意事项:

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

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

This tutorial 昨天在我的feedreader中弹出的消息显示了从头到尾的过程,可能有助于以前从未做过的人,但因为你是一个老手,所以这只是简化你自己的方法。

编辑: 对于“平面”设计来说,listaparate链接当然更加自动化,因为从第一天开始,ImageReady和Fireworks都得到了很好的支持,而且每一个版本都有更好、更语义化的支持,但是如果你有一个更复杂的设计,那就是那些琐碎的部分使设计变得如此,而这些必须手工完成。

我只是觉得值得指出的是,除了你迄今为止提出的极好的建议外,我还建议你得到一个印刷版的设计,用一支红色的钢笔在设计上标出你认为你可以识别的所有块元素,并与设计师坐下来半个小时,讨论他们对设计工作的设想。Rking用于不适合静态设计的用例。

• 当导航中放入更多文本时会发生什么?
• 这个宽度是固定的还是流动的?
• 此内容窗格是固定高度还是流体?如果是液体,你为什么要在上面加一个不能重复的背景?
• 您有一个沿页面向下延伸的边框,它可以分隔两个原本连接的元素。从视觉上看,这是有意义的,但从语义上讲,我不能只用一个li来容纳这两个元素。你认为什么更重要?

它还将帮助您发现潜在的问题,否则您可能没有意识到将是问题,直到您的肘部深入到CSS。

这不仅使你的工作更容易做几次后,你的设计师将得到一个更强烈的意义,什么是参与标记他们的工作-一些设计师有真正的困难,理解为什么他们认为视觉上非常简单的东西将需要几天的CSS调整工作。

我认识的一些设计师,通常用插画来制作设计元素。

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

另外,了解“分层比较”功能。我用这个来改变按钮的状态。

1. 为“正常”、“悬停”和“活动”创建层比较。
2. 在每种情况下,设置效果/颜色覆盖和属于该状态的可见层。
3. 保存到Web:对于每个状态,转到不同的文件夹,除非更容易重命名每个切片(否则,悬停按钮切片将覆盖常规切片)。