Introduction to Dreamweaver

Instructor: Rita Gavelis

MMRLS 2006

Introduction to Dreamweaver

One of the most difficult steps in creating a web site is choosing a design.  Many times this is done by committee.  It can take days, if not weeks to pick a color scheme, find images, and choose placement of the links.  Once these steps have been completed, it is then up to the “Web Master” to turn the design into a website.  Unfortunately, many librarians find themselves in the position of Web Master by default.  How can someone with little or no design experience or knowledge of HTML possibly function in a web environment?  Fortunately, Dreamweaver makes it possible for a novice to create new, colorful pages and upload them to the web.

Step One.

The first step in using Dreamweaver is to create a folder on your PC or server in which to house all your web files.  You can do this a number of ways.  The easiest is to right click on your desktop,  select “new”, and select “folder”.

Step Two.

Link Dreamweaver to your newly created web folder by Managing and creating a new “site”.

In the menu bar, click on the word "site", then select "manage sites".

You will enter a name for your site.  Then you will choose whether you wish to use Server technology or not.  Usually, you will choose “no”. You will also be asked if you want to edit local copies on your machine or directly onto the server.  You should choose to edit copies on your local machine.  This will help you catch any possible mistakes before loading the page to your web site.  At this point you must indicate the location of your web files.  You can do this by clicking on the folder icon and browsing to the correct folder.  

Another question you must answer is how you wish to connect to your web server.  Normally you would choose FTP.  However in this class, you will choose “local/Network” and browse to your web folder.  After this you will be asked if you wish to use check in?  You would choose this only if there is more than one person working on your web files.  If you are the only person, then you would not choose the check in option.  After this, Dreamweaver will show you a summary of your selections.  You can then close the “Manage Sites” window and begin working on your site.

Step Three.

To begin creating a new site, open Dreamweaver and select “Create New HTML”.

You will choose whether you wish to create the site in “code”, “split”, or “Design” mode.  “Code” you to create the page directly in HTML.  “Design” allows you a more “user-friendly” graphical window.  You can also choose “Split”, which shows you two windows: one with the HTML code and the other with the graphical design space.

Step Four.

Once you have chosen your design window, you can now start creating your page.  

In the Properties section, you select your font style, size, and color.  

If you click on “Page Properties” You can also choose the color of links and your background.

At this point, you can begin adding text to your web page.

Step Five.

After you have created your page, you will need to save it.  Simply click on “File” and “Save”.

A dialog box will appear.  Make sure the “Save in” field lists your new web folder.  

You also want to make sure you name your new web page. Then click “Save”.

If you want to see what your web page looks like in a browser, you click “File”, then “Preview in Browser”.  You will choose which browser you wish to view.  The look of your website might differ depending on which browser you use, so it is always a good idea to preview it first, before you upload it.

Step Six.

Now that you have saved your new page, you need to upload it onto your web server.  A popular method is FTP, or File Transfer Protocol.  To check your upload settings, click on “Site”, “Manage Sites” and select the web site.  You will then click “Edit” and the Site Wizard will take you through all the options you entered at Step Two.  

To upload a page, open it in Dreamweaver.  

Click on “Site”, then “Put”.  This loads your file onto the web server.

If your web page has images or links to other pages, you will also have to upload each image and linked page as well.

Once you have uploaded your pages and images, you can now open your browser and view your page on the Internet!

Special Topics.

Importing Images.

To add an image to your page, click on “Insert” then “Image”.  A dialog window will appear.

In this window, you will direct Dreamweaver to the location of the image, then click “OK”.

In the “Properties” section underneath your design window, you can enter specific properties of your image.

In Properties you can:

Inserting Date and Time.

This is a useful tool for many web designers.   You would use this to keep track of when the page was last updated.

Open the web page you wish to work on.
At the bottom of the page, enter the text: “Last updated:”.
Make sure the “Insert” toolbar is showing (Click on “View”, “Toolbars”, and “Insert”).   Make sure “Common” is selected as your option, and click on the “Date” icon.   Select the Day, Date, and Time formats.  Check off the box next to “Update automatically on save”.  This will automatically add the day, date, and time for your updates.  Click “OK”.  The day, date and time will appear after your text.

Link to a Named Anchor.

Named anchors allow you to navigate within a web page.  You can link to the top, bottom, or middle of your web page.  This is especially useful if you have a page with a lot of text that requires scrolling.  Using a named anchor will allow you to jump from the bottom to the top of the page with just a click.

In you web page, click where you would like to install an anchor.

