how to put your site on the net

How to Put Your Site On the Net In this last installment of our web site design tutorial we will talk about how to take the site you just created and put it up on the Internet. If you have come to this page first, you may want to go back to the Getting Started section of this tutorial.

How Do I Put My Pages On the Web?

Are you confused about how to put your pages on the web? Well, you are not alone. This is probably the number one mystery for most people when they create their first web site. Actually, put your site on the web is really not that difficult. Here is what is required:

1. You need to know the address of the where your site is hosted.
2. You need to know the username and password necessary to add and remove files at that location.
3. You need software that lets you transfer files to and from that location.

Lets look at each of these one by one.

Address of Where is Your Web Site Located

Just like your house has an address that makes it easy to locate, your web site needs an address for people to view pages and an address for you to place your files.

Notice that browsing pages and loading your files require two different addresses. Why? Because they serve different purposes. Visitors to your site retrieve your web pages (html pages and their associated images) in order to view them in their browser. Your goal is place or retrieve the files to and from your web site. Each of these requires a different method of accessing the place where your web pages are stored. Certainly, you would not want visitors to your modifying, adding or removing your web pages or images!

Lets look at the sample site below for an example.

This shows the structure of a simple web site from the visitors point of view. When the visitor types in www.yoursite.com in their browser, the web server automatically sends them the page called index.html (index.html is usually the default name that most web servers expect you to call your home page).

Here is the actual file structure of the site from your point of view. When you go to up load and download files, you use a method called file transfer protocol or FTP. Your site will have a FTP address assigned by the Internet service provider hosting your site. The site will generally have a folder assigned by your Internet Service Provider where you place all of your web pages. This is called the site root folder. In this example, the root folder is called web. This is the name generally used by Acquired Knowledge Systems. Another common root folder name is public_html.

Your Internet Service Provider will provide you with your FTP address. This could be something like ftp://ftp.mywebsite.com or just ftp://mywebsite.com . Almost all programs that allow you to do file transfer protocol omit the ftp:// so that ftp://ftp.mywebsite.com becomes ftp.mywebsite.com and ftp://mywebsite.com becomes mywebsite.com. Your User Name and Password.

In order to have FTP access to your web site, your Internet Service Provider will give you a user name and password. This makes sure that only you will be allow to add or modify files on your web site.

Software to Transfer Files to Your Site.

You will need software that allows you to send files to your site. This software allows you to send files using File Transfer Protocol (FTP) described in the last section. Here are a few options:

Dedicated FTP software-- There are programs whose only job in life to to send and retrieve files using file transfer protocol. Many of these are free or shareware. One of the most popular is called WS_FTP. This software is available free for noncommercial use or for a small fee for commercial use. It can be downloaded from any shareware site such as cnet.com .

Web Site Design Programs-- Most Web site design programs have some type of site management feature that allows you to FTP files to your site and retrieve files for editing. Even the simplest free program such as Netscape Composer allows you to "publish" your site or send individual pages by FTP.

On-line Site Builders-- On line site builders automatically place your pages in the correct location. Since these site builders reside on your Internet Service Provider's computers, they know based on your user name password and domain name, exactly where to place your web pages. Acquired Knowledge Systems is in the process of developing an on-line site builder in order to make it easy for you to create and maintain your web pages.
Last Word

This concludes the web site design tutorial. We hope you found it helpful for more information about web site design, see our recommended reading list, visit our html tutorial or read our e-commerce planning guide. We hope that we you decide to host your web site that you will consider Acquired Knowledge Systems!

creat your web pages

Create Your Web Pages Now that you have an idea of what makes a good web site and you have planned out what you want to put your site lets look at what it takes to actually create your web site. If you have come to this page first, you would probably get more out of this tutorial if you read it from the beginning. Click here to go to the first page of this tutorial.

Web Pages the Easy Way But Not the Best Way

