Intro to Dreamweaver 4.0

In this step by step lecture, you'll learn how to build a simple page in Dreamweaver 4.0 and work with some of its basic functions. These will include:

Suggested elements to begin with:

  1. A folder into which to build your site.
  2. Any graphic elements you'd like to use in your site.
  3. Any text files with content you wish to add to your site.

If you are going to be working with a lecture you have already created, link here to find out how to prepare it.

If you would prefer to use an interactive version of this tutorial you can link to a viewlet here.

So, without further delay, let's get started:

Step One: Open Dreamweaver 4.0.If this is the first time you've used the program, you will find that it asks you to define a website. Dreamweaver is designed for complete website management, and so requires that it knows where all the content of your particular site resides. Go ahead and click OK. If you have not used this program, you'll need to tell it you wish to start a new site. Select "New Site" under the Site submenu under the File menu (on Windows) or using the Site menu (on Macintosh). This will pop open.

Give your site a name in the Site Name box, then click on the small folder icon next to the Local Root Folder box, and locate the folder into which you wish to build your web page. If you are using a site which already exists or have converted a page (as the popup above), find the folder where the content is, then select it. Click ONCE on it, then click CHOOSE.

Step Two: Go ahead and click OK. Then close the site folder.

Step Three: Now, we may need to create a new page. If you wish to use a page which already exists, open it. If you want to use the Word document you converted above, open it, then check out this link on how to clean up the word HTML. If there isn't already one open, select New from under the File menu. Then, save the page you'll be working on in the folder you just selected, and call it "index.html." This is the name given to 99% of all "home pages." If you wish to call it something else, that's fine as well.

 

Step Four: Give your page a title, and start typing text into it. Notice how it works pretty much like a word processor. If you would like to format some text, you'll need to use the "Selection Properties" window. You can open this under the Modify menu, or it should already be open. This window will change based on what is selected, and is the most important single menu in this program.

Try some of the different formatting commands such as B for Bold, I for Italics, Default Font style and Size.

Step Five: Press return to jump down one paragraph. Notice how it jumps down TWO lines. To jump down only one, hold down on the Shift key and press return. It jumps to the next line.

Step Six: Let's create a list. Begin by typing the first line in your list. Then press either the Unordered list button or the Ordered List button in the properties menu. Notice the effect?

  • Item One
  • Item Two
  • Item Three

It indents the line and adds either a number of bullet. Press return and type another line. Now, press the Indent button. The line will indent. You can also use the Indent and Outdent buttons for paragraphs.

Step Seven: To create a hyperlink, hi-lite the text which you wish to use for the link.


On the Properties window, type in the URL of where you want the link to go.

NOTE: remember, you MUST always use "http://" before a URL.

To link to another page you've created, just type in its name, or click on the folder icon and find the file.

Here's a very useful tip: If you would like to have a totally new browser window pop open, select _none under the Target menu.

You also may find the need to create what's call an 'INTERNAL' hyperlink. This allows you to link from a button to another place INSIDE the same document. To do this, start by making sure that you can view Invisible Elements. This is accessed under the View menu and should be checked like this: \

Begin by adding the "Target Anchor Tags" to the places in your document you wish to jump to. Do this by placing your cursor where you wish to place a target, then select Named Anchor under the Insert menu.

Type a simple name. NOTE: make sure to keep it short and do NOT use any spaces.

Go ahead and place target anchors where-ever you wish them to go.

When done, find the text or graphic you wish to link FROM, and select it. Then scroll the document to the particular target anchor tag you wish to link to. Now, make sure your selection properties menu is open and you can see the target icon. It looks like this:

Select the Cross-hairs icon next to the link box on the selection properties menu then, while holding down on the mouse button, drag it until it's on top of the target icon.

You will also notice that the name you gave that anchor, along with the # symbol with appear. Let go of your mouse and the properties menu will show you the target anchor display

It should now work. Here's a tip: make sure there is enough text or content BELOW the target tag, as this permits it to scroll to the top of your page.

Step Eight: Let's place a graphic now. To do this you have two options. First, make sure all the graphics you wish to work with are placed inside the Absolute Root Folder. Then you can either drag the name of the graphic from the Site Files window. Drag it until you reach where you wish to place it and release. Viola! You've placed a graphic.

You can also use the Insert Image command under the Insert Menu

If you use this method, another menu will pop open that you can use to locate your image file.

Notice how the menu previews the image? If the image has not be placed inside of the Root Folder, you will find that Dreamweaver will force you to copy it there. This way, it can keep track of everything and you don't risk having broken image links. If you would like to use your image as a button, just fill in the Link information with the image selected.