PROGRAMS

1. Start up Dreamweaver.
2. A window with a top half that looks something like the picture below (without the words "thesitewizard.com Dreamweaver CS4 Tutorial" of course) will appear. The actual appearance of the window will be slightly different depending on whether you are using Mac OS X, Windows XP or Windows Vista.
   Near the top of the window is a menu bar with the words "File Edit View Insert Modify Format Commands Site Window Help". This menu bar allows you to access many of Dreamweaver's features. We will be using this menu bar extensively in the course of the tutorial.
3. To create a website that you can manage using Dreamweaver, the first thing you should do is to invoke the Site Manager. To do this, click "Site" in the menu bar. When the drop-down menu appears, click the "New Site..." item on that menu.
   
   Important note: in the interest of brevity, I shall refer to such a sequence of clicking the "Site" menu, followed by clicking the "New Site..." item simply as "Site | New Site..."
4. A dialog box will appear with a title bar that reads "Site Definition for Unnamed Site 2". The actual 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. You are about to change it anyway.
   If you were to look at the top of the dialog box, you will see two tabs: the "Basic" and the "Advanced" tab. You should currently be using the "Basic" tab. If this is not true, click the "Basic" tab to select it. If you don't know which is currently selected, click the "Basic" tab to be sure.
   In the main part of the dialog box, you should be able to see a field just under "What would you like to name your site?" This is where you enter your website's name. If you're not sure what to call your website at this point, and you have already registered your own domain name, simply enter your domain name here. For example, if you have bought a domain called "example.com", enter "example.com" (without the quotation marks) into the box. If you're creating a company website, enter your company name instead. Don't worry too much about this field: it's merely for your own personal reference in case you create many websites and need to distinguish between them. The words typed here won't appear on your site.
   For the purpose of this tutorial, I will assume that you have typed "Example Company" into the box. However, there's no need for you to use this name just because you're following this tutorial. Use your site's real name.
   Underneath your site's name is a field for you to enter the web address of your website, following the question "What is the HTTP Address (URL) of your site?". If you have bought the domain "example.com", enter your website address as "http://www.example.com/" (without the quotes), unless your web host tells you otherwise.
   Once you've finished entering the above two fields, click the "Next" button at the bottom of the window.
5. In the next screen that appears, accept the default "No, I do not want to use a server technology" and click the "Next" button again.
6. The next window that appears lets you to control 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. You should always keep a copy of your website on your own computer. If you don't know what to do here, just accept the default and click "Next".
7. When the window with the question "How do you connect to your remote server?" appears, click the down arrow in the drop-down box and select "None". You will change this later when you publish your site, but for now, selecting "None" allows you to quickly get started with your site with minimum fuss. Click the "Next" button.
8. You will then be presented with a "Site Definition" summary. Click "Done".

How to Create a Two Column Web Page with Header and Footer in Dreamweaver CS4

Now that you have provided Dreamweaver with the basic information needed for it to manage your website, you will now create your first web page.
For the purpose of this tutorial, we will create a two-column web page. By 2 columns, I mean that the page will have two vertical columns. This is a popular layout among many websites because it is both space-efficient and familiar to users (and as a result of that, user-friendly). One of the columns is usually used to hold the site's logo and navigation menu while the other column the main content. For example, if you were to look at any of thesitewizard.com's article pages, like the one you're reading, you will see that the left column contains the navigation elements while the right column contains the article itself.

1. Click "File | New...". If you remember what I said earlier, this means to click the "File" menu, followed by the "New..." item on the menu that appears. A window with the title "New Document" will appear.
   
2. In the Layout column of the window, locate the line that says "2 column liquid, left sidebar, header and footer". Select that item by clicking it once.
3. Now glance at the rightmost side of the same window and look for the item "Layout CSS". It should be somewhere near the bottom of the window. Click the drop-down box and select "Create New File". This causes Dreamweaver to place information controlling the appearance of your web page (called "CSS") in a separate file. We want this because all the pages on your site will share the same basic layout, and having such information contained in a single file saves disk space, bandwidth and speeds up the loading of your web page if your visitors load multiple pages of your website.
4. When you've finished doing the above, click the "Create" button.
5. Dreamweaver will issue a dialog box with the title "Save Style Sheet File As". Accept the default name and location by clicking the "Save" button.
6. Once you've done that, Dreamweaver will proceed to create a 2 column web page with some dummy content typed in.
7. Dreamweaver CS4 displays a slightly different screen layout depending on how large your monitor resolution is. If your screen resolution is large, Dreamweaver may start up in what it calls the "Split" mode, that is, it may show the underlying "raw" code of your web page in the top half of the window (the "Code" portion), and the visually pleasing version (the "Design" portion) in the bottom half. If your screen is smaller, Dreamweaver will simply start up in "Design" mode, where only the visually pleasing version is displayed.
   To standardize the appearance of the Dreamweaver window, for the sake of this tutorial, please click "View | Design" from the menu if you're in the "Split" mode. If you're not sure which mode you're in, just click "View | Design" anyway; no harm will come from doing it. This switches the layout to "Design" mode, where only your web page, as it appears in a browser, is shown. Don't worry. If at any time, you feel nostalgic for the original "Split" layout, just use "View | Code and Design" from the menu to get it back. Note, however, that all the steps in this tutorial, as well as the screenshots, assume that you are in the "Design" mode, so if you don't switch, you might get confused later when the screen doesn't appear the way I describe it.

Introduction to the Home Page

Before you proceed to replacing the "lorem ipsum dolor sit amet" text currently used as filler material, it's important to understand the basic theory behind what you'll be doing.
This first page that you'll be designing will be your website's "Home" page. The home page is the main page of your site. It is the page your visitors see when they go to your site by simply typing your domain name in their browser. For example, if your domain name is "example.com", and your visitor types "http://www.example.com/" into their browser, they will end up on your home page.
Since the home page functions almost like the front door of your website (or as close to a front door as a website can have), it should contain some information about what your site is about, as well as links to important pages (or sections) of your website. Some webmasters also use this space to welcome their visitors and give a short description about what they can hope to see on the site. For example, a company website that sells products or services should have a home page that gives visitors an idea of its products and services, as well as point visitors to individual product description pages where they can find more information about the product and place an order. Even if your site is a personal website, you will still want your main page to give visitors an idea of what to expect on your site, and to link to other pages (or at least the main sections) on your site.
For this tutorial, I will supply example text for a fictitious company called "Example Company", selling fictitious products. I strongly recommend that you use your own text instead of slavishly copying my supplied dummy text. For example, if your company is called "XYZ Inc", go ahead and use "XYZ Inc" in places where I use "Example Company". Similarly, if you're making a personal website, and have named your website after you, such as "Shakespeare's Website", substitute that name in places where I use "Example Company". The same goes for the actual content.