If you're new to Dreamweaver, I have just the answer you are looking for to get up to speed fast. I have created a series of interactive Adobe Captivate simulations that will help you get started with Adobe Dreamweaver CS4. These simulate the Dreamweaver web development environment and let you participate as if you were actually using Dreamweaver.

Note: The website files for the fictitious Check Magazine website featured in these simulations are not available for download. If you have finished these simulations and you are looking for a hands-on tutorial on how to build a site (including sample files), refer to the five-part tutorial series, Creating your first website with Dreamweaver.

Requirements

In order to make the most of this article, you need the following software and files:

Dreamweaver CS4

• Try
• Buy

Prerequisite knowledge

Some familiarity with Dreamweaver will be helpful, but is not necessary.

Note: If you click any of the Play the simulation links below and the page doesn't load, the browser window may already be open and hidden behind another browser window. Some simulations require you to enter text in text fields as if you are in Dreamweaver. If you have already completed the text entry boxes and click Back in the playback controls, these text fields will already be filled in.

Introducing the Dreamweaver workspaces

In this tutorial you will explore the Dreamweaver user interface and learn how different workspaces can be used to best suite your workflow.

• Play the simulation: Introducing the Dreamweaver workspaces

Setting up your site and project files

This tutorial introduces the Adobe Dreamweaver site for the fictitious Check Magazine website.

• Play the simulation: Setting up your site and project files

Creating a new document

Adobe Dreamweaver CS4 offers a flexible environment for working with a wide range of web design and development documents. In addition to HTML documents, you can create and open a variety of text-based documents, including XHTML, CFML, ASP, ASPX, JSP, PHP, XML, XSL, JavaScript, and CSS. Dreamweaver also supports source code files, such as Visual Basic, C#, and Java.

• Play the simulation: Creating a new document

Setting page properties

Use the Page Properties dialog box to apply global properties such as page background color and text color to your pages.

• Play the simulation: Setting page properties

Inserting tables

Tables are a powerful tool for presenting tabular data and for laying out text and graphics on an HTML page. You can use tables to create your layout quickly and easily. In this tutorial you'll create a number of tables in a new Dreamweaver document. The rows and cells of the tables act as container boxes for the content you'll add in the next tutorial.

• Play the simulation: Inserting tables

Working with tables

In this tutorial, you will add content to the newly created table and style the tabular data using a variety of CSS (cascading style sheet) techniques.

• Play the simulation: Working with tables

Inserting an image placeholder

An image placeholder is a graphic you use until final artwork is ready to be added to a web page; it is not a graphic image that displays in a browser. Before you publish your site, replace any image placeholders you've added with web-friendly graphic files such as GIFs or JPEGs.

• Play the simulation: Inserting an image placeholder

Inserting text

To add text to a Dreamweaver document, you can type text directly in the Dreamweaver Document window as well as copy and paste text. You can also import text from other documents.

• Play the simulation: Inserting text

Inserting images

Having created your page layout, you are ready to add assets to the page. You'll start by adding images. You can several options when adding images to a web page in Dreamweaver. In this tutorial, you'll add images to the Check Magazine website using various methods.

• Play the simulation: Inserting images

Working with Photoshop Smart Objects

This tutorial shows you how to streamline your workflow by dragging and dropping Photoshop format (PSD) files directly into Dreamweaver while still maintaining a live link between the source PSD and the optimized images.

• Play the simulation: Working with Photoshop Smart Objects

Using the Related Files toolbar and Code Navigator

Modifying code on web pages that use multiple files can be a complicated and time-consuming task. In this tutorial, you will learn how to use the Dreamweaver Related Files toolbar and Code Navigator feature to simplify this process.

• Play the simulation: Using the Related Files toolbar and Code Navigator

Inserting and playing Flash files

In this tutorial, you'll insert an Adobe Flash file that plays an advertisement for the Check Magazine web site and learn how to open this page by applying the Open Browser Window behavior in Dreamweaver.

• Play the simulation: Inserting and playing Flash files

Creating and checking links

In this tutorial, you will learn how to create hypertext links, how to build named anchors, and how to check your document for broken links.

• Play the simulation: Creating and checking links

Using Live view

Live View in Dreamweaver makes web development a more efficient process by allowing you to view web pages under real-world browser conditions every time a change is made without to continually preview in a web browser. In this tutorial you will learn how to take advantage of Live View.

• Play the simulation: Using Live view

Previewing pages in your browser

This tutorial shows you how to preview your web pages in a web browser and how to preview active content in Internet Explorer.

• Play the simulation: Previewing the page in your browser

Inserting Flash video files

With Dreamweaver you can easily insert Adobe Flash Video content in your web pages without using the Flash authoring tool. Dreamweaver inserts the Flash Video component, which, when viewed in a browser, displays the Flash Video content you select together with a set of playback controls.

• Play the simulation: Inserting Flash video files

Using HTML data sets

HTML data sets are an exciting addition to Dreamweaver. You can now add dynamic data to your web pages without having to use XML for a relational database. Using HTML data sets from a table or other document with structured content in it and reuse the content in a variety of ways. This tutorial shows you how to add dynamic data to your web pages without having to use XML or a relational database.

• Play the simulation: Using HTML data sets

Using CSS best practices

In this tutorial you will learn how to ensure your CSS code adheres to CSS standards.

• Play the simulation: Using CSS best practices

Using Yahoo! web widgets and code hinting for Ajax and JavaScript frameworks

In this tutorial, you will learn how to work with web widgets and see how the Dreamweaver code hinting feature increases your coding productivity and minimizes typing errors.

• Play the simulation: Using Yahoo! web widgets and code hinting for Ajax and JavaScript frameworks

Publishing your site

This tutorial shows you how to set up a remote site with Adobe Dreamweaver CS4 and publish your web pages. Typically located on a remote computer running a web server, a remote site holds copies of your local files. Users access the remote site on the web server when they view your pages in a browser.

• Play the simulation: Publishing your site

About the author