Aus Debacher-Wiki

Wechseln zu: Navigation, Suche

Die Installation ist auf aktuellen Linux-Systemen recht einfach. Der folgende Text beschreibt die notwendigen Schritte für die Version 4.4.x

Diese Typo3-Version wird in drei Varianten angeboten:

Introduction Package
Source + Dummy gemeinsam
Source und Dummy getrennt

Für größere Server mit mehreren Typo3-Installation ist die letzte Version optimal. Hier ist der größte Teil des Typo3-Systems nur ein einziges Mal vorhanden, das Source-Paket. Für jede der einzelnen Typo3-Installationen ist dann nur das recht kleine Dummy-Paket notwendig, dass hauptsächlich aus Verzeichnissen und Links in das Source-Paket besteht. Derartige Systeme lassen sich auch leicht aktualisieren, da nur das Source-Paket neu geladen werden muss und damit alle Installationen gleichzeitig aktuell werden.

Bei den beiden anderen Version handelt es sich um Versionen für eine einzelne Typo3-Installation, was der Normalfall sein dürfte. In der zweiten Version handelt es sich um ein ganz nacktes-Typo3-System, hier ist nach der Installeion noch nicht einmal eine Startseite zu sehen. Zuerst muss hier die Grundstruktur erstellt werden, was gerade am Anfang nicht ganz einfach ist. Die erste Version ist neu und liefert die Dateien und Einstellungen mit, die man benötigt um ein lauffähiges System zu erhalten.

Die folgenden Beschreibungen beziehen sich auf das Paket Source + Dummy.

Voraussetzungen für die Installation

Auf dem Rechner müssen folgende Programmpakete installiert sein:

Apache-Webserver
php5 Module
MySQL
ImageMagick (oder besser graphicsmagick, sofern möglich)
GD

Bezugsquelle

Zur Installation lädt man sich von der offiziellen Seite http://typo3.org/download/packages/ die Software herunter. Aktuell ist ist momentan die Typo3-Version 4.4.0a. Sie steht hier als gepackte Datei in den Archivformaten .zip und tar.gz zur Verfügung. Die Dateigröße des Paketes Source+Dummy beträgt etwa 21MB.

Installieren

Für die Installation von Typo3 wird eine MySQL-Datenbank benötigt, die möglichst vor der eigentlichen Installation angelegt werden sollte. Zu dieser Datenbank gehört dann noch ein Benutzer, der darauf zugreifen kann. Der erste Installations-Schritt besteht darin die Archiv-Datei von der Sourceforge Seite http://garr.dl.sourceforge.net/project/typo3/TYPO3%20Source%20and%20Dummy/TYPO3%204.4.0/typo3_src%2Bdummy-4.4.0.zip zu laden.

Dieses Archiv muss entpackt und dann in einem Pfad abgelegt werden, auf den der Webserver Zugriff hat. Das wären:

   * Unter Linux: /srv/www/htdocs/
   * Unter Windows c:\xampplite\htdocs\

Beim Entpacken entsteht leider kein Unterverzeichnis typo3, so dass man dieses selber anlegen muss, damit letztendlich folgende Verzeichnisstruktur vorliegt:

   * Unter Linux: /srv/www/htdocs/typo3/
   * Unter Windows c:\xampplite\htdocs\typo3\

Falls man keinen interaktiven Zugriff auf den Webserver hat, muss man das Archiv auf dem lokalen Rechner entpacken und dann per FTP auf den Server kopieren.

Die Archivdatei kann man nach dem Entpacken ruhig löschen.

Auf Linux-Rechnern muss man dann noch das neue Verzeichnis dem Benutzer übereignen, unter dem der Webserver läuft.

cd /srv/www/htdocs
chown -R wwwrun.www  typo3

Nun kann man bereits die Typo3-Installation ansprechen:

http://<servername>/typo3/

Der Platzhalter <servername> muss durch den Namen des benutzten Servers ersetzt werden. Bei einem Arbeitsplatzrechner kann die einfach localhost sein, in den folgenden Beispielen wird elearn-server.de benutzt.

Normalerweise bekommt man jetzt beim Aufruf der URL http//Rechnername/cms/ eine Fehlermeldung der Art

The Install Tool is locked.

To enable the Install Tool, the file ENABLE_INSTALL_TOOL must be created.

   * In the typo3conf/ folder, create a file named ENABLE_INSTALL_TOOL. The file name is case sensitive, but the file itself can simply be an empty file.

For security reasons, it is highly recommended that you either rename or delete the file after the operation is finished. 

As an additional security measure, if the file is older than one hour, TYPO3 will automatically delete it.

Hier muss man lediglich der Anleitung folgen und die Datei anlegen mittels

touch typo3conf/ENABLE_INSTALL_TOOL

aus dem Typo3-Verzeichnis heraus. Die Datei muss nur vorhanden sein, ein Inhalt ist nicht notwendig. Nur wenn die Datei vorhanden ist, lässt sich das Install-Tool nutzen.

Nach einem Aufruf von

http://elearn-server.de/typo3/

startet das Installationstool, das einen in wenigen Schritten durch die Installation führen wird.

Ein Klick auf Continue führt zum ersten Schritt.

Schritt 1

Hier geht es um die Datenbankanbindung. Das Installationsprogramm möchte den Benutzernamen und das Passwort für den MySQL-Zugriff haben. Der Host ist in der Regel mit localhost richtig vorgegeben. Der Benutzer sollte vorher, z.B. mit phpMyAdmin angelegt sein.

Schritt 2

Jetzt geht es um die Auswahl der zugeordneten Datenbank. Das Installationstool zeigt alle Datenbanken zur Auswahl an, auf die der angegebene Benutzer Zugriff hat. Man kann auch eine neue Datenbank anlegen lassen. Dazu müsste der Benutzer aber unnötig viele Rechte besitzen. Geschickter ist es also, auch die Datenbank vorher anzulegen und dem Benutzer alle Rechte an der Datenbank zu geben.

Schritt 3

Jetzt kann man die Daten auswählen, die in die Datenbank importiert werden sollen. Da nur Default Typo3 Tables zur Auswahl steht, fällt die Entscheidung hier leicht.

