Creating a Public Website

Top  Previous  Next

You can create multiple websites using the Website module. At a given time, only one website can be made active.

Creating a public website involves creating a framework for the website and adding web pages and tabs to the website. Tabs group web pages of similar information under one head. You can create a website by:

Creating a Framework of the Website
Adding Tabs
Adding Web Pages
Adding Data in Rows
Adding Data in Columns
Adding Media Files
Adding a Document

Creating a Framework of the Website

Creating a framework for the website involves:

Selecting a template - select a template for the website that presents your data on the website in a way you want.
Specifying details - enter details, such as name, description, keywords for page hits, and so on for the website.
Selecting Logo - display your company logo on the website.
Selecting Look and Feel - select a layout of the website.
Selecting Style - select a style suitable style sheet for the website. A stylesheet describes styles of elements on the website.

To create a website:

1.Click Setup Public Website.

The Sites page is displayed, as shown in Figure 1.

 
add_webiste

Figure 1 The Site Page

2.Click Add Site.

The Add Website page is displayed, as shown in Figure 2.

 

specifyingDetails_website

Figure 2 Specifying Website Details

The following fields are displayed on the Add Website page:

Name - enter the name of the website.
Enabled - select to indicate that the website is made active and available to public.
Meta Description - enter keywords related to the information being displayed on the website.

The values entered in the Meta Description field are saved as meta-tags that enable indexing of pages by search engines.

Notes - enter notes for the website.
Scripts - enter scripts that enables you to specify Javascript that will apply to all the pages in the website.

For example, this field can be used to accommodate scripts for Google Analytics. When you want the website to be analyzed by Google (for page hits), it prompts you to enter the website URL, and based on this provides you a script. You must copy that script in the Script field. This prepares all the web pages for Google Analytics.

3.Enter website details and click Save.

The website is displayed in accordance with the selected template, as shown in Figure 3.

 

new_website

Figure 3 The New Website Page

4.Click Choose Site Logo to select your company logo that you want to be displayed on the website.

The Top Folder page is displayed. This page displays all the files that can be selected, as shown in Figure 4. To select the logo file from the Top Folder page, it should be available on the page. To upload a file on the Top Folder page, refer to Uploading Media Files. You can add a file (only .png, .jpg, and .gif files are acceptable) from the local hard disk to the Top Folder page.

5.Locate the logo file on the Top Folder page.

 

choosing_logo

Figure 4 Specifying Company Logo in the Website

6.To display the logo file on the website, click the logo file link.

The logo is displayed on the website, as shown in Figure 5.

 

logo_site

Figure 5 Company Logo Displayed on the Website

You can click Remove to remove the logo from the website.

7.Click Choose Look and Feel, as shown in Figure 6.

 

choose_style

Figure 6 Selecting Look and Feel for the Website

The Styles page is displayed. Select a layout for the website.

8.Click Add Style, as shown in Figure 7.

 

choose_style1

Figure 7 Selecting Style for the Website

The Upload Stylesheet page is displayed, as shown in Figure 8.

 

upload_stylesheet

Figure 8 Uploading Stylesheet for the Website

9.Specify the stylesheet for the website.

The basic framework of the website is ready.

Click Preview Site to preview the website without displaying the changes made to the website. If you edit the website, you can click Preview Changes to view the changes. A sample website is shown in Figure 9.

 

final_website

Figure 9 A Sample Website Created in ConcourseSuite

A list of websites created is displayed on the Sites page, as shown in Figure 10.

 

added_website

Figure 10 The Website Added in the Site Page

The following options are available on the Sites page for a particular website, as shown in Figure 11:

 

options_Site_page

Figure 11 Options Available on the Site Page

Edit Details - enables you to edit the website.
Preview - enables you to preview the website.
Modify - enables you to modify the name and description of the website. When you click Modify, the Modify Website page is displayed, as shown in Figure 12.

 

modify_website

Figure 12 The Modify Website Page

Enable - enables you to activate the website and make it available for public viewing.

Note: When you enable the website, the Sitemap link is displayed on the top right corner of the website. The Sitemap displays the number of times the website is viewed.

Copy - enables you to create a copy of an existing website.
Delete - enables you to delete the website.

