Web Design Mastery. Quick Start Guide

(1)

Web Design Mastery

Web Design Mastery

Quick Start Guide

By Shelley Lowery

(2)

WebDesignMastery.com Page 2

This is NOT a free ebook & does not have resell rights

This guide is for your own personal use and may NOT be distributed in ANY form. Copyright © Shelley Lowery, all rights reserved worldwide. No portion of this guide, in any format, may be reproduced or translated without the expressed written consent of the author.

Disclaimer

Although every attempt has been made to verify the accuracy of the information contained within this guide, it provides the opinion of the author and is intended for informational purposes only.

The author and publisher disclaim any responsibility for errors, omissions,

interpretations or use and application of the information herein. In no event shall the author or publisher be held liable for any loss, risk, damage, use or misuse of any of the information either directly or indirectly presented herein.

If professional advice or assistance is required, you are advised to seek the services of a competent professional.

(3)

Introduction

Congratulations on your decision to create your own web site! You have just taken the first and most important step toward securing your future.

The Web Design Mastery course was specifically written for the Internet marketer and provides a wealth of step by step information to assist you in designing, marketing and promoting your own web site. However, if you’ve just downloaded the course and have been looking through the information, you may be feeling a bit overwhelmed right now. Not to

worry…although you’ve been provided with a wealth of information and are probably suffering from “information overload,” you don’t need to read the entire course right now – the information will be there when you need it.

This quick start guide you’re reading right now will provide you with the critical steps you’ll need to take to get your web site up and running in the shortest amount of time. However, it only provides a basic overview. Once you understand the basics, you can go over the course with a fine tooth comb and enhance your web strategy to its fullest potential.

(4)

Tutorial Notes

Throughout this tutorial, you will see a number of text boxes that contain a light bulb and note. These text boxes indicate some additional important information. Make sure you read the information very carefully. The text boxes will look like this:

Note: Additional important information.

You will also find a number of clickable links. These links were active at the time of this publishing. However, Internet sites come and go daily on the Internet and some of these links may no longer be active.

Most of the examples displayed within this tutorial will include the browser view of the code and the actual HTML code.

The HTML codes will be displayed within a box like this:

<html></html>

Copying and Pasting Codes

You are encouraged to copy and paste the codes into the HTML of your page and edit as needed. This will assist you in the learning process.

Note: To copy the codes, you must first click on the text select tool

within the Acrobat toolbar. Next, place your mouse pointer over the beginning of the text you would like to copy. Click and hold your left mouse button and drag your mouse over all the code you would like to copy. Your code should now be highlighted. Go to “Edit” - “Copy” and then place your cursor within your HTML code where you would like to place the code. Go to “Edit” - “Paste”. Your code should now be displayed.

(7)

Deprecated Tags

Throughout this tutorial, you will see tags that have been deprecated. A deprecated tag is outdated and may not be supported in future HTML versions. Instead of using these tags, it is highly recommended that you use CSS instead. You will learn about CSS in the Cascading Style Sheets section of this course. You can find a chart containing a list of deprecated elements and attributes within the charts section.

(8)

Step 1: Define Your Web Site’s Purpose

There are millions of web sites on the Internet today with thousands more being added each day. The competition is fierce and in order to be successful, you must stay one step ahead of the game.

Although designing a professional web site is an important part of your strategic Internet marketing plan, it is only the first step.

Before you begin the actual design process, you must first determine your overall strategy and design your web site accordingly.

Internet marketers basically have two choices:

⇒ Design a mini web site that focuses on just one product or service, with no other content of any kind.

⇒ Design a content web site that includes not only your products and services, but also information and resources that will be of interest to your target market. Although both types of sites can be effective, your success ultimately depends on your web site design and marketing strategies. Both will play a very important role.

Content Web Sites

Content oriented web sites are sites that provide visitors with content such as articles, tutorials, free ebooks and resources. This type of site attracts their target audience with incentives. Their products and services are mentioned on the main page with a link to further information.

Content sites usually profit by educating their visitors. For example, a content site might provide a basic tutorial to assist their visitors in learning how to groom a dog. They provide this tutorial completely free; however, the main purpose for this tutorial is to educate their visitors.

When you provide your visitors with quality information that teaches and informs, you are not only gaining their trust in you by sharing your expertise, but you're also building your credibility, which is very important on the Internet.

The key to using this technique effectively is to provide content that targets your potential customer.

(9)

Mini-Sites

