Creative Blogs

Our company runs training courses on Adobe Dreamweaver, the industry-standard web development software. And we are increasingly finding that the profile of the person wanting to learn Dreamweaver is becoming distinctly, well, frankly, unpredictable! It seems that just about anyone nowadays can find themselves needing to build a website or to create web content in some shape or form.

Of the people now wanting to learn Dreamweaver the vast majority attending our courses will not necessarily become specialists in web development. Rather they have a need to develop content for a web site or to build a web site for a particular purpose. They have looked into the choices of software available and come to the conclusion that Dreamweaver is the best package to use and now they need to learn how it works.

So how has Dreamweaver attained its enviable position as the industry standard web development software? And is this position deserved? The second question is easier to answer than the first, so let’s deal with that one first. The answer is “Yes”: Dreamweaver deserves its position because it is such an excellent piece of software and because it demystifies the whole business of web development and puts it within reach of so many people. As to how Dreamweaver got where it is, well it did so by evolving, responding to changes in the web arena and embracing new web technologies as they have come along.

In the early days of web development, there were two types of web development tool: those used by coders (the specialists who understood the technologies underlying web pages) and the visual software tools which functioned in a manner similar to word processing and page layout programs and were used by non-specialists and inexperienced web developers. The visual programs (which included Dreamweaver) had a very poor reputation among web professionals who found that the code produced by these programs was clumsy, verbose and inefficient.

With each release of Dreamweaver, Macromedia continued to add features which showed that they understood the need to create clean code even when using visual tools. They added features to the program for maintaining the integrity of code and removing redundant elements. They enhanced their coding environment with features like line numbering, code hints and the tag selector, a feature which displays the tag underlying the currently selected element and the hierarchy of tags in which the element is contained. They also added the ability to verify whether a web page contained code incompatible with certain browsers.

Macromedia also added a number of features aimed at speeding up web development which they knew would be attractive to serious web developers. For one thing, they offered a series of features which would automatically generate server-side content and save developers a great deal of programming time. Initially, these features were only available in a special edition of Dreamweaver called “Dreamweaver UltraDev”. When these features became available in the standard edition of Dreamweaver, the program became much more attractive to the serious web developer.

Recognising that many web developers are members of a team, Macromedia also added features to Dreamweaver allowing teams of people to collaborate on the same site while avoiding the risk of two people making conflicting changes to the same page. Dreamweaver’s collaborative features were called “File Check in/Check out”. The program also introduced a feature known as “Design Notes”. This allowed one developer to attach a note to a particular web page which could then be browsed by other members of his or her team.

As new technologies have emerged, the makers of Dreamweaver have also responded by taking them on board and modifying the way the program generates code. Thus, in the latest release of the program, Dreamweaver CS3, it is assumed that the user will be building websites using cascading style sheets (rather than HTML tables as was previously the case) and Dreamweaver offers a series of thirty or so different CSS page layouts that can be used to build efficient pages and adapted and personalised at will.

Dreamweaver CS3, the latest version of the program, also incorporates some great new features for adding Ajax functionality to web pages. Ajax offers web developers a way of creating web applications that execute rapidly and are seamlessly incorporated into the standard content of the web page. Coding Ajax web applications requires a good knowledge of JavaScript programming. Using Dreamweaver’s Spry Framework for Ajax, developers can create sophisticated Ajax applications without having to write the code themselves.

As new features are added to Dreamweaver with each new release, the program continues to have an interface which is user-friendly and approachable by any experienced computer user, bringing web development within reach of just about everybody on the planet. And it is this policy of satisfying the needs of professionals as well as beginners which will doubtless continue to make it the obvious choice for anyone wanting to develop web content at any level.

Cascading Style Sheets (CSS) is a W3C standard mark-up language for defining the appearance of web pages. The use of CSS allows developers to fully separate the content of the page from its presentation, speeding up the development process and also making the pages load more quickly in the browser. Whereas 20th century websites typically used tables to construct web pages and position elements, CSS now provides a cleaner and more efficient way of controlling all aspects of web page layout.

Adobe Dreamweaver has long had support for the use of CSS and has responded to the growing importance of this pivotal technology. Dreamweaver’s implementation of CSS is all the more important since many of the people using the program are not specialist web developers and rely on Dreamweaver to guide them through the maze of technologies which drive web pages.

Previous versions of Dreamweaver assumed that most users would be using tables to control the layout of their web pages. Dreamweaver CS3 is the first version of the program which encourages users to create CSS-based web page layouts. When the users create a new web page, they are offered a series of CSS layouts, on which they can base the new page, consisting of single, double and three column designs.

Instead of using tables to control positioning of web page content, CSS page layout makes extensive using of the DIV element an HTML construct which can contain just about anything, including other DIVs. The preset pages created by Dreamweaver CS3 contain a series of DIV element with the CSS code that controls their positioning. The placeholder text within the DIVs includes useful tips on customising the preset pages for your own use.

The CSS code for pages created using Dreamweaver’s preset layouts is embedded in the page itself. If a user creates a series of such pages, each one will have its own CSS code making updating very time-consuming. It is far more efficient to have all of the CSS code in one external file and link each page to this one file. At present, Dreamweaver doesn’t really make this clear to new users. However, it does have an excellent feature for moving embedded CSS code into an external file. You simply select all of the CSS definitions you wish to externalise then choose Text - CSS Styles - Move CSS Rules.

Moving CSS code into an external file is not something a beginner would be expected to think of doing and is not something that Dreamweaver recommends to new users. So, in spite of the improvements, some familiarity with CSS is still required to get Dreamweaver to handle CSS efficiently.

Dreamweaver CS3 still has includes the automatic creation of CSS styles whenever the user applies font attributes to text. Simply removing the ability to select text and apply these basic attributes would prevent this from happening. From a beginner’s point of view, it would be far more useful to just have a “Style” menu with an option to create a new style if no styles already exist.