为开发人员学习网页设计的最快方法答案

【问题标题】：Fastest Method to Learn Web Design for a Developer为开发人员学习网页设计的最快方法
【发布时间】：2010-12-29 21:53:07
【问题描述】：

我是一名 Web 开发人员，在我的项目中，我注意到我的弱点是不擅长前端设计。如果他们不能按我想要的速度生产，那么依赖其他设计师可能会很烦人。

我对 HTML/CSS 的看法是，它基本上是一个非常有效的大 hack。有太多的 CSS 和浏览器特定的错误/怪癖需要学习和记住它们，而无需花费大量时间试图解开所有东西。有没有让 CSS 进入我大脑的捷径？我看过一些 CSS 书籍，但对我来说，它们确实阅读了很长的列表，其中包含如何在 IE6 中正确呈现事物以及如何使角落变圆。（说真的，为什么需要这么多技巧才能做出一个尖角？在除 Web 之外的任何平台上，这都会被称为重大疏忽。）

是否存在类似于 jQuery 为 JavaScript 所做的 CSS 的东西？使用 jQuery，您不需要非常了解 JavaScript 也能正常工作。

我没有兴趣了解为什么 IE6 会以奇怪的方式做事，因为我根本不关心支持它。我更感兴趣的是一种学习如何使用 CSS 来做我想做的事的方法，而无需花费大量时间阅读晦涩的博客。

【问题讨论】：

您是否正在寻找有关创建 Web 设计或编写实现该设计的代码（HTML、CSS 等）的信息？虽然相关，但它们是不同的学科。
我发现自己经常做后者。

标签： html css frontend

【解决方案1】：

用铅笔和纸勾勒出您的想法（在方框中思考，而不是三角形或六边形），然后分解所有小部分并学习如何制作每个部分。没有大到不能分解的问题。而且，和往常一样，TMTOWTDI！

寻找例子并从中学习——至少我是这样开始学习的。研究使用的样式并尝试使用它们。当您找到可以做您喜欢的事情时，请创建一个模型并玩弄它。然后测试它的跨浏览器兼容性。

如果您因为某些功能在 Firefox 和 Chrome 中有效，但在 IE 中无效（这种情况经常发生）而感到沮丧，请不要放弃。我发现诅咒比尔盖茨的名字，他所代表的只是一个很好的减压器。 :-)

我喜欢使用的一个很棒的工具是Firebug，它是一个用于 Firefox 的插件，除许多其他功能外，它还允许您在浏览器中编辑 CSS 规则并在执行后立即查看结果。

我同意 CSS 在网页设计界是一种事后才想到的东西，但它是一项了不起的发明，让开发变得更加容易和快捷。

【讨论】：

【解决方案2】：

是的，有一些 CSS 框架是“CSS 中的 jQuery”。一些比较流行的包括 960 和 Blueprint。我个人使用 960，发现它需要大量的布局猜测。

正如其他人所说，CSS 很难通过阅读来学习。它最终成为你需要通过大量经验培养本能的事情之一（这通常意味着大量的试验、错误和挫折）。正如您所强调的，这不是一个理想的情况，但它就是这样。

另一个困难是所采用的方法或工作流程可能因人而异。有些人首先在 Photoshop 中制作模型，然后使用 HTML/CSS 生成精确的逐像素“渲染”。其他人则使用 Photoshop、Illustrator 或其他工具来简单地勾画和构思，然后在 HTML/CSS 中从头开始重新创建它。还有一些人更喜欢直接从 HTML/CSS 和一些缩略图开始。找出最适合您的这些方法是另一个重要的难题。

【讨论】：

【解决方案3】：

这几乎需要时间和练习。但是如果你保持你的 html 简洁明了，你可以为自己省去很多麻烦。以下是我能想到的一些对我有帮助的规则：

在您的 html 页面中使用 DOCTYPE，从过渡开始，因为它具有最宽松的规则，并验证您的 html。如果您将页面保持在标准模式而不是怪癖模式，那么您将遇到的问题会大大减少。
选择您将在早期支持的浏览器并按逻辑顺序支持它们。对我来说，我在 Firefox 中开发，然后确保在 chrome / safari 上运行稳定。 IE 可以使用一种特殊的注释，让您插入仅对 IE 可见的 html。使用它为 IE7 添加样式表，然后在 IE6 中覆盖样式并修复这些浏览器中的任何显示问题。您通常应该先从最好的浏览器开始，然后向后工作。
小心填充。这是我处理过的最有问题的属性之一。如果可以，请选择使用带有边距的小子容器元素来代替填充。它的标记更多，但所有浏览器的边距处理得更好。
相对定位元素内部的绝对定位元素。这解决了很多问题。当您相对定位一个元素时，它会保持正常流动。当您在相对的父级内绝对定位元素时，绝对项将参考父级的位置工作。

【讨论】：

【解决方案4】：

在这种情况下，我认为书籍不会有太大帮助。 CSS 极易学习，但极难掌握。

我只能建议你边走边学。你需要很多经验！

或者，您可以放弃对 IE7 尤其是 IE6 的支持。如果你这样做，你会发现非常少且非常罕见的怪癖:)

【讨论】：

我认为CSS易学易掌握是正确的，但是一些浏览器的不兼容使得实现变得困难。

【解决方案5】：

参加一些平面设计课程。没有任何编程语言能让你成为艺术家，而良好的用户界面设计需要艺术性。

[或者你可以找到更好的平面设计师合作]

【讨论】：

我认为我没有很好地描述我的问题。我不是想创造新颖的美学网页设计。我正在尝试找出一种方法来了解 CSS 产生特定外观的方式。

【解决方案6】：

订阅css-discuss，玩转常见问题，与他人讨论你的进步。 wiki 也是一个非常有用的资源。

【讨论】：