Dreamweaver a Nightmare? Learn How to Get The Most Out of This Popular Tool

Dreamweaver is a web design application which was originally created in 1997 by Allaire Systems.

The software was initially designed to deliver a more fluid and responsive development environment for coders and web page designers working within the confines of Apple’s proprietary Mac operating system.

In 1998 Allaire Systems was purchased by Macromedia, who continued to develop Dreamweaver into a full-featured web design and development toolkit for both Mac and Windows.

Under Macromedia’s management, Dreamweaver would become one of the more popular, if at times controversial, web designing platforms on the market, appealing to both the novice and the experienced website developer.

In 2005 Macromedia was bought out by Adobe Systems, where Dreamweaver quickly became a focus for further development by the company.

Since 2005 Adobe has released various iterations of the software, supported by a succession of updates intended to refine the application and bring it in line with the needs and expectations of coders and web designers in the 21st century.

The latest versions of Dreamweaver are far leaner than their predecessors, delivering cleaner code and more user-friendly web pages.

Adobe has also expanded Dreamweaver to include responsive design elements that allow coders and web designers to create online content that is compatible with multiple platforms including traditional browsers, tablets, and smartphones.

Adobe Dreamweaver at a Glance

Dreamweaver is a WYSIWYG (What-You-See-Is-What-You-Get) web design application.

Essentially, this means that developers can preview their web content as they go along, reviewing their pages and observing how their sites appear and respond to users on a selection of browsers and mobile platforms.

Dreamweaver features a dual interface, which offers the creator two methods of building their web content. They can choose to write original HTML code or, using the drag-and-drop feature, create whole pages using Dreamweaver’s large selection of specially built templates.

This drag-and-drop approach to web design has made Dreamweaver a favorite among less experienced web designers and developers, as it allows creators to work in a wholly visual medium with the program itself translating the designer’s choices into actionable HTML code.

It should be noted, however, that this same feature has been the source of some controversy among professional web designers, with many claiming that the table-based, drag-and-drop, method of web design results in overly cluttered and potentially bloated code.

While this complaint held some merit as regards Dreamweaver’s earliest iterations, the most recent versions (CS3, CS4, and CC), as developed and refined by Adobe Systems, have largely eliminated the problem.

Features

From its inception, Dreamweaver was designed to appeal to both the novice web builder and the experienced coder. This is perhaps most evident in its approach to displaying web content throughout the process of creation. Dreamweaver displays a work-in-progress in three ways:

• Straight Code View: this displays the raw HTML code as it is being written. Designers can write and edit the code manually, or rely on Dreamweaver to translate their design choices into code as they create their web content.
• Design View: this delivers a basic tree display which shows the web page’s basic structure, including primary sections, divs, and basic components. This section can be used to highlight, and edit, specific sections of the web page’s build and content.
• Live View: this displays the web content as it will appear within the user’s browser, with options to preview the material as it will appear on both static and mobile platforms.

One of the benefits of this approach is that it makes it easier to develop web content from scratch, while allowing the creator to see how their design choices appear in real time as well as in actionable code.

This gives greater flexibility to the experienced web designer, while allowing the novice to become more familiar with the ins and outs of coding in a more hands-on environment.

This is not to suggest that Dreamweaver is designed to be a course in coding or web design; it is not. But it does make it easier for less experienced web builders to become better at the craft.

Specifications and Syntax Highlighting

As with most web design applications and code editing software Dreamweaver allows the user to create and edit content locally, and then to upload the finished files to a remote webserver using FTP, SFTP, or WebDAV protocols.

Adobe’s Dreamweaver supports a wide variety of programming languages, with syntax highlighting available for the following web languages:

• HTML
• JavaScript
• CSS
• ASP and ASP.NET
• C#
• Visual Basic (VB)
• Java and JavaServer Pages
• Extensible Markup Language (XML)
• Wireless Markup Language (WML).

Since Adobe assumed control and development of Dreamweaver it has been made available for purchase in a number of different languages, including: English, Spanish, French, German, Russian Cyrillic, Japanese, and Chinese (both traditional and simplified dialects).

Getting Started — Online Tutorials

Dreamweaver’s WYSIWYG approach to web design does create a more user-friendly coding environment.

Having said that, it is a feature rich application that can be somewhat intimidating at first. Like any web development software, there is an inherent learning curve which can be relatively steep for beginner level designers.

More experienced web builders may find that Dreamweaver’s three-tiered user interface makes coding faster and easier, but even they will benefit from referring to a few tutorials before launching into an important project.

Whether you are an advanced web builder or a beginning designer, the following tutorials should provide a solid overview of the application and what can be accomplished using the latest versions of Dreamweaver.

