Analysis and Design / Into to HTML


The rubric for this unit can be seen at the bottom of the page

Step 1 - Analysing websites

Before starting to develop your own website, this activity will help you understand what makes a good site. Pick a website to analyse - this must not be a blog or social networking site!

It should be from a company, organisation, or may be the official website of say, MTV or Man Utd. Either way, it should be large enough and have enough 'depth' for you to comment on a variety of aspects (design theme, colour scheme, typography, navigation etc).



Step 2 - Website Plan Template

You are to decide on a fictional company / organisation (eg retail) or product / service (eg travel agency) for which you are going to design a website. This must not be a website promoting a singer / band / football team etc.

Complete the attached Website Plan Template and complete it in as much detail as possible.



Step 3: Website Design

You are going to use Adobe Fireworks to create the colour scheme, graphical elements and logo / website name which will form the template for each page of your website. Follow the tutorials below carefully, and remember that you don't have to use the same colours or place the elements in the same position. The principles of creating these 'divisions' of your website will prove extremely helpful when you move onto Dreamweaver.


Website Design Part 1: Designing your website using Adobe Fireworks

Website Design Part 2a: Designing your header and footer elements
Video of the tutorial is below



Website Design Part 2b: Designing your background and navigation elements
Website Design Part 2c: Adding photos and content to your template
Website Design Part 3: Slicing and exporting images with Fireworks
Website Design Part 4: Setting up your website using Dreamweaver

Introduction to HTML

Work through these tutorials