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.
- To create space around your images, include vertical and horizontal tags like this:
< img src = "example.gif" hspace = 5 vspace = 5 >
- To indent your image or text, it is easiest to create a transparent spacer in Photoshop:
- Create a new image in Photoshop, 1 pixel high, and your desired width
- Save as a .gif, bring into a transparency program, and save as a GIF89a
- Write it into your script as an image source wherever you want to indent your image.
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:
- In Photoshop, create a new file with a white background, 20 pixels high by 640+ pixels wide
- 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
- Select the gradient tool. In the gradient tool options palette,
- Set "Style" to Foreground to Background
- Set "Midpoint" to 50%
- Set "Type" to Linear
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:
- The Electronic Text Center (Alderman Library) provides access to scanners with OCR and image manipulation software, as well as expertise in copyright concerns, SGML, and other software and scripting applications. E-Text is open 9-5 Monday through Saturday for all students.
- The Digital Image Center
In addition to its curriculum support services, the Center currently offers a variety of services to the public, including:
- Training in the use of slide and flatbed scanning equipment available in the center
- Assistance in locating and viewing Internet image resources
- Technical advice on image compression, optimization, image file formats, storage and transmission
- Collection and dissemination of information on image viewing software, image database applications, digital image copyright information, etc.
The equipment available in the Center includes a Macintosh Quadra 800 and a PowerMacintosh 8100 with CD-ROM drives which support PhotoCD, a Nikon LS-3510 Slide Scanner and a Nikon Coolscan for scanning 35mm slides and negatives, and a LaCie Silverscanner II flatbed scanner. Adobe Photoshop is available for color correction and image enhancement. Images can be saved in formats which can be read by software on other platforms. Users need to make appropriate arrangements for transferring their image files to floppies or to other computers around Grounds. The staff of the Image Center will assist in this process.
At present, equipment is available for public use by appointment only, Monday-Friday, 9-5. The Center is located on the second floor of the Fiske Kimball Fine Arts Library.
The Digital Media and Music Center in Clemons Library is small but packed with resources: video digitizing equipment and software, slide and flatbed scanners, sound editing station (including DAT), a MIDI station, and CD-Rom burning hardware and software. The Center is open to students Monday through Friday 12-5 and by appointment.
Excellent links
These links are incredibly useful in the creation of web graphics and pages.
- Josh John's HTML Workshop is a great resource. He's done AS@UVA proud.
- The E-Text Center's Advanced HTML helpsheet is quite useful in the creation of web pages as well.
- Linda Wineman's Designing Web Graphics site is a great introduction to designing for the web.
- The Internet Font Archive is a great place to find free- and shareware fonts that you can't find anywhere else. Previews and automatic FTP are provided.
- Adobe is the company that produces Photoshop, and their site provides quite a bit of customer support--from upgrades to quick tips to FAQs.
- The Yale Style Manual is a great resource for the latest on web standards.
- Yahoo has a great clearinghouse for web designers.
Compiled by
Julie K. Rose and
Michael R.H. Owens