Mini-sites are different from content sites, as they don't provide any content. They usually contain one or two pages and completely focus on one product or service. Basically, the site is just a sales letter for the product.

If you're looking for a highly effective method of designing a web site to sell your products, a mini-site may be your answer. Mini-sites are one of the most effective marketing tools online. Not only are they effective, but they're also very inexpensive and easy to create.

The concept is simple. Create a one or two page web site that completely focuses on one specific topic. Everything within this page should have one purpose -- getting your visitors to take action.

The sole purpose of a mini-site is to attract highly targeted traffic. The more targeted the better. For example, if you have a web site that sells a number of products, a good mini-site would focus on one specific product instead of all of the products. You could create a mini-site for each product you offer.

Designing Your Mini-Site

A mini-site should be neatly designed in standard HTML with no Flash or fancy plug-ins and very few graphics. There should be no banners or outside links of any kind and nothing that will distract your visitors' attention.

Each mini-site you create should be optimized for just one specific product and concentrate on just a few keyword phrases -- the tighter the targeting the better. If you'd like to set up your mini-site using tables, try to place your Heading text above your table code. If this isn't possible, make sure you include your keyword phrases within your top left table cell to assist you in ranking higher in the Search Engines. Mini-sites are not limited to just your products. They can also be used with any affiliate programs you may be promoting.

You can find further information within the Web Design Mastery tutorial.

(10)

Preparing Your Information

Whether you’re creating a web site to market your own products or service or someone else’s, you must prepare your information prior to developing your web site.

Depending on what type of web site you’re going to create, your information might include:

Content

If you’re creating a content site, gather information of interest to your target audience, such as tutorials, articles, reviews, free ebooks, etc.

Sales Letters

Prepare your sales copy, follow-up letters, advertisements, thank you letters, etc.

List Management System

As soon as your web site is up and running, you should immediately begin building an opt-in list. An opt-in list is a list or database containing email addresses of individuals who have chosen to receive your email messages. Your messages may be web site updates, product updates or an ezine. They provide you with a direct line of

communication with potential customers and enable you to promote your products or services.

For further information, visit the following web address:

http://www.web-source.net/ezine_basics.htm

Marketing Plan

Developing and implementing a strategic marketing plan is an essential part of your Internet success.

Your marketing strategies will play a major role in how your web site should be

designed. For example, if you’re creating a content site and you’re marketing affiliate products, you may want to write informational articles that focus on the product you’re promoting and then recommend the product or service to your visitors.

Your articles should identify a problem, provide same basic information for solving the problem, and promote a product or service as the solution.

(11)

Step 2: Preparation

Selecting an Editor

ess easier for you.

Before we go any further, I want you to understand that you DO NOT have to purchase an HTML editor to learn how to write your own HTML code. That is completely optional. The following information is simply a

recommendation to make the learning proc

When you’re ready to begin, your first step will be to decide whether you will

be writing your HTML code within a text editor or if you'll use an HTML editor. Most people opt to use an HTML editor, as it is much easier and will save you a great deal of time. However, you still need to learn HTML, as many of the special effect codes are not supported by many HTML editors.

If you would like to use a text editor, Mac users can do so with TextEdit. It should already be installed on your computer. You can open it from your ‘Dock’ or in your ‘Applications’ folder. Or, you can download the free text editor, TextWrangler

http://www.barebones.com/products/TextWrangler/ .

Windows users can do so with Notepad, which should already be installed on your computer. You can find it within your ‘Accessories’ folder. Or, you can download the free text editor, NoteTab http://www.notetab.com/ .

For the purpose of this tutorial, if you have a Mac, you may want to use an HTML editor, such as PageSpinner http://www.optima-system.com/ or Taco HTML Edit

http://tacosw.com/. If you have a Windows operating system, you may want to use Coffee Cup HTML editor http://www.coffeecup.com .

All of these editors are very reasonably priced, offer free trials, and will assist you in learning how to write your own HTML, as you can preview your page as you write your code.

When you complete this course and you’re ready to create your website, you may want to use a visual editor, also known as a WYSIWYG (What You See Is What You Get) editor. A WYSIWYG editor is by far the easiest editor to use, as they don’t require any knowledge of HTML. Some of the editors above also have visual editors. Please ensure that you review the features prior to making a purchase.

If you’d rather use a more expensive HTML editor with more bells and whistles, I recommend using Dreamweaver.

(12)

Creating a Folder