Nach dem Klick auf Continue erfolgt die eigentliche Installation, die einen Augenblick dauern kann.

Abschluss der Installation/Konfiguration

Das Installationstool bietet jetzt den Zugang zum Frontend und Backend an, oder Configure Typo3. Hier sollte man unbedingt die weitere Konfiguration auswählen.

Auf der folgenden Seite wird die Eingabe eines neuen Konfigurationspasswortes nahegelegt, was man dann auch machen sollte und eine Seite mit einem kleinen Menü aufgebaut.

Man übersieht leicht den Link Click to continue, dem man aber unbedingt immer folgen sollte.

Nach dem Ändern des Passwortes muss man sich erst einmal mit dem neuen Passwort anmelden, bevor es weiter geht.

In dem sehr umfangreichen Menüpunkt All Configuration in dem man jetzt landet sind ein paar Punkte unbedingt zu konfigurieren. In der Beschreibung gehe ich einfach von Oben nach Unten durch

[GFX][im_path] = /usr/bin/

[GFX][im_path_lzw] = /usr/bin

[GFX][im_version_5] = im6                  oder besser gm, wenn graphicsmagick installiert ist

[GFX][im_combine_filename] = composite     oder combine, wenn graphicsmagick installiert ist

[GFX][TTFdpi] = 96

[SYS][sitename] = Typo3 Testsite

Erste Schritte im Backend von Typo3

Über den Link im Installationstool, oder über http://<servername>/typo3/typo3 kommt man zur Anmeldung für das Backend von Typo3.

Voreingestellt sind:

Benutzername: admin
Passwort: password

Nach Eingabe der Daten gelangt man ins eigentliche Backend.

Hier sieht man sehr deutlich den Warnhinweis, doch möglichst bald das Passwort für den Zugang zu ändern. Das geht über den Menüpunkt User Settings unterhalb von User tools, damit werden die Einstellungen für den gewählten Benutzer, hier also admin geändert. Hier kann man auch gleich die Sprache umstellen, von English auf German.

Die Änderung der Sprache ist aber nur möglich, wenn die Zielsprache bereits installiert ist. Sprachpakete installiert man über den Ext Manager unterhalb von Admin Tools. Hier muß man in der oberen Auswahlliste auf Translation handling umstellen und dann german in der Liste Languages to fetch auswählen und dann auf den Button Save selection klicken. Sofern eine Online-Verbindung besteht, holt Typo3 die zugehörigen Informationen und bietet auch das Update der Übersetzungen für Plugins an an Update from repository, was man auch annehmen sollte.

Der Klick auf Update from repository löst Download und Import aus. Nach einem Reload der Seite über die Browser-Funktion steht das Backend in der deutschen Sprache zur Verfügung.

Erweiterungen installieren

Zu Typo3 gehört ein Repository mit einer Vielzahl von Extensions, mit denen die Möglichkeiten von Typo3 erweitert werden können. Die Installation dieser Extensions ist daher in der Regel vom Backend aus möglich, wenn man als Administrator angemeldet ist. Zum Abschluss der Konfiguration sollen ein paar Extensions installiert werden, die für die weiteren Beschreibungen nützlich oder gar notwendig sind. Das Repository kann mit dem Webfrontend unter http://typo3.org/extensions/repository/ recht bequem durchsucht werden.

Dazu geht man im jetzt deutschsprachigen Backend auf Erweiterungen und stellt in der oberen Auswahlliste um auf Erweiterungen importieren.

Im ersten Schritt klickt man hier auf Holen/Aktualisieren, damit die Liste der vorhandenen Extensions aktualisiert wird. Danach steht hinter diesem Button jeweils das Datum der letzten Aktualisierung. Danach kann man jetzt im Feld Erweiterungen suchen diejenigen Erweiterungen angeben, die man installieren möchte. Im ersten Schritt soll dies die Extension TemplaVoila sein, die den Umgang mit Layouts vereinfacht. Also gibt man den Namen der Extension in das Suchfeld ein und erhält als Antwort eine ganze Reihe von Treffern. Das hängt damit zusammen, dass es zu TemplaVoila wieder eine Reihe von Erweiterungen bzw. Ergänzungen gibt. Die Richtige Erweiterung heißt nur TemplaVoila und ist in der Abbildung durch einen Rahmen hervorgehoben.

Installiert wird diese Extension, indem man auf das Symbol am Anfang der Zeile klickt. Darauf wird die Extension ins System kopiert, aber noch nicht aktiviert. Installiert wird die Extension, indem man im nächsten Formular erneut auf Symbol klickt oder auf den Text Erweiterung installieren.

Bei der Installation einer Erweiterung kann es passieren, dass diese das Vorhandensein einer weiteren Extension erfordert, so wie hier TemplaVoila die Extension static_info_tables benötigt. Entweder installiert man solche Erweiterungen vorher, oder man folgt hier dem Angebot von Typo3 und klick auf Jetzt importieren, um diese Extension automatisch zu holen. Auch bei static_info_tables besteht die Installation aus zwei Schritten, dem eigentlichen Herunterladen und dem Aktivieren, Typo3 weist aber darauf hin.

Nach der Installation von static_info_tables lässt sich TemplaVoila aktivieren, dabei will es eine Reihe von Änderungen an der Datenbank und am Dateisystem durchführen, die der Benutzer aber vorher bestätigen muss. Generell ist es so, dass Erweiterungen nur dann Änderungen vornehmen, wenn der Benutzer diese bestätigt hat.

Man muss also ans Ende der etwas längeren Seite scrollen und dort Aktualisierungen durchführen klicken. Es erscheint danach noch einmal ein Formular mit den Konfigurationseinstellungen für TemplaVoila, hier kann man einfach auf Update klicken. Danach ist TemplaVoila einsatzbereit und es taucht ein neuer Punkt im Backend-Menü auf, außerdem verändert sich der bisherige Menüpunkt Seite und wird zu Page.

Layout entwicklen

