Using the Business Catalyst extension to edit a site with Dreamweaver

Additional Requirements

Adobe Business Catalyst Platform

• Sign up for a free account

Firefox browser

• Download
• Learn More

Business Catalyst extension for Dreamweaver

• Download

The Business Catalyst Platform includes a full-featured online interface, called the Admin Console, that you can use to administer online businesses and manage sites. And in the past, Business Catalyst developers also used the Triangle extension for Dreamweaver to access many of the same features within the Dreamweaver authoring environment. With the release of the Business Catalyst extension, Dreamweaver users now have a new, improved method of controlling sites from the Dreamweaver workspace. If you've been using Triangle, you can keep it installed while also installing the Business Catalyst extension; both extensions can be used side-by-side as you compare them.

In this article, you'll get an overview of working with the Business Catalyst extension. You'll begin by learning how to use the Quick Site Setup wizard to define a site. You'll also see how to use the Files panel to create the home page, get templates from the remote server, and update them. Some of the other new features covered include Live View (that enables you to see dynamic data displayed without leaving Dreamweaver) and the Related Files bar (to quickly access linked CSS style sheets and JavaScript files). And finally, you'll get details about configuring Business Catalyst modules and inserting them on pages.

This article is dvided into the following sections:

• Using the Business Catalyst extension to define a site
• Working with the Files panel to create and manage web content
• Accessing the related files to update CSS formatting
• Editing pages that are linked to templates
• Inserting and configuring modules

Using the Business Catalyst extension to define a site

The Business Catalyst extension populates the Business Catalyst panel in Dreamweaver. You can access the panel by choosing Window > Business Catalyst. The panel appears with fields to log in (using the same e-mail address and password you used when you signed up for your free account). Once you've logged in, the panel displays a list of your Business Catalyst sites. Since you'll use the same e-mail and password for all of your sites, you don't need to log out and log back in to switch between sites as you work on them.

Follow these steps to invoke the Quick Site Setup wizard and begin defining the site:

1. Choose the new trial site that you just registered from the site list. The hollow green dot indicates that the site has not yet been defined in Dreamweaver; once the site has been successfully defined, the dot becomes solid. Trial sites that are close to expiring are red—either solid or hollow, depending on whether the site has been defined (see Figure 1).

2. When you select a site that has not yet been defined, the Quick Site Setup wizard appears automatically. Defining a site is a one-time setup process. After you set up a site through the wizard, you won't be prompted to define it again. To complete the site definition, enter your e-mail and password once again in the provided fields (see Figure 2).

3. Click Login to access the Setup screen of the wizard (see Figure 3).

4. Click the folder icon and browse to select the local root folder for the site. Then, click Setup to proceed to the Confirm screen of the wizard. Click Finish to complete the site definition process and download all of the site files to your local machine.

   Note: In the future, if you do not want to download all of the site files as you define a site with the wizard, you can deselect the Download site locally option. When it is convenient, you can use the Files panel to download the site files to your local machine.

5. Click OK in the dialog box that asks if you want to get the entire site (see Figure 4).

6. After the files have finished downloading, review the site files in the Files panel. The Layouts folder contains the default layouts for each of the modules. The stylesheets folder contains several CSS files, and the Templates folder contains the template files (DWT files) for your site.

At this point, your new Business Catalyst site has been defined and you are ready to begin editing it. In the next section, you'll take a look at the Files panel in more detail and see how to use it to create new pages and manage site files.

Back to top

Working with the Files panel to create and manage web content

The Files panel in Dreamweaver offers many content management features. In addition to using the Files panel to upload and download files via FTP, you can also use the interface to create and open documents, as well as manage files and folders. Think of the Files panel as a dynamic site map that displays all of your web pages and related files.

You can use the Files panel to create the folder structure for a new site from scratch, and then populate the folders with pages as you create them. This strategy is helpful because the new files you create are saved into the correct hierarchy before the content is added.

In this section, you'll learn how to use the Files panel interface to create new files, open files to edit them, move files to a different folder, and update their links. You'll also get an overview of the File panel's interface to learn more about the included features. And then you'll see a workflow that describes the entire process of editing web pages with Dreamweaver.

Creating new HTML pages in the Files panel