• Getting Started with Dreamweaver CC: an introductory course in Dreamweaver for students with basic computer skills, this tutorial is structured as a series of video lectures covering every aspect of constructing internet ready web content.
• Adobe Dreamweaver Tutorial: hosted by Bring Your Own Laptop, this series of video tutorials are aimed at beginning web designers. The series concentrates solely on using Dreamweaver CC in the design and implementation of web content.
• Beginners Adobe Dreamweaver: Adobe’s own beginners class in Dreamweaver covers every aspect of website design and content creation. The 9+ hour series of video tutorials includes a basic overview of the software, and takes the student from initial prep work to final publication. An added section on SEO gives web builders an insight into how to optimize their content for better online performance.
• Dreamweaver — Introduction to Editing Web Pages (PDF): this free tutorial comes from California State University, Sacramento. The easy to understand guide gives students a basic understanding of the software, with an emphasis on formatting, style, and working with multi-media content.
• WordPress Themes and Dreamweaver – Collection of best online resources and tutorials for using Dreamweaver to create and edit WordPress themes.

Advanced Tutorials

While the Dreamweaver software does make it easier for beginners to experiment with web building, better results can be achieved when users learn more about the application and dig deeper into its available features.

Once the basics have been mastered, advanced tutorials are available to help users more fully exploit what Dreamweaver has to offer.

• Creating Accessible Web Pages with Adobe Dreamweaver (PDF): this free document presents a more in depth introduction to Dreamweaver, with an emphasis on the importance of web standards and accepted design practices. Students are expected to learn the best practices of web design and the importance of structure and function over appearance.
• Dreamweaver CS6 Tutorial (PDF): this downloadable document provides a basic introduction to Dreamweaver, and follows through with lessons aimed at beginning to intermediate web builders. An emphasis is placed on visual design and the importance of building responsive web sites.
• Adobe Dreamweaver CC: this is actually a series of tutorials created and hosted by Adobe systems. Each lesson is designed to build upon what the student learned in the previous video, with the intention of taking them from beginner to intermediate and expert levels.

Books

Over the years, quite a lot of literature has been devoted to Dreamweaver and its various iterations. Naturally, some of the books currently available will be more instructive than others.

But the best of them should provide a solid introduction to the Dreamweaver application, as well as giving the reader some valuable insights into coding and general web design.

There are many iterations of Dreamweaver still actively in use, so the following list will include books devoted to a specific version of the software.

• Dreamweaver CC: The Missing Manual by McFarland and Grover: available in both print and digital editions, it is one of the most comprehensive books on Dreamweaver.
• Dreamweaver CC: Visual QuickStart Guide by Negrino and Smith: this book is specific to the latest version of Dreamweaver, as released in 2015. It is a general introduction and learner’s manual for the software, targeted towards beginners and intermediate web builders.
• Dreamweaver CC for Dummies by Janine Warner: while not the most comprehensive book on the market, it is perhaps the most accessible for the general reader.
• Adobe Dreamweaver CC Classroom in a Book by Jim Maivald: an in depth guide to the Dreamweaver application, this latest edition includes details on Adobe’s use of their Creative Cloud feature to provide updates and enhanced features for the latest iteration of the software. Best suited for intermediate and advanced web designers.
• Murach’s Dreamweaver CC 2014 by Ruvalcaba and Boehm: the strength in this book lies in its emphasis on understanding the mechanics of web design and how to create web content that works well on multiple platforms. Ideal for more advanced coders and website developers.

Summary

Adobe’s Dreamweaver has become one of the most popular web building applications on the market, due in no small part to its appeal to both the novice and experienced designer.

As a coding tool and web designing platform it has much to offer, especially to those who are willing to invest some time and energy into fully exploring the software and its ultimate potential.

The resources gathered here should provide a basic introduction to Dreamweaver for beginning web builders, as well as offer guidance to more advanced coders and designers who wish to more fully explore the application while continuing to develop their web building talent.

The resources gathered here should provide a basic introduction to Dreamweaver for beginning web builders, as well as offer guidance to more advanced coders and designers who wish to more fully explore the application while continuing to develop their web building talent.

Further Reading and Resources

We have more guides, tutorials, and infographics related to coding and website development:

• Composing Good HTML: this is a solid introduction to writing well-formed HTML and using HTML validator software.
• CSS3 — Intro, Guides and Resources: this is a great place to start learning webpage layout.

HTML for Beginners — Ultimate Guide

If you really want to learn HTML, we’ve created a book-length article, HTML for Beginners — Ultimate Guide.

And it really is the ultimate guide; it will take you from the very beginning to mastery.

HTML for Beginners — Ultimate Guide