Website creation: Dreamweaver v open source

Website creation: Dreamweaver v open source

Summary: Adobe's Dreamweaver is widely used by web developers, but it won't suit Linux users or those on tight budgets. Free and open-source (FOSS) alternatives are available, but how do they match up?

SHARE:

Recent years have seen huge changes in internet use, and therefore in the challenges presented by modern website design. Software developers are consequently racing to catch up and provide website design, creation and management tools that address these changes.

The advent of cloud computing, eCommerce, Web 2.0, the growth of mobile apps and the introduction of HTML5 — a standard that's still under development — have all had a huge impact on web design and the tools to implement it. Not only do web developers now have to deal with browser interpretation issues, but they also have to build sites that smoothly adapt to a range of different form factors. Pages must present equally well on a smartphone or tablet screen, in either vertical or horizontal mode, as they do on a large, wide-screen, desktop display.

The entire business of website creation has changed and now encompasses a range of disciplines — graphic design, web design, programming, system integration, audio editing and video editing, for example. Larger commercial web sites use Content Management Systems (CMS) such as Drupal and Joomla! along with a variety of programming tools and languages — including PHP, Ruby on Rails and JavaScript — to provide custom features.

In this context WYSIWYG web site authoring tools, such as the earlier versions of Adobe's Dreamweaver, might seem to be outmoded. In this feature we compare Dreamweaver — once an application that dominated web site creation — to a variety of open-source tools available for web design.

Dreamweaver's background
Dreamweaver began life in 1997 as a product of Macromedia, a companyacquired by Adobe in 2005. Version 1.0, a Mac-only application, was released by Macromedia in 1997. A Windows version followed in 1998, and the last Macromedia version appeared in September 2005. In 2007 Dreamweaver replaced GoLive 9 — Adobe's WYSIWYG HTML editor of the time — in the Creative Suite family, and HTML5 support was added to Dreamweaver in April 2011. The current version is Dreamweaver CS6 (a.k.a. Version 12.0) and runs on Microsoft Windows XP (SP2), Vista (SP1) and Windows 7. It is Cocoa-native optimised for better performance on Mac OS and runs on Apple Mac OS X 10.6 or 10.7.

A full boxed copy of Dreamweaver CS6 costs £301 (or £291 to download); upgrades cost £94.51 (£91.33) from CS5.5, or £190 (£184) from CS3-CS5, or it can be had on subscription for £14.29 per month. Dreamweaver CS6 is also available as part of the £1,509 Design/Web Premium and £2,223 Master Collection suites, and via a £39 per month Creative Cloud annual subscription (an introductory £22.23 per month offer is available for owners of CS3 or later products until 31 August). All prices quoted are excluding VAT.

Dreamweaver features

Dreamweaver CS6 with the Designer workspace and the page Split button selected to show the page design view on the right and the corresponding code view on the left

One of the most attractive things about Dreamweaver — and perhaps the reason for its success — is its ability to pair a WYSIWYG page view with the parallel code view. Originally Dreamweaver only supported HTML, providing all the functionality needed to build web pages by inserting tables, forms, links, images, text and so on from menu selections. The HTML code behind any page feature created in the page view was — and still is — automatically generated, but Dreamweaver also allows for direct code editing.

Since acquiring Dreamweaver seven years ago, Adobe has expanded both its code-editing abilities and its automated features. By adding multi-format site-building tools, Adobe has eliminated the need to write different versions of website code to handle different layouts or form factors. Several tools for previewing and testing Dreamweaver code provide the necessary debugging functions.

Dreamweaver is a powerful programmer's editor/IDE, with support for a wide variety of web-related languages. It's also a page-element-based design editor with automatic page code generation and preview tools. This dual personality makes it attractive to both programmers and web designers.

Dreamweaver workspaces and views
Adobe uses the concept of a workspace comprising several viewing and control panels in a number of its products. The visibility, size and position of these panels are user-adjustable, and particular configurations can even be named and saved. Adobe also provides a number of preset configurations, suited to particular tasks, which can be selected using the Views drop-down menu.