Leider ist Typo3 nach der Installation noch nicht direkt nutzbar, es fehlt noch das Layout und es fehlen die Inhalte. Aus diesem Grund gibt es ja mit Version 4.4 auch neu das Introduction Package. Dieses Paket ist dann aber schon wieder so perfekt gestaltet, dass die Anpassung nicht trivial ist. Daher folgt jetzt hier eine Beschreibung, wie man zu einem eigenen Layout kommen kann.

Da das Erstellen eines eigenen Layouts, welches auf HTML und CSS basiert auch nicht ganz trivial ist benutzt die folgende Beschreibung das CSS-Paket von Dirk Jesse unter http://www.yaml.de/ . Er liefert auf seinen Seiten das Grundgerüst für ein Layout mit bis zu drei Spalten. Das Grundgerüst besteht aus einer HTML-Seite und mehreren CSS-Dateien. Bei seinem Ansatz wird das Cascadieren der Style-Sheets intensiv genutzt, so dass die Reihenfolge eine Rolle spielt. Ich habe seine CSS-Dateien komplett übernommen und ändere einige Eigenschaften hinterher in einer eigenen Datei. Die von ihm gelieferten Dateien bleiben so vollkommen unverändert, die Einstellungen können aber trotzdem verändert werden.

Die Nutzung des YAML-Paketes ist kostenlos, es wird nur ein eine Verlinkung auf die YAML-Homepage gefordert, entweder im Impressum, oder in der Fußzeile. Wer diesen Link nicht setzen möchte, der kann auch eine Lizenz kaufen, die vergleichsweise günstig zu haben ist. Ein großer Vorteil des Paketes besteht darin, dass die Vorlagen sehr stabil und für alle halbwegs aktuellen Browser anwendbar sind.

Installation von YAML

Im ersten Schritt holt man sich das aktuelle YAML-Paket http://www.yaml.de/fileadmin/download/release_321/yaml_321_100110.zip von http://yaml.de und entpackt es in dem Ordner fileadmin/yaml.

Seit der Version 3.2 von Yaml gibt es kein übergeordnetes Verzeichnis mehr, es bietet sich also an, unterhalb von fileadmin einen Ordner yaml anzulegen und das ZIP-File dain zu entpacken. Im Ordner fileadmin/yaml finden sich nach dem Entpacken vier Textdateien und die Ordner documentation, tools, yaml, js, examples.

fileadmin
 |--- _temp_       (gehört zu Typo3)
 |
 |--- user_upload  (gehört zu Typo3)
 |
 |--- yaml         (das CSS-Paket s.o.)
 |
 |--- templates    (meine eigenen Templates)

Die HTML-Vorlage

Die mitgelieferte Vorlage für das zweispaltige Layout findet sich unter:

fileadmin/yaml/examples/02_layouts_2col/2col_left_13.html

Diese Datei kopiert man sich in den vorhandenen Ordner fileadmin/templates:

cp fileadmin/yaml/examples/02_layouts_2col/2col_left_13.html fileadmin/templates/zweispaltig.html
chown wwwrun.www zweispaltig.html

Diese Datei kann man nun an die eigenen Anforderungen und die Anforderungen von Typo3 anpassen. Damit die Pfade zu den Style-Dateien auch dann stimmen, wenn man die Vorlagen-Datei im Browser direkt anschauen möchte, sind die Pfade entsprechend angepasst, Typo3 ersetzt diesen Bereich später sowieso. Das folgende Listing zeigt eine funktionsfähige Datei.:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
 <head>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
 <title>HTML-Template fuer eigene Typo3-Seiten</title>
 <link href="../yaml/examples/02_layouts_2col/css/layout_2col_left_13.css" rel="stylesheet" type="text/css"/>
 <!--[if lte IE 7]>
 <link href="../yaml/examples/02_layouts_2col/css/patches/patch_2col_left_13.css" rel="stylesheet" type="text/css" />
 <![endif]-->
 <link href="./anpassung.css" rel="stylesheet" type="text/css" />
 </head>
 <body>
 <!-- skip link navigation -->
 <ul id="skiplinks">
	<li><a class="skip" href="#nav">Skip to navigation (Press Enter).</a></li>
	<li><a class="skip" href="#col3">Skip to main content (Press Enter).</a></li>
 </ul>
 <div class="page_margins">
  <div class="page">
    <div id="header" role="banner">[Header]
    </div>
    <div id="nav" role="navigation">[Menue oben]</div>
    <div id="main">
      <div id="service">[Service]</div>
      <div id="rootline">[Rootline]</div>

      <div id="col1" role="complementary">
        <div id="col1_content" class="clearfix">
          <div class="menuLinks">[Menue links]</div>
          <div class="textBelowMenu">[Inhalt unter Menue]</div>
        </div>
      </div>
      <div id="col3" role="main">
        <div id="col3_content" class="clearfix">[Inhalt]</div>

        <div id="ie_clearing"> </div>
      </div>
    </div>
    <div id="footer" role="contentinfo">[Footer]</div>
  </div>
 </div>
 <!-- full skiplink functionality in webkit browsers -->
 <script src="../yaml/yaml/core/js/yaml-focusfix.js" type="text/javascript"></script>
 </body>
 </html>

Die Texte in den eckigen Klammern, sollen jeweils deutlich machen welchen Inhalt Typo3 später für diese Elemente liefern muss. Die Texte haben aber keine Bedeutung für Typo3, sie sollen nur dem Benutzer im nächsten Schritt die Arbeit etwas erleichtern.

Ohne CSS-Nutzung ergibt sich für diese Seite im Browser folgendes Bild:

Mit dem Standard-CSS von Dirk Jesse sieht es dann ganz anders aus:

