Magazine-style layouts

Web design has developed a look of its own over the last decade. But although it's possible for designers to break away from tradition, when they do they tend to abandon one of the primary tools of print design - the grid.

Magazines and newspapers have different rules, and even when those rules are broken they're broken in an orderly fashion. A 'callout' or 'boxout' may take up several columns, but they still fit into an overall grid system.

Originally, HTML wasn't designed for formatting content in such a regimented manner, but CSS enables you to make those columns to create a kind of grid. However, you will still need to fix certain aspects of that layout to successfully reproduce the look of magazine pages.

For example, text doesn't automatically flow from column to column, and you can't 'wrap' text around an object that breaks across more than one 'column' (or <div> container) either. The solution in both cases is to fake it.

In this tutorial you'll take a magazine layout and translate it for the web using Dreamweaver. The end result will be a CSS-powered, easy-to-tweak template.

Click here to download the tutorial for free

Want to learn more about CSS and JavaScript? Check out the top CSS and JavaScript tutorials and examples of CSS from our sister site Creative Bloq.