I've received a few e-mail asking about how I design and create my websites and what programs I use to make them. To make it easier for everyone (me included) I decided to put all of my info on one page, namely here. Everything that I've written below comes from my own personal experiences and are my opinions and preferences. Everything here is by no means the only way or even the best way, it's just my way. Feel free to read it and do as you like with the information.

I would love to hear from you and see whatever you create from my musings.
Georgia

For several years I used JASC Paint Shop Pro (PSP for short) for all of my graphics, but for the past 2-3 years I have been using Adobe Photoshop (PS for short). PSP on the PC is up to version 7 last time I checked and is a great program. PS is up to version 8 and is called PS CS and I just love it! Both are great and like anything else both have their pros and cons. PS6 is really good, but if you're starting from scratch and want to use PS you might as well buy version 7 (the brush engine alone is worth it and when you throw in the 'overdue' file browser you have a winner) or CS (the heal brush is great).

Adobe Photoshop also comes bundled with Imageready(IR), a great program that helps take a graphic made on PS and prepare it for the web. PS has many great web features as well, but they are the light version (from what I can see) of what they have in IR. It makes slicing images, for either interfaces or to reduce large images into smaller sections, real easy. It also automatically optimizes graphics and can create the HTML (code for a table) for the sliced images so that they fit seamlessly together. Just look at my nav/title graphics, they are done using PS and sliced in IR.