Before we begin our new webpage, we'll first need to create a folder for our files. To create a folder on a Mac, go to “File” – “New Folder” on the “Finder Menu” and type in a name for your new folder. You can call it website or whatever you'd like.

To create a folder on a Windows system, place your mouse pointer over a blank portion of your desktop and right click on your mouse - a menu will appear. Go to “New” - “Folder” and type in a name for your new folder. You can call it website or whatever you'd like.

Opening Your Text or HTML Editor

When you’re ready to begin, your first step will be to open your text or HTML editor. If you’re using an HTML editor, you may notice some default HTML code displayed when the program is loaded. For the purpose of this tutorial, you'll need to delete this text.

Note: To highlight and delete the default text, place your mouse pointer over the

beginning of the text you would like to delete. Click and hold your left mouse button and drag your mouse over all the code you would like to delete. Your code should now be highlighted. Use the delete key on your keyboard to delete the text.

(13)

If you'd rather use a text editor to write your HTML, Mac users can do so with TextEdit. It should already be installed on your computer. You can open it from your ‘Dock’ or in your ‘Applications’ folder. Or, you can download the free text editor, TextWrangler

http://www.barebones.com/products/TextWrangler/ .

Windows users can do so with Notepad, which should already be installed on your computer. You can find it within your ‘Accessories’ folder. Or, you can download the free text editor, NoteTab http://www.notetab.com/ .

When selecting an editor, make sure that you don’t use a program, such as Microsoft Word, as you must write your code in plain text. These types of programs add a lot of unnecessary coding and will cause your page to be much larger than it needs to be – causing your page to load more slowly.

Saving & Viewing a Webpage

Your first step will be to save your new file with an htm or html extension. The htm file extension is a shortened version of the html extension. These extensions tell the browser the document is HTML. Go to “File” - “Save As” and locate your new website folder. Open your new folder and in the File Name box, type in a name for your

webpage file.

When selecting a name, it is best to type the name in all lowercase letters, as the file names are CAse SENsitive. What this means is that when you begin creating links, if your file name is Page.htm, the file name within your link code must also be Page.htm and not page.htm. See the difference? Typing your page name in all lowercase letters is much easier, as you won’t have to remember what letters you capitalized. In addition, your file name must not contain any spaces.

In addition, your file name must not contain any spaces or characters, such as * : " \ | < > ? /. A good rule of thumb is to save your secondary pages that have more than one word separated with the underscore character like this: wordone_wordtwo.html If the page you’re saving is the main or opening page of your website, it should be saved as, index.htm or index.html. When you acquire your own domain, most servers will look for a file called index when your link, http://www.yourdomain.com, is clicked on. If you're saving a page other than your main page, try to save it using the page's

primary keyword phrase for higher Search Engine ranking. For example, if your main keyword phrase for a specific page is dog grooming, your page should be saved as dog_grooming.htm or dog_grooming.html.

When you’re ready to view your webpage, if you’re using a text editor to write your HTML, you must view your new page through your web browser. Open your web browser and go to “File” - “Open” or “Open File,” depending on the browser you’re using. You may also need to click on “Browse,” again depending on the browser you’re using. Click through your files until you locate your new website folder. Click on the file to select it and then on “OK.”

(14)

If you’re using PageSpinner http://www.optima-system.com/, you will need to work within the HTML code editing section. You can preview your page by clicking on the “Preview” button on the toolbar.

If you're using Coffee Cup http://www.coffeecup.com, when you load the program, you will find three tabs at the top of the editing window – Code Editor, Visual Editor, and

Preview. You will need to work within the “Code Editor” screen. You can preview your

page by clicking on the “Preview” tab at the top of the editing window.

In the first several lessons, the saving and viewing process will be repeated, as this will assist you in the learning process.

Note: When you upload your website to your server, make sure you upload your

HTML files in ASCII mode and your graphics in binary mode.

Web Hosting (Web Server)

Although you can design and view your webpages through your own computer, to enable other Internet users to view your pages, you must find a company that will host your pages. These companies are known as Web hosts. A Web host is simply a

company that will provide you with server space for a monthly fee. In addition, they will serve your pages to the Internet community. We’ll talk more about Web hosts after the HTML tutorial.

File Transfer Protocol

File Transfer Protocol, better known as FTP, is a procedure used to upload and download files to and from your web server. Uploading refers to transferring files from your computer to your server. Downloading refers to transferring files from your server to your computer.

Once you have selected your Web host, you’ll need to use an FTP software program to upload your files to your sever. We’ll talk more about File Transfer Protocol after the HTML tutorial.

