Introduction

What’s new in Dreamweaver 8

Installing Dreamweaver 8

Learn about Dreamweaver sites

Creating HTML pages

Using Cascading Style Sheets (CSS)

Adding Content to Pages

Test or Preview your web page in a browser

Introduction

Macromedia Dreamweaver 8 is a professional HTML editor for designing, coding, and developing websites, web pages, and web applications. Whether you enjoy the control of hand-coding HTML, or prefer to work in a visual editing environment, Dreamweaver provides you with helpful tools to enhance your web creation experience.

What’s new in Dreamweaver 8

Dreamweaver 8 includes many new features that help you build websites and applications with a minimal amount of time and effort.

Following are a few of the key new features in Dreamweaver 8:

• Zoom tool and guides
• Visual XML data binding
• New CSS Styles panel
• CSS layout visualization
• Code collapse
• Coding toolbar
• Background file transfer
• Insert Flash Video command

Installing Dreamweaver 8

Be sure to read the release notes on the Macromedia website at www.macromedia.com/go/dw_documentation for late-breaking information or instructions.

To install Dreamweaver:

1. Insert the Dreamweaver CD into your computer’s CD-ROM drive.
2. Do one of the following:
   • In Windows, the Dreamweaver installation program starts automatically.
   • In Macintosh, double-click the Dreamweaver installer icon that appears on the desktop.
3. Follow the onscreen instructions.

   The installation program prompts you to enter the required information.

4. If prompted to do so, restart your computer.

Learn about Dreamweaver sites

In Dreamweaver, the term "site" can refer either to a website or to a local storage location for the documents that belong to a website. A Dreamweaver site organizes all of the documents associated with your website and lets you track and maintain links, manage files, share files, and transfer your site files to a web server.

Dreamweaver site consists of as many as three parts, depending on your computing environment and the type of website you are developing:

1. Local folder
2. Remote folder
3. Folder for dynamic pages (Testing Server folder)

The Site Manager is where you’ll get an overview of the entire site.

1. Create the folder in which you will store all your project files. Create an ‘images’ folder within and transfer all the sliced images to this folder.
2. Open Dreamweaver 8.0
3. Open the Site Manager [Site > Manage Site]
4. Define a new site [Site > New Sites]
5. Fill in your Project Name in the box provided for ‘Site Name’.
6. Use the yellow folder icon next to the ‘Local Root Folder’ box to browse for the project folder you had created.
7. You should be able to see the ‘images’ folder in your site manager.
8. Next you will create the pages you need for the site.

1. Create the HTML homepage [File > New]
2. A new HTML file named untitled.htm will appear in the site manager.
3. Rename it to index or default. Keep the .htm file extension.
4. Double click the file to open it.
5. Change the HTML page title to something more appropriate like Homepage [ Modify > Page Properties > Title/Encoding]
6. Once you creat a page, save it [File > Save As]
7. Similarly create and save all the other HTML pages you need.
8. Next you will need to create your page layout.

Using Cascading Style Sheets (CSS)

• Select File > New.
• In the New Document dialog box, select Basic page in the Category column, select CSS in the Basic Page column, and click Create.

A blank style sheet appears in the Document window. The Design view and Code view buttons are disabled. CSS style sheets are text-only files–their contents are not meant to be viewed in a browser.

• Save the page [File > Save As] as .css.

Adding Content to Pages

Insert images : Insert > Image , select your image from the "Select Image Source" dialog box.

Insert Flash : Insert > Media > Flash , select your flash file from the "Select File" dialog box.

Creat Links: Insert > Hyperlink

Test or Preview your web page in a browser

• Make sure the .html file is open in the Document window.
• Press the F12 key (Windows) or Option+F12 (Macintosh).