Dreamweaver's Views menu lets you select from a number of task-related Workspace presets

Further flexibility for each tabbed page is provided by four buttons — Code, Split, Design and Live — on the top left of each page below the page tab, that allow those views to be selected for individual pages.

Creating a new document and Fluid Grids

Selecting the Fluid Grid Layout in the New Document window shows the settings for multi-format layouts

There are various options when starting a new site design, but one of the most likely selections is a multi-format site design that will be readable on a range of device types. Adobe's Fluid Grid Layout greatly simplifies the setup for such a site: initially you can set grid columns appropriate to a device, with rows and divided rows in the grid defined by creating Div tags (div for division) as containers for page content. Div tag widths can be manipulated in the page view and will snap to the nearest column widths.

An introductory Fluid Grids video is available from Adobe TV.

CSS & animation with CSS3 Transitions

The Media Queries panel lets you specify different CSS files for different display formats; media queries, which can be site-wide or page-specific, are generated automatically when the default presets are selected

New in Dreamweaver CS6, support for CSS3 Transitions allows animations to be created without recourse to JavaScript. For example, CSS3 transitions can be used to create rules that automatically expand sections of a page whenever the mouse cursor hovers over them. An Adobe TV video is available that explains this in greater depth.

Editing styles directly in the page view results in Dreamweaver automatically generating an appropriate CSS file.

Dreamweaver and code editing

The Coder or Coder Plus views rearrange the Dreamweaver workspace for code writing and editing

All the code displays in Dreamweaver use colour highlights to show which portions of the code are HTML, CSS, JavaScript and so on — an approach that makes it much easier to follow and debug code. During code editing Dreamweaver provides predictive suggestions as you type, so you don't have to thoroughly memorise all the required tags, attributes, functions and syntax. Rather than accurately type long property strings, you can type just a few letters and accept a suggestion, which saves time. Built-in error checking also makes coding a lot easier. The current version of Dreamweaver includes support for HTML5, CSS3, XML, ActionScript, ASP.Net C# & VB, JavaScript, JSP, PHP and ColdFusion.

Dreamweaver and page debugging

The Dreamweaver CS6 Multiscreen preview menu

The Multiscreen preview showing a web page rendered for the three main form factors — Phone, Tablet and Desktop

The live view in Dreamweaver CS6 uses the latest WebKit open-source browser engine to render web pages as they might appear when read by a 'generic' browser. For more accurate 'real-world' views of a page, Adobe provides an online service called BrowserLab, which is integrated with Dreamweaver. Once signed in, web designers can check the appearance of their site designs in a range of browsers via a temporary upload to the BrowserLab servers.

Topics: Apps, Open Source, Reviews, Software

Kick off your day with ZDNet's daily email newsletter. It's the freshest tech news and opinion, served hot. Get it.

Talkback