If you’re using a Mac HTML editor, review the help files for information regarding uploading files to your server.

If you’re using the Coffee Cup http://www.coffeecup.com HTML editor, you can publish

your pages to the web right through the editor. Go to “File” – “Upload File to Server.” You can then go to “Add or Edit Servers” to set it up.

Now that you’re all set up, you’re ready to begin the HTML tutorial.

(15)

Step 3: Build Your Web Site

Using a Webpage Template

If you'd like a big head start on designing your website, I highly recommend using a webpage template. Webpage templates are pre designed webpages - including

graphics - which you can edit to suit your needs. It’s simply a matter of adding your own text and links.

They’re wonderful and worth their weight in gold, as they can save you hours upon hours of valuable time. What’s more, they will enable you to instantly have a

professional looking website without all of the work.

Even if you decide to use a template, it is still very important that you learn HTML, as this will enable you to edit your page as needed.

If you would like to use a template, please ensure that you complete the HTML tutorial and have a basic knowledge of HTML before you begin. When you’re ready to use a template, open the index file within your HTML editor and edit the information to suit your needs.

You can find a wealth of highly professional webpage templates at Template Monster. Once you purchase your template, you can instantly download it to your computer and then add your own text. This provides a great way to get your website up very quickly. What’s more, if you’d rather not edit the template yourself, you can even hire Template Monster to edit the templates for you.

When editing your own templates, keep in mind, many of the templates include

graphics, which must be edited within a graphics editing program. If you don’t have one, I highly recommend Paint Shop Pro. As with any graphics editing program, it will take some time to learn. However, it is very reasonably priced and is the only graphics program you’ll ever need. See the ‘Graphics section for a basic graphics tutorial. If you don’t feel comfortable editing your own graphics, I recommend visiting Rent a Coder to enable professional developers to bid on your project. Although the site focuses mainly on software development, they have developers in several categories, including graphics, to assist you.

(16)

Designing Your Own Web Site

The best way to design your web page is to literally draw your site layout on a piece of paper. This will include your navigational links, text and graphics. This will give you a basic guideline to follow when you begin.

Your main goal is to create a template for your web site that you can use to design every page of your site. This will enable your entire site to have the same look and feel, while displaying different content on each page.

As a web page should be displayed in sections and not simply one long scrolling page, you may want to design your pages using HTML Tables. Tables will enable you to display your content in sections like a newspaper, set up a specific number of rows and columns, and even place additional tables within your main content table to create special content sections with colored backgrounds.

If you’re just starting out, you may want to use a simple table format that will display your navigational links on the left or right hand side of the page, and your text and other information on the rest of the page. Basically, in two columns like this:

Slogan Navigation Link Link Link Link Link

YOUR HEADING TEXT

Your Text

The left navigational section is column one and the “Your Text” area is column two.

(17)

What is an HTML Table?

Tables are used to display your web page content in an organized fashion. Your page can be set up in columns and rows, you can display your table cells with or without a border, and you can even have a color or image patterned background.

Tables can be used in an unlimited number of ways including: • Organize your text and images

• Display your text in a newspaper format

• Add color and image backgrounds to text areas

Tables are created with the <table></table> tags. The <table> tag begins the table code and the </table> tag ends the table. In addition to the table tags, you must also specify the number of rows and columns your table will contain. To do this, you must use the <tr> tag, which specifies the beginning of a table row and the <td> tag, which will display your table data (column). The <td> tag should be placed in front of any information you would like to be displayed within a cell. The </td> tag will close the cell. All of these tags will be placed between the <table> and </table> tags.

Below is an example of how a table is structured. Tables are made up of table rows and table columns. Table rows are horizontal and table columns are vertical. A table row is created with the <TR> tag and a table column (data) is created with the <TD> tag.

<table>

<tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr>

(18)

Below is the code that was used to create the table:

<table> <tr> <td>Text</td> <td>Text</td> </tr> <tr> <td>Text</td> <td>Text</td> </tr> </table>

When you’re ready to begin your web page, create your table within your HTML with a border. This will enable you to see exactly where your borders are so that you can make sure everything is displaying properly. Once your page is complete, you can remove the border.

In the next section, we’ll go over the entire table code, step by step, that was used to create the example web page above.

