Ich möchte mich an diese Stelle für die Hilfe bedanken die ich durch zahlreiche TYPO3 Forums (oder durch freie Dokumentationen) bekommen habe. Dadurch wurde es erst möglich, dass ich diese Anleitung fertigstellen konnte.

Entschuldigen möchte ich mich, für den teilweise schlechten Stil, die Grammatik und Rechtschreibfehler die mit Sicherheit noch vorhanden sind. Meine Zeit ließ es leider nicht mehr zu alle diese Fehler vor der Veröffentlichung zu beseitigen.

Als Server wurde hier ein SUSE Linux Enterprise Server 11 (SLES11 SP1) verwendet.

Der Server wurde mit der Paketauswahl „Schemata“ aufgesetzt wobei für TYPO3 die Auswahl „Web- und LAMPP-Server“ notwendig ist. Diese Auswahl installiert die Pakete für Apache2, PHP5.2 und MySQL5.

Teilweise wird versucht, auch auf Installations- oder Konfigurationsunterschiede, für TYPO3 Installationen bei Internet Service Providern (ISP) einzugehen. Wobei auf Grund der Komplexität der unterschiedlichen Anbieter dies nur in einem generellen Zusammenhang geschehen kann.

Installieren Sie TYPO3 V4.5.x nach der Anleitung von Kapitel „Installation von TYPO3“. Kontrollieren Sie danach die Funktion des Backends und des Frontends.

Alle folgenden Beschreibungen beziehen sich auf die TYPO3 Version 4.5.x

Sollten Sie eine ältere oder neuere Version von TYPO3 benutzen, muss eventuell mit Abweichungen gerechnet werden.

Diese Anleitung setzt die Grundlagen von TYPO3 voraus, d.h. das Installieren von Extensions, die Anlage einer Seite, oder einen Record von Typ „plugin einfügen“, oder was ein TS (TypoScript) Template ist. Des Weiteren wären Grundlagen von HTML und CSS von Vorteil.

Ich hoffen trotzdem, dass diese Anleitung manchen eine Hilfestellung bei der Einrichtung oder bei Problemstellungen von TYPO3 bieten kann, die sich für den Einsatz von TYPO3 als Website CMS System entschieden haben oder sich noch in der Evaluierungsphase befinden.

Diese Anleitung gibt anhand von Beispielen die Einrichtung einer Website in einzelnen Schritten wieder. Es wird keine Gewähr auf Vollständigkeit, Richtigkeit oder Fehlerfreiheit gegeben. Die einzelnen Ausführungen können als Anregung für die Erstellung der eigenen Website verwendet werden.

1.1. Formales

Wichtige Anweisungen oder Warnungen beginnen mit einem Block WICHTIG .

Sonstige zusätzliche oder erklärende Hinweise sind mit Hinweis gekennzeichnet.

Auszuführenden Befehle beginnen mit dem Prompt und danach mit dem Befehl in Fettschrift wie z.B.: „SLES11:~ # cd /srv/www/htdocs“. Ein eventueller Rückgabetext von Befehlen wir in Normalschrift angeführt. Variablen oder Platzhalter innerhalb von Befehlszeilen werden in roter fetter Schrift oder in spitzen Klammern (<..>) in nicht fetter Schrift dargestellt.

Beispielskripte sind immer in Rahmen eingeschlossen. Die 3 Punkte (…) in den Skripten stehen für beliebigen Code der vor oder nach dem Script stehen kann.

Sollten Zeilennummer vorhanden sein, so dürfen diese nicht eingegeben werden.

Alle Änderungen in den Beispielskripten sind in roter fetter Schrift dargestellt. Platzhalter für veränderbare Werte werden innerhalb der Beispielskripte in fetter schwarzer Schrift eingefügt.

Achten Sie im Zusammenhang mit Änderungen immer auf dem umgebenden Text in Normalschrift, dieser hilft die Änderungen im Script an der richtigen Stelle zu positionieren.

Jeder aufgetretene Fehler der während der Installationsroutinen oder währen des Arbeiten auftrat wurde erfasst. Dabei wurde zuerst der Fehler beschrieben (ggf. mit Bild) und danach werden die Ursache und die Abhilfemaßnahmen beschrieben.

Als Editor sollten Sie einen Verwenden, mit welchen Sie auch in UTF-8 Zeichensatz speichern können wie z.B „PSPad“. Besonders dann wenn die komplette Website auf UTF8 Zeichensatz umgestellt wurde.

