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

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

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

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.

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

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

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

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

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