Web pages

Web pages (also called Web sections) are part of the Web context (see Web Context) in a template.

The Web context outputs one HTML web page. In addition to the HTML text it contains either the resources or references to the resources necessary to display it.
JavaScript files are added to the <head> in the generated HTML file. JavaScript toolboxes like jQuery and its plugins, or MooTools, are useful when you want to implement special features in the web page. (See Using JavaScript.)
Style sheets are also added to the <head> and are used just as they would be used in a regular web page. (Also see: Styling templates with CSS files.)

A Web context can contain multiple templates. When generating output from the Web context, however, only one of the Web templates can be merged with each record. Set the 'default' Web section (see Setting a default Web page for output) before generating Web output; also see Generating Web output.

Creating a Web page

When creating a Web page, it is advisable to follow design guidelines for web pages, so that they are likely to look good in different browsers and on different devices and screen sizes. When you start with a Web Template Wizard, the Foundation framework is added to the template, to guarantee just that; see Creating a Web template with a Wizard. Other approaches are described below, in Adding a Web page.

Adding a Web page

When a Web template is created (see Creating a Web template with a Wizard), only one Web section is added to it. A Web context may contain various templates, but per record only one of those can be used to generate output.

It is not possible to add a Web section to an existing Web context with the help of a Template Wizard.

To provide alternative content for the web page, you could use Conditional Content (see Showing content conditionally), or Snippets and a script (see the Help topics Snippets and Loading a snippet via a script, and this how-to: Multi-page Web template.)

For an example of how to serve different web pages using snippets, see the following how-to: Creating a multi-page Web template.

If you would like to start with a template that is identical to the one you already have, consider copying it (see Copying a section).

To add a blank section to the Web context:

  • On the Resources pane, expand the Contexts folder, right-click the Web folder, and then click New Web page.

Importing a Web page

To import a Web page from another template, click File > Import Resources... in the menu. See: Import Resources dialog.
The Web page's Includes settings get imported automatically (see Includes).
Remember to add or import any related source files, such as style sheets and images.

Deleting a Web page

To delete a Web section:

  • On the Resources pane, expand the Contexts folder, expand the Web context, right-click the name of the section, and then click Delete.

If you don't have a backup of the template, the only way to recover a deleted section, is to click Undo on the Edit menu, until the deleted section is restored. After closing and reopening the template it is no longer possible to restore the deleted context this way.
In the Saving Preferences you can set whether a backup file should be created when you save the template; see Save preferences.

Filling a Web page

Many of the content elements that are available for all three contexts are particularly suitable for web pages; see Content elements. Do not use Positioned Boxes and Tables to position elements, however; use Inline Boxes instead.

Forms and Form elements are only available in a Web context; see Forms and Form Elements.

Using variable data on a Web page

Web templates are personalized just like any other template; see Variable Data. There are a few extra possibilities, though: variable data can be used in Form elements and they can be passed to client-side JavaScript.

Using Variable Data in Form elements

Variable data may be used in form elements, such as a drop-down list (a Select element). How to do that, is described in this how-to: Dynamically add options to a dropdown.

Passing Variable Data to client-side JavaScript

When serving Web pages using Workflow, the HTML is first personalized and then served to the web browser by a Workflow process. At that stage custom JavaScripts do not have access to the information stored in the Data Model. To enable a client-side script to use variable data, you need to create a Text Script that produces a JSON string and stores that in the attribute of an HTML element, the value attribute of a hidden field for example. The custom JavaScript can than retrieve that information and use it to create dynamic page elements. Producing a JSON string and storing the results in the attribute of an HTML element are both options in the Text Script wizard; see Using the Text Script Wizard.

Styling and formatting a Web page

The contents of a Web section can be formatted directly, or styled with Cascading Style Sheets (CSS). See Styling and formatting and Styles pane.

In order for a style sheet to be applied to a specific section, it needs to be included in that section. There are two ways to do this.

