HTML Grundgerüst
Inhaltsverzeichnis |
HTML Grundgerüst
Die Dateien der HTML Templates sind im Verzeichnis /templates der Papoo Installation zu finden.
Aufgeteilt ist das HTML Grundgerüst, das ja die Struktur für das Layout bildet in:
- Kopf
- linke Spalte
- mittlere Spalte
- rechte Spalte
- Fuß
Das wird auch reflektiert in der /templates/__index.html, die als erstes geladen wird:
{include file="_kopf.html"}
{include file="_inhalt_links.html"}
{include file="_inhalt_rechts.html"}
{include file="_inhalt_mitte.html"}
{include file="_fuss.html"}
Übersicht der HTML Struktur
Eine grobe Übersicht über die Strukturierung kann man hier sehen:
Der Kopf der HTML Datei
Im Kopf werden die CSS Dateien eingebunden... Details dazu hier.
<html> <head> </head>
Der Body
<body> <div id="page_margins"> <div id="page" class="hold_floats">
Die beiden divs mit den ids:
- page_margins und
- page
umschließen die gesamte Seite.
Darin befindet sich optisch der Kopf:
Optischer Koopfbereich
Hier werden alle Module eingebunden die im Modulmanger im Kopfbereich eingebunden werden.
<div id="head">
<div id="head_content" class="clearfix">
{include file="_module_intern/mod_menue_sprung.html"}
{foreach item=modul from=$module.1}
{* <!-- Modul: {$modul.modlang_name}<br /> --> *}
{include file=$modul.mod_template}
{/foreach}
</div> <!-- ENDE head_content -->
</div> <!-- ENDE head -->
Hauptbereich
Der Hauptbereich umschließt die Bereiche col1, col2 und col3, sprich die linke, mittlere und rechte Spalte.
<div id="main">
Die linke Spalte col1
Die linke Spalte beinhaltet die beiden div Blöcke mit den ids:
- col1
- col1_content
die die linke Spalte umschließen. Alles was im Modulmanager dort hineingesetzt wird, wird hier optisch eingebunden.
{if $spalte_links OR 1}
<div id="col1">
<div id="col1_content" class="clearfix">
{foreach item=modul from=$module.2}
{* <!-- Modul: {$modul.modlang_name}<br /> --> *}
{include file=$modul.mod_template}
{/foreach}
</div> <!-- ENDE col1_content -->
</div> <!-- ENDE col1 -->
{/if}
Die rechte Spalte col2
Die rechte Spalte erscheint im Quelltext zuerst, da mit Hilfe von CSS dieser Block nicht anders positioniert werden kann. Die ids:
- col2 und
- col2_content
umschließen die rechte Spalte.
{if $spalte_rechts OR 1}
<div id="col2">
<div id="col2_content" class="clearfix">
<h2 class="ignoreornot">{$message_2187}</h2>
{foreach item=modul from=$module.4}
{* <!-- Modul: {$modul.modlang_name}<br /> --> *}
{include file=$modul.mod_template}
{/foreach}
</div> <!-- ENDE col2_content -->
</div> <!-- ENDE col2 -->
{/if}
Die mittlere Spalte col3
Die mittlere Spalte beinhaltet normalerweise den Inhalt der Artikel. Die ids:
- col3 und
- col3_content
umschließen hier den gesamten Inhalt.
{if $spalte_mitte OR 1}
<div id="col3">
<div id="col3_content" class="clearfix">
{foreach item=modul from=$module.3}
{* <!-- Modul: {$modul.modlang_name}<br /> --> *}
{* <!-- Template-Datei: {$modul.mod_datei}<br /> --> *}
{include file=$modul.mod_template}
{/foreach}
</div> <!-- ENDE col3_content -->
<hr class="clear_columns" />
</div> <!-- ENDE col3 -->
{/if}
Der Fuß
Hier endet der Hauptbereich.
</div> <!-- ENDE main -->
Der Fuß mit dem div
- footer
umschließt den Fußbereich.
<div id="footer" class="floatbox">
{foreach item=modul from=$module.5}
{* <!-- Modul: {$modul.modlang_name}<br /> --> *}
{include file=$modul.mod_template}
{/foreach}
</div> <!-- ENDE footer -->
Hier enden die page und page_margin divs
</div> <!-- ENDE page --> </div> <!-- ENDE page_margins --> </body> </html>