Right-click (or Control-click) on any existing folder (including the root level of the entire site) and choose the New File or New Folder option from the context menu that appears (see Figure 5).

To create a new home page for your site, name the file either index.html or index.htm and save it at the root level of your local root folder.

Open existing files to edit the web content

Double-click any file listed in the Files panel to open it in the Document window. HTML, CSS, JavaScript and other text files, such as XML, will open in Dreamweaver.

If you double-click unsupported file types (such as images and SWF files), the associated program will launch based on your Dreamweaver preferences in the File Types / Editors category. For example, if you have Fireworks set as the primary editor for.jpg files, double-clicking a file with the.jpg extension causes Fireworks to launch (or take focus, if it is already open).

Move files to a different folder and update their links

The Files panel includes functionality that enables you to reorganize your web pages, files and folders within the local root folder. It is a best practice to reposition files within the Files panel, so that the links to dependent files can be updated. Never move files and folders around outside of Dreamweaver, because doing so results in broken links.

Use the update feature as follows:

1. In the Files panel, select the desired file that you want to move. In this example, imagine that the about.html page currently lives in the root level of the site, as shown in Figure 6:

2. Drag the file name to another location, such as the pages folder (see Figure 7).

3. In the dialog box that appears, click Update to update the links to files (see Figure 8).

Once you've dragged the file to a new location and updated the links, the page now lives in the pages folder (see Figure 9):

Overview of the features available in the File panel

In this section, you'll learn how to perform common site tasks using the Files panel interface (see Figure 10):

