I'm a rabid proponent of text-editor web-design. There's just something elegant and beautiful and even somewhat magical about the ability to open up a text editor, type some characters in, and build a design from scratch. WYSIWYG has it's place, I suppose, but it's just not for me... and so I've decided to attempt to convince you, my theoretical WYSIWYG-bound audience, that coding a page from scratch is not nearly as hard as you think it is.

So, come along, I'll walk you through the process of making a very basic design. All you need to do this tutorial is notepad. When you want to make your own version of the graphics, you'll need a graphic editing program (Photoshop is of course recommended but any will do) but that's not necessary at this stage if you just want to follow along with the HTML instructions provided below.

Step 1: Creating the graphics

If you're using mine the first time through, you can skip this part for now, and come back when you want to make your own version. Just download these two files: left.jpg and right.jpg.

Now Lilah's been a lot of fun this season, and I've haven't really done much of anything with her in terms of fanart, so this design is going to be all about her. So I gather my caps, and now I'm off to Photoshop to sketch the basic design out...

First, create a new document that's 717 pixels wide and 478 pixels wide. Make sure your rulers are showing (control-R) then position your mouse somewhere over the left ruler, and click and drag right to get a guide-line. Drag it over to the 338 pixel mark, using the "move" tool and the "zoom" tool if necessary to get it just so. The reason I've selected this particular width and height is that those are the maximum dimensions that I know will be completely visible in a 800 x 600 display, allowing room for scroll bars, tool bars, etc. About 50% of my visitors are still using 800x600, so it's usually a good idea to keep them in mind, even though I personally surf at higher resolutions... The 338 is pretty arbitrary, and for your own version, you can slide it a bit to the left or right. Just be sure that in the code that follows, wherever I talk about 338, you substitute whatever pixel value you ended up using. And 717 minus [whatever pixel value you used] where I have "379" in my demo code.

If you're having trouble getting the ruler in the right place, try building your design on top of this placement guide instead of a blank document.

Now, create your master work, with the decorative elements on the left and something abstract enough to read text over on the right. And place your site title at the top of the right column. Here's what mine looks like:

When you're happy with the way it looks, use the square marquee tool to select the left column. Shift-Control-C to place a merged copy in clipboard, control N to start a new document, Control-V to paste. Save as "left.jpg". It should have dimensions 338 wide and 478 pixels tall. Now select the right column, and repeat the process, this time saving as right.jpg (379x478). Try saving at a quality somewhere between 3-5 (medium). You want the lowest quality you can get and not notice too much pixellation. The screen caps I used in this example were darker than dark to begin with, so my quality's not great at full size...

The ones in my example look like:


Step 2: Creating the template

[2.a - getting started]

Open notepad and type the following:

<html>
<head>
	<title>Buffy Demo Site</title>
</head>	
<body>

hello world!

</body>
</html>

Save this as template.html, in the same directory as you have left.jpg and right.jpg. Then open your browser and open this file from your harddrive. It should be just a blank page that says "hello world". You'll notice also that it says "Buffy Demo Site" up at the top of the browser window.

Now we'll begin to customize this basic file. Start by editing the part that says "Buffy Demo Site" and put in whatever you want. Save the file, switch over to your browser, press refresh, and you'll see that the title of the window has changed to reflect whatever you typed in. You'll have to repeat this process (save, switch (alt-tab) over to browser, refresh) each time you make a change to your code to see what effect it has on your rendered HTML.

[2.b - setting the table up]

Next, let's add those 2 graphics to the mix. Place the following code in between the body tags (<BODY>page code goes here</body>) to replace that "hello world!" placeholder text.

<CENTER>
<TABLE width=717 height=478 border=0 cellspacing=0 cellpadding=0>
<TR>
<TD width=338><IMG src="left.jpg" border=0 vspace=0 hspace=0></td>
<TD width=379 valign=bottom align=right 
       background="right.jpg" style="background-repeat:no-repeat;">