Please note, if you will be creating large pages, placing your entire page content within a single table will significantly increase your site's load time and is not recommended. Instead, you can create two or three tables (depending on the size of your page), stacked on top of each other, for each section of content. The cellpadding, cellspacing and border attributes should be set to "0" to enable your tables to seamlessly flow together. In addition, the widths for each table should be the same. The top table would contain your page header content, the middle table would contain your content and the bottom table would contain your footer content. We’ll go over table stacking within the Advanced Web Design guide.

(19)

Creating Our HTML Page

We will begin our webpage by creating the basic document structure:

<html> <head> <title>Webpage Title</title> </head> <body> </body> </html>

(20)

Creating Our Table

Our next step will be to create our basic TABLE structure. Our table will have 1 row and 2 columns, and will start out looking like this:

Browser View

HTML Code

<html> <head> <title>Webpage Title</title> </head> <body> <p> <table border> <tr> <td> </td> <td> </td> </tr> </table> </p> </body> </html>

Note: In order to display a border around an empty TABLE cell, you must place

  within your empty cell.

(21)

Setting Our Table Attributes

Our next step will be to set our TABLE attributes. We’ll specify the TABLE width as a percentage to enable it to display properly in most web browsers. We’ll also specify the

cellpadding, cellspacing and our left column color. Our TABLE will now look like this:

Browser View

HTML Code

<html> <head> <title>Webpage Title</title> </head> <body> <p>

<table border cellspacing=“10” cellpadding=“10” width=“100%”> <tr> <td bgcolor=“#f6c004”> </td> <td> </td> </tr> </table> </p> </body> </html>

Notice our TABLE width is set to 100%? This width will display our TABLE across 100% of the viewers screen. Our cellspacing and cellpadding are set to 10 so that our text won’t be right up against the left edge of our page, and our cells will have some space between them.

(22)

Setting Our Column Widths and Text Alignment

Our next step will be to set our column widths and text alignment. Since the first cell will display our logo and text links, it will be the smaller of the two cells. We will vertically align our text to display at the top of our TABLE cells. Our TABLE will now look like this:

Browser View

HTML Code

<html> <head> <title>Webpage Title</title> </head> <body> <p>

<table border cellspacing=“10” cellpadding=“10” width=“100%”> <tr valign=“top”> <td bgcolor=“#f6c004” width=“20%”> </td> <td width=“80%”> </td> </tr> </table> </p> </body> </html>

(23)

Adding Our Logo and Navigational Links

Our next step will be to add our links and text. Although our TABLE may not appear to be long enough to hold much text, it will automatically stretch as we add our information. Our logo and all of our links will be placed within the first column, which is specified by the 20% width. Our webpage template will look like this:

Browser View

Slogan Navigation Link Link Link Link Link WebDesignMastery.com Page 23

(24)

Web Design Mastery WebDesignMastery.com Page 24

HTML Code

<html> <head> <title>Webpage Title</title> </head> <body> <p>

<table border cellspacing=“10” cellpadding=“10” width=“100%”> <tr valign=“top”> <td bgcolor=“#f6c004” width=“20%”> <img src=“yourlogo.gif” /><br /> <br /> <hr /> <br />

<font face=“verdana” size=“2”> <u>Navigation</u><br /> <a href=“domain.com”>LINK</a><br /> <a href=“domain.com”>LINK</a><br /> <a href=“domain.com”>LINK</a><br /> <a href=“domain.com”>LINK</a><br /> </font> </td> <td width=“80%”> </td> </tr> </table> </p> </body> </html>

When you begin adding content to your TABLE cells, you’ll first need to delete the placeholder  . These placeholders were placed between the <td> and </td> tags to enable the borders to display.

The <hr /> tag, highlighted in yellow, will display our horizontal rule. It is used to

separate our logo from our links. We also used several <br /> tags to create line breaks. If we didn’t use the <br /> tag at the end of each of our link codes, the links would

(25)

Adding Our Content

We’re now ready to begin adding additional content to our webpage. Our heading text, content, additional links, and copyright information will be placed within the second column, which is specified by the 80% width. Our webpage template will look like this:

Browser View

Slogan Navigation Link Link Link Link Link

YOUR HEADING TEXT

YOUR CONTENT

(26)

Web Design Mastery WebDesignMastery.com Page 26

HTML Code

<html> <head> <title>Webpage Title</title> </head> <body> <p>

<font face=“verdana” size=“2”> <u>Navigation</u><br /> <a href=“domain.com”>LINK</a><br /> <a href=“domain.com”>LINK</a><br /> <a href=“domain.com”>LINK</a><br /> <a href=“domain.com”>LINK</a><br /> </FONT> </td> <td width=“80%”> <h2 align=“center”>

