Schools Website Service user guide

Tabbed Layout

The tabbed layout allows you to divide a section of the page into up to 10 tabs, so that content can be divided into handy subsections.

How to make

  1. Make an inline table that is two rows deep and has as many columns as you want tabs.
  2. Choose the table style 'tabbedlayout'.
  3. Enter the titles of the tabs in the first row and set their style to 'nostyle'.
  4. Enter text and pictures as normal in the second row.
    You can still float pictures inside the columns using 'image left' and 'image right'.

Important things to note

  • You need to place a level 2 heading above the text within each tab (in addition to the title you place in the first row of the table). This ensures that your web page is well structured for all visitors.
  • Don't create more than five or six tabs, and keep the tab titles short but meaningful. Too many tabs or tabs with very long titles may not display correctly.
 

Extending the use

If you want to create more interesting layout effects, for example by having a 'picturelist' inside a tab, then use embedded text objects.

In the same way that you can insert pictures into your text, did you know you can also insert other pieces of text into your text?

It's easy, simply choose Insert > Text from the menu options and follow the onscreen prompts. As the text you insert is separate from the current text, it can have its own styles and formatting.

This can also make it easier to load and edit large pages, simply by making them up out of separate text objects.

Linking to a specific tab on a different page

To link to an individual tab on another web page:

  • Hover over the tab you want to link to and see what the address is and make a note of what follows the # symbol. It'll look something like:  #section45874-1
  • Then, in the other page, make your link to the page containing the tabs. In the link properties, under url parameter, paste the reference as above.

This makes a link that will open the correct tab.