Collect and Prepare Your Material

It is useful to decide what you wish to convey about your department BEFORE you sit down at the keyboard. Collect your information, including text and images. If you plan to include photos, logos, or any kind of graphics, you'll need to save them in a proper format for loading onto your web page.

Storyboard your site. This means, draw a picture of what your site structure will look like. How many pages will you have? If you have lots of files, use subdirectories, just like you do on your computer hard drive. How will your pages connect? Which pages will have which links on them, and so on. Get a good idea of what your site will look like before you start creating the html pages.

Text

You can use any word processing program to create the text for your html pages. HTML pages are actually just text with specific html tags in them. Everything character in an html page is found on your keyboard.

Images

You may wish to use a software program like Adobe Photoshop or Macromedia Fireworks to create, crop or otherwise manipulate your images. Adobe Photoshop is available on computers in the Bunnell lab.

What's the difference between .jpg and .gif, anyway?

Images such as photos which have a lot of shadings of many colors should be saved as .jpg. The .jpg format does better compression of photographic-type images (this includes black and white photos, with shades of gray.)

Images such as line drawings, logos, and images with distinct, separate colors should be saved as .gif images. Transparent and animated images must be saved as .gif files; these options are not available using the .jpg format.

Images should be saved using either the .jpg or .gif extension. For instance, a photo called "student" should be renamed "student.jpg" before loading onto the server, while a map should be called map.gif

Remember that the larger the image, the longer it will take for users to download your page. It's best to keep your image file sizes as small as practical to keep download times minimal.

You are welcome to use any of the logos, images, banners, etc. available in the images directory on UAF's web server.

Accessibility

There are some accessibility features built in to browsers that will allow people with special needs to access your website. The reminders of the requirements are as follows. For a full description of the requirements, see the Accessibility section of these notes.

QUICK TIPS TO MAKE ACCESSIBLE WEB SITES

For Complete Guidelines & Checklist: http://www.w3.org/WAI/

• Images & animations: Use the alt attribute to describe the function of each visual.
• Image maps: Use the client-side map and text for hotspots.
• Multimedia: Provide captioning and transcripts of audio, and descriptions of video.
• Hypertext links: Use text that makes sense when read out of context. For example, avoid "click here."
• Page organization: Use headings, lists, and consistent structure. Use CSS for layout and style where possible.
• Graphs & charts: Summarize or use the longdesc attribute.
• Scripts, applets, & plug-ins: Provide alternative content in case active features are inaccessible or unsupported.
• Frames: Use the noframes element and meaningful titles.
• Tables: Make line-by-line reading sensible. Summarize.
• Check your work: Validate. Use tools, checklist, and guidelines at http://www.w3.org/TR/WCAG