<font face=“verdana”>YOUR HEADING TEXT</font><br />

</h2>

<font face=“verdana” size=“2”>YOUR CONTENT<br /> <br />

| <a href=“privacy.htm”>Privacy Policy</a> | <a

href=“about.htm”>About</a> | <a href=“feedback.htm”>Feedback</a> | <p align=“center”>

Please note: Your bottom navigational links and copyright information will not display at

the bottom until you add the rest of your content. The example template was set up to enable you to see how it should be displayed.

(27)

When setting your webpage up in TABLES, keep in mind, all of your text, images and additional coding will be placed within your TABLE cells between the <td> and </td> tags. In addition, when displaying text within TABLE cells, you must use a font tag within each individual TABLE cell to specify a specific font. For this reason, it is highly

recommended that you use CSS to format your text.

Once you complete your webpage, make sure you set the TABLE border to 0. That’s all there is to it.

Write your code one step at a time and check and double-check your coding to ensure that you have included the proper quotes (“) spacing, and closing tags </tag>. When the code you’ve written isn’t displaying properly, most of the time, the problem is caused by a missing quote, extra spaces, or missing closing tags.

(28)

Step 4: Select a Quality Domain Name

When you’re ready to launch your web site and you’re trying to select a good domain name, there are many factors that need to be taken into consideration.

Although there are many new domain extensions available, keep in mind, dot.com is still the best choice.

Guidelines

1. Try to select a domain name that contains your most relevant keyword phrase, as some search engines place relevancy on them.

2. Try to select a domain name that will be easily remembered.

3. Try to avoid using abbreviations or anything that will be difficult for your visitors to remember.

4. Try to avoid using hyphens, as the non-hyphenated version will be much easier for your visitors to remember and receive more traffic.

5. Try to avoid using numbers, or anything you will need to spell out, as it will cause confusion. For example, if you verbally tell someone your domain name is

success4u.com, they will immediately try to type in successforyou.com. For this reason, every time you tell someone your web address, you would need to spell it out for them.

6. Try to keep your domain name as short as possible. The shorter the name, the easier it will be to remember.

7. Try to ensure that you’re not infringing upon a trademark. When purchasing a domain name, it is your responsibility to ensure that the name you select isn’t infringing upon someone else’s rights. To avoid possible litigation, make sure you take the time to research the domain name you’re interested in. For further information, visit CSC http://www.cscprotectsbrands.com and International Trademark Association http://www.inta.org .

Take your time and select a quality domain name that will grow with your business.

(29)

Step 5: Find a Good Web Host

What is a Web Host?

A Web Host is simply a company that provides you with server space for your web site. This includes all of your web pages, graphics, scripts and files.

When your web address is typed into a browser, your web host is being contacted to locate and display the requested page.

Free verses Professional Web Hosts

All Web Hosts are not created equally. There are a number of free hosting services available on the Internet. However, if you're designing a web site for business purposes, you should NEVER host your web site with a free host.

In order to establish credibility, you must be willing to invest in your own domain name and professional web hosting. Web sites hosted on free servers are not taken seriously and will suffer a serious loss of business.

Your visitors may feel that if you don't have your own domain, you may not be a credible company. They'll simply take their business elsewhere.

Not only is professional credibility a great reason not to host with a free service, but many Search Engines won't even index a site hosted on a free server.

In addition, free hosting services don't need to have a reason to shut your site down. You may get up one morning, try to access your site and instead of your site loading, you may receive an error message. There goes all your hard work, your web site, your traffic, your Search Engine positioning, your customers -- all gone.

Free hosting services aren't interested in your business or how hard you've worked to design your web site and create a steady stream of traffic. Their main concern is their business. That's why they're doing it. They display banner ads on every site they host. If you're serious about your business and you have a sincere desire to succeed, having your own domain name is a must. It's not a luxury, it's a necessity. Businesses using the free services are not taken seriously. Having your own domain name is just as important as a professional looking web site. They go hand-in-hand.

The cost to register your Domain name is very reasonable and well worth every dime. Check out NameCheap.com http://www.namecheap.com for some of the lowest prices.

(30)

Selecting a Professional Web Host

When selecting a professional web host, your first consideration should be the

company. Check out their background. Talk to some of their customers and ask them if they've been satisfied with their service.

9 Do they offer fast connections?

9 Do they have a back-up system in place to protect your data in case there is a power outage?

