Site Templates
Here is a collection of site templates that have been designed for different layouts and purposes.
They have all been made templates, so you can get your own copy and change it to how you want it to be.
All the documents used on the templates are available so they can be adjusted and personalised to suit.
Template 1 - No navigation bars, just buttons
I have taken all the navigation off ( no side bar or horizontal navigation tabs ). I have also removed the header so that custom headers can be placed on each page.
I made page 1, linked off button one on the home page, then I made that a page template so that I didn't have to worry about sizing the Google drawing at the top every time I made a new page. All I have to do to make a new page is to choose the page template and change the link to a different google drawing ( if i want a different one at the top ). All of the buttons are made on Google Drawing and either embedded as a drawing (in the case of the page headers, so the moving gifs work) or saved out as images and the images linked as buttons.
Template 2 - Putting pages into groups on the sidebar
I looked at how to collect pages together for different groups. I used the "treehouse" template to get the overall look of the site. The sidebar was kept switched on and I have not used a horizontal navigation bar. I put two different navigation areas in the sidebar and chose which pages to include in each group. The group 1 and group 2 titles were made on Google Drawings and saved as image files. These were included in the sidebar in text boxes. This is quite a simple set up, but I wanted to focus on grouping elements together in the sidebar. To simplify the look more, I removed the search box that automatically appears in the header and centred the main title.
Link to documents used on this template
If you want to find out how to make the slider on the front page, the link is here.
Template 3 - Hub page for a teaching group / department
I have made a single page site. It has no navigation either on the side bar or the horizontal bar.
The header has also been removed to make the site simple.
The main focus of this design is for groups of teachers in the same hub / team / department to have a single place to put links to their individual class sites.
The main buttons are designed to have a picture of the teacher and the name and classroom on them.
The logo could be the school logo.
All the buttons on this example are linked to external sites. You could link them to pages on the same site or to separate sites made by the individual teachers.
Template 4 - Header and matching horizontal navigation
The header is still on this design and is made on a Google Drawing. This was downloaded as an image file and put onto the site in the themes, colours and fonts section of mange site.
The horizontal navigation is on and it is set to links. The colour of the links have been changed to match the header. This was done in themes, colours and fonts on the manage site option.
The layout of the page is the choice with the left side bar, so this is where the round group buttons were put. These buttons were made on Google Drawing and downloaded as image files.
Template 5 - Using a Google Drawing for the Navigation
The main focus of this template is the embedded Google Drawing. This drawing has a picture on it that has areas made into hyper-links to websites. When you click on the individual areas (planets, in this case), you are taken to different websites.
All the navigation has been removed and the main elements are the 5 round buttons at the top. These could take you to documents with the work for individual tasks or they could take you to more pages on the same website. ( the example buttons here are not linked to anything ).
I have laid out these 5 buttons in a single row table that has 5 columns in it.
As I had made the site 1000px wide, I made each of the 5 columns on the table 200px. The colour of the border of the table was changed to white, so it is invisible against the white background, by changing the rgb colour number to 255,255,255.
I then made sure the button images that I placed in each of the table cells were set to 100%, as this means they fill 100% of the space they are given... ie the 200px you gave to the cell width.
All of the images were created on Google Drawings. The header and the buttons were downloaded from drawings as png files and uploaded to the site. The main image with the planets on it was embedded as a Google Drawing so the hyper links will work.
Template 6 - Using a Google Drawing as the Navigation / Coloured Bars
This template design continues the theme of using a Google Drawing for the navigation. The front / home page is an embedded Google Drawing. I have removed the site title / header and both navigation bars so this is all reliant on the Google Drawing. Each of the coloured bars acts as a link to a page on the site. This had to be done on the drawing itself, so the links could be placed on the coloured shapes. I made the pages on the site and took each page url to be the link on the drawing. The coloured bars theme is continued on each page with the headers...
The titles of each page have been removed on the page settings so these title bars are right at the top of each page and match with the coloured theme. I have not put a home button on the individual pages as they open in different windows when clicked on the main page, so the home page is left open.
Here is the link to the template.
Here is the link to the file of documents used on the design.
There is a How To about making shapes into links on Google Drawing here
Template 7 - Google Drawing navigation with a uniform colour used behind the design.
This layout has the header still in place but all the navigation is turned off.
The image for the header was made in Google Draw, with the background of it left transparent and the writing white. When downloading, the png option was chosen as this keeps the transparency.
The background colour of both the site and the page was chosen to be the same in themes, colours and fonts, so an even colour is behind everything.
The main image is an embedded Google Drawing so the links on each option work. The background for this embedded drawing is transparent so when it is put into the site the colour of the site shows through.
Link to the files used on the template here
There is a How To about making shapes into links on Google Drawing here
Template 8 - Left hand side navigation via a drawing with an embedded map
This design has the page set up so that the layout is "left sidebar". Both the horizontal and the sidebar navigation is turned off.
A tall, slim Google Drawing is embedded on the left sidebar with the links to the group pages set up on the drawing. These links lead to site pages for each group.
The header was made on a drawing and downloaded as an image file so that it could be used in the header on the site.
The main, large area of the page on the home page is used by an embedded Google Map that shows the areas of the school that each group is in charge of keeping tidy.
Using the left sidebar option to put the navigation drawing in leaves the rest of the page available for content on the front page, as the whole thing is not taken up by navigation as in other examples in the series.