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

StackOverflow https://stackoverflow.com/questions/19487

  •  09-06-2019
  •  | 
  •  

题

我一般使用一个手工过程：

  1. 看看这页，图的语义元素，并建立HTML
  2. 切片图像我觉得我需要
  3. 开始编写CSS
  4. 调整和重复不同的步骤，作为必要的

有更好的方法或工具？

有帮助吗？

解决方案

我有一个相当自然的方式编码。关键是要把该页的文件或文章。如果你觉得这样的下列成为在逻辑上清楚的：

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

    • 你是否使该网站的标题或实际页标题h1是你的-我会做关于我们的h1而不是堆溢出。

  2. 导航的是一个表格的内容，因此一个 序列表 -你可以使用一个ol在ul。

  3. 部分标题是h2，部分内的那些部分是3h公司等。堆起来。

  4. 使用引用文字和报价，在可能的情况。不只是围绕着它与"。

  5. 不使用b和我.使用强劲的和他们。这是因为HTML是结构性的而不是表象标记。 强大 和 他们phasis标记的应该使用哪里你会把重点放在该词。

  6. <label> 你的形成要素。

  7. 使用 <acronym>s和 <abbr>s在可能的，但只有在第一个实例。

  8. 最简单的：总是 总是 给你像一些备选案文。

  9. 有很多HTML tags你可以用那你可能还没有-地址的邮政地址、屏幕编码输出。看看 HTML狗 对于一些人来说，这是我最喜欢的参考。

这只是一些指针，我敢肯定我能想到的更多。

哦，如果你想要一个挑战写你的XHTML第一，然后编写的CSS。当CSS-ing你是不是允许接触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;
}

  • 徽标的使用H1(标题)件为标志，而不是一个图像。例如：

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

  • IDs和类使用的标识，以便识别的元素，你只有一个实例。使用类别的元素，你得到了几个实例。

  • 使用的文本浏览器(例如，lynx).如果它是有意义的导航这样，你做得很好，当它涉及到无障碍。

我希望这有助于：)

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

  1. 使用指南中Photoshop(并锁定他们)。找出所有的你的尺寸，对于每个框/地区的时间提前。

  2. 收集所有你的尺寸和颜色十六价值观纳入一个信息文件(I使用txt文件)，可以很容易地参考。这将减少alt-卡税和选择颜色在Photoshop多次。

  3. 之后我所有的指导，我的切片了整个网站进入我的图像文件夹，从照片和分的元素，并且结束各种背景的瓷砖/图像，他们应该存在。(Tip:使用 ctrl-击层预选择的那一层的内容)。

注意到在使用Photoshop：

  • 使用的指南或网格。
  • 利用笔记功能的任何相关信息
  • 总是使用层团体相似的要素。我们需要能够把整个区域的一击。把所有的'头'的内容在一个层组。
  • 总是你的名字层。
  • 你可以把各个网页模板中的一个PSD文件和使用嵌套层团体组织。这种方法我们没有必要设置我们所有的指南，并指出为每个网页模板上的一个网站。

没有快捷方式)，但每个人都工作的方式略有不同。

这个教程 突然出现在我的订阅器昨天表示的过程从开始到结束，并可能帮助的人从来没有做过但你也是个老手，它只是关于精简自己的方法。

编辑：该listapart链接，当然是更多的自动化对'平'的设计，其中两个imageready和烟花了很好的支持从第一天开始，它得到了更好的和更多的语义与每一个版本，但是如果你有一个更复杂的设计它的twiddly位，使设计它是什么，以及这些必须通过手工完成的。

我只是认为这是值得指出的是，除了良好的建议你们迄今为止，我建议得到一个印刷版本的设计，使用红笔记了所有的框元件的设计你觉得你可以点和坐下来与设计一个半小时谈话，通过他们怎样设想它们的设计工作使用的情况下不适合的静态设计。

  • 什么时候会发生更多的文字放在导航？
  • 这是宽固定或流?
  • 是这样的内容窗格的权利的固定高度或流?如果它流体为什么你把一个背景上，不能重复？
  • 你有一个边界延伸下页，打破两个相连的因素。在视觉上很有意义，但在语义上，我不能不只使用一个李子的那些要素。你认为什么是更重要？

它还会帮助你发现潜在的问题，否则你可能没有意识到要问题，直到你的肘深css。

它不仅使你的工作更容易经过几次这样做你的设计师将得到一个更强大的什么感觉是参与标记他们的工作的一些设计师们真正的麻烦理解为什么一些他们想看起来在视觉上很简单，将需要几天的css调整，以使的工作。

一些设计师们我知道，通常使用的插图画家设计元素。

这页 显示了，如何做到这一点更加自动化。

此外，获得知道"层复合"功能。我用这个改变按钮国。

  1. 创建层谱曲正常的，悬停，和积极的。
  2. 在每个这些设置的影响/彩色复盖和可见的层其属于该国。
  3. 保存网络：去一个不同的文件夹中的每个国家，除非它是更容易重新命名的每个片(否则你的悬停的按钮片将复盖正规的切片)。
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top