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 information.
Key: New sequence
You can access the example created and assets used to follow this guide step by step here:
1
http://xerte4.techdis.palepurple.co.uk/play.php?template_id=640
Š TechDis 2009
2
1
Sequential steps with screenshots for reference Repeated steps without screenshots
www.techdis.ac.uk/getxerte
Adding a Column Page 3 4 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 5 6
1
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 display as part of the published LO but helps identify nested pages when authoring:
2
Select Insert > Navigators > Column Page to add a new Navigator page. N.B. You can download the assets used in this guide via the link on the first page. © TechDis 2009
Left 6
Add the Page Text: N.B. You can copy and paste this text from the text file provided as part of the assets zip file which you can download from the example created and linked from the first page of this guide, or direct if you are viewing this guide online. The zip file also contains the images used in the examples we will create during this tutorial. We’ll use one of these images in the next step… 2
www.techdis.ac.uk/getxerte
9
Browse and select the image: panorama_left.jpg
7 10 7
Select Image from the Optional Properties menu 8
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
the Image Tooltip text box:
9
Left hand image of panorama
Š TechDis 2009
3
www.techdis.ac.uk/getxerte
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.
Š TechDis 2009
4
www.techdis.ac.uk/getxerte
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
18 We’re adding a column page, even though we only require
16
© TechDis 2009
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…
5
www.techdis.ac.uk/getxerte
Adding a Tabbed Navigator Page
19
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 tab is selected. Then click New Nested Page.
20 The image and text fills the page which provides a useful
option wherever this type of layout is required. Š TechDis 2009
6
www.techdis.ac.uk/getxerte
23
24
23 The new nested page will be our first tab, including text
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…
© TechDis 2009
7
www.techdis.ac.uk/getxerte
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. Š TechDis 2009
8
www.techdis.ac.uk/getxerte
Recap The Navigator Page Types provide a very easy and flexible way of displaying a comprehensive and complex amount of information on a single page. As demonstrated, the Column 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.
Notes Make notes here to remind yourself and reflect on any ideas you had, or features you discovered, whilst working through this guide.
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 the example created and download this guide from:
http://xerte4.techdis.palepurple.co.uk/play.php?template_id=640
View an interactive version of this tutorial and others at www.techdis.ac.uk/getxerte
Tutorial created by Ron Mitchell mitchellmedia.co.uk for JISC TechDis service – © JISC TechDis 2009
© TechDis 2009
9
www.techdis.ac.uk/getxerte