Das sieht alles noch etwas langweilig aus, Dirk Jesse liefert aber bewusst keine besonderen Layouts mit seinem YAML-Paket, sondern eher einen Baukasten. Den gelieferten Baukasten kann man über die Datei templates/anpassung.css den eigenen Vorstellungen anpassen. Dafür kann die folgende Datei als Muster dienen.

 @media print {
  #header {display:none;}
  #nav {display:none;}
  #service {display:none;}
  #rootline {display:none;}
 }
 
 @media screen {
 /* ###################### zuerst ein paar allgemeine Einstellungen ############################## */
 /* (de) Alle Schriftgrößen auf Standardgröße (16 Pixel) zurücksetzen */
 html * {font-size:100.01%}
 
 /* (de) Basis-Layout erhält Standardschriftgröße von 12 Pixeln */
 body {
  font-family:'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
  font-size:83%;
  color:#444;  
 }
 
 /* Gestaltung der Überschriften */
 h1,h2,h3,h4,h5,h6 {
  font-family:'Trebuchet MS', Verdana, Helvetica, Arial, sans-serif;
  font-weight:bold; 
  color:#666;
  margin:0 0 0.25em 0; 
 }
 h1 {font-size:175%}                        /* 21px */
 h2 {font-size:150%; color:#182E7A}         /* 18px */
 h3 {font-size:150%}                        /* 18px */
 h4 {font-size:133.33%}                     /* 16px */
 h5 {font-size:116.67%}                     /* 14px */
 h6 {font-size:116.67%; font-style:italic}  /* 14px */
  
 p {line-height:1.5em; margin:0 0 1em 0;}

 /* ###  Listen  #### */
 ul, ol, dl {line-height:1.5em; margin:0 0 1em 1em}
 li {margin-left:1.5em; line-height:1.5em}
 
 dt {font-weight:bold}
 dd {margin:0 0 1em 2em}
 
 /* ###  Textauszeichnung ### */
 cite, blockquote {font-style:italic}
 blockquote {margin:0 0 1em 1.5em}
 
 strong,b {font-weight:bold}
 em,i {font-style:italic}
 
 pre, code {font-family:monospace; font-size:1.1em;}
 
 acronym, abbr {
  letter-spacing:.07em;
  border-bottom:.1em dashed #c00;
  cursor:help;
 }
 
 /* ####################### ab hier das eigentliche Layout ############################ */
 /* Hintergrundfarbe der Seite und Standard-Ausrichtung */
 body {
  background: #9e9e9e none;
  text-align: left;
 }

 /* So bekommt der Inhaltsbereich einen weißen Rand */
 #page {
  border: 10px solid #ffffff;
 }
 
 /* Die Seite bekommt feste Abmessungen */
 #page_margins {
  width: 1000px;
  min-width: 1000px;
  max-width: 1000px;
  margin: 0 auto;
 }
 
 /* Einstellungen für die Header-Grafik */
 #header {
  height: 140px;
  padding: 0;
  background-repeat: no-repeat;
  background-position: left top;
 }
 
 /* Einstellungen für die Hauptnavigation ---------------------------------------------------*/ 
 /* Der gesamte Bereich */
 #nav {
  width: 100%;
  overflow:hidden;
  background: #8e5340 url('bilder/background.gif') repeat-x center right;
  border-top: 1px #333 solid; 
  border-bottom: 1px #333 solid;
  text-align:center;
  height:19px; 
  font-size:14px;
 }
 
 /* Links      */ 
 #nav a {
  text-decoration: none;
  color: #fff;
  padding: 0.5em 0.8em 0.5em 0.8em;
 }
 
 /* Links mit Maus darüber */ 
 #nav a:hover {
  color: white;
  text-decoration:underline;
  background: transparent;  
 }
 
 /* aktive Links */ 
 #nav .oben_act {
  border-left: 1px #888 solid;
  border-right: 1px #888 solid;
  border-bottom: 1px #888 solid;
  color: white;
  background: url('bilder/background_act.gif') repeat-x center right;
 }
 
 /* Einstellungen für das Service-Menü am rechten Rand ------------------------------------- */
 /* Der gesamte Bereich */
 #service {
  background-color:#ff6600;
  padding-top: 2px;
  padding-right: 4px;
  font-size:13px;
  text-align: right;
  color:white;
 }
 
 /* Links      */ 
 #service a {  color:white;   text-decoration:none; }
 
 /* Links mit Maus darüber */ 
 #service a:hover{  text-decoration:underline;   background-color: transparent; }
 
 /* Einstellungen für den Bereich der Root-Line -----------------------------------------------*/
 /* Der gesamte Bereich */
 #rootline {
  text-align: left;
  color:black;
  background-color:#ff0000;
  border-bottom:1px solid white;
  padding-bottom: 5px;
 }
 
 /* Links      */ 
 #rootline a {
  color:white;
  text-decoration:none;
 }
 
 /* Links mit Maus darüber */ 
 #rootline a:hover{
  text-decoration:underline;
  background-color: transparent;
 }
 
 /* Hintergrund für den Bereich der beide Spalten umfasst */
 #main {
  background-color: #00ffff;
  padding: 0 0px;
 }
 
.menuLinks a {
  color: black;
 }
 
 /* In col1 befindet sich das Menü, Einstellungen für die Links */
 #col1 {
  background: transparent;
  overflow:hidden; 
  border-top: 0px #333 solid; 
  border-bottom: 0px #333 solid;
 }
 
 #col1 a {
  background: transparent;
  text-decoration: none;
  color: #000;
  margin: 0;
  padding: 0.5em 0.8em 0.5em 0.8em;
 }
 
 #col1 a:hover {
  border-left: 3px #005596 solid; 
  color: #015496;
  text-decoration: none;
  padding: 0.5em 0.8em 0.5em 0.8em;
 }
 
 #col1 .links_act { 
  border-left: 3px #fff solid; 
  color: #005596 ;
 }
 
 #col1 .links_act2 { 
  color: #016597;
  margin-left:15px;
 }
 
 /* In col3 befindet sich der eigentliche Inhalt  */
 #col3 {
  background-color: #ffffff;
 }
 
 /* Einstellungen für den Footer-Bereich ------------------------------------------------------*/	
 /* Der gesamte Bereich */
 #footer {
  background-color:#0000ff; 
  padding:0px; 
  margin:0px; 
  border: 0; 
  border-top:1px solid #DDDDDD;
  text-align: center; 
  color:white; 
  height:50px;
 }
}

Mit der eigenen CSS-Datei anpassung.css im Ordner Templates ergibt sich dann ein wesentlich bunteres Bild. Die auffälligen Farben sollen auch dazu dienen die einzelnen Elemente in der CSS-Datei leichter zu identifizieren, für eigene Anpassungen.