Download PSPad: http://www.pspad.com/de/download.php

Wenn Sie die Dateien mit einem normalen Windows Editor bearbeiten und abspeichern könnte es passierren das Sie alle Sonderzeichen und Umlaute verlieren.

2 Vorlagen Website erstellen

Wenn Sie eine neue Website erstellen sollten Sie zuerst festlegen wie diese Website aussehen soll und welche Funktionen innerhalb der Website erforderlich sind.

Hinweis Wenn Sie schon eine Website haben, die Sie unter TYPO3 einsetzen wollen, so können Sie dieses Kapitel überspringen.

2.1 Website Definitionen festlegen

Es soll eine neue Website für Eine Homepage entworfen werden die unter TYPO3 läuft.

Zuerst werden Überlegungen angestellt, wie die zu entwickelnde Website aussehen soll. und welche Funktionalitäten vorhanden sein sollten.

Wir gehen nach folgenden Schritten vor:

- Inhalte festlegen

- Design festlegen (wie sollen die Inhalte dargestellt werden)

- Funktionalitäten festlegen (mit welche Extension können diese Funktionalitäten erfüllt werden)

- Planung der Template Struktur (HTML Templates)

2.2 Inhalte festlegen

Welche Inhalte sollen auf der Website dargestellt werden:

· Impressum und Datenschutz
Informationen zum Betreiber der Website und zu den Datenschutzrichtlinien.

· Kontaktformular
Online Kontaktformular für Besucher der Website erstellen.

· Sitemap
Anzeige der Sitemap für alle Seiten erstellen.

· Website Suchen
Integrierte Suche auf die Website einbauen.

· Gästebuch
Für Websitebesucher die Möglichkeit Bemerkungen anzulegen.

· Miteilungen (News)
Bereich zur Anzeige allgemeiner aktueller Informationen aus allen Bereichen.

· Dokumentenverwaltung
Möglichkeit zum Upload von Dokumenten in allen möglichen Formaten und Anzeige in Kategorien ermöglichen

· Downloadverwaltung
Möglichkeit zum Upload von Dateien und Anzeige in Kategorien.

· Linksseite (zu anderen Websites)

2.3 Design festlegen

Das Design der Website sollte folgende Anforderungen erfüllen:

· Standardauflösung von 1024x768 ohne Scrollen

· keine Frames verwenden

· CSS Formatierungen

· Navigation mit Grafikbuttons vertikal am linken Rand
Die Größe dieses Bereiches über CSS fix Einstellen damit Menü bei Verkleinerung des Browser Fensters immer sichtbar bleibt

· Oberhalb der Navigation ganz links Anzeige Website Logos

· Im oberen Bereich neben der Navigation Anzeige eines wechselnden Banner-Bildes.
Wenn das Browser Fenster verkleinert wird soll das Banner-Bild unter das Website Logo verschoben werden.

· Unterhalb der Logos und Banners ein so genanntes Breadcrumb Menü anzeigen.

· Im Fußbereich immer die Copyright Meldung anzeigen.

· Inhaltbereichsbreite je Auflösung des Browsers auf ganze Seite erweitern.
Der Text des Inhaltsbereiches. soll auch wenn das Browserfenster verkleinert wird, nicht nach unten verschoben werden (siehe CSS Formatierung).

· Mitteilungen auf der rechten Seite in einen eigenen Bereich anzeigen.

· Kopfleiste mit Bild und daneben Text mit Grafik der über den Inhaltsbereich geht

· Navigationsbutton „Top“ und „Print“ in jedem Inhaltsbereich.

2.4 Designvorlage vorbereiten

Die Designvorlage wurde mit einem Webdesign-Programm (WYSIWYG) mit alle benötigten Grafiken erstellt. Dies sollte nicht als Empfehlung angesehen werden, denn die meisten Webdesign-Programme erzeugen einen unsauberen HTML Code der aus sehr vielen Tabellen besteht. Eine manuelle Bearbeitung des erzeugten Quellcode ist nur schwer möglich.

Der Einsatz eines Webdesign Programm kann nur dann empfohlen werden, wenn eine Formatierung aller Elemente mit CSS und automatische <div> Abschnitt Erzeugung unterstützt wird.

Die erstellt Designvorlage im Browser sieht folgenderweise aus („index.htm“):

