Turn Your Sketches into CSS Based Websites

Enviado por Rigo a través de Google Reader:

Turn Your Sketches into CSS Based Websites

vía Digital Inspiration - Technology Blog de Amit el 23/12/09

Most online WYSIWYG editors work like this — you get a Microsoft Word style interface where you can add text, tables, images, etc. and the editor will then generate the corresponding HTML code without you having to learn any of the programming languages.

Create CSS Based Web Templates Online

WYSIWYG editors will generally write the code using HTML tables but if you are looking to create a pure CSS based layout, where the presentation styles are separate from the actual content, you should check out Drawter.

Think of Drawter as a white canvas where you can actually "draw a web page" using your mouse. For instance, if you want your website to have a fixed-size header, a left sidebar and maybe a footer, you can simply drag-n-draw these areas on the canvas using the <div> tag and generate the code.

Each tag in Drawter is presented as a separate layer and you can draw one layer over the another. For instance, you can put the <p> layer over <div> which can also contain the <img> layer to hold images or <h1> for headlines. Obviously, you need to have some understanding of HTML and CSS in order to use these tools.

Grids Builder is another nice tool that you may use to quickly create CSS based layouts though it supports only basic designs — -- your template can have a header, multiple columns for content, sidebar and a footer. Here're some sample templates created using the Grids tool.

Turn Your Sketches into CSS Based Websites

Originally published at Digital Inspiration by Amit Agarwal.