Dreamweaver Tutorial

The Dreamweaver tutorial walks you through the steps of building Web pages.You’ll learn how to use Macromedia Dreamweaver to define a local site, and you’ll
use Dreamweaver panels and tools to create and edit Web documents.
In this tutorial, you’ll create Web pages for Compass, a fictitious company that
specializes in adventure travel. If you’re new to Dreamweaver, start at the
beginning of the tutorial and work your way through the end. If you’re already
familiar with Dreamweaver, you may want to start at “Use the Assets panel” on
page 56; this section and those that follow it focus on new or changed features in
Dreamweaver such as the Assets panel, Flash buttons and text, using a template,running a site report and adding a Design Note.The tutorial takes approximately one to two hours to complete, depending on
your experience, and focuses on the following Dreamweaver tasks:
•Defining a local site
•Creating a page in Layout view
•Inserting an image and a rollover image
•Working with tables in Standard view
•Creating a link to another document
•Inserting assets from the Assets panel
•Inserting Flash Text and Flash Button objects
•Creating and applying a template
•Running a site report
•Adding a Design Note
Take a guided tour of Dreamweaver
Before you get started, watch the Guided Tour movies to familiarize yourself with
the Web development process and with Dreamweaver features.
1In Dreamweaver, choose Help > Guided Tour.
2Click a movie title.
3Close the movie when you finish.

The Dreamweaver work area
Let’s start with a brief overview of the Dreamweaver work area.
•If you haven’t already launched Dreamweaver, double-click the Dreamweaver
icon to launch it.
The Dreamweaver work area accommodates different styles of working
and levels of expertise. When you launch Dreamweaver, the following work
area items open:


•The Document window displays the current document as you create and edit it.
•The Objects panel contains icons you click to insert objects in your document,
and to change the way you work in a document
•
Dreamweaver provides many floating panels, such as the HTML Styles panel and
the Code inspector, which enable you to work with other Dreamweaver elements.
•
The Launcher bar contains buttons for opening and closing your most
frequently used inspectors and panels.
•
The Property inspector displays properties for the selected object or text, and
lets you modify those properties. (Which properties appear in the inspector
depend on the object actively selected in the document.)
To open Dreamweaver windows, inspectors, and panels, use the Window menu. A
check mark next to an item in the Window menu indicates that the named item is
currently open (though it may be hidden behind other windows). To display an
item that isn’t currently open, choose the item name from the menu or use its
keyboard shortcut.
Working in Dreamweaver
Dreamweaver can display a document in three ways: in Design view, in Code
view, and in a split view that shows both the design and code. (To change the view
in which you’re working, select a view in the Dreamweaver toolbar.) By default,
Dreamweaver displays the Document window in Design view.
In addition, you can work with the Dreamweaver Design view in two different
ways—in Layout view and Standard view. (You select these views in the View
category of the Objects panel.) In Layout view you can design a page layout, insert
graphics, text, and other media; in Standard view, in addition to inserting graphics
text and media, you can also insert layers, create frame documents, create tables,
and apply other changes to your page—options that aren’t available in Layout view.
How the tutorial files are arranged
Both the completed and partially completed HTML files used in this tutorial
are in the Compass_Site folder in the Tutorial folder. Images and other associated
files for the site are also in the Compass_Site folder.
Each tutorial file has a meaningful name—for example, the HTML file that
contains travel destination information is named Destinations.html. The partially
completed files—which you’ll be working on—have names similar to their
completed file counterparts, except they begin with DW4_; the partially
completed version of Destinations.html, for example, is called
DW4_Destinations.html.
Preview the completed Web site
Next, view pages in the completed Web site to get an idea of what you’ll be
working toward.
1.If you haven’t already done so, launch Dreamweaver.
2.In Dreamweaver, choose File > Open. In the file browsing dialog box, navigate
to the Dreamweaver 4 folder (where you installed Dreamweaver); then navigate
to Tutorial/Compass_Site.
3.In the Compass_Site folder, select CompassHome.html, and then click Open
to open the Compass home page in the Document window.
Do not edit this page; you will create your own version of this page.
4.Choose File > Preview in Browser and select a browser in which to view the
Compass home page. (Use a version 4.0 or later browser to view this site.)

5.Move the pointer over the navigation buttons to see rollover image effects.
Click the navigation buttons to explore the site.
6.Close the browser when you’re finished looking at the site.
7.Open a new blank document in Dreamweaver, choose File > Open.
8.Close the CompassHome.html file, which is open in Dreamweaver.
Set up the site structure for the tutorial
There are two ways you can work with the tutorial files—use a predefined local
site or define a local site.
•
If you’re new to Dreamweaver, you may want to define the local site for the
tutorial so you’ll know how to set up a local site when you’re ready to work on
your own sites.
•
If you’re already familiar with defining a site using Dreamweaver, you may want
to use the predefined tutorial site. From the Dreamweaver main menu
choose Site > Open Site, then select Tutorial - Dreamweaver. The Tutorial -
Dreamweaver site links to the Compass_Site files located in the Dreamweaver
4/Tutorial folder. After selecting the local site, skip to the “Create the site home
page” on page 34 section of the tutorial.
Note:
If you select the predefined site, the site name displayed in the tutorial
screenshots will not match; instead of seeing my_tutorial, you’ll see Tutorial -
Dreamweaver as the site name in your screens.
Define a local site
When you define a local site, you tell Dreamweaver where you plan to store all the
files for a particular site. To work effectively in Dreamweaver, always define a local
site for each Web site you create.
For this tutorial, you’ll specify the Compass_Site folder as the local site folder.
1.If it isn’t already open, launch Dreamweaver.
A blank document opens.
2.Choose Site > New Site.
3.In the Site Definition dialog box, make sure Local Info is selected in the
Category list.
4.In the Site Name field, type
my_tutorial
.The site name lets you easily identify and select a site from a list of sites
you’ve defined.
5.Click the folder icon to the right of the Local Root Folder field.
6In the dialog box that appears, navigate to the Tutorial/Compass_Site folder,
and do one of the following:

•In Windows, click Open, then click Select when Compass_Site appears in
the Select field.
•On the Macintosh, click Choose to select the Compass_Site folder.
The Local Root Folder field updates to display the path to the local site.
Note:
The complete path to the Compass_Site folder may vary, depending on where
you installed Dreamweaver.
7Under Cache, do one of the following:
•Select Enable Cache (Windows) to create a cache file for the site.
•Select Use Cache to Speed Link Updates (Macintosh) to create a cache
file for the site.
Caching the files in the Compass_Site folder creates a record of existing
files so Dreamweaver can quickly update links when you move, rename,
or delete a file.
8.Click OK to close the dialog box.
9.Click OK to the cache message.

The Site window now displays a list of all the folders and files in the local site.
The list also acts as a file manager, allowing you to copy, paste, delete, move,
and open files just as you would on a computer desktop.
Create the site home page
Now that a site structure is set up for storing pages and assets for the Compass
site, you’ll create the first page—a home page for the site. As you build this page,
you’ll add images, text, and Flash assets; your document will contain the same
design components as the completed Compass home page.
Save your document
Begin by saving the document you’re working in.
1.Leave the Site window open, and click the Document window to make
it active.
The Site window remains open in the background.
2.Choose File > Save.
3.In the Save As dialog box, select the Compass_Site folder as the location for
this document.
4.In the File Name field, type my_CompassHome.html
5.Click Save.
Notice that the document name now appears at the top of the Document window.

Related Posts by Categories

Widget by Simran