Quick Start

Step by Step introduction to LEAP™5

This is presented as a 'worked example' starting from the home page of a LEAP installed site or LEAP demo site. For a more detailed description you can use the Documentation Menu in the right side panel at any time.

Type the access word L3AP on your keyboard to leap into the site.*
Enter your username, and password:

1. Understanding Spaces and Scopes.

Click the Leaping Frog button in the LEAP toolbar - this switches on, or off, the Lenses.

LEAP Spaces are highlighted by Lenses on the page with different coloured highlights that are pre-set in LEAP™5.* Note there are:

yellow highlight box shows over the main menu - the Menu is a content space
a green highlight box over the central text area - this is a content space
another green highlight box over the right side column - this is a content space
no highlight boxes over the images or blank spaces that are embedded in the design of the skin - showing that these are not editable content spaces

Green highlighting shows the PAGE level spaces. Content entered in the Green highlighted boxes only appears on this page.

Yellow highlighting shows the SKIN level spaces. Content entered in the Yellow highlighted box appears on every page that uses the same Skin. For example Menus are defaulted to Skin (eg Home, About, Services etc) and will appear on every page that has the same Skin specified. This is called the SCOPE of a Space.

Red highlighting shows SITE level spaces.

More about Scope
The SCOPE defines just how far that content space will exist through the site (almost like a tracing paper, or ‘bleed through’ concept).
There are typically two levels of Scope available in a LEAP™5 Lite version: Skin, and Page, and up to the full six levels in the Premium and Enterprise version.

Click the Leaping Frog button again, and the Lenses turn off.
TIP! you need to turn the lenses off to be able to use the menu on the website page.

2. Adding a Page

Use the LEAP toolbar menu - Site, and select from it Add Page.

It will ask for the page name - this is the information that goes in the header of the browser window.
Click suggest and see the URL's that are offered.
If none of the ones suggested are perfect, you can edit into it, then click the tickbox to select the one you want (this is useful if you already know what the URL should be as you have already created the menu item reference to it!).
Make sure to have the skin highlighted - the text beneath the skin changes colour to show which is the selected skin.
You can choose to add default keywords and descriptions, or just click save!

TIP! Really important step - When the page is ready for the world to see, don't forget to go to Site / Page Manager / List Page and set it to "Active" - only then will external users see your new page.

3. Adding General Content

Use the LEAP toolbar menu - Add Content, and select the type of content you want to add - for this example use TEXT.
You will see all the potential places that a Text content space can be added.

activate the placement you want by clicking into the text box. This places the box and opens the standard Text editor tool frame with default text inserted “insert content here”
delete the default text, and enter your own content - for a learning exercise, you can copy and paste the example below - then click save.

Of Foxes and Dogs.
The quick brown fox jumped over the lazy dog. It was a spotted dog, a Dalmation I suppose - not that Dalmations are usually lazy - that would have to be a Golden Labrador!

4. Understanding the source view

Make sure you have the LEAP Lenses on highlighting the content spaces - if not, just click the Leaping Frog again to bring the Lenses back.

click into the Text space that was just added - only this time use the “go-large” icon to view the full editing palette
click on the very top left icon “Source”

This shows you all of the ‘print formatting’ that was pasted in with the text - this view is useful if you need to work out if some part is not displaying correctly due to hidden formatting (this issue is common to all content management systems)

click the ‘source’ icon a second time to return to the ‘what-you-see-is-what-you-get’ (WYSIWYG) view
REALLY important step: Select all the text and click the Eraser icon from the menu palette, - it will say ‘Remove Format’ when you hover over it and when you have clicked this, the ‘print formatting’ will be removed

What is left when you view the Source again are web-safe specifiers including H2, H3 (for header styles), and spans < > which allow specific text to hold a specific format when all else above, below, or beside it, is in a different format.

TIP! use the 'paste from Word' icon in the centre top of the toolbar if doing a large amount of pasting in from word.