Die „onmouseover“ Effekte im Navigationsbereich - immer wenn die Maus über einen Menüpunkt bewegt wird - können Sie nur sehen, wenn Sie in Ihrem Browser „JavaScript“ aktiviert haben.

Der erstellt HTML Quellcode in der „index.htm“ Datei der durch das Design-Programm DreamWaver generiert wurde:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

~~<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />~~

<title>Homepage</title>

~~<style type="text/css">~~

~~<!--~~

~~.footer {color: #8080C0}~~

~~body {~~

~~margin-left: 0px;~~

}

~~.sectiontitle {color: #333366}~~

~~a:hover {~~

~~color: #333366;~~

}

~~a:active {~~

~~color: #CCCCCC;~~

}

~~-->~~

~~</style>~~

~~<script language="JavaScript" type="text/JavaScript">~~

~~<!--~~

~~function MM_swapImgRestore() { //v3.0~~

~~var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;~~

}

~~function MM_preloadImages() { //v3.0~~

~~var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();~~

~~var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)~~

~~if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}~~

}

~~function MM_findObj(n, d) { //v4.01~~

~~var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {~~

~~d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}~~

~~if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];~~

~~for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);~~

~~if(!x && d.getElementById) x=d.getElementById(n); return x;~~

}

~~function MM_swapImage() { //v3.0~~

~~var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)~~

~~if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}~~

}

~~//-->~~

~~</script>~~

</head>

~~<body onload="MM_preloadImages('images/banner1.JPG')">~~

<body>

<div id=”logo”>

<tr>

~~<td><a href="#" onmouseout="MM_swapImgRestore()"~~

~~onmouseover="MM_swapImage('Image5','','images/banner2.jpg',1)"><img src="images/banner2.jpg"~~

~~alt="bannerbild" name="Image1" width="380" height="41" border="0" dynsrc="images/banner1.jpg"~~

~~controls="true" start="fileopen" loop="-1" lowsrc="images/banner1.jpg" id="Image1" /></a></td>~~

<td><img src="images/BannerImage1.jpg" alt="" width="472" height="51" border="0" /></td>

</tr>

</table>

</div>

<div id="logo-arrow">

</div>

<a href="#">breadcrumb</a> / <a href="#">breadcrumb</a> / <a href="#">breadcrumb</a>

</div>

<label><span class="sectiontitle">Suche</span></label>

</form>

</div>

<h3 class="sectiontitle">TYPO3 Links</h3>

<ul>

<li><a href="#">Dokumente</a></li>

<li><a href="#">Download</a></li>

</ul>

</div>

<h3 class="sectiontitle">Domino Links</h3>

<ul>

<li><a href="#">Dokumente</a></li>

<li><a href="#">Download</a></li>

</ul>

</div>

<h3>Titelgeschichte</h3>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.

Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum

facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis

libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla

urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque

a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti

sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor.

</p>

<p>

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Donec molestie.

Sed aliquam sem ut arcu. Phasellus sollicitudin. Vestibulum condimentum

facilisis nulla. In hac habitasse platea dictumst. Nulla nonummy. Cras quis

libero. Cras venenatis. Aliquam posuere lobortis pede. Nullam fringilla

urna id leo. Praesent aliquet pretium erat. Praesent non odio. Pellentesque

a magna a mauris vulputate lacinia. Aenean viverra. Class aptent taciti

sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos.

Aliquam lacus. Mauris magna eros, semper a, tempor et, rutrum et, tortor. </p>

</div>

<div id="siteInfo"> <a href="#" class="footer">Impressum</a> | <a href="#" class="footer">Sitemap</a> |

Real Power Work</div>

<br />

</body>

</html>

Die durchgestrichenen Zeilen wurden aus dem HTML Template entfernt und die der rote (fette) Text wurde zusätzlich eingefügt.

Danach sieht das HTML Template wie folgt aus:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>RealPowerWork</title>

</head>

<body>

<tr>

</tr>

</table>

</div>

</div>

</div>

<a href="#">breadcrumb</a> / <a href="#">breadcrumb</a> / <a href="#">breadcrumb</a>

</div>

<label><span class="sectiontitle">Suche</span></label>

</form>

</div>

<h3 class="sectiontitle">TYPO3 Links</h3>

<ul>

<li><a href="#">Dokumente</a></li>

<li><a href="#">Download</a></li>

</ul>

</div>