Dreamweaver Article

Getting Started with Dreamweaver CS3

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 CS3. These simulate the Dreamweaver web development environment and require you to participate as if you were actually in Dreamweaver.

Note: The website files for the fictitious Aquo website featured in these simulations are not available for download. After 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 CS3.

Requirements

To complete this tutorial you will need to install the following software:

Dreamweaver CS3

• Try
• Buy

Note: If you click any of the links below and the page doesn't load, the browser window may already be open and hiding behind this browser window. The 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 press back in the playback controls, these text fields will already be filled in.

Setting up a site

This tutorial introduces you to the concept of a Adobe Dreamweaver site for the fictitious Aquo Drink website. Click the link below to begin the simulation.

• Play the simulation: Setting up a site

Creating a new document

Adobe Dreamweaver CS3 offers a flexible environment for working with a variety 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, .NET, C#, and Java. Click the link below to begin the simulation.

• Play the simulation: Creating a new document

Setting page properties

Use the page properties dialog box accessed through the Property inspector 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 effectively act as container boxes for the content you'll add later. Click the link below to begin the simulation.

• 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. Click the link below to begin the simulation.

• 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, or you can cut and paste. You can also import text from other documents. Click the link below to begin the simulation.

• 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 use several methods to add images to a web page in Dreamweaver. In this section, you'll add images to the Aquo Drink website, using various methods. Click the link below to begin the simulation.

• Play the simulation: Inserting images

Inserting and playing Flash files

In this tutorial, you'll insert a Adobe Flash file that plays an advertisement for the first annual Aquo-thon in British Columbia. The Flash file you'll insert is a flexible messaging area—or FMA—file.

• Play the simulation: Inserting and playing Flash files

Creating 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. Click the link below to begin the simulation.

• Play the simulation: Creating links

Previewing pages in your browser

While the Dreamweaver Design view does an excellent job of rendering your pages, you still need to test your pages in several browsers. Luckily Dreamweaver has a Preview in Browser feature to make this a snap. Click the link below to begin the simulation.

• Play the simulation: Previewing the page in your browser

Inserting Flash video files

Dreamweaver lets you easily insert Adobe Flash Video content in your web pages without using the Flash authoring tool. Dreamweaver inserts the Flash Video component; when viewed in a browser, this component displays the Flash Video content you select, as well as a set of playback controls. Click the link below to begin the simulation.

• Play the simulation: Inserting Flash video files

Publishing your site

This tutorial shows you how to set up a remote site with Adobe Dreamweaver CS3 and publish your web pages. A remote site is usually a place on a remote computer, running a web server, that holds copies of your local files. Users access the remote site running on the web server when they view your pages in a browser. Click the link below to begin the simulation.

• Play the simulation: Publishing your site

About the author