Fanzing's Web Design Tutorial

Part 7: Fanzing's Skeleton Page

The Joy of Filling In Blanks!

This is the really easy part. Well, technically, none of this is that hard to do. But filling in the blanks on Fanzing's skeleton page is going to be simple.

Here's what I've done. I've constructed a web page which has marked regions which you can fill in. No, it doesn't look like anything like a Fanzing page if you look at it. What happens is that you fill out the page, e-mail it to me, I affix a template to your page using my Dreamweaver program…and your document is transformed into a finished web page, ready for the magazine.

How does it do that?

The template is the key. The template is a general layout for each page. I lay out the page with the logo, the navigation buttons, the graphics, etc…and then I set aside some blank spaces which will be filled in later. The blank spaces are "editable regions" which will be filled in or left blank depending on the contents of the intended document.

For instance, the title. There will be an editable region on the skeleton page that is called "title". Obviously, you put the title in that space. Then, when my template is applied to your document, it looks for the editable region called "title" and puts the contents of that region into the right place in the finished document.

Got the basic idea? It's not important that you know this so thoroughly that you could do it yourself; I just want you to understand the basic principle.

Here is Fanzing's Skeleton Page

To save it to your hard drive (or a disk), right-click on the link to bring up the little menu and select "Save Link As" if you're using Netscape or "Save Target As" in IE. If you're having problems doing that, then just click on the link to open the page and then choose "Save As" under "File".

Once you have the page saved on your hard drive, open it in Arachnophilia. Remember, you don't want to mess up your original copy, so click "File", then "Save As" and make a back-up file under another name.

Do you have a story or article ready to put into the skeleton page? If so, open it in Arachnophilia. (If not, follow along just for practice.) Then open the Fanzing skeleton page. Click "Save As" and give the document a new name similar to your story title.

Finally, it's time to copy/paste your story into the skeleton and fill in the blanks.

Let's Look At The Code!

If you open the file in Arachnophilia, here is what you'll see:

	<html> <head>
1	<!-- #BeginEditable "doctitle" --> <title>Fanzing (Issue #) - (Month/Year) - YOUR TITLE GOES HERE </title> <!-- #EndEditable -->
2	<!-- #BeginEditable "description" --> <meta name="description" content="YOUR DESCRIPTION HERE "> <!-- #EndEditable -->
3	<!-- #BeginEditable "keywords" --> <meta name="keywords" content="YOUR KEYWORDS HERE "> <!-- #EndEditable -->
4	<!-- #BeginEditable "css" --> <!-- #EndEditable -->
	</head> <body>
5	<!-- #BeginEditable "pageheading" --> <!-- #EndEditable -->
6	<!-- #BeginEditable "pretitle" --> <h3 class="pretitle">PRETITLE OR ERASE </h3> <!-- #EndEditable -->
7	<!-- #BeginEditable "title" --> <h1 class="title">TITLE OF DOCUMENT </h1> <!-- #EndEditable -->
8	<!-- #BeginEditable "subtitle" --> <h3 class="SubTitle">SUBTITLE OR ERASE </h3> <!-- #EndEditable -->
9	<!-- #BeginEditable "author" --> <h2 class="author">YOUR NAME HERE </h2> <!-- #EndEditable -->
10	<!-- #BeginEditable "intro" --> <p class="intro">INTRO IF ANY OR ERASE </p> <!-- #EndEditable -->
11	<!-- #BeginEditable "pagebody" --> THIS IS WHERE YOU PASTE YOUR STORY! <!-- #EndEditable -->
12	<!-- #BeginEditable "credits" --> All characters and scanned artwork are © DC Comics <br /> This story is © 2000 by YOUR NAME HERE <!-- #EndEditable -->
	</body> </html>

Most of this is self-explanatory, but let's go over all of them, top to bottom.

1	"doctitle" / YOUR TITLE GOES HERE Leave the rest of the magazine's title (issue/month/year) for me to alter. This is the part of the title that appears at the top of the browser and in search engines.
2	"description" / YOUR DESCRIPTION HERE This is the description (a few dozen words) that is listed under the search results in a search engine. Just a basic description is necessary.
3	"keywords" / YOUR KEYWORDS HERE List 25 key words which describe your story, separated by commas. The best things to include are principal characters (Nightwing, Wonder Woman, Vandal Savage), major events (gang war, rooftop fight), time setting (Zero Hour, World War II, Crisis, etc) and settings (Dinosaur Island, Blüdhaven, Tokyo, Krypton)
4	"css" / (unmarked) *Unless your name is Joel Rea, you can ignore this.* If you are Joel (or anyone else proficient at Cascading Style Sheets), then this is the area where you can enter your own CSS codes. Or, if you send me your own custom Style Sheet, I can make a link to it in this area.
5	"PageHeading" / (unmarked) In most cases, you don't need to fool around with this. This area is for the logo headers for such things as Hall of Justice or Comics Cabana. If you want to indicate which column your article is for, just write (for example) "Comics Cabana" and I'll insert the proper coding for the header later!
6	"PreTitle" / PRETITLE OR ERASE This is the text leading up to the Title, which is larger. If the Title is "Superman", the PreTitle might be "The Further Adventures Of". If you don't use this part, you need to erase the text and the header tags surrounding it. (The header tags take up space even if they're empty.)
7	"Title" / TITLE OF DOCUMENT The title is, obviously, the title of your story or article. Also, if you're using the PreTitle and SubTitle parts of the template, then the largest part of the title goes here.
8	"SubTitle" / SUBTITLE OR ERASE Like the PreTitle, this SubTitle is smaller than the Title…and if you don't use it, you need to delete the text and the header around it.
9	"Author" / YOUR NAME HERE Yeah, put your name here.
10	"Intro" / INTRO IF ANY OR ERASE You know how Dannell Lites, for instance, has a paragraph or three at the beginning talking about the story? This is where she'd put it. Please note that if you need to use more than one paragraph in your intro, each <p> tag needs to have the class="intro" included so that it says <p class="intro">. This is necessary so that the stylesheet can make the paragraph look different from the rest of the story.
11	"PageBody" / THIS IS WHERE YOU PASTE YOUR STORY! Once your story has been transformed into HTML in your separate document, you can paste it in here.
12	"Credits" / YOUR NAME HERE Put your name where it says to. And, if you need to add any more disclaimers here (for non-DC Characters, for instance), you can add to it.

Guess what?

YOU'RE DONE! THAT'S IT!

Just hit "Save as" and save your document.

Once you've finished looking over your web page, e-mail it to me and I'll double-check everything. Together, we'll work out any trouble spots.

is Editor-In-Chief of Fanzing.com. He is the world's biggest Elongated Man fan and runs the only EM fan site. He lives in Rochester, MN.
AIM: Fanzinger
ICQ: 70101007

Now that you've read this piece,
discuss it in the Fanzing Forum!

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's Web Design Tutorial

Part 7: Fanzing's Skeleton Page

The Joy of Filling In Blanks!

Let's Look At The Code!

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

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.