Managing Web Sites With Macromedia Dreamweaver MX 2004

Back in the early days of the Internet, the entire Web presence of a large corporation could be designed, hand coded and managed by a single person. Those days are long gone. Today's Web sites incorporating multiple technologies, integration with databases and content management systems, and a movement towards usability and Web standards are produced by an entire Web development team. The transition from simple Web sites developed by a "jack of all trades" Web Master to complex sites developed by a multidisciplinary team including information architects, visual designers, and Web developers has been accompanied by the evolution of Web development tools from simple text editors to sophisticated development environments and site management systems. Dreamweaver MX 2004 is an example of the latest generation of Web development and site management tools. Although there is room for continued refinement, Dreamweaver MX 2004 is the best tool of its type.

A Brief History of Macromedia and Dreamweaver

Macromedia, Dreamweaver MX 2004's software publisher, was formed through the merger of three small software companies: Macromind, Paracomp, and Authorware. (Macromedia) Macromind was most well known for Director, a groundbreaking application still in use today for developing multimedia presentations. Many Director customers created 3d renderings and animations using Paracomp's Swivel3D. The two companies saw a synergy in their products and formed Macromind Paracomp in late 1990. Soon thereafter, Macromind Paracomp merged with Authorware to form Macromedia in 1991. Authorware released a software tool very similar to Director, but targeted towards developing computer-based training.

During the 1990s, Macromedia looked for ways to expand their software offerings beyond their initial focus in multimedia authoring tools. Macromedia's forays into new markets, which met with modest levels of success, included the development of tools for digital audio editing and font design among others. In 1996, Macromedia ventured into the emerging wysiwyg (what you see is what you get) web publishing market with the introduction of Dreamweaver. Dreamweaver exceeded their expectations with 60,000 downloads of the software in the first few weeks of release. Dreamweaver quickly became Macromedia's best selling software and the market leader for wysiwyg web design.

By 1998, Macromedia offered an entire web development suite that included Flash for creating low bandwidth animations, and Fireworks for creating and optimizing graphics. The goal with their suite of web development tools was to integrate their products with their customer's current workflows.

Updated versions of Dreamweaver have been released on roughly an annual basis. Concurrent with the release of Dreamweaver 2.0, Macromedia released Dreamweaver 2.0 Attain, which was targeted for the education market. Dreamweaver 2.0 Attain included special components for creating online courseware. Concurrent with Dreamweaver 3.0, Macromedia introduced Dreamweaver Ultradev for creating dynamic Web sites. Ultradev, which incorporated support for cold fusion, asp, java, php, and sql, included an easy to use graphic interface for connecting to a database and designing and testing dynamic pages. The functionality of Ultradev was rolled back into the main program with Dreamweaver MX, the sixth Dreamweaver release. (Arah) The most recent version, Dreamweaver MX 2004, offers more complete support for css and stresses the use of Web standards.

Creating a Web Site With Dreamweaver

The advantage of using Dreamweaver to create a Web Site is that it is an extremely flexible tool. For example, there are multiple ways to view an html page. There is a "design view" (see figure 1A) which shows an approximation of how the html page will render in a browser and there is a "code view" (see figure 1B) where the html code for the page can be seen. In addition, there is a "split view" (see figure 1C) option where the top pane of the window shows the code view, and the bottom page of the window shows the design view. (McFarland, p. 278) The user may adjust the proportion of the window showing the code view and the proportion showing the design view. When the user makes a change in the design view pane, the html in the code view pane updates automatically and vice versa.

Dreamweaver supports multiple work styles by looking and feeling like an IDE for the coder and looking and feeling like a graphics tool for the visual designer. The Windows version allows the user to choose either a code environment where the software's preferences are set to present code as the default, or a design environment where preferences are set to favor the graphic interface of the design view.

Another aspect of Dreamweaver's flexibility is in the multiple ways that a uniform design may be maintained across all pages of the site. The user may choose to use any combination of CSS, and Dreamweaver templates and libraries to ensure consistency on their site. Dreamweaver offers a robust support for CSS, so many aspects of the design may be defined in a separate CSS document that is referenced across the pages of a site. Dreamweaver templates (see figure 2) may also be used for designing the visual layout and composition of a page. Templates are most useful when a design changes. Rather than editing each page by hand, the user need only make the editing changes to the template, and Dreamweaver will automatically update all pages that use that template. Templates may also be nested. (McFarland, p. 552) For example, a base template may be constructed containing the primary navigation. This template could be used to build a separate template for each section of a web site. Where changes to the primary navigation would be made to the base template, changes to the design   of a particular section would be made to the template for that section. Within a template, users may define editable areas, a special type of editable area that interacts with a database, and an optional editable area that is only included when one or more predefined conditions is met. Where templates are used for designing the layout and composition of the page, library elements are items that are placed within the page. Similar to templates, when a library item is edited and saved, all instances of that item within the site are updated. (see figure 3) Library items may include html, or any kind of code such as JavaScript or php.

