Website Header Design

You will be required as part of the examination to make an appropriate banner for the site.

Your next site will be for a country park (Helpton House Country Park) so as an example we will make a logo and banner for his imaginary country park.

The examiner will give you the assets that you can work with so I have done the same. Here are 8 countryside views that you can use to make your banner and for use on the rest of teh site. Right click on an image and then copy so that you can paste it in to Fireworks.

The logo

Make a simple logo no more than 100 pixels square. From Fireworks choose New and then change the "canvas size" settings to be

You can zoom in so that you make your design more carefully.

This is the logo that I have made.

As Helpston House is aliterative I have used the letter H twice. I made the letters italic and (from the text menu) converted each to a path. then I could combine the paths (from the modify menu) to make the double H a single shape.

It is then possible to add effects such as filters which provide bevels and shadows.

The next step is to make the banner. This time make a wide Fireworks file, that is almost as wide as your web page, perhaps 1000 pixels wide by 120 high.

Select and copy the image that you want to use and paste it into the empty Fireworks file. It should look something like this:

The idea is to end up with a narrow strip of the background. You can move the image about so you get the effect that you are looking for; I have selected the part of the image that shows the horizon.

Now add the logo and the banner is almost complete.

Add some text relating to the scenario such as the business name a contact number, like this:

Now there are two aspects still to do; some animation and a hotspot linked to the website.

Adding animation.

Find the section of page page that shows "Pages, states and layers". Normally the layers are shown. Here you can see the various elements that have been added to the banner.

Change the property window from "Layers" to states. The "states" will show the various frames of athe animation that you want to make. I am going to change the colour of each number in the phone number, one number at a time. There are 11 numbers in the phone number so I will need 11 states, one for each number.

Right click on "State 1" and choose "Duplicate State" ...

... and choose 10 (in this case I am adding 10 further states to make 11 to match the number of numbers in the phone number).

Press "OK". You can now see the 11 states. The appearance of all of the states is identical, all that is necessary is to change the colour of a different number in the phone number in each state.

Use the player icons to play the little animation that you have made.

This works but the transition is a little too quick. Right click on the first state and choose "Properties".

Lengthen the delay between the changes from 7 / 100ths of a second to say 20 / 100ths of a second. Do this for all of the states.

This is the result:

An improvement you will agree.

Now adding the "hotspot" to the logo and web link to the index page of your site. Use the "hotspot" tool from the tool bar (indicated in the image below)

and draw a rectangle over the logo. You will get a blue/green box over the logo. Now add the URL of the target web page, in your case it will be "index.html".

One last thing, the banner needs to be exported as ananimated GIF so that the animation works on the web. From the "File" menu choose "Export Wizard". When the wizard runs, press "Continue"

Press "Continue",

Press "Export"

Save your banner with a suitable name, make sure that you include the phrase "GIF" so that you know which is the banner that is animated.

Job done, one animated banner with weblink to the home page.

Another little hint is adding the name of the site to the tabs at the top of the page. Copy the title of your page into the section shown as "Title" at the top of the page.

Your task - 3 hours.

Your task is to make the Helpston House website.

The site is to have five pages:

  • The home page - a brief description of the purpose of Helpston House. Include the map on this page and use a graphic editor to highlight two of the activities that are available to youngsters visiting the park.
  • Activities - what activities are available to visitors to Helpston House . Include images showing children having fun. All of the images should be the same size.
  • Teenz Club - Helpston House has a thriving club for teenagers.
  • The shop - a range of goods are available at the shop. You must show images of individual items rather than the one image showing many items.
  • The Cafe - what's good and what you can eat at the cafe at Helpston House

You may only use the images on this page and the same images available on the (Helpton House Country Park)

Students' websites - Holistic marks

This provides the structure for the assessment of your finished website.

Activity 1: design, build and test the microsite




Page template  Banner present, full width of page 1
  Suitable text on banner – eg name of the establishment 1
  Correct logo within banner, proportions retained (1) - Logo is hyperlinked to the home page (1) 2




