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

Question

我一般使用手动过程:

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

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

Answer 1

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

1. 页面标题是顶级标题

   • 无论您是制作网站标题还是实际页面标题,h1都取决于您 - 我个人认为h1而不是Stack Overflow.

2. 导航是一个目录,因此是一个有序列表 - 您也可以使用ul超过ul.

3. 节标题是h2,这些节中的节是h3s等.将它们堆叠起来.

4. 尽可能使用blockquotes和quotes.不要只用"."包围它.

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

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

7. 尽可能使用<acronym>s和<abbr>s,但仅限于第一个实例.

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

9. 你可能没有使用很多HTML标签 - 地址用于邮政地址,屏幕代码输出.看看HTML Dog,这是我最喜欢的参考资料.

这只是几点,我相信我能想到更多.

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

Answer 2

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

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

  <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>
  

• 徽标 - 使用 H1（标题）元素代替图像作为徽标。示例：

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

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

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

• ID 和类 - 使用 ID 来标识您只有一个实例的元素。使用类来标识您拥有多个实例的元素。

• 使用文本浏览器（例如 lynx）。如果以这种方式导航有意义，那么您在可访问性方面就做得很好。

我希望这有帮助 ：）