Hinweis: In dieser CSS-Datei und auch in späteren Teilen der Beschreibung tauchen jeweils Abbildungen auf, diese stehen im Verzeichnis http://elearn-server.de/typo3/fileadmin/templates/bilder/ zum Download bereit, es muss jeweils nur noch der Dateiname zur Pfadangabe ergänzt werden.

Anlegen der Seitenstruktur

Für die nächsten Schritte benötigen wir die ersten Teile eines Seitenbaumes. Daher legen wir jetzt einige Elemente davon an. Dazu klickt man auf das Menü Page, worauf sich im zweiten Teil der Seitenbaum öffnet, der bisher nur aus dem Typo3-Logo mit dem Titel der Website besteht. Klickt man hier mit einer Maustaste auf das Logo, so öffnet sich ein kleines Menü, aus dem man den Punkt neu anwählt, worauf sich folgedes Bild ergibt.

Im rechten Teil wählt man die erste Zeile unter Neue Seite erstellen aus, worauf sich erneut ein Formular öffnet.

Im Seitenformular muss man generell einen Titel angeben, für die allererste Seite, die Root-Seite, bietet sich hier root an. Diese Seite soll keinen eigenen Inhalt bekommen, bei ihr wird später das Layout verankert. Daher ändert man den Typ der Seite auf Verweis. Zusätzlich sollte man noch das Häkchen bei Seite verbergen entfernen. Zum Abschluss klickt man auf eines der Disketten-Icons im oberen Bereich des Formulares.

Eine weitere Einstellung für die Root-Seite kann man hier auch gleich vornehmen. Im Reiter Optionen wählt man im Feld Allgemeine Datensatzsammlung die Seite TemplaVoila Templates aus, damit Typo3 weiß, wo die zugehörigen Templates zu finden sind.

Alle weiteren Seiten werden jetzt als Unterseite von root angelegt. Man klickt also das Icon vor der root-Seite mit der Maus an und wählt dann jeweils Neu und anschließend Seite. Die nächste Seite bekommt wieder eine besondere Funktion, sie soll Templates für TemplaVoila beinhalten, also eine Art Ordner werden.

Die Seite hat den Typ SysOrdner und bekommt den Namen TemplaVoila Templates. Entsprechend legen wir noch eine SysOrdner Seite mit dem Namen Typoscript Templates an. Zum Abschluss legt man dann noch eine Seite namens Startseite an, bei der der Seitentyp Standard bestehen bleibt. Zum Abschluss lässt man dann die Root-Seite, die ja ein Verweis ist, auf die Startseite verweisen.

Sollte die Reihenfolge der Seiten nicht mit der Beschreibung übereinstimmen, so kann man dies bequem ändern, indem man die Menüfunktion Liste auswählt und dann die Root-Seite anklickt.

Hier kann man die Reihenfolge durch Mausklicks auf die kleinen Dreiecke bequem anpassen.

Einbinden der Vorlage über TemplaVoila

Wenn die Vorlagendatei fertig ist und auch das zugehörige CSS funktioniert, dann kann man daran gehen die Vorlage innerhalb von Typo3 verfügbar zu machen, es geht dabei darum, die eckigen Klammern in der Vorlagendatei duch Typo3-Inhalte ersetzen zu lassen. Dazu wählt man TemplaVoila, und klickt auf das Icon vor TemplaVoila Templates.

Auf den angebotenen Assistenten kann man verzichten, der legt eine ganze Reihe von Seiten zusätzlich an, die man dann wieder löschen müsste. In dem Menü wählt man Neu und dann Templa Voila Datenstruktur.

In diesem Formular muss man einen Titel angeben und unter Kategorie den Eintrag Seitenvorlage auswählen. Der Rest kann erst einmal leer bleiben, die Seite kann also so gespeichert werden.

Nun klickt man erneut im Menü TemplaVoila auf das Icon vor TemplaVoila Templates, im Kontenxtmenü klickt man auf Neu und dann auf Templa Voila-Vorlagenobjekt, worauf eine neue Maske erscheint. Das wichtigste Element in dieser Maske ist die Vorlagendatei, die unter Dateireferenz ausgewählt werden kann, indem man auf das entsprechende Icon klickt.

Hier wählt man die selbst erstellte HTML-Datei aus, die anderen Felder können erst einmal leer bleiben, so dass man schon speichern kann.

Klickt man jetzt wieder auf TemplaVoila Templates, so steht für das Template jetzt der Buttons Erneut Abbilden zur Verfügung. Klickt man auf den Button, so kommt man zu einer noch recht leeren Maske, in der man DS / TO Modifizieren auswählt. Nach einer Sicherheitsabfrage landet man dann in dem Menü, wo die Zuordnung zwischen HTML und Typoscript erfolgen kann.

Hinweis: Wenn im folgenden Formular der Text

Fehler Kein zugänglicher Speicherordner (Storage Folder) gefunden - bitte sofort einen anlegen!

dann hat man vergessen auf der Root-Seite das Feld Allgemeine Datensatzsammlung auszufüllen (s.o.).

Anfangs gibt es hier nur den Eintrag Root, den man auf ein HTML-Element abbilden (mappen) muss. Dazu klickt man auf Map, worauf im unteren Bereich der Maske eine Vorschau auf die Struktur der Vorlagen-Seite angezeigt wird.

Hier klickt man auf den Body-Tag und dann auf Festlegen bei dem root-Element. Den Mode inner kann man erst einmal beibehalten. Inner bewirkt, dass das Tag selber erhalten bleibt, nur die Inhalte zwischen dem jeweiligen Anfangs-Tag und dem zugehörigen End-Tag werden von Typo3 ersetzt. Wählt man stattdessen Outer, so verschwindet beim Ersetzen auch das Tag selber.

Nun muss man für jedes Element der Seite einen Eintrag erstellen. Am Ende könnte sich folgendes Bild ergeben:

Will man später einmal zu diesem Formular zurück, so ist der Weg nicht ganz leicht zu finden. Man geht über das Menü TemplaVoila, dann auf die Seite TemplaVoila Templates, dann erscheint im rechten Teil eine Übersicht der vorhandenen Templates. Hier muss der Reite Seiten-Templates aktiv sein, dann kann man den Button Abbildung aktualisieren anklicken, worauf ein neues Formular erscheint, in dem man unter Information den Button DS/VO modifizieren anklickt. Danach erscheitn die gewünschte Übersicht der Felder.

Klickt man hier auf das Bleistift-Icon am Ende der Zeile Header-Image, so kann man die Einstellungen erkennen.

Bei den meisten Elementen wird hier unter Object path auf das Typoscript verwiesen, welches das Element erstellt.

Nur bei den Inhalts-Elementen ist das nicht notwendig.

Hier sollte man aber auf den Title-Eintrag achten, der liefert nachher auch im Seiten-Menü die Überschriften über die jeweiligen Kontent-Elemente. Unter Datenverarbeitung findet man hier den Typoscript-Code, den man in den älteren TV-Versionen nur über das XML bearbeiten konnte.

Bis auf das Element für die Header-Grafik wird alles inner gemappt. Bei der Header-Grafik muss der DIV-Tag komplett ersetzt und mit Angabe der Grafik-Datei neu erzeugt werden. Deshalb ist dieses Element outer gemappt.

Templa-Voila speichert die Daten, bis auf das eigentliche Mapping, in einer XML-Struktur, die über das Bleistift-Icon hinter dem Datenstruktur-Element zugänglich ist.

Erstellen des Seiten-Templates

Nun muss man für die root-Seite noch ein Typoscript-Template erstellen. Wichtig ist vor allem erst einmal, dass man die wichtigsten statischen Templates einbindet, vor allem CSS_styled_content.

Wenn man jetzt dieses Template speichert, dann kann man schon die Frontend-Seite aufrufen, bekommt aber noch keinen Inhalt zu sehen. Finden kann man die Ursache im Reiter Allgemein unter Konfiguration steht als Vorgabe.

page = PAGE
page.10 = USER
page.10.userFunc = tx_templavoila_pi1->main_page
page.10.disableExplosivePreview = 1

Will man eigene Texte sehen können, so muss man das typo-Script verändern, vor allem für die Gestaltung. Dafür muss man die notwendigen CSS-Dateien im Header der Seite unterbringen, natürlich mit Typo-Script.

 page = PAGE
  page {
   typeNum = 0
   10 = USER
   10.userFunc = tx_templavoila_pi1->main_page
 
   meta.AUTHOR= Uwe Debacher und HAW Hamburg
   meta.DESCRIPTION = Musterseite fuer CMS Modul und Typo3

   headerData.20 = TEXT
   headerData.20.value (
   <link href="fileadmin/yaml/examples/02_layouts_2col/css/layout_2col_left_13.css" rel="stylesheet" type="text/css" />
   )
  
   headerData.30 = TEXT
   headerData.30.value (
   <!--[if lte IE 7]><link href="fileadmin/yaml/examples/02_layouts_2col/css/patches/patch_2col_left_13.css" rel="stylesheet" type="text/css"><![endif]--> 
   )
 
   headerData.40 = TEXT
   headerData.40.value (
   <!--[if lte IE 7]><link href="fileadmin/templates/ieanpassung.css" rel="stylesheet" type="text/css" /><![endif]--> 
   )   

   headerData.50 = TEXT
   headerData.50.value (
   <link href="fileadmin/templates/anpassung.css" rel="stylesheet" type="text/css" />
   )  
 
 }
 
 config {
   doctype = xhtml_trans
   xhtml_cleaning = all
  
   headerComment = Template für das Typo3 Modul
  
   language = de
   htmlTag_langKey = de
   sys_language_uid = 0
   locale_all = de_DE
 
   noScaleUp = 1
 
   sendCacheHeaders = 1
   inlineStyle2TempFile = 1
 
   index_enable = 1
   sword_standAlone = 0
   sword_noMixedCase = 0
 
   intTarget = _self
   extTarget = _blank
 
   spamProtectEmailAddresses = ascii
   spamProtectEmailAddresses_atSubst = (at)
   spamProtectEmailAddresses_lastDotSubst = (dot)
 
 }

Unter der Nummer 20 wird das passende Standard-Layout aus dem YAML-Paket eingebunden, unter Nummer 30 die zugehörigen Patches für einen nicht standardkonformen Browser-Typ. Alle YAML-Vorgaben möchte man anpassen können, daher unter Nummer 40 die Anpassungen für den nicht standardkonformen Browser und unter Nummer 50 die eigentlichen Anpassungen. Das wirksame Layout der Seite findet sich also in der Datei fileadmin/templates/anpassung.css.

Im Bereich config finden sich dann noch ein paar wichtige Grundeinstellungen für die Seite, u.a. die Sprache und Einstellungen zum Verschleiern von eMail-Adressen.

Speichert man diese Konfiguration ab, so erscheint im Frontend wieder das Layout, aber ohne irgendwelche Inhalte. Dafür wird dann weiteres Typoscript benötigt.

Das Typoscript

Die meisten Content-Elemente benötigen Typoscript-Code, der vom Template aus eingebunden wird. Es bietet sich an, diesen Code in handliche Einheiten zu gliedern. Dafür ist der Ordner Typoscript Templates gedacht.

In diesem Sys-Ordner finden sich folgende Code-Elemente:

Header-Grafik
Haupt-Menu
Service Menu
Klickpfad / Rootline
Untermenu links
Footer

Zum Anlegen der Typoscript-Elemente wählt man im Menü Template und dann die Seite Typoscript Templates. Hier klickt man mit der Maustaste auf das Icon und wählt aus dem Kontextmenü Neu. Im rechten Teil der Seite werden die zur Verfügung stehenden Typen angegeben, hier wählt man Template, worauf sich das zugehörige Formular öffnet. Bei jedem der Einträge ist nur der Reiter Allgemein ausgefüllt, mit einem Titel und vor allem dem Typoscript im Feld Setup:

Nach dem Speichern hat diese Änderung erst einmal noch keinen Effekt, man muss erst dieses Template mit in das Template der Root-Seite einbinden. Dazu klickt man, solange im Menü Template aktiv ist, auf die Root-Seite, wählt dort Vollständigen Template-Datensatz bearbeiten und kann dann auf den Reiter Enthält zugreifen.

Nach dem Speichern der Einstellungen sollte jetzt zumindest der Footer im Frontend auftauchen.

Entsprechend muss man jetzt Typoscript-Code für alle vorher festgelegten Objekte erstellen und jeweils auf der root-Seite einbinden.

Header-Grafik:

Die Grafik soll von der jeweiligen Seite aus unter Ressourcen individuell hochladbar sein. Wenn für eine Seite keine Grafik geladen ist, dann geht das Typoscript im Seitenbaum jeweils eine Ebene hoch, bis eine Grafik gefunden wird. Damit kann man erreichen, dass alle Hauptrubriken individuelle Header-Grafiken besitzen. Lädt man nur eine Grafik für die Root-Seite, so kann die für alle Seiten einheitlich gelten. Eine geeignete Grafik steht unter http://elearn-server.de/typo3/fileadmin/templates/bilder/buttons_2000x150.png zur Verfügung.

lib.header = IMG_RESOURCE
 lib.header {
   file.import = uploads/media/
   file.import.data = levelmedia:2, slide
   file.import.listNum = 0
   stdWrap.wrap = <div id="header" style="background-image:url('|'); "></div>
 }

Die Zeile mit listNum = 0 ist nicht notwendig, weil Vorgabe. Man kann aber mehrere Mediendateien unter Ressourcen hochladen und dann hiermit die passende Auswählen. Dadurch können mehrere Grafiken gleichzeitig gewechselt werden.

Haupt-Menu:

Das Hauptmenü soll sich dynamisch erweitern, aber nur um Inhalte der ersten Ebene. Alles tiefer liegenden Inhalte sind über das linke Untermenü erreichbar.

lib.nav = HMENU
 lib.nav {
   special.value = 1
   entryLevel = 1
   special = directory
   1 = TMENU
   1 {
     expAll = 0
     noBlur = 1
  NO = 1
  NO.ATagParams = class ="oben_no"
  NO.linkWrap =  | | |*|  | | |*|  |
   }
     1.RO < .1.NO
     1.RO.ATagParams = class = "oben_ro"
 
     1.ACT < .1.NO
     1.ACT.ATagParams = class = "oben_act"
 
 }

Service Menu:

Dieses Menü ist dazu gedacht ein Impressum, eine Sitemap und ggf. auch eine Suchfunktion getrennt von den anderen Menüs verfügbar zu machen. Als Position ist eine Zeile unterhalb des Hauptmenüs und oberhalb der rootline vorgesehen.

lib.service = HMENU
  lib.service {
  special = directory
  special.value = 7
  entryLevel = 1
  1 = TMENU
  1.NO = 1
  1.NO.linkWrap =  | | |*|  | | |*|  |
 }

Klickpfad:

Auch Rootline, breadcrumb oder Brotkrumenleiste genannt, hilft dem Betrachter dabei einen Überblick über seine Position im Webangebot zu behalten.

lib.rootline = COA
 lib.rootline {
     10 = TEXT
     10.value =  <a href="index.php">Klickpfad</a> 
     
     20 = HMENU
     20 {
       special = rootline
       special.range = 1 | -1
       1 = TMENU
       1.NO = 1
       1.NO.linkWrap = <img src="fileadmin/templates/bilder/arrow.png" alt=">"/> | 
     }
  }

Untermenu links:

Dieses Menü entsteht dynamisch mit den Unterpunkten zur Hauptnavigation. Jeder der Punkte darf wiederum über Unterpunkte verfügen.

lib.menu_links = HMENU
lib.menu_links {
  entryLevel = 1
  1 = TMENU
  1 {
    expAll = 0
    noBlur = 1
    NO.wrapItemAndSub = <div class="links_all">|</div> |*| <hr /><div class="links_all">|</div> |*|<hr /><div class="links_all">|</div><hr />
    NO = 1
    NO.ATagParams = class ="links_no"
  }
  1.RO < .1.NO
     1.RO.ATagParams = class = "links_ro"

     1.ACT < .1.NO
     1.ACT.ATagParams = class = "links_act"
   
  2 = TMENU
  2 < lib.menu_links.1
  2.NO.wrapItemAndSub = <hr /><div class="links_all">|</div>
  2.NO.ATagParams = class = "links_no2"
  2.RO.ATagParams = class = "links_ro2"
  2.ACT.ATagParams = class = "links_act2"
  
  2.ACT.wrapItemAndSub = <hr /><div class="links_all">|</div>
  2.RO.wrapItemAndSub = <hr /><div class="links_all">|</div>

 }

Footer:

Die Fußzeile dient dazu Copyright-Hinweise und ggf. einen Link auf die YAML-Seiten unterzubringen.

lib.footer = TEXT
 lib.footer {
    data = date : Y
    wrap = <br />© HAW Hamburg (|)
  }

Wichtig ist noch, dass man all diese Code-Elemente im Template der root-Seite einbindet, sonst steht der Code nicht zur Verfügung:

Nach diesen Schritten sieht das Frontend schon einigermaßen aus, wobei immer noch die Seiteninhalte fehlen und auch einige der Menüs, was aber an den noch fehlenden Seiten liegt.

Erstellen von Text

Das Modul Seite

Mit den Seiten-Modulen hat man in der Regel am häufigsten zu tun, da sich hier die zentralen Funktionen zum Bearbeiten einer Seite befinden. Klickt man das Menü Seite an, so öffnet sich im mittleren Fensterteil der Seitenbaum bzw. der Teil des Seitenbaumes, den der angemeldete Benutzer sehen kann.

Seiten mit einem roten - Icon sind ausgeblendet, werden also auf der Website nicht angezeigt. Damit hat man die Möglichkeit einzelne Seiten zu deaktivieren. Falls eine Seite über Unterseiten verfügt, so kann man den entsprechenden Teilbaum ein- und ausblenden lassen. Klickt man jetzt im mittleren Bereich eine der Seiten an, so öffnet sich rechts die zugehörige Beschreibung.

