Startseite

Erste Schritte

Dieses Anleitung zeigt Ihnen Schritt für Schritt, wie Sie einen Internetauftritt mit HTMLfee erstellen und konfigurieren. Wie bereits erwähnt, benötigen Sie einen PHP-fähigen Webserver mit FTP-Zugang.

Als Beispiel werden wir eine persönliche Homepage erstellen. Sie werden lernen, wie man Webseiten mit HTMLfee bearbeitet und aktualisiert, den Internetauftritt mit CSS und Vorlagen gestaltet, Navigationseinträge sortiert sowie den Internetauftritt in Bereiche aufteilt.

Als HTML-Editor benutze ich gerne Amaya (http://www.w3.org/Amaya/), es geht natürlich auch jeder andere. Wenn Sie HTML gut beherrschen, können Sie auch einen Texteditor verwenden.

Webseiten generieren

Zuallererst laden wir das HTMLfee-Skript herunter (ZIP-Datei), entpacken es und laden das Skript (htf.php) per FTP auf den Webserver, beispielsweise in das Verzeichnis www.domain.de/Homepage. Dieses Verzeichnis wird unsere Homepage enthalten.

Jetzt benötigen wir einige Quelltexte für die Homepage. Erstellen Sie lokal ein Verzeichnis zum Bearbeiten der Quelltexte. In diesem Verzeichnis legen Sie jetzt die HTML-Dateien mit den Quelltexten für die Homepage an, und zwar in derselben Struktur, die auch später in der Navigation erscheinen soll:

Homepage/
  index.html
  Ueber mich.html
  Projekte/
    index.html
    Projekt 1.html
  Bilder/
   index.html
   Urlaub 2007.html
   Urlaub 2008.html
  Kontakt.html
  Impressum.html

Achten Sie darauf, dass es in jedem Verzeichnis eine Indexdatei (index.html) gibt.

Hinweis: es ist auch möglich, die Navigation manuell unabhängig von der Verzeichnisstruktur festzulegen. Details dazu finden Sie in der Dokumentation.

Jetzt laden wir diese Dateien per FTP auf den Webserver in das Verzeichnis des Internetauftritts. Nun rufen wir das Skript htf.php im Webbrowser auf, beispielsweise unter http://www.ihre-domain.de/Homepage/htf.php. Das Skript generiert jetzt den Internetauftritt und zeigt einige Protokollausgaben an:

Protokoll

Am Schluss wird eine Liste der generierten Webseiten angezeigt:

Liste der erzeugten Seiten

Klicken Sie auf index.php, um die Startseite des Internetauftritts aufzurufen. Das Resultat sollte ähnlich aussehen wie die HTMLfee-Webseite:

Generierte Webseite

Das Gerüst der Webseite samt Navigation ist jetzt bereits vorhanden. Auf dem Webserver wurde für jede hochgeladene Quelldatei (HTML) eine PHP-Datei angelegt:

Homepage/
  index.html
  index.php
  Ueber mich.html
  Ueber mich.php
  Projekte/
    index.html
    index.php
    Projekt 1.html
    Projekt 1.php
  Bilder/
   index.html
   index.php
   Urlaub 2007.html
   Urlaub 2007.php
   Urlaub 2008.html
   Urlaub 2008.php
  Kontakt.html
  Kontakt.php
  Impressum.html
  Impressum.php

In der Navigation werden nur die .php-Dateien angezeigt. Die Verzeichnisse in der Navigation sind mit der darunterliegenden index.php verknüpft.

Wir können jetzt die Quelltextdateien bearbeiten und erneut auf den Server hochladen. Die Änderungen sind sofort sichtbar, wenn Sie eine der bereits erzeugten Webseiten aufrufen. Das Skript htf.php muss also nicht mehr manuell aufgerufen werden.

Nun hätten wir gerne die Navigationseinträge besser sortiert. Die Standardsortierung ist alphabetisch, was meistens nicht das gewünschte Ergebnis liefert. Daher geben wir den Verzeichnissen und Dateien Sortierschlüssel, indem wir diese den Dateinamen durch einen Unterstrich getrennt voranstellen. Wir ändern also die Quelltextstruktur wie folgt ab:

Homepage/
  index.html
  10_Ueber mich.html
  20_Projekte/
    index.html
    Projekt 1.html
  30_Bilder/
   index.html
   Urlaub 2007.html
   Urlaub 2008.html
  40_Kontakt.html
  50_Impressum.html

Die Sortierschlüssel können auch Buchstaben enthalten, müssen jedoch mit einer Zahl enden. Wenn Sie lediglich einzelne Dateien an eine bestimmte Position verschieben wollen, geben Sie diesen Dateien entsprechende Sortierschlüssel, wie "ZZ0".

Außerdem stört uns noch der fehlende Umlaut in Ueber mich.html. Von Umlauten in Dateinamen sollten Sie grundsätzlich die Finger lassen, bei einigen Hostern sind sie auch gar nicht zugelassen. Wir können aber den Titel für den Navigationspunkt alternativ auch in der Metaangabe "htf:kurztitel" angeben, inklusive Sortierschlüssel. Wir fügen also in die HTML-Datei folgende Meta-Angabe ein:

<META name="htf:kurztitel" content="10_Über mich">

Da sich die Dateinamen geändert haben, müssen wir nun auf dem Webserver die HTML- und PHP-Dateien löschen. HTMLfee löscht von sich aus keine Dateien, sondern erzeugt nur neue und aktualisiert bestehende. Danach laden wir die Quelldateien wieder auf den Webserver und rufen irgendeine Seite des Internetauftritts auf. Jetzt sieht die Navigation aus wie gewünscht:

Sortierte Navigation

Layout anpassen

Wir wollen nun das Layout mit CSS-Angaben anpassen. Wenn kein benutzerdefiniertes Stylesheet vorhanden ist, werden in jeder Seite innerhalb des <style>-Tags die voreingestellten CSS-Angaben ausgegeben.

Wir legen also im Hauptverzeichnis der Homepage eine Datei namens style.css an, öffnen sie in einem Texteditor und füllen Sie zunächst mit dem Standard-CSS als Augangsbasis:

/*---------------------------------------------------------------------------- *
 * 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; }

Sie können jetzt die Farbangaben am Schluss des Stylesheets nach Ihren Vorstellungen ändern, beispielsweise so:

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

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

/*- Navigation */
#rumpf,.nav  { background-color: #6b1212 }
 .nav        { color: #f1e0ae }
 .nav a      { color: #f1e0ae }

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

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

Die Standard-Styles sind so organisiert, dass man die Farben leicht ändern kann. Natürlich können Sie auch ein komplett neues Stylesheet entwerfen.

Nachdem wir das Stylesheet auf den Webserver geladen haben, sieht unsere Seite so aus:

Angepasstes Layout

Konfigurationsdatei anlegen

HTMLfee bietet verschiedene Einstellungen, um die Generierung der Webseiten zu beeinflussen. Wir legen zunächst im Hauptverzeichnis die Konfigurationsdatei htf.kfg an. Dies ist die Haupt-Konfigurationsdatei von HTMLfee und enthält u.a. globale Einstellungen für das ganze Projekt.

Für's erste sind wir jetzt mit dem Grundgerüst unserer Homepage fertig. Wir können jetzt anfangen, die die Seiten mit Inhalt zu füllen und die Seitenstruktur zu erweitern.

Um das Skript auf dem Server zu sichern, aktivieren wir noch den Passwortschutz. Bei aktiviertem Passwortschutz können Unbefugte nicht auf das HTMLfee-Skript zugreifen. Außerdem werden die Webseiten beim Aufruf nur aktualisiert, wenn Sie angemeldet sind.

  1. Öffnen Sie das Skript (htf.php) in einem Texteditor
  2. Ändern Sie das Passwort am Anfang des Skripts: 
    define('PASSWORT', 'Ihr Passwort');
  3. Fügen Sie zur Haupt-Konfigurationsdatei folgendes hinzu: 
    htf.anmeldung = ja
;Ende
  4. Laden Sie beide Dateien wieder hoch auf den Webserver.