Html Layout Type
The Html Layout type defines how an HTML page will be structured. This is the basic structure, which can be controlled by setting parameters in the asset instance.
<!DOCTYPE html PUBLIC ...>
<html>
<head>
<meta name="generator" content="TurtolCMS v..."/>
</head>
<body>
<div id="tcms_outer">
<div id="tcms_inner">
<div id="tcms_wrapper">
</div><!-- tcms_wrapper -->
</div><!-- tcms_inner -->
<div id="tcms_logo">
</div><!-- tcms_logo -->
</div><!-- tcms_outer -->
</body>
</html>
The html, head and body tags will, of course, always be generated.
docType
We generate an xHtml prelude (DTD, etc) lines before the opening <html> tag. By default, we use the HTML 1.0 Transitional document type. The docType parameter can be one of xml10trans, xml10strict, html40strict, or html40trans. We don't currently support the frameset DTDs.
bodyAttribute
If the optional bodyAttribute parameter is set, it will be added verbatim to the <body> tag; i.e. <body onload="runit();">
outer, inner and wrapper
The tcms_outer, tcms_inner, and tcms_wrapper divs may be turned on or off by setting (or unsetting) the boolean parameters outer, inner and wrapper, respectively.
logoPosition
The tcms_logo div may be toggled and/or its position changed via the logoPosition parameter. This parameter may be off (which removes the logo entirely), or one of body, tcms_outer, tcms_innner, or tcms_wrappper to determine the nearest parent of the tcms_logo div. It will be rendered just prior to the named tag's close. The default is body.
extraDivs
Finally, there is the extraDivs parameter, which is an ordered list of additional divs to render within the above structure. Each element in this list is a tuple of fields which define the id, name and container of the div. When widgets are added to a page, this makes the list of target divs to place the widget into (in addition to "head").
As an example, this is the default set of extra divs for a 5-section layout:
{ 'extraDivs' : [ { 'id' : 'tcms_header', 'name' : 'Header', 'container' : 'tcms_inner' }
, { 'id' : 'tcms_nav', 'name' : 'Navigation', 'container' : 'tcms_inner' }
, { 'id' : 'tcms_left', 'name' : 'Left Column', 'container' : 'tcms_wrapper' }
, { 'id' : 'tcms_center', 'name' : 'Center Column', 'container' : 'tcms_wrapper' }
, { 'id' : 'tcms_right', 'name' : 'Right Column', 'container' : 'tcms_wrapper' }
, { 'id' : 'tcms_footer', 'name' : 'Footer', 'container' : 'tcms_inner' }
]
}
It should be noted that the "tcms_" prefix is only required for the three pre-defined divs, tcms_{outer,inner,wrapper}, and otherwise are at the developer's/designer's discretion.
Full Example
Given all the above, this is what will be rendered:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
</head>
<body onload="runit();">
<div id="tcms_outer">
<div id="tcms_inner">
<div id="tcms_header">
</div><!-- tcms_header" >
<div id="tcms_nav">
</div><!-- tcms_nav" >
<div id="tcms_wrapper">
<div id="tcms_left">
</div><!-- tcms_left" >
<div id="tcms_center">
</div><!-- tcms_center" >
<div id="tcms_right">
</div><!-- tcms_right" >
</div><!-- tcms_wrapper -->
<div id="tcms_header">
</div><!-- tcms_header" >
</div><!-- tcms_inner -->
<div id="tcms_logo">
</div><!-- tcms_logo -->
</div><!-- tcms_outer -->
</body>
</html>
