Updated: 01/15/2004 06:31:54 PM               (Broken Link? Report It Here)      



Design Area

Tutorials

What can you learn from Design Tutorials?

Design tutorials are nothing more than one or more people passing on what they have learned from their own experiences or research efforts. My design tutorial will pass on to you what I have a learned about website building through a lot of trial and error, lots of research and loads of hints and tips I have received from visitors such as yourself.

Membership requirements for Giz Gears.

This interactive area within Giz Gears does not require an active Giz-Net Network membership in order to participate.

Step 2: Choosing Tools

Hints 'N Tips  Previous Page   Next Page  Resources

Step 1: Deciding Content Step 3: Getting Space

Step 4: Picking A Webpage Layout Step 5: Creating A Basic Image Set

What is the first tool you need?

In order to build a website you must have an HTML (Hyper-Text Markup Language) editor program of some sort. Basically, there are two types of HTML editors: WYSIWYG and Text (non-WYSIWYG). So how do you know which one is the right one for you?

WYSIWYG or not?

WYSIWYG is the acronym for "What You See Is What You Get" and it literally means just that.

Web designers who are just starting out usually choose a WYSIWYG type editor because they don't know the HTML language. Web designers who have been around awhile sometimes choose the WYSIWYG editors because they don't like to type in all the code required for building a page by hand (I am that type of web designer).

Some of the WYSIWYG type editors include: Macromedia's Dreamweaver, NetObject's Fusion, Sausage's HotDog Pro, and Microsoft's FrontPage. Some of the Text (non-WYSIWYG) type editors include: Arachnoid's Arachnophilia, Bare Bones Software's BBEdit, GlobalScape's CuteHTML, and Macromedia's HomeSite. This is just to name a few of both types of editors. Believe it or not, even Windows' Notepad is an HTML text editor.

Which HTML editor do you choose?

The down-side to Text type editors that do not have a preview function is you can't see what your webpage looks like until you upload it to the server. The down-side to WYSIWYG type editors is they are not perfect and sometimes your webpage looks a little different on the server than it did when you viewed in the editor.

Depending on whether you want to learn HTML code, tags and all, the requirement for you to know HTML when using the Text type editor can be a plus or minus. However, the same pretty much applies to the WYSIWYG type editor since the program does all the coding for you.

Consider what your learning curve is and how much you want to learn. Talk with your web designer friends about what they use, what they like and don't like. Then review the descriptions for each of the programs you are aware of. Pick one that is either free or has a demo/trial version for you to test drive. Once you have decided which one is for you then look into buying the program if you plan to keep website designing as your hobby. Take me for example, I started out using HotDog Pro and then moved on to FrontPage and I have been there ever since. Does that mean they are the best programs? Not necessarily but they worked for me so I am happy with what I have.

What is the next tool you need?

Technically, if you don't plan to have graphics on your webpage or you plan to use those that might come with the HTML editor you chose, you don't need any other tools to build your webpage. But we know that the majority of us who get into website design are not going to just stop at the minimum, after if we did then where's the fun in it?

Which image editor do you choose?

Just like there is an abundance of HTML editors to choose from, there's an abundance of image editors to check out too. Some of the these editors include: Silver Eagle Software's Amazing Graphic Editor, JASC's Paint Shop Pro, MediaChance's Photo-Brush, and Adobe's PhotoShop.

Again, you should consider your learning curve is and how much you want to learn. Talk with your web designer friends about what they use, what they like and don't like. Also consider talking with your friends who are into computerized artwork such as greeting card creations or drawing pictures using CAD programs, etc. Then review the descriptions for each of the programs you hear about. Again, pick one that is either free or has a demo/trial version for you to test drive. Once you have decided which one is for you then look into buying the program

What do I use? I started out with Paint Shop Pro and have stayed with it until now. I haven't tried anything else because my learning curve when it comes to manipulating graphics is a lot steeper than with writing code. I am sure there are other programs out there that are just as good, and maybe better, but I am comfortable with what I have and don't want to change.

Do you need any other tools?

There's a lot of other programs out there that are not HTML or Image editors but are also designed to help you with your website design. For example, search engine submitters, code validators, broken link detectors, and the list goes on and on. But for our tutorial purposes, an HTML editor and an Image editor are all you need for now. The rest of the extras we will cover in our accessories part of the tutorial.

What's next?

The time has come for you to strike out on your own in search of an HTML editor and an Image editor program that you want to use. The next step of my tutorial is called "Getting Space". We need a home for our website so we will look at that requirement next. But wait...why are we looking for a home when we haven't built anything yet? Remember, we want to see what we are building as we build it so we have to have a place to view it from and make corrections as needed so we will get our home a little early.

Step 1: Deciding Content Step 3: Getting Space

Step 4: Picking A Webpage Layout Step 5: Creating A Basic Image Set

Hints 'N Tips  Previous Page   Next Page  Resources

Contributions for Giz Gears.

If you have a great web design source you would like to share, please let me know! I give credit for all sources of contributions; links, tutorials, downloads, hints, tips, etc. If you would like to see other pages added to this area, please let me know either through email or through the Forum.

Top of Page