What are the design patterns for HTML and CSS?

Question

I know this is a very broad question, but I just started with Ruby on Rails and still have a long way to go with CSS and HTML. There are many books on CSS and HTML templates, but I would like to know what really applies to actual web pages. For example, what is the best way to make a simple web page with a side menu, logo on top and some text below? Well, that seems silly, but are there many ways to do this, or not?

So how can I find out these patterns and what are the real patterns?

They will appreciate the offers of books, articles, etc.

Answer 1

here you can find some nice CSS templates:

http://www.csszengarden.com/

Answer 2

Actually in html and css there are no templates in the sense of oo.

I find this tutorial very useful: The design and code of your first website

There are many good free lessons on nettuts.

A very good book to start with:

Head First HTML with CSS and XHTML

Answer 3

It depends on the developer and the developer. So I’ll just tell you what I’m doing!

I actually stick with a very common template - open ANY layout from the contents!

In HTML goes ...

• Text
• <div/> containers with identifiers to be issued

And in CSS goes ...

• Layout for layout containers with ID'd and class'ed <div/>
• Colors, background images
• Fonts

This allows you to quickly change the entire page design without even touching HTML! And this reduces both your server traffic and loading time on client pages, because the CSS file can be cached, as it does not change as much as HTML does!

The published CSS Zengarden nate is a very good example of this template. The same unmodified HTML with dozens of CSS files with completely different external features!

This template also allows you to display the same unmodified HTML with automatically selected CSS files on huge displays, on small netbooks and on mobile devices. It could not be better if you ask me!

Answer 4

You might want to check out some CSS libraries.

I personally do not like to use them, because I have ways that I like to do, and sometimes they are not flexible enough for what I want to do. But since you are just getting started, they can help you get something that looks really fast, without having to worry about floating point errors or curling or any other CSS addictions that are easy to hit, but hard to recognize if You have not seen them before.

An example is Yahoo’s CSS UI Styles (YUI), which helps you customize many different grid layouts. To find more, I would look for "css framework" or "css library".

Another YUI resource that I think would be really useful for you is their template template library , which describes various ways to display common interface elements and gives you resources to implement them. This can help make your interface familiar to users and may not make you feel like you need to reverse engineer a drop-down list or something like that.

Answer 5

A rule of thumb should be to make the whole design in CSS, and HTML to be just HTML without resorting to the design. Thus, as indicated above, you can quickly change the design.

A good reference to how this works is the Zengarden CSS website at: http://www.csszengarden.com/

This is the site I used often when I learned all about CSS design.