That Blue Square Thing

Web Design Projects

There are a range of different things here It's not very well organised just now. Stuff happens.

1 – Simple HTML – New Zealand

PDF iconSlides from class – intro to HTML

Start with some HTML to write a page about New Zealand.

PDF iconTask slides

PDF iconInstructions

JPG iconNew Zealand image

JPG iconNew Zealand map image

Some general slides to help with formatting:

PDF iconBolding and centreing

PDF iconLists

PDF iconAdding Hyperlinks

2 – Some theory about how websites work

PDF iconSlides from class

PDF iconTask sheet to complete

3 – Links and image maps

PDF iconHyperlinks and how they work

PDF iconTRAP project brief

Images to use to make an image map:

JPG iconBackground image

JPG iconTiger

JPG iconElephant

JPG iconGolden Poison Frog

Some other possible elements:

PDF iconMaking a banner instructions (Photoshop CS6)

Image iconTRAP logo – download this to use it

4 – Travel blogger – using DIVs

This is a bit sketchy probably...

More advanced HTML with a project brief.

PDF iconThe project brief

The list of jobs to do comes in handy:

PDF iconJobs to do

Using Divs and Styles

Some theory first, with a wireframe.

PDF iconUsing Divs

And then the guides:

PDF iconStep 1 – Set up the wireframe

PDF iconStep 2 – Adding styles

PDF iconStep 3 – Styling the mainbox

PDF iconStep 4 – From page to site

A banner needs to be made between step 1 and step 2.

PDF iconMaking a banner

Image iconExample banner

There are some images to use on the banner.

PNG image iconGlobe image – this must be used in the banner

JPG image iconBoat image

JPG image iconCamper van image

JPG image iconMap image

JPG image iconPlane image

JPG image iconTravel image

These are all copyright free images from Unsplash.

Handy link:

Website color nameswiki link