1. Introduction to Web Design Web publishing HTML basics Web design principles Multimedia on the Web

2. Web publishing – the steps Plan your site content Make your pages using a program Publish your site Test your site thoroughly

3. Plan your site content 1. Establish the goal of your site and its users 2. Sketch site structure 3. Sketch a common layout

4. Make your pages The tools you can use Notepad (need to write HTML code) Microsoft Word WYSIWYG Web editors (e.g. FrontPage, Dreamweaver)

5. Test your site Different browsers (e.g. Internet Explore, Netscape) Different screen resolutions (640 x 480, 800 X 600, 1024 x 768)

6. Publish your site What is a web server? Where can you find a web server? How to put your pages on a web server?

7. HTML basics HyperText Markup Language Inventor: Tim Berners-Lee A set of tags which tells a browser how to format and display a web page

8. HTML tags Tag structure a starting tag (e.g. ) a closing tag (e.g. ) The starting tag A sample tag Something really cool. Some basic tags (see the handout)

9. HTML tables Using tables enables you to neatly arrange your stuff on a page. Three main tags: The tag, the tag and the tag Table attributes: border, width, cellpadding, cellspacing, bordercolor, bgcolor, etc.

10. Web design What makes a good website? From a user’s point of view, a good web site is one that… …has something he/she wants …is usable …doesn’t waste his/her time and …isn’t irritating. (Kelly, 2000) Useful Usable

11. Make your site useful What is the purpose of your site? Consider the characteristics of your users. What key tasks do they want to do on your site? What information do they want to look for?

12. Make your site usable How people use the web? Users don’t like to think or wait! Users don’t read pages, they scan them. Users choose the first reasonable link. How to make a site usable? Break a page into clearly defined areas. Create a visual hierarchy. Keep the “noise” down. Keep the file size small and reduce the download time.

13. Web design principles Consistency of presentation Clear structure to help the user to identify information Clarity of display (i.e. not too much displayed) Visual attractiveness (Clarke, 1997, p 84)

14. Task Plan your own website for future development (see the handout)

15. Multimedia on the Web Text Images (jpg, gif, png) Sound (mp3, asf, ram, wav…) Video (mpeg, wmv, ram, mov, avi…) Flash (swf)

16. Images for the Web photos.jpg cartoons.gif animated cartoons.gif

17. Images for the Web File Format JPEG (Joint Photographic Experts Group) GIF (Graphic Interchange Format) Best for photographsBest for cartoons, line art and computer-generated drawings. Full-colour images (24 bit or true colour) Limited to 256 colours; can have transparent backgrounds How to change the file format

18. Images for the Web File Size Ways to reduce the file size of an image: reducing/cropping the dimensions of the image reducing the number of colours used scanning images at a lower resolution Thumbnails

19. Images for the Web Resources Search the Web (copyright protected?) Use clipart collections Take photos using a digital camera Scan images using a scanner

20. Tasks Edit images for your web page http://www.gifworks.com Make a logo http://www.flamingtext.com/start.html http://www.3dtextmaker.com/