Eine Seite besteht generell aus den Komponenten:

Seitentitel
evtl. mehreren Datensätzen

Da das beschriebene Layout zwei Bereiche für Inhalte kennt, finden sich hier auch zwei Elemente für Datensätze. Oberhalb dieser beiden Elemente finden sich die Elemente für das Bearbeiten der Seiteneigenschaften. Klickt man auf das Stift-Icon, so kommt man in das Formular, welches man bei Anlegen der Seite benutzt hat. Eine Seite selber in Typo3 ist nur ein Container, fast ohne eigenen Inhalt. Der eigentliche Inhalt steckt in den Datensätzen, die im vorliegenden Layout in einem der beiden Bereiche Inhalt unter dem Submenue bzw. Hauptinhalt angelegt werden können.

Anlegen einer neuen Seite

Eine neue Seite legt man an, indem man im Seitenbaum auf das Icon vor der untersten Seite klickt und im Kontextmenü Neu auswählt. Aus der dann rechts erscheinenden Auswahl wählt man dann Seite in, was eine Unterseite erstellt. Eine Seite auf der gleichen Ebene würde man über Seite (nach) anlegen.

Im folgenden Formular ist erst einmal nur der Seitentitel wichtig und natürlich das Entfernen des Häkchens Seite verbergen. Insgesamt sollen so drei Unterseiten entstehen, jeweils mit leicht unterschiedlichen Titeln.

Ruft man jetzt das Frontend erneut auf, so erscheint auch das Menü auf der linken Seite, da die Startseite jetzt über Unterseiten verfügt.

Im nächsten Schritt soll eine Seite Service erstellt werden, mit den Unterseiten Impressum und Sitemap. Das sollte jetzt kein Problem mehr sein, der Seitenbaum soll am Ende wie folgt aussehen.

Im Frontend erscheint Service jetzt als neuer Menüpunkt im Hauptmenü und wenn man auf diesen Punkt klickt, so erscheinen Impressum und Sitemap im Untermenü. So ist das aber nicht vorgesehen, eigentlich sollen diese drei Seiten ihre eigene Position Service einnehmen. Um das zu erreichen muss man die Seiten-ID von der Service-Seite ermitteln. Dazu geht man mit der Maus über das Icon vor der Service-Seite und wartet einen kleinen Augenblick, dann erscheint eine gelb hinterlegte Anzeige mit dieser Nummer. Diese Nummer, es müsste etwa 8 sein, muss man im Template Service korrigieren. In der Vorlage aus den letzten Abschnitt steht hier

  special.value = 7

das korrigiert man zu

 special.value = 8

nach der Änderung müsste das Service-Menü erscheinen.

Nun muss der Service-Bereich noch aus dem Hauptmenü verschwinden. Dazu geht man auf die Seiteneigenschaften der Seite Service und setzt dort das Häkchen bei Im Menü verbergen. Damit sind dann die Funktionen der Typo3-Website funktionsfähig und es fehlen nur noch die Inhalte.

Datensätze anlegen

Die eigentliche Seite besitzt nur Titelinformationen, keinen wirklichen Inhalt. Den Inhalt kann man eingeben, wenn man im Menü Seite anwählt und im Seitenbaum auf die gewünschte Seite klickt. Dann öffnet sich wie oben gezeigt die Datensatzanzeige. Hier klickt man auf eines der Icons mit dem grünen Plus, normalerweise wird man das aus dem Bereich Hauptinhalt benutzen. Nun hat man die Auswahl zwischen mehreren Typen von Seiteninhalt.

An dieser Stelle muss unbedingt erwähnt werden, dass Webseiten nicht so detailliert layoutet werden können, wie Textdokumente. Webseiten werden später auf sehr unterschiedlichen Systemen ausgegeben, bei denen sich zumindest die Schriftdarstellung oft sehr unterschiedlich gestaltet. Man sollte daher niemals zuviele Objekte in einem Bereich unterbringen wollen.

Die Seiten-Gestaltung klappt übrigens auch in Textverarbeitungen wie Word nur dann, wenn man weder den Druckertreiber noch die Programmversion wechselt.

Bei Webseiten muss man sich generell auf sehr unterschiedliche Browser und unterschiedliche Drucksysteme einstellen.

Eine Seite gliedert man also im Idealfall in Abschnitte (Datensätze), die jeweils möglichst nur wenige Arten von Elementen enthalten.

Normaler Text dient dazu, normalen Fließtext unterzubringen. Der Text darf Links und andere einfache Elemente enthalten.
Text mit Bild nimmt Text und ein Bild auf. Die Anordnung der Elemente zueinander lässt sich später genauer bestimmen, als es hier den Eindruck macht.
Nur Bilder nimmt mehrere Bilder mit Beschriftungen auf.
Aufzählung und Tabelle sollte man sehr sparsam benutzen. Hier kann es Probleme mit der Barrierefreiheit geben.
Von den speziellen Elementen ist vor allem HTML erwähnenswert. Wer es nicht lassen kann, der kann hier direkt nahezu beliebigen HTML-Code eingeben.

Klickt man hier jetzt z.B. auf Normaler Text, so kommt man zu dem Fenster, in dem man den eigentlichen Text eingeben kann.

Im Reiter Allgemein kann man kaum mehr, als eine Überschrift eingeben. Die eigentliche Texteingabe erfolgt im Reiter Text mit einem Rich Text Editor (RTE).

Dieser Editor ähnelt dem von anderen Content Management Systemen.

Mit den unterschiedlichen Typen von Datensätzen muss man etwas experimentieren. Die Möglichkeiten Text und Grafik zu mischen sind recht vielfältig. Man kann den Typ eines Datensatzes auch jederzeit ändern, ohne dass Inhalte verloren gehen. Wechselt man von Text mit Bild zu Normaler Text, so sind die eingebundenen Bilder nicht mehr erreichbar, aber nicht verschwunden. Das kann man überprüfen, indem man auf Text mit Bild zurück stellt, dann sind die Bilder alle wieder zugänglich.

Typo3Installation4.4.0