Business Catalyst Extension for Dreamweaver

Download Extension (4412kb)

System Requirements

  • OSX: Dreamweaver CS4 & CS5
  • Windows: Dreamweaver CS4 & CS5

In this article, you’ll learn how to install and work with the Business Catalyst extension for Dreamweaver, a free tool that makes it easy for Dreamweaver users to access many of the features provided in the Admin Console within a familiar development environment. You’ll also find best practices for creating and maintaining your Business Catalyst site. Click on the links below to jump to a specific section:

Installing the Business Catalyst extension for Dreamweaver

After downloading the Business Catalyst extension for Dreamweaver, follow these steps to complete the installation process:

  1. Click Save File to begin the installation process.


     
  2. Double-click on the MXP file after it has finished downloading. The Adobe Extension Manager appears. Click Accept to agree to the extension disclaimer license agreement.


     
  3. The Adobe extension manager displays a checkmark next to the extension to indicate it has been successfully installed.


     
  4. Quit the Adobe Extension Manager and launch Dreamweaver.
     
  5. Choose Window > Business Catalyst to open the new Business Catalyst panel.


     
  6. Enter the same log in information (email and password) that you set up when you registered for your Business Catalyst trial site.

Note: Check the Stay Logged In checkbox to avoid logging back in; the authentication persists until two weeks of inactivity.

Defining a site with the Quick Site Setup wizard

Once you have logged in, the list of your Business Catalyst sites is displayed. Since you’ll use the same email and password for all of your sites, you don’t need to log out and log back in to switch between sites as you edit them.

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


     
  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 re-define it again. To complete the site definition, enter your email and password once again in the provided fields.


     
  3. Click Login to proceed to the Setup screen of the wizard.


     
  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.
     
  5. Note: In future sessions, if you do not wish to get the entire set of site files at the time you define a site with the wizard, you can deselect the Download site locally checkbox. Later, you can use the Files panel to download the site files when it is more convenient.
     
  6. Click Yes in the dialog box that asks Are you sure you wish to get the entire site?


     
  7.  When the files finish downloading, use the Files panel to review the site files. The Templates folder contains the DWT file that you’ll be editing in this tutorial. Also note that the stylesheets folder contains several CSS files, including screen.css. This is the file you’ll edit later in these instructions.

At this point your new Business Catalyst site has been defined and you are ready to begin editing it.

Using the Files panel to create new pages

The Files panel in Dreamweaver is a powerful tool. In addition to using the Files panel to upload files to the server, you can also use the interface to create and open documents, as well as manage files and folders. If desired, you can create the entire folder structure for a new site from scratch, and then populate the folders with pages as you create them. Right-click (or control-click) on any existing folder (including the root) and choose the New File or New Folder option from the context menu to create the site hierarchy.

Opening files in the Files Panel
To open a file and begin editing it, simply double-click on the file name that appears in the list of site files. If the file is an image or other file that is not editable by Dreamweaver, you’ll be prompted to select the desired application to open the file.

Once a page is open, you can edit the file in the Document window, using Code View, Design View or Split View (which allows you can see both panes at once).

Exploring the Files panel options

In this section, you’ll learn how to perform common site tasks using the Files panel interface:

A. Site pop-up menu: Use this menu to 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: Click this icon to connect or disconnect from the remote site.

C. Refresh: Click this icon to refresh the local and remote directory lists.

D. Site files view: This default setting displays 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): Click this icon to 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): Click this icon to 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: Click this icon toexpand 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 the Dreamweaver documentation.

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

Creating a new file in Dreamweaver

There are several ways you can create a new HTML page in Dreamweaver. As mentioned above, if you just want to create a generic HTML page with no CSS layout, right-click (or control-click) on any existing folder in the Files panel and choose New File. A file named untitled will appear in the selected directory. Rename the file name and then double-click the file to begin editing it in the Document window. This is the fastest method to create a new page.

