The Advanced Editor is where you create your web page. There are three main sections to the editor, the Advanced Editor Window, the Browser View Window, and the Advanced Editor Toolbar.

The Advanced Editor Window is the area you will work in while the Browser View Window will show you exactly what users will see when they visit your web page. Thanks to the Advanced Editor Toolbar, you won't need any HTML experience.

Though it's not necessary to have HTML experience, it helps if you have a basic understanding. The main thing to understand about HTML are the tags. If you're interested in learning more about HTML, visit www.W3Schools.com/HTML and take their easy tutorial. If you already have some HTML experience, visit www.W3Schools.com/Tags for a complete listing of HTML tags and their uses. Again, it's not necessary to know this to create your web page but the more you know, the more you'll be able to take advantage of advanced techniques.

You will create your web page in the Advanced Editor window. Begin by entering all of the text in this window just like you would in a word processor. Keep in mind that you are limited to the amount of text that can be entered per section. Keep an eye on the text counter on the right side of the Advanced Editor Toolbar. This counter will display the current character count and the maximum character count. Don't forget to leave room for images, links, and formatting as they take up space too.

Once you've entered the text, you're ready to add images, links, and format the text. It's important to create your page and follow the proper order of doing things! Please remember to add your text, then your images, then your links, and finally, formatting. Failure to follow this pattern without extensive knowledge of HTML can lead to serious problems with the display of your page.

Formatting is done with the Advanced Editor Toolbar. If you want to make a word bold, simply highlight it and click on the Bold button. If you want to insert an image, simply place the cursor where you want the image and click the Insert Image button. Notice that as you enter formatting, images, hyperlinks, etc., the program adds the HTML tags for you and you can see the changes in the Browser View Window by clicking the Refresh Browser View button.

The Browser View window displays what the user will see in his or her browser. When you make a change in the Advanced Editor Window, you can click the Refresh Browser View button to see what your page section will look like in the user's Browser. This lets you see what the user will see without having to leave the editing area. It also lets you experiment with various formatting without having to guess what it'll look like in the browser.

When you add either hyperlinks or email links, be sure to click on the Refresh Browser View window then click on your link to test it. Bad links can cause a number of problems including blocking the user from accessing the website for up to one full day! Remember, always test your links!

At some point you'll want to come back and edit a section. After selecting the section, you'll notice the HTML will appear in the Advanced Editor Window but nothing is visible in the Browser View Window. Simply click the Refresh Browser View button and the Browser View Window will display your HTML.

This is the tool that makes your HTML come alive. You'll notice several buttons that should be familiar to you. We'll go through each of the buttons and not only describe their function but the HTML tags that are created.

This button changes the font, font size, and/or font color. Clicking this button will display the Select Font dialog box. You can select a different font, change the font size, and/or change the font color. When choosing the font color, another dialog box will open allowing you to select the color. Note that, though you may have more fonts on your system, you're only allowed to select those fonts that come standard with the Windows operating system. After making your selection(s) and clicking the OK button, something similar to this will be added where the font change begins <FONT FACE="Arial" SIZE="2" COLOR="#0000FF"> and </FONT> where the font change ends depending on your selection.

This button changes your text to Bold. It inserts the tag <B> where the bold text begins and </B> where the bold text ends.

This button changes your text to Italic. It inserts the tag <I> where the italic text begins and </I> where the italic text ends.

This button changes your text to Underlined. It inserts the tag <U> where the underlined text begins and </U> where the underlined text ends.

HINT: You can combine these tags so that your text has different combinations. For instance, you can combine a font change while combining bold words and even some bold italic words. Here is what the HTML tags look like with a combination like this: Font change <FONT FACE="Times New Roman" SIZE="3" COLOR="#FF0000">while combining <B>bold words</B> and even some <B><I>bold italic</I></B> words.</FONT>

This button creates a dot list like this:

• Item 1

It inserts a tag combination. <UL> is inserted to designate the start of the list and </UL> indicates the end of the list. Each item in the list starts with <LI> and ends with </LI>. To add more list items, simply add the <LI> and </LI> tags to each item. Here's another example:

• Item 1
• Item 2

The HTML looks like this: <UL><LI>Item 1</LI><LI>Item 2</LI></UL> The additional list item tags <LI> and </LI> are added by hand and as many as you want can be added between the <UL> and </UL> tags.

HINT: You can create a number list by simple replacing the <UL> and </UL> with <OL> and </OL>. Here's an example:

1. Item 1
2. Item 2

Here's what the HTML looks like: <OL><LI>Item 1</LI><LI>Item 2</LI></OL>. Do you see the difference? All that was change was the U was replace with an O.

This button adds a line. It's one of those tags that does not need a closing tag. The tag looks like this: <HR> This tag alone inserts a line but you can change the look of the line by adding variation attributes to the tag. For instance, you can increase the width by adding a SIZE attribute. Here's what the tag would look like with the size attribute added: <HR SIZE="4"> You can change the look by simply adding the NOSHADE attribute and/or the COLOR attribute. Here are some examples. The first is just a simple <HR> while the second has the size attribute added and the third has the NOSHADE attribute and the forth has a COLOR attribute added.

This is where a little extra knowledge of HTML can pay off. To learn more about HTML tags and their attributes, visit www.W3Schools.com/Tags