For this interactive learning exercise we will continue to work on the text that you just inserted in section 2 above. Make sure you have the LEAP Lenses on highlighting the content spaces - if not, just click the Leaping Frog again to bring the Lenses back.

click into the Text space with the content that you just added - only this time use the “go-large” icon to view the full editing palette.

TIP! if you want to increase the size of the large editing window, just drag the bottom right corner to expand.

5. Applying a Style

Now to apply a specific style to format part of our title:

select the word Foxes from the title 'Of Foxes and Dogs' that is in the copy you inserted during section 2 above
look in the Styles drop down menu - the first item on the bottom row of the Editing tools palette
you will see h2 as the current block style - scroll down into the “inline styles” and select a style, for example, BLUE.

The window you are in will show a preview

click save
click the Leaping Frog to close the Lenses

Refresh/reload the webpage to see the style BLUE applied to the word Foxes.

To change or edit text using a pre-specified style

click the Leaping Frog to open the Lenses
click into the full edit mode using the go-large icon
highlight the text you want to change
click the Eraser icon to Remove Format
then, after you have removed the format, select your new chosen format, eg Orange,
click save, click the frog, and reload the page.

TIP! if you have trouble erasing the format, it is due to the selected content having more than one style applied - to remove them sequentially place your cursor anywhere in the offending content, then click at the bottom of the edit window where it will show " body p span " for example - this is the style cascade. Click the last element 'span' and this will show ALL of the content that is using this style, then click the eraser icon and bingo, the style is all erased!

6. Adding an Image in your Content

Adding an image from the File Manager folder

click the Leaping Frog to open the Lenses
click into the full edit mode using the go-large icon
place the cursor where you want to insert the image
from the Editing tools palette select the icon with the picture - called “image” on hover over
this opens the File Manager
choose an image from the Current Folder list on the left by clicking on it
select the image to load into your content area by clicking the Select box underneath the preview.

Arranging your Image

adjust the size of the image by entering the pixel height and width inside the Image window
add space around the image (very important if the image is to have text floating around it) by adding pixel values for the HSpace (horizontal) and VSpace (vertical) - usually around 10 pixels is a good starting point
add a simple border by entering a number of pixels for the border - usually just 1 or 2 pixels is sufficient for small-medium website images.
try aligning your image to the left, or right, and see that any text you enter around it will adjust to the placement of the image.
if you do not use left or right align, you will need to place any text above or below using simple returns to adjust the gap.

Adding images to the File Manager folder

From within the File Manager window:

use the Choose file button at the centre top of the window - this will open a browser view of your local files and you can browse to a new image and click on it to select
then, click Upload and the file will be added to your Current Folder on the left, ready to be Selected for use on your website.

7. Other elements

Horizontal Line breaks
Simple elements like a horizontal line break, or styled section break can improve both interest and readability for pages with a lot of information on them, or where really different ideas are being presented on the same page.
The horizontal line break can be inserted from the Editing palette, and the Horizontal Line icon is found three to the right of the Image picture icon.

Tables
For entering product lists, colour or size options, pricing, or other charts, and simple table can be added by using the Table option, the icon for which is found two to the right of the Image picture icon in the Editing palette.

8. Configuring to add a Menu item (for more on this see the Adding Menu, and Configuring Menu Items)

In the LEAP™ Menu Manager from the list of existing menus, select the Menu to Configure and open using the green Configure icon.

Note: If setting up for the first time, you will need to Add a menu first.

You will see the Menu items and their position - primary, secondary, tertiary or more, indicated by the number on the left hand side, and by indenting where the menu item is a child of the item above.

Add a new Menu item by clicking the Add
add a new sub-menu by clicking the +Child

When you add a sub-menu you can see it directly under the Name field showing the position that this new menu item will be.

specify the Link for your Menu to match to the Page already created - or yet to be created - for that Menu items content
if your menu item is a link to another website, you can tick the ‘Open in new window’ so that you do not lose your website visitors into another website
select Go Live as Instant, or, on a given date
specify if the page is to Expire

* the access word, and the highlight colours of the lenses are configurable.

LEAP 5 Documentation