At the top of the screen you see two rows of buttons. The first row is the Navigation Bar, allowing you to go back to Members Web, view this User Guide or the Quick Start Guide, or view your webpage in progress.

The buttons in the second row are elements that affect your entire webpage. These Header Elements are defined here.

The large central portion of the window, the Editor Preview Frame, is where you will see a nearly WYSIWYG (what you see is what you get) preview of your webpage as you create it.

At the bottom of your window you'll see the Properties for the element you're working on at the moment. The properties are anything that can be changed about the element. For example, a graphic element's properties include the name of the graphic file, the size of the border, a hyperlink if desired, and the alternate text.

Tip: Whenever you see an underlined link (for example Background, Colour, Graphic, Font) in the Element Properties Frame, you can click on the link to see a preview of the available choices in the Preview Frame.

Once you've made a selection for your background, highlight it in the dropdown list like this:

Background Selection

Then click on the "Save" button in the Properties Frame. Your background will now appear as the page background in the preview window.

The Title is the name of the page as seen in the colored bar at the very top of your browser window. For example, in the browser window at right the title is "My Web Page".

Click on the Title button in the second row of buttons at the top of the window. In the Properties Frame, type in the name you want for your page, then click on the button.

Now you have some text on your web page, but you might want it in a different font or size, or centered on the page. You need to add some formatting elements to modify the text.

Adding elements to a web page is easy. Choose where you want something in relation to what is already there, and click on the appropriate Insert Here Button. In our example, we want to put a Font element before the text so that it modifies the text that follows. So we click on the Insert Here Button in front of the text, as shown below.

Insert Here Before Text

The Insert Elements Box will appear in the Properties Frame, and you can select Font in the drop-down list and click the Insert button.

Now the Properties Frame will show the Font properties which you can modify. These include font, color, size, and style. To see a list of available fonts, click on the Font link next to the drop-down list. The fonts and an example of each will appear in the Preview Frame. To see a list of available colors, click on the Color link and a color chart will appear in the Preview Frame.

Colors Preview

If you want to use one of the 16 basic colors you can choose from the drop-down list. If you'd like to use one of the colors in the large chart choose "Other" from the drop-down list, then highlight and copy the code below the desired color and paste it into the box next to the drop-down list like this:

Click the Save button to save the change. You'll see your text in the new color. You can make as many changes as you like to the element properties before clicking Save, but remember that your changes will only be saved if you click the Save button afterward. Remember to save your changes frequently.

Change the font, size, and style as desired, and be sure to click the Save button when you are finished.

