How to make your Ultranet Website look great!

by Sandy  •  15 Sep 2014  •  Pedagogy, Showcase

Te Kura o Matapihi is a semi rural, special character school in the heart of the Mount Maunganui peninsula.  It is a school which is successfully engaging whānau and extending learning for their tamariki beyond the classroom.  Over the last few years the Ultranet Platform has played a key (behind the scenes) role in supporting the school to achieve their vision and goals for their tamariki and community.

Ko te kai a te Rangatira, He kōrero, Ko te wai a te Rangatira, He wānanga | Collaborating with others to achieve our goals
Ka tu rangatira ai ta tatou tamariki i roto i te ao Maori me te ao Whanui | Developing life long learners who will make a difference in Te Ao Māori and the global world.

Let’s take a closer look at their Ultranet home page and the tools they have used to make this an excellent example of how a school’s vision can be expressed from the look and feel of its public website look through into the virtual classrooms. This blog post will look at how Te Kura o Matapihi has designed their website home page and subsequent blogs will explore some of the other tools they have used to create elements of the page.

When designing your website home page it is a good idea to sit down with pencil and paper and plan the layout.  If you have existing school branding then you may choose to use this, and the colour themes it contains, as your starting point. The easiest way to organise your layout is to use a table structure to contain the content.

Firstly, make sure you know the dimensions of your page so your content will fit.  Te Kura o Matapihi’s home page is a full-width page with a width of 940 pixels (px).  It is important to note here that the full-screen option is available on the home page only. Once inside the site all webspace pages have the navigation panel on the left of the page. The appearance of these internal pages will vary depending on the layout template you have selected and the modules you have chosen to use on the page.  You can find out more about changing the elements on the page here.

Note box3

The structure of the kura’s home page is underpinned by 3 HTML tables.

The first table contains the roll over buttons. It has 7 columns and just 1 row.  The second table is a more complex one with some groups of cells merged vertically and others merged horizontally. There is also a slideshow created using WOWslider. This has been embedded into the top left cell of Table 2.  Both of these tables have images inserted into each cell which have then been hyperlinked to the corresponding subpage.

In Table 3, 3rd party media (Blogger and Google calendar) has been embedded using iframes . The final component of the page containing contact details is just an image inserted at the bottom of the page.


TKoM Home Page - Tables

So,  let’s have a look at how the tables were set up.

Whilst it can be a little time consuming,  planning how you want the tables to look will save you time in the long run as as you will know from the outset what dimensions to make the images and content that you want to pop into the cells. You can either specify the size of each cell in the table,  or alternatively make your images the exact size you need allowing the cells to resize to match the media.

Table 1 (below)  is the one with the roll over buttons in each cell.  You will notice in the graphic above that the images are separated from each other by a tiny white border.  This is because each cell has been set at a fixed width of 134 px  and the image inside each cell is only 130 px wide.

Whilst this is only a few pixels it is important to consider white space when designing the overall look of your page as it gives visual breathing room for the eye.  Including white space in your design is another reason to split your page up into more than one table.  By doing this you will not only keep your tables easier to manage but you will have more control over white space areas on your page. You can also subtly change how your table looks by adding a value to either “cell padding” or “cell spacing” Cell padding sets the amount of space between the cell contents and the cell wall. Cell spacing controls the space between table cells. .


TKoM Table 1

click map

folder structure

To produce a more complex table you just need to give more thought to the layout of your images and text within it.  Start on paper and do the math!  Know your overall page dimensions before you begin.

To build a table similar to the examples below you will need to configure both the table properties and the cell properties.  It is also more than likely that you will need to merge and split cells until you get the layout you want.   I find it easiest to start by making my images using the dimensions I have planned out on paper and then systematically uploading them into each cell of the table.  This way I can watch the table grow and tweak it as I go.

click map

Pop up Menu

TKoM Table 2

Pop up Menu

TKoM Table 3

The brief for Te Kura o Matapihi’s website  was for it to have an informative “newsy style” design which would keep their community informed and connected to the school as well as to support their tamaraki’s learning.

Ko te kai a te Rangatira, He kōrero, Ko te wai a te Rangatira, He wānanga | Collaborating with others to achieve our goals
Ka tu rangatira ai ta tatou tamariki i roto i te ao Maori me te ao Whanui | Developing life long learners who will make a difference in Te Ao Māori and the global world.

Look out for my next post when I will unpack some of  tools the school used to create content and add vibrancy to their site.