The basic idea is that you use the color picker on the left side of the Web Page Design Aid screen to select a color which will be shown in the solid-color rectangle above the column of setting values (near the top center of the page).

Clicking on one of these buttons will set the Background or Text color as appropriate to the color currently shown in the solid-colored rectangle (and whose Hex color value is shown in the last text box in the column below it):

You may change the font family of the Text and the Headers with the drop-down list controls. The font families will likely be the ones installed on the computer from which you are viewing this page. The ultimate viewers of the page you are designing, of course, may not have the exact set of fonts you have, so test with multiple browsers on multiple platforms.

The controls to set Text and Header font size, and the Panel margins and padding, are regular <input> text boxes, and take standard CSS values. e.g. font size can be specified as absolute, relative, length or percentage value. If you provide an illegal value, it will simply be ignored (which should result in some unexpected visual effect).

The button is a bit special as it needs a lot of screen space to work with. So when you click it, part of the screen will be replaced with a text box, wherein you can type the text you'd like to see rendered.

I suggest you open a text editor window, and create/edit your text there. When it is to your liking, you can use the button to view the HTML in the panel, select it (Ctrl-C in Windows, Command-C in OS/X), and then paste the text from your editor window into it. That way, you won't loose your changes if you refresh the window.

The Headers are defined with CSS id of 'hdr1'. Thus if the text you are entering uses headers, and you want them to respond to the Header change controls, you need to define them something like this:

<h2 id='hdr1'> Your header here </h2>

To preview your result after you've made your desired changes, just drag the scrollbar (right edge of your browser) to the bottom of the page and you will get a pretty good idea of how your design choices look. The "Screen" part of the page is sized to 100%, so all my color controls should scroll right off the top.

Kudos to John Dyer, who wrote the spiffy color picker in Javascript. I barely changed it at all for use on my page. He was kind enough to make it available under the MIT copyright, which allows for free reuse (see the Javascript source files). Here's his site:

http://johndyer.name/post/2007/09/PhotoShop-like-JavaScript-Color-Picker.aspx

If you find bugs, or want to make a suggestion for improvement (or otherwise), just send me email. I'll try to reply, though I won't promise to do much more than fix obvious bugs. This was a one-day hack for me to use on a Website design project of my own. It did the job, and I'm on to other things now...