The Pep Talk

Website Design: the one true endeavor where being obsessive-compulsive/anal-retentive is a positive attribute.
Designing and building your first website is a learning experience, to say the least ...so is your second, and your fifth, and your... It can be anything you want, depending on your resources, how much time you put into it, and your imagination. Remember, this is a FUN thing...creative, you know, your gift to virtual reality.
But don't let it scare you from doing it, it's not that hard, really. Especially with all these new build-it-yourself online sites at the community sites like Homestead, etc., where you don't even have to know html - you just drag and drop. You won't learn much of what goes on behind the scenes with these places, but at least you can get a design in mind. There are 'virtual shops' available, sort of glorified banner ads, really, where you could possibly make a small return (if you had a few hundred clicks on it, that is). I personally don't have any banner ads for a couple of reasons: 1) It's MY site, why do I want my visitors to go somewhere else? and 2) If the site isn't making enough money to support itself, I'd better think about something else.
As you go to other websites, note what you liked and what you didn't like about those sites, and incorporate the things you've learned into your site as you build.
I've haphazardly listed a few tips I've learned along the way here, and don't be surprised if some of them are totally outdated. Someday I might get around to pruning.
One of the quickest ways to learn how something is designed, or how tables and layers work, is to Right Click on a page and view its source. If it's something I think I could adapt, or learn from, I save the page. I then change everything about it, and make my own stuff. I learned about frames this way...the easy way. Many things can be modified for your own use, except things like cgi scripts, which tend to reside on the server, and each is server specific. Just check with your ISP if you have any questions on what works and what doesn't. If you have Netscape Communicator, you probably have a fair webpage design program called: Composer. It gets a lot more fun when you start using your own graphics, modifying scripts, etc,. By then, you should also have learned a lot more about html, just by messing with it along the way. If your pages aren't too long or complicated, Windows Notepad will open an html and you can edit the code directly, however, I much prefer Metapad (free) to Notepad, or an older version of Arachnophilia v 4.5310. Handy for editing .pl, .cgi, .js etc scripts, too.

Borrowing an idea is probably ok, but 'borrowing' an entire page probably isn't.
Some people get real touchy when you use their graphics without giving them credit, or more at times.

Some Quick Tips

 I'd say first, decide what audience you are targeting for your site. Is it going to be a personal site like this one, or are you wanting to reach as many viewers as possible? I've sort of gone toward the edge of not being accessible to older browsers, computers, and small monitors. But since I'm not selling anything, I'm not so much concerned with volume visits. Someday, probably, the technology will catch up for the average user.  Tables and colors are handy ~ highly customizable for an infinite way displaying elements of pages. Tables are our friend, you should learn to use them fluently. you can have many colors, borders, etc.   I also use a lot of thumbnail images that, when clicked, load a full sized image in another window. Popups are cool for these sometimes. A thumbnail is another image that has been resized in a graphics program, not just resized in the image properties in the webdesign program. This way, only a fraction of the file size has to load, perfect for many images on one page. Some people don't like popups, or new windows opening, but I don't consider this to be taking control of someone's browsing. There's a lot of pages here. Easy to get lost, I would think. It's an easy task to close the window, I would hope, but I actually got an irate person once who attempted to berate me for my popups. He said, when he looked up, he had about 25 windows open, and wondered why his computer was dog slow. Maybe I'll put a Warning Label on page one, explaining the process. This is an experience, like a Jimi Hendrix sorta thing.

 There are different viewing resolutions to consider. Anywhere from 800x600 to 1280x1024 is not uncommon anymore. When you're designing on a big monitor, it sure isn't going to look the same on your neighbor's old 15" at 800x600.  I'm tending to design for Internet Explorer all the time lately, because around 85% of my visitors are using it as a browser. I've noticed that Opera displays pages totally different sometimes. I mean LOTS of compromising. I spent a few hours playing with a DHTML script for a dropdown menu, and finally got it working pretty good, only to consider what it looked like in Opera. It didn't work at all. If Opera were half as forgiving as IE and IE was half as fast as Opera, it'd be swell.  Mozilla seems to be displaying a lot better, although I still don't like its unforgiving aspect of some things, as if the coders were just being obstinate refusing to 'break' standards like IE.
Frames Right... quick tips on frames. Let's see... Well, frames can be a really cool feature if done right. It's so easy to miss something, or not know that your pages aren't doing what they're supposed to do in other browsers and resolutions. And, some search engines have a hard time spidering your other pages, and putting in the right metatags is something most people don't do. So, I have an opening page letting viewers decide how they want to view my site. Did it work for you? About all I can suggest is to save one of my pages that is framed, and reverse engineer it in your web design program. If you use Dreamweaver, it's way easy to see how all the settings are set. Click on all the frame properties, you'll see. I don't mind what you find. In other words, I don't have any quick tips, per se, on framing, sorry..