If you have know how to use a word processor like Microsoft Word or Corel Word Perfect than you can create your web site as easy as creating a document! Simply create your page as you normally would in your word processor making sure to include hyperlinks to other pages in the site. When your finished, simply save it as an html document. Here is what the bottom of the FILE > SAVE AS menu looks like in Microsoft Word 2000.



Easy enough, so why doesn't everyone create their web pages this way? This is not a good way to create web pages for several reasons.

1. The html created by your word processor is not optimized for the web, it is designed to preserve the formating of your word processor document. This means that the pages created by your word processor may look find in some browsers (Internet Explorer for example) but maybe not others (Netscape Communicator).
2. It is difficult to manage a site, or create optimized images. Your word processor is simply not set up for this.

Creating Your Web Pages, A Better Way

Most web pages are created with software designed to create web pages. This software creates and edits HTML files. HTML (Hyper Text Mark Up Language) is the type of file your web browser (i.e. Explorer or Netscape) know how to read.

Do you need to know HTML? Not really. Although it is helpful. Many web site design programs work like a word processor. You place your text and photos on the page and the program will save your work in HTML format. This type of web site design program is know as a What You See Is What You Get (WYSIWYG) web site editor. Examples of this are Microsoft FrontPage, Hot Metal Pro, Symantec Visual Page and on the professional end Adobe Go Live and Macromedia Dreamweaver. For pure HTML editing there are some excellent programs such as Homesite (for Windows) and BBE (for the Mac).

If you want to get your feet wet without spending any money, try the free web design tool that comes with your Netscape Browser called Netscape Composer.

For more information on what software to use click here.

Image Editing and Manipulation

Most web pages consist of images and text. You will need some type of software that allows you to size images and save them in a file format that your web browser can understand.

Both Netscape and Explorer understand at least two image formats. JPEGs and GIFs. Both of these image types is compressed in order to reduce the size of their file so you wait seconds instead of minutes for them to load on your web page. GIFs are ideal for line art, illustrations, and text that has been "rendered" as an image. JPEGs are ideal for photographs. For best results, it is important that you become familiar with these file formats. For more information, see our section on Optimizing Images on the Web .

There are many programs that allow you to manipulate images and save them as GIFs and JPEGs for the web. For the beginner, you can use Adobe Photo Deluxe or Paint Shop Pro. For the professional, use Adobe Photoshop (version 5.5 or later) or Macromedia Dreamweaver. There are also several freeware or shareware programs available. You can find many of these at Winfiles.com .

Coming Soon.. Another Alternative On-Line Web Building

Acquired Knowledge Systems is planning on featuring an on-line web site design system that will allow you create web pages directly in Internet Explorer or Netscape Navigator. We plan on offering this service to all of our web hosting and Internet access account customers , without additional charge.

For those planning on doing e-commerce we are going to offer an on-line web store builder.

design and layout part 2

Design and Layout In this section we continue to explore the fundamentals of good layout. In this section you will learn how to make your pages more effective and pleasing to the eye. One this page we will cover these points: 3. Use contrasting color and text weight effectively. 4. Make intelligent use of images including images that display text.

Use Contrasting Color and Text Weight Effectively

Have you ever been to a web site that is difficult to read or is hard on the eyes? This is usually because there is little or no contrast between the text and other elements. Here are some examples good and bad:

Good:

White on Black

Black on White

Black on Yellow

Bad:

Black on Gray

Blue on Back

Purple on Red

Contrast can also be create by using text weighting, for example: As you can see from the example above, mixing type faces of different weight can often create contrast and help to separate sections of your page. In this example we mixed Serif and San-Serif fonts. San-Serif fonts have smooth edges where Serif fonts have flourishes or "serifs" on the edges. This is a Serif font. This is a San Serif Font. See the difference?

Example of Contrasting Text Elements Different Text Size and Weight Creates Good Contrast. Use this technique to add interest to your page.

Other things you should avoid: You should also avoid textured backgrounds that make text hard to read. Here is an example:

Make Intelligent Use of Images Including Images that Display Text

