|
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 |
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:
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. |
You'll see the following in your Properties Frame at the bottom of the editor window:
At the left is a blue circle with a question mark on it like this.
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:
|
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 |
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. Now the Text properties will appear in the Properties Frame, as below:
|
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.
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.
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:
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 |
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.
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:
This is how such a graphic would appear to your website's visitors: |
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 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.
2. In the Properties Frame, click on
the
3. The Editor Preview Frame will refresh, and your email button is now below the horizontal line, as shown here: |
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 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.
2. In the Properties Frame click on the Delete button.
3. The Editor Preview Frame will refresh, and the horizontal line is now gone. |
2. Using Tables |
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.
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. |
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.
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.
|
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.
|
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. |
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.
|
3. Editing a Page Created Using a Template |
Introduction |
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. |
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.
Even though the template is limited, you can still insert elements whereever you see the Insert Here icon. |
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.
|