Adding Tabs

A tab groups related information under one head on the same web page. You can add or remove tabs by clicking drop-down_arrow beside the tab name, as shown in Figure 13.

 

adding_tabs

Figure 13 Adding or Removing Tabs

You can click the forward and backward arrows (as shown in Figure 13) to change the location of the selected tab. You can also delete the selected tab.

When you click Rename, the Modify Tab page is displayed, as shown in Figure 14. Click Update.

 

modify_tab

Figure 14 Renaming a Tab

Adding Web Pages

In ConcourseSuite, you can add web pages under a tab. The default page created under a tab is Topic 1. This behaves as sub-level grouping of information under a tab. The set of options available for Topic 1 are:

Upward and Downward Arrows - to move the selected topic up or down one level.
Modify - to change the name and internal description of the topic, as shown in Figure 15.

 

modify_topic

Figure 15 Modifying Topic

Add a Topic Below or Above the Topic - to add another topic below or above the selected topic.

To add a web page under a topic, click drop-down_arrow beside the tab name under the topic name, as shown in Figure 16.

 

editing_link_options

Figure 16 Adding Web Page in a Website

The following options are available for a web page:

Upward and Downward Arrows - to move the selected web page up or down one level.
Enter Construction Mode - to be able to modify information on a web page, you must select Enter Construction Mode.
Modify Page Attributes - to change the properties (for example, internal description) of the web page. When you click Modify Page Attributes, Modify Page is displayed, as shown in Figure 17.

 

modify_page

Figure 17 The Modify Page

Commit Changes - to make the changes made to the web page effective.
Cancel Changes - to cancel the changes made to the web page.
Add a Page Above or Below the Page - to add a web page above or below the selected page.

You can add a page above or below the current page. When you select Add a Page Above This Page or Add a Page Below This Page, Add Page is displayed, as shown in Figure 18.

 

website_add_page

Figure 18 The Add Page

Specify values in the following fields:

Name - enter a name for the page.
Enabled - select to indicate that the web page is made active and available to the public.
Internal Description - enter keywords related to the information being displayed on the web page.

The values in the Internal Description field are saved as meta tags that enable indexing of pages by search engines.

Page Alias - click Select to select an already created page. The current page derives the user interface of the selected page.
Page Priority - select the priority of the web page.
Change Frequency - select the frequency of changing the web page.
Keywords - enter keywords related to the information displayed on the web page.
The values in the Keywords field are saved as meta tags that enable indexing of pages by search engines.

Adding Data in Rows

ConcourseSuite creates a website in a table format. You can add information in rows and columns. The options available to add information in a row are shown in Figure 19.

 

row_editing

Figure 19 Row Options

You can add a row above or below the current row. You can also add a column in the row. When you click Add Column, a page to set column properties is displayed, as shown in Figure 20.

 

column_website

Figure 20 Setting Column Properties

Portlets are in-built mini applications that you can use in your web pages based on your requirement. For example, to add contact information, select Contact Us Form. If you want a blank column to be able to enter text of your choice, select HTML Content.

The portlets available in ConcourseSuite are:

Configuring the HTML Content Portlet
Configuring the Cart Portlet
Configuring the Product Catalog Portlet
Configuring the Portfolio Portlet
Configuring the Contact Us Portlet

Configuring the HTML Content Portlet

The HTML Content portlet enables you to display the content in a way that suits your requirements. When you select HTML Content, the Configure the Portlet Properties for HTML Content is displayed, as shown in Figure 21.

 

configuring_HTML_content

Figure 21 Configure the Portlet Properties for Contact Us Form

On this page, a text area with formatting options is provided. In this text area, you can also add an image and link a document. For details on adding an image and providing a link to a document, refer to Adding Media Files and Adding a Document.

Configuring the Cart Portlet

The Cart portlet enables you to display the products added to a quote. When you select Cart, the Configure the Portlet Properties for Cart page is displayed, as shown in Figure 22.

 

cart_portlet

Figure 22 Configure the Portlet Properties for Cart

The default value of Column Width is 50. You can change it according to your requirement.

Enter the recipient and subject of the mail in the Email To and Email Subject fields, respectively. Enter the body of the mail to be sent to the reviewer and requester of the quote.