</td>
</tr>
</table>
</center>

The instructions this code provides to the browser, translated to English, are as follows: Start centering (<CENTER>). Start a table (<TABLE>) with width 717 pixels and height 478 pixels with no border and no space between cells and no padding around the inside of cells. Start a new row (<TR>). Start a new cell (<TD>) within the first row, width 338. Embed an image in this cell (<IMG>); the image name is left.jpg, and it should be displayed with no border, and no vertical or horizontal space. Now end the cell (</TD>). Open a new cell (<TD>), of width 379 pixels. This cell should have a background image of right.jpg. The background image should not tile. Content in this cell should be aligned to the bottom and to the right of the cell. End this cell (</TD>). End this row (</TR>). End this table. (</TABLE>) Stop centering. (</CENTER>)

See, not really that intense, right? Once you get the basic concept of what a tag looks like (words within the < and > signs) and how to set attributes (ie, width, height, border, etc) learning new commands is easy. You just look them up in a guide like: WebMonkey's HTML Cheatsheet. But I digress...

[2.c - setting the stylesheet up]

Okay, now time to add some style sheet fun. Add the following code to your template's head (between the <HEAD></HEAD> tags, after the <TITLE></TITLE> tags)

	<STYLE type="text/css">
    		div.text {
                      overflow:auto; 
                      height:370px; 
                      width:365px;
                      color:ffffff;
                      text-align:left; 
                      margin-right:2px; 
                      margin-top:2px; 
                      margin-bottom:2px;
                      font-family: verdana; 
                      font-size:10pt;
                      scrollbar-face-color:#666699;
                      scrollbar-highlight-color:#666699;
                      scrollbar-3dlight-color:#666699;
                      scrollbar-darkshadow-color:#000000;
                      scrollbar-shadow-color:#000000;
                      scrollbar-arrow-color:#000033;
                      scrollbar-track-color:#000000;
                      }
	</STYLE>

This defines what we want our text to look like. Eventually, you'll want to go back and fiddle with the colors, perhaps the font, font-size, margins, etc. For help with that, see Webmonkey's Stylesheet Properties. But for now, just use my defaults and get on with the next part:

Now you need a div area for your text, one with class set to "text" so that all those style sheet properties you've just defined will be invoked. To do this, go to the cell whose background is "right.jpg". And add a div tag and some text to it (between the <TD> & </TD>). It should look like:

<DIV class=text>
Some fake content to fill up the page. Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Some fake content to fill up the page. Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Some fake content to fill up the page. Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Some fake content to fill up the page. Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Some fake content to fill up the page. Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
Content goes here Content goes here Content goes here 
</DIV>

Save and reload, and things should be starting to look up. If the text is covering up part of your title, or if the left and right sides aren't aligning right, then reduce the height of the div tag in the style sheet until it doesn't (ie, where it says "height:370px;" try some lower numbers instead of 370). Note that if you don't put enough fake content in, you won't actually see any scroll-bars at all. That's because the scroll bars are only added if there's more text than can be displayed in the height you've specified. In order to get the colors of the scroll bar right, you'll want to be able to see them, which is why I've put so much fake content text within the div tags in this example.

[2.d - tweak the body tag]

Now let's turn our attention to the body tag. Modify it so that it looks like this:

<body bgcolor=000033 text=ffffff link=ccccff vlink=ccccff alink=ccccff>

BGCOLOR is the numeric value for the background color you'd like. Text color (text) gets overridden by the style sheet, but you can set it anyway. Link color (link), Visited Link color (vlink) and Active Link color (alink) should also be set. Webmonkey's Color Codes will help you find the right code for the color you want to use.

[2.e - add the navigational links]

Okay, coming down the home-stretch. The final thing to do to finish up the template is to add navigational links. I like to put these in the right.jpg cell, just above the div tag, but you could also put them before the table, or within the div tag, or even in the left cell if you switch that so that the left.jpg is a cell background image like the right one is, instead of an embedded image.

