Adobe Dreamweaver CSS Tutorials
Choosing the right Selector for CSS style rules
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. 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
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)
Create a Custom Centered Design using Div tags and CSS in Adobe Dreamweaver
Step-by-step instructions for creating a two-column, centered design using divs and CSS in Adobe Dreamweaver. (Free tutorial for Adobe Dreamweaver 8 and CS3)
Creating a Navigation Menu Bar using an Unordered List with CSS Styles
A complete lesson in creating rollover effects for a collection of links by creating a styles for the unordered list and links tags. (Free tutorial for Adobe Dreamweaver 8 and CS3)
Using Floats in CSS to Wrap Text and Align Images and other Elements left or right
Use CSS floats to wrap text and align images left or right in Dreamweaver. When it comes to positioning and designing images, you'll find many styles to choose from. Free tutorial for Adobe Dreamweaver 8 and CS3
Comparing Layout and Design in Dreamweaver: Should you use Tables, Layers, AP Divs, or CSS?
There are many ways to create a layout to control the placement of images, text, and other elements on your pages in Dreamweaver.
Read this article for a review of the popular options:
More Adobe Dreamweaver tutorials
Short funny clip from Adobe Dreamweaver CS4 training video
For specific questions, search the Dreamweaver FAQ.
For more comprehensive training, try 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.
Free Step-by-Step Tutorials for Dreamweaver
Adding a Drop-Down Menu with Ajax using the Spry features in Dreamweaver CS3
One of the most dramatic enhancements to Adobe Dreamweaver CS3 is the Spry framework, a new set of tools you can use to create drop-down menus, collapsible panels, and other advanced interactive features. There are so many Spry features, Adobe added a new Insert bar to the top of the work area to provide easy access to all of the Spry options.
Spry makes it easy to create AJAX, a combination of CSS and JavaScript that makes it possible to create elements that can be changed without reloading a page.
The following tutorial shows you how to create a horizontal drop-down menu bar for site navigation. 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)
Creating Collapsible Panels with Spry in Dreamweaver
(An AJAX-inspired Interactive Effect)
Adobe introduced the new Spry menu in Dreamweaver CS3, adding a powerful set of tools for creating interactive AJAX-style features.
Using the tools in this new menu (located at the top in the Insert bar at the top of the workspace), you can create a variety of AJAX-inspired interactive effects, such as the collapsable panels featured in this step-by-step tutorial. (Free tutorial on Adobe Dreamweaver CS3 Spry Feature)
Multimedia Tutorials
Inserting Flash Files into a Web Page with Dreamweaver CS3
Dreamweaver can insert Flash video (.flv) files, as well as Flash files with the .swf extension. In the last issue, I used Dreamweaver to add Flash video to a Web page. 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.
Inserting Flash Video with Dreamweaver CS3
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.
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 Elements (a good video editor for beginners) and then choose File->Export to convert it to any of a dozen other formatting and compression options.
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 Behaviors for Adobe Dreamweaver 8 and CS3)
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 and CS3)
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 and CS3)
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 and CS3)
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