On the “Common” toolbar, click on the Named Anchor icon.

In the dialog box, type the name of the anchor and click “OK”.

Select the text you want the anchor to link to.

In the Properties Inspector, drag the Point-to-File icon    to the anchor.

If you save the file and preview it in a browser, you should be able to click on the text and it will automatically take you to the location of the page where you inserted the anchor.

You can also use the Named Anchor to take you to a spot on a different page.

Creating Email Links.

Along with creating links to various spots in the web page, you can also create a link that sends an email.

On your web page, type in “Contact us”.  Then select “Contact us”.

On the “Common” toolbar, click on the Email Link   icon.

Type in the email address in the dialog box.

Click “OK”.  You have now created an email link.

Image Maps.

Image maps are a way to create links on different parts of one image, i.e. if you have a map of the world and each continent is a link to a new web page.

To create an Image Map, insert an image into your web page by clicking on “Insert” and “Image”.  Choose the image you wish to insert.

Once you have inserted the image, select the image.  In the Properties Inspector, enter a name for the image map in the “Map” field.  In the “Alt” field, enter a name for the image.

Select the appropriate “hotspot” tool (Rectangle, Oval, or Polygon).

In your design window, draw over the area of your image you would like to create the link or “hotspot” on.

Enter the URL of the link you wish to navigate to.

Save it and preview the link in a browser.

If you wish to add more links or “Hotspots” on your image, simply click on a blank area of your design page and repeat the above steps.

Layers.

Layers are a quick and easy way to position objects such as images and text on your web page.

To create a layer, click on “Insert”,  “Layout Object”, and “Layer”.  A Rectangle appears in your design window.  If you click on the layer selection handle, black boxes outline the layer.

You can change the size and position of the layer by clicking on a black box and dragging it until the layer expands or shrinks to the desired size.  

When you see a four-sided arrow appear you can move the layer to a desired location in your design window.

Once you have created a layer, you can insert images and text onto that layer.  

Using the Timeline Panel.

Timelines are a great way to add animation to your web site.  It is the tool you would use if you want an image to float across your screen.

To use the Timeline you must first select a layer with an image in it.  In this case, I have inserted an image of an airplane onto a layer.  

I wish for the image of the airplane to move along the path shown above.

To do this, click on the layer’s selection handle so the layer is outlined with the black boxes.

Place the image at the location where you want the movement to begin.

Click on “Modify”, “Timeline”, and “Add Object to Timeline”.  You will see a purple bar appear on the timeline panel.

To adjust the length of time, move the keyframe marker.

Move the image/layer to the location it should end up at on your web page.  A straight line will appear.

To make the path curve, “control- click” on a point along the purple line in the timeline panel.  

You then move the image to the position on the web page where you want it to be at that moment.  

You’ll notice that the gray “flight path” is now curved.

Repeat these steps until you have created the desired path.  

To view the flight, press the rewind button.  Then hold the play button down.

Resources and Tutorials

If you have trouble figuring out how to use a Dreamweaver tool or you need some helpful hints, below is a list of resources to help answer your questions.

Panel Help

If you are not sure how to use the different panels such as Timeline or Properties, you can right-click on the panel name and select “Help”.

A browser window will open where you can choose to open PDF instructions…

or access the Dreamweaver Support Center.

Another resource is the “Help” command from the command bar.

From here, you have access to tutorials and more Dreamweaver reference resources.

If you select “Getting Started and Tutorials”, you can find answers to your questions by using the Contents, Index, Search, and Favorites tabs.

Remember to click on “Display” to view your search results.

One of the drawbacks to using “Help” from the command bar is the heavy use of Dreamweaver lingo.  If you are not sure of the term Macromedia is using, you may have a difficult time finding the answer to your question.

Useful Web Sites

The Intranet Journal – lists some helpful hints.

http://www.intranetjournal.com/articles/200002/dream_index.html

Rochester Institute of Technology – Though it covers an early version of Dreamweaver, it is still quite helpful.

http://wally.rit.edu/instruction/web/drw3/

Webmonkey – A fun and information web site on anything to do with Web design.

http://hotwired.lycos.com/webmonkey/authoring/tools/tutorials/tutorial1.html

Training Tools.Com – a free tutorial for Dreamweaver 4.0.

http://www.trainingtools.com/online/dreamweaver4/

Internet 4 Classrooms – A web site for helping teachers use the Internet effectively.

http://www.internet4classrooms.com/on-line_dw.htm

Home|Top of Page