Copyright: Helpfile Generated by HelpWriter!


Crayon 3.0

      Overview of Crayon 3.0

      What is Hex Code?

      Selecting Colours

      Copying the Colour Code to Your Design Page

      Commands, Keystrokes, and Shortcuts

      Step by Step with Crayon

Author: A. Loftin - Help file generated by VB HelpWriter.


Overview of Crayon 3.0

Purpose of Crayon

Crayon was designed to cure the headache of trying to figure out what the codes are for colours when designing HTML documents (web pages).  Crayon allows you to select a colour that pleases you and automatically displays the code for the colour as it appears in the HTML document source.

For example, let's say you're doing a home page and you want to select the colours for your background, text, and links.  The code would look something like this:

<BODY BGCOLOR="#000000" TEXT="#FFFFFF" LINK="#00FF00"ALINK="#FF0000" VLINK="#0000FF">

The strange looking code inside the quotation marks are the Hex codes for the colours used on your  home page.  In the above example, the background of the page is Black, the normal text is White,  links are Green, active links are Red, and the visited links are Blue.

How would you know this code if you're not a programmer?  You'd have to guess, or use some huge program that does it for you.  But with Crayon and a little basic knowledge of HTML, you can design your own web page in something as simple (and inexpensive) as Notepad!

New Features in Crayon 3.0:

•	Select HTML or CSS format (File Menu).

•	Copy either the full colour code for your document or single colour codes (Edit Menu).

Author: A. Loftin - Help file generated by VB HelpWriter.


HexCode
What the heck is Hex Code?

Hex code is a mysterious coding process that turns values such as colour into hexidecimal numbers that the computer can read.

Hex codes are used in HTML documents (web pages) to tell the interpreting program what colour an object should be.

Author: A. Loftin - Help file generated by VB HelpWriter.


Selecting Colours

Selecting colours is simple, and can be done in two ways:

One way is to use the slider bars.  The slider bars assume you know a little bit about how primary colours combine to create another colour.  (For example, equal amounts of Red and Blue make Purple.)  Just slide the bars back and forth until you've gotten the colour and shade you want.  The Hex code for that colour will display.  Copy and paste the Hex colour code to your HTML editor and place the code between the applicable quotation marks.

Note:  If you know your colour wheel, then we both know Green and Red do NOT make Orange.  But the computer thinks it does (since it works with light reflection), so go with it. :)

The other way is to press the View All Colours button.  Your Windows colour box will display.  Simply select the colour you want and click OK.  The colour will display in the Colour box and the Hex Code will adjust accordingly.

Author: A. Loftin - Help file generated by VB HelpWriter.


Copying Colour to Your Design Page
Copying the Colour Code to Your Design Page

Once you've found the colours you want and they're displayed in the Colour box, you're ready to copy the colour codes into your web document:

The default format for colour copying is set to HTML. If you're copying the code to this type of document, simply select Edit and Copy Colour Code from the Menu or press Ctrl+C.  The entire HTML <BODY> line will be copied to the Clipboard with all the selected colours and all you have to do is Paste it to the page containing your HTML code, replacing the <BODY> line.

If you're placing the code into a CSS (Cascading Style Sheet), click File, Style, and CSS, then perform the copy command as shown above.

If you only want the code for one item, select that item. Then click Edit and Copy Colour Only or press Ctrl+L.  Only the hex code for that particular item will be copied to the clipboard.

Author: A. Loftin - Help file generated by VB HelpWriter.


Hotkeys
Commands, Keystrokes, and Shortcuts

Hopefully, this program will prove to be as simple to use as a spoon.  But just to make sure, here's a list of all the possible commands you can use to get around in it.

Select Item to Colour - do any of the following:

•	Left-click ("regular" mouse-click) the item in the display box to be coloured (background, text, link, active link, visited link)

•	Press Select Item and check the item to be coloured

•	Press Alt+E or Left-Click the Edit menu item, select Select Item, and check the item to be coloured.

View All Colours - To bring up the Windows colour box, do any of the following:

•	Press Alt+V, or

•	Tab to or Left-Click the View all Colours button in the window.  The colour box will display.

Copy the Colour Code to the Clipboard - do any of the following:

•	Press  Ctrl+C

•	Press Alt+E or Left-Click the Edit menu item and select Copy Colour Code

Copy Only the Colour Code for a particular item - do the following:

•	Click on the item or select it from the menu.

•	Press Ctrl+L or click Copy Colour Only in the Edit menu.

Reset the Colour - do any of the following:

•	Press Alt+R

•	Tab to or Left-Click the Reset button.  The Colour box will return to the default Black.

•	Press Alt+E or Left-Click the Edit menu item and select Reset Colours

Exit the Program - do any of the following:

Press Alt+X

•	Tab to or Left-Click the Exit button in the window

•	Press Alt+F or Left-Click the File menu item and select Exit

Get Help - do any of the following:

•	Press the F1 function key to get the Help Contents

•	Press Alt+H or Left-Click the Help menu item and select Help Contents

Author: A. Loftin - Help file generated by VB HelpWriter.


Step by Step with Crayon

Now that you've gotten familiar with the capabilities and commands in Crayon, here's a step-by-step instuctional to help you organize your efforts.

1.	Upon opening Crayon, the default colours will show in the display box with a black background and white text and links.  By default, the background is selected as the first item to be editted.  Select the colour of the background using the scroll bars or the 'View all Colours' button.

2.	Select the text and change it to a colour that pleases you and is easily readable against the background colour.

3.	Do the same with the three link types. (Hint: It's best to make the links three different colours, so the user will know which s/he's already been to and which have not been viewed.  Also, make the new link a different colour than the text to emphasize that it's a link.)

4.	Select whether you will be copying the colours directly into an HTML document or a CSS (Cascading Style Sheet) document.

5.	After you've selected the colour combination you want, copy to the clipboard and replace the <BODY> command line in your HTML document with the selections.

When you've finished, your HTML document should look similar to this:

<HTML>

<HEAD>

<TITLE>My Home Page!</TITLE>

</HEAD>

<BODY BGCOLOR="#400080" TEXT="#CACACA" LINK="#FDFFCA" ALINK="#FDB5FF" VLINK="#B3FFFF">

Wooo!!!! Look everyone, I have a home page now!!!

<HR>

<A HREF="http://www.someone.com">Here's a link to my pal's page!</A><BR>

<A HREF="http://www.anyone.com">And here's another pal's page!</A><BR>

<A HREF="http://www.someoneelse.com">And another!</A><BR>

</BODY>

</HTML>

or, for CSS documents:

BODY {

background-color: #400080;

color: #CACACA

}

A:link {color: #FDFFCA}

A:active {color: #FDB5FF}

A:visited {color: #B3FFFF}

Author: A. Loftin - Help file generated by VB HelpWriter.