9 Do they require you to make payments in advance? 9 Do they require a long-term contract?

9 Do they charge set up fees?

9 How is their customer support? Test them.

9 Do they provide you with free access to a secure server for order processing? 9 Do they offer shopping cart software to process your orders?

9 Do they provide you with an online website manager? 9 Do they provide you with an online support manual?

Web hosting prices vary greatly. When selecting your host, make sure you're getting exactly what you're paying for. Keep in mind, a lower monthly rate will not benefit you if your site is down a lot, slow, or customer service is poor.

Selecting a professional web host is a very important decision. Make sure you do your homework and ensure the host you select offers exactly what you need.

9 24/7 reliable tech support

9 Your own domain name (www.yourname.com) 9 At least 10GB of monthly transfer (traffic)

9 Depending on the size of your site, a minimum of 50MB of server space with the option to upgrade later if needed

9 Unlimited true POP email accounts - [email protected] 9 Unlimited email aliases

9 Email forwarding

9 Unlimited autoresponders 9 Your own unrestricted CGI-Bin

9 Access to SSL Encryption for secure transactions 9 Access to a shopping cart

9 MySQL Database 9 Perl

9 htaccess password protection 9 Server Side Includes (SSI) support

9 Design (and upload to) your site using HTML editing software

9 Microsoft FrontPage Server Extensions for those utilizing FrontPage 9 Unlimited free access to your server via FTP/Telnet

9 Easy access to your log files 9 Statistics on visits to your site

(31)

9 No hidden fees 9 Referral program

If you’re just launching a regular website that has under 500 pages or so, a handful of graphics, a few simple scripts, such as a form processing script, etc., and a database, you most-likely won’t need more than 150GB of server space. This will also give you some growing room.

Free web hosts are great for hosting a personal web site, but are not recommended for a business site. If you're really serious about your business and want to establish your Internet presence, it is very important that you get your own domain name and select a quality host. Your success depends on it.

Here are some quality web hosts that provide you with exactly what you need to develop a profitable Internet business at a very reasonable price.

Host Gator

http://www.web-source.net/cgi-bin/t.cgi?l=hg

Host4Profit

http://www.web-source.net/cgi-bin/t.cgi?l=h4p

(32)

Step 6: Transfer Your Web Site to Your Server

Introduction

File Transfer Protocol, better known as FTP, is a procedure used to upload and download files to and from your web server.

In order to use FTP, you'll need to download and install a software program on your computer. If you are a Mac user, you may want to use a program called, Fetch. http://www.ipswitchft.com/products/fetch/features.asp .

If you have a Windows system, you may want to use a program called, WS FTP Pro

http://www.wsftp.com.

For the purpose of this tutorial, we will be focusing on WS FTP Pro. If you are a Mac user, you can find a tutorial to assist you here.

Note: If you’re using PageSpinner http://www.optima-system.com/ or Coffee Cup

http://www.coffeecup.com HTML editor, you can upload your pages to your server right through the editor. View your editor’s help files for further inform

(33)

Setting Up WS FTP Pro Software

Prior to using the software to upload your files, you will need to set it up so that it can connect to your web server. You will need the following information, which you should have received within the welcome message from your web host:

9 Server Address

9 User Name and Password

When you first launch the FTP program, you will want to click on the ‘Connection Wizard’ button on the toolbar at the top. The following window will load and enable you to enter your website information, so that you can connect to your server.

Connection Wizard

Step One:

Enter your website name within the ‘Site Name’ section where indicated.

(34)

Step Two:

Enter your connection type. This is normally FTP.

If the FTP connection type doesn’t work for you, contact your web host for assistance.

(35)

Step Three:

Enter your server address.

This information is provided by your web host. If you’re not sure, contact them for assistance.

(36)

Step Four:

Enter your user name and password. You should have received this information within your ‘Welcome’ message from your Web Host when you signed up. If you didn’t, contact your Web Host for assistance.

(37)

Step Five:

This is the confirmation screen. If everything is correct, click on ‘Finish’ and the software will connect to your web server.

As soon as the software receives a connection, the following screen will load:

(38)

Note: The next time you want to connect to your server, you can just click on the

‘Connect’ button on the left side of the toolbar at the top.

The files on your computer are displayed within the left window and the files on your web server are displayed on the right.

To upload your files on a Host4Profit server, your first step will be to locate the files you would like to upload from your computer, which is within the left window. Your next step will be to click on the masteri5-www folder, within the right window, to place your files on your server.

