Dreamweaver 3

Inserting Graphics
Using Tables

You've just had an epiphany! You now hold the key to creating the world's best website...the only problem is that you now have to learn how to create a website.

Every internet page that you view is written in a language called html. If your page isn't written in html, then trying to view it on the web is like trying to drive your car on Root-Beer instead of gas! "It just ain't gonna work!"

If you don't want to spend half your time learning to write html code, work with an html editing program like Dreamweaver. Dreamweaver builds the html code in the background while you create an internet-ready web page in a "what you see is what you get" (WYSIWYG) environment.

Back to Top...

When you open the Dreamweaver program, you will see a screen similar to the following image:

Back to Top...

The white area is the workspace, the place where you will build your files. Any other windows that are open represent shortcuts for common commands.

*For now, close out any extra windows that may be open by clicking on the icon.

Under the Window menu is a list of all the extra windows available. One important window to have open is the Properties window:

1.

Click once on the Window menu at the top of the Dreamweaver main screen.

2. From the menu that drops down, locate the word Properties.
3. If there is a check beside the word Properties, , then the window is already open on your workspace.
4. Else, click once on Properties and the window will now appear on your workspace.

The Properties window looks like:

This window gives you options specific for whatever you've highlighted or selected (i.e. text, graphic). In the lower right corner locate the upside-down white triangle .
Click on the to get the expanded Properties window which looks like.

Back to Top...

In Dreamweaver, the first thing to do is define a local site. This will tell Dreamweaver where all of your files for the website are located. It is necessary to keep every file/folder used in creating your website (i.e. image file, html file etc.) under one main location (i.e. folder, floppy disk). Within that main location you may have 0, 1, 50, 100, or 1000 files and folders...but they are all under the main location.
NOTE: For this tutorial, we will assume that the main location containing all of your website files/folders is a floppy disk (a:\ drive). If you decide to have your main location be other than a floppy disk, follow the directions below but use your chosen location wherever floppy disk is mentioned.

1.

At the top of the Dreamweaver screen, select the Site menu.

2. From the menu that appears, select Define Sites...
3. In the window that appears, select New...

The next window that appears will look like the following image. By moving your mouse over the image you will see an example of appropriate information for the Local Info category.

On the left hand side of the window is a list of Categories. Local Site should be highlighted.

1. The Site Name field is an arbitrary name that you make up. For example, if you are configuring the account for your EN101 online course, it would probably be a good idea to have the Site Name be My EN101 Course. (For this tutorial, ArbitraryNameYouMakeUp will be specified as the Site Name.)
2. The Local Root Folder is the folder on your local computer that contains your website material. If you do not know the exact path of the folder that contains your website work, click on the folder icon and browse through your computer. (For this tutorial, the will be specified as the local root folder.)
3. Keep the Refresh Local File List Automatically checked. The rest of the information in this window is optional.
NOTE: By moving your mouse over the above image you will see an example of appropriate information for the Local Info category.
5. Click OK.
6. If you are asked whether you would like to create a cache, click on Create. (This improves the speed of link and site management tasks).
7. You will see the Define Sites window again, click Done.


The following Site Files window will appear:

Notice how the arbitrary name you specified for this ftp account now appears in the drop down box in the upper left.
The right hand side of the window represents your local site, which is the floppy drive. This means you plan to store all your web materials on a floppy disk.

*Close out the site window by clicking on the icon.

Now that you have defined a local site and are back to the Dreamweaver main screen we may continue.

Back to Top...

To setup the Page Properties:

1. Click once on the Modify menu at the top of the Dreamweaver main screen.
2. From the menu that drops down, select Page Properties...
3. In the window that appears, the important fields to fill in are Title, Background Image, Background (just color), Text, Links, Visited Links, Active Links.
NOTE: In the color fields there will be a small box, , that when clicked on pops up a menu of colors to choose from.
5.

Once you have filled in the important fields, click on Apply and then OK.

Back to Top...

To insert text...just begin typing. Dreamweaver automatically inserts two line breaks when you hit enter, thus double spacing. If you would like to have just one line break inserted (single spaced) then hold down the Shift key while you hit Enter.

Pretend that Dreamweaver is a word processing program (i.e. MS Word, WordPerfect) where you can type and format your text at anytime. Most of the common formatting tasks can be found in the Properties window (shown below), but first, make sure that the Properties window is open.

You must highlight the text you wish to format before changing any of the following:

The above graphic brings us to the topic of links. Links allow you to navigate around the files that make up your web site. When you specify a link, you are just telling Dreamweaver the file to open when a user clicks on the text or object you have selected. A link can be text or a graphic.

For example, if I want to make the words GO HOME to be a link to a page about my house called myhouse.html I would:

1.

Select the words GO HOME with my mouse.

2. Find the Link field in the Property Box (see above graphic).
3. Type in the name of file to link to: myhouse.html
4. Hit Enter.
5. GO HOME should now be blue and underlined.

NOTE: The yellow folder next to the Link field in the Property Box (see above graphic) allows you to browse your local site to find the link file. It is very important that you create a local site before using the folder option of the Link field.

When you are typing locations of the file you want to link to in the Link field of the Property Box, there are three kinds of links you should be aware of: Email, Absolute, and Relative.

Email

When a user clicks on this kind of a link, an email message window is opened. Typically the user must have a default email program installed on their computer for email links to work properly. You can insert an email link by going up into the Insert menu and selecting E-mail Link.

Absolute

This kind of link requires the full address of the page to link to. Typically, you would use an absolute link if the page you want to link to is outside of your site. For example, let's say I have an MVCC affiliated website at: http://www.mvcc.edu/~nwood
Now, if I want to have a link in my site that goes to the Yahoo homepage I would have to provide the full (absolute) address of the page because it is outside of my site. So I would type the following into the Link field of the Property Box:
http://www.yahoo.com

Relative

This link requires just the folder/file hierarchy seen after your server information. Typically, you would use a relative link if the page you want to link to is inside your site. For example, let's say I have an MVCC affiliated website at: http://www.mvcc.edu/~nwood
Now, if I want to have a link in my site that goes to the myhouse.html file that is part of my site I would just type the relative address of myhouse.html. So I would type the following into the Link field of the Property Box: myhouse.html
Now, what if the myhouse.html file was under a folder called Home. In that case I would type the following into the Link field of the Property Box: Home/myhouse.html

Back to Top...

If you need further, or more advanced, help with Dreamweaver 3 you may contact Norma Chrisman in the Faculty/Staff Resource Center (315-792-5398).

Back to Online Tutorials Index Page

Back to Top...