我正在构建一个基于 Grails 技术的新网站。
关于我网站的图形设计，我计划使用专业网页设计师的服务，但同时，我需要自己做一些基本的图形设计，以便有一个“用户友好”的测试版本。
我已阅读 stackoverflow.com 网站，但无法下定决心。这是我发现的：
如何-do-you-choose-a-css-framework
什么是-the-best-css-grid-framework
can-someone-recommend-a-bells-and-whistles- css框架
什么是最好的- css-framework-and-are-they-worth-the-effort
但不幸的是，有很多相互矛盾的答案。
首先，有人说使用 CSS 框架是向后创作，并不是一件好事。其他人建议使用 YUI Grids、BluePrint、960 gs、YAML...许多人说 Compass 允许轻松开发 CSS 布局并可重用。
因此考虑到：
- 我是 CSS 世界的新手，我不打算成为一名网页设计师
- 我的布局应该是用户友好的（但不一定是很棒的 L&F）
- 它应该是可维护且易于改进的（由专业网页设计师）
- 易于实施（以便快速实现）
对于开始网站的网页设计，您有什么建议？
谢谢您的建议。
法比安
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
发布评论
评论（5）
首先，如果你不想成为一名网页设计师，我建议外包你的 CSS。您可以在多个网站上提供 HTML 或 Photoshop 设计并对其进行编码下一个盛大（1k）。或者免费获取 HTML/CSS 设计。
然后，您需要了解一件事，另外两件事您需要解决：
所有 HTML 都应该以语义和有效的方式编写：语义 = 正确排序的标题、列表、没有过多的 div 等； valid = 将通过 WC3 验证测试。这些都不是火箭科学，但仍然是一项需要学习的技能。 Andy Clarke 的超越 CSS 是一本关于语义 HTML/CSS 的好书。为了便于维护，HTML 和 CSS 应该整洁并一致缩进等。
您需要确定是否需要管理后端和数据库来管理内容，或者您是否只是构建一个包含以下内容的网站：静态页面（即 html 和 css 文件、图像和其他媒体等）。如果是前者，那就是一个完全不同的学习曲线:-)
你最擅长的技能是什么？如果您是一名优秀的设计师，请让其他人编写 HTML/CSS，或使用现成的模板（网络上有很多）并对其进行自定义。这是多列布局的良好开端。如果您是一名程序员，请学习使用类似 Django (Python)，钛 (Perl)，更小的东西Ruby（因为 Ruby on Rails 一开始有点大）或您最喜欢的语言。
优秀的 CSS 是一门手艺，简单性是本质，但如果您想学习足够的知识来入门，我的建议是：
理解继承（CSS 中的“级联”）以及任何事物的事实 可以是一个“块”，因此不要仅仅为了应用样式而使用大量嵌套的 div。相反，应将样式应用于 HTML 元素本身，或者仅当元素出现在父块中时才应用于该元素（例如侧边栏 div 中包含的菜单无序列表）；
了解块元素和内联元素 ( 从头开始进行网页设计是一个很好的学习资源，我推荐它） ，并且 CSS 可以改变这种行为；
在 Firefox 中测试，然后在 Internet Explorer 中测试。 >= IE7 还不错（但请注意 HasLayout）。在 IE 中无法调整的部分，请使用 条件注释 添加 CSS只有 IE 可以看到 - 永远使用 CSS hacks - .htc 文件 可以添加缺少的 IE 功能（例如，任何元素上的翻转样式）；
了解CSS 定位，并使用“固定”谨慎地；
将所有 CSS 放在一个文件中（对于初学者来说），并且不要在 HTML 中使用内联 CSS；
样式表单和表单fields 几乎是一项单独的技能:-)
使用背景图像添加样式，但也要了解您可以使用定位来偏移和重叠图像。不过，您需要使用 PNG 才能获得良好的透明度。哦，是的，不透明度看起来不错，但是目前需要非标准 CSS。尽管更灵活的 rgba (a=alpha) 方法得到了广泛支持。与圆角一样，但两者都值得使用。
我现在会避免 CSS 框架和重置 - 它们会让这个阶段的事情变得复杂，因为添加另一个 DSL 来学习（但是 阅读论据和优点和缺点）。为了避免烦人的默认边距和填充，我总是通过执行
html *, body * {margin: 0; 来重置所有内容。 padding 0;}然后在需要的地方构建填充和边距 - 到目前为止从来都不是问题:-)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:
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.
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 :-)
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:
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);
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;
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;
learn about CSS positioning, and use 'fixed' sparingly;
put all your CSS in one file (for starters), and don't use inline CSS in the HTML;
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 :-)立即获取适用于 Firefox 的 Firebug 插件！
主要 CSS 使用：
如果没有此工具，我将无法开发 CSS（以及其他 Web 相关技术）
Get Firebug plugin for Firefox now!
Primary CSS uses:
I would not be able to develop CSS (and other web related technologies) without this tool
看看 YUI CSS Reset/base/font/grid
http://developer.yahoo。 com/yui/3/cssreset/
Grid 960 也有一些不错的布局（在 google 中搜索他们的网站）
Take a look at YUI CSS reset/base/font/grid
http://developer.yahoo.com/yui/3/cssreset/
And Grid 960 also has some nice layouts (search for their site in google)
我不知道你正在运行什么操作系统，但如果你是 Mac 用户，我建议你使用一个很棒的免费 CSS 工具： Xyle 范围。它不是一个编辑器，而是一个 CSS 查看器/扫描器，它可以让您轻松浏览任何网页的 CSS 代码，这样您就可以更好地了解 CSS 的工作原理，并可以分析网络上任何做得好的布局。
CSSEdit（仅限 Mac）是编写级联表的一个很好的解决方案，易于使用，价格不贵，并且可达的功能。
Fireworks：我认为这是一个很棒的软件，可以用来起草布局并制作一些优秀的图形作品！
Dreamweaver：它是一种用于 Web 开发的一体化解决方案...它是一个非常出色的工具，可以轻松维护网站的远程版本与本地版本的同步。
Coda（仅限 Mac）是 Dreamweaver 的一个非常好的替代品，即使它不允许您管理和编辑.htaccess 文件！
对于您的网站编码，我建议使用 Dreamweaver 或 Coda，但另一个不错的选择是 BBEdit（仅限 Mac）。
I don't know what OS you are running, but if you are a Mac user, I suggest a great free tool for CSS: Xyle Scope. It's not an editor but a CSS viewer/scanner, it let you browse easily the CSS code of any web page so you can learn better how css works and you can analyze any well done layout on the web.
CSSEdit (Mac Only) is a good solution for writing Cascade sheets, easy to use, not expensive, and reach of features.
Fireworks: I think is a great software to draft your layouts and make some good graphical works!
Dreamweaver: it's an all in one solution for web developing ... it's a really great tool to easily maintain synched your remote version of the website with your local one.
Coda (Mac Only) is a very good alternative to Dreamweaver, even if it don't let you manage and edit the .htaccess files!
For coding your web site I suggest dreamweaver or Coda, but an other good alternative is BBEdit (Mac Only).
Bootstrap，它是我建议的最好的 CSS 框架，还有另一个称为 Foundation 的框架，但我更喜欢 Bootstrap，因为它在开发人员中很受欢迎并且可扩展。还有其他一些框架，我写了一篇关于它的博客，如果你想要的话也可以在这里阅读 http://www.andwecode.com/freebies/5-responsive-css-frameworks :)
Bootstrap, Its the best css framework i can suggest, there is another one called foundation also but i prefer bootstrap more since it is popular among developers and is extendible. There are few more other frameworks, I wrote a blog about that, Here Read it too if you want http://www.andwecode.com/freebies/5-responsive-css-frameworks :)