The incomplete guide to web site production and design

Written and compiled by Terry Towery

HTML
Photoshop
Design
Examples
Multimedia
search engines
Java and Javascript
CGI Perl and other server side stuff


The following links are provided as a starting point for students who wish to learn the fundamentals of web site design and production. As I don't believe in reinventing the wheel, I have searched around the web for a selection of some of the more informative and well made sites for web production. There are literally thousands of pages dedicated to web site production. Since the web is constantly evolving at a rapid rate, it would be impossible to provide a complete guide to web site design without devoting a crew of people around the clock to updating this site. Therefore this site will evolve and grow as I have time to update it.

Probably the most important tool for learning how to produce web sites is the web itself. You can view the source code of any web page simply by telling Netscape or Explorer to view source. view sourceThe code or html (hyper text markup language) will be shown to you in a text editor. Have a look at this page now. It has been commented out so that you can better understand the beginning of a web page.

HTML

Hypertext markup language is the basic language of web design. Browsers such as Netscape Navigator and Internet Explorer interpret the html tags to produce pages in your computer. All web pages are text at the core and are written in html. The browser uses tags to describe the contents of the page.

My favorite html editor is BBedit by bare bones software. There is a free version available although the full version is very inexpensive and adds a lot of extremely useful functions such as color coding your tags. Of course, it is only available for the macintosh so you will have to use some other text editor on those other machines.

HTML links:
Hotwired's webmonkey has a very good guide for beginners to html and web page design. The cheat sheet of tags which is well worth printing and keeping with you is also located there.

Library of Congress - HTML
The LOC has a good index of HTML resources - specs and standards, tutorials, style guides, authoring tools, and advanced features.

NCSA - A Beginner's Guide to HTML
This is the National Center for Supercomputing Applications' extremely popular guide to HTML. The NCSA is where the first Web browser (Mosaic) was developed by now Netscape exec Marc Andreessen.
Search the NCSA page for HTML info.



Hotwired has a web 101 site that often changes but is always of interest to newbies.

CNET has a variety of links concentrated into one place and is a great starting place for many things including web design the CNET basics site and CNET's how to html tips for more advanced readers are excellent references. Finally the CNET content builder site has all the scoop and the gossip you need to speak knowledgeably and cleverly at cocktail parties.

Netscape provides an excellent concentration of links on constructing web sits here.

Tables are the best way to take control over the placement of objects on your web page. Unfortunately, the basic html tags do not allow for much design as they were originally created for scientists to share information and not for design. One of the best discussions of using tables for web design I have seen.

Tables allow for complicated things like horizontal and vertical alignment of images or text. Even when that pesky user resizes the window in Netscape you are sure that your information will still be horizontally aligned. Even if the end viewer has a 4 inch screen on their palmtop computer you are assured that the info is horizontally spaced.

This is data in a table

this is more data

this is more data

this is more data


You can put images in tables instead of text.

After you master tables you may want to step up to frames. Many people do not like frames and not all older browsers support frames. Although there are advantages to the consistency of a frames based interface, it my personal opinion that tables are more reliable and efficient.
Netscape also has a frames reference.

Tom Boutelle maintains the WWW FAQ (frequently asked questions) site that, although it is aging now, has a lot of great information for beginners with links to everywhere you need to get answers to your questions.

Finally the official html page maintained by the world wide web consortium is located here. It has all the most recent tags that have been ratified by the org and all the other info on how standards are arrived at, what the most recent version of html is etc...

Photoshop

is the tool of choice for producing most of the graphics on a web site.

The web supports gif and JPEG files for images. Generally speaking, gifs work best for graphic images with few colors and jpeg is better for photographic imagery with lots of colors.

