启动网页设计需要哪些CSS工具(框架,网格系统,IDE,...)?

时间:2009-10-23 09:45:51

标签: css grails css-frameworks

我正在构建一个基于Grails技术的新WebSite。

关于我网站的图形设计,我计划使用来自专业网页设计师的服务,但同时,我需要自己做一些基本的图形设计才能拥有“用户友好”的beta版本。

我已经阅读了stackoverflow.com网站,但无法下定决心。这是我发现的: how-do-you-choose-a-css-framework what-is-the-best-css-grid-framework can-someone-recommend-a-bells-and-whistles-css-framework what-is-the-best-css-framework-and-are-they-worth-the-effort

但不幸的是,有很多矛盾的答案。 首先,有人说使用CSS框架是向后创作而不是好事。其他建议YUI Grids,BluePrint,960 gs,YAML ...许多人说Compass允许轻松开发CSS布局并可重复使用。

所以考虑到:

  • 我是CSS世界的新手,我不打算成为网页设计师
  • 我的布局应该是用户友好的(但不一定非常棒的L& F)
  • 它应该是可维护的并且很容易改进(由专业的网页设计师)
  • 易于实施(为了快速拥有)

对于我开始使用网站的网页设计,您有什么建议?

感谢您的建议。

法比安

5 个答案:

答案 0 :(得分:15)

首先,如果您不打算成为网页设计师,我建议外包您的CSS。有几个网站可以supply HTML or a Photoshop design and have it coded在盛大(1k)之下。或get HTML/CSS designs free

然后有一件事你需要知道,另外两件你需要解决:

  1. 所有HTML都应该以语义和有效的方式编写:semantic =正确排序的标题,列表,没有过多的div等; valid =将通过WC3验证测试。这些都不是火箭科学,但仍然是一项需要学习的技能。 Andy Clarke的Transcending CSS是一本关于语义HTML / CSS的好书。为了便于维护,HTML和CSS应该整洁并且一致地缩进等等。

  2. 您需要确定是否需要管理后端和数据库来管理内容,或者您​​是否只是构建一个由静态页面组成的站点(即html和css文件,图像和其他媒体等) )。如果它是前者,那就是另一个学习曲线: - )

  3. 你最好的技能是什么?如果您是一名优秀的设计师,请让其他人编写HTML / CSS,或使用现成的模板(网上有很多)并自定义它。这是a good start for multi-column layouts。如果您是程序员,请学习使用Django(Python),Titanium(Perl),something smaller in Ruby这样的框架(因为Ruby on Rails开头有点大)或者一个用你最喜欢的语言。

  4. 好的CSS是一种工艺,简洁是本质,但如果你想学习足够的知识,我的建议是:

    1. 了解继承(CSS中的“级联”)以及任何可以是“块”的事实,因此不要使用大量嵌套div来应用样式。相反,将样式应用于HTML元素本身,或仅在元素出现在父块中时应用(如边栏div中包含的菜单无序列表);

    2. 了解block and inline elementsWeb Design from Scratch是一个很好的学习资源,我推荐它),CSS可以改变这种行为;

    3. 在Firefox中测试,然后在Internet Explorer中测试。 > = IE7并不是那么糟糕(但请注意HasLayout)。您无法调整以在IE中正确使用,使用conditional comments添加只有IE可以看到的CSS - 从不使用CSS hacks - .htc files添加缺少的IE功能(例如,任何元素上的翻转样式)都可用;

    4. 了解CSS positioning,并谨慎使用'固定';

    5. 将所有CSS放在一个文件中(对于初学者),不要在HTML中使用内联CSS;

    6. styling forms和表单字段几乎是一项单独的技能: - )

    7. 使用背景图像添加样式,但也了解您可以使用定位来偏移和重叠图像。但是,您需要使用PNG才能获得良好的透明度。哦,是的,opacity看起来不错,但现在requires non-standard CSS。虽然更灵活的rgba(a = alpha)方法得到广泛支持。和rounded corners一样,但都值得使用。

      我现在避免使用CSS框架和重置 - 他们会在这个阶段通过添加另一个要学习的DSL(但是read the argumentspros and cons)来复杂化。为了避免恼人的默认边距和填充,我总是通过执行html *, body * {margin: 0; padding 0;}重置所有内容,然后在需要的地方重新构建填充和边距 - 到目前为止从未成为问题: - )

答案 1 :(得分:3)

  

对于我开始使用网站的网页设计,您有什么建议?

立即获取Firefox的Firebug插件!

主要CSS使用:

  • 查看适用的CSS规则
  • 实时更改CSS并查看效果
  • 检查其他网站以了解他们的工作方式

如果没有这个工具,我将无法开发CSS(和其他网络相关技术)

答案 2 :(得分:1)

看一下YUI CSS reset / base / font / grid

http://developer.yahoo.com/yui/3/cssreset/

Grid 960也有一些不错的布局(在google中搜索他们的网站)

答案 3 :(得分:0)

我不知道你在运行什么操作系统,但如果你是Mac用户,我建议使用一个很棒的CSS免费工具:Xyle Scope。它不是编辑器而是CSS查看器/扫描仪,它可以让您轻松浏览任何网页的CSS代码,这样您就可以更好地了解css的工作原理,并且可以分析网上任何做得好的布局。

CSSEdit(仅适用于Mac)是一种很好的解决方案,可用于编写Cascade工作表,易于使用,价格昂贵且功能齐全。

Fireworks:我认为这是一个很好的软件来起草您的布局并制作一些好的图形作品!

Dreamweaver:它是一个用于网页开发的一体化解决方案......它是一个非常棒的工具,可以轻松地将您的远程版网站与本地网站同步。

Coda(仅限Mac)是Dreamweaver的一个非常好的替代品,即使它不允许您管理和编辑.htaccess文件!

对于您的网站编码,我建议使用Dreamweaver或Coda,但另一个不错的选择是BBEdit(仅适用于Mac)。

答案 4 :(得分:0)

Bootstrap,它是我能提出的最好的css框架,还有另一个叫做基础,但我更喜欢bootstrap,因为它在开发人员中很受欢迎并且是可扩展的。还有更多的其他框架,我写了一篇博客,如果你想http://www.andwecode.com/freebies/5-responsive-css-frameworks,请在这里阅读:)