I know that is a very embracing question, but I have just started with Ruby on Rails, and still have a long way with CSS and HTML. There are lots of books about CSS and HTML patterns, but I would like to know what is really applied to actual webpages. For example, what's the best way of doing a simple webpage with a lateral menu, a logo on the top, and some text below? Ok, it seems stupid, but there's lot of ways of doing that, or not ?
我知道这是一个很受欢迎的问题，但是我刚刚开始使用Ruby on Rails，并且在CSS和HTML方面还有很长的路要走。有很多关于CSS和HTML模式的书，但是我想知道什么是真正适用于实际的网页。例如，做一个简单的网页时，最好的方法是什么?好吧，这看起来很愚蠢，但是有很多方法可以做到，或者不可以?
So, how can I learn this patterns and what are the real patterns ?
那么，我该如何学习这种模式和真正的模式呢?
Would appreciate suggestions of books, articles, etc.
如有书籍、文章等建议，将不胜感激。
5 个解决方案
#1
3
you can find some good css templates here:
你可以在这里找到一些好的css模板:
http://www.csszengarden.com/
#2
3
Actually in html and css there are not patterns in the oo sense.
实际上，在html和css中，没有oo意义上的模式。
I find this tutorial very useful: Design and Code your first website
我发现本教程非常有用:设计并编写您的第一个网站
The nettuts website has a lot af very good free tutorials.
nettuts网站有很多非常好的免费教程。
A very good book to begin is:
一本非常好的书开始是:
Head First HTML with CSS and XHTML
首先使用CSS和XHTML创建HTML
#3
2
It varies from developer to developer. So I'll just tell you what I'm doing!
它因开发人员而异。我来告诉你我在做什么!
I'm actually following a very common pattern - separate ANY layout from the contents!
我实际上遵循一个非常常见的模式——将任何布局与内容分开!
Into the HTML goes...
HTML 5是……
- Text
- 文本
-
<div/>containers with IDs to be layouted - 需要清洗的id容器
And in the CSS goes...
在CSS中。
- Layout for the ID'd and class'ed
<div/>layout containers - ID d和class'ed 布局容器
- Colors, Background images
- 颜色,背景图像
- Fonts
- 字体
It allows to rapidly change the whole page design without even touching the HTML! And it decreases both your server's traffic and the load time on the client pages, because the CSS file can be cached, since it does not change as much as the HTML does!
它允许快速地改变整个页面设计，甚至不触及HTML!它同时降低了服务器的流量和在客户端页面上的加载时间，因为CSS文件可以被缓存，因为它不会像HTML那样改变太多!
The CSS Zengarden nate posted is a very nice example of this pattern. The same unmodified HTML with dozens of CSS files with totally different looks!
CSS Zengarden nate发布的就是一个很好的例子。相同的未修改的HTML与数十个CSS文件，完全不同的外观!
This pattern also allows the same unmodified HTML to be displayed with automatically selected CSS files on huge displays, on small netbooks and on mobile devices. Can't be any better if you ask me!
此模式还允许在大型显示器、小型上网本和移动设备上使用自动选择的CSS文件显示未修改的HTML。如果你问我，就再好不过了!
#4
1
You might want to check out some CSS libraries.
您可能想要查看一些CSS库。
I don't personally like using them because I have ways that I like to do things and sometimes they aren't flexible enough for what I want to do. But since you're just starting out they might help you get something that looks good up really fast without having to worry about float drop bugs or margin collapsing or any other CSS quirks that are easy to hit but hard to recognize if you haven't seen them before.
我个人并不喜欢使用它们，因为我喜欢做一些事情，有时它们不够灵活，不适合我想做的事情。但是，因为你刚刚开始，它们可能会帮助你得到一些看起来非常好的东西，而不需要担心浮点数、页边折叠或任何其他CSS特性，这些特性很容易被击中，但如果你以前没有见过它们，就很难识别。
An example would be the Yahoo User Interface (YUI) Grids CSS that will help you set up many different kinds of grid layouts. To find more, I would search for "css framework" or "css library".
一个例子是Yahoo用户界面(YUI)网格CSS，它将帮助您建立许多不同类型的网格布局。为了找到更多，我将搜索“css框架”或“css库”。
Another YUI resource I think would be really useful for you would be their design pattern library, which documents different ways to display common interface items and gives you resources to go implement them. This can help make your interface look familiar to users and can keep you from feeling like you have to redesign a drop-down box or something.
另一个YUI资源我认为对您非常有用的是他们的设计模式库，它记录了显示公共接口项的不同方式，并提供了实现它们的资源。这可以让你的界面看起来很熟悉，也能让你不觉得你需要重新设计下拉框之类的东西。
#5
0
The rule of thumb should be to do all design in CSS and HTML is just HTML without calls to design. That way, like referenced above, you can change design rapidly.
经验法则应该是用CSS来做所有的设计，而HTML就是不需要调用设计的HTML。这样，就像上面提到的，您可以快速地更改设计。
A good reference for how this works is the Zengarden CSS site at: http://www.csszengarden.com/
Zengarden CSS站点有一个很好的参考:http://www.csszengarden.com/
This is a site I used often as I learned the ins and outs of CSS design.
这是我在学习CSS设计时经常使用的站点。
#1
3
you can find some good css templates here:
你可以在这里找到一些好的css模板:
http://www.csszengarden.com/
#2
3
Actually in html and css there are not patterns in the oo sense.
实际上，在html和css中，没有oo意义上的模式。
I find this tutorial very useful: Design and Code your first website
我发现本教程非常有用:设计并编写您的第一个网站
The nettuts website has a lot af very good free tutorials.
nettuts网站有很多非常好的免费教程。
A very good book to begin is:
一本非常好的书开始是:
Head First HTML with CSS and XHTML
首先使用CSS和XHTML创建HTML
#3
2
It varies from developer to developer. So I'll just tell you what I'm doing!
它因开发人员而异。我来告诉你我在做什么!
I'm actually following a very common pattern - separate ANY layout from the contents!
我实际上遵循一个非常常见的模式——将任何布局与内容分开!
Into the HTML goes...
HTML 5是……
- Text
- 文本
-
<div/>containers with IDs to be layouted - 需要清洗的id容器
And in the CSS goes...
在CSS中。
- Layout for the ID'd and class'ed
<div/>layout containers - ID d和class'ed 布局容器
- Colors, Background images
- 颜色,背景图像
- Fonts
- 字体
It allows to rapidly change the whole page design without even touching the HTML! And it decreases both your server's traffic and the load time on the client pages, because the CSS file can be cached, since it does not change as much as the HTML does!
它允许快速地改变整个页面设计，甚至不触及HTML!它同时降低了服务器的流量和在客户端页面上的加载时间，因为CSS文件可以被缓存，因为它不会像HTML那样改变太多!
The CSS Zengarden nate posted is a very nice example of this pattern. The same unmodified HTML with dozens of CSS files with totally different looks!
CSS Zengarden nate发布的就是一个很好的例子。相同的未修改的HTML与数十个CSS文件，完全不同的外观!
This pattern also allows the same unmodified HTML to be displayed with automatically selected CSS files on huge displays, on small netbooks and on mobile devices. Can't be any better if you ask me!
此模式还允许在大型显示器、小型上网本和移动设备上使用自动选择的CSS文件显示未修改的HTML。如果你问我，就再好不过了!
#4
1
You might want to check out some CSS libraries.
您可能想要查看一些CSS库。
I don't personally like using them because I have ways that I like to do things and sometimes they aren't flexible enough for what I want to do. But since you're just starting out they might help you get something that looks good up really fast without having to worry about float drop bugs or margin collapsing or any other CSS quirks that are easy to hit but hard to recognize if you haven't seen them before.
我个人并不喜欢使用它们，因为我喜欢做一些事情，有时它们不够灵活，不适合我想做的事情。但是，因为你刚刚开始，它们可能会帮助你得到一些看起来非常好的东西，而不需要担心浮点数、页边折叠或任何其他CSS特性，这些特性很容易被击中，但如果你以前没有见过它们，就很难识别。
An example would be the Yahoo User Interface (YUI) Grids CSS that will help you set up many different kinds of grid layouts. To find more, I would search for "css framework" or "css library".
一个例子是Yahoo用户界面(YUI)网格CSS，它将帮助您建立许多不同类型的网格布局。为了找到更多，我将搜索“css框架”或“css库”。
Another YUI resource I think would be really useful for you would be their design pattern library, which documents different ways to display common interface items and gives you resources to go implement them. This can help make your interface look familiar to users and can keep you from feeling like you have to redesign a drop-down box or something.
另一个YUI资源我认为对您非常有用的是他们的设计模式库，它记录了显示公共接口项的不同方式，并提供了实现它们的资源。这可以让你的界面看起来很熟悉，也能让你不觉得你需要重新设计下拉框之类的东西。
#5
0
The rule of thumb should be to do all design in CSS and HTML is just HTML without calls to design. That way, like referenced above, you can change design rapidly.
经验法则应该是用CSS来做所有的设计，而HTML就是不需要调用设计的HTML。这样，就像上面提到的，您可以快速地更改设计。
A good reference for how this works is the Zengarden CSS site at: http://www.csszengarden.com/
Zengarden CSS站点有一个很好的参考:http://www.csszengarden.com/
This is a site I used often as I learned the ins and outs of CSS design.
这是我在学习CSS设计时经常使用的站点。