One of the challenges of creating a good web site is making it look consistent from viewer to viewer. Unfortunately, not everyone has the same fonts available to them on their computer. The only way you can make sure that look of text is the same for every user is to create an image consisting of text.

Below is an example:


The text above is a .gif file. In general, if you create images from text, they should be gifs because the file size will be smaller and text will "render" or display more clearly than with .jpg or JPEG images. For more information on image types. See optimizing images for the web.

So why not create a web page as an image? This is not practical or desirable.

Not Practical-- Not practical because the file size of the web page would be huge. To give you an idea, the little text example above is a 3.35KB gif. An image that holds an entire page of text would be at least 100KB. This would take over 20 to 40 seconds to load a typical 33.6K to 56K modem.
Not Desirable-- Not desirable because the search engines would never index your site. Search engines index sites based on the text they see. If the entire page was an image, the site would appear to have no text content.

An Intelligent Compromise-- Render important titles as images to create contrast and interest. Intelligent use of text as images can create a nice effect without making your web pages bloated.


What's Next

Now that you have planned your site, and understand how to create a good layout, you are ready to actually create your site. Next we will look at the nuts and bolts of how to create your web pages.

design and layout

Design and Layout In this section we will explore the fundamentals of good layout. In this section you will learn how to make your pages more effective and pleasing to the eye. Here are some basic principles: 1. Create a Visual Theme that is consistent. 2. Align elements on the page. 3. Use contrasting color and text weight effectively. 4. Group elements together so that the reader can more easily grasp the information you are presenting. 5. Make intelligent use of images including images that display text.

Create a Visual Theme that is Consistent 

Your visual theme creates the mood and atmosphere of your website. A consistent set of colors and images creates an impression in peoples minds and imaginations.

Choose a combination of colors that you will use throughout your site. Try to choose color combinations that are high contrast and easy on the eyes. Choose a set of colors that are consistent with the atmosphere you are trying to create.

A word of caution--Almost all computers are capable of displaying millions of colors. Yet many people have their computers set to view only 256 colors. This means that may people may not be able to see your web page as you intend it to be seen! How do you avoid disaster in this situation? Fortunately, there are 216 colors that will display properly on nearly every computer. These are called browser safe colors or collectively as the browser safe color palette. Your best bet is to make sure that all solid colors on your site are browser safe colors. Click Here to view the browser safe color palette and read more about them.

Align Elements On The Page

Never place elements and text on the page in a haphazard way. Carefully align elements on the page to create interest and visual appeal. Here are some examples:

how to plan a website

How to Plan Your Website In this section of the tutorial we will look at the nuts and bolts of how to plan your website. The good news is that you will not need to invest a lot of time in planning your website. The time you do invest will be well worth the rewards.

More Information E-Commerce Tutorial HTML Tutorial Recommended Reading Optimizing Images for the Web What Software Should I Use? Park Your Domain for Free! Web Hosting Packages

Here are the simple steps for planning your website:

• Identify the Goals of Your Website
• Identify Your Audience
• Create a List of Content That You Both Achieve Your Goals and Be of Interest to Your Audience.
• Divide This List into Pages
• Draw a Chart of Links Between Pages
• Create a Navigation Scheme that Links these Pages Together in a Simple Consistent Way.

Identifying the Goals of Your Website

Do the following exercise:

Right now, take a piece of page and write out a list of goals you want for your website. Next, take that list and combine it into one or two sentences.

Back to our previous example. Lets say you have an interest in nature photography. So you write down the following goals:

I want to meet other photographers.
I want to show others my work so they can critique it.
I want to teach others about my expertise in nature photography.
I want to create a forum for people to exchange their photos and experiences with others.

This can then be distilled down to:
I want to create a forum where I can exchange ideas with other photographers.

Identifying Your Audience

Next, you need to identify who is your audience. It may be family, friends, potential employers. In the example above, it would be nature photographers.

Create a List of Content

Do the following exercise:

Create a list of all of the content that you would like to include on your website that both achieves your goals and would be of interest to your audience. At this point, just write whatever comes to mind, do not try to organize it.

Divide the List Into Pages

Now that you have this list of content, organize it into pages. You can do this by organizing your ideas by topic and placing one major topic per page. Remember, unlike a paper document, a website is nonlinear. That means your audience doesn't read it from cover to cover, they will jump around from topic to topic in whatever manner suits them. This means that each page should stand on its own to some extent.

Draw a Chart of Links Between Pages

Now that you know what basic pages will make up your site do the following exercise:

Take a piece of paper and draw a box that represents each page of your website. Now draw lines between the boxes showing how you want the pages to connect to each other.

Look at the following illustration:



In this illustration of our imaginary photographer's site, you can see that all pages are linked to each other.

Create a Navigation Scheme

Once you have created a chart that shows how all of your pages are linked together, you can now create a navigation scheme that links these pages together in a simple consistent way. In the example above, all of the pages are linked to each other so in this case you might want create a set of links that is at the top or bottom of all of the pages.

Now that you have planned your site, you are now ready to get down and design it. The next section will show you how to make your site look good.

trics of making good website

What Makes a Good Website From my countless number of hours of surfing the web here what I have observed: A successful website meets clearly identified goals and provides compelling content that draws your audience to your site again and again. In addition it is easy to navigate and last to is attractively designed to complement the content.

1. A Good Website is Compelling: It Provides Value to Your Audience that draws them to your site again and again.

This is most important. Think about the sites that are most popular like amazon.com or yahoo or excite. They provide you with a reason to return. They have compelling content. When you go to Amazon, you can easily find what you are looking for, look at reviews from both critics and customers, or even review a book yourself. In addition, they recommend other books in the same areas of interest.

How does this apply to building a home page? Even if you are just building a personal home page, you want to give your audience a reason to stay, and return to your site. Put yourself in the place of your audience. If you were them, what could you do to make your site interesting enough for them to return over and over again.

For example, lets say you had an interest in nature photography and wanted to attract people to your site with the same interest. You could create a different gallery of photos every month you people to look at. You could give advice on how to take nature photos or provide links to other photography sites. You could even write reviews on camera equipment that is well suited for nature photography.
2. A Good Website Meets Clearly Identified Goals

You need to identify what you want to achieve with your website. Maybe you want to provide a way to tell others what your family is doing. Maybe you want to meet up with some others who have the same interest as you. Identifying what you want to achieve will help you create a focused cohesive website. We will discuss this further in the next section, How to Plan Your Site.

3. A Good Website is Easy to Navigate

Have you ever been to a beautiful looking website from a large corporation or organization only to leave in frustration because you could not find what you are looking for ?

Your website should be easy to navigate. You should assume that your audience may not enter the site from the home page. This means that there should be no dead ends. Every page should have consistent easy to understand links back to other pages.

The easiest way to create an easy to navigate site is to take the time to plan the structure of your site before you start building it. This simply means you decide roughly what pages your site will have and how they will link together. Once you do this you can easily create a set of links between your various pages which makes everything easy to find.

4. Visual Attractiveness of a Site

If you were like most people, you probably expected me to discuss this first. True, one of the main reasons most people read this tutorial is learn how to create a good looking site. I promise that I will explain how to do this later in the tutorial. (For those who can't go to Tips on Design and Page Layout and How to Create Your Web pages). I want to emphasize to you that although visual attractiveness is an important element, compelling content, clearly defined goals and easy navigation are equally important.

Many people make the mistake of throwing music, little animations or scrolling text on there site without any real reason. This does not make a good looking site. All this does is make your site look like a Neon Billboard. Please, Don't Do This !

Use images and design as a vehicle to achieve the goals you set out for your website. Make your design clean and simple. Follow the basic design principles. I will discuss this in Tips on Design and Page Layout.

Next, will look at the nuts and bolts of how to plan your site.