Gif stands for Graphic Interchange Format and uses a compression scheme known as LZW. LZW is a lossless algorithm meaning that there is no loss of quality when the file is decompressed. LZW is owned by Unisys and there is some question as to whether it will continue to be given away free to end users. Right now, Adobe pays royalties for use of LZW so we do not need to. The distinct advantage of a lossless algorithm is that there is no image degradation at all. However it only compresses files that have areas of flat color without any variations in color or tone. The biggest disadvantage to using gif files is that the format only supports 256 colors. Any image with more than 256 colors will be dithered down to 256. Since most graphic images like buttons and navigation bars have only a few colors in them, we can use gif for these elements. Two advantages that gif has are support for transparency and animation. Transparency allows for non rectangular graphics and animation (see multimedia on the web) allows for multiple images to be embedded into a single image file and played in succession.

JPEG stands for Joint Photographic Expert Group and, as the name implies, is suited especially for photographic images where there are lots of color and tonal variations in the image. The compression algorithm is a lossy one meaning that there is some loss of image quality when the image is decompressed. We get to choose exactly how much image quality loss there is by a sliding scale. Essentially the more compression you get the worse the image quality is. JPEG is a very efficient algorithm and the highest compression settings often yield acceptable quality. Try different settings with your image and be sure to close and reopen the image before settling on a particular amount of compression.

For a visual comparison of different gif vs. jpeg file formats, compression, bit depth and file size have a look at Lynda's analyses. She has a great book about color on the web called coloring web graphics and her web site provides a free CLUT (color look up table) of browser safe colors for photoshop and other applications.

Adobe and the browser companies have agreed to a new image format called PNG. PNG stands for Portable Network Graphics and is not supported by early browsers. It is defined as "an extensible file format for the lossless, portable, well-compressed storage of raster images. PNG provides a patent-free replacement for GIF and can also replace many common uses of TIFF. Indexed-color, grayscale, and truecolor images are supported, plus an optional alpha channel. Sample depths range from 1 to 16 bits". It may become a standard that replaces gif or jpeg but it is still too early to use this format.