However, the masteri5 text would actually be your username. It’s normally the first eight characters within your domain name. However, if there are other domains with a similar domain name, your username will most likely be the first seven characters of your domain name, followed by a number.

Note: If you’re using a different hosting company, this may be different.

(39)

Transferring Files

Prior to uploading your files to your server, you may want to set your transfer mode to auto. That way you won’t have to select ASCII OR Binary each time you upload a file. To set this up, click on the ‘Transfer Mode’ button at the top of the server window on the right. Next, click on ‘Auto (Based on File Ext).’

Here’s what the button will look like:

To maneuver through your folders, simply double-click on them.

To transfer your files, click on the file once to highlight it and then click on the transfer files arrow button, which is in the center of the two windows.

Here’s what the button will look like:

The top button is the ‘download’ button, which will transfer files from your web server to your computer. The bottom button is the ‘upload’ button, which will transfer files from your computer to your web server.

To select more than one file at a time, click on each file you'd like to transfer while holding down the Ctrl key on your keyboard. Keep in mind, unless you are using the ‘Auto’ transfer mode, all of the files you select must be uploaded in the same mode. In other words, you could upload all of your HTML files at the same time, or all of your images.

If all of the files you'd like to upload are all together, you can click on the first file while holding down your Shift key and use the down arrow on your keyboard to highlight all of your files.

(40)

Transfer Modes

Files, such as text, HTML, and most scripts, should be uploaded to your server in ASCII mode. Any file that isn't ASCII text, such as programs (EXE, ZIP), graphics, ebooks, sounds (WAV, MID) and movies should be uploaded to your server in Binary mode.

File Permissions

When using scripts on your web site, you will be required to set file permissions in order for your scripts to run properly on a Unix server. The most common setting for CGI/Perl scripts is 755. When working with scripts, you may receive an Internal Server Error when you try to run it. Many times, this error is caused by improperly set file

permissions. Permissions: Read 4 r Write 2 w Execute 1 x None 0 -

Read permissions are enabled with the number 4 or the letter r.

Write permissions are enabled with the number 2 or the letter w.

Execute permissions are enabled with the number 1 or the letter x. No permissions are enabled with the number 0 or a dash (-).

Each of these permissions will be set for each of the following: • Owner

• Group • World

To give you a better idea of how permissions are set, below is an example of a script that requires the permissions to be set to 755 -- it breaks down like this:

7 - Represents the permissions for the Owner (you). The owner has been given Read,

(41)

5 - Represents the permissions for the Group (individuals with access to your server).

The Group has been given Read and Execute permissions. 4+1=5. This can also be written like this: rx

5 - Represents the permissions for the World (website visitors). The World has been

given Read and Execute permissions. 4+1=5. This can also be written like this: rx 755 is equal to rwxrxrx

Changing File Permissions

If you would like to set your file permissions through your FTP program, you can do so like this:

1. Log into your server and locate the directory that contains your file.

2. Click once on the file that you would like to change permissions – just to highlight.

3. Place your mouse pointer over the file and right click to launch a menu. Or, go to ‘File’ – ‘Properties’ on the main toolbar at the top of the software.

Click on ‘Properties’ to launch the ‘Properties’ window. The ‘Properties’ window will look like this:

(42)

Set your permissions and click on OK. You can type in the numbers within the ‘Numeric Value’ section, or place the appropriate checks within the Owner, Group and World sections.

In addition to setting permissions within your FTP program, most web hosts will enable you to set permissions through your web page control panel.

Files such as text, HTML, and most scripts should be uploaded to your server in ASCII mode. Any file that isn't ASCII text, such as programs (EXE, ZIP), graphics, ebooks, sounds (WAV, MID) and movies should be uploaded to your server in Binary mode. The folders on your server are set up just like the folders on your computer. Depending on the hosting company you’re using, your server folders might look something like this:

domain-logs logs including access, error, etc. domain-mail email accounts

pop

domain pop email main account

domain-www root directory where you store your HTML and graphic files. cgi-bin CGI script directory for script storage.

If you're managing your own web site, having a good FTP program is an absolute must. Not only will it provide you with some independence, but it will also enable you to have complete control over your files.

(43)

Conclusion

If you follow this step by step quick start guide, you can get your web site up quickly. However, it is highly recommended that you take the time to review the complete course, as it contains vital information that will assist you in creating a successful web presence.

To your success!

Web Design Mastery. Quick Start Guide