A link looks like this: <A HREF="nameofpage.html">Link Label</A>. So think about what pages you want to have, give them short, logical names, and built a list of links, separated by colons, vertical bars, stars, whatever you want. Here's a sample list:

<A HREF="index.html">HOME</A> | 
<A HREF="about.html">ABOUT ME</A> | 
<A HREF="content.html">SOME CONTENT</A>

If you put this within the right column cell, but above the div tag, as I recommend, you may have to reduce the height of the div tag within the style sheet to make room for your links, depending on how many links you have, and how tall your title is. If you want your links centered, surround them with <CENTER> </CENTER> tags.

Here's what my template ended up looking like. Load that page and "view -> source" to see all the code put together in the proper order.

Step 3: Create Content pages from your template

Once you've got your master template just so, make a copy for each of the links you want to have (so, in this example, save a copy as index.html, a copy as about.html and a copy as content.html). Then go back in and edit the information between the DIV tags to add actual content. Again, see WebMonkey's HTML Cheatsheet for the commands to make certain text bold, insert paragraph breaks, insert images, etc.

Use FTP to upload everything to your web-account, and you're ready to go!

Final Words

So if you've made it through this tutorial, you should be able to create new designs with the same basic layout as this sample design whenever you want without too much trouble. In fact, if all you want to do is use a different collage as a background every once in a while, you won't have to edit the code on your site at all, just replace left.jpg and right.jpg with new files.

Once you've mastered this design, a little trial and error should allow you to branch out and make different designs. For example, you can have the content on the left, and the decorative cell on the right. Or you reconfigure the table into a vertical design, with one column and two rows, the top one with decorative element and the bottom with content, or vice-versa. You can put words to serve as links on your decorative part, and make that image into an image map to link it to your other pages. You can eliminate the overflow:auto on the div tag and modify the design to deal with no longer having the text scrolling within a little box. Sky's the limit, so have fun, and send me your URLs! ;-)

Everytime you see something cool that you don't know how to do on someone's web site, try viewing the source. Poke around in the code, you may just be able to figure out how they did it. And remember, the best way to learn anything is to experiment and practice, so visit one of the tutorial/cheat-sheet sites listed below and try stuff out on your own. You'll get the hang of it!

Resources

Edit Pad Classic

Hopped-up uber-notepad. Free (well, reminder-wear) and much more user-friendly than plain jane notepad.

WS_FTP

Basic, solid free FTP program (use it to transfer your files from your computer to where your web site is hosted.)

cofeecup

Another free FTP program, not so solid, but this one supports resume, which is really cool if you're trying to download/upload large video files. Not that anybody I know does that, of course!

Webmonkey

The place to go to learn HTML. Reference guides, articles, etc. The link above is a cheat-sheet listing differnt HTML commands you might want to use. Go here for articles/tutorials.

HTML Goodies

Another site with HTML articles/tutorials.

Image Editing Programs

A random assortment of demos, shareware, etc to try. Paint Shop Pro and Ulead PhotoImpact are popular Photoshop alternatives. I've heard good things about the cheap ($100 vs $600 for PS) version of Photoshop, Photoshop Elements too.

Tripod (Free Hosting)

If you've never built a site before, and don't have access to a little web space through school or with your ISP, try getting your feet wet with Tripod. Yeah, the advertisement's annoying, and you don't get much space, but it's free and pretty easy to use. If it turns out you really like this whole web-site thing, after a while you can switch to paid hosting with a different service later...

Powweb (cheap hosting)

My host... get 500 MBS of space, 30 G monthly transfer, lots of e-mail, PHP/MySQL etc for $7.77/mo. Add domain registration costs, that's still around $9/mo. And if you sign up through this link, I get a credit to my account, so if you feel like supporting this site, please consider powweb ;-)


More of my Photoshop Tutorials   |     view my art (home page)