Next we will add an Alignment element to your page. As before, click on the Insert Here Button before the text (it doesn't matter if it is before or after the Font element. In the Properties Frame select "Alignment" and click the Insert Button.

Insert Alignment element

Choose the Center alignment icon and click Save. In the Preview Frame you'll now see your text in the font size and color you chose, centered at the top of the page.

WYSIWYG View of Web Page in Editor Preview Frame

You now have a heading for your web page, but you'll want to add one or more blank lines between the heading and a graphic, for example. Click on the Insert Here Button after your text, and select "Break (New Line)" in the drop-down list. Click the grey Insert button.

This is a good time to point out some of the other icons that appear in your Preview Frame. To edit any of the formatting elements such as Font, Alignment, spaces, etc., you'll click on its corresponding icon in the Preview Frame. To edit an element that actually appears in the web page, such as text, graphics, or hyperlinks, click on the Edit Icon that follows that element. A complete list of icons and their meanings can be found in the Quick Start Guide.

Preview Frame Icons

Each Blank Line icon represents a single line, so if you want more than one you'll need to insert each one separately. Click on the Insert Here Button after the first break, and insert a second break.

Click on the Insert Here Button following the second break (new line) in the Preview Pane, select "Graphic" from the drop-down list, and click the grey Insert button. A graphic placeholder will appear in your web page Preview Frame, and the graphic properties will appear in the Properties Frame.

To select from the graphics that are available within Members Web (including those you have uploaded to your web if this feature is enabled), choose from the drop-down list. If you'd like to see a preview of the available images, click on "Graphic" next to the drop-down list, and previews will appear in the Preview Frame. The previews will only include those images provided by the Administrator, not any that you've uploaded yourself.

If you'd like your graphic to be a hyperlink so that visitors can click on it to go to another page, either choose a page from the drop-down list which will list the pages in your web, or type a URL in the "Other Link" field. The "Text" field is what appears when the visitor's mouse cursor hovers over the image. Here is one example of what you can do:

Making a graphic a hyperlink

This is how such a graphic would appear to your website's visitors:

Graphic used as hyperlink

To move an item to a new location on your page, in the Editor Preview Frame first select the element you want to move by clicking on its Edit Icon. Then click the or button in the Properties Frame until the element is in the desired location.

For example, to move the email button below the horizontal line you would follow these steps:

1. Click on the Edit Email icon immediately following the email button graphic.

Before moving an element

2. In the Properties Frame, click on the button three times (or as many times as necessary depending on how many breaks you inserted).

Moving an element

3. The Editor Preview Frame will refresh, and your email button is now below the horizontal line, as shown here:

After moving an element

To remove an element from your web page, in the Editor Preview Frame simply highlight the element you want to delete by clicking on its Edit Icon, then click the  button in the Preview Frame. Important: Deleting an element is a permanent action and cannot be undone!

For example, let's say you now want to delete a horizontal line from your page.

1. Click on the Edit Icon immediately below the horizontal line.

Before deleting an element

2. In the Properties Frame click on the Delete button.

Deleting an element

3. The Editor Preview Frame will refresh, and the horizontal line is now gone.

After deleting an element

The use of tables adds many possibilities to your web page format and layout. You can use tables to position pictures and text or to have blocks of color behind text or graphics.

To insert a table in the Members Web Editor, just follow the steps outlined here.

Click on an Insert Here icon in the Editor Preview Frame, select "Table" in the elements drop-down list, and click Insert.

Inserting a table

The table appears in your Editor Preview Frame as shown on the right. Initially it has only one row and one column, but you can add columns and rows very easily, as described a bit later.

The table properties will appear in the Properties Frame. You can change the width of the table, the width of the border, the color of the background and/or border, the cell spacing (space between cell outlines) or cell padding (space between the cell outline and any element inside the table), and the alignment of the table on the page. You can even choose a background image for the table.

Table properties you can modify in Members Web

Usually you'll want more than one row and one column, so let's add a couple of columns. We're going to use the table to arrange some navigation buttons at the bottom of our web page.

To add a column you need to edit the cell rather than the table. Click on the Edit Cell icon within the table. The Cell Properties will appear in the Properties Frame, as shown below.

Cell properties that can be configured in Members Web

Cell Properties that can be modified include whether or not text within the cell wraps at the end of a line, the horizontal and vertical alignment of objects within the cell, the background color or image, and the width in pixels or percentage of the table.

Below the cell properties are the buttons you'll use to add or remove columns and rows. We want to insert a column and in this case it doesn't matter whether it's to the right or the left, so click on an Insert Column button.

It's easy to insert columns and rows in a table

Now there will be two cells (columns) in the table. Insert another column by repeating the step above.

If you find you have added more columns or rows than you need, you can delete them just as easily as you inserted them. Important: If you delete a row or column that contains any elements, the elements will be deleted along with the row or column.

To delete a column or row, click on the Edit Icon for a a cell within that column or row. For example, in the screenshot at right we want to delete the middle column so we edit a cell within that column.

Now click on the Delete This Column button in the in the Properties Frame.

Deleting a column

Once the Preview Frame has refreshed, you can see the middle column has been deleted.

Now there are three cells (columns). You'll note that inside each cell is a green Edit icon as well as a red Insert Here icon. Click on the Insert Here icon in one of the cells to insert a graphic. Elements are inserted inside tables in exactly the same way they are inserted anywhere else.

When we've finished inserting the three buttons it will look something like this.

Using a table to arrange buttons or graphics

There are a few points to keep in mind when working with tables in Members Web. First of all, once a table is inserted it cannot be moved. You can delete or modify a table, but not move it.

Also, you cannot move elements from one side of a table to the other, or from above a table to below it. For example, if you click on a Break just above a table (as shown in the screenshot at right) you'll see that you can move it to the left but there is no option to move it to the right, or to the other side of the table (as shown in the screenshot below).

Can't move element from one side of table to another

Therefore, you need to be careful when placing tables on your page, and keep in mind that you will not be able to move them or move the elements on either side of them.

There are similar restrictions on moving elements within table cells. In the screenshot below, there are several elements within a cell.

If you click on one that has an element on either side, you can move it to either the left or the right, as seen below.

Can move element left or right within cell

However, if you click on either the first element or the last element in the frame, as shown here, you cannot move the element outside of the cell, but only in the direction away from the edge of the cell. In this example you can move the Text element to the left, but not to the right, because it is the last element in the frame.

Can only move left within cell since element is last in cell

There are three main types of templates: Open, Limited, and Locked.The types of template available for your use are determined by your website administrator.

An open template merely serves as a guide for your web page; you are free to insert, delete, move, and modify any of the elements on the page. All of the instructions and guidelines relating to editing a blank page apply to editing an open template.

A limited template allows you to insert elements and to modify, move, or delete certain elements, while other elements may be modified but not moved or deleted.

In a locked template you cannot insert, move, or delete any elements but you can modify certain elements.

The screenshot below shows what a limited template might look like. You'll notice that you can insert elements anywhere you like (the red Insert Here buttons) but there are certain elements you cannot edit. For example, there are Breaks and Alignment elements that are invisible because the Administrator has locked them. Some of the other elements may be limited, which means you can modify them but cannot move or delete them.

A Limited Template

For example, if you click on the Font icon before the heading, you'll see that there are no Delete or Move buttons in the Properties Frame. This means the element is locked. You can change the font, color, size, and style, but you can't move or delete the element.

A limited Font element

Even though the template is limited, you can still insert elements whereever you see the Insert Here icon.

You can insert elements in a limited template

In the screenshot below is the same template made into a Locked Template. In this case there are no Insert Here icons, so you cannot insert any elements on the page. Any item that has an icon can be edited, but you cannot delete or move any of them, only modify them.

A Locked Template

As an example, you can edit any of the cells in the table by clicking on the Edit Cell icon (the first icon in the cell). You'll see the usual cell properties in the Properties Frame, but you can only Save (modify) the element, as there are no Move or Delete buttons.

You can modify this element but not delete or move it