开始网页设计需要哪些 CSS 工具（框架、网格系统、IDE、..）？

Question

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

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

我已经阅读了 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）
• 它应该是可维护且易于改进的（由专业的网页设计师）
• 易于实施（以便快速获得）

对于开始我的网站的网页设计，您有什么建议？

感谢您的建议。

法比恩

Answer 1

首先，如果您不打算成为网页设计师，我建议您外包 CSS。有几个网站可以supply HTML or a Photoshop design and have it coded 以低于盛大（1k）。或get HTML/CSS designs free。

那么你需要知道一件事，另外两件事你需要解决：

1. 所有 HTML 都应该以语义和有效的方式编写：语义 = 正确排序的标题、列表、没有过多的 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 有点大）这样的框架，或者使用您最喜欢的语言。

好的 CSS 是一门手艺，简单才是本质，但如果你想学足够多的东西来入门，我的建议是：

1. 了解继承（CSS 中的“级联”）以及 anything 可以是“块”这一事实，因此不要为了应用样式而使用大量嵌套的 div。相反，将样式应用于 HTML 元素本身，或仅当元素出现在父块中时（如包含在侧边栏 div 中的菜单无序列表）；

2. 了解block and inline elements（Web Design from Scratch 是一个很好的学习资源，我会推荐它），以及 CSS 可以改变这种行为；

3. 在 Firefox 中测试，然后在 Internet Explorer 中测试。 >= IE7 还不错（但请注意HasLayout）。在 IE 中您无法调整的内容，使用 conditional comments 添加只有 IE 可以看到的 CSS - 从不 使用 CSS hack - .htc files 添加缺少的 IE 功能（例如翻转样式任何元素）都可用；

4. 了解CSS positioning，谨慎使用“固定”；

5. 将所有 CSS 放在一个文件中（对于初学者），不要在 HTML 中使用内联 CSS；

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

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

我暂时避免使用 CSS 框架和重置 - 在这个阶段它们会通过添加另一个 DSL 来学习（但 read the arguments 和 pros and cons）使事情变得复杂。为了避免烦人的默认边距和填充，我总是通过执行 html *, body * {margin: 0; padding 0;} 重置所有内容，然后在需要的地方重新构建填充和边距 - 到目前为止从来没有问题:-)

Answer 2

对于开始我的网站的网页设计，您有什么建议？

立即获取Firebug Firefox 插件！

主要的 CSS 用途：

• 查看适用的 CSS 规则
• 实时更改 CSS 并查看效果
• 检查其他网站，看看他们是如何做事的

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

Answer 3

看看 YUI CSS reset/base/font/grid

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

而且 Grid 960 也有一些不错的布局（在 google 中搜索他们的网站）

Answer 4

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

CSSEdit（仅限 Mac）是编写 Cascade 工作表的好解决方案，易于使用、价格不贵且功能齐全。

Fireworks：我认为这是一个很棒的软件，可以用来起草你的布局并制作一些优秀的图形作品！

Dreamweaver：它是用于 Web 开发的多合一解决方案......它是一个非常棒的工具，可以轻松地保持远程版本的网站与本地版本的同步。

Coda（仅限 Mac）是 Dreamweaver 的一个很好的替代品，即使它不允许您管理和编辑 .htaccess 文件！

对于您的网站编码，我建议使用 Dreamweaver 或 Coda，但另一个不错的选择是 BBEdit（仅限 Mac）。

Answer 5

Bootstrap，它是我能推荐的最好的 css 框架，还有一个叫做基础的框架，但我更喜欢 bootstrap，因为它在开发人员中很流行并且是可扩展的。还有一些其他的框架，我写了一篇关于这个的博客，如果你想要这里也可以阅读 http://www.andwecode.com/freebies/5-responsive-css-frameworks :)