- The Drupal-Dreamweaver Partnership
- Setting Up Drupal
- Setting Up a Theme
- Connecting Dreamweaver CS5 to a Drupal Site
- Opening and Viewing Your Drupal Home Page in Dreamweaver CS5
- Editing Drupal Themes with the CSS Styles Panel
- Uploading the Edited Styles to the Drupal Site
- Summary
Like this article? We recommend
Like this article? We recommend
Like this article? We recommend
Opening and Viewing Your Drupal Home Page in Dreamweaver CS5
In this set of steps, you'll open and view the home page for your Drupal site in Dreamweaver CS5. Notice that I said open and view. You're not going to edit your Drupal page content in Dreamweaver, because managing page content in Drupal is not like creating pages in Dreamweaver. Instead, users enter content into forms in Drupal, and that content automatically gets plugged into the Drupal site in a manner defined by the site administrator. In this section, we'll focus on locating and editing the CSS code that defines how those pages look.
Keep this difference in mind through the rest of this tutorial. We'll open pages from the Drupal site in Dreamweaver's Design view, but only as a means to an end; that is, so that we can identify and edit the CSS styles that are applied to the entire site.
Follow these steps to connect to your Drupal site and open your Drupal home page in Dreamweaver CS5:
- Choose Window > Files to open the Files panel in Dreamweaver CS5. Click the Expand button toolbar (shown in Figure 3) to view both the local and remote versions of your Drupal site.
- Click the Connects to Local Host button in the expanded Files panel toolbar to connect to the remote site.
- You don't need to download the entire Drupal site. Instead, navigate to the file index.php in the root folder of the Drupal site. This file displays content on the home page of the Drupal site. Double-click that file to open it in Dreamweaver.
- When you're prompted to get dependent files, select Yes.
- At first, the Drupal home page doesn't look very exciting. It's actually just a container that holds content supplied by a database at the Drupal site. But Dreamweaver will help us to connect all the necessary files so we can see how the page will look. Click the Discover link at the top of the page in Dreamweaver's Page view (see Figure 4).
- If the Script Warning dialog is enabled, it's telling you that you're essentially opening all the files in Dreamweaver that are used to produce the Drupal web page. That's just what you want to do, so select Yes.
- Hold your breath for a moment while Dreamweaver uses the FTP server connection you defined in the preceding section to connect with the Drupal site. As soon as that happens, literally dozens of associated files appear at the top of the page. Many of these files are related to the database that supplies content to the page. Files with the .CSS extension are style sheets that control the appearance of sections of this page and other pages. We'll detect and edit those pages shortly.
- To see the content that's packaged into the Drupal home page, you need to view the page in Live view (see Figure 5). Click the Live View button or the Live View link at the top of the page to display the content that appears in the Drupal home page. Select Yes if any warning dialogs appear.
)
Figure 3 Expanding the Files panel.
){kind=small}
Figure 4 The Discover link in Dreamweaver CS5 locates files that enable the Drupal home page.
)
Figure 5 Viewing a Drupal page in Live view in Dreamweaver.