One of the biggest frustrations in designing for the screen is the differences in the end users monitors. Most of these difference can be attributed to something called gamma. Basically gamma translates to contrast and simply put things look darker on a pc than they do on a mac or sgi. To understand gamma more fully read Robert Berger's article "Why do Images Appear Darker on some Displays". Of course the age of the phosphors of the screen, changing the brightness and contrast on a monitor also change the way images appear so it isn't as simple as gamma (which isn't really that simple anyway).

There is something that people are calling browser safe colors that there are a variety of discussions on the web about. It is basically described as a cube.
color cube reference 1 Killer sites' excellent discussion of the color cube.
color cube reference 2. An interactive journey through the color cube.
color cube reference 3. A thorough guide to understanding color in Netscape.

Learning how to optimize your graphics for the web is as much an art as it is a science. It is imperative that your graphics load quickly. My way of telling if a page is too slow is to see if I can hold my breath for the time it takes a page to load. If it takes longer than I can hold my breath it is too slow.

Images can also be something called image maps. My favorite tool for creating image maps is imagemapper. Basically imagemaps allow you to assign different URLs to different regions of an image. This allows you to create clickable navigation bars and splash screens. There are a variety of imagemap types (is nothing ever easy?). The three types are NCSA, CERN and client side. NCSA and CERN are what are called server side maps requiring the browser to send a query to the server before anything happens in your browser. Client side maps are embedded into your html code and do not require a query to be sent to the server. Generally client side maps are the way to go. However, not all early browsers support client side maps.

Search for info on imagemaps at the Mapedit page using HotBot:



Photoshop links:
Hands on training by Docozone is a great example of web design (fully utilizing javascript) and is full of some of the best photoshop tips I have seen.

An excellent photoshop tutorial that attempts to be the definitive photoshop guide online.

The photoshop compendium has a good collection of tips.

Kai Krause's aging but informative CHOPS (channel operations).
Freeware Photoshop plugins page

Design

Perhaps the hardest thing to do well is design. There are no hard and fast rules as to what makes good design but there are some helpful guidelines available. CNet has a good article on the Elements of Web design. These should to be taken as starting guidelines and are not rules.

There are a variety of considerations for designing web sites that are different from traditional design. One of the biggest frustrations to web designers is the inability to predict the users hardware configuration. Do they have a 21 inch monitor showing millions of colors or a 14 inch monitor with only grays? It is a good idea to design for 14" monitors as most people have at least a 14" screen. If they have a larger monitor it will usually not cut off any graphics designed for a smaller screen whereas those sites designed for 21" screens get severely chopped up by that 14" monitor. Color is another difficult issue as many designers have the ability to display millions of colors on their monitor yet most business and many casual home users do not have this luxury. The tips in the Photoshop Docozone site and the Killersites tips discuss making graphics fit the 216 safe web colors.

Design links:

Killer sites is a great resource for intermediate to advanced design tips. I also highly recommend the book that is soon to be in its second release.

There is a design guide to html in japan that has some great grammatical errors. it calls itself "Visually Online Reference for Standard and Enhanced HTML. It does have some great discussion on style sheet.

Examples of interesting sites


word

Suck

slate

Hotwired is an excellently designed site that generally grows with the latest technology.
Please send me those example sites so that I can include 'em here...

Multimedia on the web links:


The easiest way to jazz up your site is with gif animations. All image capable browsers support gif animations so no plugins are necessary. My favorite tool for creating gif animations is gifbuilder. Adobe has a tutorial on using layers in photoshop to produce animated gifs as well.

Plugins extend the capability of Netscape or explorer. They are usually very interesting and allow for some great things otherwise not possible however they also are a limited audience. You cannot assume that everyone will have the plugin or bother to get it and install it. There are some plugins that ship with the browsers that you can assume everyone has. Quicktime is now standard in both Explorer and Netscape. Other powerful plugins include Shockwave, VRML browsers and realaudio. There are hundreds of plugins available.

You may hear a lot about video on the internet yet we really aren't near to that point yet. Although we have an incredibly fast connection to the net here at Lehman, not everyone does. If you absolutely must put video on your site there are some good tips available at the metatools university site.

Progressive networks' Realvideo was recently featured in Wired as the most likely video plug-in for the net. The installed user base of RealAudio is the largest of any audio plug-in so it is fairly likely that they can use their mindshare to become the internet standard video plug-in. Progressive networks hired Spike Lee to make three short films to introduce and promote their product that are only available online. One of my favorite uses of the web is to listen to National Public radio on demand using their realaudio plugin.

Plugins:
Shockwave
How to:
Making QTVR object movies

Apple's Quicktime how to
For a description of Midi on the macintosh see the previous link.
Real audio is a good way to put powerful audio on your site.

Search engines


are a way of finding things on the web. There is an overabundance of websites these days and the only way to actually locate what you are looking for is to know some elementary things about utilizing search engines.
There are basically two kinds of search engines; ...

search.com has a link to all of the major, and most of the smaller more specialized, search engines.
My own favorite is yahoo or here
options

Java and Javascript


Java is a language developed by Sun computer systems to run on any platform (not just computers either). It has been adapted to the web and holds great promise for being a truly platform independent authoring and scripting language. It uses a different paradigm than most programming languages in that it compiles the code on the individual computer as the program is run using something called a JIT (just in time compiler). This means that you code the same thing for Macs as you do SGIs and Windows PCs. Code once use anywhere is the promise of Java. Unfortunately, since it wasn't invented at Microsoft, they have gotten their hands on it and are trying to change the APIs to suit their own needs making it different for PCs than other machines. This defeats the purpose of Java and is cause for great concern among the digital cognoscenti.

Javascript is a subset of Java specially suited for Netscape and other browsers. Netscape has implemented a simplified form of javascript that is much easier to use than full on Java. There are a variety of graphical Java programming tools for animation available as well.

There are some great resources for prewritten Java applets, as they are called, available online and there is often no need to rewrite common code as some hacker has already written all the clocks, counters, new window popups, link text overlays, and scrolling text we could ever need.

Other Java links:
The Java Boutique has is a great resource of prewritten Java applets.
Just Java Design has a great selection of very slick applets.
Gamelan has a searchable Java index

Please send any and all suggestions on this site to me.



This site best viewed on a computer with a monitor. Seriously, it is actually best viewed with a color monitor.
flaming animation