Dreamweaver: Getting Started

Purpose

This lesson is a part of a series of lessons that guide you through creating a new Web site from scratch using Macromedia Dreamweaver 8. Dreamweaver is a Web development tool which allows users to create Web pages without having to learn all the complex HTML codes. Just like NVU, Dreamweaver is a WYSIWYG (What You See Is What You Get) Web page editor.

In this tutorial sheet you will learn how to:

  1. Open Dreamweaver
  2. Use the Dreamweaver interface
  3. Set up a site

Software Needed

Dreamweaver 8

Prerequisite Knowledge and Skills

Before beginning this tutorial please make sure that you have completed the file management and FTP tutorials.

Overview

 

 [back to top]

Lesson 1: Dreamweaver Interface

This tutorial will show you how to open Dreamweaver properly and some of the features of the Dreamweaver interface.

 
 

 

Activity 1: Open up Dreamweaver

  1. Go to Start> All Programs> Macromedia> Macromedia Dreamweaver 8.
  2. In the opening menu, click HTML under Create New.



  3. The New Document window might appear for some users. Go to File> New Document. Select Basic page and HTML. Click Create.


The Dreamweaver Interface

Dreamweaver has many elements in common with Microsoft Word. They include:

  1. Title bar and window control icons (minimize, overlap, and close)
  2. Menu bar with similar menus: File, Edit, View, Insert, and so on
  3. A toolbar with some familiar and some new icons
  4. Document area (which is empty or shows a shortcut window when you first start up)
It also has some new elements not found in Word:
  1. Common Toolbar contains shortcuts to most commonly used Web publishing functions.



    Icon Function

    To insert a new hyperlink

    To insert a new e-mail link
    To insert a new anchor
    To insert a new table
    To insert a new image or create a new navigation bar
    To insert Flash media

  2. The Document Tab Area provides you access to any pages that you may have opened. You can also close the active document by clicking X on the upper right corner. You can also choose from 3 different views of your current page.



  3. The Document Area is where you insert and edit your content such as images, text, links, etc.




  4. The Properties Pane allows you to make adjustments to the various page elements. It contains icons for editing text. Most of them are similar to those in Word.




 

 [back to top]

Lesson 2: Defining a Site

Setting up a site is the first step of Web publishing. The process is called "Site Definition" in Dreamweaver. It may seem complicated because it involves multiple procedures. Make sure to complete the File Management and FTP tutorials. Parts of this lesson will not make sense if you have not completed the steps in the FTP tutorial.

 

Activity 1: Define a Site

  1. Go to Site> New Site. The Site Definition window will appear.



  2. In the Editing Files window fill in your site name and the HTTP address of your home page. Click Next.



  3. In the Editing Files, Part 2 window, select "No" and click Next.



  4. In the Editing Files, Part 3 window, select "Edit local copies on my machine, ... " and designate a folder where you want to store your files by clicking the folder icon. Click Next.



  5. In the Sharing Files window select the following:


    1. How do you connect to your remote server?

      FTP

    2. What is the hostname or FTP address of Web server?

      afs.msu.edu


    3. What folder on the server do you want to store your files ins?

      web

    4. What is your FTP login?

      your MSU id

    5. What is your FTP password?

      your MSU password




  6. Click on Save to save your password. (Note: only do this if you are the only person using your computer).

  7. Click Test Connection. If everything is correct, you will see the following message. Then click Next.



  8. In the Sharing Files, Part 2 window, select "No, ..." and click Next.



  9. You will see the summary of your site definition. Click Done.

  10. Your new Site will appear on the Files panel.






 

 
 [back to top]

Wrap Up:

In this tutorial you learned how to open Dreamweaver and the major components of its interface. Most importantly, you have learned how to define a site. By doing this you have input the settings for connecting to the remote server that will host your site. Next you will learn how to begin creating your site.