Lots of Hard Work

After we obtain the go-ahead for a site, the real work begins. Every site is different, but each one usually includes similar objects or employs similar tools during the creation process. Sometimes we strive to complete entire subjects at a time; other times we aim to complete graphics first and then polish off the markup. We've also started with blank pages and created the navigation first and dropped the content in last.

Ultimately, how you get things done or the order you accomplish them doesn't matter (other than handling your short list of dependency relationships — even Superman can't subvert that order). To help you understand what we do, we list each significant activity and the tools we use in its pursuit in the sections that follow. Please note that these sections occur in no meaningful order, and we often perform each of these activities more than once in the course of completing a site.

Graphics

The graphics we use on our Web sites range from navigational controls to content-specific images. Many different graphics tools exist that help authors realize different graphical goals. We use one of two graphical utilities in some way for every graphic in our Web sites — namely Adobe Photoshop and Paint Shop Pro.

We use Adobe Photoshop to create, manipulate, and edit large, high-resolution images. Photoshop offers many wonderful editing features and graphical capabilities. Some of its most notable abilities include reliable color management and a flexible selection feature (which is the ability to define specific areas of a graphic to edit while leaving others untouched. This is useful for cut and paste, fills, bleeds, and much more). Photoshop is also our graphics editor of choice when converting images to GIF format.

We use Paint Shop Pro (PSP) to handle low-end graphics. This includes working with GIFs after we've processed them through Photoshop, or those we create directly in PSP. PSP is great for direct editing of a 256-color palette. It can zoom in on images for pixel-by-pixel view and edit maneuvers. We also use PSP instead of Photoshop for GIFs because PSP doesn't take up as much memory or system resources and works faster when manipulating small or low-color images.

Using Photoshop and Paint Shop Pro on graphics doesn't always give us everything we need for our Web sites. Here are some other specialized tools that we use less frequently when working with more sophisticated graphical objects:

Animated GIFs

Animated GIFs are cool because they supply an easy method to add graphical action to a Web site. We use the GIF Construction Set (GCS) tool from Alchemy Mindworks. You can download the shareware version from:

http://www.mindworkshop.com/alchemy/alchemy.html

GCS is easy to use, but you must create the graphics first. In case you don't know, an animated GIF is just a series of images displayed one at a time in a timed sequence to create the illusion of movement (or a change in a displayed image). An animated GIF can be constructed with anywhere from two to 2,000 images. The more images you use, the more animation that's possible, but the larger the resulting file becomes.

We use Paint Shop Pro to create the images for animated GIFs. We create the first image, then save it to a named and numbered file, such as "angif01.gif". We then make a slight change to the graphic, save it again with a new name where the sequence number is incremented, such as "anigif02.gif". We repeat this until our sequence is complete. Most of our animation consist of ten images or less.

Using GCS, we add each image in sequence to the animation and define its display properties. After the sequence is complete, we save it and load it in a browser to see how it works. Usually we must tweak things for a while to make the animated GIF do what we want.

For more information on creating animated GIFs and related utilities, check out the GIF Animation information at

http://www.reiworld.com/royalef/gifanim.htm

Image maps

When it comes to image maps, we think only one utility is worth the time (if you're a Windows user, that is) — Live Image! The predecessor to Map This!, Live Image! is an amazing tool for creating map files and HTML markup for client-side image maps. Since we've discovered this tool, we no longer create image maps by hand. All we do now is create the graphic, convert it to GIF, and then load it into Live Image! From there we simply point and click to define active regions and indicate their destinations. That's all there is to it!

You can get more details and download shareware versions from:

http://galadriel.ecaetc.ohio-state.edu/tc/mt/

http://www.mediatec.com/

HTML

HTML authoring is where most of your Web creation efforts will be spent. If you're new to HTML, you may prefer using an HTML editor until you become more experienced with the markup. It didn't take us long to run screaming from most HTML editors because we wanted more control over our markup. That's why we always use a plain old text editor. Our preference is a tool called Programmers File Editor 32 (PFE). This utility has lots of the features you'd find in a full-blown word processor, but without the extra overhead and no mucking about with file types. This baby handles text-only formats and nothing else, but it includes lots of extensibility and macro-definition capabilities.

To learn more about PFE (or to download this freeware product), visit:

http://www.lancs.ac.uk/people/cpaap/pfe/

We usually create a template file that we re-use for each of the pages within a given site or subsection. This makes creating navigation and footer information simple. Plus, it ensures that layout and construction of each page is nearly identical to other pages.

Oops!

When we discover that we need to make changes to the same line in every document, especially when such changes are the same for all or many documents, we use a “search and replace” utility, called Search/Replace. This tool, from Floersch Enterprises, is easy and fast to use. Simply point it at those files you want handled and provide a search-and-replace string and then bingo — it's done!

Here's the best place to obtain information about Search/Replace, and :

http://www.tyrell.net/~floersch/

Browsers

No matter how good you are at creating HTML, you must check your work. We check our work both online and offline. During the offline phase (that's the time before you FTP your files up to your Web server), we use three different browsers to test our work: Netscape Navigator, Microsoft Internet Explorer, and NCSA Mosaic. We use the newest full releases and any beta or preview releases of these browsers. Plus, we always look at our sites in progress with every browser we can lay our hands on. We want to present our content equally to everyone, so we make sure most browsers can handle our sites.

References

Even though we don't use an HTML editor, that doesn't mean that we code HTML straight from our forebrains. We often use online and offline references to look up attributes and values for tags. The offline resources we use include this book, and another handy guide:

The HipPocket Guide to HTML 3.2, by Ed Tittel and James Michael Stewart, Programmmers' Press/IDG Books Worldwide. 1997. ISBN 0-7645-8017-5

As for online resources, here are a few indispensable items:

http://www.w3.org/

http://www.htmlhelp.com/reference/wilbur/

http://developer.netscape.com/library/documentation/

htmlguid/index.htm

http://www.microsoft.com/workshop/author/default.asp


Previous Section | Next Section | Webmaster's Toolbox | TOC


E-Mail: HTML for Dummies at html4dum@lanw.com

URL: http://www.lanw.com/html4dum/h4d3e/extras/ch23sec5.htm
Text - Copyright © 1995, 1996, 1997 Ed Tittel & Stephen N. James
For Dummies, the Dummies Man logo and Dummies Press are trademarks or registered trademarks of Wiley Publishing, Inc. Used with Permission.
Web Layout - Copyright © 1997, LANWrights
Revised -- May, 2002 [MCB]