HTML Grundgerüst

aus Papoo Dokumentation, der freien Wissensdatenbank
(Unterschied zwischen Versionen)
Wechseln zu: Navigation, Suche
(→Hauptbereich)
 
(14 dazwischenliegende Versionen von einem Benutzer werden nicht angezeigt)
Zeile 1: Zeile 1:
 
<div class="breadcrump">Sie sind hier: [[Hauptseite]] / [[Papoo CSS Layout]] / [[HTML Grundgerüst]]</div>
 
<div class="breadcrump">Sie sind hier: [[Hauptseite]] / [[Papoo CSS Layout]] / [[HTML Grundgerüst]]</div>
 
=HTML Grundgerüst=
 
=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:
 
Aufgeteilt ist das HTML Grundgerüst, das ja die Struktur für das Layout bildet in:
−
* [[Kopf]]
+
* Kopf
−
* [[linke Spalte]]
+
* linke Spalte
−
* [[mittlere Spalte]]
+
* mittlere Spalte
−
* [[rechte Spalte]]
+
* rechte Spalte
−
* [[Fuß]]
+
* Fuß
 +
 
 +
Das wird auch reflektiert in der /templates/__index.html, die als erstes geladen wird:
  
−
Das wird auch reflektiert in der /templates/__index.html
 
 
  {include file="_kopf.html"}
 
  {include file="_kopf.html"}
−
{include file="_inhalt_links.html"}
+
  {include file="_inhalt_links.html"}
 
  {include file="_inhalt_rechts.html"}
 
  {include file="_inhalt_rechts.html"}
 
  {include file="_inhalt_mitte.html"}
 
  {include file="_inhalt_mitte.html"}
 
  {include file="_fuss.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.
 +
<nowiki><html>
 +
<head>
 +
</head>
 +
</nowiki>
 +
=== Der Body ===
 +
  <nowiki><body>
 +
<div id="page_margins">
 +
<div id="page" class="hold_floats"> </nowiki>
 +
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.
 +
<nowiki><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 --> </nowiki>
 +
 +
===Hauptbereich===
 +
Der Hauptbereich umschließt die Bereiche col1, col2 und col3, sprich die linke, rechte und mittlere Spalte.
 +
    <nowiki><div id="main">
 +
  </nowiki>
 +
 +
===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.
 +
<nowiki>{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}
 +
</nowiki>
 +
 +
===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.
 +
 +
<nowiki>{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}</nowiki>
 +
 +
===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.
 +
 +
<nowiki>{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}</nowiki>
 +
 +
===Der Fuß===
 +
Hier endet der Hauptbereich.
 +
<nowiki></div> <!-- ENDE main -->
 +
</nowiki>
 +
Der Fuß mit dem div
 +
* footer
 +
umschließt den Fußbereich.
 +
<nowiki>
 +
<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 -->
 +
</nowiki>
 +
===Hier enden die page und page_margin divs===
 +
 +
<nowiki></div> <!-- ENDE page -->
 +
</div> <!-- ENDE page_margins -->
 +
</body>
 +
</html>
 +
</nowiki>
 +
 +
==Module==
 +
Module sind div Blöcke die über den Modulmanager in die Templates geschaltet werden. Die Module sind immer gleich aufgebaut, hier am Beispiel des Brotkrumen Menüs. Die Funktion ist hier nicht enthalten.
 +
<nowiki><div class="modul" id="mod_breadcrump"></div></nowiki>
 +
 +
Diese divs haben immer die Klasse '''modul''' und eine eigene id die sich aus '''mod_''' und den Namen des Moduls zusammensetzt.

Aktuelle Version vom 29. August 2006, 14:54 Uhr

Sie sind hier: Hauptseite / Papoo CSS Layout / 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, rechte und mittlere 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>

Module

Module sind div Blöcke die über den Modulmanager in die Templates geschaltet werden. Die Module sind immer gleich aufgebaut, hier am Beispiel des Brotkrumen Menüs. Die Funktion ist hier nicht enthalten. 

<div class="modul" id="mod_breadcrump"></div>

Diese divs haben immer die Klasse modul und eine eigene id die sich aus mod_ und den Namen des Moduls zusammensetzt.

Von "http://www.doku.papoo.de/index.php?title=HTML_Grundger%C3%BCst&oldid=2621"
'Persönliche Werkzeuge
Namensräume
Varianten
Aktionen
Navigation
Werkzeuge