从Photoshop模型转换到语义HTML和CSS的最佳方式是什么?


20

我一般使用手动过程:

  1. 看网页,找出语义元素,并建立HTML
  2. 片了,我觉得我的图像将需要
  3. 开始写CSS
  4. 根据需要调整和重复不同的步骤

有更好的方法或工具吗?

10

我有编码的一种相当自然的方式。关键是要像文档或文章那样处理页面。如果你觉得它像下面这样的变成逻辑清晰:

  1. 页标题是一个顶级标题

    • 无论你做网站的标题或实际页面标题H1是由你 - 我个人会让关于我们h1而不是堆栈溢出。
  2. 导航是一个目录,因此一个有序列表 - 你不妨使用醇通过UL认证。

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

  4. 尽可能使用块引号和引号。不要只用”括起来。

  5. 不要使用B和I,使用强和他们。这是因为HTML是结构性的,而不是表示性标记。EM phasis标签应使用在那里你会注重这个词。

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

  7. 使用<acronym> S和<abbr> S其中可能的,但只在第一个实例。

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

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

这只是一些指标,我敢肯定我能想到更多。

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

  0

对于HTMLDog为+1。 22 7月. 102010-07-22 16:41:20

  0

谢谢你的回答。 15 9月. 142014-09-15 07:02:15


0

我知道的一些设计师通常使用Illustrator来制作设计元素。


1

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

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

编辑: 的listapart环节肯定是其中两个ImageReady中和烟花爆竹已经从一开始有不错的支持,它有更好,更多的语义与每一个版本,但“平”的设计更自动化的,如果你有一个更复杂的设计这是令设计变得简单,而且必须由人手完成的。


0

This page显示了如何做到更自动一点。


4

那么,当我建立一个网站时,我倾向于在写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; 
    } 
    
  • 标志 - 使用H1(标题)元素为标志,而不是image.Example:

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

我希望这有助于:)


3

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

  1. 在Photoshop中使用指南(并锁定他们)。提前确定每个盒子/区域的所有尺寸。

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

  3. 毕竟我的指南到位后,我会将整个网站分成我的图片文件夹,从照片和分组元素开始,以各种背景图片/图片结尾,如果它们存在。 (提示:使用ctrl - 点击图层预览选择该图层的内容)。

注意事项使用Photoshop:

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

1

我只是觉得值得指出的是,除了迄今为止的出色建议之外,我还建议您使用红色笔标记所有块元素在设计上,你认为你可以在设计中发现并坐下半个小时,并谈论他们如何设计他们的设计,以适应不适合静态设计的用例。

  • 将更多文本放在导航中时会发生什么?
  • 这个宽度是固定的还是流体的?
  • 此内容窗格是否位于右侧固定高度或流体?如果它很流畅,你为什么要放置一个不能重复的背景?
  • 你有一个沿页面向下延伸的边框,它打破了另外两个连接的元素。从视觉上来说它是有道理的,但从语义上讲,我不能仅仅使用李来安置这些元素。你认为更重要的是什么?

它还可以帮助你发现潜在的问题,否则你可能没有意识到,直到你的手肘深入CSS。

不仅让您的工作在几次后变得更轻松您的设计师将更清楚地了解他们的工作是什么 - 一些设计师在理解为什么他们认为看起来非常简单将需要几天的CSS调整才能工作。


0

另外,了解“图层补偿”功能。我用它来改变按钮状态。

  1. 为正常,悬停和活动创建图层复合。
  2. 在其中的每一个中,设置属于该状态的效果/颜色叠加层和可见层。
  3. 保存为网页:为每个状态转到其他文件夹,除非重命名每个切片更容易(否则您的悬停按钮切片将覆盖您的常规切片)。