Adobe
Sign in My orders My Adobe

by Chris Charlton

Chris Charlton

Created

8 August 2010

Page tools

CMS design Dreamweaver CS5 dynamic website PHP workflow

Prerequisite knowledge

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

User level

Intermediate

Required products

Additional Requirements

Drupal 6

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:

Drupal basics

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.

Back to top

PHP, Live View, and Site-Specific Code Hinting in Dreamweaver CS5

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.

Live View

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.

Site-specific code hinting

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.

The new Dreamweaver Site-Specific Code Hints dialog box
Figure 1. The new Dreamweaver Site-Specific Code Hints dialog box

Back to top

Working on a Drupal theme in Dreamweaver CS5

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.

The Acquia Drupal Stack Installer
Figure 2. The Acquia Drupal Stack Installer

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.

Step 1: Add a new Drupal site to Dreamweaver CS5

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:

  1. In Dreamweaver CS5, choose Site > New Site.
  2. In the Site Setup dialog box, type a name for your site; for example, type Drupal & CSS.
  3. For the Local Site Folder, specify the path to the Sites folder in your Drupal installation.
  4. Click Servers and then click the Plus (+) icon to create a new server.
  5. Specify the name, location, server folder, and Web URL of your server and your preferred connection method. For the Server Folder, type the path of your Drupal site root folder. Figure 3 shows the settings I use for Drupal sites and theme development.
  6. Click Save.
Site settings used to add a local testing server on Mac OS X using MAMP
Figure 3. Site settings used to add a local testing server on Mac OS X using MAMP
  1. Back in the Site Setup dialog box select the Testing checkbox for the server (see Figure 4).
  2. Click Save.
Configuring servers in the simplified Site Setup dialog box
Figure 4. Configuring servers in the simplified Site Setup dialog box

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).

Files panel showing the Drupal site folders and file
Figure 5. Files panel showing the Drupal site folders and file

Step 2: Start a Drupal Theme in Dreamweaver CS5

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.

  1. Create a new folder named cs5 in the sites/all/themes folder.
  2. Create a new theme file named cs5.info file in the sites/all/themes/cs5 folder.
  3. Open cs5.info and copy the code below into it:
; $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
  1. Create two empty CSS files named style.css and print.css in the same folder. These files are the style sheets for the theme declared in the cs5.info file.
  2. Copy modules/node/node.tpl.php to the sites/all/themes/cs5 folder. This file controls all the markup used around all primary content.

    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.

  3. Click Split view (which is now vertical by default) after opening node.tpl.php. You should see the code from node.tpl.php on the left side and a Drupal page in Design view on the right. If the page is blank white or has an error then change the URL to point to the home page of your Drupal site. You should also notice at the top of the document there is a blinking message that notes Dreamweaver can discover all the related files for this node template.
  4. Click Discover.
  5. When you see a prompt to process all the dynamic files in the site, click Yes.

    Dreamweaver executes its discovery process using the testing server and dynamically assembles a set of related CSS and PHP files.

    The Files panel will open, prepopulated with all the dynamic include, JavaScript, and CSS files that Dreamweaver discovered when it processed the page.

Dreamweaver executes its discovery process using the testing server and dynamically assembles a set of related CSS and PHP files.

The Files panel will open, prepopulated with all the dynamic include, JavaScript, and CSS files that Dreamweaver discovered when it processed the page.

Step 3: Preview and test Drupal sites in Dreamweaver CS5

Now it's time to see a live preview of your Drupal site.

  1. Click Live View (see Figure 6).
The Live View button in Dreamweaver CS5
Figure 6. The Live View button in Dreamweaver CS5

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.

  1. Type the URL of the testing server in the address field on the Browser Navigation toolbar (see Figure 7).
The Browser Navigation toolbar in Dreamweaver CS5
Figure 7. The Browser Navigation toolbar in Dreamweaver CS5

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.

  1. Edit the node.tpl.php template and make the following change near the bottom of the CS5 theme:
    Before:
<div class="content"> <?php print $content ?> </div>
After:
<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.

  1. Save your changes and click Live View (or click Refresh if Live View is still active).

    Each node teaser on the page should now render “Summary:” before the body content (Figure 8).

Using the new Live View to see edits to Drupal theme templates
Figure 8. Using the new Live View to see edits to Drupal theme templates
  1. To use the new Live View Navigation feature of Dreamweaver CS5, hold the Ctrl key (Windows) or Cmd key (Mac OS X) and click a link in your Drupal site within Live View. You can even click through your Drupal administration screens and edit nodes if necessary using Live View Navigation.
  2. Click Live Code to activate a new code view (see Figure 9). This view shows all the markup as its rendered in Live View, allowing you to review the code of any element you select there. Live Code view highlights the code for elements selected in Live View.
Live Code view in Dreamweaver CS5
Figure 9. Live Code view in Dreamweaver CS5

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.

Back to top

Drupal theme styles

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.

  1. Make sure you are in Split View and open either the node template again or Drupal's index.php site file (located in the top-level folder of the Drupal site). It doesn't matter how you have your window split, but I personally prefer a vertical view.
  2. Click Live View at the top of the page editor (see Figure 8).

    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.

  3. Click the Filter Related Files icon at the right of the Related Files toolbar and select .css in the list of file extensions (see Figure 10).
Filtering related files
Figure 10. Filtering related files

To filter on multiple file extensions, you can select each extension individually or select Custom Filter and then type the desired extensions.

  1. Click the related file style.css to open it.

    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.

Inspecting rendered elements

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.

  1. Click the Inspect button located next to the Live View button.
  2. Hover your pointer over elements on the rendered home page; Dreamweaver will highlight the elements on the page.

    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.

  3. Click any element to inspect it.

    An inspector wheel icon will appear near the area you just clicked (see Figure 11).

The inspector wheel icon
Figure 11. The inspector wheel icon
  1. Click the wheel icon to see the styles used on or around that inspected element (see Figure 12). Inspect the left sidebar.
List of styles derived from the Inspect feature
Figure 12. List of styles derived from the Inspect feature
  1. Locate a click the selector #sidebar-left .block listed under the style.css style sheet.
  2. Select that style to edit it, and then add some CSS code. I'm going to add a plain orange background color: background-color: orange.

    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.

The left sidebar with a background-color
Figure 13. The left sidebar with a background-color

Instant CSS feedback

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.

Enabling and disabling CSS styles with the new toggle button
Figure 14. Enabling and disabling CSS styles with the new toggle button

Follow these steps to try out the new toggle button on the #sidebar-left background-color style:

  1. Select the #sidebar-left .block style in the CSS panel (or use the Inspect feature to select it).
  2. Toggle off the background-color style 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.)
  3. Save your changes to style.css.
  4. Preview your changes in Live View. You may need to refresh the view by pressing the F5 key or clicking the Refresh button in the Browser Navigation toolbar.

Back to top

Where to go from here

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.

More Like This

Products

Solutions

Industries

Help

Learning

Ways to buy

Downloads

Company

Choose your region

Copyright © 2012 Adobe Systems Incorporated. All rights reserved.

Terms of Use | Privacy Policy and Cookies (Updated)

Reviewed by TRUSTe: site privacy statement