Dreamweaver Tutorial: How to Spice Up Your Website with Images in Dreamweaver CS3 (Part 2)

by Christopher Heng, thesitewizard.com

In the previous chapter of this Dreamweaver tutorial, we designed a two-column web page using Dreamweaver CS3 and uploaded it to the web host.

In this chapter, you will learn how to insert images into your web page.

If you have missed the first instalment of this tutorial, you should read and attempt the steps given in Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1) before trying out the things on this page. Uploading the web page, which we did in Part 1, is a necessary step if Dreamweaver is going to handle the web addresses (URLs) of your images correctly. This chapter assumes that you have completed the steps in Part 1.

Requirements

You will need the following to complete this tutorial:

1. A small image to act as the logo of your website

   You will need a small image to place on the top left hand corner of your web page. This image will serve as your site's logo. It will appear on every page of your website.

   If you are designing a company website, chances are that your company already has a logo. If you don't have an image file for the logo, either scan it or take a digital photograph of the logo for your use in this chapter.

   If you don't have a logo yet, create one using your favourite graphics drawing software or draw one on paper and scan it or take a digital photo of it. You will need a program that can produce either PNG, GIF or JPG files. If you don't already have a drawing or painting program, you can find a list of free ones on thefreecountry.com's Free Drawing and Painting Software page.

   When creating your logo, note the following:

   • Try to keep the width and height of the image small. There are no fixed size stipulations for a logo, but if your logo is too wide or tall, you will have a hard time fitting it into your web page. If the picture you have is too big, try resizing it in your graphics software.

   • If you really have no idea what to put in your logo, just create an image with the name of your site on it.

   A guide on how to make your own site logo can be found in the tutorial, How to Create a Logo for Your Site the Quick and Easy Way: Logo Making for the Graphically Challenged at http://www.thesitewizard.com/webdesign/make-site-logo-banner.shtml

2. Product images or other pictures (optional)

   If you want to place other pictures on your web page, for example, photos of the product you're selling, or your own photo, you will also need to have them in either the PNG, GIF or JPG format. Don't worry if you don't have any picture or photo of this sort. This part is entirely optional.

Adding Images to Your Dreamweaver Page

1. Put a copy of your graphics files in the same directory as the file you created for your website in the first part of this tutorial.

2. Start up Dreamweaver.

3. In the right column, you should be able to see "index.html" in the list of files that belong to your project. Doubleclick it to open the file.

4. At the top of the page is the name of your website, which you entered in the first chapter. Place the text cursor to the left of the name. That is, click on the name, and move your cursor to the leftmost position using the left arrow key on your keyboard. You will be inserting your logo at this position.

5. Choose "Insert | Image" from the menu. If you recall from the previous chapter, "Insert | Image" means that you click the "Insert" menu, then click the "Image" item on the menu that appears. A dialog box will appear. You should see the image or images that you previously saved in the folder. If you have more than one images in the folder and are not sure which is the one you are going to use for your logo, you can click the name of the image once. A preview of the image will appear in the dialog box, making it easier for you to select the correct image.

6. Once you have decided on the image you want, select it by clicking on it once, and then clicking the "OK" button.

7. A dialog box will appear, asking you for the "Alternate text" for the image. This is basically a brief description of your image. The description will be displayed for visitors browsing with graphics disabled. It will also be the text that is read aloud by screen readers. The latter are used by visually impaired people visiting your website. Search engines also rely on the text, since they cannot "see" images either. It's wise to always give your graphics a brief description.

8. Since this image is merely your site's logo, you can either type into the "Alternate text" field your company's name or even just the word "logo" if you're lazy. Don't worry that the box is so small - it will scroll as you type.

9. Once you've typed your "Alternate text", click the OK button. Ignore the "Long description" field.

10. Your logo should now appear before your company name or your site name. If you find the logo is too big, and you want to redo it, simply click it once and hit the DEL key. Recreate your logo as needed, save it into the website folder and repeat the above procedure.

11. At this point, you will probably find that the logo is uncomfortably close to the name of your website. To introduce some space between the logo and your site name, click the logo once to select it. At the bottom of your Dreamweaver window, you should a panel labelled "Properties" containing information about your image (see picture below).

    

    Locate the "H Space" edit box and enter "5" (without the quotes). Press enter. Notice that some space has been inserted between your image and your website title. If you think 5 is too much or too little, you can experiment with other values in this box. Basically, a larger value means that more space is inserted, while a smaller value shrinks the amount of space between your picture and the surrounding material.

12. That's it. You've now added a logo for your web page, making it look slightly more professional.