This button creates a break or a special HTML space. You might think that simply inserting a regular space may work but there are times when you need to use the HTML space instead. For instance, if you have everything aligned to the left but want to space one line over, you must use an HTML space because regular spaces will be ignored. For another example, let's say you add an image and want the caption text spaced out to the right yet have everything centered. You'd have to insert your image, add the number of HTML space to add space between your image and the caption text, then center everything. Just remember, if you want to add some spacing and a regular space isn't working, use the HTML space.

This button causes the highlighted text to be indented. The tags look like this: <BLOCKQUOTE> and </BLOCKQUOTE>

This button creates a paragraph and aligns the text to the left. The tags look like this: <P ALIGN="left"> and </P>

This button creates a paragraph and centers the text. The tags look like this: <P ALIGN="center"> and </P>

This button creates a paragraph and aligns the text to the right. The tags look like this: <P ALIGN="right"> and </P>

This button creates a hyperlink. A hyperlink is one of the most basic elements in HTML. It lets the user jump to another web page. This is very important when creating your links page. To insert a hyperlink, highlight a word or two you want to hyperlink, for instance, Microsoft, then click the Insert Hyperlink button. An input box will be displayed with "http://" already added. Simply click your mouse after "http://" before you start typing then type in the URL you want to link such as www.Microsoft.com then click OK.

NOTE:  If you do not click your mouse after "http://" then start typing, "http://" will disappear and you'll have a bad link.  Here's what a valid link should look like.  Notice the complete URL which includes "http://".  Be sure your link looks similar to this:

<A HREF="http://www.microsoft.com" TARGET="_blank">Microsoft</A>

The TARGET attribute opens the hyperlink in a new browser window so the user can then click it closed and will be right back to your page. Always check your hyperlinks to make sure they work! Few things are more frustrating to a user than broken links.

As you can see, some HTML tags add quite a bit of text to your section which is why it's important to allow for this when creating your section. If you add too much text, the text will be cut off at the limit point.

Similar to the Insert Hyperlink button, this button inserts an email hyperlink. The difference is that a regular hyperlink opens a browser while the Insert Email hyperlink will open the user's default email program with the email address added to the To: section. Again, just type the name of the person you want to send email to, highlight it, then click the Insert Email button. An input box will be displayed with the "mailto:" prefix already added.  Be sure to click after "mailto:" so it doesn't disappear then type in the email address. Here's an example of adding an email hyperlink so someone can send an email to Webmaster:

<A HREF="mailto:webmaster@bacausa.com">Webmaster</A>.

Again, be sure the "mailto:" is still there when you're done.  Compare your link to the one above.  When your cursor goes over a hyperlink like this it changes to indicate it's a hyperlink. Always check your hyperlinks to make sure they work!  If you create an email hyperlink, you should be able to click on it and your default email program will open with the email address added to the Email To: area.

To insert an image, simply click in the Advanced Editor's window so the cursor is located where you want the image to be, then click the Insert Image button on the Advanced Editor's toolbar. A new window will open and you'll be presented with your Image Gallery.

If you don't have any images in your gallery or would like to add a new image, click the Upload Image button at the bottom of the Image Gallery window. A new window will appear that will allow you to upload your image. Click the Browse button to locate the image on your hard drive. Enter a brief description of the image, then click OK. Be patient as, depending on the size of your image and your Internet connection speed, it may take several minutes to upload your image.

Note that images are limited in image type and size as well as the total amount of space allowed in the database for your images. As far as the type goes, you're limited to JPEG (.jpg) and GIF (.gif) file types. These are standard web image types. If you have an image that is in a different format such as Bitmap (.bmp), you'll need to use a graphics program to convert it to either JPEG or GIFF. Images are limited to 50 kilobytes each with a maximum of 2.5 megabytes worth of images total. If you exceed that amount, you must delete some images from your gallery before you can upload more. Don't worry, should any of the parameters be violated you will receive a warning letting you know what's wrong and your image will not be uploaded.

Once your image has been uploaded, the window will let you know your image has been successfully uploaded. You can then click the Cancel button to close the window or upload another image to your gallery.

Note, if you clicked the Cancel button to close the Image Upload dialog box, your image gallery will refresh and you'll see the image(s) you just uploaded. If however, you clicked the "X" in the corner of the window to close it, you'll have to close your image gallery window and reopen it to see your new image(s).

Click the checkbox next to the image you wish to insert then click the Insert Image button at the bottom of your Image Gallery window.

The HTML to create your image will now be in the Advanced Editor window. Click the Refresh Browser View button at the bottom of the Advanced Editor to view how your image will look on your web page.

The HTML tag will look similar to this: <IMG BORDER="0" SRC="../Includes/Images.aspx?ImageID=10" ALT="Description">. The ALT attribute contains the description of your image for two reasons. First, when a user places his cursor over your image, the description will be displayed as a tool tip. Second, if for some reason the user's browser can not display the image, it will display your description. Do not modify this HTML or your image will fail.

If you need to delete an image, open your Image Gallery and click the checkbox next to the image, scroll down, and click the Delete Image button. Note that if you have a section with the deleted image in it, the image will no longer appear. Be sure to delete images only when there's no section associated with it or delete the section then the image.

It may take a little while to get used to managing your image gallery but once you've mastered it, you'll find that having the image gallery incorporated into the Advanced Editor is considerably more convenient than having a separate area to manage images.

This button is your best friend. It simply undoes your last change. Note that there is only one level of undo available. To undo more than the last change you made you'll have to edit your HTML.

Well, if you're reading this, you already know what this button does. Anytime you're in the Advanced Editor in any of the areas, click this button to bring up the Advanced Editor help.