12 Building a Site

The first thing you do in Site Studio is connect to a content server and create your assets. You do this using the Connection Manager in Designer. With the Connection Manager, you identify a content server, create a Web site on that server (more specifically, a project file), and create a connection name that is used by Designer to connect to the site.

As soon as you've done this, you can start constructing your site assets into a Web site, using a site hierarchy to define the arrangement of the information. A site hierarchy comprises the individual sections of your site, like Products, Services, and About Us. In each section, there is typically a primary page, used as the main page for that section. A secondary page is usually used as well.

You spend a considerable amount of time setting up the site and site hierarchy, which is discussed next.

12.1 Working With the Site Hierarchy

A site hierarchy is a collection of individual sections and web pages that comprise the structure of the site. Similar to a folder in a folder hierarchy, a section in a site hierarchy is used to store related information. The site hierarchy can be flat, where all sections are located at the top, or it can be deep, where numerous sections are placed within other sections.

While you use the site hierarchy to organize and categorize content on your Web site, Site Studio uses the site hierarchy to perform numerous "behind-the-scenes" tasks, like generating navigational links and organizing page templates.

Site navigation: The site hierarchy becomes the basis for your overall site navigation. Site Studio "reads" the site hierarchy and converts each section into a link, which you see when you use a navigation fragment (see "Navigation Fragments"). If you have sections called Products, Services, and Contact Us in the site hierarchy, those names appear in the navigation menu for users to click.

Page templates: The site hierarchy is also used to organize content (contributor data files, native documents, fragments, and so on) to display on a page template. Rather than create numerous web pages in a section of the Web site, you create just one primary page and one secondary page. Site Studio assembles content on either the primary page or secondary page, depending on how you organize your site hierarchy.

You generally perform these tasks with your site hierarchy:

You can delegate many of these site hierarchy tasks to a site manager by enabling the Manager application (see Chapter 16, "Setting Up Manager").

12.1.1 Adding a Section to the Site Hierarchy

You add a section to your Web site using the Site Hierarchy pane in Designer.

To add a section, perform these tasks:

  1. In the Site Hierarchy pane, right-click your Web site and choose Add New Section.

    This opens the New Section dialog (see "New Section Dialog").

  2. Enter a value for Label. The Label appears in the Site Hierarchy pane and in the navigation menus on your site.

  3. Enter a value for URL. The URL is used in the site address and all (path-based) links that target this section.

    Note:

    Site Studio automatically inserts a value that contains no spaces or special characters.
  4. Choose how you would like this section to be identified. The section ID, also referred to as a node ID, is used in all (ID-based) links that target this section.

    • Choose Auto-generate section ID to have an ID automatically generated by Site Studio.

    • Choose Manually enter section ID to specify your own ID for the section. Enter your ID in the space provided.

      Important: The section ID must be unique in the Web site.

  5. Click OK to close this dialog and return to the site hierarchy.

To make the new section appear in the navigation menus on your site (generated by navigation fragments), see "Showing Sections in the Site Navigation"

To add a subsection (a section within a section), right-click an existing section in the site hierarchy and choose Add New Section.

12.1.2 Renaming a Section in the Site Hierarchy

You can rename a section using the Site Hierarchy pane. You can edit other values, like the ID, URL, and security using the Properties pane (see "Viewing and Editing Web Site and Section Properties").

To rename a section in the site hierarchy, perform these tasks:

  1. In the Site Hierarchy pane, right-click the desired section and choose Rename Section.

  2. Type a new name for the section, and then press ENTER on your keyboard or click anywhere in the Site Hierarchy pane.

  3. To update the navigation of your site so that you changes take effect immediately, click the Update Navigation icon (Figure 12-1) on the Site toolbar. If you do not update the navigation, you are prompted to do so when you preview the site.

    Figure 12-1 Update Navigation icon

    Update Navigation icon

12.1.3 Rearranging Sections in the Site Hierarchy

You can change the order in which sections appear in the site hierarchy, which affects their display order in the site navigation on your site. You do this by using a right-click, drag-and-drop mouse action in the Site Hierarchy pane in Designer.

To move a section to a new location in the site hierarchy, perform these tasks:

  1. In the Site Hierarchy pane, right-click the desired section. Holding down the mouse, drag the section to the new location in the site hierarchy and let go of the mouse.

  2. On the popup menu that appears, click Move Before, Move After, or Move Into, to move the section before, after, or into the section that was highlighted when you let go of the mouse button.

  3. Click OK to the move warning message.

Using drag-and-drop with the left mouse button performs the same action as Move Into in the above steps.

The new order of sections displays in your Web site navigation as soon as you update the navigation. You are prompted to update the navigation file when you preview the page template. You can also update this file manually by clicking the Update Navigation icon (Figure 12-2) on the Site toolbar.

Figure 12-2 Update Navigation icon

Update Navigation icon

12.1.4 Removing a Section From the Site Hierarchy

You can remove sections from your Web site using the Site Hierarchy pane in Designer.

To remove a section, perform these tasks:

  1. In the Site Hierarchy pane, right-click the section to remove and click Delete Section.

  2. Click OK to confirm the deletion.

If this section was also included in your site navigation, the link is removed from the Web site when you update the navigation. You are prompted to update the navigation file when you preview the page template. You can also update this file manually by clicking the Update Navigation icon (Figure 12-3) on the Site toolbar.

Figure 12-3 Update Navigation icon

Update Navigation icon

12.1.5 Assigning a Home Page

The home page of the Web site is the entry. Everyone who comes to your Web site usually starts at your home page.

