Free Dreamweaver tutorials & videos
Illustrated lessons for Adobe Dreamweaver CS4, Adobe Dreamweaver CS3, and Macromedia Dreamweaver 8
Short funny clip from Adobe Dreamweaver CS4 training video
You'll find more free video tutorials in our video training section.
For specific questions, search my Dreamweaver FAQ.
For more comprehensive training, try these Total Training Dreamweaver training videos or a book, such as Dreamweaver CS4 For Dummies.
To find answers to questions or start learning Dreamweaver right away, click on any of the links on the left, or read through the introductions to the tutorials below.
More Free Tutorials for Dreamweaver 8, CS3, and CS4
Adding a Drop-Down Menu with AJAX using the Spry widgets in Dreamweaver CS3 and CS4
The Spry framework is a set of widgets Adobe added in version CS3. This collection of tools makes it easier to add advanced features, including e drop-down menus and collapsible panels.
These features are included in the Spry Insert bar at the top left of the workspace in Dreamweaver CS3 and in the Spry Insert panel at the top right in Dreamweaver CS4.
With Spry you can easily create AJAX features, which combine CSS and JavaScript to create elements, such as collapsible panels that can be opened and closed without site users needing to reload a page.
This tutorial shows you how to create a horizontal drop-down menu bar for site navigation using the Spry widget. You can also use these steps to create a vertical menu bar by selecting Vertical instead of Horizontal in Step 5. (Free tutorial for Adobe Dreamweaver CS3 and CS4)
Creating Collapsible Panels with AJAX using the Spry widgets in Dreamweaver CS3 and CS4
Using the Spry menu in Dreamweaver CS3 or CS4, , you can create a variety of interactive features using AJAX, such as the collapsible panels featured in this step-by-step tutorial. (Free tutorial on the Spry feature in Adobe Dreamweaver CS3 and CS4)
Multimedia Tutorials
Inserting Flash Files into a Web Page with Dreamweaver CS3 and CS4
Dreamweaver can insert Flash video (.flv) files, as well as Flash files with the .swf extension. In this tutorial, you learn to insert Flash files with the .swf extension. The process is similar to inserting an image file, but Dreamweaver has more settings for Flash. (Free tutorial on inserting Flash video files in Adobe Dreamweaver CS3 and CS4)
Inserting Flash Video with Dreamweaver CS3 and CS4
The day that everyone has long predicted arrived. Video is no longer a novelty online and Flash video has become the darling of the Web, favored by video giants YouTube and Google Video, as well as a growing number of Web designers. What makes Flash so special? Not only does it combine good quality with great compression, it comes with a video player that is already in use by 95% of Web surfers.
In this column, you discover just how easy it is to convert video to Flash, get a look at how the well-integrated programs in Adobe CS3 Production Premium make it easy to get your video ready for the Web. And, once your video is ready, just follow the step-by-step instructions in this column to add the file to a Web page with Dreamweaver.
(Free tutorial on inserting Flash .swf files in Adobe Dreamweaver CS3 and CS4)
Converting Video into Flash with the Flash Video Encoder
You can convert video from one file format to another relatively easily using most video-editing programs. For example, you can open a video in AVI format in a program such as Adobe Premier and then choose File->Export to convert the video to any of a dozen other formatting and compression options.
If you have any of the Adobe CS3 or CS4 program suites, which include Flash, you should also have the Flash Video Encoder, a handy little program that makes it easy to convert video from almost any format into the Flash video format, one of the most widely-used and recommended formats on the Web. (Free tutorial on converting video with the Flash video encoder)
CSS Tutorials
Understanding Selector options for CSS style rules in Adobe Dreamweaver CS4
In Dreamweaver CS4, Adobe changed the style selector options and added new features to make it easier to create styles. Understanding (and remembering) the differences among the various types of style selectors can be a challenge.
This tutorial provides a quick review of the selector options and when you should select one over another. Consider this a handy reference and a crash course in choosing the best selector type for your styles. (Free tutorial for Adobe Dreamweaver CS4)
Choosing the right selector for CSS style rules in Adobe Dreamweaver 8 and CS3
Even if you've been working with CSS for a while, understanding (and remembering) the differences among the various types of style selectors can be a challenge.
If you're using Dreamweaver 8 or CS3, you can use this handy reference to determine the best selector type for your styles. (Free tutorial for Adobe Dreamweaver CS3 or 8)
Customizing CSS Layouts in Dreamweaver CS3 and CS4
Whether you're new to CSS, or you’ve been struggling (I mean designing) with styles for decades, the new collection of CSS layouts included in CS3 are a welcome addition to any designer’s arsenal – as long as you know how to customize them.
If you're new to CSS, altering one of these layouts may seem confusing at first, but it’s certainly easier than starting from scratch. If you’ve been using CSS for a while, you may appreciate the head start these layouts offer, and you shouldn’t have too much trouble finding the styles you need to customize the design. (Free tutorial on customizing CSS Layouts in Adobe Dreamweaver CS3 and CS4)
Centering a CSS Design using Div tags and styles in Dreamweaver 8, CS3, and CS4
In this tutorial, you'll find step-by-step instructions for creating a simple, two-column, centered design using divs and CSS in Adobe Dreamweaver. (Free tutorial for Adobe Dreamweaver 8, CS3, and CS4)
Creating a Navigation Menu Bar by using an Unordered List with CSS Styles
Here's a great CSS trick for turning a bulleted list into a navigation bar with a simple rollover effect. Using a bulleted list for navigation bars is a well-accepted convention that meets current accessibility standards.
A bulleted list is a logical choice for navigation elements because even if the style is removed, the links still stand out from the rest of the elements on the page.
Thanks to CSS, you can format your links with any style you choose so you don't have to keep those boring bullets and you can align your links horizontally or vertically.
Also, using CSS instead of images to create a rollover effect helps your page load faster. (Free tutorial for Adobe Dreamweaver 8, CS3, and CS4)
Using Floats in CSS to Wrap Text and Align Images and other Elements left or right
If you've ever been frustrated by the limitations of V space and H space (that's vertical and horizontal space for those unfamiliar with HTML), you're going to love what CSS can do for your images.
In the days when H space and V space were the only options, you could add margins around images, but you had to add the same amount of space to both sides, which almost never looked good in anyone's design.
As you'll learn in this tutorial, using CSS to create styles for your images instead enables you to quickly and easily align images to the right or left of a page, and add margin space exactly where you want it to create space between the image and any text that wraps. (Free tutorial for Adobe Dreamweaver 8, CS3, and CS4)
Working with Behaviors
Creating Complex Effects with the Swap Image Behavior
Use the Swap Image behavior in Dreamweaver to change multiple images at once with a simple rollover effect.
In this tutorial, you'll learn how to swap several images at once.
(Free tutorial on the Swap Image Behavior for Adobe Dreamweaver 8, CS3, and CS4)
Using a Behavior to Launch a New Browser Window in Dreamweaver
You can use Behaviors in Dreamweaver to create many interactive features; like opening a small browser window when someone clicks on an image. This is a great way to make supplemental information available without closing the page a visitor is already viewing. (Free tutorial for Adobe Dreamweaver 8, CS3, and CS4)
Defining a Site in Dreamweaver
The first step to working on any site in Dreamweaver is defining your site and identifying a main root folder where you'll store all of the files and folders in your site. Take a few minutes to set up your site and Dreamweaver will manage your links properly. (Free tutorial for Adobe Dreamweaver 8, CS3, and CS4)
Enhancing Dreamweaver with New Extensions from Adobe.com
Extend Dreamweaver's capabilities by installing new extensions to create interactive navigation elements, Flash buttons, online shopping systems and more. (Free tutorial for Adobe Dreamweaver 8 and CS3)
Connecting an HTML Form to a Script in Dreamweaver
Creating a form isn't hard, but connecting to a script like sendmail can get complicated. (Free tutorial for Adobe Dreamweaver 8, CS3, and CS4)
Search the Dreamweaver FAQ for Answers to Your Questions
Queston: Does Janine really have a new Dreamweaver blog where she publishes the best questions she gets from her books and videos?
Answer: Yep, you'll find many common Dreamweaver questions in Janine's Dreamweaver FAQ blog, and you can email your questions to janine@jcwarner.com.
2-minute Trailer:
Adobe Dreamweaver CS3 video
If you prefer, click here to launch the video trailer in
WMV (Windows Media format).
Bring Janine to Your Conference or Event for a Dynamic Presentation
Combining her professional experience managing Web projects, with the knowledge she has gained as an author and video host, Janine teaches professional Web design with a focus on Adobe Dreamweaver and Microsoft Expression Web.
Call or email Janine to discuss how she can provide the right program for your group.
Partners and sponsors
