• Keep it simple to start. Get it done simply, then put in extras.
• KEEP BACKUPS! At least two people in your group should have copies of the work. People get sick, they have to leave for family emergencies, their computers crash and eat the floppy at the same time, etc..
• The project will likely consist of several pages. If a document is longer than 2 screen scrolls, you probably want to split it into two or more pages.
• You can use pages showcased at Student Biology Web as a model for this honors project. But--don't follow previous years' mistakes (ie, copyright infringements, misspellings, bad links).
• Decide the overall structure of your site:
  • relational - any page connects to any other page, or, most pages connect to most pages unless you have a good reason to do otherwise. A button bar across top or bottom works well. I strongly advise against using frames. They don't print well and you have to do more to make them ADA compliant.
  • linear - linking forward and backward to adjacent pages (not recommended for your entire site, but sometimes effective in a highly limited context; use with knowledge).
  • wheel - spokes from a default page? With return? Sometimes it is useful to have 'dead-ends'. Not very often, but sometimes. Use with care.
• Decide what form your links will take to connect the pages: Button bar at top? Bottom? Side? Consider ease of use and how the page will print, too.
• Decide content for the pages - general terms.
• Decide how to organize the files - are multiple folders needed? At least one folder for images?
• Decide how to organize the project re people working on it; who does what.
• Make your timeline and start filling things in. Basics first, then put the extras.
• Make sure you meet the ADA rules. (See below.)
• Request any permissions ASAP. You will need to replan if your permissions don't come through before early November.
• HAVE FUN !!!
  
  

Making a Web Site written by Elizabeth Willott gives a basic introduction written with your project in mind.

HTML4 by Elizabeth Castro are excellent book resources. Copies of HTML4 are available at the BLC and through Kaye Jay. The Bare Bones Guide to HTML is an excellence quick reference for the tags used in HTML.

The Web Style Manual put out by the Yale Center for Advanced Instructional Media is a thorough, academic approach to web page design. It is well organized and worth visiting if only to see a very well-designed web site.

Creating a Local Web Site gives basic advice on naming documents, organizing files, and opening local HTML documents in Netscape.

Preparing Images for the WWW outlines the 7 basic steps for preparing digitized images using Adobe Photoshop. Photoshop is available in the BLC. If you create a graphic from scratch in Photoshop, you'll only need to pay attention to steps 3-7.

The Mathematics of Web Design explains some of the basics about images, file formats, and color on the web.

• Lynda Weinman's Browser-safe colors is the best place to pick colors for your text and background because these colors will look good on all machines. The six-digit alphanumeric code for each color is what you put in your HTML.

• prepare your picture at 72 dpi, probably 8 bit color depth
• save as jpeg (if lots of colors like a photograph) or GIF (if few colors or simple, like tables)
• keep your image small or it will take too long to load - even a 400 pixel wide image will slow things down
• if you want people to be able to print your images and your page, then restrict the page (and figs) to no more than 500 pixels wide
• Make an image tag, by: <IMG SOURCE="xxxx.xxx">

• To make a URL to another file in this same folder, I merely have to write "<A HREF="xxxx.html">
  where the xxxx is the file name and .html is the extension.
• To move up a folder I would use "<A HREF="../xxxx.html">.
• to move down a folder I would use "<A HREF="yyy/xxxx.html">" where "yyy" is the folder name.

• apples
• oranges
• pears

• Don't use frames. (If you do, you must provide alternative pages which are not frames. And that's more than you need!)
• Only use cascading style sheets (CSS) if the page is able to work without it. CSS allows you to have dynamic control over all the design elements of your website by storing all the design properties of your website within separate files.
• Use Summary and Caption tags on tables. Here's how:
  Adding a Caption and Summary
  When making a table on your web page, use the CAPTION attribute for the <TABLE> tag, and give a summary of the table. This lets people using assistive technologies view your website.
  Here is an example of the coding at the top of the table, showing a Summary and a caption attribute.
  <TABLE BORDER="3" SUMMARY="THIS TABLE SHOWS THE NUMBER OF HOURS SPENT PERFORMING THE DAILY ACTICITIES SUCH AS SLEEPING, STUDYING AND PERFORMING EXTRA CURRICULAR ACTIVITIES." CELL SPACING="2" CELL PADDING="1">
  <CAPTION> Daily schedule of activities by high school students.</CAPTION>
  

  Daily schedule of activities by high school students.

  Name	Studying	Sleeping	Extracurricular activities
  John Doe	2hrs	8hrs	5hrs
  Peter Smith	7hrs	12hrs	3hrs

• Use an <ALT> tag for all images. This tag provides a text equivalent for every graphic that you insert. Here is an example:
  <IMG SRC="XXXX.XXX" ALT="A cotton boll">
  An image of an infamous cotton boll.
  
• Use "Skip Navigation" so a reader can jump past your navigation bars.
  Before a long list of links or navigational menus, add the code below.
  <a href="#Content">Skip Navigation</A>
  If someone chooses to activate this link, this code moves the pointer to the code you place after your links, which should be coded:
  <A NAME="Content">Navigation Skipped</A>
  An example of skip navigation was used at the top of this webpage.
  Skip Navigation
  University of Arizona Mainpage | UA Web Resources | Web Accessibility | 
  To make the skip navigation link invisible, create the link in the same color as the background page color.
  For example, the link color can be changed to white using the following code: <A HREF="#Content" STYLE="Color:White">Skip Navigation</A>
  The electronic reader will still read it but it will be invisible to normal viewers.

1. The scanner is connected to the BLC computer C1 (computer to the right of the scanner). This is because this computer has Adobe Photoshop. This computer also has Dreamweaver.
2. Open Adobe Photoshop, then under File choose Import, Epson Perfection 1200.
3. If the "Preview" window opens, click cancel and you'll get the right window.
4. Put your image onto the scanner and choose Preview. (At this point you can, if you wish, click the dashed box and then create a box around that part of the Preview that you wish to scan.)
5. Check that your image is aligned appropriately and then close the Preview window, or click on the Scan window to bring the Scan window to the front.
6. Press "Scan" and the image will be scanned and will ultimately appear in a new Photoshop window called "untitled-1" (or whatever number É)
7. Then save or manipulate the image as you normally would a Photoshop image.

Profs. Dixon & Willott 181H homepage The University of Arizona July 11, 2007 http://www.blc.arizona.edu/courses/181H/page.html All contents copyright ©1999-2007. Willott. All rights reserved.