What we will cover…. Planning your site. Creating a template. Images and Fonts. Absolute vs. Relative Links.
Before you start.... Why are you creating the site? Why will your students want to use your site? What will your students expect from the site?
Know your user…. Create a user profile. How IT literate is your audience? Have they any disabilities? How will they access your site? etc….
Planning…. Plan your site on paper. Organise your information into logical groupings. Balance the amount of static and dynamic material on your site. Important / often accessed information should be near the top of your site.
Planning…. Break down long documents into smaller chunks. Obtain clearance to use copyright materials.
Screen Layout Keep it as simple as possible. Design your layout to work with all set-ups. Try not to use complicated tables to achieve special layout effects. Use standard Header tags (H1-H6) rather than using Font tags.
Fonts…. Avoid using too many fonts on one page. Use a san-serif typeface such as Arial, Helvetica, or Verdana. Bold and italics should only be used for emphasis. Use colour sparingly.
Images Use where appropriate. Resize images in an image editor. Try not to use large images. Keep page background images simple. Two main image types. JPEG and GIF.
Images - GIF Format Use for small images and images with large blocks of same colour. Maximum of 256 colours Allow you to specify a transparent colour Can be ‘interlaced’ for progressive download
Images - JPEG Format Use for photographs. Stores 16.7 million colours. Can loose detail at high compression level. Image Examples Image Examples
Pages should include….. A link to the University disclaimer. http://www.herts.ac.uk/disclaimer.html http://www.herts.ac.uk/disclaimer.html Your name - preferably with an email link. Date page last updated.
Links Absolute - Use full URL as link to file. e.g. “http://www.herts.ac.uk/ltdu//index.html” Relative - Path to file relative to current page. e.g. “../index.html” - get file in directory above current page
Relative vs. Absolute Use relative links where possible. Links are independent of the server. So can create pages anywhere with no need for Internet connection. Pages easier to maintain. Most authoring software use relative paths.
The result... http://www.herts.ac.uk/ltdu/learning/on_line_tutorials/webdesign/demosite/