Drag & drop a style sheet

  1. Click and hold the mouse button on the style sheet on the Resources pane.

  2. Move the mouse cursor within the Resources pane to the section to which the style sheet should be applied.

  3. Release the mouse button.

Using the Includes dialog

  1. On the Resources pane, right-click the section, then click Includes.

  2. From the File types dropdown, select Stylesheets.

  3. Choose which CSS files should be applied to this section. The available files are listed at the left. Use the arrow buttons to move the files that should be included to the list at the right.

  4. You can also change the order in which the CSS files are read: click one of the included CSS files and use the Up and Down buttons. Note that moving a style sheet up in the list gives it less weight. In case of conflicting rules, style sheets read later will override previous ones.

Style sheets are applied in the order in which they are included in a section. The styles in each following style sheet add up to the styles found in previously read style sheets. When style sheets have a conflicting rule for the same element, class or ID, the last style sheet ‘wins’ and overrides the rule found in the previous style sheet.

Style sheets that are linked to (i.e. included in) a section show a chain icon in the Resources pane (see Resources pane).

Which style sheets are included can also be set for the Web context as a whole: in step 1, right-click the Web context, instead of a section.

Setting a default Web page for output

When generating output from the Web context, only one of the Web templates can be merged with each record.

To select the Web section that will be output by default:

  • On the Resources pane, expand the Web context, right-click a section and click Set as Default.

Use a Control Script to dynamically select a Web section for output depending on the value of a data field. See Control Scripts.

Including JavaScript files

Which JavaScript files are included in the a Web section, depends on a setting for that section. To change this:

  1. On the Resources pane, right-click a section in the Web context and click Includes.
  2. From the File types dropdown, select JavaScripts.
  3. Choose which JavaScript files should be included in this section. The list at the left displays the JavaScript files that are present in the template's resources. The list at the right shows the style sheets and or JavaScript files that will be included in the output of the current section (or Web sections, if you have selected the Web context). Use the Include and Exclude buttons (or double-click) to move files from one list to the other.
  4. Click one of the included files and use the Up and Down buttons (or drag-and-drop) to change the order in which the files are included.

For more information about using JavaScript files, see Using JavaScript.

Setting the title, meta data and a shortcut icon

Each Web section has a set of properties to define the title of the web page, the shortcut icon and the meta tags appearing in the web page's head (with the HTML tag: <head>, see https://www.w3schools.com/tags/tag_head.asp).

To change these properties:

  1. On the Resources pane, expand the Web context, right-click the section and click Properties.
  2. Enter the Page Title. The contents of this field will go in the <title> HTML tag. (Name is the name of the section in the Web context; this has no effect on output.)
  3. Add a Shortcut Icon by entering the path to the favicon.ico file, for instance images/favicon.ico.
    If a valid favicon image is dragged to the Web section, it will automatically be set as a shortcut icon.
  4. The Meta Information Group lists all <meta> tags that will be added to the header of the HTML file generated in the output. Click the Add button to add a new <meta> tag to the list. Then you can select the type of <meta> tag, which is either name or http-equiv, and enter the value (for a name-type meta tag) or the content. For more information on <meta> tags, see W3Schools - HTML meta tag. 

Adding information to the <head> via a script

When generating Web output, the Designer automatically adds the included resources to the <head>. To add other tags to the <head>, such as a <base> tag to set a default base URL/target for all relative URLs in a document, you need to write a script. If you are not familiar with scripts, see Writing your own scripts for an explanation of how scripts work.

  1. Create a script: on the Scripts pane at the bottom left, click New. A new script appears in the list. Double-click on it to open it.
  2. Change the name of the script, so that it reflects what the script does.
    Scripts can only have the same name when they are not in the same folder.
  3. Choose the option Selector and in the Selector field, type head.
  4. Write a script that appends an element to the <head> of the web page.
Example

The following script adds a <base> element to the head of a web page.

results.append("<base href='https://www.w3schools.com/images/' target='_blank'>");