Most monitors are set at 800 x 600 pixels and many are set at 1024 x 768. To be safe and to have the most surfers to be able to view your site it's best to stick to the format of 800 x 600 pixels. But here's the pitfall, the whole screen measures 800 x 600 pixels, but after you remove the area for the scroll bars, menus and so on it leaves you with about 740 x 460 pixels. :(

740 x 460 pixels is the dimension that I work with. I set it up so that if it's viewed with a higher resolution then you would see the background color repeated to the right. This creates a wide, open area with no content.

When I use iFrames I create the main image that the table appears in at 650 x 420 pixels with a solid color for the background.

All of my fansites are iFrames and you can see how I make them.

Choose what kind of layout you would like:

• straightforward HTML with tables
• Frames
• iFrames

The type of layout method really dictates what kind of nav design you would go with. Once you've sketched out what you want your layout to be and selected all the colors you're ready to go to the next step. The easiest way is to open up a new PS file the same dimensions that you want your final layout to be (740 x 460 pixels or 650 x 420 pixels). Use guidelines to mark out where you want things to line up (and be sliced at later on) and if you are using tables the the guidelines should be where things will be sliced.

Once the layout is done and tweaked to death, take it to IR (or another slicing program) and cut it up and optimize it. Take all that and put it together in Dreamweaver and add your content.

Okay so there's more to it then that, there are ton's of tutorials for layouts out there, several on my links page so I won't go into that here (maybe another time ;).

Tables can be hand coded, but it's a real pain and you have to be very organized to make it work out. With DW it's a dream (really, no pun intented) to do and upkeep.

Tables give a designer a great deal of control over the look and presentation of their site. Plain HTML pages without tables or layers is rather plain and has content spread over a large area.

All of my sites use a great deal of Tables, even a table within a table's cell, heck I even put another table in its cell. This does give me control and the ability to do a great deal of things.

The nice thing about using IR to slice up the image that will become the nav section of a page is that you can have it create a table where each slice is within the proper cell to have the jigsaw puzzle come together properly.

I even use a table to keep all of the images that make up my top nav area (top horizontal Frame area) together. Each mainFrame area where my actual content is is always within a table to keep it:

• easy to move from page to page when changing my overall layout
• keeps all sections and sub-sections equally spaced apart for easier reading and legibility

Frames are good and can really help site design.

They also come in very handy for iFrames. The nav images are all sliced up the way they need to be and each piece is set within a cell. The cell where you want the iFrame to sit will have the <iframe> tag inside of it.

HTMLCodeTutorial.com go to their Frames page and read the last 3 sections:

• Don't Get Framed
• Do Get Framed
• Should You Use Frames?

The last section, "Should You Use Frames?" is a great start to trying to figure out which format to choose.

Creating a Frames page with DW is overall very easy. The initial set up of the FramesSet page is what's annoying in DW. It's easy to accidentally erase or improperly format the individual pages within the FramesSet page. Once that is done it's all very easy to do. Follow the DW tutorials that are located in the Help section and check out online tutorials. It takes a little while to master Frames, but it's not hard with DW.

If you're going the way of Frames then I heavily suggest choosing your scrollbar colors with CSS instead of going with the default color of gray. If you are going to spend the time to make a Frame or iFrame based site then what's a few extra minutes to make it look even sharper?

• I-frames
• Transparent Backgrounds
• Transparent iFrames
• Transparent Scrollbars

innocentia.org also has some great tutorials on the above topics.

Masboy also has a huge number of tutorials including Flash and iFrames.

This seems to be the new, hot layout method online recently. The scary thing is how easy it is to do. Check out the 2 above tutorial sites to see how it's done.

If you're going the way of iFrames then I heavily suggest choosing your scrollbar colors with CSS or going transparent instead of going with the default color of gray. If you are going to spend the time to make a Frame or iFrame based site then what's a few extra minutes to make it look even sharper?

I make my iFrame layouts diffrently by slicing up the image and using a table to bring it all together.
I place my IFrame tag within the cell that I want the PHP or HTML pages to appear.

You can see it at work here.

<TABLE WIDTH=650 BORDER=0 CELLPADDING=0 CELLSPACING=0>
< TR>
<TD><IMG SRC="images/index_01.jpg" WIDTH=103 HEIGHT=78 ALT=""></TD>
<TD><IMG SRC="images/index_02.jpg" WIDTH=95 HEIGHT=78 ALT=""></TD>
<TD><IMG SRC="images/index_03.jpg" ALT="" WIDTH=452 HEIGHT=78 border="0" usemap="#Map"></TD>
< /TR>
< TR>
<TD><IMG SRC="images/index_04.jpg" WIDTH=103 HEIGHT=292 ALT=""></TD>
<TD><IMG SRC="images/index_05.jpg" WIDTH=95 HEIGHT=292 ALT=""></TD>

<TD valign="top" background="images/index_06.jpg">
< IFRAME name=iframe marginWidth=0 marginHeight=0 src="index.php" frameBorder=0 noResize
width=452 scrolling=yes height=292></IFRAME>

</TD>
< /TR>
< TR>
<TD><IMG SRC="images/index_07.jpg" WIDTH=103 HEIGHT=30 ALT=""></TD>
<TD><IMG SRC="images/index_08.jpg" WIDTH=95 HEIGHT=30 ALT=""></TD>
<TD><img src="images/index_09.jpg" width="452" height="30" border="0" usemap="#Map2"></TD>
< /TR>
< /TABLE>
< /TD></TR></table>

The iFrames dimensions, as well as the cell's, is the exact same pixel width and height as the background image.

I've seen several pages that use absolute positioning for the iFrame content to not always work in all browser sizes. I've had to reduce the size of my browser window in order for the iFrame area not to cover the nav area. Very annoying.

I generally use transparent scrollbars and backgrounds in my iFrames and to make sure that it works I place the background image in two places. First in the <TD> tag itself as a background.
< TD valign="top" background="images/index_06.jpg">

As well as a background image, in my PHP or HTML page, by placing the image link in the body tag.

<style type="text/css">
< !--
....enter CSS here...
body {background-attachment:fixed}
....enter CSS here...
-->
< /STYLE>

<body bgcolor="#FFFFFF" background="images/index_06.jpg" text="#000000" link="#BE7464" vlink="#FFCC99" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" bgproperties="fixed">

body {background-attachment:fixed}
This 'fixed' command makes transparent backgrounds work and it places less strain on the eyes since the background doesn't move with the text when you scroll up or down.

The default scrollbar colors are mid-grey in both IE and Netscape. Yuck. As far as I know there's little to be done for scrollbars in Netscape, but there is a solution for IE, CSS. You can add some CSS code within your <HEAD> tag on each page.

Generate A CSS Scrollbar shows you what each area is called and lets you to enter the hexcode of a color for each area and then it generates your code for you :) Once you have the code on your page and you know each region and what it does, then you can easily change your colors without re-generating the code from scratch.

