Turn Your Sketches into CSS Based Websites

Written by Amit Agarwal on Jul 19, 2012

Most online WYSIWYG editors offer 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.

CSS based WYSIWYG editor Yahoo! Grids

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.

Related: List of Free Website Building Tools

Subscribe to our Email Newsletter