PROGRAMS

1. Let's take a look at the default two column web page generated by Dreamweaver. There is a horizontal bar stretching across the top part of your page labelled "Header". This is where you will place the visible name of your website. Under the header are two columns. The narrow left column, called the "sidebar" in Dreamweaver, is where you will eventually place your navigation menu. The wide right column, currently entitled "Main Content" is where you will place the bulk of your web page's content.
2. Directly above "Header", in the part of the window that belongs to Dreamweaver rather than your web page, you should be able to see a section that says "Title:" followed by a field that currently contains "Untitled Document". This field is the text that the search engines will show as being the title of your web page when it displays the results of a search. It is also the text shown by a web browser in the title bar of the browser window when it displays your page.
   Click somewhere in the word "Untitled", and use the delete or backspace key to remove the existing text. In its place, type the name of your website. For example, if your site is called "Example Company", replace "Untitled Document" with "Example Company".
   Note that this title field is an internal field. The web browser does not display it in the body (visible portion) of your web page. As mentioned above, the field is only shown in the title bar of the browser window itself. If you're not sure what I'm talking about, look at the browser window of this tutorial now. Don't use the scroll bar nor scroll to the top in any way. Just glance upwards at the top edge of the browser window. It should have the words "Dreamweaver CS4 Tutorial: How to Create a Website with Dreamweaver CS4 (thesitewizard.com)" or at least the first part of it. I placed those words into the title field for this page when I created it. Although it doesn't show in the body of a web page, it is still an integral part of the page, so you should not leave it set as "Untitled Document".
3. Now we move on to the visible portion of your web page. Begin by replacing the word "Header" with the name of your website. As before, you can do this simply by clicking somewhere in the word "Header". A blinking text cursor will appear. This text cursor behaves exactly the way the cursor behaves in a normal word processing program like Office or Word. You can move it with your arrow keys as well as use the DEL and backspace keys to delete characters.
   Use the delete or backspace key to remove the existing word and enter your site's name instead. For example, replace "Header" with "Example Company" if that's the name of your site.
4. Once you've figured out the above, it's a trivial matter to replace the "Main Content" section of the web page with your real content. As before, click somewhere in the words "Main Content", delete the existing text and replace with some appropriate content.
   Once you're done with replacing the "Main Content" header, proceed to replace the "Lorem ipsum dolor" (etc) gibberish. Just click somewhere in the top line, delete them, and type your own words. Typing and editing of text in Dreamweaver works more or less the same as it does under a wordprocessor. If you need to create new paragraphs, hit the ENTER (Windows) or Return key (Mac).
   The "H2 level heading" subtitle is there merely to show you that you can have subtitles in your documents as well. Replace it, along with the text below with whatever you want.
   If you are really at a loss as to what to type, you can use the following example text, either literally or as a model. However, it's best to write something relevant to your website so that you don't have to go back and re-edit it later.
   
   1. Don't change anything in the left column (sidebar). You will be adding a navigation menu to this section in later chapters, so just leave it unchanged for now.
   2. Scroll down to the bottom of the page and locate the horizontal bar labelled "Footer". Replace the word "Footer" with anything you like. Many webmasters place a copyright notice in this section. Very briefly, a copyright notice is simply a sentence like "Copyright © 2008 by Christopher Heng". The copyright symbol, ©, can be inserted by clicking "Insert | HTML | Special Characters | Copyright" from the menu. For more information about copyright, see my other article on Copyright Issues Relevant to Webmasters, at http://www.thesitewizard.com/general/copyright-issues.shtml
   3. Once you're satisfied with your web page, save it by clicking "File | Save As...". A dialog box will appear. Type "index.html" (without the quotation marks) into the "File name" field and click the "Save" button.
      IMPORTANT: make sure that you type the name "index.html" exactly as I gave it, entirely in small letters (lowercase) with no spaces in the word. Do not use any other name. Files with the name "index.html" are regarded as special files by most web servers. Published correctly, when a visitor accesses your website by just the domain name, like "http://www.example.com/", the web server will automatically deliver to them the "index.html" file in your site's main folder.

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

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