13 comments
Log in or register to join the discussion
  • DW bias and things I did not mention

    Responding to some tweets about this story - I don't feel it is Dreamweaver heavy. A few years ago Dreamweaver was being dismissed as no longer relevant to web site design. I believe that Adobe has made significant efforts to bring Dreamweaver up to date and the recent CS6 release has some powerful new features making it a useful tool for today's web development. That is why I covered it in some depth. Balanced against that I looked at six open source web development tools. To me a ratio of six to one does not seem to be under representing FOSS. I did point our that the majority of enterprise level web development today is centred around CMS and web centric programming language tools. Also this feature was not intended as a software review, or a collection of software reviews, but as a look at what is available and in use for web creation and management.

    Inevitably some things did not get mentioned - for example Macromedia's Homesite page code editor because it really isn't relevant, it was retired in 2009, and EMACS because - yes it can edit HTML, but I feel it is a general purpose editor.
    terry@...
  • DW bias and things I did not mention

    Responding to some tweets about this story - I don't feel it is Dreamweaver heavy. A few years ago Dreamweaver was being dismissed as no longer relevant to web site design. I believe that Adobe has made significant efforts to bring Dreamweaver up to date and the recent CS6 release has some powerful new features making it a useful tool for today's web development. That is why I covered it in some depth. Balanced against that I looked at six open source web development tools. To me a ratio of six to one does not seem to be under representing FOSS. I did point our that the majority of enterprise level web development today is centred around CMS and web centric programming language tools. Also this feature was not intended as a software review, or a collection of software reviews, but as a look at what is available and in use for web creation and management.

    Inevitably some things did not get mentioned - for example Macromedia's Homesite page code editor because it really isn't relevant, it was retired in 2009, and EMACS because - yes it can edit HTML, but I feel it is a general purpose editor.
    terry@...
  • BlueGriffon

    Another open-source application that probably deserves a mention here is BlueGriffon (http://bluegriffon.org/), which offers HTML5 WYSIWYG and source editing with a collection of interesting features. It is not a continuation or fork of the Nvu or Kompozer project, but rather a more up-to-date alternative with a rewritten code base, created by Nvu's original developer.
    pierre4l
    • BlueGriffon - Only Problem one might face with it really is...

      The thing with BlueGriffon is,, while the app itself is free and open-source, the plugins cost money, granted probably still probably cheaper to purchase all the plugins then to purchase dreamweaver, but meh.
      Brandon Kline
      • Correction

        granted still probably cheaper*
        Brandon Kline
  • BlueGriffon - I second that

    I second BlueGriffon.
    joeycagle
  • DreamWeaver is too bloated

    DreamWeaver is too bloated. What I want is a decent text editor optimized for html/css/js, plus Firebug. But that's two serrate tools and you'll have the 'code sync' problem - that means you'll have to remember what you changed in Firebug (or the likes) and do those changes again in your code editor. That's a pain I can't bear with and it's driving me developing LIVEditor at http://liveditor.com.
    edwinyzh
  • lili

    Lo bueno de su información es que es bastante explícito para que los estudiantes de entender. tee shirt femme pas cher Gracias por sus esfuerzos en la difusión del conocimiento académico.
    misjoyo
  • Linux Web Development tools like Dreamweaver

    The author omitted Quanta Plus/Quanta Gold that is a complete and feature rich Web Development tool set that competes with Dreamweaver, and does some things for which Dreamweaver is deficient.

    Conection to MySQL, PostGreSQL, Oracle and other databases in a more sophisticated integrated manner is not a strong point of Dreamweaver. Plus it uses the QT Development environment that will allow " full " Web Applications.

    The author also for to mention other world class Content Management Systems (CMS) software like Django-CMS and Plone CMS/Portal , with capabilities far beyond those of the popular Drupal and Joomla, that most articles only seem to mention.
    wanderson
  • Dreamwaver, a very poor tool

    I prefer 10 times bbedit, or netbeans (a different horse I know); avoid as much as possible DW, but need to use sometimes (is that or notepad) on a Windows environment. Coding is crappy, many annoyances. The problem, the program started as a graphic editor, geared to people that dont know how to code. But a professional would better use tools for coders (bbedit), not for graphic designers.
    theo_durcan
  • Dreamweaver is old but still gold....

    We know that Dream Weaver is being outdated but still in use as it is easy to use and really good for beginners to learn web page development.
    cdndesignstudio
  • This was a simple comparison, people

    Authors use what they want and what they are used to. Some professional writers don't use computers or anything other than their trusty Remmington-Rand Manual Typerwriter. This is what they are comfortable with and don't want to change.. You're free to use Notepad or Emacs or whatever.. IDE's just make things easier and CAN increase productivity, but you lose a bit of control over the final product.

    The important thing is the final product that is displayed on the users browser, how you got there is irrelevant.
    dwj7738
  • LAZYCASH1.COM

    what Albert responded I'm blown away that some one able to profit $6958 in a few weeks on the internet. did you look at this page >>> Click2go.notlong.comAT
    LivingstonLatonya