1. GCE Applied ICT G053: Lesson 11 Website Graphics
Mr C Johnston

2. Learning Outcome
Know the properties and suggested use of different formats of graphics found on WWW
Understand how to manipulate and optimise graphics so they don’t slow down the download rate of your site

3. Website Structure
All files related to your website need to be saved within a folder structure so they can be accessed
Typically websites will have this structure
wwwroot
images
navBar
index.html
background.jpg
banner.gif
logo.png
Within your work area create a folder structure suitable to store all the resource files for your websites

4. Website Graphics
Graphics for websites need to be stored as certain file types
GIF, JPG and PNG are the three common file types
Each file type have different properties and make them suitable for different purposes
Carry out some research into GIF, JPG and PNG file types. Make a not of the key properties of each file type and what applications they are suitable for.

5. Graphic Optimisation
Aim is for graphics to be as small as possible so don’t take long to download
Process of optimisation
Need to select the correct file type for the application
GIF, JPG, PNG
Need to crop what don’t want and physically resize
Reduce the colour depth
Export and use third party optimisation software
Final images should be saved to wwwroot\images

6. Common Techniques Crop Resize Transparent background
Reduce colour depth
Save and optimise

7. Navigation Bar and Buttons
Buttons should be small and look neat
Add effects so they pop out and create rollover states
Dropdown menus also should have rollover states and dimension
Standard sizes and shapes
Fireworks also has some templates and drawing tools to create standard buttons
Own shaped buttons
Need to create them freehand using fireworks or another graphic package
Use the export wizard to generate code and image files

8. Animation Slide shows HTML 5 and JavaScript
Size all images to the same dimensions
Place each one on a different states within a fireworks file
Export them as an animated GIFs
Use the time per frame to alter the speed – 1 frame per second may be too fast – preview
HTML 5 and JavaScript
Size all images to the same dimensions and save as a selected file type
Use code to add animation effects – websites / YouTube videos could help you generate this independently

9. Activity
Use the techniques demonstrated today to create all the graphics requires for your site
REMEMBER optimise your graphics so your website is lean and will load quickly