Integrated CMS support in Dreamweaver

The new Adobe Dreamweaver CS5 comes with some very useful functions. One of them is the option to redesign your Content Management System web sites through the integrated tools. If you are using a CMS like Joomla, WordPress and Drupal you can have a great benefit from the corresponding functionality.

In the current tutorial we will give an example with a fresh WordPress installation.

Dreamweaver and WordPress

In order to use the integrated CMS support in the design of your CMS web sites you should open your DreamWeaver software and start a new web site project.

Navigate to Site->New Site. Add a new site, set the remote server configuration and enter the FTP details that will allow you to connect to your remote web site server.

You can set the same server as a testing one.

6

Then download all the files of your web site.

Once the download is completed you will see a list with the web site files. If the files are not shown turn on the option from Windows->Files.

You can select the index.php file and click on the Live View button.

The file changes will be updated and your web site will be shown in the Design panel. In the Code panel you will see the file’s source code. Selecting the Split option allows you to see both the panes in the same window.

You will see a notice that provides you with the option to list all the files that are dynamically-related to index.php. Click on the Discover link to visualize the list.

4

The Filter Related Files icon allows you to set the extensions which will be visualized in the corresponding list and set custom filters.

5

Now it is time to select specific code hints for your CMS. Navigate to Site->Site-Specific Code Hints and pick the CMS from the corresponding drop-down menu.

7

In this section you can remove files and folders from being scanned, allow recursive scan, import predefined structure, create a new one, rename the existing or delete it.

Next, you can open a file, for example, the footer.php file of your template and edit its code.

The code hinting will allow you to use the specific WordPress syntax. You can trigger it by pressing the Ctrl+Space bar keys combination.

Once you are ready with the modifications save the changes.