Layoutanpassung

Dieser Abschnitt beschreibt, wie Sie Design und Layout der generierten Webseiten anpassen können.

In der Standardeinstellung können Sie das Layout der generierten Webseiten auf zwei verschiedene Arten anpassen. Zum einen können Sie ein eigenes CSS-Stylesheet verwenden, um die voreingestellten CSS-Angaben zu überschreiben. Mit dieser Methode sollte in den meisten Fällen das gewünschte Ergebnis erreicht werden.

Für umfangreichere Änderungen an den generierten Seiten können Sie eigene Vorlagen verwenden.

Stylesheet verwenden

Um ein eigenes CSS-Stylesheet einzubinden, legen Sie es unter dem Namen style.css in das HTMLfee-Hauptverzeichnis. Die voreingestellten CSS-Angaben werden dann nicht mehr ausgegeben, so dass allein das Stylesheet das Design der Webseiten festlegt.

Als Ausgangspunkt für die Erstellung eigener Stylesheet können Sie die voreingestellten CSS-Angaben nehmen:

/*---------------------------------------------------------------------------- *
 * Layout                                                                      *
 *---------------------------------------------------------------------------- */

body        { font-family: sans-serif; font-size: small; margin: 0}
#kopf       { border-bottom: 4px solid; }
#logo       { font-size: 200%; font-family: serif; font-style: italic; font-weight: bold; padding: 1ex }
#rumpf      { max-width: 60em; }
#inhalt     { margin-left: 14em; padding: 1em; padding-bottom: 2em; min-height: 20em }
#fuss       { clear: left; border-top: 1px dotted; padding: 1em; font-size: smaller; }
address     { text-align: center }
h1          { margin-top: 0 }

/*---------------------------------------------------------------------------- *
 * Navigation                                                                  *
 *---------------------------------------------------------------------------- */

 .nav        { float:left; width:12em; padding: 1em; padding-bottom: 5em }
 .nav ul     { list-style-type: square; margin: 0; padding: 0 0 0 1.5em; }
 .nav li     { margin-left: 0 }
 .nav ul.E0  { padding: 0; list-style-type: none; }
 .nav div    { margin-bottom: 0.5em }
div.E0, div.E1
            { font-weight: bold }   
 .nav a:link, .nav a:visited
            { text-decoration: none;  }
 .nav a:hover, .nav a:active
            { text-decoration: underline;  }
 
/*----------------------------------------------------------------------------- *
 * Farben und Anpassungen                                                       *
 *----------------------------------------------------------------------------- */

/*- Text */
body        { color: black }
a:link,a:hover,a:active { color: blue }
a:visited   { color: #226 }
h2,h1       { color: #333; border-bottom: 1px solid #66b }

/*- Kopf */
#kopf       { background-color: white; border-color: black; color: #33b }

/*- Navigation */
#rumpf,.nav      { background-color: #eee }
 .nav        { color: #33b }
 .nav a      { color: #334 }

/*- Inhalt */
#inhalt     { background-color: white; }

/*- Fuss */
#fuss       { border-color: #aaa; }
address     { color: #aaa; }

Die standardmäßig generierten Seiten haben folgende Elementstruktur, welche mit den CSS-Angaben in Form gebracht werden kann. Beachten Sie, dass die Container-DIVs nicht mit dem class-Attribut, sondern mit Ids angesprochen werden.

<div id="seite">

  <div id="kopf">
  </div>

  <div id="rumpf">

    <div id="nav">
      <!-- Navigation -->
    </div>

    <div id="inhalt">

      <div id="text">
        <!-- Inhalt des BODY-Tags -->
      </div>

    </div>
  </div>

  <div id="fuss">
  </div>

</div>

Vorlagen verwenden

Wenn Sie nicht nur das Aussehen, sondern die ganze Struktur der generierten Webseiten verändern wollen, müssen Sie eine eigene Vorlage verwenden.

Die Vorlage für den HTML-Generator kann einen beliebigen Inhalt haben und Variablen beinhalten, die bei der Generierung durch den jeweiligen Wert ersetzt werden. Die Variablen werden in geschweifte Klammern eingeschlossen:

{Variablenname}

Eine vollständige Auflistung der Variablen finden Sie in der Referenz.

Um eine Vorlage zu konfigurieren, legen Sie die Vorlage unter dem Namen htf_vorlage.vlg in ein Verzeichnis mit Quelldateien, beispielsweise direkt in das Quellverzeichnis. Die Vorlage wird für alle Dateien in diesem Verzeichnis und darunter verwendet. Sie können unterschiedliche Vorlagen für einzelne Unterverzeichnisse verwenden, um die Webseite mit verschiedenen Vorlagen zu generieren.

Wenn für ein Verzeichnis keine Vorlage gefunden wird, wird die interne Standardvorlage verwendet:

{htmlfee.start}{html.prolog}
<html>
<head>
  {html.title}
  {html.meta}      
  {htmlgenerator.stdstyle}
  <link rel="stylesheet" type="text/css" href="{seite.wurzel_relativ}/style.css">
</head>
<body>
<div id="seite">

<div id="kopf">
  <div id="logo">Titel Ihrer Homepage</div>
</div>   <!-- kopf -->

<div id="rumpf">
{navigation.text}

<div id="inhalt">
  <div id="text">
{html.body_innen}
  </div>
</div> <!-- /inhalt -->

</div>   <!-- /rumpf -->

<div id="fuss">
<address> 
Letzte &Auml;nderung: {seite.moddatum}
</address>
</div>   <!-- /fuss --> 

</div>   <!-- /seite -->
</body>
</html>