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

我一般使用手动过程:

查看页面,找出语义元素,并构建HTML

切片我认为我需要的图像

开始编写CSS

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

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

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

页面标题是顶级标题

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

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

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

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

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

你的表单元素.

尽可能使用s和s,但仅限于第一个实例.

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

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

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

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