Using a Navigation Banner across your pages

Navigational banners a great way to ease the navigation around your Interest Space, it allows you to give visitors easy access to the key areas of your space without them having to dig around in the space content list. I usually use two table to create the banner, which is made up of images, text and links.

Example of banner on Safer Schools site

1. Create your pages
First off you will need pages for the banner to link to, in this example the pages are:
- Home
- Information
- Video
- Teacher Zone
- Student Zone
- Reporting

2. Create the lists and libraries
Make sure you hide the lists and libraries from the Space Content List when you are creating it, as they will be displayed as web parts on the page.
e.g. for the Information page you may want to create a Documents Library and a Links list to display as web parts.

3. Design your banner
For a starting point, create a table with 3 columns and 1 row, width 100%

- In the left column insert a picture
- in the right column insert a logo
- in the middle column insert a heading
Directly beneath the first table, create a second table. 1 column per page and 1 row, width 100%

- In each cell type in the name of the page
Play around with cell widths, colours, padding image sizes until it looks how you want.
You can use the table properties to put background colours for the table.


4. Link your banner
Grab the URL address of each page you have created and create a link from the banner cell you have created for it. E.g. link the text 'Noticeboard' to the URL address for the noticeboard. Repeat this for all pages.

5. Put your banner on other pages
When you are happy with your banner press the html button in the page editor and copy ALL of the code
Edit each page you have created, press the html button and PASTE in the copied code.

6. Modify pages
You can then go back an modify any text you may have in the banner to suit each page, or you could change any images or logos for each seperate page, keeping them the same size

7. Put in the web parts
Go onto each page and insert your webparts
You can have multiple web parts per page e.g. Information could have a Documents Library and a links list


Tips: 
- By putting the table width at 100%, it will stretch the banner across the top of the page. 
- I usually use 2 tables but you can play around with cells and rows depending on the site 
- Use graphics software or Powerpoint to create buttons for the page links or a more graphical header 


I've not created the extra pages or set the links, but the idea is that you'll have a page for each header in the banner, and you'll be able to get to each page just by clicking across the banner.
Examples of where this has been used. (you may not have access to all of these)
- PVE
- SIS
- ICTDS
- Education Policy Development

Using aligned images in the page editor to improve page layout

Aligning Images

For: Administrators, page editors, news or blog contributors in the Warwickshire Learning Platform.

The align function will allow you to format your picture so that text will wrap around and auto-flow around your image. This can be used when creating a page of text, banners at the top of pages, creating menu's which use images as button or for news items. Using this funtion means you do not have to create tables to format your pictures on your page.

To set a pictures alignment (you need to be in the page edit mode):

• insert the image as usual using the image manager
• right click image select image properties
• Set the alignment using the option
• set the horizontal and vertical spacing around the image
• done

Un-aligned image with no spacing

This is rubbish! you can see the text continues at the base of the image, it doesnt look that great and normally I would have used a table to align the text to the middle which would take a while to set up and configure.

Left/Right aligned images with horizontal spacing set to 10

this bumps the text up to the top of the image and it will auto flow around the image, this is useful if there is lots of text, or to put a picure at the top left of the screen. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image.


this bumps the text up to the top of the image and it will auto flow around the image, this is useful if there is lots of text, or to put a picure at the top right of the screen. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image. With lots of text you can see how this wraps around the image.