Within an iFrames page you can have Transparent Scrollbars (see above section) and get a great effect.

This is a great and fast way to control your website's overall look very easily and quickly. Converting a regular HTML page to all CSS is lengthy and boring (I spent a chunk of time on both of my fansites and they're rather large), but it's worth it in the end. Now that I've set my style sheet up it's very easy to change my sites' color scheme and look just by tweaking the style sheet files and uploading it to my server and presto it's all changed.

With CSS you can control text, paragraph, titles, image borders, link effects and so many more things. Dodo's site really is mind-blowing when it comes to showing just how many things you can do. Lot's of eye-candy.

DW makes it easy to do and up-keep. CSS combined with templates makes webmastering a dream compared to hand coding everything.

Generate A CSS Scrollbar on this great site.

Dodo's New World go to the Tutorial section and click on HTML.

Dodo's Scripts Collection

A great IE trick for any layout choice like regular HTML, Frames or iFrames is having the background image fixed. This means that the background doesn't move along with the page's content when you scroll up or down.

The reason I love it is that it keeps the background images from moving and it reduces any 'motion sickness' from all the movement. There are pages where it shouldn't be used and that's when the background and foregrounds are very busy. When the noisy background moves over a cluttered foreground it looks odd and it's hard on the eyes.

It's a simple tag element that goes inside the <body> opening tag:

<body background="image.jpg" text="#CEDEFF" bgproperties="fixed" bgcolor="#000000">

You can have any of the regular elements inside the opening <body> tag that you would normally have, just add this along side it.

Here's a great and easy way to have a back button on each page for easy navigation and for far fewer annoyed websurfers. The great thing about this javascript is that you can add it to the bottom of a Template page (as I do) and it's the very same code for each page, yet it tells your browser to look into the history file and go back to the last page visited even if it's within the site or outside of it.

I can't stress the usefulness of it enough. Many websurfers get annoyed and frustrated on a site where they have to constantly use the browser's back button to get out of a dead-end page. Other then the browser's back button, you can keep clicking on the nav menu to go to a section's main page, but that's annoying as well since you have to go to and reload that page just to go somewhere else. Lots of wasted time and energy when a little code can make it easy.

<a href="javascript: history.go(-1)">Back</a>

<a href="javascript: history.forward(-1)">Forward</a>

A simple text e-mail link (USERNAME@SERVER.com)

<script language="JavaScript">
var mailpart1 = "USERNAME";
var mailpart2 = "SERVER.com";
document.write("<a href=" + "mail" + "to:" + mailpart1 +
" @" + mailpart2 + ">" + mailpart1 + "@" + mailpart2 + "</a>")
< /script>

In action:

(A huge warm thank you to Aredhel for her kindness/help and telling me about this javascript. I was getting over 100 spams a day and it's been driving me batty.)

Codegrrl.com Bonnie and Sasha just rule. A great PHP resource site that has a fantastic forum for help and information.

Once you learn the basic of PHP you can do some amazing things. It allows you to use Databases and query the information stored there and extract what info you need. It's the best way to run Fanlistings or Infanities.

It's also a great way to control the look of your site far easier then with Cascading Style Sheets (CSS). You can break down your HTML page into 3 sections (Header, Footer and main content area). This allows you to have 1 Header (all tags above the opening <Body> tag) and 1 Footer (all tags bellow the closing </Body> tag) file that has all the design, color and layout info in them. Then you can mave as many "body/content" files as you like (the <Body tag area with all the content between both ends).

You can also have one index.php page and make is seem that you are actually using several files for content. On Codegrrl.com go to 'Tutorials' and select NL-ConvertToPHP. All the info on how to do that is there. I love this feature and use it a great deal on all of my 120+ Fanlistings.

Unlike PSP, PS (PhotoShop) doesn't have a built in text stroke option on a text layer (not that I could find). After some experimentation I came up with a way to use Outer Glow in the Layer Styles to create a black stoke around a text layer, or anything else you want a 1 pixel (approx.) stoke around.

Here's a screencap of the style settings. I also created an Action (right-click on it to save it to your computer). Place it in your Adobe Photoshop CS > Presets > Photoshop Actions folder. Then in the Actions Palette load it into the pallete.

Once you've applied the Layer Style you can select that text layer, right-click your mouse and select "Copy Layer Style". Then select a layer you want to apply the style to, right-click your mouse and select "Paste Layer Style". Other then using the Action, this is the fastest way to apply the style.

The Action creates a black stroke, but you can easily change it to whatever color you want. You can also play around with the Structure > Opacity setting and increase or decrease the opacity level so that your text stands out the best it can to the background it's on.

About 90% of online surfers use Internet Explorer 6 (IE6)
About 5% of online surfers use Internet Explorer 5 (IE5)
The remaining 5% use Netscape, Mozilla and several other browsers.

A few years ago Netscape owned the market, but not anymore. :(

"The World Wide Web Consortium (W3C) develops interoperable technologies (specifications, guidelines, software, and tools) to lead the Web to its full potential."

They basically set the rules/guidelines for HTML tags so that authors can design pages that users can use and see properly. Unfortunately for web designers each browser doesn't conform to the 'rules' and IE doesn't follow many of them. Since IE (i.e. Microsoft) controls the 'market' it's easier to test your pages 1st on IE5/6 and then on Netscape/Mozilla browsers. The key word here is: test, test, test and then test some more.

I use to hand code HTML for several years (1995 to early 2000), but in the past 4 years I've been using Macromedia Dreamweaver. I'm using version MX right now.

Back in mid-2001 I gave a course on hand coding in HTML and I've put the site that I created for my students up for anyone that is interested in learning HTML. The site is called "Internet Course Website" and goes through the basics with lots of examples. I strongly suggest picking up some HTML (version 4 seems to be the standard at the moment) and at least go through class 1-5. You don't need to learn hand coding tables if you will end up using Dreamweaver.

I'm sure many people think that you can't get a great site by hand coding, but I don't agree. You can create a beautiful site that's easy to navigate and looks great. I personally wouldn't use anywhere as many tables that I do for layout if I had to hand code them all and I really wouldn't try and create a frame based site outside of Dreamweaver, but that's why the programs are out there so you don't have to kill yourself to get the look. :)

The reason I suggest learning to hand code HTML is that Dreamweaver and other WYSIWYG (What You See Is What You Get) programs can add some weird tags into the mix and if you don't understand the raw HTML you can't find the problem or even try to fix it, and believe me it's frustrating when you don't understand or see where the problem is or don't know how to fix it.

Oh, the main reason I moved to Dreamweaver and didn't continue to hand code is that my business site Java's Crypt got up to about 100+ pages (now it's even bigger) and I needed an easier way to track, fix and maintain my site. I've created about a dozen 5 to 30 page sites by hand before switching over (okay some might say to the Dark Side), but when you have to maintain a site that's over 100 pages you need templates! Ah, templates, what a life saver and the main reason to use Dreamweaver, a real time and sanity saver.

Bravenet !!!

They have sooooo many free, cool things that you can add to your site. It's free and easy to register. All the info, code, etc. is there.

One 10 question quiz can be created for free using Alxnet.com. All the info, code, etc. is there.

SignMyGuestBook.Com was just pointed out to me as being even better for Guestbooks then most other free services.

Sparklit.com also offers free web polls and other fun extras.

FormMail.to lets you create your own free, customized Web browser e-mail form.

CBT Cafe (Computer Based Training Cafe)

GIF.org

Good-Tutorials.com

Magic'sPS Tutorials and Workshop

Adobe Tips (Publisher)

Planet Photoshop

Team Photoshop

Sketchpad Photoshop Tips

Computer Arts magazine

EyeWire Photoshop Tutorials

Magic Pixel

Dan's Web Tips: Tables

Dan's Web Tips: URLs

Eyetracking Study of Web Readers

Designing Web Usability

Andy's Introductory JavaScript Tutorials

Dynamic Drive DHTML is 'a place to obtain free, original DHTML scripts and components to enhance your web site!'

SpaceFonts.8m.com

All links updated Dec. 24, 2003.