Im Bereich Layouts können Seitenlayouts verwaltet werden. Auf der linken Seite befinden sich die Aktionen um die neuen Layouts anzulegen oder Layouts zu synchronisieren. Direkt unterhalb befindet sich die Liste mit allen vorhandenen Layouts. Neben den Layouts befinden sich drei Aktionen.
Beim Klick auf die erste Aktion kann man nachschauen in welchen Vorlage das Layout benutzt wird. Die zweite Aktion bietet Möglichkeit ein ToDo für das Layout zu erstellen. Die letzte Aktion bietet die Möglichkeit die Layouts zu löschen. Das ist nur dann möglich, wenn das Layout in keiner Vorlage benutzt wird.
Beim klick auf Neues Layout wird ein neues Layout erstellt(siehe Screenshot). Im Formular kann jetzt Layout Name, eine Beschreibung, der Queltext und die automatische Zuweisung der Default-Module eingetragen werden. Nach der Eingabe aller Daten, können die Änderungen durch den grünen Hacken gespeichert werden.
Der Quelltext eines Layouts ist der wichtigste Bestandteil in diesem Bereich. Das layout einer Seite besteht aus dem öffnenden und schließenden HTML-Tag. Innerhalb der HTML-Tags befinden sich HEAD -und BODY Tags. Dabei representiert HEAD Bereich die Kopfzeile der Seite und BODY Bereich beinhaltet Seiteninhalt. Mehr zu den Layouts finden Sie hier: http://www.w3schools.com/html/html_layout.asp
Eine Besonderheit der Layouts bei CONTENIDO sind die "<container>"-Tags. Diese Container sind die Platzhalter für die CONTENIDO Module.
Ein Container ist wie folgt aufgebaut und enthält diverse Attribute:
<container id="205" name="layout_logo" types="layout" mode="fixed" default="layout_logo">layout_logo</container>
Die Container Id ist einmalig und darf innerhalb eines Layouts nur ein mal vorkommen. Diese Id darf beliebig gewählt werden und muss eine Ganzzahl sein.
Der Container Name darf beliebig gewählt werden. In der Regel trägt Container Name den Namen des Modules.
Der Container Typ gibt den Typ des Containers an. Der Typ kann z.B. layout, content, head, navigation sein.
Der Container Mode gibt den Modus eines Containers an. Es kann "optional" oder "fixed" sein. Beim Modus optional können alle beliebige Module in den Container konfiguriert werden. Beim Modus fixed kann nur das Modul mit dem gleichen Namen in den Container eingestellt werden.
Das Attribut default gibt ein standart Modul an, welches in den Container standartmäßig eingestellt wird. Bei dem oberen Container wird das Modul layout_logo Standartmäßig eingestellt, wenn die Option beim speichern ausgewählt wird.
<!DOCTYPE html>
<!-- standard layout -->
<html lang="de">
<head>
<meta charset="utf-8" />
<title><container id="10" name="title element" types="head" mode="fixed" default="head_title">title element</container></title>
<link rel="stylesheet" type="text/css" href="css/reset.css" />
<link rel="stylesheet" type="text/css" href="css/main.css" />
<link rel="stylesheet" type="text/css" href="css/contenido_backend.css" />
<!--[if IE 8]>
<link type="text/css" rel="stylesheet" href="css/ie_8.css" media="all" />
<![endif]-->
</head>
<body>
<div id="page">
<div id="header">
<container id="205" name="layout_logo" types="layout" mode="fixed" default="layout_logo">layout_logo</container>
<ul id="navigation_header">
<li class="lang_changer">
<container id="211" name="language_changer" types="navigation" mode="fixed" default="navigation_lang_changer">lang changer</container>
</li>
<li>
<container id="212" name="navigation_top" types="navigation" mode="fixed" default="navigation_top">navigation_top</container>
</li>
<li>
<container id="213" name="searchform_top" types="navigation" mode="fixed" default="navigation_searchform_top">searchform_top</container>
</li>
</ul>
</div>
<div id="breadcrumb">
<container id="90" name="breadcrumb" types="navigation" mode="fixed" default="navigation_breadcrumb">breadcrumb</container>
</div>
<div id="menu">
<container id="100" name="left navigation" types="navigation" mode="fixed" default="navigation_main">left navigation</container>
</div>
<div id="content">
<container id="110" name="content" types="content" mode="optional" default="content_header_first">first header</container>
<container id="120" name="content" types="content" mode="optional" default="content_header_second">second header</container>
<container id="130" name="content" types="content" mode="optional" default="content_image">image</container>
<container id="140" name="content" types="content" mode="optional" default="content_text">text</container>
<container id="150" name="content" types="content" mode="optional" default="content_date">date</container>
<container id="160" name="content" types="content" mode="optional" default="">content</container>
<container id="170" name="content" types="content" mode="optional" default="">content</container>
<container id="180" name="content" types="content" mode="optional" default="">content</container>
<container id="190" name="content" types="content" mode="optional" default="">content</container>
<container id="200" name="content" types="content" mode="optional" default="">content</container>
</div>
<div class="clear"></div>
<div id="footer">
<container id="210" name="bottom navigation" types="navigation" mode="optional" default="navigation_bottom">bottom navigation</container>
<container id="220" name="social media links" types="navigation" mode="optional" default="navigation_social_media">social media links</container>
</div>
<div id="copyright">
<container id="230" name="copyright notice" types="content" mode="optional" default="content_copyright_notice">copyright notice</container>
</div>
</div>
<container id="300" name="Facebook SDK" types="script" mode="optional" default="script_fb_sdk">Facebook SDK</container>
<container id="310" name="tracker script" types="script" mode="optional" default="script_tracker_google">tracker script</container>
<container id="320" name="tracker script" types="script" mode="optional" default="script_tracker_piwik">tracker script</container>
<container id="999" name="script_cookie_directive" types="script" mode="fixed" default="script_cookie_directive">script_cookie_directive</container>
<script type="text/javascript" charset="utf-8" src="js/jquery-1.8.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery-ui-1.9.1.custom.min.js"></script>
<script type="text/javascript" charset="utf-8" src="js/main.js"></script>
<script type="text/javascript" charset="utf-8" src="js/jquery.validate.js"></script>
</body>
</html>
