我需要什么CSS工具（框架，网格系统，IDE，..）来启动网页设计？ [英] What CSS tools (framework,grids system, IDE,..) do I need for starting web design?

问题描述

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

关于我的网站的图形设计，我打算使用专业网页设计师的服务，但同时我需要自己做一些基本的图形设计，以便拥有一个用户友好的beta版本。

我已经阅读了stackoverflow.com网站，但无法下定决心。这是我发现的：
如何做 - 选择一个css框架
什么是-the-best-css-grid-framework
can-someone-recommend-a-bells-and-whistles-css-framework
什么 - 是最最好的CSS框架和 - 是 - 他们价值最努力

但不幸的是，有很多矛盾的答案。
首先，有人说使用CSS框架是向后创作，而不是一件好事。其他人建议YUI Grids，BluePrint，960 gs，YAML ......许多人都说Compass允许轻松地开发CSS布局，并且可以重复使用。所以考虑到这点：

>

• 我是新来的CSS世界，我不打算成为网页设计师


• 我的布局应该用户友好（但不是必需的真棒L& F）


• 它应该是可保存的并且易于改进（由专业网页设计师）


• 简单（为了快速获得）

你对我的网站设计入门有何建议？ / p>

感谢您的建议。

Fabien

解决方案

首先，如果你不打算成为网页设计师，我会建议外包你的CSS。有几个网站，您可以提供HTML或Photoshop设计并将其编码在盛大（1k）下。或免费获取HTML / CSS设计。

然后你需要知道一件事，另外两件你需要解决：

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




2. 您需要确定您是否需要管理员后端和数据库管理内容，或者如果你只是建立一个由静态页面（即HTML和CSS文件，图像和其他媒体等）组成的网站。如果是前者，那是一个完整的学习曲线： - ）

如果您是一位优秀的设计师，请让其他人撰写HTML / CSS，或使用现成的模板（网上有很多）并对其进行自定义。这是多列布局的良好开端。如果你是程序员，学习使用像 Django （Python），钛（Perl），更小的东西在Ruby中（因为Ruby on Rails开始时有点大），或者使用您最喜欢的语言。

良好的CSS是一种工艺，简单是本质，但如果你想学习足够的开始，我的建议是：

1. 理解继承（CSS中的'cascade'）和 可以是'block'的事实，所以不要使用大量的嵌套div来应用样式。相反，将样式应用到HTML元素本身，或者仅在元素出现在父块中时才应用到元素（如包含在侧边栏div中的菜单无序列表）;

2. 
   

3. 了解块和内联元素 （从头开始的网页设计是一个很好的学习资源，我会推荐它），并且CSS可以改变这种行为;在Firefox中测试，然后在Internet Explorer中测试。 > = IE7没有那么糟糕（但要注意 HasLayout ）。你无法在IE中调整，使用有条件的评论来添加CSS只有IE才能看到 - 从不使用CSS hacks - .htc文件添加缺少的IE功能（例如任何元素上的滚动样式）都可用; 了解 CSS定位，并谨慎使用'fixed'; b $ b

4. 将所有的CSS放在一个文件中（对于初学者），并且不要在HTML中使用内联CSS; http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/ =nofollow noreferrer>造型表单和表单域几乎是一项单独的技能： - ）

使用背景图片添加样式，但也明白你可以关闭并使用定位重叠图像。不过，您需要使用PNG来获得更好的透明度。哦，是的， opacity 看起来不错，但现在需要非标准的CSS 。尽管更灵活的 rgba （a = alpha）方法得到广泛支持。像圆角一样，但都值得使用。

现在我会避免使用CSS框架并重置 - 在这个阶段，他们会通过添加另一个DSL来学习（但阅读参数和优点和缺点）。为了避免恼人的默认边距和填充，我总是通过执行 html *，body * {margin：0;填充0;} 然后在需要的地方建立填充和边距 - 到目前为止从未成为问题： - ）

I am building a new WebSite based on Grails technology.

Concerning the graphical design of my website, I plan to use services from a professional web designer but meanwhile, I need to do some basics graphical design myself in order to have a "user-friendly" beta-version.

I have read through the stackoverflow.com site but couldn't make up my mind. Here is what I have found out: 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

But unfortunately there are many contradictory answers. First, some say that using CSS framework is backwards authoring and not a good thing. Others advice YUI Grids, BluePrint, 960 gs, YAML...And many say that Compass allows to develop CSS layouts easily and reusable.

So considering that:

• I am new to the CSS world and I do not intend to be a web designer
• My layout should be user-friendly (but not necessary awesome L&F)
• It should be maintanable and easily improvable (by a professionnal web designer)
• Easy to implement (in order to have something quickly)

What do you advice me for getting started with the web design of my site?

Thank you for your advices.

Fabien

解决方案

First, if you don't intend to be a web designer, I'd suggest outsourcing your CSS. There are several websites where you can supply HTML or a Photoshop design and have it coded up for well under a grand (1k). Or get HTML/CSS designs free.

Then there is one thing you need to know and another two you need to work out:

1. all HTML should be written in a semantic and valid manner: semantic = properly ordered headings, lists, no excessive divs etc.; valid = will pass WC3 validation tests. None of this is rocket science, but is still a skill that needs to be learned. Andy Clarke's Transcending CSS is a great book on semantic HTML/CSS. For ease of maintenance, the HTML and CSS should be tidy and consistently indented, etc.

2. you need to determine whether you'll be needing an admin backend and database for managing content, or if you're just building a site consisting of static pages (i.e. html and css files, images and other media etc.). If it's the former, that's a whole other learning curve :-)

3. what are your best skills? If you're a good designer, get other people to write the HTML/CSS, or use a ready-made template (there are many on the web) and customise it. Here's a good start for multi-column layouts. If you're a programmer, learn to use a framework like Django (Python), Titanium (Perl), something smaller in Ruby (because Ruby on Rails is a bit big to start with) or one in your favourite language.

Good CSS is a craft, and simplicity is the essence, but if you want to learn enough to get started, my advice would be to:

1. understand inheritance (the 'cascade' in CSS) and the fact that anything can be a 'block', so don't use lots of nested divs just to apply a style. Instead, apply the style to the HTML element itself, or to the element only when it appears in a parent block (like a menu unordered list contained in a sidebar div);

2. learn about block and inline elements (Web Design from Scratch is a great learning resource and I'd recommend it), and that CSS can change this behaviour;

3. test in Firefox, then test in Internet Explorer. >= IE7's not so bad (but look out for HasLayout). What you can't tweak to get right in IE, use conditional comments to add CSS that only IE can see - never use CSS hacks - .htc files that add missing IE functionality (e.g. rollover styles on any element) are available;

4. learn about CSS positioning, and use 'fixed' sparingly;

5. put all your CSS in one file (for starters), and don't use inline CSS in the HTML;

6. styling forms and form fields is almost a separate skill :-)

Use background images to add style, but also understand that you can offset and overlap images using positioning. You'll need to use PNGs for nice transparency, though. Oh yes, and opacity looks nice, but requires non-standard CSS for now. although the more flexible rgba (a=alpha) method is widely-supported. As do rounded corners, but both worth using.

I'd avoid CSS frameworks and resets for now - they'll complicate things at this stage by adding yet another DSL to learn (but read the arguments and the pros and cons). To avoid annoying default margins and padding, I always reset everything by doing html *, body * {margin: 0; padding 0;} then build padding and margins back in wherever needed - never been a problem so far :-)

这篇关于我需要什么CSS工具（框架，网格系统，IDE，..）来启动网页设计？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！