Fanzing's Web Design Tutorial

Part 1: Design Tools

Editors, Design Tools…and Working In Text!

This doesn't take too much explanation, but I want to cover a few specifics about Web editors.

First of all, you don't need to use any web design software at all if you don't want to. You heard me right! Long before the professional software came out, the bulk of everyday web sites were created using a text editor. If you don't know what I mean by a text editor…it's that "Notepad" that is included in Windows. (I'm sure Mac users have something similar.) It's the program that, when finished, saves files as ".txt" files, or text files.

All you have to do to create a web page in Notepad is open it up, put in the proper HTML codes, save the file and then change the file extension to ".html" (or ".htm") so that "myhomepage.txt" becomes "myhomepage.html". That's it! Nothing fancy.

Many authors contributing to Fanzing write entire novels in text. Text continues to be used for stories today because it can then be sent by e-mail to lists of other readers.

In other words, if Syl Francis (to use one of our most famous list-contributing authors) wanted to change her "Nightwing Joins Bludhaven Chippendales.txt" story into a web page, all she'd have to do is add some HTML tags at the beginning and end defining it as a web document, put separators between all of her paragraphs and put bold tags around the words she wants to appear in bold and then save it again. Then, she'd change the label on her file's title, so that it now reads "Nightwing Joins Bludhaven Chippendales.html". Just like that (snap fingers), her file is now a web document. Clicking on the document's icon would now open it in a browser and Syl could now see her story as a web page.

It's that simple! A bit time-consuming…but simple, really.

So why do you need any kind of web page editor, then?

The answer is: Repetitive Motion Disorder!

If "Nightwing Joins Bludhaven Chippendales.txt" has 200 paragraphs in it, you would quickly grow tired of putting a <p> tag at the beginning of every paragraph and a </p> tag at the end of every paragraph!

All a web design tool is is a time- and labor-saving device. It tries to ease your burden by making it easy to apply the proper coding tags to the words in your page. You don't have to use one…but why not, if they're available and easy to use?

Wizzy Wig? Isn't that an Oz character?

Some of you may be tempted to use a WYSIWYG tool that's already on your system, such as Netscape's Composer or Microsoft Front Page Express. (A WYSIWYG tool is a "What You See Is What You Get" tool. It means that you never see the HTML codes; you just point at stuff and it gets changed.) I caution against using these, for a couple reasons:

1. HTML is EASY. It's EASY PEASY, JAPANESEY! Don't resort to a WYSIWYG tool until you've made at least a faint effort to learn the actual codes for doing things. Because…
2. A WYSIWYG tool will turn you into a moron. I'm serious. They will handicap you and become such a crutch that it is often difficult to move away from them and learn coding later. I have seen grown men who are geniuses at other things (no names) throw fits because they hadn't learned HTML and their Netscape Composer did all the work for them. For such designers, even the simplest of HTML codes seemed bizarre and scary. If you wonder, "Well, why would you ever have to use HTML?", let me ask you this: How would you put Fanzing's banner coding on your page if you didn't know how? In other words, it's much harder to UN-learn the use of a WYSIWYG tool than it is to just learn the proper way of doing things. (Why do you think 6-year-olds can write C++ coding while Nobel Prize winners have trouble with their VCRs? It's the old adage about "teaching an old dog new tricks.")
3. Okay the above two reasons were merely preferences, but here's a fact: most WYSIWYG tools add all kinds of junk coding to a page, which makes it harder for an HTML coding person to work with.
4. IF you use a WYSIWYG editor, you will probably NOT be able to use the skeleton framework I'm going to give you later. This is because most of the design elements will be invisible. Using a WYSIWYG editor may even screw up the code (for all I know).
5. Finally, HTML is EASY. I know that was #1, but it bears repeating. You will learn the basics in the next ten minutes, and then you are going to feel embarrassed that you resisted. It's like finally getting up the nerve to jump in a raging river and discovering that it's only six inches deep! What's more, you'll look at the other people frightened of web design and you'll be on my side…trying to convince them to come on in.

If you insist on using a WYSIWYG tool, I hope you can at least learn the HTML code and proof-read your code. (I don't know…that sounds harder! If I was in your spot, I'd pick the easy way out and learn the simple HTML code)

ARACHNOPHILIA WEB PAGE EDITOR

Arachnophilia is available at http://www.arachnoid.com/arachnophilia/

Arachnophilia (It's Latin; it means "to love spiders". Get it? Spiders make WEBS!) is a web design tool that is free. It's not Shareware, where you're expected to pay for it later. It's Careware; it is offered free, so long as you try to make the world a better place. Neat concept, eh?

I used Arachnophilia until I graduated to an expensive but turbo-charged program called "Dreamweaver".

Arachnophilia is what I've used for a long time to transform Rich-Text Format documents (those are documents with the ".rtf" extension) into HTML. It's not perfect; if you have an alternative HTML editor program (such as HotDog), go ahead and use it.

I'll teach you more about it later, after you've learned some HTML coding (throwing that at you now may be too much!). You're welcome to read through the help documentation included. For the moment, let me introduce a few of the nice aspects of it:

1. If you open an RTF document in Arachnophilia, it will be (if you choose) opened in one window. It will then transform the document into an HTML version and put that into a second window. You may need to do some tinkering with the coding in order for it to be ready for publication (read our discussion on Paragraph tags for details), but it is an easy way to create an HTML document.
2. Arachnophilia has a built-in browser window, so that after you have done your coding, you can look at it and see the way it will appear in a browser. Sweet!

Other Options

I'm sure that a newcomer to HTML isn't ready to spend money on a program yet. However, when you are, two good versions are Allaire's HomeSite and Macromedia's Dreamweaver.

HomeSite is one of the best-rated programs for web page creation. At about $90, it's pricey but not out of the price range of the average person with an interest in a good web design tool.

Dreamweaver is highly recommended, as it's the one I use on Fanzing…but it costs a couple hundred dollars.

This tutorial is © 2000 Michael Hutchison
Fanzing is not associated with DC Comics.
All DC Comics characters, trademarks and images (where used) are ™ DC Comics, Inc.
DC characters are used here in fan art and fiction in accordance with their generous "fair use" policies.

Fanzing site version 7.1