8 August 2010
Basic working knowledge of Dreamweaver, web standards (including CSS), and PHP will be helpful. A working Drupal installation—and the ability to add Drupal content—is required
As the popularity of Drupal and other content management systems (CMS) grows, designers who build dynamic sites are complementing their traditional workflow with a new one in which the site's content is managed by the CMS, while its look is created and managed in Adobe Dreamweaver CS5.
When using Drupal with Dreamweaver, individual pages are not built in Dreamweaver one-by-one. Instead you create and manage the content pages in Drupal, and you build and edit the theme design files in Dreamweaver. In Drupal an overall design and look is called a theme. A Drupal theme is simply a folder of files, such as CSS files and PHP templates (not to be confused with Dreamweaver templates). This separation of design from content is nothing new for programmers. For many designers, however, this workflow is new.
Designers need to be more hands-off about what markup appears for a particular portion of the page, which requires a different mindset. This workflow is now fully supported in Dreamweaver CS5, with its built-in support for open source content management systems including Drupal, WordPress, and Joomla! A key advantage of Dreamweaver CS5 is the ability to design a Drupal theme without needing to ever open a web browser. With the built-in Live View you can design and preview your theme in the same environment.
This article is divided into the following sections:
If you build websites and use databases to store their content then you are likely already familiar with CMS. Web CMS software provides a user, or group of users, with the ability to post and edit content online. Content management systems have long been the backbone of large media sites and blogs; most casual bloggers use a CMS even if they are not aware of it.
The most popular CMS options today are all open source, which means the source code is available for any adopter to use or modify as they want (subject to the terms of its license).
My open source platform of choice is Drupal. I chose Drupal many years ago. Recently the United States government chose Drupal for the updated official White House web site (www.whitehouse.gov). Using free community modules, the White House web site seamlessly integrates Drupal with web services such as Flickr for photos and YouTube for videos. Drupal also powers www.popularscience.com and 1% of the top million worldwide web sites rated by Alexa.
Drupal makes it easy to post and manage content, including articles, blog posts, and web pages; even navigation and sidebars are managed within Drupal. Because Drupal is freely available, there is a large and growing universe of add-on feature modules and theme designs that already numbers in the thousands.
Drupal is community-built and community-oriented. It is this vibrant community (and high market share for PHP) that pushes Drupal to the front of the CMS pack.
The game has changed for web professionals. Today a web designer must know not only HTML and CSS, but a little bit of PHP as well. Why PHP? Dynamic web sites are dominated by PHP, and will likely remain that way given the growing popularity of the open source movement.
Dreamweaver has supported PHP for almost a decade. Dreamweaver CS5 brings new levels of integration and an updated Live View to make it easier to edit complex PHP project code, such as that n of Dreamweaver, the PHP workflow revolved around generating multiple PHP pages, usually from templates. Each derived template page would be sprinkled with server behaviors (which are implemented as PHP code). To change any part of the page code, for example in the header or footer, you would edit a master template; those changes would then need to propagate across your entire site by auto-updating every page.
For simple sites, Dreamweaver templates still make a lot of sense, and Design view is an effective way to create and visualize them. In the past, however, if your PHP site did not use Dreamweaver conventions, there was a chance that Design view would not be able to render your custom code. In Dreamweaver CS5 the star of the show is the improved Live View, which takes Design view to the next level. Live View uses a built-in web browser to preview and navigate a live dynamic site, such as a Drupal site, directly within Dreamweaver.
All the benefits of having a built-in web browser are there, including back and forward buttons, live dynamic navigation, and the ability to fill out forms, search boxes, or login pages. All of this is powered by WebKit, the web-standards based rendering engine used in Apple Safari and Adobe AIR. Designers building dynamic themes (or templates) for any PHP site now have an easy way to preview their work using a full-fledged web browser sitting before them in Dreamweaver.
As many of us already know from experience, Drupal sites are not conventional Dreamweaver projects. But the heart of Drupal is PHP code and Drupal's code is technically no different from other PHP projects.
The Site-Specific Code Hinting feature in Dreamweaver CS5 enables developers working with Drupal (as well as WordPress, Joomla, and other CMS frameworks) to view PHP code hints as they write in Code view. To see these code hints, you must first create a configuration file using the Site-Specific Code Hints dialog box (see Figure 1). (Choose Site > Site Specific Code Hints.) You can then share this configuration file to help other Dreamweaver users on your team work with custom sets of folders and include files.
If you are installing Drupal locally and you don't already have Apache and MySQL set up, then I recommend downloading the Acquia Drupal Stack Installer (see Figure 2) from www.acquia.com. The installer runs on Mac OS X anfd Windows and is a Drupal-only alternative to MAMP, WAMP, or XAMPP. It makes setting up Drupal a breeze.
After Drupal is fully installed, add a few nodes (pages or blog posts) of content and mark them to appear on the front page. For more information on adding content in Drupal see my article Building a Drupal site in 10 steps. When you have added your content, start Dreamweaver CS5 and follow the steps below to define a new Drupal site, create a theme, and preview your theme in Dreamweaver.
In Dreamweaver, PHP projects require a new site definition to be created with a testing server.
The wizard for defining new sites received a facelift in Dreamweaver CS5. Veteran Dreamweaver users will notice that set up of basic sites has been simplified.
Follow these steps to set up your site:
Once the site definition is set up, Dreamweaver examines all local site folders to discover the PHP code and related files. You can then access the files in the Files panel (see Figure 5).
With a Drupal site defined and installed you are ready create and edit a new Drupal theme. The following steps outline how to prepare a new basic Drupal theme in Dreamweaver CS5.
; $Id: $ name = CS5 description = Drupal theme created in Dreamweaver CS5. version = 1.0 core = 6.x engine = phptemplate screenshot = cs5.jpg stylesheets[all] = style.css stylesheets[print] = print.css features = logo features = name features = search features = favicon features = primary_links features = secondary_links
Note: A free Adobe AIR application called Drupal Theme Starter provides a graphical interface that generates Drupal theme .info files so you don't have to write them by hand. The application is available at http://xtnd.us/drupal/themestarter and works on Windows, Mac OS X, and some Linux desktops.
Now that the new cs5 theme folder is ready for editing we need to enable the CS5 theme and set it as the new default under ADMINISTER > THEMES. Then open the node.tpl.php template and use Live View in Dreamweaver CS5 to get a full rendering of your Drupal site.
Dreamweaver executes its discovery process using the testing server and dynamically assembles a set of related CSS and PHP files.
Dreamweaver executes its discovery process using the testing server and dynamically assembles a set of related CSS and PHP files.
Now it's time to see a live preview of your Drupal site.
You may see an error page because by default Dreamweaver will try to visit the file you have open, in this case node.tpl.php. That won't work; instead you want Dreamweaver to render the home page or a specific node URL. You have Dreamweaver render any page you want by changing the URL in the Browser Navigation toolbar.
After you change the preview URL you should see the site's home page in Live View. Since you added node content earlier and set it up to appear on the front page, that node content will appear on the home page. (If content is not loading on your home page then visit an internal node page.)
By editing the code in the node template, you can alter the markup used by every node. You can then use Live View to see the effect of the changes instantly in Dreamweaver.
<div class="content"> <?php print $content ?> </div>
<div class="content"> <?php if ($teaser): ?> <span class=“summary”><?php print t(‘Summary: ‘); ?></span> <?php endif; ?> <?php print $content ?> </div>
The code above adds new markup to each node that has its PHP variable
$teaser set to
TRUE. The new markup will only be added when viewing a node summary otherwise known as a teaser.
Each node teaser on the page should now render “Summary:” before the body content (Figure 8).
If Live View does not render your template updates then the Drupal theme cache may not have recognized those changes. This can be easily resolved in Drupal one of two ways. First, you can visit the Themes administration screen within Drupal at /admin/build/themes. (You can even use Live View to visit this page.) Just visiting this page forces Drupal to reload each theme folder, thus picking up your custom changes. Alternatively, you can clear all the site caches by visiting the Performance administration screen at /admin/settings/performance and clicking Clear Cached Data. If you are using Live View then don't forget to hold the Ctrl or Cmd key when clicking buttons.
Now that you've explored the PHP side of a theme, the next step is to begin using the styling (CSS) features of Dreamweaver CS5 that are perfect for creating and editing Drupal themes. So far your Drupal site has a plain white theme named CS5. To add some flavor to this theme, you can target regions and elements that appear on any page and style them using CSS.
You may be tempted to open and edit the style.css file of your theme, and in the past that would have been the correct approach. Dreamweaver CS5, however, changes the game and eliminates the wasted time you'd spend jumping back and forth between your editor and a Web browser. Live View enables you to see the live dynamic Drupal site within Dreamweaver; when you make tweaks to the theme you can see the updated results instantly. Follow the steps below to learn how to style areas on a Drupal page within Dreamweaver CS5.
Many dynamically-related files will be listed in the Related Files toolbar, but at the moment you are only interested in CSS files. You can use a new feature in Dreamweaver CS5–the ability to filter related files by their file extension—to view only CSS files.
To filter on multiple file extensions, you can select each extension individually or select Custom Filter and then type the desired extensions.
Note: Opening and editing CSS files by themselves will not automatically start Live View side-by-side with Code view, that is why editing style sheets as related files works best when working with Drupal.
Now that you have Live View rendering your home page next to the CSS code editor you can use the Inspect feature to highlight any element on the page that you want to target for styling.
If you've used the Firebug browser extension, this behavior will be familiar—but now it is available within Dreamweaver and no external browser or plug-ins are needed.
An inspector wheel icon will appear near the area you just clicked (see Figure 11).
#sidebar-left .blocklisted under the style.css style sheet.
Any block that appears in the left sidebar region will now have a solid background color (see Figure 13). The Inspect feature gives you the power to click any live rendered object and jump to the styles declared for it.
When I first saw the Inspect and Live View features in Dreamweaver CS5, I was impressed. I knew, however, that I could also preview live tweaks to my CSS in a browser using Firebug. After I saw the new Enable and Disable CSS features in the CSS styles panel I started to put Firebug on the shelf.
When you toggle the Enable and Disable CSS toggle buttons (see Figure 14) that sit next to each style property the styles are updated instantly, just like in Firebug. Even better, Dreamweaver disables these styles by commenting them out instead of deleting them.
Follow these steps to try out the new toggle button on the
#sidebar-left background-color style:
#sidebar-left .blockstyle in the CSS panel (or use the Inspect feature to select it).
background-colorstyle added earlier by clicking the Disable/Enable CSS Property icon in the lower-right corner of the properties pane. (The icon also appears when you hover to the left of a property.)
Being able to toggle a CSS style is such a simple addition that it feels natural. You'll feel the impact of the Dreamweaver CS5 enhancements after using it for only a few days; that's when I realized how many minutes in my day had been recouped. Upgrading to Dreamweaver CS5 has accelerated my Web design workflow and made it more precise.
To be honest, since I began using Dreamweaver CS5 I have hardly needed to open Firebug for standard work, especially on new projects. I am not saying I'll never use Firebug again, but as a Web professional, I welcome any tool that helps my productivity.
To learn more about PHP templates and design for Drupal themes watch my online video training at Lynda.com. There are free videos for non-subscribers. The official Drupal Theming Guide is available at www.drupal.org. You may also want to read Introducing Dreamweaver CS5 for more on using CSS, CMS themes, and other new features in Dreamweaver CS5.
Tutorials and samples