The very first thing you want to do when starting to making your own web site is to ask yourself “what’s the purpose of this web site?”. Generally speaking, there are two types of web sites: a personal web site, and a business/commercial web site. Personal web sites usually don’t make any money, and you can get a free host (www.geocities.com or www.angelfire.com) if you’re making a personal web site. On the other hand, if you’re planning to promote your business or create your own business by making a web site, I highly recommend that you register your own .com name. Your site will look a lot more professional.
When you have a good idea of what kind of content your web site will have, you might want to draw a very rough layout of your site on a piece of paper. This technique will make it easier to design your real site layout later on. Write down all possible topics your web site might have and think of some “keywords” that will separate your site on different general topics, this will make it easier to make your site’s navigation.
Designing the site
Making your graphics
I first design my whole web site in Photoshop, this way you can make a very unique design of your web site. However, when designing your site you must keep in mind different resolution sizes and consider limiting your graphic widths. So make a file of about 760 wide (actual screen size at 800X600 resolution) so that you don’t get out of boundaries. I’m not going to show a step by step tutorial on how to actually design a web site in Photoshop, it’s beyond the topic, but here are some important things you should consider paying a lot of attention to site logo, navigation bar, backgrounds, and borders.
Also try to stay with at max 4 colors, so that your design looks consistent and professional. If you’re considering making rollover buttons for your navigation bars, make both versions of the buttons right away (the on and off conditions) on different layers. Also, make sure you have all your graphics on different layers so that you can easily modify them later.
Optimizing your Images
After you’re done designing the whole site in Photoshop, go ahead and optimize and save all the graphics separately and put them in one folder called Images. Actually, Photoshop optimizes graphics for you, so your job is to make the size as small as possible while maintaining the best quality. Simply adjust the quality slider. In some cases saving your files as .gif rather than .jpg will yield higher quality yet smaller size, especially for the smaller files with fewer colors. I suggest you try both formats .jpg and .gif.
There is a great technique used by many web site designers (including me 😉 is what I call “stretching similar patterns/backgrounds”. For example, see that gradient stretched at the top and the bottom of this screen? Try right-clicking on it and saving it somewhere on your computer. After you save it, go ahead and open it. So what do you see? A very small image which is only 1pixel wide! This technique saves a lot of loading time for your web site, simply save your similar patterns with 1pixel wide, you will be able to stretch it out using background stretching in DreamWeaver.
Making your site live
The final step of the site design is to put all your web site graphics in DreamWeaver/HTML format. I first start by going to the Layout View, in DreamWeaver, and draw one big table of 760px wide and then center it. (Read “Making a simple web site using DreamWeaver”) (Note: I think this is the best and the easiest way to design a nice looking web site for all resolutions). Another technique is to make your middle table auto stretchable so that your web site can fill up the whole screen. However, I do not recommend using this technique because your web site becomes less flexible. By designing your site in 760px wide table you will be sure that you won’t get out of boundaries of any resolution above or equal to 800X600 and you can place your graphics and content where ever you want at the same time.