To use the Dreamweaver New File dialog box to create a variety of file types (including JavaScript, CSS and Templates) as well as HTML pages with CSS layouts, follow these steps:

  1. Choose File > New from the top menu.
     
  2. In the Blank Page category of the New Document dialog box, select the type of page (HTML, CSS, etc.) you want to create from the Page Type column.
     
  3. If you want to create a page with a CSS layout, select one of the provided CSS layouts from the Layout column; otherwise, select None.
     
  4. Select a document type from the DocType pop-up menu. In most cases, you'll use the default selection, XHTML 1.0 Transitional.

    Note: To learn more about XHTML, see the World Wide Web Consortium (W3C) website, which contains the specification for XHTML 1.1 - Module-Based XHTML (www.w3.org/TR/xhtml11/) and XHTML 1.0 (www.w3c.org/TR/xhtml1/).
     
  5. If you selected a CSS layout in the Layout column, select a location for the layout’s CSS from the Layout CSS pop-up menu. You can choose to add the CSS to the head section of the document, create a brand new CSS file, or add the rules to an existing CSS file.
     
  6. You can optionally attach one or more CSS style sheets to your new page (unrelated to the CSS layout) when you create the page. Click the Attach Style Sheet icon above the Attach CSS file pane and browse to select a CSS style sheet. To learn more, see the article: Automatically attaching a style sheet to new documents.
     
  7. Click Create.
     
  8. Immediately after creating a new web page, it is a best practice to save the page somewhere within your local root folder. That way, Dreamweaver can track and manage your site's assets and check for broken links.
     
  9. Choose File > Save.
     
  10. In the dialog box that appears, navigate to the folder where you want to save the file. Always save files inside the folder you defined for the site to avoid error messages.
     
  11. Enter the file's name. Avoid using spaces and special characters in file and folder names, and do not begin a filename with a number. Don’t use special characters or punctuation in the file and folder names you create; this can create broken links.

Creating a home page using the Business Catalyst extension

In a static website, you designate the home page (the page that first loads when you go to www.mydomain.com) by uploading a file at the root level of the site folder that is named index.htm or index.html. Servers are configured to look for an index page; as long as a file by this name is found at the root level, the browser displays the home page displays correctly, even if the URL in the address bar of the browser does not contain the full path to the index page.

Follow these steps:

  1. Choose the desired site from the site menu in the Business Catalyst panel in Dreamweaver.
     
  2. Select File > New. Save the file as either index.htm or index.html in the root level of your local root folder.

    Note: It is a best practice to choose either the .htm or .html file extension and use your preference exclusively throughout the entire site. Combining the .htm and .html extension in the same site can cause confusion and broken links. In the Dreamweaver preferences, under the New Document category, you can set the file extension as .htm or .html, and all future files you create will use this extension. See the Adobe Dreamweaver online help for more information.
     
  3. Edit the new index page as desired in the Document window.
     
  4. While the file is selected, click Put files to upload the home page to the server.

Publishing files with the Files panel

Follow these steps to publish a web page using Dreamweaver:

  1. Select the desired site from the Site menu.
     
  2. Click the Connect icon to the right of the menu to connect to the remote server.


     
  3. Select the desired file or files from the Local files pane of the Files panel.
     
  4. Click the Put files icon to transfer the selected files to the remote server.

Retrieving files from the remote server with the Files panel

Follow these steps to get a page from the live site to begin editing it in Dreamweaver:

  1. Click the Connect icon to connect to the remote server.
     
  2. Select the desired file or files from the Remote files pane of the Files panel. Or click the top-level folder if you wish to get the entire site.

Click the Get files icon to copy the selected files to your local root folder.

Editing files: Workflow for maintaining a site

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

  1. Open the Files panel (Window > Files).

    Note: 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. Dreamweaver asks: Do you want to get the dependent files?


     
  2. Click Yes to copy the images and all of the associated documents (CSS, JavaScript) to your local machine. Click No if you only want to copy the HTML file.
     
  3. Once the HTML file is listed in the Local files pane, double-click the file to open it.

Updating pages in the Document window

    1. Open HTML files are displayed in the document window. In the top left corner, choose between Design View, Code View or Split View (to see both panes simultaneously).


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

Saving the file locally

  1. After making changes, choose File > Save. If you attempt to close an unsaved document, Dreamweaver will prompt you to save your changes before closing it.

Previewing in a browser

  1. 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.
     
  2. Interact with page elements (buttons, etc.) and try resizing the browser window to test your work and check the page’s layout. Note any issues to be fixed.
     
  3. To resolve issues or continue making changes, return to Dreamweaver and edit the page in the Document window. Then, repeat steps 6 and 7. Continue editing and previewing until you are satisfied with the appearance and performance.

Putting files

  1. Once the file is ready to be published, select the file in the Local files pane.
     
  2. 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).

Viewing the live site in a browser to test changes

Note: It is a best practice to always 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 displayed as expected when previewed locally.

  1. In a browser, enter the site’s URL in the address field:

    mysite.worldsecuresystems.com/mypage.html
     
  2. In the URL above, replace mysite with the name of your website and mypage with the actual name of the page you want to view.
     
  3. Interact with the page elements to ensure the buttons and rollovers (if present) are working correctly. You should see the module content populated from the database. Also check the formatting 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 on different platforms and browsers.

