从Photoshop模型到语义HTML和CSS的最好方法是什么？ [英] What's the best way to go from a Photoshop mockup to semantic HTML and CSS?

问题描述

我通常使用手动过程：

1. 查看页面，找出语义元素并构建HTML


2. 切割图片我认为我需要


3. 开始编写CSS


4. 根据需要调整并重复不同的步骤

有更好的方法或工具吗？

解决方案

我有一个相当自然的编码方式。关键是把页面看成一个文档或一篇文章。如果你这样想，以下变得逻辑上清楚：

1. 页面标题是顶级标题

   
   
   
   
   
   • 无论你是站点标题还是实际页面标题，h1都取决于你 - 个人而言，我会让关于我们h1而不是Stack Overflow。 / li>
     



2. 导航是一个目录，因此是一个有序列表




3. 部分标题为h2，这些部分中的部分为h3s等。
   

4. 尽可能使用块引用和引号。




5. 不要使用b和i。使用strong和em。这是因为HTML是结构化的而不是表示性的标记




6. 。




7. 使用< acronym> ;




8. 最简单的：总是，总是为图片提供替代文字。




9. 可以使用您可能没有 - 为邮政地址，屏幕代码输出地址。请查看 HTML狗

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

哦，如果你想要一个挑战首先写你的XHTML，然后写CSS。当CSS不允许你触摸HTML。这实际上比你想象的更难（但我发现它使我更快）。

I generally use a manual process:

1. Look at the page, figure out the semantic elements, and build the HTML
2. Slice up the images I think I'll need
3. Start writing CSS
4. Tweak and repeat different steps as necessary

Got a better approach, or a tool?

解决方案

I have a fairly natural way of coding. The key is to treat the page like a document or an article. If you think of it like this the following becomes logically clear:

1. The page title is a top level heading

   • Whether you make the site title or actual page title the h1 is up to you - personally I'd make About Us the h1 rather than Stack Overflow.

2. The navigation is a table of contents, and thus an ordered list - you may as well use an ol over a ul.

3. Section headers are h2, sections within those sections are h3s etc. Stack them up.

4. Use blockquotes and quotes where possible. Don't just surround it with ".

5. Don't use b and i. Use strong and em. This is because HTML is structural rather than presentational markup. Strong and emphasis tags should be used where you'd put emphasis on the word.

6. <label> your form elements.

7. Use <acronym>s and <abbr>s where possible, but only in the first instance.

8. The easiest: always, always give your images some alternate text.

9. There's lots of HTML tags you could use that you probably haven't - address for postal addresses, screen code output. Have a look at HTML Dog for some, it's my favourite reference.

That's just a few pointers, I'm sure I could think of more.

Oh, and if you want a challenge write your XHTML first, then write the CSS. When CSS-ing you aren't allowed to touch the HTML. It's actually harder than you think (but I've found it's made me quicker).

这篇关于从Photoshop模型到语义HTML和CSS的最好方法是什么？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！