15. Working with Content Management Systems

A particularly powerful feature in Dreamweaver CC is the ability to work with sites that are built upon the foundation of a content management system (CMS). There are many types of CMSs, but the ones we (and Dreamweaver) focus on are web content management systems, which are applications that run on a web server and create and manage web content. The CMS manages and controls a dynamic collection of web material and usually (but not always) assembles and creates webpages that are served to the user “on the fly”; that is, the page is built and sent to the user when the user requests the page. Unlike the static HTML pages we discuss creating in most of the rest of this book, pages that come out of a CMS often don’t exist at all before the CMS software puts together the HTML, CSS, images, and scripts and squirts them over the Internet to a user’s waiting web browser.

Dreamweaver CC supports three of the most popular web CMSs: WordPress, Joomla, and Drupal. You can use Dreamweaver to author and test content from any of these systems.

Pages generated by a CMS are based on templates that control the site’s look and feel. Because the content of the site is separate from its presentation, you can easily change the entire look of the site by modifying or switching the set of templates used by the site. A CMS can accommodate multiple users, with an administrator assigning different roles to particular users (for example, subscriber, contributor, editor, and so on). All of the systems provide plug-in architectures that make it easy for developers to extend the features of the core software.

Each CMS has its own passionate adherents. Imagine that a group of web geeks walk into a bar. After a few rounds of drinks, the conversation turns to an apparently simple question: Which is the best CMS? The discussion goes on for a while, becoming more spirited, and, as more drinks are consumed, people’s opinions are expressed with more emphasis. Finally, the frank exchange of views ends when the bouncers break up the fistfight and turn everyone out into the street.

Let’s leave the sound and fury behind and just talk a bit about each of the three.

In this chapter, we’ll use a WordPress blog in our examples. There are only minor differences in the way that Dreamweaver interacts with each of the three CMSs.

You need to let Dreamweaver know where each of the servers resides. If you have a local testing server (see the sidebar “Using XAMPP, MAMP, and LAMP for Local Testing Servers”), you need to make sure that it is installed, configured, and running.

2. In the Files panel, open the folder that contains your dynamic site and double-click the index file (usually called index.php).

Dreamweaver opens the file, but you don’t see any content. Instead, in a status bar at the top of the document window, Dreamweaver tells you that you need to set up a testing server .

3. Click the Setup link in the status bar.

Dreamweaver opens the Site Setup dialog, which is set to the Servers category .

4. (Optional: Perform this step only if you want to use the live remote server as the testing server, which we do not recommend.) Select the Testing check box next to the previously defined remote site, and then skip to step 10.

5. Click the plus button at the bottom left to add a server.

6. In the resulting dialog , enter a name in the Server Name field (we recommend Testing Server).

7. Choose Local/Network from the Connect Using menu.

8. Click the folder icon next to the Remote Folder field, and navigate to the local copy of your site that is inside the appropriate web directory on your testing server.

Depending on the testing server software you’re using, this folder could be named /www/ or /htdocs/.

9. Click Save.

You return to the Site Setup dialog, and now you can see that a testing server has been added and selected as the Testing server .

10. Click Save to close the Site Setup dialog.

As you might guess, this presents a challenge for a tool like Dreamweaver. It requires the CMS to put together the page you want to work with before Dreamweaver can show it to you. Then Dreamweaver can display the page to you in Live view.

Dreamweaver knows how to work with the supported CMSs so that it can discover all of the files that go into building the page you want to work with in the document window. Once Dreamweaver has discovered all the files that make up the document, it lists them in the Related Files toolbar. You can then open any of the related files and edit them using Dreamweaver’s tools. Dreamweaver makes it relatively easy to do something that was previously quite difficult and required serious expertise in a particular CMS: find the particular related files you need.

Dreamweaver displays a status bar under the document toolbar letting you know that “This page may have dynamically-related files that can only be discovered by the server” .

2. Click the Discover link in the status bar.

Depending on the CMS, Dreamweaver may display a Script Warning dialog .

3. Click Yes to dismiss the Script Warning dialog.

Dreamweaver begins discovering the dynamically linked files and displays them in the Related Files toolbar.

4. If you’re not already in Live view, Dreamweaver may use the status bar to alert you that you need to switch to that view. Click the Live View link in the status bar.

Dreamweaver displays the rendered page in the document window .

You can click the Inspect button in the document toolbar to turn on CSS Inspect mode, so you can see the box model for elements on the page . Just hover over an element on your page, and it displays with different colors for the background, margins, padding, and borders. For more information about CSS Inspect mode, see “Using CSS Inspection” in Chapter 9.

Nobody’s monitor is wide enough to display all of the dynamically related files, so the Related Files toolbar now supports scroll arrows on either end when there are too many related files to display . Scroll as needed to find the files that you want to work with. Click the Show More button next to the right scroll arrow to display the related files in a menu .

Dreamweaver shows that the button is actually a menu that contains the file types in the Related Files toolbar .

2. In the menu, deselect the file types you do not want to view. To go back to viewing all file types, choose Show All File Types.

The Custom Filter dialog appears .

2. In the dialog, enter the filenames or file extensions you want to display in the Related Files toolbar. Separate different names or extensions with a semicolon. You can also use asterisks as wildcard symbols. For example, in we used jquery* to create a filter that captured jQuery-specific files, producing the result shown in .

3. Click OK to put your filter into action.

Live view navigation allows you to interact with server-side applications and dynamic data. In addition, Live Code view highlights changes as they happen, allowing you to quickly locate the dynamically loaded data or code changes triggered by JavaScript. You can also enter a URL in the Document toolbar to inspect pages from a live web server and edit pages you’ve browsed to, as long as they exist in one of your locally defined sites.

2. In Live View mode, click Live Code in the Document toolbar.

or

Choose View > Live Code.

The document window splits to display both the Live Code and Live View panes . As usual with Live Code, the Code pane isn’t editable but will show how the code changes as you interact with the document in the Live View pane.

3. Use the menu. As you do, note how the code changes in the Code pane.

4. Click one of the links in the menu.

Notice that the link is not followed, as it would have been in a browser. Dreamweaver does this purposely so that you can create, style, and modify active links.

5. To follow the link, Ctrl-click (Cmd-click) the link.

Dreamweaver follows the link.

6. To follow links as you would in a browser, choose View > Live View Options > Follow Links Continuously . You can then click a link in the Live View pane, and it will change to the link’s destination.

2. (Optional) Click the Live Code button in the Document toolbar.

3. Interact with the document in the Live View pane until the page is in the state you want.

4. Press F6.

or

Choose Freeze JavaScript from the Live View Options menu in the Browser Navigation toolbar.

or

Choose View > Live View Options > Freeze JavaScript (F6). (see in “Using Live View Navigation”).

Dreamweaver displays a status bar telling you that JavaScript is frozen .

5. (Optional) Edit your JavaScript or CSS. Save your changes, and then press F6 to resume JavaScript rendering. Click the Refresh Design View button in the Document toolbar (or press F5) to see your changes.