SiteMaker is the perfect tool to meet the requirements
of UK Key Stage 3 ICT Curriculum.
Schools SiteMaker comes with a set of
online resources designed to support schools and pupils
as they build. We’ve worked with teachers to produce
additional learning resources aimed at meeting the educational
requirements of Key Stage 3 Learning. Our documents
cover areas such as:
Guidance on layout and site structuring
Designing an effective homepage
How to compress images for optimal online display
In addition our online support system, help.sitemakerlive.com,
provides guidance on how to use all
aspects of the Schools SiteMaker product.
Guidance on layout and site structuring
Achieving a professional look with SiteMaker is easy to do. Keeping things minimal and structured is the key. Create some rules for yourself and stick to them throughout the site.
General page guidelines
Not too much, not too little
Avoid overcrowding a page. Leaving areas clear ('white space') creates a more professional look. Equally, avoid pages that are too sparse. Too much or too little information on a page can put viewers off. Carry all or at least some of the same design styles and colours across each page of your site to create a feeling of continuity and cohesion.
Colours and styles
Simple backgrounds such as 'plain' or 'sidebar' from our library instantly provide the start of a professional look. Add to this effect by using the colour wheel in Site Control to make the background a neutral colour. Bolder colours can be put to use elsewhere, such as in the logo, menu and type. If a strongly coloured background is what you want, be careful not to choose colours that are too garish.
Choose simple, legible typefaces such as Humanist (sans serif) or Times (serif). Clear communication is important. Avoid using more than two different font styles on a page and keep to a limited colour palette.
Stick to one, two or, if necessary, three sizes of body text on a page. Type sizes can be adjusted in two ways in the page editor: you can specify 'larger' or 'smaller', or you can scale the whole text box using the scale tool.
Text headings and paragraphs
Try to break your text down into manageable chunks to help the user read, understand and navigate through it. You might want to think about how you can divide up your content by subject, date, or level of detail.
Clear headings will quickly direct the reader to the parts of the site or text that are most useful. They will also help you think about your own content and what areas you should cover.
Once you’ve got these lists of headings, you can use them to build the structure of your site.
You could use the headings as page titles, and organise your content onto different pages. Or you could have individual headings within the text on a single page. This may depend on how much content you have, and what type of site you are building. Have a play around and see what works for you.
Designing an effective homepage
Because a homepage is all about being individual and creating a look that's unique to you, there are no strict rules about how to design one... however, just to point you in the right direction we've come up with a few guidelines to help you create a satisfying and well-designed website.
Once you have set up your basic site by clicking through the initial process (site type, site style etc), you can refine or completely change each design element (background, title font, logo, menu, body text font and layout) and tweak their colours to make the site individual to you. It's worth spending some time on this as there are so many options and combinations to choose from.
A homepage with no personal photographs or other original images can be uninviting. Use one of our many widgets like the thumbnail gallery to make your pages image-rich. Be careful though, as too many images on a page can make it slow to load.
You can also make your images look more interesting by using the circle cropping facility or some of the frames. This puts your images into a shaped or decorated surround, which can be more visually appealing. All this can be found in 'our images and widgets' in the page editor after clicking on 'add' and 'library files'.
Layout and colour schemes
Using the multi text box option allows you to have a main text feature, e.g. an introduction, and a couple of sub-headed features as well (see the example below). It's best to keep text box layouts quite structured so that they're easy to read. Check that the colours you use do not make any type too hard to read. You might want to avoid dark-on-dark or colours that clash.
In this example of a multiple text box layout, notice how using different sizes and colours creates a hierarchy, i.e. it becomes clear which paragraph is the lead article and which paragraphs are subs or captions.
Last but not least
By all means be creative with your designs, but remember that a page that's particularly hard to read or use may turn your visitors away.
How to compress images for online display
A homepage with no personal photographs or other original images can be uninviting. Selective use of images can increase the effectiveness of communication within a site, while making it more attractive for the user. Be careful though, as too many images on a page can make it slow to load.
There are two parameters you’ll need to consider when working with images for publication on the internet.
Size – typically set as a number of pixels, e.g. 400 x 300, and Compression – typically set as a fraction of 100% as a level of quality (for jpegs)
The size of the image should be determined by the design of your page. Once you’ve laid out the text and other content, how much space is there for the image?
Most images are rectangular in a 4:3 aspect ratio (like a TV). A good size would typically be 400x300 for online display, and images bigger than 800x600 will usually be too big and require the user to scroll their browser window.
The other parameter to consider is the compression level for the jpeg. This is typically set as a %, and refers to the quality of the image, e.g. 100% will offer no compression, while 70% quality will offer a 30% compression.
This only affects the file size, but setting too aggressive compression will introduce some loss of quality in the image, especially if there is a lot of high-contrast detail. The compression parameter is usually set as an option in the "Save As" dialog of your favourite image editing program.
: a good sized image would be 400x300 pixels at 80% quality. This will generally by less than 50k and quick to download for your users.
Remember, even at 400x300 size, you can still scale the image in SiteMaker to make it appear larger or smaller on the page. However, scaling it in SiteMaker like this will not affect the file size.
SiteMaker tools for images
You can also make your images look more interesting by using the circle cropping facility or some of the frames.
This puts your images into a shaped or decorated surround, which can be more visually appealing. All this can be found in 'our images and widgets' in the page editor after clicking on 'add' and 'library files'.