Members Web User Guide
Starting with a Blank Page Inserting a Graphic Inserting Elements Within Tables
The Members Web Editor Window Moving Elements Moving Elements Around Tables
Selecting a Background Removing (Deleting) Elements Editing a Template Based Page
Giving Your Web Page a Title Using Tables Introduction
Inserting Text Inserting a Table Limited Template
Adding Formatting Elements Adding Columns and Rows Locked Template
Adding Blank Space Deleting Columns and Rows  
This User Guide will show you the basics of editing a web page in the Members Web Editor. The Editor window shows you an approximation of what your page will look like as you are editing, and at any time you can see what your web page looks like by clicking on "View Page." Depending on what type of template you are using, the Members Web Editor can give you a great deal of control over how your web page will look.
1. Starting With A Blank Page
The Members Web Editor Window

We'll start by editing a blank page to show you the different parts of the editor screen and how to insert and modify elements. You can then apply these procedures to editing a template or modifying a page.

When you first open a blank page in the Members Web editor, you will see a screen that looks like this:

Members Web Editor Window
Members Web Editor Window

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. Go to Top of Page

Selecting a Background Graphic or Colour

Edit BackgroundLet's start by adding a background to the page. Click on the "background" button in the Header Elements button bar.

You'll see the following in your Properties Frame at the bottom of the editor window:

Background properties
Background Properties

At the left is a blue circle with a question mark on it like this. Help You can click on this to find out more about the Background element. Next there is an underlined link, Background. If you click on this, you will see the following in your Editor Preview Frame:

Background Previews
Background Previews

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
Background Selection

Click on "Save "Then click on the "Save" button in the Properties Frame. Your background will now appear as the page background in the preview window. Go to Top of Page

Giving Your Web Page a Title

Title BarThe 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 Save button. Go to Top of Page

Inserting Text

Insert Here ButtonJust below the two rows of buttons at the top of the Members Web Editor window you will see a red square dot. This is the Insert Here Button. Click on this button whenever you want to insert a new element, for example, some text.

When you click on the Insert Here Button you will see the Element Selection Box in the Properties Frame.

Element Selection Box
Element Selection Box

The drop-down list shows all the elements that you can insert in your web page. Scroll down the box to select "Text", highlight it, and click the grey Insert button.

Click Insert Button

Now the Text properties will appear in the Properties Frame, as below:

Text Properties Box
Text Properties Box

Type in the text boxClick your mouse inside the empty box and begin typing.

Click on "Save "When you're finished typing, click the Save button. What you typed will now appear in your Editor Preview Frame (below), just as it will appear on your webpage. If you'd like to see exactly what your web page will look like, click the View Page button at the top of the window.


Edit TextYou will notice a new icon next to the text in the Preview Frame. If you place your cursor over the icon it will show you "Edit Text". If you go on to insert other things and later want to go back and change the text you inserted here, click on that button and the Text Properties Box for that text will appear again in the Properties Frame so that you can modify it. Go to Top of Page

Adding Formatting Elements

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
Insert Here Before Text

Insert FontThe 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
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 ButtonClick 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
Insert Alignment element

Choose the Center alignment icon Center 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
WYSIWYG View of Web Page in Editor Preview Frame
Go to Top of Page
Adding Blank Space

Insert ButtonYou 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
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. Go to Top of Page

Inserting a Graphic

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.

Graphic Placeholder   Graphic Selection List

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:

Graphic Properties
Making a graphic a hyperlink

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

Graphic Example
Graphic used as hyperlink
Go to Top of Page

Moving Elements

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 Move Left or Move Right 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.

Edit Email
Before moving an element

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

Move Right
Moving an element

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

Email Button New Position
After moving an element
Go to Top of Page

Removing (Deleting) Elements

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 Delete 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.

Edit Line
Before deleting an element

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

Click Delete Button
Deleting an element

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

No More Horizontal Line!
After deleting an element
Go to Top of Page

2. Using Tables
Inserting a Table

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.

Insert a Table
Inserting a table

The New TableThe 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
Table properties you can modify in Members Web

Go to Top of Page

Adding Columns and Rows

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.

Edit CellTo 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
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.

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

Two Column TableNow there will be two cells (columns) in the table. Insert another column by repeating the step above. Go to Top of Page


Deleting Columns and Rows

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.

Preparing to Delete Center ColumnTo 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
Deleting a column

Middle column has been deletedOnce the Preview Frame has refreshed, you can see the middle column has been deleted. Go to Top of Page

Inserting Elements Within Tables

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.

Insert Within a Cell

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

Table with Graphics
Using a table to arrange buttons or graphics
Go to Top of Page

Moving Elements Around and Within Tables

Delete or Save Table 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.

Editing Element Next To a TableAlso, 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).

Cannot Move To Below Table
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.

Cell Containing Several ElementsIf 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 a Cell
Can move element left or right within cell

Editing Last Element in CellHowever, 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 the Element Left in Cell
Can only move left within cell since element is last in cell

Go to Top of Page

3. Editing a Page Created Using a Template

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. Go to Top of Page

Limited Template

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
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
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
Go to Top of Page

Locked 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
A Locked Template

Edit a CellAs 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.

Limited Element
You can modify this element but not delete or move it
Go to Top of Page

Northern Valley Communications --