Dreamweaver Tutorial (part1)

The Dreamweaver tutorial part1

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 table in Standard view
• Inserting assets from the Assests panel
• Inserting Flask Text and Flash Button objects
• Creating and applying a teamplate
• Running a site report
• Adding a Design Note

Take a guide tour of Dreamweaver

Before you get started, watch the Guided Tour movies to familiarize yourself with the Web development process and with Dreamweaver features.

1. In Dreamwever, choose Help > Guidend Tour.
2. Click a movie title
3. Close the movie you finish.
   

The Dreamwever work area

Let’s start with a brief overview of the Dreamweaver work area.

If you haven't already launched Dreamwever, double click the Dreamwever icon to launch it. When you launch Dreamwever, the following work.

· 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.)

1. Move the pointer over the navigation buttons to see rollover image effects. Click the navigation buttons to explore the site.

1. Close the browser when you’re finished looking at the site.
2. Open a new blank document in Dreamweaver, choose File > Open
3. 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.

1. 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.
2. 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 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.C
2. hoose 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.

6. In 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.

1. Under 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.

2. Click OK to close the dialog box

3. .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.

To now ,this tutorial to be continue for next post. You can try to train imajination building your web site. See you next part…