Previewing dynamic content in Live View

  1. Above the Document window, click the Live View Options icon to see the list of settings.


  2. Use the Live View Options menu to select the option to Use Testing Server For Document Source.


     
  3. When the Live View button is clicked once, the current document is displayed in the emulator after connecting to the database via HTTP. This allows you to see the modules in their rendered state, with the actual data (instead of the tag that invokes the module, which is the syntax that looks like: {module_announce,a}). Since Live View is truly viewing the pages that exist on the server, it is imperative that you Put the file to upload it, before viewing the page in Live View mode.
     
  4. Click the Live View button again to exit Live View. It is a toggle button that alternately turns on and off. When viewing the page in Live View, the page is being previewed and cannot be edited.

Note: If you are seeing a blank page instead of the content when Live View is enabled, choose Site > Manage Sites, choose your site name and click Edit. In the Servers tab, double check that the Testing Server has been defined.

If you used the Business Catalyst Quick Site Setup Wizard, the Testing Server will have been set up automatically. However, if you previously defined the Business Catalyst site yourself, select the Server category and check the checkbox as shown below:

Click the Test button to confirm that the login and password information are entered correctly. Dreamweaver will confirm when the connection to the testing server is successful:

Working with templates in Dreamweaver

When you create Business Catalyst sites, it is likely that you’ll apply a template (a DWT file) that contains all of the common elements to the site’s pages. This strategy allows you to build consistent sites and compartmentalize the content that is unique on each page. If you are familiar with Adobe® Fireworks®, the templates in Business Catalyst sites are equivalent 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, which are applied to web pages to wrap around the unique content of each page. Business Catalyst templates are essentially just HTML content that contains items such as the header, logo, site navigation, and footer. The common items that appear on multiple pages are maintained in the template so that you only have to edit them in a single location.

To create a new template, 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 pre-built CSS layouts. Otherwise, choose 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.
     
  3. Click Create.


     
  4. The new template file appears in the Document window.
     
  5. Next, you need to define the area within the template where the page content will be displayed.
     
  6. 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 code to the desired location in the template file to define the editable region.
     
  7. To accomplish this, 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 pre-built CSS layouts) and place your cursor in the desired container. You could also choose a table cell as the editable region.
     
  8. Choose Insert > Template Objects > Business Catalyst Editable Region.


     
  9. This process inserts the syntax 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:



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

     
  10. After inserting the editable region in the template, the next step is to save the template. Templates are always saved in the Templates folder that is located at the root level of your site.
     
  11. Choose File > Save.
     
  12. In the Save As dialog box that appears, enter the name for the template.


     
  13. Click Save.

Editing template files

