Introduction

Description

The liberty content management system allows you set up and administer your own web pages on your site. It allows you to setup pages which automatically appear in site menus and site search facilities. For each page you can effectively have a mini site divided into categories and groups and each group can be further sub divided into individual items presented in a variety of formats. Each item can have a full graphical page setup with the Rich text editor (see Appendix C Rich Text Editor).

This document takes you step by step through the process to perform these actions.

Pre-planning your site

Before you begin to create pages on your site, you need to have considered the facts below to get a good looking site otherwise your site can look inconsistent and messy:

· Colour scheme.

Liberty gives you plenty of opportunity for defining different colours in places on your web site. You need to ensure that your colour scheme is thought through before you create your pages. This to a certain extent is done for you at design time by the web designer. What colour should the buttons be? Colour of the menu bar, background colour of the pages etc etc

· Page size

How wide will you have the pages in pixels?. This depends on how detailed your site will be and what your target audience is. In general your page width should be planned for about 800 -> 1024 pixels wide. However if your site is going to be read by children or visually impaired you may wish a smaller size such as 640. If your site holds lots of detailed technical information and will be viewed by experts then a larger size may be appropriate.

· Image size

With liberty you have the ability to upload images in a variety of places. However if you want lists to appear neat and you have photos (thumbnails) next to each item then these will need to be all a consistent size otherwise it will look messy. Consider this upfront.

· Text size

There are many places where you define the style and size of text on pages. Think about your fonts and the target audience. Whatever you decide it should be consistent throughout the site.

· Structure and layout of pages

There are many options for displaying pages in different ways. One of the key considerations is how you present your list of items on a page. If you have a page with many hundreds of items on it then you probably want to consider subdividing your page into categories. This makes it easier for the user to find what they are looking for. Try not to create too many pages as this will ‘clutter’ the menu for the site. It is better to have a page with many categories within it than to have separate pages for each category.

Individual screen descriptions

User Logon Page

Before you use the system you must logon.

To do this enter your allocated userid (in box 4.) and password (in box 5.) and press the Logon button.

Once logged on3 key pieces of information are displayed at the top:

Company name. This is your company and should show correctly here.
Logged on userid. Once logged in your userid should always appear here while using the administration facility. NOTE: If it shows ‘none’ this means your log on has expired (after 20 minutes of inactivity or you have not yet logged on.
Software version number. This is important if you need support.

When logon is pressed you are taken to the main menu.

Main Menu

This page is choosing what administration function that you want to do.

The main menu can be accessed instantly in a variety of ways:

Pressing ‘Menu’ in the quick jump options (1.)
Pressing ‘Admin menu’ in any other screen on the Navigation path (2.)
After initial log on.

The quick jump options (1.) and Navigation path (2.) are available in any administration screen and can be used to quickly jump out of whatever you are doing and go somewhere else.

Click on any of the four large icons to choose that selected option. A brief description of each is as follows and they are further detailed in the pages below:

Global and page parameters. This is for setting site wide features such as default page colours, menu styles and orientations etc.
Categories and Groups. This is for sub dividing a page into categories. This is particularly useful if there are lots of items on one page and you want a user to view groups of them at a time rather than the whole lot.
Your web pages. This is for pages that you create for your site. You can create, amend or delete them from here.
Locked web pages. If your design was done as part of the liberty package then there will be certain pages that you have limited control over the display format such as the home page. You will however be able to edit certain areas on that page and this is what this section allows you to do.
Shipping prices. This is an ecommerce add on only. For defining the shipping policy of your shop, prices quantities etc. This can be per product or globally.
Discount policy. Where you define what discounts you are going to offer for based on quantity ordered either globally or for a specific product. Can specify promotional discount here also.

Global and page parameters

This page is for setting site wide features such as default page colours, menu styles and orientations etc.

Background Colour

This allows you to choose the default background colour for all pages in case a colour isn’t specified for a pages.

The choice of colours available is specified in Appendix A – Colour selection.

Menu position

The main web site menu is automatically updated and displays all of your web pages and the locked web pages. You can chooses whether this menu appears at the top of the page or on the left hand side.

Menu type

The menu can be one of three styles:

Hyperlinks. These are just text links in the style: home contact site search
Button. Pages available are presented as buttons This is a good option if you will not have too many pages on your site.
Dropdown. All pages are displayed in the form of a dropdown list. This option is especially good if you are going to have many pages on your site.

Menu colours

This allows you to choose from the range of colours in Appendix A, the menu colour style for the menu type selected. This is described in the following diagram:

Menu Alignment

Alignment of the menu on the page. Options are:

Left / Top. If the menu is at the top of the page then Left will left justify it. If on the left of the page then it will position it starting from the top of the page on the left.
Centre. If the menu is at the top of the page then Left will center justify it. If on the left of the page then it will position it in the middle of the page on the left.
Right / Bottom. If the menu is at the top of the page then Right will left justify it. If on the left of the page then it will position it starting from the bottom of the page on the left.

META Description / Keywords / Classification

Categories and Groups

This allows you to subdivide a page in the ‘your web pages’ section into further groupings and classifications. This is especially useful if your page is very large and has lots of individual items on it. For example if you have a page that sells cars, and you have 200 to sell it would not be easy for a user to find what they are looking for. If you create some groupings such as ‘Hatchbacks’,’Saloons’ and ‘4x4’s then this will make the page easier to navigate to split up the large volume of items for sale.

The field names in all diagrams correspond to the same values. To see where the fields appear on the final web page look at the ‘Display view’. Remember to look at Appendix B – Common Administration Features for descriptions of common elements on this page.

Admin view

Field1: category code

This is a site wide unique code which you can make up as you wish. It is not displayed anywhere and is for internal use only. It is best to keep it short and relevant i.e. hatch01. Once a category has been saved this cannot be amended.

Field2: category name

This is the display name of the category and it is what users will see.

Field3: Description

This is a short description about what the category represents. It is displayed in the Gallery view for categories in a small paragraph.

Field4: Page

This is the page on which the category will be displayed. One page cannot see another pages categories.

Display view

The following is how the ‘Picture Hierarchy’ style categories are displayed and where the fields from the ‘Admin’ view are displayed:

The following is where the fields are displayed on ‘Dropdown’ style.

Creating a hierarchy or tree

The examples above are for one level of grouping only. You can further sub divide a group or category into many levels if you want just like a ‘tree’. The lowest level of a tree is always the list of items that are finally contained in the category.

Consider the following scenario:

Currently there are 4 categories all at the same level. If seen on the web page ‘Tree view’ then they would all appear together. What we want to do is move Level1.1 and Level1.2 so that they are children of Level1. To do this click on the ‘Children’ button of Level1. We are going to specify level 1.1 and level 1.2 as children of Level1.

You are presented with this page:

This is telling you that Level1 does not yet have any children defined for it. To add level1.1 click on ‘Add Child to Category’. Giving you the following :

The dropdown is populated with categories that are eligible to be added as a child. Categories that are already a child of another category will not appear in this list as they can only belong to one category at a time.

Select the desired category -in our case Level 1.1 and press Add. This gives you:

Next add the second one. Click ‘Add Child to Category’ again and choose ‘Level1.2’. Note that Level1.1 will not appear in the list as it now already is the child of a category. Click Add again. Both will now appear in the list as above. If you now go back to the Category page by clicking ‘Back to Category List’ you will see:

If you notice that ‘Level 1.1’ and ‘Level 1.2’ are now represented as children of Level1a by the dashes ‘- - -‘. When you allocate a category to an item on a page only the lowest level categories will appear (Level 1.1, Level1.2 and Level1b).

This scenario will be displayed as on the web page:

These are the two top categories. If you click Level 1a you get:

You can do this for as many levels as you want so you can add more categories to Level 1.1 by choosing its Children button.

This section allows you to create lists of items (content) to go on a page. These lists are fully searchable (see Search and Category settings ).

The lists can be displayed in a variety of ways (see Item Display Styles ).

TIP: If you set up a page and do not want any list displayed, just a full page of text then setup just ONE item for your page. The liberty system will then automatically display the item when the page is accessed as a full page as there is only one. This means that anything you enter for the full page text will be displayed as the page.

Item selection criteria

These allow you to narrow down the list of items in while you are administrating items, you can search by

matching text or by a specific category.

Item page and list details

Field1: Display order

This is the order in which the items in the list are displayed.

Field2: List Text

This is the text which is displayed in the list about the item. This is only displayed in the list and should be a short summary about that item in a paragraph. Users can click on the item to see more detail if they wish.

Field3: Page subject title

This is only displayed if the full page is displayed for that item by a user after clicking on that individual item in a list.

Field4: Grouping category

This is the category or group that that item belongs to on that page. See Categories and Groups for more details.

Field5: Browser Title bar

This is the text that appears in the blue bar at the very top of the web browser window.

Rich Text Editor Page text

This is full page text that is displayed for the item. This is entered via the Rich Text editor and can be a full page of text, graphics etc. See Appendix C Rich Text Editor for more details.

Search Engine Optimisation Parameters

META Description / Keywords / Classification.

These are used to specify SEO (search engine optimisation) parameters for your web site. This is the topic of a separate discussion and is not covered in this manual. Any values set here appear on the full page view of that item only. If no parameters are defined for this then the values from the page are used. If none are defined for the page then the global values for the site are used.

Item image and attachments

Image File

This is the image that is to be attached to that item. Whenever the item is displayed in a list, or in full page view then this image is also displayed.

TIP: Normally if no image is uploaded for an item then a default text is displayed (click here to read more). If you do not want any image to appear then set the item image size to 0 x 0.

See Page image and header text settings .

Attachment File

This is a file of any type that can be attached to an item. This may be a PDF, CAD or ZIP file for example. When one is attached the paperclip displays and the user can click on this to download the file on the web site.

Ecommerce details

The following fields only appear if you have purchased the Ecommerce extension:

Field1: Product code

This is a unique product code that you assign to an item which effectively makes that item a ‘sellable item’. Saleable and non saleable items can be mixed on each page.

Field2: Price

This is the price that you want to charge for this item, excluding Tax.

Field3: Tax code

This is where you specify whether VAT is to be added to the sale price or not at time of checkout.

Field4: Postage applicable indicator

If a product is not able to be posted (for example an electronic document which can be mailed) then set this. This will not then include this item in the postage calculations at time of checkout.

Field5: Custom questions

These are additional information that is required for the product when the item is added to the basket. When ‘add to cart’ is selected then any answers to these questions must be set before it will be added to the basket.

Field6: Special Markers

These are used in special circumstances. For example you can set one of these to specify whether that product is to appear on the home page or not as a special item.

Category and Item example structure

Above is an example of where some of the fields appear that have been discussed so far.

Shipping Policy

This allows you to specify what you would like to charge for shipping based on certain criteria. The following options are available and can be mixed and matched:

· Shipping priced based on final quantity ordered on all products. This means that at time of checkout, if the combined number of items ordered falls within a specified range, then postage will be so much. As many levels of shipping can be setup as you want. So for example you could have one price for 1-5 items, another for 6-10 and so on. If you want a fixed shipping price up to as certain quantity and then free shipping then set up one tier as 1-5 items with a price and 6-9999 items for a 0 shipping price.

· Shipping price based on each product. This can be used as above but for individual products only.

· Mixing and matching the top two. You can have a blanket shipping policy and price, but may apply surcharges on certain products only in addition.

· Postage not applicable. Individual products can be marked as postage not being applicable. This is specified in the product Ecommerce details and this product is then excluded from postage calculations.

All of the above options can be setup for user defined postal services also. So you can setup the rules by postal service such as 1^st or 2^nd class. The use then has the option of selecting the service they require at checkout and the postage is recalculated. Examples of this in action is shown in the section ‘Checkout options’.

Admin view

Field1: shipping service code/name

This is a code and name that you assign to represent the shipping service (1^st class, 2^nd class, express parcels etc). Initially when you add a shipping price, the dropdown is populated with services already setup. You can either select one, or type in a new one in the code and name fields. Once a new one is used it will appear in the dropdown for future ones.

Field2: price

This is how much you will charge for shipping on this tier of quantity.

Field3: product

This is the product that the shipping price applies to. By default it is set to <none> which means that it is a global shipping price for that tier of quantities.

Field4: start quantity and Field5: end quantity

This is the quantity ordered range to which this shipping price applies. If you want a blanket price use min max ranges such as 1-9999.

Discount Policy

This allows you to specify what discounts you would like to apply at time of checkout based on certain criteria. The following options are available and can be mixed and matched:

· Discount based on final quantity ordered on all products. This means that at time of checkout, if the combined number of items ordered falls within a specified range, then discount will be so much. As many levels of discount can be setup as you want. So for example you could have one discount level for 1-5 items, another for 6-10 and so on. You can also have different levels of discount for the same products, based on promotional codes entered at time of checkout.

· Discount level based on each product. This can be used as above but for individual products only.

· Mixing and matching the top two. You can have a blanket discount policy, but may apply different levels on certain products only.

Examples of this in action are shown in the section ‘Checkout options’.

Admin view

Field1: discount or promotional code

This is a code that you assign to represent the discount percentages. This can represent a certain promotion that you are running at the time. Initially when you add a promotional code, the dropdown is populated with promotions already setup. You can either select one, or type in a new one in the code field. Once a new one is used it will appear in the dropdown for future ones.

Field2: discount percentage

This is how much percentage will be deducted for the discount on this tier of quantity.

Field3: discount product

This is the product that the discount applies to. By default it is set to <none> which means that it is a global discount percentage for that tier of quantities.

Field4: start quantity and Field5: end quantity

This is the quantity ordered range to which this discount applies. If you want a blanket discount use min max ranges such as 1-9999.

Remember you can have a complete set of discount percentages repeated for every promotional code.

Checkout and order confirmation

The following explains what happens during the shopping basket / checkout and order confirmation stages.

Site Search Facility

This page is part of the liberty template and is automatically included in the menu options and buttons. This derives a list of all of the web pages created in the site and provides summary details about each page. It also provides the sub categories in pages and allows detailed searching and navigation to these pages.

When first presented all pages are listed with brief details about them:

Each page is in column one. The page can be navigated to by clicking on the page name. If the page is further subdivided into categories then this is also shown with the category description. That’s specific category only can be displayed if the category name is clicked in column two.

To search for pages only containing the text entered then do not tick the ‘Display and search all page articles as well’. If a detailed search is required for all pages AND all items in the pages then tick the box.

Ticking the box will then display the page name, category name/ text AND a summary of each item as well.

Appendices

Appendix A Colour Selection

Whenever a colour choice is available then the following options are given:

Appendix B Common Administration Features

These are features found on many of the administration pages and this describes how you use them for all pages where they are found.

Buttons

The following describes the common buttons found on pages and what they do:

	This returns the user back to the main menu
	This adds a new occurrence of whatever it is you are currently viewing. For example if you are in the ‘your pages’ section it will ‘Add New Page’. Whenever this is selected a blank new row will appear at the bottom of the page ready for new input
	This will remove an occurrence of whatever it is you are currently viewing. For example if you are viewing a list of your pages then it will delete that page. A confirmation is displayed first before the delete takes place.
	This allows you to browse for files locally on your PC. It is presented in situations where you are able to upload files from your PC to the web site. This process is described in the ‘File upload’ feature in this appendix.
	Once a file has been browsed this will upload the selected file(s) to your web site. process is described in the ‘File upload’ feature in this appendix.
	A brief description of what the page does appears at the top of every administration page but pressing this will give more detailed online help.
	When an image (or other file) has been uploaded to your site this button appears next to it in the list. This remove the file from your web site and is no longer displayed.

Hyperlink Commands

The following describes the common hyperlinks that appear throughout the administration pages and what they do:

Edit	This allows you to change details about the item you are viewing. For example if you are viewing ‘your web pages’ then it will allow you to change information such as the page text etc for that page. When you choose this option the selected row changes and you can then change the details presented.
Update	Once you have selected Edit and you have made your changes, clicking this option saves the changes and commits the change to your web site.
Cancel	Once you have selected Edit and you have made your changes, clicking this will not commit your changes and forget that you ever made them.

File Upload Facility

There are a number of pages that allow you to browse for a specific file from your hard disk (image or otherwise) and upload it to your web site. It will also attach that file to the item that you browsed next to. Places that this can be done are:

· Categories and Groups. You can attach an image to each category so that when categories are presented in gallery format on your web site that image will be displayed with the category name and description.

· Your web pages. There are three images that can be uploaded for each user web page:

o Page header image

o Category gallery background image

o Item gallery background image

· Content. When items are defined for a page then an image and a file attachment can be uploaded for that item. These appear next to that item in gallery view or list view styles.

These are described in more detail on the relevant page description section of this document.

The steps for uploading files are as follows:

For each item that you wish to upload an image or attachment for click the browse button and choose your file to upload. At this point your files HAVE NOT yet been uploaded to your web site.
Once you have browsed for all of your files then press ‘Upload selected files’ the files are then uploaded into your web site and attached to the items. A message appears such as:

1 file(s) uploaded totalling 266 Bytes
Detailing how many files were uploaded and the total byte size.

Use this button to remove the uploaded image attached, and detach its reference from the item.

Appendix C Rich Text Editor

This facility allows you to design your text and images on the screen and see what it will look like on the final page. There are many facilities and formatting options and these are described in the next section.

Rich text can be created for the following areas on your web site:

· The page header text

· Item full text

The editor looks like this:

Toolbar Buttons

The following describes the common buttons found at the top of the editor and what they do:


Paragraph		This specifies what type of HTML section the selected text is. Choices are: Paragraph, normal, heading1 .. 6, Formatted and Address
Size		Size of the font (1 to 6)
Color		Font colour (choice of 21)
Highlight		The background highlight colour of text

Remove All Formatting		Removes any formatting set in the toolbar for the selected text
Justify Center		Centre justifies the section selected
Justify Full		Full justifies the selection
Justify Left		Left justifies the selection
Justify Right		Right justifies the selection

Bold		Make the selected text bold
Italic		Make text italic
Underline		Underline the text
StrikeThrough		Puts line through text
SuperScript		Makes text superscript (little and high)
SubScript		Makes text subscript (little and low)
Bulleted List
Numbered List
Indent
Outdent

Insert Table		Inserts HTML table. You define the rows and columns and insert what you need in any of the cells.
Insert Image From Gallery
Insert Image		Inserts and image from browsed for files from your PC
Create Link		Creates a hyperlink to your chosen URL.
Unlink		Removes hyperlink created above

Cut
Copy
Paste
Delete
Undo
Redo
Print

IE SpellCheck		This needs a download from the web to work. Follow the instructions for the first time of use.
Symbols		This allows you to enter special symbols such as ©. The dropdown will show a complete list

Insert Rule		Horizontal line at the cursor position
Insert Date
Insert Time
Insert Html		This allows custom HTML to be inserted. At time of writing the following are available: · Line Break (<BR> tag) · Sample Style setting (‘<FONT style="FONT: 10pt arial; COLOR: red; BACKGROUND-COLOR: yellow">’) Change to required settings

Saving your changes

Once your changes are complete, click the save button (or Exit not to save) and you will be presented with one of the following pages depending on what you have changed during your session:

No image changes

If you have not removed any images, or added any new ones then this will be displayed. Click on Exit to go back to the previous page.

Deleted images

If you have removed 1 or more images while editing your rich text then this will be displayed. The image file is removed from the server and the page reference.

Added images

If you have inserted one or more images then you will be presented with this page. It is vital that you complete the steps prompted for on screen as the images embedded are not transferred up to the server until you do. If you do not then you will be presented with a square and red cross image on your page indicating that the image cannot be found.

· For each image displayed in the page copy the entire image text on the left. In the example above highlight ‘c:\documents and settings\Charlie\My Documents\My Pictures\40mm-padlock.jpg’ and ‘Copy’.

· Click in the text box to the right of this and ‘Paste’

· Once all image text has been copied and pasted in each box choose ‘Upload Files’.

If this process goes wrong don’t worry as you can just renter the Rich Text Editor and insert the images again and start over.

After uploading the following message will appear:

This indicates that the image(s) have been transferred.

That’s it!

Appendix D Sample layout settings

The following displays examples of page layouts within liberty and the settings to achieve it. Key to settings are:

· PS: Page settings

· PI: Page image and header text settings

· SC: Search and Category settings

· ID: Item display settings

Page example 1 (multiple items, multiple categories)
	Category level view PS: Title colour-royal blue PI: Image justify-right,image size 80x80, category image size 80x80, text paragraph size 100x70 SC: All searches ticked, picture hierarchy ID: List style display, Background colour-white, item colour-Powder blue, alternate item colour-lightgoldenrodyellow, gallery display style-image to left of text
	Item level view 1 After selecting ‘Heavy widgets’ above
	Item level view 2 After selecting ‘Heavy widgets’ above ID: Gallery style display, Background colour-white, item colour-Powder blue, alternate item colour-lightgoldenrodyellow, gallery display style-image to left of text
	Item level view 3 After selecting ‘Heavy widgets’ above ID: Gallery style display, Background colour-white, item colour-Powder blue, alternate item colour-lightgoldenrodyellow, gallery display style-image and text in centre
	Item level view 4 After selecting ‘Heavy widgets’ above SC: Only category searches ticked, dropdown style ID: Gallery style display, Background colour-white, item colour-Powder blue, alternate item colour-lightgoldenrodyellow, gallery display style-image and text in centre
Page example 2 (one item only)
		With only one item created for the page the full page text for that item is displayed instead of the higher level page.
Page example 3 (multiple items and categories)
		Category level view PS: Title colour-deep pink PI: Image justify-left, Image size 60x60, category image size 80x80, text paragraph size 120x50 SC: No searches ticked or available ID: Gallery style display, Background colour-misty rose, item colour-hot pink, alternate item colour-white, gallery display style-image to left of text
		Item level view There is more text than the text paragraph size allows so scroll bars appear.
Page example 4 (multiple items and categories)
		Category level view PS: Title colour-dark slate blue PI: Image justify-centre, Image size 85x50, category image size 85x85, text paragraph size 100x50 SC: All searches ticked ID: Item style display, Background colour-white, item colour-silver, alternate item colour-lavender, gallery display style-n/a