To assign a page template to use as the home page for a section, perform these tasks:

  1. In the Site Hierarchy pane, right-click the Web site and choose Select Home Page from the popup menu.

    Figure 12-4 Select Home Page option in popup menu

    Select homepage option highlighted in popup menu
  2. In the Select (Home) page template dialog (see "Select (Home) Page Template Dialog"), choose how you want to create the home page:

    • Create a new page template: A new page template is created, checked into the content server, and associated with this section. Choose hcsp, jsp, or asp as the file extension.

    The available extension depends on the site type that you chose when creating the site.

    • Select existing page template from the content server: An existing page template in the content server is associated with this section. Select the page template in the menu or select <Choose From Server> to browse to it in the content server when this dialog closes.

    • Create a new page template from an existing one: A new HCSP, JSP, or ASP page is created based on another page template, checked into the content server, and associated with the Web site. The page template that is used to create the new one can come from one of two sources:

      • stored in the content server: A page template stored on the content server is used. Select it from the menu (if the page template is one you created recently); if not, select <Choose From Server> to browse to it in the content server when this dialog closes.

      • stored on the file system: A page template stored on the file system is used. This option can be useful if you've created a page template on your file system (perhaps using a third-party editor) and want to use that design for this page template. The file must have the appropriate file extension (hcsp, jsp, or asp).

  3. If you want to use this same page template in every section of the Web site below this one, check the box Apply recursively to all subsections. (This performs the same action as if you're reusing a page template throughout the site hierarchy.)

  4. Click OK to close the Select (Home) Page Template dialog.

    Depending on your choices above, you may be taken to the content server screen to select an existing page template or assign metadata to a new page template.

You can add a secondary page to the root of the site hierarchy as well and it serves as a backdrop for new files added by contributors.

Site Studio automatically assigns the value "Home" to the Web site, which directs users to this page. If you want to change this value, select the Web site in the Site Hierarchy pane, open the Properties pane, and enter a different value for Label.

A home page is different from a primary or secondary page in the following ways: First, it is associated with the root of your site instead of a section. Second, the home page link in some navigation fragments takes you to this page and no other page template. Third, the "Websites" menu in the content server takes you to this page of the Web site.

You should pay close attention to the names and metadata values (content ID, type, title, security group, and so on) that you assign to your page templates. This helps you better manage your page templates, especially if you start reusing them in your site hierarchy.

12.1.6 Assigning a Primary Page

A primary page acts like a landing or default page for each section of the Web site. When users click a link to go to that section (for example, Products), they are taken to the primary page associated with that section.

Both primary and secondary pages provide true scalability for a growing Web site. You can manage the "look and feel" of your entire site, regardless of its size, with just a few page templates.

To assign a page template to use as the primary page for a section, perform these tasks:

  1. In the Site Hierarchy pane, right-click the desired section and choose Select Primary Page.

  2. In the Select (Primary) page template dialog (see "Select (Primary) Page Template Dialog"), choose how you want to create the primary page for this section:

    • Create a new page template: A new page template is created, checked into the content server, and associated with this section. Choose hcsp, jsp, or asp as the file extension. The available extension depends on the site type that you chose when creating the site.

    • Select existing page template from the content server: An existing page template in the content server is associated with this section. Select the page template in the menu or select <Choose From Server> to browse to it in the content server when this dialog closes.

    • Create a new page template from an existing one: A new HCSP, JSP, or ASP page is created based on another page template, checked into the content server, and associated with this section. The page template that is used to create the new one can come from one of two sources:

      • stored in the content server: A page template stored on the content server is used. Select it from the menu (if the page template is one you created recently); if not, select <Choose From Server> to browse to it in the content server when this dialog closes.

      • stored on the file system: A page template stored on the file system is used. This option can be useful if you've created a page template on your file system (perhaps using a third-party editor) and want to use that design for this page template. The file must have the appropriate file extension (hcsp, jsp, or asp).

    • Use an external URL: Uses the web page of another Web site instead of a page template. As a result, visitors going to this section are directed to the web page URL that you specify here. (This option applies only to primary pages and is not available for a home page or a secondary page.)

  3. Click OK to close the Select (Primary) Page Template dialog.

    Depending on your choices above, you may be taken to the content server screen to select an existing page template or assign metadata to a new page template.

By default, the filename of the default URL page name is index.htm. By making a change to configuration flags in the config.cfg file, the administrator can select any value for the default URL page name. Additionally, other file names can be added to deliver the primary page. This is helpful if there are existing data files with path-based links using the previous default URL page name. For more information, see the Technical Reference Guide for Site Studio.

The only case when neither a primary page nor a secondary page is used by a section is if you choose to use an external URL in the Select Layout dialog. This option inserts the URL of another Web site in the section instead of a page template. When visitors click a link for this section, they are taken to the Web site that you specified. (This option is useful for linking to partner sites or department-level sites within the same organization.)

12.1.7 Assigning a Secondary Page

Each section in the site hierarchy, including the root of the site needs a secondary page if contributors are allowed to add new files (data files or native documents) to the Web site. The secondary page acts like a backdrop for the new content added to the site by a contributor.

Both primary and secondary pages provide true scalability for a growing Web site. You can manage the "look and feel" of your entire site, regardless of its size, with just a few page templates.

The secondary page in each section, if you decide to use one, is the template for the pages that can have dynamically placed content. A secondary page acts like a backdrop for new files added to the site by a contributor. The page template is reused for each new data file or native document added to the site, and therefore you do not have to create multiple web pages in each section; just one primary page and one secondary page.

To assign a page template to use as the secondary page for a section, perform these tasks:

  1. In the Site Hierarchy pane, right-click the desired section (or the root) and choose Select Secondary Page.

  2. In the Select (Secondary) Page Template dialog (see "Select (Secondary) Page Template Dialog"), choose how you want to create the secondary page for this section:

    • Create a new page template: A new page template is created, checked into the content server, and associated with this section. Choose hcsp, jsp, or asp as the file extension. The available extension depends on the site type that you chose when creating the site.

    • Select existing page template from the content server: An existing page template in the content server is associated with this section. Select the page template in the menu or select <Choose From Server> to browse to it in the content server when this dialog closes.

    • Create a new page template from an existing one: A new HCSP, JSP, or ASP page is created based on another page template, checked into the content server, and associated with this section. The page template that is used to create the new one can come from one of two sources:

      • stored in the content server: A page template stored on the content server is used. Select it from the menu (if the page template is one you created recently); if not, select <Choose From Server> to browse to it in the content server when this dialog closes.

      • stored on the file system: A page template stored on the file system is used. This option can be useful if you've created a page template on your file system (perhaps using a third-party editor) and want to use that design for this page template. The file must have the appropriate file extension (hcsp, jsp, or asp).

  3. If you want to use this same secondary page in every section of the Web site below this one, check the box Apply recursively to all subsections. (This performs the same action as if you're reusing a page template throughout the site hierarchy.)

  4. Click OK to close the Select (Secondary) Page Template dialog.

    Depending on your choices above, you may be taken to the content server screen to select an existing page template or assign metadata to a new page template.

12.1.8 Showing Sections in the Site Navigation

Site Studio converts each section in the site hierarchy into a hyperlink on a navigation menu (created by a navigation fragment) on your site. This is done automatically when you include a section in the site navigation.

By default, new sections are not included in the site navigation and therefore are not automatically added as links to the Web site. In the Site Hierarchy pane, the sections with the blank folder icon (Figure 12-5) are not included in the site navigation, and the sections with the colored folder icon (Figure 12-6) are included in the site navigation.

Figure 12-5 Blank Folders - Not Included in SIte Navigation

Blank Folders - Not in navigation

Figure 12-6 Colored Folders - Included in SIte Navigation

Colored folders - Included in navigation

To show a section in the site navigation, perform these tasks:

  1. In the Site Hierarchy pane, right-click the desired section and click Include Section in Navigation.

  2. Click the Update Navigation icon (Figure 12-7) on the Site toolbar to add a link to this section in the site navigation.

Figure 12-7 Update Navigation icon

Update Navigation icon

You can also update the site navigation by clicking Yes when prompted to regenerate the navigation.js file when previewing a page template.

You can also specify whether a section is included in the site navigation by using the Properties pane (see "Viewing and Editing Web Site and Section Properties").

Some navigation fragments in the Toolbox were designed to show only second or third-level sections in the hierarchy (for example, see "Nav Plain Vertical"). If you use one of these fragments but do not have a hierarchy two or three levels deep, you may not see your sections in the navigation menu.

Reasons You May Not Want a Section in Your Site Navigation

There are a few reasons why you wouldn't include a section in your site navigation. Here are a few examples:

  • When adding a search feature to your site, you must add a search box (see "Search Box Plain") to your page templates, and you must designate a search results page template, which contains the search results (see "Search Result Plain"). The search results page should be in a section that is not included in your site navigation; otherwise, users would be able to click a link in your site navigation and go directly to the search results page, which would be empty.

  • When creating a custom error page, you create a section in the site hierarchy that serves as a custom error handler (see "Designating a Section as an Error Handler"). Then you create a page template in that section that displays the custom error message. This section should not be included in the site navigation because users would be able to click a link in your site navigation and go directly to the custom error page, which wouldn't make sense to the user.

  • When introducing new features or page templates, you may choose to put them in a section that is not included in the site navigation so that others do not see your unfinished work. You can continue testing them until the features or page template and related site assets are ready. Then you can include that section in the site navigation.

As an alternative to not including a section in the site navigation, you can create a contributor-only section so that the section displays only in contribution mode.

12.1.9 Designating a Section as an Error Handler

There are several circumstances when a visitor or contributor to your site encounters an error message.

For example, if a secondary page template is missing in the section where a contributor data file is stored, you may encounter a message saying the secondary page could not be found. Or, if a contributor data file or native document is removed from the site but still being linked to from another part of the site, you may get a missing file message.

You can prevent such errors from appearing by designating a section as an error handler and then creating a custom error page (page template) for that section.

To designate a section as an error handler, perform these tasks:

  1. Add a new section to your Web site (see "Adding a Section to the Site Hierarchy").

    Note:

    The "label" that you use does not appear anywhere on the site.
  2. Right-click the section and choose Set Section as Error Handler.

    The icon for the section displays in red with an exclamation mark (Figure 12-8).

    Figure 12-8 Error Handler Section icon

    Error Handler Section icon
  3. Right-click the section again, choose Select Primary Page, and follow the steps to add a page template to the section (see "Assigning a Primary Page").

  4. Then, on the page template, create the custom error message or use the sample fragment provided in the Toolbox (see "Error Handler Message").

When you designate a section as an error handler, you do not want to include that section in your site navigation.

Using the Error Handler with Data Files

If the person viewing the page does not have security access to the data file or data files used on the page, you can select to either have the page display an error, or to simply not show the data. If the contributor does not have access, an error message can display in the space designated for the data file. This is controlled by controlling the data access check through the configuration flags in the config.cfg file. For more information, see the Technical Reference Guide for Site Studio.

12.1.10 Changing the Security of the Site or a Section

You can change the security for a particular section or the entire site, if you like. The security of the site uses the security model in the content server.

This can be useful when you want to specify which users in your organization have access to the site hierarchy and prevent unauthorized users from changing it.

To change the security for a section or your site, perform these tasks:

  1. In the Site Hierarchy pane, select the root of the site or a section in the site.

  2. Open the Properties pane.

  3. Click the Security property (Figure 12-9).

    Figure 12-9 Security property

    Security property highlighted
  4. Click the Additional Information icon (Figure 12-10) to open the Content Server dialog (Figure 12-11).

    Figure 12-10 Additional Information icon

    Additional Information icon

    Figure 12-11 Content Server dialog

    Content Server dialog box
  5. In the Security Group menu, choose the group to assign to your site or section.

  6. In the Account field, specify an account for the site or section.

  7. Click OK.

12.1.11 Viewing and Editing Web Site and Section Properties

You can view all the properties and change certain properties for your site and each section using the Properties pane. This can be useful for managing and editing your site hierarchy.

To view the properties of the site or a section in the site, perform these tasks:

  1. In the Site Hierarchy pane, select the root of the site or the desired section in the site.

  2. Open the Properties pane to view the properties associated with the site and each section.

The properties that are grayed out (dimmed) cannot be changed in the Properties pane. All other properties can be modified directly. The values for each may vary.

Web Site

Property Definition
Site ID The ID of the site. This is the unique identifier for the site in the content server. The value also appears in the site address if you use a folder-based address to access the site.
Site Label The name (and friendlier description) of the Web site. The site label appears in Designer and the "Websites" menu in the content server.
Site Type The scripting format for the site (HCSP/JSP or ASP).
CgiUrl The Cgi URL address of the content server that hosts the site.
Error Handler The name of the section serving as an error handler for the site (see "Designating a Section as an Error Handler").
Stopped Site Page The page that appears when the site is stopped (see "Working With Fragments").
Security Controls the security of the site (see "Changing the Security of the Site or a Section").

Note:

You can override the Site ID value by entering a value for "URL Directory Name" with the root of the site selected. This enables you to change the name that appears in a folder-based site address.

Section

Property Definition
Section ID The ID of the section (also referred to as a Node ID). This is used by Site Studio to call up a section of the site.
Label The name that you chose for the section. It displays in the Site Hierarchy pane and your site navigation.
Include in Navigation If set to True, the section displays in the site navigation. If set to False, the section does not display in the site navigation. See "Showing Sections in the Site Navigation".
URL Page Name The URL that represents the primary page in this section. If you don't specify a name, "index.htm" is used.
URL Directory Name The URL that represents this section in the Web site address .
Primary Page The primary page associated with this section.
Primary Page Params If the primary page contains a contribution region, the name of that region and the contributor data file assigned to it, display here.
Primary Page Region Templates The template override specified for the primary page in this section.
Primary Page Placeholder Definition Mappings The placeholder definition mappings for the primary page in this section of the Web site.

For more information on the placeholder mappings, see "Working With Placeholder Definitions".

Secondary Page The secondary page associated with this section.
Secondary Page Params If the secondary page contains a contribution region, the name of that region and the contributor data file assigned to it, display here.
Secondary Page Region Templates The template override specified for the secondary pages in this section.
Secondary Page Placeholder Definition Mappings The placeholder definition mappings for the secondary pages in this section of the Web site.

For more information on the placeholder mappings, see "Working With Placeholder Definitions".

Replaceable Region If the page template contains a replaceable region, the name of that region displays here.
Contributor-Only Section If set to True, the section displays in the site navigation when the web page is viewed in contribution mode. When set to False, the section always appears on the site.
Ready to Replicate If set to True, the section will be replicated. If set to False, the section will not be replicated.

This section is present only if Enable Section Level Replication has been selected from the Advanced submenu. See "File Menu" for more information on the Advanced submenu.

Max Age (caching) Specifies a maximum amount of time that the primary page can be cached.

This option is useful for setting up a reverse proxy cache for your site.

Max Age Secondary Specifies a maximum amount of time that the secondary page can be cached.

This option is useful for setting up a reverse proxy cache for your site.

Security Controls the security of the section (see "Changing the Security of the Site or a Section").

Note:

The name used for secondary pages (the equivalent to "URL Page Name") is derived from the content ID (dDocName) of the data file or native document appearing on that page. For information on changing this value, see the Technical Reference Guide for Site Studio.

Custom Section Properties

If you've created one or more custom section properties in your site hierarchy, you see this third category of properties. When you create a custom section property, you can specify a unique value for each section in the site hierarchy and then refer to that property in your page templates and fragments. (See "Defining Custom Properties for a Section".)

12.1.12 Defining Custom Properties for a Section

Each section in the site hierarchy contains several properties, such as a label, the names of the page templates associated with it, security, and so on (see "Viewing and Editing Web Site and Section Properties").

In addition to these values, you can define your own custom property for each section in the site hierarchy and then modify your Web site to read and execute those values. This becomes especially useful when you want to customize the appearance and behavior of a particular section in the site hierarchy, such as changing the way a hyperlink for a section displays in a navigation fragment.

To define a custom section property, perform these tasks:

  1. In the toolbar, click the Custom Section Properties icon (Figure 12-12) (or click Tools then select Define Custom Section Properties).

    Figure 12-12 Custom Properties icon

    Custom Properties icon
  2. In the Define Custom Section Properties dialog (see "Custom Section Properties Dialog"), click Add.

    The Define Custom Section Property dialog is displayed (Figure 12-13). For more information, see "Define Custom Section Property Dialog".

    Figure 12-13 Define Custom Section Property dialog

    Define Custom Section Property dialog box
  3. Enter a name in the Name field. The name displays in the Properties pane when you select the section in the site hierarchy.

  4. Choose a value for Type. This determines the action to take (for a description of each type, see "Define Custom Section Property Dialog").

  5. Enter a description in the Description field (optional). This displays in the description area at the bottom of the Properties pane.

  6. Click OK twice to close both of the dialogs and return to Designer.

The custom property displays in the Properties pane for each section in the site hierarchy (see "Viewing and Editing Web Site and Section Properties").

After you define a custom section property, you must go through the site hierarchy and enter a value for each section. Then, you must add the necessary code to your fragments or page templates to read and execute the custom property that you've added (see "CSP Sample Navigation (client)" for an example).

12.1.13 Expanding and Collapsing the Site Hierarchy

You can expand and collapse the site hierarchy in the Site Hierarchy pane to see all of the sections and page templates at once or to hide them from view. You use the toolbar in Designer to do this.

To expand and collapse the site hierarchy, perform these tasks:

  • To expand the site hierarchy, click the Expand Site Hierarchy icon (Figure 12-14) in the toolbar.

  • To collapse the site hierarchy, click the Collapse Site Hierarchy icon (Figure 12-15) in the toolbar.

Figure 12-14 Expand Site Hierarchy icon

Expand Site Hierarchy icon

Figure 12-15 Collapse Site Hierarchy icon

Collapse Site Hierarchy icon

12.1.14 Refreshing Your Site Hierarchy in Designer

As you work in Designer, there may be times when your site hierarchy becomes out of sync with the project file on the content server. To sync the two up and to make sure you're working with the most current project file, you can refresh the site hierarchy in Designer.

To refresh the site hierarchy in Designer, perform one of these tasks:

  • Click the Refresh icon (Figure 12-16) in the Designer toolbar.

    Figure 12-16 Refresh icon

    Refresh icon
  • Right-click the root of the site in the Site Hierarchy pane and choose Refresh Site Hierarchy.

The icon in the lower right corner of Designer turns into the Synchronized icon (Figure 12-17) to indicate the site hierarchy is synchronized with the project file.

Figure 12-17 Synchronized icon

Synchronized icon

12.2 Working With Fragments

Fragments provide an additional tool for building and maintaining Web sites. A fragment is like a packaged feature or piece of functionality that can be managed separately from the page template both before it is added and after it is added.

Fragments are an option for content that must be dynamic, requires frequent updates, and reused throughout a Web site or multiple Web sites. You can turn just about any piece of content, from a simple line of text to a server-side script, into a fragment.

Fragments are a powerful part of Site Studio. See Chapter 13, "Working With Fragments."

12.3 Assigning Content With The Switch Content Wizard

After the site has been constructed, what you have is a framework of the complete Web site that is still missing the content. The contributor data files contain the content and are edited by the contributors. One way to add a contributor data file is to leave the task to the contributor to add the content. The other is for the designer to add the content. It is also possible to switch the current content file in a region for a different content file. Adding content, editing content, or switching contributor data files is done through the switch content wizard.

For the designer to add the content to a contributor data file, or to switch the contributor data file, follow these steps:

Open the Assign Content window, either by right-clicking and selecting 'Assign Content' or highlighting a page template in the site hierarchy and clicking the 'Assign Content' icon from the toolbar (see "Assign Content Dialog").

The contribution graphic (Figure 12-18) shows a green plus sign if there is no content assigned.

Figure 12-18 Contribution graphic showing no content is assigned

Contribution graphic showing no content is assigned

Click the edit icon with the plus sign, and the switch content wizard is launched (see "Switch Content Wizard"). If there is content already assigned, then instead of a green plus sign, there is a yellow arrow in the contribution graphic (Figure 12-19).

Figure 12-19 Contribution graphic showing switch region arrow

Contribution graphic with switch region arrow

With the switch content wizard, it is simple to create and assign new content, or to assign content that exists on the server. You can also assign content that is stored locally.

To assign content, follow these steps:

  1. Right-click a page template in the site hierarchy to open the Assign content window (see "Assign Content Dialog").

    The page opens in the dialog showing the contribution graphics.

  2. Click the contribution graphic showing the green plus, or the yellow arrow, depending on whether content has been assigned.

    The Switch Content wizard opens (see "Switch Content Wizard").

  3. The options available depend on the region definitions and subtemplates listed in the placeholder definition.

    If you select a subtemplate, then the wizard finishes. If there are placeholders within the subtemplate then you must run the wizard for each placeholder.

    If you select a region definition, then the wizard continues.

  4. On the next screen of the wizard, you can add a new contributor data file, a new native document, an existing file on the content server, or a file on the local computer.

    If you select any file not existing on the server, then you are asked to check the file into the server before the content is associated.

    If you select a file on the server, a window opens with search results from the content server. Select a file and it is associated.

  5. After the wizard is completed, the page reloads within the assign content window, additionally displaying the data associated through the wizard.

12.4 Working With Links

Links provide a convenient way for visitors to navigate from one web page to another. The most common use of a link is in the site navigation, such as a top menu, side menu, breadcrumbs, and so on. In Site Studio, you can instantly create these menus using a navigation fragment (see "Navigation Fragments").

There are, however, instances when you may want to create additional links to take users to a specific piece of content. You can add a link to another section of your site, to a contributor data file or native document on your site, to another Web site, and more. You do this using the Link wizard.

In addition to creating links in Designer, you can allow contributors to create and edit links in Contributor. You set this up when you add an element to a contribution region.

The Link wizard takes you through all variations on linking:

12.4.1 Creating a Link to Another Section of the Web Site

To create a link to another section of your Web site or another Site Studio site on the content server, perform these tasks:

  1. Highlight the text (or image) that you would like to turn into a link.

  2. Click the Create Hyperlink icon (Figure 12-20) in the toolbar.

    Figure 12-20 Create Hyperlink Icon

    Create Hyperlink icon

    The Link wizard is launched (see "Link Wizard").

  3. Select Link to a section.

  4. Click Next.

    Note:

    You can step through the wizard faster by clicking the blue arrow to the left of the option you want to use. This automatically selects the option and moves the wizard to the next step.
  5. Choose the section that you would like to link to. This can be a section on the current Web site or a different Site Studio site on the content server. You select the target section in the site hierarchy.

  6. Click Next.

  7. Depending on the site configuration, you may be prompted to choose the URL format of the link:

    • Path Based URL: The link will contain a path to the target location. You have two choices for this type of link:

      • Absolute Path: Generates a full path; for example <!--$ssServerRelativeSiteRoot-->products/index.htm (where "<!--$ssServerRelativeSiteRoot-->" gets replaced with the path to the root of the Web site).

      • Relative Path: Generates a relative path instead of a full path; for example ../products/index.htm.

      Please note that this option is not available if you chose to use the default Web site section for the content file as the target section (see previous step).

    • ID Based URL: The link will contain the coded identity of the target location rather than the path-based name. You have three choices for this type of link:

      • Client Side Script Format: Uses client-side JavaScript to construct a link to the target location; for example, javascript:nodelink('10024');.

      • Server Side Script Format: Uses server-side Idoc Script to construct a link to the target location; for example, [!--$wcmUrl('nodelink','10024')--].

      • URL Token Format: Uses a redirect on the server to construct a link to the target location; for example, ssNODELINK/10024.

  8. Click Options....

    The Link Target Options dialog is displayed.

  9. If you want the link to open in a new web browser window when clicked, select the Open link target in new window check box, and then choose the target in the menu (_blank). You can also directly enter the name of the target in the text box if you want, but if it is not a valid target, the link is faulty.

  10. Click OK or Cancel to return to the wizard.

  11. Click Next.

  12. Verify the URL for the link.

  13. Click Finish.

12.4.2 Creating a Link to an Existing File on the Content Server

You can create a link to an existing content file (contributor data file or native document) on your site or another site in the content server.

To create a link to an existing file on the content server, perform these tasks:

  1. Highlight the text (or image) that you would like to turn into a link.

  2. Click the Create Hyperlink icon (Figure 12-21) in the toolbar.

    Figure 12-21 Create Hyperlink Icon

    Create Hyperlink icon

    The Link wizard is launched (see "Link Wizard").

  3. Select Link to a file.

  4. Click Next.

    Note:

    You can step through the wizard faster by clicking the blue arrow to the left of the option you want to use. This automatically selects the option and moves the wizard to the next step.
  5. Select Existing file from server, and click Next.

    The standard search results page on the content server is displayed, showing all content files associated with the Web site.

    Note:

    The content server query from the link wizard is an open query in Designer. In Contributor, the query is more controlled.
  6. Click Select next to the file you want to link to.

  7. Choose the target section for the link. You can choose from the following options:

    • Use default website section metadata: If you choose this option, the hyperlinked content file will display in the Web site section as currently specified in the Web Site Section metadata field for the content file.

    • Choose a website section: If you choose this option, the hyperlinked content file will display in the Web site section of your choice (in effect overriding the default target section of the content file). The section may be in the current Web site or another Site Studio site on the content server.

    • Link to the Content Item's URL: If you choose this option, the file will display exactly as it is stored on the content server rather than within the framework of the Web site. This is useful for linking to native documents such as PDF files.

    Click Next to continue.

  8. Depending on the site configuration, you may be prompted to choose the URL format of the link:

    • Path Based URL: The link will contain a path to the target location. You have two choices for this type of link:

      • Absolute Path: Generates a full path; for example <!--$ssServerRelativeSiteRoot-->Menus/switched_region_CDF (where "<!--$ssServerRelativeSiteRoot-->" gets replaced with the path to the root of the Web site).

      • Relative Path: Generates a relative path instead of a full path; for example ../Menus/switched_region_CDF.

      Please note that this option is not available if you chose to use the default Web site section for the content file as the target section (see previous step).

    • ID Based URL: The link will contain the coded identity of the target location rather than the path-based name. You have three choices for this type of link:

      • Client Side Script Format: Uses client-side JavaScript to construct a link to the target location; for example, javascript:link('switched_region_CDF');.

      • Server Side Script Format: Uses server-side Idoc Script to construct a link to the target location; for example, <!--$wcmUrl("link","switched_region_CDF")-->.

      • URL Token Format: Uses a redirect on the server to construct a link to the target location; for example, ssLINK/switched_region_CDF.

  9. Click Options....

    The Link Target Options dialog is displayed.

  10. If you want the link to open in a new web browser window when clicked, select the Open link target in new window check box, and then choose the target in the menu (_blank). You can also directly enter the name of the target in the text box if you want, but if it is not a valid target, the link is faulty.

  11. Click OK or Cancel to return to the wizard.

  12. Click Next.

  13. Verify the URL for the link.

  14. Click Finish.

12.4.3 Creating a Link to a URL

You can create a link to a specific URL (web address); for example, an Internet Web site or a file on the content server (one not used for contribution, such as a PDF file, media file, or zip file).

To create a link to a specific URL, perform these tasks:

  1. Highlight the text (or image) that you would like to turn into a link.

  2. Click the Create Hyperlink icon (Figure 12-22) in the toolbar.

    Figure 12-22 Create Hyperlink Icon

    Create Hyperlink icon

    The Link wizard is launched (see "Link Wizard").

  3. Select Link to following URL.

  4. Enter the web address in the field provided (for example, http://www.oracle.com).

    You cannot proceed in the wizard until you provide a URL.

  5. Click Options....

    The Link Target Options dialog is displayed.

  6. If you want the link to open in a new web browser window when clicked, select the Open link target in new window check box, and then choose the target in the menu (_blank). You can also directly enter the name of the target in the text box if you want, but if it is not a valid target, the link is faulty.

    Note:

    When creating a link to another Web site, the "Open link target in new window" option may be useful because it prevents users from inadvertently leaving your Web site when they click the link.
  7. Click OK or Cancel to return to the wizard.

  8. Click Next.

  9. Verify the URL for the link.

  10. Click Finish.

12.4.4 Creating a Link to a New Content File

You can create a link to a new content file (contributor data file or native document), which is checked into the content server as a managed site asset.

To create a link to a new content file, perform these tasks:

  1. Highlight the text (or image) that you would like to turn into a link.

  2. Click the Create Hyperlink icon (Figure 12-23) in the toolbar.

    Figure 12-23 Create Hyperlink Icon

    Create Hyperlink icon

    The Link wizard is launched (see "Link Wizard").

  3. Select Link to a file.

  4. Click Next.

    Note:

    You can step through the wizard faster by clicking the blue arrow to the left of the option you want to use. This automatically selects the option and moves the wizard to the next step.
  5. Select either New Contributor data file or New native file, depending on which type of file you want to add. For a new native document, also select the file format from the menu. The site designer decides what file formats are allowed for new native documents.

  6. Click Next.

    The standard content check-in page on the content server is displayed.

  7. Enter the appropriate content information (metadata) to check the item into the content server. Much of the information is automatically provided. If a field name is marked red, then the field is required (that is, the item cannot be checked in if the field is empty). Please note that the new contributor data file or native document is empty until it is edited, usually by a contributor.

    Click Next when you are done.

  8. Choose the target section for the link. You can choose from the following options:

    • Use default website section metadata: If you choose this option, the hyperlinked content file will display in the Web site section as currently specified in the Web Site Section metadata field for the content file.

    • Choose a website section: If you choose this option, the hyperlinked content file will display in the Web site section of your choice (in effect overriding the default target section of the content file). The section may be in the current Web site or another Site Studio site on the content server.

    • Link to the Content Item's URL: If you choose this option, the file will display exactly as it is stored on the content server rather than within the framework of the Web site. This is useful for linking to native documents such as PDF files.

    Click Next to continue.

  9. Depending on the site configuration, you may be prompted to choose the URL format of the link:

    • Path Based URL: The link will contain a path to the target location. You have two choices for this type of link:

      • Absolute Path: Generates a full path; for example <!--$ssServerRelativeSiteRoot-->Menus/switched_region_CDF (where "<!--$ssServerRelativeSiteRoot-->" gets replaced with the path to the root of the Web site).

      • Relative Path: Generates a relative path instead of a full path; for example ../Menus/switched_region_CDF.

      Please note that this option is not available if you chose to use the default Web site section for the content file as the target section (see previous step).

    • ID Based URL: The link will contain the coded identity of the target location rather than the path-based name. You have three choices for this type of link:

      • Client Side Script Format: Uses client-side JavaScript to construct a link to the target location; for example, javascript:link('switched_region_CDF');.

      • Server Side Script Format: Uses server-side Idoc Script to construct a link to the target location; for example, <!--$wcmUrl("link","switched_region_CDF")-->.

      • URL Token Format: Uses a redirect on the server to construct a link to the target location; for example, ssLINK/switched_region_CDF.

  10. Click Options....

    The Link Target Options dialog is displayed.

  11. If you want the link to open in a new web browser window when clicked, select the Open link target in new window check box, and then choose the target in the menu (_blank). You can also directly enter the name of the target in the text box if you want, but if it is not a valid target, the link is faulty.

  12. Click OK or Cancel to return to the wizard.

  13. Click Next.

  14. Verify the URL for the link.

  15. Click Finish.

12.4.5 Creating a Link to an Existing Local File

You can create a link to an existing local file (that is, on your own computer), which is checked into the content server as a managed site asset.

To create a link to an existing local file, perform these tasks:

  1. Highlight the text (or image) that you would like to turn into a link.

  2. Click the Create Hyperlink icon (Figure 12-24) in the toolbar.

    Figure 12-24 Create Hyperlink Icon

    Create Hyperlink icon

    The Link wizard is launched (see "Link Wizard").

  3. Select Link to a file.

  4. Click Next.

    Note:

    You can step through the wizard faster by clicking the blue arrow to the left of the option you want to use. This automatically selects the option and moves the wizard to the next step.
  5. Select Existing local file, and click Next.

    The standard content check-in page on the content server is displayed.

  6. Enter the appropriate content information (metadata) to check the item into the content server. Much of the information is automatically provided. If a field name is marked red, then the field is required (that is, the item cannot be checked in if the field is empty). Use the Browse button next to the Primary File field to navigate to the file on your computer and select it. Also, make sure to specify a title.

    Click Next when you are done.

  7. Choose the target section for the link. You can choose from the following options:

    • Use default website section metadata: If you choose this option, the hyperlinked content file will display in the Web site section as currently specified in the Web Site Section metadata field for the content file.

    • Choose a website section: If you choose this option, the hyperlinked content file will display in the Web site section of your choice (in effect overriding the default target section of the content file). The section may be in the current Web site or another Site Studio site on the content server.

    • Link to the Content Item's URL: If you choose this option, the file will display exactly as it is stored on the content server rather than within the framework of the Web site. This is useful for linking to native documents such as PDF files.

    Click Next to continue.

  8. Depending on the site configuration, you may be prompted to choose the URL format of the link:

    • Path Based URL: The link will contain a path to the target location. You have two choices for this type of link:

      • Absolute Path: Generates a full path; for example <!--$ssServerRelativeSiteRoot-->Menus/switched_region_CDF (where "<!--$ssServerRelativeSiteRoot-->" gets replaced with the path to the root of the Web site).

      • Relative Path: Generates a relative path instead of a full path; for example ../Menus/switched_region_CDF.

      Please note that this option is not available if you chose to use the default Web site section for the content file as the target section (see previous step).

    • ID Based URL: The link will contain the coded identity of the target location rather than the path-based name. You have three choices for this type of link:

      • Client Side Script Format: Uses client-side JavaScript to construct a link to the target location; for example, javascript:link('switched_region_CDF');.

      • Server Side Script Format: Uses server-side Idoc Script to construct a link to the target location; for example, <!--$wcmUrl("link","switched_region_CDF")-->.

      • URL Token Format: Uses a redirect on the server to construct a link to the target location; for example, ssLINK/switched_region_CDF.

  9. Click Options....

    The Link Target Options dialog is displayed.

  10. If you want the link to open in a new web browser window when clicked, select the Open link target in new window check box, and then choose the target in the menu (_blank). You can also directly enter the name of the target in the text box if you want, but if it is not a valid target, the link is faulty.

  11. Click OK or Cancel to return to the wizard.

  12. Click Next.

  13. Verify the URL for the link.

  14. Click Finish.

12.4.6 Editing a Hyperlink

After you add a hyperlink, you can edit the link by highlighting it and opening the Link Wizard.

To edit a hyperlink, perform these tasks:

  1. In the page template, place your cursor on the text or graphic that is serving as a hyperlink.

  2. Click the Create Hyperlink icon (Figure 12-25) in the Formatting toolbar.

    Figure 12-25 Create Hyperlink Icon

    Create Hyperlink icon
  3. This opens the Link Wizard, where you can go through and change the hyperlink in the same way that you added it.

  4. Click Finish to close the wizard and return to the page template.

You can also edit a hyperlink by placing your cursor on the text or graphic that is serving as the link and editing the href attribute in the Properties pane.

12.4.7 Removing a Link

After you add a link using the Link wizard, you can easily remove it at any time, by performing these tasks:

  1. Place your mouse cursor anywhere in the hyperlinked text (or highlight the text).

  2. Click the Remove Hyperlink icon (Figure 12-26) in the toolbar.

    The hyperlink is removed from the text.

    Figure 12-26 Remove Hyperlink Icon

    Remove Hyperlink Icon

12.4.8 Choosing a Default Link Format

When you create a hyperlink using the Link wizard, you have numerous choices regarding the format of the link. The format is the way the link is assembled. The link can use a path-based URL or an ID-based URL to locate the target location.

Within each format, there are even more choices (for example, relative paths, client-side IDs, server-side IDs, and so on). There are benefits and drawbacks to each one (see "Hyperlink Formats"). As such, you may want to choose a default format and then hide this option in the Link wizard; for both designers and contributors.

To choose a default link format, perform these tasks:

  1. Click File then select Site, then select Advanced and then Set Default Link Format.

    This opens the Choose Default Link Format dialog (see "Choose Default Link Format Dialog").

  2. Choose Path-based URL if you want the link to use a path to the target location:

    • Absolute path: Generates a full path; for example <!--$ssServerRelativeSiteRoot-->products/index.htm (where "<!--$ssServerRelativeSiteRoot-->" gets replaced with the path to the root of the Web site).

    • Relative path: Check this to generate a relative path instead of a full path; for example ../products/index.htm.

  3. Choose ID-based URL if you want the link to use the hard-coded ID of the target location without referencing a section name or label:

    • Choose Client Side javascript:link() / javascript:nodelink() format if you want the link to use client-side JavaScript and the ID of the target location.

    • Choose Server Side wcmUrl() format if you want the link to use server-side Idoc Script and the ID of the target location.

    • Choose URL Token ssLINK / ssNODELINK format if you want the link to use a Site Studio token and the ID of the target location.

  4. Check Hide the "Choose Format" page in the Link Wizard to prevent this option from appearing when you create links in Designer.

  5. Check Hide the "Choose Format" page in the Link Wizard to prevent this option from appearing when you create links in Contributor.

  6. Click OK.

You might hide the "Choose Format" screen in the Link wizard for several reasons (for example, to prevent user confusion, to prevent undesired linking choices by the user, or to enforce consistency for the hyperlinks on your site).

12.4.9 Hyperlink Formats

When you create a hyperlink, you have numerous choices regarding the format of the link. The format is the way the link is assembled. You can choose a path-based URL for the link or an ID-based URL for the link.

If you choose path-based, then you can choose between a full path or a relative path. If you choose ID-based, then you can choose between client-side script, server-side script, or a special token provided by Site Studio.

There are advantages and disadvantages to each. Please review the following table for a side-by-side comparison.

Side-By-Side Comparison

Advantages Full Path Rel. Path Server-Side ID Client-Side ID URL Token
Natural site address Yes Yes Yes No No
Hides cryptic siteID and nodeID values Yes Yes Yes No No
Can be indexed by search engines Yes Yes Yes No Yes
Unaffected by site hierarchy changes No No Yes Yes Yes
Works in reused page templates Yes No Yes Yes Yes
Requires no server-side scripting Yes Yes No Yes Yes
Requires no client-side scripting Yes Yes Yes No Yes
Requires no redirects on server Yes Yes Yes No No
Capable of bookmark links Yes Yes Yes No No
Supports passing parameters Yes Yes No No Yes
Can open in popup windows Yes Yes Yes No Yes
Can be used in native documents Yes Yes No Yes Yes

Description of Each Category

Category Description
Natural site address You see a friendly, path-based address in the URL.
Hides cryptic siteID and nodeID values Visitors and contributors viewing the site do not see the cryptic Site Studio technology in the URL.
Can be indexed by search engines Search engines can index the site.
Unaffected by site hierarchy changes You can change the site hierarchy (for example, rename sections or move a section into another one) without affecting your links.
Works in reused page templates You can reuse the page template, data file, or native document throughout the site, and the link still works.
Requires no server-side scripting The Web site does not have to rely on server-side script (for example, Idoc Script).
Requires no client-side scripting The Web site does not have to rely on client-side JavaScript.
Requires no redirects on server The Web site does not have to rely on a server-side redirect that points the ID-based address to a path-based address, which may result in decreased site performance.
Capable of bookmark links You can use the link for bookmark links, which allow the user to link to any part of a web page.
Supports passing parameters You can append, or pass, a parameter to the URL to achieve a desired result.
Can open in a popup window You can use the link to open a new popup window, which requires some scripting.
Can be used in native documents You can use this same format of a link in a native document.

12.5 Comparing Changes on a Web Page

As you edit page templates in the site hierarchy, there may be times when you want to see what has changed on a given page, before and after you (or someone else) edited that page. You may want to know, for example, how much text was removed, how much new text was added, and where most of the edits took place.

You can do this using the document comparison feature in Site Studio. You can use this feature to compare page templates in Designer, and you can use it to compare web pages from the contribution graphic on a web page. Depending on which one you use, you are comparing different results.

  • When comparing page templates in Designer, you compare two versions of a page template: the one stored in memory and the latest one checked into the content server. In other words, you're seeing the changes you've made to the page before you save it.

  • When comparing web pages using the contribution graphic, you compare two versions of a complete web page, which may comprise data files, native documents, page templates, fragments, and more. When you compare web pages like this, you compare the most current version of the page and the latest released version in the content server.

You only see a difference between the current version and the latest released version of a web page when the release date has been set for a future time, or the page is part of a workflow and hasn't been approved yet. See Chapter 15, "Using Workflows" for more information.

The following sections describe this feature in more detail:

12.5.1 Color-Coded Differences when Comparing Web Pages

When you compare two versions of a page template in Designer or a web page on the Web site, you need some kind of color-coding convention to see the actual differences. Site Studio uses the following convention to indicate content that has changed.

  • New text appears in green highlight.

  • Deleted text appears in red with a strikethrough.

  • Text that has not changed remains in black.

Figure 12-27 Example of Page Template Edited in Designer

Layout Page Example

Figure 12-28 Same Page Template With Changes Highlighted

Layout Page Highlighted

12.5.2 Using the Compare Changes Feature

You can compare the changes made to page templates in Designer, and you can compare the changes made to a web page on the Web site (see "Comparing Changes on a Web Page").

Comparing Changes to Page Templates

To compare changes made to a page template in Designer, perform these tasks:

  1. After making changes to a page template, click the Compare Changes icon (Figure 12-29) in the Site toolbar.

    Figure 12-29 Compare Changes Icon

    Compare Changes Icon
  2. A new window displays showing the differences between the two versions of the page template (see "Color-Coded Differences when Comparing Web Pages").

    This compares the unsaved version of the page template with the saved version in the content server. Take note of the changes and then close the window.

Comparing Changes to Web Page

To compare the changes made to a web page on the Web site, perform these tasks:

  1. Browse to the desired web page and open Contributor.

  2. To compare the two versions of the web page (the most current version and the latest released version), click the menu icon on the top of the page in contribution mode (Figure 12-30) and choose View Differences.

    Figure 12-30 Contribution Mode Top Bar

    Contributor Bar
  3. A new window displays showing the differences between the two versions of the web page (see "Color-Coded Differences when Comparing Web Pages").

You see only the changes in the new window if there is a difference between the most current version of the web page and the latest released version in the content server. Usually, this only happens when the page has a future release date or is part of a workflow (see Chapter 15, "Using Workflows"). Take note of the changes and then close the window.

When you compare two versions of a web page, you are comparing everything on the web page, which may include data files, native documents, page templates, fragments, and more.

This feature compares content changes, not formatting changes. For example, if you change the font size of the text or make the text bold, there are no differences displayed. But if you replace one word with another word, this difference is displayed. If an image is resized or replaced, the difference is displayed.