• A. Site pop-up menu: Select a site and display the corresponding site files. You can also use the Site menu to access all the files on your local drive, much like using the Windows Explorer (Windows) or the Finder (Macintosh).
• B. Connect/Disconnect: Connect or disconnect from the remote site.
• C. Refresh: Refresh the local and remote directory lists.
• D. Site files view: Display the file structure of the remote and local sites in the panes of the Files panel. In most cases, keep this setting as you edit sites.
• E. Get file(s): Copy the selected files from the remote site to your local site (you'll have the option to overwrite the local copy of the file, if it exists). When you first connect to an existing site, it is standard practice to "get" the entire site so that you can create a copy of it locally and begin editing it. The wizard handles this automatically.
• F. Put file(s): Copy the selected files from the local site to the remote site (overwriting the remote copy of the file, if it exists). This facilitates site updates.

  Note: Prior to clicking the Get files or Put files icons, select the desired files in the active pane of the Files panel. If the Local pane is active and you click Put files, the selected local files are copied to the remote server; if the Remote pane is active and you click Get files, the selected remote server files are copied to the local root folder on your machine.

• G. The Expand/Collapse button: Expand or collapse the Files panel to switch between displaying one or two panes.

To learn more about the Files panel interface, see Using the Files panel in Dreamweaver Help.

Also, check out the Dreamweaver Developer Center tutorial series Creating your first website.

The workflow to follow when editing site pages using Dreamweaver

You'll use the same process whenever you use Dreamweaver to select and open pages. Follow these steps:

1. Download files from the remote server to your local hard drive.

   Open the Files panel (Window > Files). If the file you want to edit is not listed in the Local files pane, expand the Files panel. Select the file in the Remote files pane and click Get files. A dialog box appears to ask if you want to get the dependent files (see Figure 11).

Click Yes to copy the images and all of the linked documents (CSS, JavaScript) to your local machine. Clicking No in this dialog box causes Dreamweaver to only download the HTML file to your computer.

Once the HTML file is listed in the Local files pane, double-click the file to open it.

2. Update pages in the Document window.

   HTML files that are currently open are displayed in the Document window. In the top left corner, click the buttons to choose between Design view, Code view or Split view, which enables you to see both design and code panes simultaneously (see Figure 12).

Use the WYSIWYG emulator in the Design View to select elements and make changes. Alternatively, hand-code the HTML in the Code View pane, using code hints.

3. Save files locally.

   After you are finished making changes, choose File > Save. If you attempt to close an unsaved document, Dreamweaver will prompt you to save your changes before closing it. Remember to save frequently; Dreamweaver does not save files in the background as you are working.

4. Preview in a browser.

   Choose File > Preview in Browser and select the desired browser from the list. This operation causes the active page to load in the browser window.

   Interact with page elements (rollover buttons and JavaScript features). Try resizing the browser window to test your work and check the page's layout. Note any issues that need to be fixed.

   To resolve issues or continue making changes, return to Dreamweaver and edit the page in the Document window. Then, repeat steps 6–8. Continue editing and previewing until you are satisfied with the appearance and performance.

5. Put files.

   Once the file is ready to be published, select the file in the Local files pane.

   Click the Put files icon to upload the file to the remote server. (If the file already exists on the remote server, this operation will overwrite the file to display the newest version).

6. View the live site in a browser to test changes.

   It is a best practice always to test the new or edited page on the remote server after uploading it. It is possible to encounter issues with the live site even though the page displays as expected when previewed locally.

   In a browser, enter the site's URL in the address field: mysite.businesscatalyst.com/mypage.html (replace mysite with the name of your website and mypage with the actual name of the page you want to view).

   Interact with the page to make sure the buttons and rollovers (if present) are working correctly. If you've inserted modules, the module content is populated dynamically from the database. It's a best practice to check the page in several browsers to ensure that the CSS rules are causing the browser to display the page as expected. If desired, you can use Adobe BrowserLab to test the page with different platforms and browsers.

In the next section, you'll learn how to work with the related files to access the CSS code and apply formatting rules. If you are used to working with the Triangle extension, these were accessed by clicking the Special Files link. With the Business Catalyst extension, you can use the Related Files bar in Dreamweaver to jump to the files with the relevant code.

Back to top

Accessing the related files to update CSS formatting

The previous version of the extension (Triangle) includes a link to access the CSS style sheets and other related files. When using the older version, you click the Special Files link to access the list of related files (see Figure 13).

With the release of the Business Catalyst extension for Dreamweaver, you can now use the same workflow you use when developing non-Business Catalyst sites to access the related files. Whenever you open a file with linked text documents, the links to these files are displayed along the top of the Document window (see Figure 14).

When you click the link to see a related file, the source code is displayed in the Code view of the Document window.

Click the Source Code link to display the code of the currently open HTML file in Code view again (see Figure 15).

The related files bar enables you to jump back and forth quickly between linked files in order to update CSS formatting and positioning. Using this strategy, you can quickly update page designs, module layouts and the appearance of templates.

Alternatively, you can use the Files panel to locate and then double-click the CSS style sheet you want to edit. Open the file and begin editing it in the Document window, just as you would edit an HTML page.

When you are finished making changes, choose File > Save All to save all of the open files.

In the next section, you'll learn more about updating pages that have applied templates. Templates are a powerful tool that help you maintain a consistent look and feel throughout a site while also simplifying the process of editing common site elements.

Back to top

Editing pages that are linked to templates

The Business Catalyst Platform supports user-generated templates and also provides prebuilt templates that you can customize or use right out of the box. You can even use templates from third-party vendors, if you prefer. Because you are using Dreamweaver, it's likely you'll leverage the included CSS layouts that are available in the New Document dialog box.

In Business Catalyst, the templates are DWT files, just like the regular templates that you use when building non-Business Catalyst sites. However, the interface options are slightly different from other DWT files, and those differences will be covered in this section.

Generally speaking, you'll place all of the common page elements in the template (DWT file), and then create new pages based on the template to add the specific page content. This strategy enables you to build sites quickly and compartmentalize the content that is unique on each page. If you are familiar with Fireworks, templates are similar to working with Master pages. Although using templates is not required, it is recommended. Site updates are much easier when you use templates, because you can update one template file and affect the appearance of an entire site.

Using templates with the Adobe Business Catalyst Platform

A typical Business Catalyst site includes one or more templates to display the various sections. Templates are applied to web pages to wrap around the unique content of each page. Business Catalyst templates are essentially just HTML and CSS code that usually contains items such as the header, logo, site navigation, and footer. By placing the common items that appear on multiple pages in the template, you'll only have to edit them in one location—by editing the template directly.

To create a new template for Business Catalyst sites, follow these steps:

1. Choose File > New.
2. In the New Files dialog box, choose the Blank Template option. Choose HTML template as the Template Type. If desired, choose one of the prebuilt CSS layouts. Otherwise, choose <none> as the layout. As you click each layout, a preview of the page is shown in the right side box. If you already have a CSS style sheet to apply, you can optionally click the link icon and browse to select the CSS file from within your local root folder (see Figure 16).

The new template file appears in the Document window.

Next, you need to define the area within the template where the page content will be displayed.

As mentioned previously, the purpose of a template is to surround the unique page content that will be displayed somewhere inside it. In order to specify where the page content will appear, you need to add the editable region to the desired location in the template file. As a result of creating the editable region, Dreamweaver will add the following code syntax:

Follow these steps to define the editable region:

3. Choose the area in the page (usually a <div> tag or a table cell) where you want the page content to appear. Delete the existing content in that <div> (if you are using one of the prebuilt CSS layouts in Dreamweaver) and place your cursor inside the desired container.
4. Choose Insert > Template Objects > Business Catalyst Editable Region (see Figure 17).

This operation inserts the tag syntax {tag_pagecontent} that specifies the editable regions and allows the Business Catalyst Platform to display the page's unique content in this area.

For example, if you create a template using a layout with three columns, you could add the tag to the middle column so that the page content displays in that location (see Figure 18).

Note: Unlike other DWT files you may have created previously with Dreamweaver, a Business Catalyst template should only have one editable region defined.

After inserting the editable region in the template, the next step is to save the template. In Dreamweaver, templates are always saved in the Templates folder that is located at the root level of your site.

1. Choose File > Save.
2. In the Save as Template dialog box that appears, enter the name for the template. If desired, you can optionally enter a description (see Figure 19).

Editing template files

When you are editing a page that is linked to a template, a yellow tab will appear in the upper right corner of the Document window with the corresponding template's name (see Figure 20).

To edit the template directly, follow these steps:

1. Choose File > Open and browse to select the DWT file from the Templates folder. Alternatively, you can double-click the file name of the template in the Templates folder listed in the Files panel to open the DWT file.
2. Proceed with caution. When editing a template on an existing site that has many pages linked to a template, always make a local backup copy of the template before making any major changes. That way, if you make a mistake and push the edited template live (which may affect a great deal of pages), you can revert by uploading the backup copy, overwriting the live template and restoring the site.

Note: You must always open the DWT file to make changes to the template. When you are editing an HTML page that is linked to a template, only the unique page content is editable.

All of the template content is locked and a universal no symbol is displayed when your cursor is outside of the editable region (see Figure 21).

Creating a new page that is linked to an existing template

To create a new file that is linked to a template you've created, follow these steps:

1. Choose File > New.
2. In the New Files dialog box, choose Page from Template. Select the name of the site, and then choose the desired template from the list of templates (see Figure 22).

The new HTML page appears in the Document Window.

When you work with a page that is applied to a template, you'll see the contents of the template displayed in the Document window, surrounding the page content. The rules in linked external CSS files will also affect the formatting displayed in both Design View and Live View. This is helpful because you can edit the page content while viewing the design as it will appear online.

Setting the default template

The default template for a Business Catalyst site cannot be set within the Business Catalyst panel in Dreamweaver. You must log into the Admin Console to make this setting.

Follow these steps:

1. Log into the Admin Console for your site, using the same email address and password you used in the Business Catalyst panel.
2. Choose Admin > Site-wide templates to see the list of templates. Select the desired template from the list to see its details.
3. In the Template Page details, check the Default Template option.
4. After setting a default template, any new pages you create using the Admin Console will use the default template automatically. However, you can always access each individual page and use the Template menu to apply a different template, or no template at all.

When you use Dreamweaver, you'll still need to choose File > New From Template and then choose the desired template from the list in the New Document dialog box.

In the last section of this article, you'll get an overview of how to insert and configure modules using the Module Configure wizard that is included with the Business Catalyst extension for Dreamweaver.

Back to top

Inserting and configuring modules

Modules are prebuilt chunks of code that are provided with the Business Catalyst Platform. Using either the Admin Console or the Business Catalyst extension for Dreamweaver, you can apply these modules to a web page to add new features to your online business. Examples of module functionality include: forums, blogs, photo galleries, and RSS feeds. In this section, you'll see how to access the list of modules in the Business Catalyst panel and insert them on a page.

Adding modules to a page

All of the available modules can be accessed in Dreamweaver through the Business Catalyst panel. Select a module to insert and the Module Configure wizard steps you through a series of screens to select the options to configure the module.

For example, to add a Booking module to a web page, follow these steps:

1. In Dreamweaver, double-click the page from the list in the Local files pane of the Files panel. The selected file opens in the Document window.
2. Place your cursor in the page content area, in the location where you want to insert the module.
3. In the Business Catalyst panel, choose the module by name. Most modules have submodules within the group. Choose the subset of the module to add (see Figure 23).

4. When you drill down to select the desired module by name (with the box icon displayed next to it) the Business Catalyst extension presents a wizard that corresponds to the selected module. At the same time, Dreamweaver inserts the appropriate module tag in the web page at the insertion point (see Figure 24).

In Figure 24, the tag {module_booking} is inserted when you select Bookings > Bookings.

5. The Module Configure wizard appears. Select from the provided list of options.

Configuring modules

After you've added a module by inserting the tag on a web page, the next steps involve using the Module Configure wizard to choose the settings to configure the module. Follow these steps:

1. Select the desired module to insert on a page. The wizard for that module appears, listing the available options.
2. Many module wizards have more than one screen; click the Next button to continue setting the configuration until you've reached the end (see Figure 25).

Note: The screens of the module wizard differ depending on the module you insert.

Always proceed through the screens of the wizard until you reach the end. If you click Cancel, the wizard will close and your changes will not be saved.

You can tell when you've reached the end of the wizard, because instead of Next, the last screen offers two options: Cancel and Insert (see Figure 26).

Editing module layouts in Code View

Modules are completely customizable in the Business Catalyst Platform. You can make changes using several different strategies to define how the module feature will display, which data will appear, and more. In this section, you'll learn how you can edit the tags that are inserted into a web page by the Business Catalyst extension to rearrange how the content appears.

For example, when you insert a site search module, the following code is displayed (see Figure 27).

In the default layout for site search (shown above), the {module_searchresults} tag is located directly below the search field and submit button. This is the standard implementation, and it causes the search results to appear below the search field when the query is submitted on the live site.

However, you can use Dreamweaver to edit the page in Code View to cut and paste the {module_searchresults} tag to place it above the search form. By rearranging the module tags (which are always surrounded by curly braces) you can control where the various elements of a module will appear on a page.

Customizing module design and layout with CSS rules

In addition to rearranging the module tags, you can also control how the module will look by editing the CSS style sheet that is associated with the modules themselves.

Follow these steps:

1. In Dreamweaver, access the Files panel.
2. Locate the folder named stylesheets; this folder contains all of the CSS files that are included with your Business Catalyst site, as well as any CSS files you may have uploaded via FTP.

   Note: It is a best practice to save all of your CSS files in the same stylesheets folder, to make it easy to find and edit them later.

3. In the stylesheets folder, double-click the file named ModuleStylesheets.css to open it.
4. Edit the CSS rules as desired. You can flip back and forth between the page and the CSS style sheet to see which classes are assigned to the different aspects of the module you've inserted.

The Firebug add-on for the Firefox browser is a helpful and free tool. It enables you to inspect the elements of the live site in the Firefox browser and evaluate which styles you want to change to update the layout and design of a page. To learn more, visit the Firebug home page.

Changing modules with tag attributes

In the previous sections, you've learned how you can affect the display of dynamic data in an inserted module by rearranging the module's tags in the source code. You've also learned how to access the CSS rules by using the Related Files bar, in order to update the rules and affect the module's appearance and positioning.

There is an additional method for updating a module's functionality. It involves inserting the tag attributes that correspond to a specific module, to add new parameters that define how the module will react on the live site.

For example, you can add additional attributes (either insert more tags or add values separated by commas at the end of a module tag) to control how a module displays. You can define specific rules, such as how many items will be displayed in the module's area of the live site. Consider the following:

The tag below is the default module tag that is inserted when you insert a blog on a page:

However, you can also add the following tag to display additional data that is related to that blog and the blog posts that have been submitted. If you add the following tag, a calendar widget displays. This enables visitors to select a date in the calendar and see the corresponding blog posts published on that date:

If you like, you can add additional blog information next to the blog itself. For example, this tag displays the 20 most recent blog post titles, providing links to read the different entries:

If you only want to only show the five most recent posts, you can edit the tag like this:

Each module has its own set of tag attributes. When you edit a layout in Dreamweaver, the Business Catalyst panel displays the tags that correspond to the currently open layout file. Choose a tag from the list and click Insert.

In addition to specific layout tags for each module, some tag attributes stand alone. These features can be added as desired to many different modules. For instance, you can insert the following code next to an inserted module:

When this tag is inserted on the page, the Tell a Friend form is displayed. When a visitor enters an email address and submits the Tell a Friend form on the live site, the module's dynamic data is automatically sent to the provided email address.

Follow these steps to add a tag attribute to a module layout:

1. In the Files panel, open a layout from the Layouts folder. (Each module has at least one default layout, and most have at least two, for the list view and the detail view of the dynamic content).
2. While the layout is selected, look in the Business Catalyst panel and notice that the Tag Attribute Insert feature is enabled. This contextual menu displays only the tag attributes that correspond to the currently active layout (see Figure 28).

3. Use the menu to choose the new tag attribute to add. Hover your cursor over each tag to see its description.
4. In the layout, click your cursor in the area where you want to insert the tag attribute. Then return to the Business Catalyst panel and choose the desired tag from the menu (see Figure 29).

5. In the Business Catalyst panel, click Insert to insert the new tag.
6. Be sure to preview your page with Live View or test the live site to see the recent changes.

To see the full list of modules and attribute tags, along with a complete description of the attributes that you can adjust, see the Business Catalyst support article on Extending modules with tag attributes.

Previewing dynamic content in Live view

In addition to Code, Split and Design view modes, there is a fourth mode, called Live view, that is especially helpful when you want to preview the content of dynamic data on pages that contain modules. Use Live view to see the module tags display with populated data, as the pages will appear on the live site, without ever leaving the Dreamweaver workspace.

Follow these steps:

1. When you are finished making changes, choose File > Save All to save all of the currently open files.
2. Click the Sync button located at the top of the Files panel. Clicking this button automatically uploads the currently open files and publishes the changes on the testing server (see Figure 30).

When you sync the files, the dialog box shown in Figure 31 appears.

The Synchronize dialog box appears (see Figure 32).

3. Above the Document window, click the Live View Options icon to see the list of settings (see Figure 33).

In the menu that appears, select the option: Use Testing Server for Document Source (see Figure 34).

4. Click the Live View button once to see the current document displayed in the emulator after connecting to the database via HTTP. This enables you to see the modules in their rendered state, with the dynamic data displayed (instead of the tag that invokes the module, which is the syntax that looks like: {module_announce,a})
5. Click the Live View button again to exit Live view. The Live View button is a toggle that alternately turns on and off. When viewing the page in Live view, the page is being previewed and therefore it cannot be edited.

Note: If you are seeing a blank page instead of the page when using Live view mode, choose Site > Manage Sites, choose your site name in the Manage Sites dialog box, and click Edit. In the Advanced tab, in the Testing Server category, double-check that the Testing Server has been defined.

If you used the Business Catalyst Quick Site Setup Wizard to define your site as described earlier in this tutorial, the Testing Server for your site is set up automatically. However, if you previously defined the Business Catalyst site yourself, select the Server category and ensure that the Testing Server is defined (see Figure 35).

As you define the Testing Server, click the Test button next to the Login field to confirm that the FTP connection is set correctly. Dreamweaver will display a confirmation message when the connection to the testing server is successful (see Figure 36).

Back to top

Where to go from here

As you can see from this overview, the Business Catalyst panel in Dreamweaver offers many of the same features that are also available in the Admin Console. Using this extension, you can use the same workflow you are accustomed to following. You can also repurpose existing templates that you've designed for other projects. And the new Business Catalyst panel makes it easier than ever before to use the content management tools in Dreamweaver (such as the Files panel and the Related Files bar) to update your sites.

For more information on working with the Business Catalyst Platform, refer to the following resources:

• Building your first site in Business Catalyst
• Customizing the pre-built templates that are included with a Business Catalyst trial site
• Editing sites with the Business Catalyst extension

And be sure to check out the Business Catalyst Developer Center, where you'll find helpful articles and best practices to get you up to speed quickly with building online businesses.