When you click Save, the cart is displayed on the website.

Configuring the Product Catalog Portlet

When you select Product Catalog, the Configure the Portlet Properties for Product Catalog page is displayed, as shown in Figure 23.

 

configure_portlet_product_catalog

Figure 23 Configuring Properties for Product Catalog

Select the category of the products that you want to display on the website. All the products under the selected category will be included. Select the Allow products to be emailed to a friend option to send an email about the product to a friend. The email is drafted for you in Email Body. You can edit the email body.

Click Save to configure the portlet. The products in the selected category are displayed on the website, as shown in Figure 24.

 

product_catalog

Figure 24 Product Catalog on the Website

Configuring the Portfolio Portlet

The Portfolio portlet enables you to showcase your work experience to the public. When you click Portfolio, the Configure the Portlet Properties for Portfolio page is displayed, as shown in Figure 25.

 

configure_portfolio

Figure 25 Configure the Portlet Properties for Portfolio

Click Select to select the category of portfolio to be displayed on the website. A list of categories available is displayed. Select the category you want to display on the website and click Save.

For more details on adding a category or item in the Portfolio portlet, refer to Organizing Your Previous Work Examples.

Configuring the Contact Us Portlet

When you select Contact Us Form, the Configure the Portlet Properties for Contact Us Form page is displayed, as shown in Figure 26.

 

configure_portlet_contac_us

Figure 26 Configuring Portlet Properties for Contact Us Form

Enter values in Column Width, Introduction Message, Thank You Message, and Source and click Save.

A contact form with First Name, Last Name, Email Address, Organization Name, Questions/Comments fields is displayed, as shown in Figure 27.

 

contact_us_form

Figure 27 Contact Form on the Website

Adding Data in Columns

The options provided to add information in a column are shown in Figure 28.

 

column_options

Figure 28 The Column Options

You can perform the following actions on a column:

Forward and Backward Arrows - to move the location of the current column forward or backward.
Edit Portlet - to edit the information displayed in the column. When you click Edit Portlet, the Configure the Portlet Properties page is displayed. Specify the values and click Save.
Replace Portlet - to change the portlet and then edit the information to be displayed in the column. For more details, refer to Adding Data in Rows.
Add a Column to the Left or Right - to add or delete a column to the left or right of the column.
Add a Row - to add a row to the column.
Delete - to delete the column.

Adding Media Files

Media files consist of image, audio, or video files. You can add media files to the website to make it more effective. To add a media file in a column, you must select the HTML Content portlet for the column.

Only those files, which are available on the Top Folder page, can be added. For more details, refer to Uploading Media Files.

On the Configure the Portlet Properties for HTML Content page, click tree_icon, as shown in Figure 29.

 

configure_portlet

Figure 29 Uploading Image in the Website

The Insert/Edit Image window is displayed, as shown in Figure 30.

 

insert_image

Figure 30 Inserting Media File in a Website

Specify the location of the file in the Image URL field or click action_icon to display the Top Folder page, as shown in Figure 31.

 

top_folder

Figure 31 The Top Folder Page

Select the file and click Insert to add the media file.

Adding a Document

You can provide a link to a document that is available in the Open Document Store in the Documents module in the website.

To add a document in a column, you must select the HTML Content portlet for the column. To provide a link to a document on the website, enter the link text in the text area, for example, "Click here for more details", as shown in Figure 32.

 

linking_doc

Figure 32 Linking Document on a Web Page

Highlight the text to which linking is to be done and click action_icon, as shown in Figure 33.

 

linking_icon

Figure 33 The Linking Icon

The Insert/Edit Link window is displayed, as shown in Figure 34.

 

insert_edit_window

Figure 34 The Insert/Edit Link Window

Click the Link URL icon. The Top Folder page is displayed. Select the required document. For more details on uploading a document on the Top Folder page, refer to Uploading Media Files.

On the Insert/Edit Link window, you can specify the option to open the target document in the same or new window in the Target field and click Insert. The Configure the Portlet Properties for HTML Content page is displayed. Click Save.

The link is added to the website, as shown in Figure 35.

 

document_link_website

Figure 35 Document Link on Website