When you are editing a page that is linked to a template, a yellow tab will appear in the top right corner of the Document window with the corresponding template’s name.

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 also double click on the file name of the Template 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 changes. That way, if you make a mistake and push the edited template live (which will 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 a page 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 the cursor is outside of the editable region:

Workflow for editing templates

There are three workflows you can follow when modifying templates:

  • Get the DWT file from the remote server. Double-click the DWT file to open it and edit it in Dreamweaver. Make the desired changes, and then push the updated template live.
     
  • Log into the Admin Console. Choose Admin > Site Wide Templates to open the existing template. Make changes to the template using the online interface, which includes both code and design view. Choose the Save and Publish to push the updated version live.
     
  • Log into the Admin Console to access the existing template. Copy and paste the code into Dreamweaver, edit it, and then paste the revised template code back into the code view of the Admin Console. Choose the Save and Publish to push it live.

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.


     
  3. Click Create. The new HTML page appears in the Document Window.

Remember, when you are editing the page, the template areas are not selectable or editable, both in Code View and Design View. Only the page itself can be edited. To make changes to the template, open the DWT file, edit it, and then save it. Pages that have the template applied will automatically be updated. There’s no need to reopen or resave the linked pages.

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 each page’s content. The rules in linked external CSS files will also show the formatting 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 defined in Dreamweaver. You must use the Admin Console to make this setting. Follow these steps:

  1. Access the desired template that you’ll use most often, using the steps above.
     
  2. In the Template Page details, check the check box next to Default Template.
     
  3. 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.

Using the Related Files bar to access the associated files of a pageWhen you use the Business Catalyst extension for Dreamweaver to connect to your Business Catalyst site and edit pages, the process for accessing the related files has changed.

If you are familiar with using Triangle with Dreamweaver, you know that the Triangle panel contains a link to access the CSS and JavaScript files. In Triangle, you click the arrow tab to the right of the Modules tab to access the link to the Special Files (related files).

The list of non-web pages (associated files) appears, and you can click on a style sheet to load the file and make changes in Dreamweaver.

In the Business Catalyst extension for Dreamweaver, you do not use the same workflow. Instead, follow these steps:

  1. In Dreamweaver, use the Business Catalyst panel to log into your site.
     
  2. Use the Files panel to access the entire list of site files and assets.
     
  3. Double-click on the desired page that you want to edit. The associated files are displayed as links in the top of the Document window.


     
  4. Click on any of these links to make the associated file active. For example, click primary.css to access the CSS rules in that linked file. Begin editing the code in the Code View pane of the Document window.
     
  5. 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.
     
  6. When you are finished making changes, choose File > Save All to save all of the open files.
     
  7. 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.


     
  8. When you sync the files, the following dialog box appears:


     
  9. Click Preview to put the updated files to the remote server.



  10. Click OK to synchronize the file on the remote server. Be sure to check your work by visiting the page in a browser.

Adding and configuring modules

Modules are pre-built chunks of code that are included 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 learn how to access the modules and add them to a page using the Business Catalyst extension.

Adding modules to a page

All of the available modules can be accessed through the Business Catalyst panel in Dreamweaver. Once you choose a specific module to add, a 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. Use the Business Catalyst panel to log into your online business site.
     
  2. 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.
     
  3. Place your cursor in the page content area, in the location where you want to insert the module.
     
  4. In the Business Catalyst panel, choose the module by name. Many modules have sub-modules within the group. Choose the subset of the module to add.


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


     
  6. The tag is inserted after making the above selection.
     
  7. In the wizard that appears, select from the provided list of options (see the next section on configuring modules for more details).

Configuring modules

After you’ve added a module by inserting the tag on a web page, the next steps involve using the provided wizard in the Business Catalyst extension to enter the settings to configure the module. Follow these steps:

After selecting the desired module to insert on a page, the wizard for that module appears, listing the available options. Many module wizards have more than one screen; click the Next button to continue making settings until you’ve reached the end.

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, the module tag will be removed from the web page 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 always offers two options: Cancel and Insert.

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:

In the default display, (shown above) the tag is located directly below the search field and submit button. This is the standard implementation, which causes the search results to appear below the search field once the query is submitted.

However, you can use Dreamweaver to edit the page in Code View to cut and paste the tag to place it above the search form. By rearranging the tags (which are always surrounded by curly braces) you can control where the 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 style sheet 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.

Note: The Firebug add-on for the Firefox browser is a helpful, free tool that you can use to view the live site and evaluate which styles to change to affect the page as desired. 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 data in a module by rearranging the module’s tags in the source code. You’ve also learned how to leverage the CSS classes that are pre-built into the modules code 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 editing the tags of the module, to add new parameters that define how the module will react on the live site.

For example, you can add additional attributes (separated by commas) to the end of a module tag to control how many items will be displayed in the module’s area of the live site. Consider the following:

This tag is the default module tag that is inserted when you add a blog:

However, you can also add the following tags to display additional data that is related to that blog and the posts that have been submitted. If you add this tag, a calendar widget displays to allows site visitors to click on a date and see the corresponding blog posts:

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

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

Some tag attributes stand alone, and can be added as a sub-feature to many different modules. For instance, you can add the following code next to an inserted module:

When this tag is present on the page, the Tell a Friend form is displayed, and the module’s data will be automatically sent to the email address entered on the live site.

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.



  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.



  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 article on Extending modules with tag attributes.

Deleting modules from a page

To use Dreamweaver to delete a module from a web page, follow these steps:

  1. In Dreamweaver, use the Business Catalyst panel to log into your site.
     
  2. In the Files panel, select the desired file from the Remote pane. While it is selected, click the Get files button to download a copy of the live page to your local machine. This ensures you are working with the most recent version.
     
  3. In the Local pane of the Files panel, double-click on the page you just copied, to open it in the Document window.
     
  4. Using Code View, locate the module code on the page. It may help to use Split View, so that you can select the module area in Design View, and then use the Code View to ensure that you select all of the code related to the module.
     
  5. While the module’s code is selected in Code View, click Delete. The code disappears from the page.
     
  6. Preview the page locally (using both Live View and Preview in Browser, if desired). Verify the changes you’ve made result in removing the module, without disturbing the other elements on the page. Test the page to ensure rollovers still work and the page content displays as expected.

    Note: Dreamweaver has 99 levels of undo. If you find that you’ve deleted too much of the source code, choose Edit > Undo until the page is restored. Then, analyze the code, delete the module syntax, and test the page again. Remember, if things go terribly wrong, always undo. The worst thing you can do is quit Dreamweaver, because once the file is closed, you lose the ability to undo your recent edits or revert the page.
     
  7. Once you have confirmed that the module code is removed successfully, choose File > Save to save your changes.
     
  8. Click the Put button to upload the edited page to the remote server. In this scenario, the new page (without the module) overwrites the older version, and this causes the live site to update automatically.

To learn more about adding and configuring modules, see the Overview of working with modules section of the Getting Started Guide for Business Catalyst. Also see the article on Using content modules.