Building your first site in Business Catalyst

Additional Requirements

Business Catalyst trial site

• Sign up for a free account

Business Catalyst extension for Dreamweaver

• Download

In this tutorial, you'll learn how to build an online business from scratch in Business Catalyst. You'll leverage the intuitive online interface (the Admin Console) in addition to working with Dreamweaver and the Business Catalyst panel to create and populate web pages. You'll also learn how to customize the appearance of text and page elements using CSS styles.

Business Catalyst also includes prebuilt modules that enable you to insert complex features directly in your web pages with a few mouse clicks. In this tutorial you'll insert and configure modules, and then use CSS styles and tag attributes to customize the features to suit the specific requirements of an online business.

This article is divided into the following sections:

• Starting your first Business Catalyst site
• Creating templates and web pages
• Inserting and configuring modules
• Building custom web forms with workflows
• Customizing web forms with CSS rules
• Updating module layouts with tag attributes

Starting your first Business Catalyst site

The Business Catalyst Platform provides the functionality your clients need to run a successful online business. The interactive features, including web forms and search capabilities, engage visitors and encourage participation. And you can configure web forms to use workflows that route the submitted data to moderators via e-mail, so that they can approve user-generated content before publishing it.

Web forms capture the contact details of potential customers in the backend database; later, that information can be leveraged to send targeted e-mail campaigns and promotions that encourage them to subscribe to newsletters, purchase products, and schedule services. By providing this type of two-way communication, you strengthen the company's brand while increasing sales and facilitating the processing of customer service requests.

For the purposes of this article, you'll be creating an online business for a fictitious company named House Swap—a barter-based vacation home sharing service (see Figure 1).

Back to top

Creating templates and web pages

The Business Catalyst extension for Dreamweaver enables you to connect to your remote Business Catalyst site and use Dreamweaver to create and edit templates, pages, and CSS style sheets—as well as manage and upload site files.

If you've never used Business Catalyst before, be sure to keep track of the e-mail address (your user name) and password that you use when you set up your trial site. You'll use these authentication details to log into the Business Catalyst panel in Dreamweaver and the Admin Console (online interface) in a browser.

If you haven't already worked with the Admin Console for a Business Catalyst site, be sure to read Introducing the Business Catalyst Admin Console to learn more.

Download and uncompress the sample files provided on the first page of this article. Save the expanded folder in a convenient location on your drive. After you've installed the Business Catalyst extension for Dreamweaver, you'll also need to launch Dreamweaver, select your trial site from the site list in the Business Catalyst panel, and use the Quick Site Setup wizard to define the site and download the site files so that you can work with the site locally. As you define your site, be sure to choose the sample files folder (named first_bc_site) and set it as your local root folder.

For detailed instructions about defining a site for Business Catalyst, see Using the Business Catalyst extension to edit a site in Dreamweaver.

At this point, when you look at the Files panel in Dreamweaver, you should be connected to your remote site and see all of the site files (the default files that come with the trial site and the sample files in your local root folder) displayed in the Files panel (see Figure 2).

The existing index.htm page is just a placeholder with a "Coming soon" image. Temporarily select Remote view from the menu above the Files panel and select index.htm. Right-click (or Control-click) the file and choose Edit > Delete to delete it. Switch the menu back to Local view and then delete the index.htm file from your local site folder as well.

To make the sample file assets available to the live site, you need to upload them. Follow these steps to upload all of the site files:

1. Select the Site folder at the top of the local pane of the Files panel.
2. Choose Site > Put or click the Put button (up arrow icon) to upload the entire local root folder to the remote server.
3. In the dialog box that asks, "Do you wish to put the entire site?", click OK.

Since this project begins from scratch, you'll begin by using one of the included CSS layout files that come with Dreamweaver to build the site's template. These handy HTML/CSS pages make it easy to create XHTML-compliant pages quickly—and with Business Catalyst, you can use any layout you'd like. You can use table layouts, or even hand-code the page layout if you'd prefer. But for the purposes of this article, you'll work with a specific CSS layout that fits the provided source images.

Follow these steps to create the site template:

1. Choose File > New > Blank Template. Choose HTML template as the Template Type, and then select the layout: 3 column fixed, header and footer (see Figure 3).

2. Click Create. The template appears in the Document window. Placeholder text makes it easy to envision how the page might look when it is populated. Click the Split button at the top of the Document window to see both the Code view and Design view simultaneously. The comments in the code contain helpful information about how to edit the template and update it.
3. In Design view, click the white center area of the template. Notice that the tag selector along the bottom of the Document window displays the tags in a breadcrumb format. Depending on where you clicked, you may see a <p> or a <h1>, <h2> or <h3> tag selected. Move one over to the left in the breadcrumb trail and select <div.content>. Clicking this tag selects the entire center column (see Figure 4).

