2009-02-06 19 views
7

我因缺乏审美判断而感到沮丧。作为一名开发人员,我很难创建一个看起来像样的网站。我该如何改进我的HTML和CSS?

的问题是我在哪里可以学习所有必要的CSS技巧还是有喜欢的东西“有效的CSS设计”,让我

  1. 拿起CSS快速
  2. 用它做漂亮外观的网站?

我会欣赏任何CSS和HTML设计师,让我快速拉下美丽的样机网页。

编辑:也许我应该更明确。如果我被要求为FaceBook克隆提供原始主页,我会完全无能为力。我甚至很难模拟出这样的屏幕。确实,缺乏想象力。

+0

在我看来,非设计师的最佳方式是[twitters bootstrap](http://getbootstrap.com/)。他们有很多好看的按钮,表格,表格,列表和我最喜欢的网格布局组件。他们也有免费的javascript组件和一些方便的模板。 – 2013-08-20 12:46:00

回答

7

尝试此链接Why developers suck at CSS design。这可能会为您的项目提供一个很好的基准。

如果您将链接中的一些建议与一个小型css框架(我喜欢boilerplate)结合起来,您应该能够以相当令人满意的视觉基线开始每个项目。而且你会惊讶于你的工作有什么不同。

+0

好的链接,谢谢 – Misko 2009-02-06 16:54:56

2

http://www.w3schools.com/

你会在那里找到的一切,CSS/HTML等

+1

但是,你不会发现如何制作漂亮的网站,该网站本身相当丑陋! – 2009-02-06 16:59:28

10

美丽的网站往往事先在图像编辑应用程序或在纸上存在和CSS + HTML的部分是最后一步,将您的设计转换为网络友好型版本。

+1

+1在触摸代码之前应对设计 – 2009-02-06 16:56:01

+0

我**更喜欢在设计完成之前开始开发,但通常情况并非如此! :( – Wayne 2009-02-07 19:02:35

0

关于CSS有很多好书。我的主要建议是先从一个有点连贯的设计开始。我通常在Photoshop中将潜在网站的主页完全布置,然后让客户批准该设计,然后再开始任何HTML或CSS。

一旦你有了一个所有人都认同的设计模板,CSS就会变成一个简单的技术问题,让它看起来与你的模型一样。

0

两个小技巧:

  1. 得到 “倒栽葱HTML和CSS” 的副本。这将是HTML和CSS最简单(也是最好)的介绍。你会明白什么时候使用什么。

  2. 浏览网页(nytimes.com,CSS zen ...)以获得绝佳视觉效果的灵感。

1

其他人有一些资源回答,但看看这个网站: http://www.csszengarden.com/

它显示了许多不同的布局只使用CSS。您可以下载源代码并进行检查。此外,请查看资源部分的教程和操作方法。

0

Smashing Magazine 有一些奇妙的资源按照他们的CSS最佳实践指南,并使用他们的'最好的'部分的灵感。这是我开始一个新的网页设计项目时的第一站。

6

这听起来像技术HTML和CSS提示不是你在找什么(但)。您可能想要查找有关基本图形设计原则的资源,或者特别关注网页设计原理。一旦掌握了图形设计的基础知识,就可以开始为项目勾画出设计。最初的设计可以像记事本上制作的一些草图一样简单。只有这样你才能开始设计页面的细节,并且最终你需要具备必要的HTML和CSS技能来实现设计。

我大致在同一个地方:我对HTML和CSS了解颇多,但我很难提出一个有吸引力的设计。一旦我有了(通常有很多其他人的帮助),我可以建立网站。

1

这不会帮助您拿出原创设计,但可能会有所帮助。

我对CSS布局的理解有一个最显着的增加来自于使用Firebug的“检查”功能。能够在“样式”标签中查看元素的计算样式,它在“布局”标签中的填充/边距/偏移量是(现在仍然是)巨大的资产。

就学习设计开发者而言,罗宾威廉斯的Non-Designer's Design Book是一个很好的起点。我拥有一份副本,并且肯定会将其推荐给任何希望以较为抽象的术语来理解设计的开发人员。

1

假设你是谁愿意做足够体面的设计开发,这里的东西我没有当我是在一个类似的立场:

  1. 学习XHTML和CSS得好:有很多很好的资源指出在这里的其他答案。基本上,这只需要作为开发人员的学习技能,你不应该有太多的问题。

  2. 从复制简约设计开始。他们周围有很多人。一个例子:http://vandelaydesign.com/blog/design/minimalistic-web-design/它应该帮助你建立自信和一些美学感。

  3. 一旦你建立了几个,混合和匹配!假设,你没有进行严肃的设计,你会感到惊讶,这可能会带给你多远。

祝你好运!

0

我认为你需要区分你的意图和你的实现。 CSS的东西只是一个实现细节,无非是一个交易工具。如果您已经创建了视觉上吸引人的网站,但它们不是基于CSS的,那么学习CSS是非常值得的。另一方面,如果您对页面布局和视觉美学缺乏经验,那么您需要阅读并尝试大量关于页面布局技术的内容,例如字体使用,空白区域,平衡等。

我保留的一个站点去设计灵感,只是为了阅读一些伟大的CSS黑客是http://www.csszengarden.com。但我从来没有勇气向该网站提交任何内容。享受和祝你好运:-)

0

阅读A List Apart。我从那里得到了一些最好的提示和技巧。

1

一个很主观的问题。什么是美丽的网站?我在大学学习艺术(美术不是设计),我讨厌我的网页设计。大多数人喜欢我所做的事情,但对我来说这是一个非常乏味的过程。

我和一位拥有计算机科学学士学位的核心程序员一起工作,他倾向于组织非常合理的网页。很多颜色(当然颜色都是有意义的)并弹出一切描述。你需要一把钥匙来理解他的网页。有些人喜欢他的设计,有些人不喜欢。

学习编码HTML和CSS是可行的。我最好的建议是找到你喜欢的东西并进行检查。从代码角度以及设计/审美角度。

有些人从来没有超越模仿阶段,但我认为如果你真的想成为一个优秀的设计师,你会吸收你喜欢的东西,没有比设计/开发网站更好的方法。练习,练习,练习或工作,工作,工作!你工作得越多,最终你自己的风格就会出现。

0

我会建议使用Web浏览器打开居住在:

http://delicious.com/

它经常与教程的链接上CSS和设计,你会发现自己花时间阅读和使用更新。

我发现自己在寻找不同设计的例子,然后走开并尝试自己使用它们 - 无论是网格系统还是简单的配色方案。美味真的是灵感和帮助的宝库。