Presentation structure

A web page in Wordframe Integra is built based on the synergy of the following elements:

Regions - containers for the webframes
Webframes - presenting content and applying specific functionality.

scheme of the presentation structure

Regions

In WordFrame Integra the regions are wrappers, defined in the selected layout. Their main purpose is to provide to the webmaster's a container for inserting and ordering webframes with content.

The regions' names, count or order are 100% managed and decided by the layout designer based on his specific needs or conventions.

As HTML they usually result in <div> element with ID and other attributes also defined in the layout file. Removing the HTML footprint of the region can be also achieved, if you define a nowrap attribute in the layout file.

WebFrames

The webframe is the man and only content presenting element of the system. If you need a content to be presented, you will need to place a webframe in the selected region, from the page management screen.

The HTML footprint of the webframe is defined more on this page. In general it is also a <div> block.

100% of the generated HTML by each webframe can be managed by its attributes.

Example

The layout definition file is pure html. You can define regions by assigning them the rel="wfi" attribute. Then the system will render this file into a layout template by following these rules:

all contents of the <head> meta will be ignored
in the <body> all HTML outside the defined regions will be preserved
in the <body> all HTML inside the defined regions will be ignored

Here is an example of a layout html body, which could implement the above image. Have in mind the content inside the regions was removed just for the example.

<div id="top-nav" name="Top navigation" rel="wfi">  <!-- REGION, defined by rel="wfi" -->	
    <!-- The region WebFrames will be nested here -->
</div>

<div id="header" rel="wfi" name="Header">  <!-- REGION, defined by rel="wfi" -->	
    <!-- The region WebFrames will be nested here -->
</div>

<div id="content-wrapper" class="layout-cs"> <!-- wrapper outside the region -->	
    <div class="row">

        <div rel="wfi" id="content" class="span19">  <!-- REGION, defined by rel="wfi" -->
            <!-- The region WebFrames will be nested here -->
        </div>
        <div rel="wfi" class="sidebar span5" id="sidebar">  <!-- REGION, defined by rel="wfi" -->	
            <!-- The region WebFrames will be nested here -->
        </div>

    </div>
</div>

<div id="footer">
    <div class="container">

        <div class="row" rel="wfi" name="Footer">	<!-- REGION, defined by rel="wfi" -->	
            <!-- The region WebFrames will be nested here -->
        </div>

    </div>
</div>