4. While the <div> tag with the content class is selected, choose Insert > Template Objects > Business Catalyst Editable Region. A turquoise label and border surrounds the <div> tag, to define the ContentArea. This is the region where the unique page content will exist, surrounded by the template content that will remain the same for all pages. (Unlike other DWT files you may have created in Dreamweaver, Business Catalyst templates should only have one editable region defined).
5. Choose File > Save. In the Save as Template dialog box, enter main in the Save As field and click Save. The file is now saved as main.dwt and it is automatically placed in the Templates folder at the root level of your site.

Next, you'll customize the template so that it reflects the mood and branding of the online business. You'll insert some images and text; you'll also update the page properties to change the template's appearance. Follow these steps:

1. Choose Modify > Page Properties. In the Appearance (CSS) category, set the Page font to Arial, Helvetica, sans-serif. Set the Size to 90% and leave the Text color set to black (#000). Set the Background color to #52301C (see Figure 5).

2. Click Apply to see the changes applied without leaving the Page Properties dialog box. Notice how applying a few settings can make a significant difference in the way a template is displayed.
3. Choose the Links (CSS) category. Leave the default Link font setting (Same as page font). Enter the following hexadecimal color values into the fields next to each color chip:
   • Link color: #52301C
   • Visited links: #52301C
   • Rollover links: #000
   • Active links: #52301C

   In the Underline style menu, choose: Show underline only on rollover. Click the B (Bold) icon to make the text links bold.

4. Choose the Heading (CSS) category. Enter the following values for the header text:
   • Heading 1: 190%
   • Heading 2: 170%
   • Heading 3: 150%
   • Heading 4: 130%
5. Choose the Title / Encoding category. Enter the site name in the title field: House Swap. Click OK to save your changes and close the Page Properties dialog box.

The recent updates to the template are reflected in the Design view. In this next part, you'll use the CSS Styles panel to update some of the existing rules to add the company logo and change some of the div tag background colors.

Editing div containers with the CSS Styles panel

The CSS Styles panel is a powerful tool in Dreamweaver. When you use it in conjunction with the tag selector, it makes it easy to access specific rules and make changes quickly.

Follow these steps to continue updating the appearance of the main.dwt template:

1. In Design view, click in the upper left corner on the text: Insert_logo (180 x 90)
2. Use the Property inspector to click the folder icon next to the Src field. In the Select Image Source dialog box that appears, browse to select the file named logo.jpg from the images folder. Set the path to document relative, and then click Choose. Type / in the Link field and type House Swap in the Alt field to add Alternate Text for accessibility and search engine optimization (SEO).
3. While the image is still selected, click the New CSS Rule button in the bottom of the CSS Styles panel. In the Rule Definition dialog box that appears, leave the default Selector name for the rule:

4. Click OK to access the CSS Rule Definition dialog box. In the Box category, deselect the option Same for all under the Padding section. Enter the following pixel values (see Figure 6):
• Top: 10 px
• Right: 13 px
• Bottom: 10 px
• Left: 13 px

5. Click the Background category. In the field next to Background-color, enter the color value: #AB8E5B.
6. Click OK to save the settings added to the new CSS rule.
7. With the image still selected, click the Current tab in the CSS Styles panel to see the inline style rules. In the Properties pane, click the first rule listed (Background: #C6D580) and click the Delete CSS Rule (trash can icon) to remove it. Then select the next rule (Display: Block) and delete it as well. This rule is a placeholder inline style, used only for display purposes in the provided CSS layout for Dreamweaver.

   Note: You may need to drag the bottom of the CSS Styles panel down to expand its height in order to see the Properties pane and delete the rules.

8. Since the logo image is still selected, use the tag selector located at the bottom of the Document window to select one of the elements listed to the left. Select the <div.header> to select the <div> tag with the .header class assigned (see Figure 7).

9. In the CSS Styles panel, click the Current tab to see only the currently selected style. The rules applied to the .header class are displayed. Click the Edit Rule button (pencil icon) at the bottom of the CSS Styles panel to edit the .header style (see Figure 8).

10. In the Background category, enter the following hexadecimal color value in the field next to Background-color: #AB8E5B.
11. Click the Browse button next to Background-image and navigate to the header.jpg file that is located in the images folder. Set the Relative menu to Site Root. Click Choose to select it.
12. Next to the Background-repeat field, use the menu to choose no-repeat. Click OK to save the changes.

Take a moment to view the page in Design view to see the recent changes. Next, you'll update a few more rules to add different background colors. Follow these steps:

1. Click your cursor in the left column. In the tag selector, choose the <div.container> tag. In the CSS Styles panel, click the Current tab (if it is not already selected). The CSS Styles panel displays the current rules applied to the .container class.
2. Click the Edit Rule (pencil icon) button to open the CSS Rule Definition dialog box. In the Box category, change the width from 960 px to 980 px. Click OK to apply the changes and close the CSS Rule Definition dialog box.
3. Click your cursor anywhere in the middle center column. In the tag selector, choose the <div.content> tag. In the CSS Styles panel, the Current tab will still be selected. The CSS Styles panel displays the current rules applied to the .content class.
4. Click the Edit Rule (pencil icon) button to open the CSS Rule Definition dialog box. In the Background category, enter the following hexadecimal color value: #F5E6AC. Click Apply to see the changes take place without leaving the editing dialog box.
5. In the Box category, in the Padding section, set the Left padding to 20 pixels. Set the height field to 775 pixels.
6. In the Border category, deselect the same for all in the Style, Width and Color sections. Use the menus next to Top to choose solid, thin and enter the hexadecimal color value: #666. Click OK to apply the changes and close the dialog box.

A thin gray border extends past the left side navigation, along the top of the main content area. The design is really shaping up now. There's just a few more styles to update. Follow these steps:

1. Click inside the left sidebar. Use the tag selector to choose the <div.sidebar1> container. In the Properties pane of the CSS Styles panel, select the existing hexadecimal color value (#EADCAE) and replace it with the new color: #658F91. Click the Edit Rule button (pencil icon) to launch the CSS Rule Definition dialog box. In the Box category, set the height field to 785 pixels.
2. Click inside the right sidebar. Use the tag selector to choose the <div.sidebar2> container. Click the Edit Rule button (pencil icon) to launch the CSS Rule Definition dialog box. In the Box category, set the height field to 775. In the Background category, set the Background-color to: #658F91 (the same blue as Sidebar 1).
3. In the CSS Styles panel, click the All tab to see the entire list of styles. Scroll down through the list until you locate the style named: ul.nav a, ul nav a:visited. In the Properties pane, replace the existing background color value (#C6D580) with the new color value: #F5E6AC
4. Move down to the next style in the list of styles in the CSS Styles panel. It is named ul.nav a:hover, ul.nav a:active, ul.nav a:focus. In the Properties pane, replace the existing background color value (#ADB96E) with the new color value: #52301C. After making these changes, the left-side navigation links will appear yellow on the up state and dark brown (with white text) on the over state. Click Live view to interact with the rollover states and see the new colors.
5. Since you've just adjusted the formatting for the left navigation links, it's a good time to update the links. In Design view, select the top link (Link one) and type Home. In the Property inspector, enter the path in the link field: /
6. Highlight the second link (Link two) and type Share Your Home. In the Property inspector, enter the path in the link field: /share.html
7. Highlight the third link (Link three) and type Search Homes. In the Property inspector, enter the path in the link field: /search.html
8. Highlight the fourth link (Link four) and type Contact Us. In the Property inspector, enter the path in the link field: /contact.html

Now that the navigation is set up and the containers are styled to match the design, the last remaining task to build the template is to populate it with new text content. In this part, you'll copy the text from the provided text files and paste it into each container. Follow these steps:

1. Open the sidebar1.txt file (located in the folder named text in the sample files folder). Copy the contents of the text file. Back in Dreamweaver, select Split view so that you can see both the code and the design side by side. Click immediately before the placeholder text in the left sidebar (below the navigation) that begins "The above links demonstrate..." and drag to select all of the text inside the sidebar. Press the Delete key to remove it (see Figure 9).

2. In Code view, highlight the remaining empty set of <p> tags inside the sidebar1 <div> tags. While the <p> code is selected, choose Edit > Paste to paste the contents of your clipboard into the sidebar1 area. Click in the Design view area again to see the new text appear.
3. Open the sidebar2.txt file (from the text folder). Copy the contents of the text file. Back in Dreamweaver, click inside the header text: Backgrounds. In the tag selector, select the <h4> tag and press the Delete key to remove it. Highlight the remaining paragraph text until the entire sidebar2 text is selected. Press the Delete key to remove it. In Code view, select the remaining empty set of <p> tags in the sidebar2 <div> (see Figure 10).

4. While the code is selected, choose Edit > Paste to paste the contents of your clipboard into the sidebar2 area. Click in the Design view area again to see the new text appear in the right sidebar.
5. Back in Dreamweaver, delete each of the headers inside the center column content area by selecting it, choosing its header tag in the tag selector, and pressing the Delete key. Highlight all of the remaining placeholder text content. Press the Delete key to remove it. In Code view, highlight the remaining empty set of <p> tags inside the content area (see Figure 11).

6. This is the region where the unique page content will appear in the pages that are applied to this template. For now, just enter some placeholder text such as: Unique page content goes here, as shown in Figure 11.
7. Open the footer.txt file. Copy its contents. In Design view, click and drag your cursor over the placeholder text in the footer area to select it. Press the Delete key to remove it.
8. In Code view, highlight the remaining empty set of <p> tags within the footer container. While still in Code view, choose Edit > Paste to paste in the new footer text.

Moving the CSS rules to an external style sheet

Now that the CSS rules are updated, you'll move the rules from this DWT file into their own external style sheet. Follow these steps:

1. Expand the CSS Styles panel with the All tab selected. Highlight the first style listed (body) and press and hold the Shift key while you select the last style (a). While all of the styles in the list are selected, right-click the list and choose the option: Move CSS Rules… (see Figure 12).

2. In the Move to External Stylesheet dialog box that appears, select the option A new stylesheet... and then click OK.
3. In the Save Style Sheet File As dialog box, double-click the CSS folder to select it. Enter a name for the style sheet: primary.css, specify the stylesheets folder, and then click Save.
4. Check out the CSS Styles panel to see that all of the styles have now been moved to a linked CSS style sheet named primary.css.

Note: The remaining empty <style> tags are still in the head section of the main.dwt source code. It's fine to leave this empty tag, but if you'd prefer to remove it, right-click the <style> tag and choose Go to Code in the context menu that appears. The empty set of <style> tags are presented in the Code view; simply highlight the entire set and press the Delete key to remove them. After making this change, the empty <style> tag is no longer listed in the CSS Styles panel.

At this point, the template has been edited and it is ready to use; and the styles are now stored in an external, linked CSS file, making it easier to edit them later. Choose File > Save to save the main.dwt file, and then close it. Now you'll create the index page (Home page) for the site. Follow these steps:

1. In the Files panel, double-click the index.htm file to open it. Select Split view.
2. Click anywhere in Design view. Using the tag selector click the <center> tag to select all of the existing code. Press the Delete key to delete it.
3. Choose Modify > Templates > Apply Template to Page. In the dialog box that appears, choose the main.dwt file and click Select. Leave this option selected: Update page when template changes.
4. Open the index.txt file (from the text folder). Copy the contents of the text file.
5. Back in Dreamweaver, click your cursor inside the editable area (placeholder text) in Design view. In Code view, highlight the set of <p> tags surrounding the placeholder text and paste the contents of the clipboard to populate the page.
6. Choose File > Save to save the page, and then click the Put button (upward arrow) or choose Site > Put Files to copy the index page to the remote server. In the dialog box that appears asking if you want to put the dependent files, click Yes.

In a browser, enter the address for your trial site. You can enter just the domain name, without the index.html, like this (replacing my-site with your site's address):

my-site.businesscatalyst.com

The index page appears, surrounded by the contents of the main.dwt file. Its appearance is dictated by the rules in the linked primary.css file. This is the workflow you'll follow whenever you are building pages that are applied to templates in Dreamweaver. In the next section, you'll use the same template to build out other pages, and insert new functionality using the modules that are included with the Business Catalyst Platform.

Back to top

Inserting and configuring modules

The provided sample files (used as the local root folder) contain some prebuilt pages that you uploaded in the previous section. These files located in the pages folder, and they are named bernal.html, castro.html, haight.html and noe_valley.html (representing houses available to swap in different San Francisco neighborhoods). You can examine these pages in Dreamweaver by double-clicking their file names and viewing them in the Document window. Or, if you prefer, you can visit your site and append the file names at the end of the URL in a browser's address bar to preview the pages online. In this example, these prebuilt pages are needed to populate the site, so that you can experiment with the site-wide search functionality that you'll add in this part of the tutorial.

First, use Dreamweaver to create the page that will display the search field and results. Follow these steps:

1. Choose File > New. In the New Document dialog box, choose Page from Template. Choose your site's name in the middle column and then choose main. Select the check box: Update page when template changes. Click OK to create the new web page.
2. Choose File > Save, and save the file as search.html at the root level of your site.
3. In Design View, highlight all of the placeholder page text and press the Delete key. If you are working in Split view, you’ll see that only a set of empty <p> tags remains in the Code view.
4. In Design view, while your cursor is inside the <p> tags, type the following:

   Search homes to swap

5. Press Enter (Windows) or Return (Mac OS X) to create a new line, and then type:

   Enter a neighborhood name in the search form to find available houses:

6. Select the first line, Search homes to swap, and use the Property inspector to set the text to use Header 1 formatting.
7. Click the end of the second line. Press Enter (Windows) or Return (Mac OS X) twice to add two more sets of <p> tags.
8. Press the Down arrow key (if needed) to put the cursor inside the last set of <p> tags.
9. Choose File > Save to save the recent changes to the page.
10. Choose Site > Put (or click the Put button) to upload the new page to the live site.

To configure and insert the search module, you'll need to access the Admin Console for your site. Follow these steps:

1. In a browser, enter the address for your trial site with /admin at the end of the URL. You can enter just the domain name, without the index.html, like this (replacing my-site with your site's address): my-site.businesscatalyst.com/admin

   Note: It is a best practice to log into the Admin Console and leave it open in a browser window, so that you can make changes online without logging back in.

2. Enter the same user name (your e-mail address) and password that you used in the previous section to log in to the Business Catalyst panel.
3. After you've logged in, the Dashboard appears. Choose Modules > Site Search to access the Site Search page. Click Create a new Search. In the Name field that appears, name the search: Site-Wide Search.
4. In the Site Search Details, use the Search Type menu to select the Entire Website option. Notice that you could create multiple search forms and configure them to only types of content in your site (see Figure 13).

5. Make sure that the Enabled check box is selected, and then click Save.
6. In the right sidebar, click Add search box to web page. In the window that opens, select the search page. In the preview, place your cursor in the line after the header—Enter a neighborhood name—in the search form to find available houses, and use the 1-Click Insert menu to choose Insert: search box for this Site Search (see Figure 14).

7. Scroll down and click Save and Publish.

Note: By default, the search results appear below the search form. Search results are dynamically displayed based on the placement of the {search_results} tag. If desired, you can configure the search results to display on a separate search results page. For more information, see Working with the Site Search module.

Now it's time to check your work. Follow these steps to preview the new search form and test it.

1. The green confirmation message indicates the page has been published. Click the link to preview the updated search page and test the search form. Enter one of the neighborhoods listed below to see the matching house swap page appear in the search results:
   • Bernal Heights
   • Castro
   • Haight
   • Noe Valley
2. You can also try searching for any other keyword that exists on the site pages. As mentioned previously, if the search is not finding matching pages as it should, choose Modules > Site Search and then re-index the site. Wait for the site to index, and then test the search again.

Now that you've inserted and configured the search feature, it's time to create a new page with a custom web form that enables visitors to submit details about their house to share with the other participants. Proceed to the next section to learn how to use the Webform Builder to create forms.

Back to top

Building custom web forms with workflows

The fictitious online business is taking shape now. At this point you've created the template, the Home page and the Search page to enable visitors to find homes that are available to swap. In this section, you'll create the Share page that includes a customized web form so that visitors can submit their house and participate in the bartering process.

Although you can create and configure Web Apps (custom content types that gather and display user-generated content, such as recipes, book reviews, camping tips, and more), doing so is outside the scope of this article.

Generally speaking, it is a best practice to follow one of the two strategies when collecting user-generated content to display on the site to help prevent spam:

• Create a Secure Zone (password-protected area) that requires visitors to log in. Insert the Web App on a page inside the Secure Zone to ensure that only registered users submit content that immediately displays on the site.
• Create a web form with a workflow that forwards the form data submitted to a moderator's e-mail address. Rather than immediately displaying the new content, it must first be approved by a moderator (someone on the team) before it is published. Using this approach, any inappropriate content that is submitted can simply be rejected.

In this article, you'll use the second strategy and create a web form with a workflow. Follow these steps:

1. Log in to the Admin Console for your site. (You may find that it is still open in another browser window).
2. Choose Modules > Web Forms. Click the button to launch the Webform Builder. The New Web Form page appears.
3. The Webform Builder is an AJAX-based interface that allows you to add the desired form elements dynamically while you see the preview of the form displayed. In the Webform Details, enter the form's name: Share your home.
4. In the Use Workflow? menu, choose the option Content Approval Workflow. (This workflow can be configured with the e-mail address of the moderator who will receive the form submissions and can choose to approve or reject them for publication).
5. As mentioned previously, you could create secure areas of your site. Although you won't set that up for this sample project, notice that you could configure a form to register visitors to gain access to a Secure Zone when they submit a form. For example, you could subscribe users to a landing page that contains discount pricing or promotional offers for services that are only available to visitors that register. For now, leave the Secure Zone menu set to Don't subscribe to a Secure Zone (see Figure 15).

6. Click Save. The contact form fields (title, first name, last name and e-mail address) are generated automatically. The red asterisks indicate that these fields are required by default. This information is necessary so that the visitor's contact data can be gathered and stored in the backend database. In the next few steps, you'll add some custom form elements to gather information specific to the House Swap program.
7. In the Custom Fields section, click the List (Dropdown list) option. In the Field Name field that appears, type: Select your neighborhood:

   Select the Required option. Enter Bernal Heights in the Item field, and then click the Plus (+) button to add a new item. Repeat this step four more times to add Castro, Haight, Noe Valley and Other to the list options (see Figure 16).

8. Click Save and then test the dropdown list by interacting with it in the form preview.

   Note: To delete a form element, hover over it in the preview and then click the Delete button (red circle icon). If you need to edit a form element, hover over it and click the Edit button (pencil icon). All of the form elements are completely editable at any time.

9. In the Custom Fields section, click the Text (String) option. In the Field Name, type: If other, enter your neighborhood:

   Make sure the Required option is not selected, to make this element optional. Click Save.

10. In the Custom Fields section, click the List (Checkbox List) option. In the Field Name, type: Are pets allowed?

    Select the Required option. Enter Cats OK in the Item field and then click the Plus (+) button to add a new item. Repeat this step two more times to add Dogs OK and No pets allowed. Click Save.

11. In the Miscellaneous tab, click File Attachment. No other configurations are necessary.
12. Also in the Miscellaneous tab, click Image Verification. This adds CAPTCHA functionality that requires the visitor to type in a series of alphanumeric characters into a field in order to submit the form, to prevent spambots from targeting your site to enter unrelated or inappropriate form submissions (see Figure 17).

13. The form is now complete. But spend a few moments examining the other tabs. If desired, you could add eCommerce-related form elements and collect visitor's credit card information. Business Catalyst supports a wide variety of payment gateways that you can use to process transactions. You can also choose the option to process transactions offline, depending on the company's requirements.
14. Also notice that you can drag and drop the elements of the form to reposition them within the form preview window. This makes it easy to edit the form. However, keep in mind that, unlike templates, the changes you make after inserting a web form in a page are not automatically updated; if you need to edit a form after you've added it to site pages, you'll need to delete the form and reinsert it to display the newest version.

Note: Using the Webform Builder, you can develop forms that are deployed on other, non–Business Catalyst sites. For example, if a business has several sites and only one is hosted with Business Catalyst, you can click the option to Get Web Form HTML Code in the right sidebar, copy the code, and then paste it into any static or dynamic site page. The form will still work as expected, and the data will be captured in the backend database for the Business Catalyst Admin Console where it was created.

Now that the form has been created, switch back to Dreamweaver and create the Share page to insert it using the Business Catalyst panel. Follow these steps:

1. In Dreamweaver, choose File > New. In the New Document dialog box, choose Page from Template. Choose your site's name in the middle column and then choose main. Select the check box: Update page when template changes. Click OK to create the new web page.
2. Choose File > Save, and save the file as share.html at the root level of your site.
3. In Design view, highlight all of the placeholder page text and press the Delete key. If you are working in Split view, you'll see that only a set of empty <p> tags remains in the Code view.  Press Enter (Windows) or Return (Mac) to create a new line.
4. In Design view, while your cursor is inside the <p> tags, type the following: Share your home

   Select this line and choose Header 1 as the format in the Property inspector.

5. Move down to the next set of <p> tags and type: Enter the details about your house in the form below:
6. Place your cursor after the last set of <p> tags. Press the Down arrow to move your cursor to the bottom set of <p> tags.
7. In the Business Catalyst panel, choose WebForms > Web Forms. The Module Configure wizard appears. In the Choose Web Form screen, choose the form named Share your home and click Next.
8. In the second screen that appears, click Next. In the last screen, click Finish to insert the form. The inserted form is displayed in Design view of the Document window.
9. Choose File > Save to save the recent changes. Choose Site > Put (or click the Put button) to upload the file to the live site. If the dialog box appears asking if you want to put the dependent files, click No.

The Share page is now live on the remote site. In a browser, visit your site's home page. Click the navigation item named Share Your Home to see the Share page you just created. Test the form's elements by filling in the form and submitting it. In a real-world example, the data that you submit would be forwarded to the moderator via e-mail.

Note: The instructions for setting up users and defining roles are beyond the scope of this article, so in this example the workflow to forward the form data to the moderator is ignored. However, if you are familiar with working with users and roles in other Content Management Systems, it is a fairly straightforward process in Business Catalyst. In the Admin Console, you can choose Admin > Manage Users > Create a new user to add the contact details for a new user of the site. Then, you can choose Admin > Manage Roles > Create a new role to create a moderator role, set permissions and add a user to the role.

Next, you'll learn how to create a contact form on the Contact Us page using the Business Catalyst Platform to make it easy for visitors to contact the business owners and make inquiries. You'll also see how to customize the form with CSS formatting.

Back to top

Customizing web forms with CSS rules

In this last section, you'll learn how to insert a contact form, a commonly requested feature from web clients to build out the Contact Us page. You'll also learn about module layouts and how to control both the appearance of modules.

You'll begin by building the Contact Us page. Follow these steps:

1. In Dreamweaver, choose File > New. In the New Document dialog box, choose Page from Template. Choose your site's name in the middle column and then choose main. Select the check box: Update page when template changes. Click OK to create the new web page.
2. Choose File > Save, and save the file as contact.html at the root level of your site.
3. In Design view, highlight all of the placeholder page text and press the Delete key. If you are working in Split view, you'll see that only a set of empty <p> tags remains in the Code view.
4. In Design view, while your cursor is inside the <p> tags, type the following: Contact us. Select this text and use the Property inspector to set the format to Heading 1.
5. Press Enter (Windows) or Return (Mac) to create a new line and type: Use the form below to submit your comments or inquiries:
6. Press Enter (or Return) again to create one more set of <p> tags. Press the Down arrow to move your cursor to the bottom set of <p> tags.
7. In the Business Catalyst panel, choose WebForms > Web Forms. The Module Configure wizard appears. In the Choose Web Form screen, choose the form named Contact Us Form and click Next.
8. In the second screen that appears, click Next. In the last screen, click Finish to insert the form. The inserted contact form is displayed in Design view of the Document window (see Figure 18).

9. Choose File > Save to save the recent changes. Choose Site > Put (or click the Put button) to upload the file to the live site. If the dialog box appears asking if you want to put the dependent files, click No.

The Contact Us page is now live on the remote site. In a browser, visit your site's home page. Click the navigation item named Contact Us to see the Contact page you just created. Test the form by filling in the fields and submitting it. If you enter a valid email address, you'll receive the default confirmation message indicating your data was received.

Note: As with all the other features in a Business Catalyst site, auto-reply email messages triggered by forms can be completely customized and redesigned. You can even disable the auto-reply messages, if you like.

As mentioned previously, one of the huge benefits of a Business Catalyst online business is that all of the site activity is recorded in the backend database. After submitting the form, log in to the Admin Console in a browser and click Home to see the Dashboard. Scroll down and you'll see all of the site activity recorded in the Live Feed (see Figure 19).

You can click the links in the Live Feed to jump to the contact details for the visitor. This enables you to leverage each potential customer and utilize the user management features to send customized email campaigns, subscribe visitors to secure zones, create customer loyalty programs, apply discount codes to specific products, and much more.

Return to Dreamweaver and the Contact page. In this part, you'll see how easy it is to apply CSS styles and format the form to fit your site's design. Follow these steps:

1. Click inside the contact form to see the list of nested tags displayed in the tag selector. Click several of the tags listed to see that you can select individual form items and labels. Each one of these could be styled individually, if desired. For this example, click the <form> tag to select the entire region of the contact form.
2. At the bottom of the CSS Styles panel, click the New CSS Rule button to create a new style. In the New CSS Rule dialog box, leave the default settings for the Selector Type (compound) and Selector Name fields. Also leave the Rule Definition menu set to update primary.css, so that all of the styles are kept in the primary style sheet. Click OK.
3. In the CSS Rule Definition dialog box, in the Box category, deselect the check box Same for all in the Margin section. Set the left margin to 15 px and click OK. The entire form scoots over to the right in Design view.
4. Now use the tag selector to click the <div.webform> tag. Click the New CSS Rule button to create another new style. In the New CSS Rule dialog box, leave the default setting for the Selector Type (compound) and the other options. Click OK.
5. In the CSS Rule Definition dialog box, in the Type category, set the font-face to "Arial Black", Gadget, sans-serif.
6. In the Background category, type the following hexadecimal color value into the Background-color field: #AB8E5B
7. In the Box category, set the width to 330 px. Deselect the check box next to Same for all in the Padding section. In the Left padding field, type 10 px.
8. In the Border category, leave the Same for all check boxes selected. Use the Style menu to select Solid, use the Width menu to select thin, and set the Color field to black (#000). Click OK.
9. The form's appearance changes in the Design view of the Document window. The changes that you made were added to the primary.css file, so select it, save it and put it to the remote server to change the live site.
10. In a browser, visit your site and click the Contact Us navigation link on the Home page. The Contact page appears and the form is styled with the rules you just applied. Click the Share Your Home link and notice that this form has been updated as well, because both forms are linked to primary.css. This is a great time-saving benefit; storing the rules in a central location makes them easier to edit and also keeps the elements of a site consistent. However, if you want to add changes to a specific form and not affect the other forms in a site, set the Rule Definition menu in the New CSS Rule dialog box to This document only. That way, only the form in the currently opened document will be formatted using the new rules that you apply (see Figure 20).

Back to top

Updating module layouts with tag attributes

In the section on inserting and configuring modules, you edited the search results layout page to control the width of the search results that are displayed on a page. In this part, you'll learn how to use another method for customizing modules. Rather than editing the CSS rules, you'll use the Business Catalyst panel to add tag attributes to layouts to extend the functionality and display of the dynamic data generated by modules.

The tag attribute insert feature is contextual. The interface will only appear when a module layout is currently open in the Document window. And it goes a step further, because different module layouts can use different subsets of tag attributes. The Business Catalyst panel will only display the applicable tags to insert in the layout that you're editing. Follow these steps to learn how to insert tag attributes in a layout file.

1. In the Files panel, expand the Layouts folder. Open the SiteSearch folder and double-click site-search.html to open it.
2. Choose Split view (if it is not already selected) to see both the code and design simultaneously.
3. Along the top of the search results layout, you'll see two tags: tag_counter and tag_name. In the next line, there's a single tag: tag_description. Each of these module tags trigger the database to display specific dynamic data. For example, tag_counter is a numeric value that displays the number of matching search results. The tag named tag_name displays the name of the matching page, with a link to visit the page and the {tag_itemtype} displays a text description of the type of file found in the search results (web page, announcement, or other type). If you don't want the type text description to display, select the tag in Design view to highlight it, and then press the Delete key to remove it (see Figure 21).

Note: If desired, you can also create <div> tags or table cells in the layout pages to control the layout of specific tag data, and position the tags in the desired arrangement.

4. Now you'll see how to insert a new tag attribute. Look in the bottom of the Business Catalyst panel. The Tag Attribute Insert menu is displayed, and it contains the tags that are applicable to the currently open layout. Use the menu to scroll through the tag attributes; hover your cursor over each tag to see a tooltip with its description (see Figure 22).

5. Locate the tag named {tag_image} in the list. This tag displays an icon, alerting the visitor to the type of matching content in the search results (web page, announcement module, etc.).
6. Place your cursor immediately before {tag_description} on the second line. In the Tag Attribute Insert menu, select the {tag_image} tag and click Insert. The tag is inserted in the site_search.html layout page.
7. Save the layout page, and then put the new version to upload it to the live site.
8. In a browser, visit your site's Home page. Click the Search Homes navigation item to access the Search page. Enter some text and click Search to see the results displayed.
9. The search results are updated to display an image indicating the matching item's file type.

This example just scratches the surface of the flexibility you have when working with modules. As you've seen in this article, you can use templates to maintain the look of web pages, you can use CSS style sheets to format the page elements, and you can use a combination of HTML, CSS and tag attributes to edit the appearance of module data. Every system message, confirmation page, form element, navigation item—everything you see in Business Catalyst—is completely customizable, down to the last pixel.

Back to top

Where to go from here

This example project illustrates the basic workflow you'll use when developing dynamic sites with the Business Catalyst Platform. Using the Business Catalyst extension, you can use the Dreamweaver authoring environment to create templates, edit pages and define the site's design. By leveraging the modules, you can add the features your clients request, and you can use standard HTML and CSS code to control their appearance.

To learn more about working with Business Catalyst, read these other Developer Center articles:

• Customizing the prebuilt templates that are included with a Business Catalyst trial site
• Upgrading a trial Business Catalyst site

To learn more about working with modules, visit the Business Catalyst Support Central Knowledgebase. And be sure to visit the Business Catalyst Developer Center to get more articles, tips and best practices for building online businesses with Business Catalyst.