Tricks, Tips, and Helpful Resources

You still have questions? You'll be able to get plenty of help from these fun tips, great resources, and excellent links!

Fun tips

Everyone organizes their HTML differently, and like users of Photoshop, everyone has their own tricks and tips when they create web documents. Here are some of the latest and greatest (as of the summer of 1996) techniques and shortcuts for the web:

Animated GIFs (GIF89a) are a fun way to include small animations on your page without having to learn Java. The advantage is that they are easy to create, and are very small file-wise; the disadvantage is Netscape 2.0 will loop them continuously, precluding visitors from turning it off.

Client-side image maps are a great way to create a seamless image, without having to do cgi scripting; they tend to be faster as well. The drawback to this technique is that, as usual, it is limited to the Netscape browser. For an example of the HTML code of a client-side image map, check the source code for this project. The coordinates for the map can be found using any number of mapping programs, including MapEdit, or using the Paths and Information palettes in Photoshop.

Turning off image borders is a sneaky way of creating a seamless look without using maps at all. In your HTML code, it's as easy as

< img src = "example.gif" border = "0">

Take a look at this page for a great use of borderless images. Of course, this is limited to Netscape browsers.

Creating space for your text and images can be a challenge. There are a few ways of doing this that will keep you from tearing your hair out.

Vertical color bar backgrounds are everywhere on the web, and they are a great way to help break your page into the "comfortable thirds." Here's an easy way to make one:

  1. In Photoshop, create a new file with a white background, 20 pixels high by 640+ pixels wide
  2. Choose the colors you want for your page; the foreground color will be the bar, and the background color serve as the rest of the page
  3. Select the gradient tool. In the gradient tool options palette,
  • Stretch the gradient tool horizontally from the edge of the image towards the center, approximately 1.25+ inches (don't forget to hold the shift key down when you do this, to maintain a straight line)
  • Choose the rectangle marquee tool and, beginning from the upper left corner, select the top half of the image. From the "Edit" menu, select "Crop"
  • Convert the image to an indexed, 8-bit, adaptive, diffused format, and save as a .gif
  • To include your background in the code:

    < body background = "bar.gif">

    Great resources

    The University of Virginia is making a concerted effort to be a wired university. There are a number of resources that you should avail yourself of, both online and in person:

    Excellent links

    These links are incredibly useful in the creation of web graphics and pages.