If you've ever worked with a word processing program like Microsoft Word, then working the the FCKeditor should be very simple for you to pick up. You'll probably recognize most of the icons from the toolbars you're accustomed to seeing.

If you've never worked with a word processing program, or some of the icons don't look familiar to you, we've designed this tutorial just for you.

Let's get started!

We've prepared a sample editor for you to use in this exercise. Click here to open a second window with the editor in it. You will be able to view both screens at the same time so you can test the editor as we walk through the steps.

The new screen that you see is the FCKeditor screen. When you work on your own site, you'll be typing the content that you want on your site's managed pages into a window like this. Each page on your site that is editable will have it's own similar editor screen. When you open the editor of the page you want to alter, it will contain the text currently on your site's viewable page. You will be able to use this editor to alter it or replace it completely.

The tan menu bar at the top of your editor window should look familiar to anyone who has worked with Microsoft Word before. Some of the icons are exact duplicates. Each icon has a particular purpose; some are obvious and some not so obvious. While you are working in the editor window you can have access to a complete table of these icons and their uses in this instruction window. Up in the top-right corner there is a link for the "Icon Table". Click on that link to toggle this screen to the table. When you want to come back to these instructions click on the "Instructions" link in the top-left corner.

Go ahead and start typing in the grey window on your Editor screen. Type whatever you like, just be aware that what you type may end up being visible to others who access this page following you!

Important! Using the Return key: To create a new paragraph simply hit the return key .This will create an extra line between your paragraphs. To simply break to the next line, hold down Shift while you hit the return key. This will give you a "soft" return to the next line with no spacing in between. Try this now to get the hang of it.

When you create a document in Microsoft Word, the program uses a lot of unviewable code in the document to make it look clean and easily readable on the screen. In many cases you will be laying out your text in Word and copying and pasting it from there directly into this text editor. It may look just right when you copy it in, and even nice when you preview it, but all that extra code Microsoft Word has put in it will make your web page very "heavy" and slow-to-load. This editor has a solution for that.

Before you paste directly into the editor window, click on the icon that looks like a "W" on a clipboard in the top row. Another pop-up window should be visible called "Paste from Word". Go ahead and paste your Word content into this window first. Make sure that the two checkboxes are both selected at the bottom, and then click "OK". Your text will then be displayed in your editor's grey box, without all of Microsoft's excessive code. It may not look as nice now, but that's what this editor is for!

You can easily type your web page's content directly in this text editor to avoid that step. Either way, once you have the unstyled text in the editor, then use the icons to make it look the way you want it on your site. Remember to view the Icon Table in this window to see what each icon can do if you are unsure.

TECH-SAVVY EDITORS ONLY: Those of you who may be a little familiar with html code have the ability to edit or fine tune your text using the "Source" icon. If you are struggling with achieving the results you would like in the editor alone, then go ahead and edit it in the source window instead.

Try things like creating numbered lists or bulleted lists. They are the two icons at the beginning of the second row. Go ahead and type in a list of items, simply using your return between each item so they are on seperate lines. Then click at the beginning and drag to the end to highlight your entire list (but nothing else). While you have it highlighted, select the numbered or bulleted icon and watch what happens. Toggle between the two. Select the numbered icons again, and then place your cursor after line #1, and hit return. Just like in Word, the editor automatically adjusts the numbering according to the placement of your return when you want to add another line item there.

Let's insert a picture. Place your cursor near the left column in your editor, horizontally in line with where you want the top edge of your picture to be. Then select the first icon in the top row that looks like a mountain landscape on a sunny day. Another pop-up called "Image Properties" should become visible. You have many options in this window, but the most important ones are on the "Image Info" tag.

If you've ever uploaded an image or file to the internet, then you've seen a browse text box similar to this before. This window assumes that the image you want to place on your website is somewhere on the web server where your website files are. Click on the "Browse Server" button to tell the editor where the file is. If you are already using the image on your site elsewhere, then you would be able to navigate to it in this window. We have placed some sample pictures in the site folder for you to use here.

On your own site though, chances are pretty good that the image you want is actually located on the hard drive of your computer instead; maybe it's in your "Pictures" folder, for example. If that is the case you can upload that image from your computer to the web server by selecting the "Browse" button at the bottom of this screen. From there you will navigate through your computer's hard drive to find the file you are looking for. Once you have found the file and selected it, click the "Upload" button on the right to upload it onto the web server. Once uploaded, your picture file should display in this window. Select it by clicking on it.

With the advancement of digital cameras nowadays, your picture is probably too large for placement on your site, and you need to size it down to the appropriate size using photo manipulation software before you upload the picture to the server. It's even possible that you may not be able to upload the picture file because it is too large and exceeds the file size upload limitations. If so, reduce the size first, then try again. If you don't have photo manipulation software available to you then you can email us the picture and we will re-size it for you.

Once you have established the picture you want to use and uploaded it to the server, then you will use the "Image Properties" window to establish its size and placement on your page. You can tweak the size down a little more using the "Width" and Height" text boxes. Select your picture in the preview box and the current width and height should automatically show up in those text boxes. Reduce the size in one and the size in the other will reduce proportionately. As will the size in the preview box.

You already established its top-horizontal height with the placement of your cursor, but you can also establish whether you want the picture to be on the left or right side of the page, or in the middle. Use the "align" dropdown to select where you want the image to be. Notice as you do this what happens in the preview window. (Note that the text shown there is only an example used to help you with the layout of your picture. It is not the text from your web page.) Once you have its size and alignment established, then give your picture a title in the "Alternate Text" box. This is the necessary text that shows up when you hold your cursor over a picture on a web page. When you are comfortable with your picture's placement, click "OK" and your picture will display in your editor.

Let's create a link to another website on your page. Type "Byte Productions" in your editor and then highlight what you typed (click and drag across it). Select the icon in the second row that looks like the world with a chain link below it (link to the World Wide Web). Here you get a "Link" pop-up. If you just wanted to link to another page on your existing website then you would click on the "Browse Server" button to select the page you wanted to link to. But you can also link to another site, an email address or an "anchor" on the page (see the icon table to learn about anchors). Go ahead and type, or copy and paste, "www.byte-productions.com" into the URL text box. Click "OK". Notice that Byte Productions has changed colors, signifying that it is now a link.

Feel free to play around with this editor. Change the style of your text using the the Style drop-down. Highlight text and then select one of the different styles. Watch what happens.

Keep in mind that every time you change the look of something on this page, you are adding cumbersome code to your page. If you keep going back and altering the look, then your page may get bogged down with code and you may become stuck with a style or spacing that you can't get out of. There is a simple solution. Use your cursor to highlight the area you are struggling with and select the "eraser" icon to the right of the style drop-down. This icon will erase any styling associated with the selected text and you will be back to scratch to re-style it.

We've designed this editor so that you can test it to preview what the final page will look like. When you think you are ready to see it you must "Save" your changes first! Clients have called us and told us they put all their information into the editor but it doesn't show up on the site. It is usually because people forget to save the information first. It would be the same as drafting a document in Word and exiting out before you save it. Go ahead and hit "Save" at the bottom, and then hit "Preview" to see a sample of your completed page with the editing you've done.

If you don't like what you see you can hit the "Edit" button where the Save button had previously been and re-edit the information. You can toggle back and forth as many times as you like. Just remember to save each time in between.

When you are all done with the editor, hit the "Close" button at the bottom of the Preview screen to close the extra window.

By now you should be fairly competent with the FCKeditor. If you ever struggle with it in your own site, feel free to come back and revisit these help screens.

Good luck!