13. (Optional Step) The same technique that you used here to add a logo and be used to add other images to your web page. For example, you can use this method to add pictures of your products in the main body of the web page.

    Let's say for example, that you are using the following text in the main part of your web page.

    Welcome

    Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, text books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples of examples.

    Featured Product

    Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com's tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website which you can modify and augment to suit your needs.

    (If the text seems familiar, it's because I used it as the sample text in the previous chapter.)

    If you wanted to insert a picture of a product so that it appears as a small thumbnail just beside the block of words "Dreamweaver Site: This..." (etc), place the cursor just before "Dreamweaver Site" (use to mouse to click that spot). Click "Insert | Image". Type the alternate text for your product when the Alternate Text dialog box appears. Click OK.

    

    Notice that the words do not exactly flow over to the right of the image. To make all the words appear to the right of the image, click the image. Locate the "Align" box in the Properties panel. It is currently set to "Default". Set it to "Left".

    

    The image should now be placed completely to the left of the text, with the words filling in the space on the right.

    If the image is too close to the words to your liking, adjust the "H Space" in the Properties panel as before. You can also adjust the "V Space" to change the vertical space between the image and the words. If you don't know what I mean, just experiment by setting some value like "5" (without the quotes) in the "V Space" box to see what happens. You can always delete the value again if you don't like the result.

14. Before you continue to the next section, save your page with "File | Save".

15. You should now upload (ie, publish) the updated web page to your web host. Since you have already set up everything in the previous chapter, all you have to do at this point is to click "Site | Put" from the menu. If Dreamweaver prompts you to save the site before "putting", do so. If you are asked whether you should put "dependant files", click "Yes" to allow Dreamweaver to publish your images and CSS files as well.

16. Finally, check your website using your browser. Congratulations. Your website now looks more professional with the addition of a logo and some images for your products or yourself.

Next Chapter: Changing Fonts, Changing Colours and Creating Links

In the next chapter of this Dreamweaver tutorial, you will learn how to change fonts, create links and change the colours on your web page.

Copyright © 2007 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

If you find this article useful, please consider making a donation.

Dreamweaver Tutorial: How to Create a Website with Dreamweaver CS3 (Part 1)

by Christopher Heng, thesitewizard.com

Adobe Dreamweaver Creative Suite 3 (CS3), formerly known as Macromedia Dreamweaver, is a fully-featured commercial web editor that allows you to create, build and manage complex websites. The editor is a What-You-See-Is-What-You-Get (WYSIWYG) web editor, which means that you can design your web page visually and whatever you see on the screen is what your visitors will see when they visit your website. Dreamweaver generates standards-compliant code for your website which means your website will not become "broken" every time a new version of a web browser is released. For the technically inclined, the HTML and CSS code that it creates for your website will validate correctly.

This tutorial guides you through the steps of creating your first website using Dreamweaver.

What You Will Need

1. Dreamweaver CS3

   You will need Dreamweaver CS3 (obviously). The tutorial assumes that you are using Dreamweaver CS3. There are versions of Dreamweaver for both Windows and Mac OS X - either version will do fine. For the most part, both versions work in the same way.

   Note: if you are using Dreamweaver CS4, please see my other tutorial series How to Create a Website with Dreamweaver CS4instead. The latter was written specifically for the later version of Dreamweaver, and takes advantage of some of its newer features.

2. A Web Hosting Account

   You will need a web host to publish your pages to. For the complete beginner, a web host is (loosely speaking) a company which has computers that are permanently connected to the Internet. After you design your web page(s), you will need to transfer your pages to your web host's computer (called a web server), so that the rest of the world can see it. There are numerous web hosts around - you can find a list of cheap web hosts on http://www.thefreecountry.com/webhosting/budget1.shtml

There are other things involved in getting your first web site up and running, such as getting your own domain name, making your website search engine friendly and promoting your web site. This tutorial however does not deal with those matters - it is strictly about designing (creating) and publishing (uploading) your website using Dreamweaver. If you are a total beginner, you may want to consult my article The Beginner's A-Z Guide to Starting/Creating Your Own Website for an overview of the entire process and all the things you will need.

Overall Goals of the Dreamweaver Tutorial

By the end of this tutorial, you will have set up a working website with multiple pages, including a main page, a feedback form, an About Us page, and a Site Map. Your pages will contain a sophisticated navigation menu bar, images, multiple columns, a form, links to other pages within your site, links to other sites, text in different font sizes, etc. In other words, you will have a fully functional website.

More importantly, you will know how to use Dreamweaver to create, design and publish your site so that you can design new sites any time you want.

Goal of this Chapter

In this chapter, you will learn to create a rudimentary two-column web page (like this web page that you are currently reading) and publish it so that it can be accessed on the Internet. By the end of this chapter, you will be viewing your web page on the Internet with your favourite web browser.

Note that this is a hands-on tutorial. To benefit from it, in fact, to even understand it, you need to follow the steps as I describe them. The practical nature of this guide makes it difficult to follow or understand if you're not doing the things mentioned.

Setting Up Your Website in Dreamweaver

Start up Dreamweaver.

You will be greeted with a window with a top-half looks something like the picture above (without the words "Dreamweaver Tutorial thesitewizard.com" of course). Your picture may be slightly different depending on whether you are using Mac OS X, Windows XP or Windows Vista.

If you look at the top part of the window, you will see a menu bar that reads "File Edit View Insert Modify Text Commands Site Window Help". We will be accessing a lot of Dreamweaver's features via this menu bar.

The first thing you will need to do is to define your site in Dreamweaver's Site Manager. Click the "Site" menu item on the menu bar. A drop-down menu will appear. Click the "New Site..." item in the menu bar.

Important note: in the interest of brevity, in the future, I shall refer to the sequence of clicking the "Site" menu, followed by clicking on the "New Site..." item simply as "Site | New Site..."

A dialog box box will appear with words to the effect "Site Definition for Unnamed Site 1". The number that follows the word "Site" may be different if you have ever used Dreamweaver to set up a site before. Don't worry about that. We are about to change it anyway.

At the top of the dialog box is the "Basic" tab. If it is not currently selected, click on it to select it. If you're not sure, just click on it.

In the edit box for "What would you like to name your site?", type in the name you wish to give to your site. If you are not sure what name you want for your site, use your domain name. For example, if you have purchased a domain called "example.com", put "example.com" (without the quotes) into the box. For the purpose of this tutorial, I will assume that you have typed "Example Company" in the box.

Once you have done the above, enter the web address of your site in the box following the question "What is the HTTP Address (URL) of your site?". For example, if you bought the domain "example.com", your website address will be "http://www.example.com/" (without the quotes), unless your web host tells you otherwise.

Click the "Next" button at the bottom of the window to proceed to the next screen.

Accept the default "No, I do not want to use a server technology" for now. Click the "Next" button again.

The next screen allows you to define where Dreamweaver saves the files you create. The default is to place the files in a folder with the same name as your website. You can change the location if you wish. Note that this folder merely determines where on your computer the website files are saved. You will be taught how to publish those files to your web host in a later step. It is always good practice to keep a copy of your website on your own computer. If you don't know what to do here, just accept the default.

When you click "Next", you will be asked "How do you connect to your remote server?". For now, select "None" in the drop-down box and click "Next" again. You will then be given a "Site Definition" summary. Click "Done".

Creating a Simple Two-Column Web Page with Header and Footer

You will now create the main page of your website. For the purpose of this tutorial, we will be creating a two-column web page for the main page. A two-column web page basically means that the page will have two vertical columns. Websites typically use one of the columns to hold the website's logo and navigation buttons and the other column to hold the main content. For example, on thesitewizard.com's article pages, such as the one you are reading now, the left column holds the navigation menu while the right column holds the article text.

Click "File | New". That is, click the "File" menu followed by the "New" item on the menu that appears. A new window entitled "New Document" will appear.

Look in the "Layout" column in the window that appears and locate the item "2 column liquid, left sidebar, header and footer". Select the item by clicking on it once.

Look at the rightmost side of the same window and locate the item "Layout CSS". Click the drop-down box and select "Create New File". This will cause Dreamweaver to save certain types of information about the appearance of the web page (called CSS) in a separate file. One of the ways in which this is useful is that when we design other pages of the site, we can reuse the same information by simply loading it from the same file.

Click the "Create" button.

A dialog box entitled "Save Style Sheet As" appears. Accept the default name and location by simply clicking the "Save" button.

Dreamweaver now presents you with a page with two columns with some dummy content typed in. We will be replacing some of the dummy content with our own content.

Designing the Home Page: Preamble

The page you are about to design will serve as the website's "Home Page", which means that it is the main page of your website. It is the page that visitors will see if they type your website's address without specifying any page name. For example, if your domain is called "example.com", and your visitor types "http://www.example.com", they will see this page.

A home page typically contains brief information about what the site is about as well as links to the other pages of your website. If this is the home page of your personal site, you will probably want to welcome your visitors and mention briefly what they can hope to see on your site. If this is the home page of a company site, it will typically mention briefly what the company sells, it's main products and point the visitors to individual product pages or other pages on your site.

For the purpose of this tutorial, I will supply example text for a fictitious company called "Example Company", selling some fictitious products. You should of course use your own text rather than my supplied text. For example, if your company is called XYZ Inc, go ahead and use "XYZ Inc" in places where I use "Example Company". Likewise if you are creating a personal website, and you are out of ideas as to what to call your site, call it by your name. For example, if your name is Shakespeare, call it Shakespeare's Website.

Steps to Designing Your Dreamweaver Site

1. Take a look at the page that is displayed. You will see that there is a band spanning the entire top row of the page. The words in that band currently read "Header". Below that there are two columns: a narrow left column, called the sidebar, and a wider right column with the heading "Main Content". All the text that is given in the window can be replaced by your own content.

   To replace the content, simply click on the word you wish to replace, delete it and type your own. The first thing you should do is to replace the word "Header" with the name of your website. To do this, click somewhere in the word "Header". A blinking text cursor will appear. Using the delete or backspace key as needed, delete "Header". Type the name of your website. If you don't know what to type, type in your name or your company's name. For the example site that I create here, I will replace "Header" with the words "Example Company".

2. Directly above where you typed to replace the "Header" text is a small edit box with the words "Untitled Document". Click the word "Untitled". Use the delete or backspace key to remove the existing text and replace it with the name of the site you typed earlier. This will be the text that the search engines show for this web page when it displays the results of a search. Again, for this tutorial's example site, I will simply replace it with the word "Example Company".

   

3. You should now replace all the text in the right column with your own text. Simply click on the "Main Content" title and replace it with some appropriate content. You can take a look at the text that I will be using below as an example. When you've finished with that, click on the "Lorem ipsum dolor sit amet" (etc) words, delete them and replace them with your message. Typing and editing of text within the page works more or less like it does under a wordprocessor. If you need to create new paragraphs, simply hit the Enter key (Windows) or the Return key (Mac OS X).

   Repeat the process with the "H2 level heading" subtitle and the words that follow. Just replace it with whatever you want your website to display. If you want, you can replace the words with the example text below. However, it's best to write something that is relevant to your site so that you don't need to go back and re-edit it later.

   Welcome

   Example Company deals with all manner of examples. We have examples of literary works, pulp fiction, text books, movie reviews, scripts, chairs, tables, household appliances, and so on. We even have examples of examples.

   Featured Product

   Dreamweaver Site: This is an example of a Dreamweaver site, created with the help of thesitewizard.com's tutorial on Dreamweaver. The tutorial teaches you how to create a basic but fully-functional website which you can modify and augment to suit your needs.

4. Leave the left column (sidebar) alone for now. We will add a navigation menu to this section in later chapters of this tutorial.

5. Scroll down to the bottom of the page and replace the word "Footer" with anything you wish to put at the bottom of the page. For example, you can place your copyright notice in place of this word. If you need to insert the copyright symbol, "©", click "Insert | HTML | Special Characters | Copyright" from the menu.

6. Once you are satisfied with your page, click "File | Save As...". A dialog box will appear asking you where to save the page. Type "index.html" (without the quotes) into the "File name" edit box, and click the "Save" button.

   Be sure to type the name "index.html" exactly as I gave it - that is, entirely in small letters (lowercase), with no spaces in the word. "index.html" is a special name in that it is regarded as the default file name for most web servers. When you publish that page to your website at (say) http://www.example.com/, the index.html page is the one that will be displayed when a visitor types "http://www.example.com/" without any filename. It is thus very important that you do not change the name of the file to something else.

Uploading or Publishing Your First Web Page with Dreamweaver: Preamble

Before we proceed to polish the page so that it looks at least half-way decent, we need to publish the page to your web host. One reason we're going to do this now, even before we've finished the page, is that Dreamweaver needs the information about your actual website's address (or URL) before it can correctly handle things like links and images on your web page. Even though you entered it earlier when you set up your site, it only integrates such information into its system when you publish your page. So even though the page is probably an embarrassment to you at this stage, please complete the following steps, or you will encounter problems later.

Don't worry about the page being so plain. If you've not advertised your website's address (URL) to anyone, no one will even know your site exists, so this preliminary version of your page will be seen by no one but you. People will not visit your site out of the blue just because you happened to sign up for a web hosting account today. It's not that easy to get visitors.

Another reason that you're publishing your page at this time is so that you can get familiar with both the major stages in the design of a web page. Once you get this hurdle out of the way, and you know how to get your web page from your computer into your web host's computer, you have mastered what is arguably the biggest technical challenge a newcomer is likely to face. Don't let this scare you though - it's actually quite easy!

Steps to Publishing / Uploading Your Dreamweaver Site

1. To publish your website, start up the Site Manager again. To do this, click "Site | Manage Sites...", that is, click on the "Site" menu followed by the "Manage Sites..." item on the menu that appears. In the dialog box that appears, click on your website's name, then the "Edit..." button.

2. The dialog box you encountered when you first set up your website appears. Click "Next..." until you come to the screen with the message "How do you want to connect to your remote server?" In the first part of the tutorial, we selected "None". We will now change it to the actual values we need for uploading (publishing) your web page. In the drop down box, select "FTP".

3. Basically you will need to enter the information that your web host provided you when you first signed up for a web hosting account. Web hosts typically provide you with a whole bunch of details about your account when you first sign up. Among these is something known as your "FTP address". FTP, or File Transfer Protocol, is the usual means by which you transfer your web pages from your own computer to your web host's computer. Transferring your pages from your computer to your web host's computer is known as "publishing" or "uploading" your pages.

   In the empty box for "What is the hostname or FTP address of your Web server?" enter the FTP address that your web host gave you. If you have your own domain and are hosted on a commercial web host, this address is typically your domain name prefixed by "ftp". For example, if your domain is "example.com", many web hosts set up your FTP address as "ftp.example.com". Check the email you received from your web host for more details, or ask them if you cannot find the details. If the address is indeed "ftp.example.com", enter that in the box here.

4. To answer "What folder on the server do you want to store your files in?", check the message from your web host again. Some web hosts tell you that you need to place your web pages in a folder called "www". Others require you to place them in a "public_html" directory. Still others say that you are to place your files in the default directory that you see when you connect by FTP.

   If your web host tells you to simply upload the files when you connect via FTP, leave the box blank. Otherwise if they tell you that you need to publish your files in a "www" directory or some other folder name, enter that folder name in the box given. If the host does not mention this at all, chances are that you can simply leave the box blank.

5. Enter your FTP user name or login name into the box for "What is your FTP login?". Again, this information has to be supplied by your web host.

6. Enter your password in the box for "What is your FTP password?". Get your password from your web host if you don't already know it. If you don't want to have to keep entering your password every time you publish your page, you can leave the "Save" checkbox activated. Otherwise, if you are sharing your computer with others and don't want Dreamweaver to save your password, you can uncheck the box.

7. If you like, you can click the "Test Connection" button to check that you have entered all the information correctly. When you are finished, click "Next..." and "Done" to complete the configuration.

8. Finally, to publish your website, click "Site | Put". When Dreamweaver pops out a message asking you whether it should "Put dependent files?" answer "Yes". This merely means that it is to upload things like your images and CSS files that are required by your web pages. If you don't want to answer this question every time you publish an updated version of your website, check the box "Don't show me this message again".

Testing the Web Page

Before you proceed further, you need to test the version of the web page you have uploaded. This way, you will know whether you've made any mistake when entering your details earlier.

Start up your browser. Type the URL (web address) of your website. This is the address that you typed into the "HTTP address" field earlier. For example, type "http://www.example.com" if that is your URL.

If you have entered the FTP details correctly, you should see the page you created earlier in your web browser.

If you get an error like "No DNS for www.example.com" or "Domain not found", it probably means that your domain name has not yet propagated to your ISP. Put simply, this means that you probably only just bought your domain name. It takes time for a new domain name to be recognized around the world (usually 2 or more days), so it's possible that your ISP has not yet updated its name servers to recognize your new domain. Some web hosts give you a temporary address which you can use to access your website in meantime. If you have that, use the temporary address to check that your site has been uploaded properly. Otherwise, you'll just have to wait.

If you get an error like "404 File Not Found" or you get your web host's preinstalled default page, you may need to go back and check that you have entered the correct folder in answer to the question "What folder on the server do you want to store your files in?". It is possible that you did not specify the correct directory on your website to publish your web page.

To fix the error, simply click "Site | Manage Sites..." and "Edit" and click the "Next..." button till you get to the appropriate screen to modify.

If you get no errors at all, but see the page that you've designed earlier, congratulations! You've created and uploaded your first web page. It may be a rudimentary page but you have successfully walked through all the essential stages of designing and uploading a web page.

Next Chapter: How to Add Pictures to Your Website

In the next chapter of the Dreamweaver tutorial, you will learn how to improve this basic page by adding pictures. You will also be adding a logo to your website.

Copyright © 2007 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

If you find this article useful, please consider making a donation

How to Design and Publish Your Website with KompoZer

by Christopher Heng, thesitewizard.com

KompoZer is a WYSIWYG (What You See Is What You Get) web editor based on Nvu, another free WYSIWYG web editor. At this time, it is essentially Nvu with the known bugs in that editor fixed. KompoZer runs on Windows, Macintosh and Linux.

This article guides you through the steps of creating your first web site using KompoZer.

What You Will Need

You will need the following for this tutorial.

1. You will need to have KompoZer. You can obtain it free of charge from http://www.kompozer.net/download.php. There are versions of KompoZer for Windows, Macintosh and Linux. Select the appropriate one for your system.

2. You will need a web host to publish your pages to. For the complete beginner, a web host is (loosely speaking) a company which has computers that are permanently connected to the Internet. After you design your web page(s), you will need to transfer your pages to your web host's computer (called a web server), so that the rest of the world can see it. There are numerous web hosts around - you can find a list of cheap web hosts on http://www.thefreecountry.com/webhosting/budget1.shtml

There are other things involved in getting your first web site up and running, such as getting your own domain name, creating a search engine friendly website and promoting your web site. This tutorial however does not deal with those issues - it is strictly about designing (creating) and publishing your website using KompoZer. For those who are total beginners, it may be useful to read The Beginner's A-Z Guide to Starting/Creating Your Own Website for an overview of the entire process of website creation and maintenance.

Overall Goals of this Tutorial

By the end of this tutorial series, you will have created a fully functional website with multiple pages, including a main page, a working feedback form, a Reciprocal Links page, an About Us page, and a Site Map. Your website will contain images, multiple columns, a form, links to other pages within your site, links to other sites, text in different font sizes, and so on.

More importantly, you will know how to use KompoZer to create, design and publish your site so that you can design new sites any time you want.

Goal of this Chapter

In this chapter, you will learn to create a rudimentary web page and publish it so that it can be accessed on the Internet. By the end of this chapter, you will be viewing your web page on the Internet with your favourite web browser.

Note that this is a hands-on tutorial. To benefit from it, in fact, to even understand it, you need to follow the steps as I describe them. The practical nature of this guide makes it difficult to follow or understand if you're not doing the things mentioned.

Installing KompoZer

To install KompoZer, first download the correct file for your system.

If you use Windows, and don't know what to do with the zip file after you have downloaded it, do the following.

Create a new folder somewhere on your computer. Call it "kompozer" (without the quotes). Double-click the zip file you downloaded. A window will open. Drag the files in that window to the folder that you have created earlier. Then go to that new folder, and click the right mouse button on the file kompozer.exe. Click the "Send To" menu item in the menu that pops up. Next, click the "Desktop (create shortcut)" menu item. A shortcut to KompoZer will be placed on your desktop. To run KompoZer, all you have to do is to double-click this shortcut.

Note: if you are using a version of Windows earlier than XP or Vista, you may need to install one of the free archivers from the Free File Archivers and File Compression Utilities page before you can double-click the zip file to open it.

Creating A Simple First Web Page

To give you an idea how simple it is to create a web page, first start up KompoZer.

You will be greeted with a window that contains a menu (the top line of the window that says "File Edit View Insert..." etc), a few lines of toolbars (containing buttons like "New", "Open", etc), a left panel with a heading "Site Manager", and a large pane on the right-hand side that has a tab called "Untitled". This large pane is where you will design your web page.

Type the following into the KompoZer. You don't have to do anything special - just start typing. Note that you can type whatever you wish - I'm just furnishing you a block of text as an example. For ease of explanation, though, I will assume that you have typed the text here in the rest of the tutorial. Don't let that stop you from being creative, though.

Shakespeare's Website

Tomorrow, and tomorrow, and tomorrow, creeps in this petty pace from day to day, to the last syllable of recorded time; and all our yesterdays have lighted fools the way to dusty death. Out, out, brief candle! Life's but a walking shadow; a poor player, that struts and frets his hour upon the stage and then is heard no more. It is a tale told by an idiot, full of sound and fury, signifying nothing.

When you type, you are typing into KompoZer's "Normal" mode. You can see which mode you are using by glancing at the series of tabs at the bottom of the KompoZer window.

To see how your page appears in an actual web browser, click the "Preview" tab to enter KompoZer's "Preview" mode. Return to the "Normal" mode before continuing. I shall assume that you are using the "Normal" mode in this tutorial unless otherwise specified. The "Normal" mode is KompoZer's WYSIWYG editor mode. When you type text in this mode, KompoZer converts it into a HTML web document behind the scenes so that web browsers can recognize it as a web page. If you want to look at the HTML code that is generated from what you just typed, click the "HTML Source" tab at the bottom of KompoZer. Remember to return to the "Normal" mode when you've finished admiring the code.

Now save the page onto your hard disk. Do this by clicking on the "File" menu, then the "Save" item on the menu that appears. A dialog box should appear asking you for the Page Title.

Note: For convenience, in future, I shall refer to this sequence of clicking on the "File" menu, followed by the "Save" item simply as:

File | Save

This means that you are to click on the "File" menu, followed by the "Save" item on the menu that appears. There are shortcuts to saving a file in KompoZer, as there are for the many commands given in this tutorial. I shall, however, leave the discovery of minor things like that to you and concentrate on the main task of creating a web page.

As mentioned earlier, when you use "File | Save", a dialog box will pop up, asking you to give a title to your page. Since this is the main page of your website, you should enter the name of your website here. For example, if you are publishing a personal web page, you might want to name your website "Shakespeare's Website" (without the quotes) if your name happens to be Shakespeare. If you are publishing a company web page, the site name should be your company's name, such as "ABCDEF Company" or the like.

Once you've finished with the title, click the OK button or simply hit the Enter key (or Return key on the Mac).

A new dialog box will appear, prompting you for a filename. Navigate to a directory (ie, folder) on your computer where you want to save your page. Type "index.html" (without the quotes) into the file name part of the dialog box. Do not accept the default name given in the dialog box. Do not use another name. Do not use capital letters in the name (ie, uppercase). Most web hosts expect the main page of your website to be called "index.html". Their computers are configured in such a way so that if you simply type your domain name, like http://www.example.com/, the index.html file will be displayed. If you change the name to some other name, this will not work as expected.

After you've saved the file, you will be returned to KompoZer's main window. Look at the top of the window at the window's title bar. Notice that instead of the words "untitled", the title that you typed in earlier now appears there.

Uploading or Publishing Your First Web Page

Before we proceed to polish the page so that it looks at least half-way decent, we need to publish the page to your web host. One reason we're going to do this now, even before we've finished the page, is that KompoZer needs the information about your actual website's address (or URL) before it can correctly handle things like links and images on your web page. So even though the page is probably an embarrassment to you at this stage, please complete the following steps, or you will encounter problems later.

Don't worry about the page being so plain. If you've not advertised your website's address (URL) to anyone, no one will even know your site exists, so this preliminary version of your page will be seen by no one but you. People will not visit your site out of the blue just because you happened to sign up for a web hosting account today. It's not that easy to get visitors.

Another reason that you're publishing your page at this time is so that you can get familiar with the major stages in the design of a web page. Once you get this hurdle out of the way, and you know how to get your web page from your computer into your web host's computer, you have mastered what is arguably the biggest technical challenge a newcomer is likely to face. Don't let this scare you though - it's actually quite easy!

To publish the page, go to "File | Publish" (ie, the "Publish" item on the "File" menu). A "Publish Page" dialog box will appear asking you for more details.

• "Site Name" is the name that you want to give your website. Use the name that you gave to your website when asked for the title earlier (ie, "Shakespeare's Website" or "XYZ Company" or whatever). This name is only used by KompoZer internally, to refer to your site, but it's probably best to use the real name you ultimately wish to give to your site to minimize any confusion later.

• The "HTTP address of your homepage" field specifies the actual web address (or URL) of your website. If you registered a domain name like "example.com" for your site, enter "http://www.example.com/" into this box. This field is required because KompoZer will use this information to form links on your site. Be sure to enter the "http://" prefix as well.

• "Publishing server" is a bit more complicated to explain. When you signed up for your web hosting account from a commercial web host, you would have been given a whole bunch of details by your web host. Among these is something known as your "FTP address". FTP, or File Transfer Protocol, is the usual means by which you transfer your web pages from your own computer to your web host's computer. Transferring your pages from your computer to your web host's computer is known as "publishing" or "uploading" your pages.

  For the purpose of this tutorial, I will assume that your web host told you that your FTP address is "ftp.example.com". You should substitute your real FTP address everytime you see "ftp.example.com" in the examples below.

  Before you enter that address though, you will need to know which directory (or folder) you need to put your web pages. Some web hosts require you to put your web pages in a directory named "www". Others require you to put it in a "public_html" directory. Still others say that you are to put your web pages into the default directory that you see when you connect by FTP. And so on. Find out the directory where you're supposed to upload your web pages to.

  Once you've got all the details, you're ready to form the address you have to enter into the "Publishing address" field.

  If your FTP address is "ftp.example.com", and the directory that you're supposed to upload to is "www", enter "ftp://ftp.example.com/www" here. Notice that you have prefixed "ftp://" to your FTP address ("ftp.example.com"), added a slash ("/") and followed it with your web directory name ("www"). If your web host tells you to simply upload it to the directory you are logged into when you connect by FTP, then just enter "ftp://ftp.example.com" here.

• The "User name" and "Password" fields in the dialog box refers to user name (or login name) and password that your web host assigned to you. It is needed so that KompoZer can connect to your FTP account and upload (publish) your pages.

When you've finished completing the information, click the "Publish" button. KompoZer will proceed to connect to your FTP account on your web host and upload your pages. There will be a dialog box that pops up to tell you it is uploading your page. The box will automatically disappear when KompoZer has completed its task.

If you get an error message from KompoZer, look through the guide above again and recheck all your settings. Most of the problems at this stage are caused by one of the settings not being correctly entered. If you have eliminated all possible errors in your settings and still get an "Unknown publishing error", check my FAQ on this.

Testing the Web Page

Before you proceed further, you need to test the web page you have uploaded. This way, you will know whether you've made any mistake when entering your details earlier.

Start up your browser. Type the URL (web address) of your website. This is the address that you typed into the "HTTP address" field earlier. For example, type "http://www.example.com" if that is your URL.

If you've entered the "publishing server" earlier correctly, you should see the page you created earlier in your web browser.

If you get an error like "No DNS for www.example.com" or "Domain not found", it probably means that your domain name has not yet propagated to your ISP. Put simply, this means that you probably only just bought your domain name. It takes time for a new domain name to be recognized across the world (usually 2 or more days), so it's possible that your ISP has not yet updated its name servers to recognize your new domain. Some web hosts give you a temporary address which you can use to access your website in meantime. If you have that, use the temporary address to check that your site has been uploaded properly. Otherwise, you'll just have to wait.

If you get an error like "404 File Not Found" or you get your web host's preinstalled default page, you may need to go back and check your "publishing server" field. You may have published your page to a location that is not recognized by the web server as the default page to show when only your domain name is entered.

You can change the settings that you have just entered by accessing the "Edit | Publishing Site Settings" menu. Then click the name of your website in the left pane, under "Publishing sites". One possibility for the page not showing is that you did not specify the correct directory on your web site to publish your index.html page to. A more remote possibility is that your web host requires that your page be named something other than "index.html". This is very rare nowadays, so explore this last possibility only when you've ruled out all others. At worse, ask your web host's support department or check their documentation for help.

If you get no errors at all, but see the page that you've designed earlier, congratulations! You've created and uploaded your first web page. It may be a rudimentary page but you have successfully walked through all the essential stages of designing and uploading a web page.

Next Chapter: Polishing Your Web Page

In the next chapter, you'll learn how you can improve that rudimentary web page by adding pictures, making font changes, etc.

Next: KompoZer Tutorial Chapter 2: Adding Images, Changing Fonts, Changing Colours, Creating a Navigation Bar, Writing Your Content.

Copyright 2003-2007 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

If you find this article useful, please consider making a donation.

How to Upload a File to your Website using the FileZilla FTP Client

by Christopher Heng, thesitewizard.com

The process of transferring a file from your computer to your website is often referred to as "uploading" that file or "publishing" it. For web hosts that support FTP, or the File Transfer Protocol, you need a program called an "FTP client" to transfer the file. You can find a list of free FTP clients at http://www.thefreecountry.com/webmaster/freeftpclients.shtml

This tutorial only deals with how you can transfer a file to your web server using a free FTP client known as FileZilla. Versions for Windows, Linux and Mac OS X are available. I will describe the Windows version of this program, but if you use another operating system, chances are that it will work very similarly.

Download and Install FileZilla

First, go to the FileZilla download page and obtain the appropriate version for your system. For Windows, get the Setup version; at the time I wrote this, it's the one labelled "(recommended)" under the Windows section.

Once you have downloaded the program, you will have to install it. Go to your desktop and doubleclick the file that you have just downloaded. Follow the instructions to install it to your hard disk.

Preliminary Steps

Before you can upload any file to your site, you will also need some information from your web host. In particular, you will need to find out the following:

• The name of the FTP server for your website. For example, your host may tell you that your FTP hostname is "ftp.example.com".
• Your user id or login username for your FTP account.
• Your password for your FTP account.
• The directory where you need to place your files so that they can be seen by a web browser visiting your site. For example, your host may tell you to place the files in a subdirectory called "www" or "public_html" or even the default directory that you see when you log into your FTP site.

If your web host tells you that you do not have FTP access, you cannot use this tutorial. You will have to use whatever method the web host has designated for you to upload your files.

Steps to Uploading or Publishing a File to Your Web Server

For the purpose of this tutorial, I will assume that you wish to upload a file called "feedback.php". Everytime you see "feedback.php" mentioned, you can substitute that name with the name of the file you actually wish to upload. FileZilla does not restrict you to uploading only files of that name. You can upload images (eg, GIF, JPG, PNG, etc), HTML files, video clips, music files (eg MP3 files, WAV files, MIDI files), Perl scripts, PHP scripts, and so on. For the curious: I use "feedback.php" as the example file because this guide was originally written to help those who use my free Feedback Form Wizard to upload the generated form to their website.

1. Click the "File" menu followed by the "Site Manager" item on that menu. A dialog box will appear.

2. Click the "New Site" button on that dialog box. This creates a new item under "My FTP Sites" called "New FTP site". Rename "New FTP site" to the name of your site if you wish. By default, the keyboard cursor would have been placed in the name portion of "New FTP site" allowing you to change the name immediately. If you have lost the cursor because you accidentally clicked somewhere else in the dialog box, you can get it back by simply clicking once on the name. Note that this name can be anything you wish - it is not required for accessing your site. However, you will probably make your life easier if you change the name to that of your site rather than the cryptic "New FTP site".

3. Under the tab "General", enter the name of your FTP server in the "Host" input box. For example, if your web host told you that your FTP hostname is "ftp.example.com", enter "ftp.example.com" into the space provided.

4. Leave the "Port" and the "Servertype" entry boxes alone. Use your mouse and select "Normal" from the drop down list box for "Logontype". This will enable the "User" and "Password" boxes for the next step.

5. Enter your user id or your login name (or whatever your web host calls it) into the "User" input box. Likewise, enter your password into the "Password" input box. Note that this information is automatically saved onto your computer and will be re-used the next time you run FileZilla, so you do not have to re-enter them again. (It also means that you should not use FileZilla in this way on computers that others may have access to, such as those found in an Internet cafe or a public library.)

6. Click the "Connect" button. FileZilla will proceed to log you into your server. If it is successful, you will see a directory listing of your website's account in the right hand side of the FileZilla window. The left hand side of the FileZilla window shows the directories and files on your own computer.

7. If your web host told you to only upload in a specific subdirectory on the web server, such as in the "www" or "public_html" directory, change to that directory by doubleclicking its name in the folder portion of the right window pane (the "Remote Site" window pane). FileZilla will open that folder and show you its contents in the files portion of the Remote Site window pane.

8. Next, locate the file that you wish to upload in the left window pane (the "Local Site" pane). Both window panes behave mostly like a Windows Explorer windows, so navigating them should not be unduly hard. Once you have located the file you wish to upload, say "feedback.php", doubleclick it to upload it to your website. Alternatively, you can drag that file from the left window pane to the right window pane. The file will be uploaded to the folder that is currently open on the right window pane, so make sure you have changed to the directory you want before dragging the file there.

9. As FileZilla proceeds to upload your file to your site, you should be able to see the upload progress in the bottommost window pane in FileZilla. When the upload has completed, you can disconnect from your website. Do this by clicking the "Server" menu followed by the "Disconnect" item.

Congratulations! You have successfully uploaded a file to your website using an FTP client, FileZilla.

Copyright 2005-2008 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/

If you find this article useful, please consider making a donation.

How to Start / Create Your Own Website: The Beginner's A-Z Guide

by Christopher Heng, thesitewizard.com

Although thesitewizard.com contains guides for a wide variety of issues faced by a webmaster, new or old, none of them provide a step by step A-Z guide for getting started with your website. As a result, I'm often asked by people who are absolute newcomers where they should start. Having an encyclopaedia in your hands is not much use if you don't know which articles you should read first, and which next. This tutorial attempts to fill in the gaps by providing you an overview of the web creation process from the beginning, linking to selected relevant articles on thesitewizard.com that you will need to read.

The Essential Step-by-Step Guide to Starting Your Own Website

1. Get Your Domain Name

   The first thing you need to do before anything else is to get yourself a domain name. A domain name is the name you want to give to your website. For example, the domain name of the website you're reading is "thesitewizard.com". To get a domain name, you have to pay an annual fee to a registrar for the right to use that name. Getting a name does not get you a website or anything like that. It's just a name. It's sort of like registering a business name in the brick-and-mortar world; having that business name does not mean that you also have the shop premises to go with the name.

   • Detailed information on getting a good domain name can be found in the article Tips on Choosing a Good Domain Name.

   • After you read that, you will need to know the steps to registering a domain name and the things you need to look out for when registering. You can find a detailed guide in the article How to Register Your Own Domain Name.

   • It may also be wise to take a look at some of the Important Precautions to Take When Buying a Domain Name, just so that you don't commit the same mistakes that some newcomers make when buying a domain name.

2. Choose a Web Host and Sign Up for an Account

   A web host is basically a company that has many computers connected to the Internet. When you place your web pages on their computers, everyone in the world will be able to connect to it and view them. You will need to sign up for an account with a web host so that your website has a home. If getting a domain name is analogous to getting a business name in the brick-and-mortar world, getting a web hosting account is analogous to renting office premises for your business.

   • There are many issues involved in finding a good web host. Read up on the various things you need to look for in searching for a good web host in the article How to Choose a Web Host.

   • After you have an idea of what to look for, you can search for one from the Budget Web Hosting page. You can also find out which web host I'm currently using from the Which Web Host Do You Recommend? page.

3. Designing your Web Pages

   Once you have your domain name and web host, your next step will be to design the web site itself. In this article, I will assume that you will be doing this yourself. If you are using a third party web designer to do it for you, you can probably skip this step.

   • Although there are many considerations in web design, as a beginner, your first step is to actually get something out onto the web. The fine-tuning can come after you've figured out how to get a basic web page onto your site. One way is to use a WYSIWYG ("What You See Is What You Get") web editor to do it. Such editors allow you to design your site visually, without having to muck around with the technical details. They work just like a normal wordprocessor.

     There are many commercial and free web editors around. For those who don't mind spending money on a good commercial web editor, one of the most highly-regarded WYSIWYG web editors is Dreamweaver. If you are planning to use this editor, thesitewizard.com has an online tutorial on How to Create a Website with Dreamweaver CS4 (Dreamweaver Tutorial). The tutorial takes you through all the steps of creating a fully-functional website with multiple pages and a feedback form, and provides you with the theoretical and practical foundation that will help you create and maintain your site.

     If you prefer to use free software, you can find a complete tutorial on using KompoZer, a free WYSIWYG web editor, in the article How to Design and Publish Your Website with KompoZer. Like my Dreamweaver tutorial, this one also guides you through the process of creating a website that has a home page, an about page, a site map, a links page and a feedback form. It also shows you some of the main features of the KompoZer software so that you can go on improving and updating your website on your own.

     There are many other web design software around. If you prefer not to use either of the above, you can find some others listed on thefreecountry.com's Free HTML Editors and WYSIWYG Web Editors page.

   • After you have followed my tutorial, and are on the way to designing your website, you might want to read the article Appearance, Usability and Search Engine Visibility in Web Design as well. The article takes a brief look at some of the real world issues that every web designer must deal with.

   • An integral part of web design is search engine readiness. Search engine promotion does not start after the web site is made. It starts at the web design stage. The article 6 Tips on How to Create a Search Engine Friendly Website is a must-read. My article on How to Improve Your Search Engine Ranking on Google is also important for the simple reason that Google is the most important search engine around, at least at the time this article was written.

   • There are many other issues regarding the design of web pages. The above will get you started. However, if you have the time after you get something out onto the web, you may want to read my other articles on Web Design and Website Promotion and Search Engine Ranking.

4. Testing Your Website

   Although I list this step separately, this should be done throughout your web design cycle. I list it separately to give it a little more prominence, since too few new webmasters actually perform this step adequately.

   You will need to test your web pages as you design them in the major browsers: Internet Explorer 7, Internet Explorer 6, the latest versions of Firefox, Opera and Safari. Since all these browsers are free anyway, it should not be any hardship to get them and install them. The trick however, is testing with two versions of Internet Explorer since the later version will overwrite the earlier. For that, please see the article How to Check Your Website with Multiple Browsers on a Single Machine (Cross-Browser Compatibility Checking). Although there are two possible ways given in the article, I suggest that you take use the emulator/virtual machine method to do this. (It's probably easier.) Read the article to find out more.

   One way to improve your chances that your website will work in future versions of the web browsers is to make sure your web pages' code validate as correct (that is, has no errors in its underlying code). You can read more about this in HTML and CSS Validation: Should You Validate Your Web Page? There are numerous free web page validators listed on the Free HTML Validators, Broken Link Checkers, Browser Compatibility Checkers page.

5. Collecting Credit Card Information, Making Money

   If you are selling products or services, you will need some way to collect credit card information. You should read up on How to Accept Credit Cards on Your Website.

   If you need advertisers for your website, you might want to read How to Make Money From Your Website and the follow-up article How to Increase Your Website Revenue from Affiliate Programs. A list of advertisers and affiliate programs can be found on Affiliate Programs: Free Sponsors and Advertisers. These companies are on the constant lookout for new web publishers to display their advertisements.

6. Getting Your Site Noticed

   When your site is ready, you will need to submit your site to the search engines, particularly Google. You can find the Google submission page by clicking on the "About Google" link on Google, and then locating the "Submit your content to Google" link on the page that appears. However, submitting your site to Google alone is, quite frankly, a pointless endeavour. If there are no other links to your site on the web, Google will be appear most reluctant to index your site and show results that include your pages. If there are many other links to your site, you don't even have to bother to submit it to Google - it will find your site by itself.

   This is where promoting your website is important. This involves many things, including the usual way people did things before the Internet: advertisements in the newspapers, word-of-mouth, etc. You might want to consider advertising on places like Yahoo! (which puts your ads on Yahoo!, AltaVista and CNN), Ask (which puts your ads on Ask, Excite, Match.com, Gifts.com, etc) or Google. As discussed in my article More Tips on Google Search Engine Results Placement, ads can be a quick way to get onto the first page of a search engine's results page.

   There are also Less Obvious Ways of Promoting Your Website, which you might want to consider.

Conclusion

Naturally the above guide is not exhaustive. It is a distillation of some of the basic steps to getting started with your site. If you want more information, you should read the other articles on thesitewizard.com. However, the above tutorial should get you started in putting your website onto the Internet.

Copyright 2006-2008 by Christopher Heng. All rights reserved.
Get more free tips and articles like this, on web design, promotion, revenue and scripting, from http://www.thesitewizard.com/.

If you find this article useful, please consider making a donation.