Images Map of park included on home page (may be edited) 1
  Map edited to draw attention to two locations/activities featured on microsite 1
  Image showing only one type of product on sale in shop (from shop.jpg) 1
  Images are well cropped and not distorted 1
  Cropped image (thumbnail) links to suitable edited version showing range of products 1
  Onion café menu included and legible on screen 1

Structure and functionality




  No rewardable material. 0
Level 1 The microsite has a structure that does not fully address client requirements. It may not be logical (eg it may be difficult to find links to some pages or the user may need to drill down inappropriately such as from the Teenz page to the Kidz page). The site may not be fully functional (eg some links may be missing or broken). 1-2
Level 2 The microsite has a logical structure and most required links are present and functional. The navigation does not fully address the client’s requirements (eg the hierarchy may not be as specified in the client brief, such as all pages being included on the navigation bar with no need to drill down). 3-4
Level 3 The microsite has a logical structure with a hierarchy and functional links that fully address the client’s requirements (an appropriate navigation bar requiring drill down from the Club pages as specified, and all required links). 5-6

User experience




  No rewardable material. 0
Level 1 A user interface that allows access to most of the content, although significant scrolling may be required at the specified resolution. Learners may have added accessibility features but these may not be used appropriately (eg alternative text may have been added to some images but some or all of the text may be inappropriate, and/or colours may be high contrast but include unsuitable combinations such as red and green). 1-2
Level 2 A user interface that allows access to all the content with minimal scrolling required at the specified resolution. Appropriate use of at least one accessibility feature for visually-impaired visitors (eg clear alternative text may be applied to most images or appropriate high contrast colours may be used on most pages). 3-4
Level 3 An easy-to-use user interface that allows access to all the content without scrolling at the specified resolution. Consistent use of accessibility features for visually-impaired visitors where appropriate throughout the site (consistent use of high contrast colours, scaleable fonts and clear alternative text on all images, avoiding inappropriate colour combinations such as red and green). 5-6

Content selection, preparation and presentation




  No rewardable material. 0
Level 1 Some content is relevant and error free although selection and preparation of text and images is not generally the most appropriate (eg given text may not be copied correctly, additional text may be inappropriate, fonts may not be suitable for on-screen viewing, and some images may not be relevant to page content or may not be optimised, sized or positioned appropriately). Some combinations of assets on the pages are appropriate for the audience and purpose (eg images and text are generally appropriate on some pages but less so on others). 1-2
Level 2 Most content is relevant and error free with some appropriate selection and preparation of text and images (eg given text may be edited to improve its suitability, some images may be edited to improve their relevance to adjacent content). Some effective combinations of assets on the pages that demonstrate some awareness of the target audience and/or the woodland location of the park (eg the colour scheme may reflect the woodland location of the park, some images may be well-chosen, optimised, sized or positioned to illustrate accompanying text which is generally error-free and appropriate for under 18s). 3-4
Level 3 All content is effective, including appropriate selection and preparation of text, choice of format and emphasis, selection and preparation of images. Effective combinations of assets across the whole microsite that demonstrate sound awareness of the target audience and the woodland location of the park (the student clearly understands the purpose of the microsite and has used combinations of text and images to produce content that would appeal to under-18s and encourage them to visit the park). 5-6

Overall consistency




  No rewardable material. 0
Level 1 Components of the page template and/or other aspects of the layout and design are not applied consistently (eg the navigation bar or page design may not be consistent across the site, colours or fonts may not be used consistently, the banner and/or logo may be positioned inconsistently or vary in size or colour). 1-2
Level 2 The page template may not have been applied to all pages but the required components (banner, navigation bar) are used consistently. Most aspects of the layout and design are consistent (eg navigation, page structure, colour scheme, text formatting). 3-4
Level 3 A page template that includes the required components is applied to all pages. Layout and design are consistent across the microsite (navigation, page structure, colour scheme, text formatting). 5-6








(000) 000-0000 x12387


1234 Somewhere Road #5432
Nashville, TN 00000
United States of America