There are multiple ways to work with Dreamweaver to build a site. One method for creating a website using Dreamweaver is to first use a combination of css and html to design the layout of a page. Save standard page elements as library items. Save the page as a template and designate which regions of the page are editable. Next design the structure of the site by adding a folder for each section of the web site. Populate the site with content by using the template to build each page. Use library items for standard page elements. Finally add the html links.

Managing a Web Site With Dreamweaver

Dreamweaver offers many tools and processes that help to manage a web site after it has been designed and built. The best web sites are living documents that change and grow over time. Once a site has been constructed using templates and library items, it is easy to update and add content. New pages may be built from existing templates. (see figure 4) New templates may be built that incorporate existing templates. And existing templates may be modified to reflect the changing focus of a web site. And once a template has been changed, all the pages that use that template are changed as well. Similarly, new library items may be added and existing library items may be modified. Also, links within the site are automatically changed when files are moved or renamed.

Whenever more than one person is working on a website, overwriting files on the server is a problem. Dreamweaver has an easy to use file check out system that helps to prevent the loss of work from overwriting files. (figure 5) The check out system locks a file until it is checked out. Once checked out, it gives a visual cue that the file is being used and lists the users name and email address. Checked out files may be opened as read only. Check out may also be overruled. Dreamweaver also supports group work on a Website through Contribute, Macromedia's content management system that integrates with Dreamweaver. Contribute includes a subset of Dreamweaver functionality and allows content providers to open templates and build new content pages.

Advantages of Using Dreamweaver

There are many advantages with using Dreamweaver for designing and maintaining web sites. First of all, building and editing web sites is fast. A user may start with one of many supplied css templates and quickly modify it for her purposes. The GUI interface allows for simultaneous designing and coding. The user can see what their html looks like immediately after writing the code. The split view interface allows the user to quickly build a page in the design view and then refine the html in the coding view. Also, code that needs to be modified may be located quickly by selecting the corresponding element in the design pane. The code pane automatically scrolls to the html for the selected element and highlights the code. The ability to work form one interface also speeds up web development. Dynamic features may be added to a site through the use of page behaviors, Dreamweaver's JavaScript interface, and server behaviors, Dreamweaver's database connection interface. Also, basic image optimization may be accomplished within Dreamweaver and more advanced image processing may be accomplished through the close integration between Dreamweaver and Fireworks. Finally, Flash buttons and other basic Flash elements may be added within the Dreamweaver interface.

Another advantage to using Dreamweaver is that the program is extensible. Hundreds of third party extensions that add functionality may be downloaded for free or purchased. Extensions are usually written in html, JavaScript, or C. Most extensions do one or more of the following: automate changes to a document, interact with Dreamweaver to open or close windows or documents, connect to a data source, insert or manage a block of server code. Dreamweaver offers both a JavaScript API and a Utility API.

Finally, Dreamweaver is customizable. The user may set preferences controlling how and to what extent accessibility is coded. The user may adjust code coloring, what fonts are used for coding, and how code is highlighted. The user may also set which browsers to use for previewing a page. Besides setting preferences, the user may also directly edit the configuration files. In this way, menus may be rearranged to suite individual taste. Tabs may be added or removed. The names of commands may be changed, added, or removed. Anything about the look and feel of Dreamweaver may be customized within the configuration files.

Disadvantages of Dreamweaver

Although Dreamweaver may be the best software of its type, there are several disadvantages with using it. First of all, Dreamweaver has a steep learning curve. It is a complex program that is difficult to master. In the time it takes to learn Dreamweaver, an individual could be productively hand coding web pages. Also, many of the existing features could be improved. The check in/check out feature, for example, is buggy. When checking in multiple files, some files remain checked out. The user must review her file list for missed files and check them in once more. Pages built from complex nested templates sometimes become corrupt during use and must be rebuilt. The visual interface for building tables does not always work. The user must switch between code views and various design views in order to optimize table construction. Although for the most part, Dreamweaver generates efficient html code, the code usually needs to be touched up by hand after making several subsequent changes in the design view. Also, the site map feature needs a great deal of refinement in order to really be useful. Rather than showing a true site map, this feature shows to which pages each page links. The user may continue to follow the link structure in circles. Finally, even though Dreamweaver is very flexible, the interface suggests a particular workflow. Dreamweaver reflects its origins as a wysiwyg web design tool by favoring visual methods of coding pages.

Although far from perfect, Dreamweaver MX 2004 is the best tool of its type and gets a little better with each iteration. Dreamweaver's flexibility facilitates its use by all members of a multidisciplinary Web design team. Dreamweaver is arguably the best stand alone tool to use for developing today's complex Web sites that incorporate multiple technologies, integration with databases and content management systems and that strive for increased usability and use of Web standards.