Jisc TechDis

Xerte Online Toolkits

Using the Navigators page types

Introduction
This tutorial covers the use of the various Navigators page
types which provide different means of displaying information
on the same page in smaller and/or separate chunks. This
guide covers both the Column Page and the Tabbed Navigator
however the other three navigators currently available are
also created and used in a very similar way.

Pre-requisites
You should already be familiar with the basic steps required
to create or edit a learning object with Xerte Online Toolkits
before beginning this tutorial. (See relevant tutorials if
necessary)

Context
The navigator page types can be used to present information
in a way which is easier to read and/or navigate. Complex
and comprehensive information can be displayed on the same
page and where appropriate, broken down into separate
panels. The column page provides a more flexible method of
displaying the information in one go and the other navigators
provide different ways to select and view additional Key:
information.
New sequence
1 Sequential steps with screenshots for reference
2
Repeated steps without screenshots

© Jisc TechDis 2013 1 http://www.jisctechdis.ac.uk/xerte

 Adding a Column Page

3 In this example we’re going to continue with our

Introduction to Photography with the first page covering the
creation of panoramas. Add a Page Title:
1
Creating panoramas
4 Click New Nested Page

1 6
It’s a quick and easy task to add any Navigator page to
an existing or new learning object. To follow this guide simply
select an
existing LO, or
create a new
project.
2 5 Add a Page Title for the nested page. This doesn’t
2 Select display as part of the published LO but helps identify nested
Insert > pages when authoring:
Navigators > Left
Column Page
to add a new 6 Add the Page Text:
Navigator page. N.B. You can copy and paste this text from the text file
N.B. You can provided as part of the assets zip file which you can download
download the direct if you are viewing this guide online.
assets used in The zip file also contains the images used in the examples we
this guide via will create during this tutorial. We’ll use one of these images
the link on the in the next step…
first page.

© Jisc TechDis 2013 2 http://www.jisctechdis.ac.uk/xerte

 9 Browse and select the image: panorama_left.jpg

10

7 Select Image from the Optional Properties menu

8 With Image selected click Add 10 To improve accessibility we also need to add an Image
Tooltip. Select Image Tooltip and click Add.

11

11 Add an appropriate and helpful description of the image to

9
the Image Tooltip text box:
Left hand image of panorama

© Jisc TechDis 2013 3 http://www.jisctechdis.ac.uk/xerte

 12

13

12 If we preview (play) our LO as it is now, it will show the

image and text in one column which spans the width of the
page. This will prove a useful option later however for this
first page we’re using the Column Page navigator to display
3 images and 3 blocks of text so we need to add 2 more
nested pages.
14

13 With the first column set add a New Nested Page.

14 Repeat the process for the 2nd (middle) column adding the
Page Title, Page Text, Image and Image Tooltip and then
click New Nested Page again to add the 3rd column.

© Jisc TechDis 2013 4 http://www.jisctechdis.ac.uk/xerte

 16 In this example we’ve added an image to each column
but the column page can include a variable number of
columns with some containing optional images and others
not. The images will resize automatically based on the
number of columns and text added.

15
17

17 Add another Column Page

15 Add the Page Title, Page Text, Image and Image

Tooltip for the 3rd column and click Play to preview the
page…

18

16 18 We’re adding a column page, even though we only require

one column, to take advantage of the flexible layout this page
type provides. Add the Page Title, Page Text, Image and
Image Tooltip and click Play to preview the new page…

© Jisc TechDis 2013 5 http://www.jisctechdis.ac.uk/xerte

 19 Adding a Tabbed Navigator Page
The other Navigator Pages all provide an option to include
additional panels of information which are displayed when a
tab or button is selected.

21

19 Click next to browse to the new single column page

21 Click Insert > Navigators > Tabbed Navigator

22

20

22 Enter the Page Title and Text (copy and paste from the
notes file) this text will remain on screen regardless of which
20 The image and text fills the page which provides a useful tab is selected. Then click New Nested Page.
option wherever this type of layout is required.

© Jisc TechDis 2013 6 http://www.jisctechdis.ac.uk/xerte

 23

23 The new nested page will be our first tab, including text 24

and an image. We’re including a number (1. Film/Sensor) as

part of the Page Title to match the numbered points in the
introduction added in the previous step, but this may not
always be appropriate. Add the Information explaining
Film/Sensor and click New Nested Page.

24 Repeat the process for the other 2 pages covering 2.

Aperture and 3. Shutter.

25 For these two nested pages change the Align Text option
to Bottom. This will display the text below the image for
these two tabs.
25
Once complete click Play to preview and navigate to the new
Tabbed Navigator page…

© Jisc TechDis 2013 7 http://www.jisctechdis.ac.uk/xerte

 27

26

26 The 1st nested page/tab displays automatically with the

text above the image as this is the default which we didn’t
change. 28
27 The 2nd tab, when clicked, displays the image and text
explaining Aperture with the image above the text.
28 Likewise the 3rd tab displays the image and text
explaining shutter with the image above the text.

Reducing the amount of information displayed on screen at

any one time can make the content much easier to read,
navigate and ultimately understand. The navigators also
provide options for basic differentiation, where the key
information is displayed automatically but where the user can
choose to navigate to and read additional explanation and
clarification, or simply move on to the next page/topic.
© Jisc TechDis 2013 8 http://www.jisctechdis.ac.uk/xerte
 Recap
The Navigator Page Types provide a very easy and flexible
Notes
way of displaying a comprehensive and complex amount of
Make notes here to remind yourself and reflect on any ideas you had, or
information on a single page. As demonstrated, the Column features you discovered, whilst working through this guide.
Page can be used to display one or more columns of
information and the Tabbed Navigator page can be used to
separate and display additional information and explanation.

After trying these first two examples you should also find it
easy to use the Accordion, Slideshow and Button Navigator
pages. Try each of the navigators and make notes of ideas
and features in the panel opposite.

View an interactive version of this tutorial and others at

www.jisctechdis.ac.uk/xerte

Tutorial created by Ron Mitchell mitchellmedia.co.uk for Jisc TechDis service – © Jisc TechDis 2013

© Jisc TechDis 2013 9 http://www.jisctechdis.ac.uk/xerte