2

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

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

我已经阅读了 stackoverflow.com 网站，但无法下定决心。这是我发现的： 你如何选择一个css框架 什么是最好的css网格框架 可以有人推荐一个钟声和口哨css框架 什么是最好的 CSS 框架和他们值得付出的努力

但不幸的是，有许多相互矛盾的答案。首先，有人说使用 CSS 框架是逆向创作，不是一件好事。其他人建议 YUI Grids、BluePrint、960 gs、YAML ......许多人说 Compass 允许轻松开发 CSS 布局并且可重用。

所以考虑到：

  • 我是 CSS 世界的新手，我不打算成为一名网页设计师
  • 我的布局应该是用户友好的（但不需要很棒的 L&F）
  • 它应该是可维护且易于改进的（由专业的网页设计师）
  • 易于实施（为了快速获得一些东西）

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

谢谢你的建议。

法比安

4

5 回答 5

15

首先，如果您不打算成为网页设计师，我建议您将 CSS 外包。有几个网站可以提供 HTML 或 Photoshop 设计，并将其编码为低于盛大 (1k)。或者免费获得 HTML/CSS 设计。

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

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

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

  3. 你最好的技能是什么？如果您是一名优秀的设计师，请让其他人编写 HTML/CSS，或使用现成的模板（网上有很多）并对其进行自定义。这是多列布局的良好开端。如果您是程序员，请学习使用Django (Python)、Titanium (Perl)之类的框架、Ruby 中较小的框架（因为 Ruby on Rails 开始时有点大）或您最喜欢的语言中的框架。

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

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

  2. 了解块元素和内联元素（Web Design from Scratch是一个很好的学习资源，我会推荐它），并且 CSS 可以改变这种行为；

  3. 在 Firefox 中测试，然后在 Internet Explorer 中测试。>= IE7 还不错（但请注意HasLayout）。在 IE 中您无法调整的内容，使用条件注释添加只有 IE 才能看到的 CSS -永远不要使用 CSS hack -添加缺失 IE 功能（例如，任何元素上的翻转样式）的.htc 文件可用；

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

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

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

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

我暂时避免使用 CSS 框架和重置——它们会在这个阶段通过添加另一个 DSL 来使事情复杂化（但请阅读论点和利弊）。为了避免烦人的默认边距和填充，我总是通过这样做来重置所有内容，html *, body * {margin: 0; padding 0;}然后在需要的地方重新构建填充和边距 - 到目前为止从来没有问题:-)

于 2009-10-23T12:41:46.383 回答
3

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

立即获取Firefox 的Firebug插件！

主要的 CSS 用途：

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

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

于 2009-10-23T11:28:07.750 回答
1

看看 YUI CSS reset/base/font/grid

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

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

于 2009-10-23T09:49:13.947 回答
0

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

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

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

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

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

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

于 2009-10-24T09:20:21.897 回答
0

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

于 2013-12-26T17:20:32.300 回答