However, I have put up a Tutorial along the lines of Frames, but it's sort of convoluted, you'll see.
** Graphics 'How-to' page, with tips on making Blurred Edge Pix, How I Made the Blue Frame Project (an older frames version of the site), and How to Make Roll-Over Buttons (with java script included)
To make the background stationary when a person scrolls your page... include this in-between the opening and closing carats in the line that starts: <body> bgproperties="fixed"

So it looks something like this: <body background="yourimage.jpg" bgproperties="fixed" link="#36F1C7" bgcolor="#000000" text="#DEBE7C">

{Note: this only works in Internet Explorer}


Try to be logical when you start naming your pages. From my own lack of organization, and not thinking ahead to when a couple of pages may actually turn into a couple of hundred, I have some strange names for some of the earlier pages. I personally use a separate folder for each page, each with its own images folder. It makes it a lot easier to update one page or graphic. Name your opening page: index.htm optional: index.html Some servers will accept: default.htm(l) and some others. There are a couple of reasons for this. 1: Anyone can access the opening page by pointing to the directory without a slash and a file name. (for instance, typing in: crowdesigns.apachego.com ( without a /file name at the end), into your browser takes you to my opening page named, strangely enough: index.html ) 2: If you DON'T use the name index.htm(l) , when someone types in an incomplete URL without including the specific page name, they will see a listing of all that is in that folder, in a directory listing, and no webpage. ...nekkid to the world. See what I mean Just X out of the new window. You see the contents of the directory, but not the actual page.

A Few Good Graphics Tools

 There must be hundreds of Graphics Programs out there. You can waste a lot of money trying them out. But all you need to start making all your own special work are a few good programs. Either Paint Shop Pro, or PhotoShop, and, Fireworks, for creating and editing graphic images, and a handful of filters for them. (Many filters and effects are free, others cost more than the original graphics program.)

  A filter is simply an effect that is applied by clicking a button, changing the settings for that filter, and applying. My advice here is, unless you aren't concerned with money, learn how to use all of the features that come with the main program - like drop shadowing, embossing, shading, layers, masks, etc. If you learn to use those, you will be able to make most of the same effects you would purchase in a preset filter - thus saving money, and being able to fully use your graphics program without relying on filters. Gotta admit, I like the options in Eye Candy, Kais Power Tools and some others.

  Again, if you have the money, I'd get Adobe PhotoShop 5 (or better) over PaintShopPro, if for no other reasons, Adobe does a much better job of resizing images with less loss of resolution, and Adobe also recognizes ALL of my fonts. PSP had some trouble with some of them. After you've edited a graphic image, a program that will shrink the file size for web readiness is definitely a plus. Makes your site load faster.

  PaintShopPro has a side program called Animation Workshop that will make, alter, and optimize an animated or static gif image. Pretty handy. As for Jpeg, I rather like Jpeg Optimizer. There is another useful program called: WebGraphics Optimizer that does Jpeg and GIF both. Not being a Java programmer, I rely on a couple of pre-written scripts and programs that seem to work pretty well with the other programs I use.

  I find that Java seems to hang some machines up, it's slower loading (although some Flash pages are pretty slow, too), and just not quite web-ideal. So I use it sparingly. AnfyJava is fairly cool and easy to use. Fireworks and Dreamweaver are available for like, 30 day free trials, fully functional. When the trial period is over, you must purchase it to use it. No amount of reinstalling it helps. So, be aware. These programs are very nice, and you may find yourself thinking about what you can sell to pay for them. Let's see, if the kids'll eat hotdogs for a couple of months..........

JASC Paint Shop Pro
 Very powerful program, about 1/6 the cost of PhotoShop. New Version 7 has lots of stuff, but a hefty 32meg+ d/l. Comes with Animation Workshop for GIF managing. around $100
Adobe PhotoShop
 Does a better job of resizing with less resolution loss. Lots of mega-cool filters and effects available. Most filters will work with other programs, like PSP, FireWorks, etc. Optimizes .gif and .jpg images for the web. around $600
Macromedia Flash
 Makes incredible animations with sound. around $300 There's also a fairly new program called: Swish (around $40) that makes fairly good Flash .swf movies - cool Text and Graphics effects.
Macromedia Fireworks
 Version 4 works well with Dreamweaver 4 for stunning pages. Try both free for 30 day working demo download. Has a great on the fly optimizer for both .gif and .jpg images. around $300
   
Jpeg Optimizer
 Reduces file sizes of Jpeg graphics only, but does it well. This worked great last time I used it before Photoshop &amp; FW. around $30
AnfyTeam Java
 Great Java applets, reasonable price, free upgrades per domain. I don't use a lot of Java - a sizeable amount of machines have one kind of trouble or another, and I hate crashin' folks. $20 per domain
Xara3D
 Good 3D text program. Reasonable, also. You can import a high resolution .jpg made with Xara into FW and Photoshop. $39
If you have any specific questions, you might email me with them...I'll answer you if I can.

I hope any of this helps. There are SO many different ways to go, whether you're designing for Commercial, Private, or just for fun. Use the JUMP links at the left to go to specific areas for links.