Diese Anleitung führt Sie durch alle Schritte die für Einrichtung einer Website unter TYPO3 V3.8.0 notwendig sind. Diese Anleitung geht nicht mehr auf die Installation von TYPO3 auf einen System ein. Es sollte eine TYPO3 Installation mit einem installierten „Dummy Paket“ vorhanden sein. Alle Punkte zur Vorbereitung des Systems auf eine TYPO3 Neuinstallation und die komplette TYPO3 Installation wurden in dieser Anleitung ausgelassen.

Grundlagen Kenntnisse von HTML und CSS Formatierungen wären für die Durcharbeitung der Anleitung von Vorteil, sind aber nicht zwingend erforderlich.

Verwendete Software:

SuSE Linux 9 Enterprise Server (SLES9)

TYPO3 V3.8.0
typo3_src-3.8.0
dummy-3.8.0

Image Magick 6.2.3

GDLib 2.0.33

Die verwendeten Dateien und Scripte gibt es auch als Download unter:

http://www.realpowerwork.com/download/erste_schritte.zip

Es wird keine Gewähr auf Vollständigkeit oder Fehlerfreiheit gegeben. Eventuell gibt es für manche in dieser Anleitung ausgeführten Erklärungen bessere Lösungen. Sollten Sie Fehler entdecken oder Vorschläge für Verbesserungen haben bitten wir Sie uns das mitzuteilen unter:

mailto:webmaster@realpowerwork.com

Wir wünschen Ihnen viel Erfolg bei der Verwendung dieser Anleitung. Vielleicht kann diese Anleitung einem kleinen Beitrag leisten um Ihnen die Vorteile, Leistungsfähigkeit und Flexibilität von TYPO3 näher zu bringen.

1.1 Formales

Vorgabescripte sind immer in Rahmen eingeschlossen.

Die 3 Punkte (…) in den Scripten 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 Scriptbeispielen sind in roter fetter Schrift dargestellt.

Achten Sie im Zusammenhang mit Änderungen immer auf dem umgebenden schwarzen Text der angeführt wird. Dies hilft die Änderungen im Script an der richtigen Stelle zu positionieren.

Durchgestrichener Text in Scripten soll oder muss gelöscht werden.

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 erklärt.

2 Vorgehensweise

Es wird angenommen das eine Vereinsseite für TYPO3 Anfänger erstelle werden soll.

Zuerst sollten Überlegungen angestellt werden 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

2.1 Inhalte festlegen

Welche Inhalte sollen auf der Website dargestellt werden:

· News (aktuell Informationen)

· Selbstdarstellung (Hintergrundinformationen zu Website Betreiber)

· Terminseite (zur Anzeige aktueller Termine)
Zur Eingaben von Terminen mit Datum, Ort, Email und einem Bild. Zusätzlich Möglichkeit eines Anhanges (JPG oder PDF)

· Bildergalerie (Bilder nach Bereiche mit Slideshow Funktion)
Anlage von Bildergalerien in Bereiche zusammengefasst. Die Bilderanzahl kann dabei bis zu 100 Bilder umfassen.

· Kontakt
Kontaktinformationen mit Name, Adresse, Email, Telefonnummer. Zusätzlich Kontaktformular zur Verfügung stellen.

· Gästebuch

· Linksseite (zu anderen Websites)

· Mitgliederbereich (nur mit Login)
Beinhaltet einen internen Terminkalender für die Mitglieder.
Mitgliederinformationen wie Name, Adresse, Telefon, Geburtstag etc.
Spezielle Informationen die nur für Mitglieder zugänglich sein sollen.

2.2 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

· Oberhalb der Navigation Anzeige eines Vereinslogos.

· Im oberen Bereich neben der Navigation Anzeige eines Banners.

· Inhaltbereichsbreite je Auflösung des Browsers auf ganze Seite erweitern.

· Im Fußbereich immer die Copyright Meldung anzeigen.

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

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

· Login Bereich für den Mitgliederbereich.

2.3 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 (besonders Freeware) 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 generiert wurde sieht ziemlich wirr aus:

body {color:#39AEFF; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; background-color:#000000; background-image:url(images/vs_autohintergrund_1.jpg);}

a:link {color:#00FF00;}

a:visited {color:#00FF00;}

a:active {color:#00FF00;}

a:hover {color:#00FF00;}

a:focus {color:#00FF00;}

--></style>

<!--

var d = document;

var ns = (navigator.appName.indexOf("Netscape") != -1);

function vs_change_pic(picname,url){document.images[picname].src = url;}

function vs_change_pic_frame(picname,url,framename){parent.frames[framename].document.images[picname].src = url;}

function vs_change_picani(picname,url,ftyp) {

if (ftyp == -2 || navigator.appName != 'Microsoft Internet Explorer' ){

document.images[picname].src = url;

}

else{

if (ftyp == -1){

document.images[picname].filters.blendTrans.Apply();

document.images[picname].src = url;

document.images[picname].filters.blendTrans.Play();

}

else{

document.images[picname].filters.revealTrans.Apply();

document.images[picname].src = url;

document.images[picname].filters.revealTrans.Play();

}

function vs_change_text(vs_id,vs_text){document.getElementById(vs_id).firstChild.replaceData(0,document.getElementById(vs_id).firstChild.nodeValue.length,vs_text); return;}

function vs_change_text_frame(vs_id,vs_text,framename){parent.frames[framename].document.getElementById(vs_id).firstChild.replaceData(0,parent.frames[framename].document.getElementById(vs_id).firstChild.nodeValue.length,vs_text); return;}

function vs_change_textvalue(vs_object,vs_text){vs_object.value=vs_text;}

function vs_visible_layer(vs_id,vs_vis){document.getElementById(vs_id).style.visibility = vs_vis;}

function vs_visible_layer_frame(vs_id,vs_vis,framename){parent.frames[framename].document.getElementById(vs_id).style.visibility = vs_vis;}

function vs_open_window(openbrse, openbrna, openbrop) {

var windowname = window.open(openbrse,openbrna,openbrop)

if (windowname){

if (windowname.focus){

windowname.focus();}}

return windowname;

}

function vs_open_url(url,target,options){

if(url != "") {

if(target == "_blank") {window.open(url)}

else{ if(target == "_self") {location.href=url;}

else{ if(target == "_top") {top.location.href=url;}

else{ if(target == "_parent") {parent.location.href=url;}

else{ if(options != "") {

var windowname = window.open(url, target, options)

if (windowname){

if (windowname.focus){

windowname.focus();}}

}

else{ if(target != "") {

parent.frames[target].location.href=url;}

else{location.href=url;}}}}}}}

}

function vs_sound(vs_sndaction,vs_sndname){

var A = eval(vs_sndname);

if (A != null){if (vs_sndaction=='stop') A.stop();

else{if (navigator.appName == 'Netscape') A.play();

else{if (document.M == null){

document.M = false; var m;

for(m in A) if (m == "ActiveMovie"){

document.M = true; break;}}

if (document.M) A.SelectionStart = 0;

if (document.M) A.play();}}}}

function vs_scrollwindow(pixel,target,speed,flags){

var py = ns ? pageYOffset : d.body.scrollTop;

var px = ns ? pageXOffset : d.body.scrollLeft;

if (pixel>0){

for (i=0; i<=pixel; i=i+speed){

window.scroll(px,py+i)

}

else{

for (i=0; i>=pixel; i=i-speed){

window.scroll(px,py+i)

}

//--></script>

</head>

<div id="ebene1" style="position:absolute; left:0px; top:0px; width:200px; height:489px; z-index:0; overflow:visible;">

<img src="images/erste_schritte.jpg" name="vs_bild128" border="0" width="150" height="110" alt=""></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="2"><p></p></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

<img src="images/vs_bild_3_2.jpg" name="home" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1"><p></p></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

<img src="images/vs_bild_19_25.jpg" name="historie" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1"><p></p></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

<img src="images/vs_bild_4_4.jpg" name="termine" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1"><p></p></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

<img src="images/vs_bild_5_6.jpg" name="fotos" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1"><p></p></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

<img src="images/vs_bild_20_27.jpg" name="gaestebuch" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1"><p></p></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

<img src="images/vs_bild_60_36.jpg" name="kontakt" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr></table></div>

<img src="images/erste_schritte_banner.gif" name="vs_bild131" border="0" width="600" height="40" alt=""></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="60" width="600" rowspan="10"><p></p></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="14" width="140" rowspan="40"><p></p></td><td colspan="31" width="310" rowspan="15" align="center" valign="top">

<p class="text9" style=" text-align:center;">Welcome to<br>Demo Site<br>Erste Schritte</p></td><td colspan="15" width="150" rowspan="40"><p></p></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="31" width="310" rowspan="25"><p></p></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="2" width="20" rowspan="5"><p></p></td><td colspan="14" width="140" rowspan="2" align="left" valign="top">

<p class="text1">zuletzt geändert 05.03.2006</p></td><td colspan="4" width="40" rowspan="4"><p></p></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="14" width="140" rowspan="2" align="left" valign="top">

<p class="text1">

<a href="mailto:name@domain.de" hidefocus="true">webmaster@company.com</a></p></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1">

</td><td colspan="3" width="30" rowspan="1"><p></p></td></tr></table>

</body>

</html>

Wichtige Anmerkung:

Manche Website Design Programme haben die schlechte Angewohnheit, alles was nicht vom Programm erzeugt wurde, sofort aus dem HTML Quellcode zu entfernen. Daher sollten Sie, wenn Sie sich nicht sicher sind wie Ihr Programm mit direkten Änderungen im Quellcode umgeht, keine Designanpassungen über das Programm vornehmen. Es könnte dann passieren, dass alle Ihre manuell eingefügten Änderungen zur Anpassung der HTML Datei, für eine TYPO3 HTML Template Datei wieder verloren gehen.

Das hier verwendete HTML Design Programm für die Vorlagedatei war genau eines davon.

Die zugehörige CSS Datei „ersteschritte.css“ sieht so aus:

/* CSS Textformate */

.text1 {font-size:10px; font-family:"Arial",Verdana,Helvetica;}

.text2 {font-size:10px; font-family:"Arial",Verdana,Helvetica; font-weight:bold;}

.text3 {font-size:12px; font-family:"Arial",Verdana,Helvetica;}

.text4 {font-size:12px; font-family:"Arial",Verdana,Helvetica; font-weight:bold;}

.text5 {font-size:14px; color:#FF0000; font-family:"Verdana",Verdana,Helvetica; font-weight:bold;}

.text6 {font-size:14px; font-family:"Arial",Verdana,Helvetica; font-weight:bold;}

.text7 {font-size:20px; font-family:"Arial",Verdana,Helvetica;}

.text8 {font-size:20px; font-family:"Arial",Verdana,Helvetica;}

.text9 {font-size:32px; color:#E70000; font-family:"Comic Sans MS",Verdana,Helvetica; font-weight:bold;}

.text10 {font-size:18px; font-family:"Arial",Verdana,Helvetica; font-weight:bold;}

.text11 {font-size:14px; font-family:"Arial",Verdana,Helvetica; font-weight:bold;}

.text12 {font-size:12px; font-family:"Arial",Verdana,Helvetica; font-weight:bold;}

.text13 {font-size:10px; font-family:"Arial",Verdana,Helvetica;}

.text14 {font-size:12px; font-family:"Arial",Verdana,Helvetica;}

/* CSS Linkformate */

a:link {text-decoration:none;}

a:visited {text-decoration:none;}

a:active {text-decoration:none;}

a:hover {text-decoration:none;}

a:focus {text-decoration:none;}

2.3.1 HTML Vorlagedatei als TYPO3 HTML Template vorbereiten

Der oben angezeigt HTML Quellcode wurde deshalb gewählt, damit gezeigt werden kann, dass man auch wenn ein HTML Design Programm, so viel Müll wie hier produziert, trotzdem mit einigen Anpassungen die Seite für TYPO3 verwenden und notwendige CSS Formatierung einfügen kann.

Wir wollen hier überhaupt den kompletten Inhalt der Seite nur mehr aus TYPO3 befüllen lassen. Daher werden wir sukzessive, den oben dargestellt Quellcode, entwirren und auf CSS Formatierung umstellen. Bei allen umgestellten Bereichen wird dann der vorhandene Quellcode, der damit unnötig geworden ist, entfernt.

Also fangen wird zuerst an, die Bereiche für die dynamischen Inhalte festzulegen.

Es wird einen Navigationsbereich, Bannerbereich, Inhaltsbereich und eine Fußzeilenbereich geben (letzte Änderung, Copyright, etc.).

2.3.1.1 Subparts und Marker

Damit TYPO3 die dynamischen Bereiche als solche erkennt werden „Subparts“ oder „Marker“ verwendet. Der Name eines „Subparts“ oder „Marker“ sieht folgenderweise aus ###Name###.

Der Unterscheid besteht darin, dass Subparts immer paarweise vorkommen und der zwischenliegende Bereich ersetzt wird, während Marker einzeln ersetzt werden.

Beispiel eines Marker:

###DATUM###

Beispiel eines Subparts

…HTML-Code für den Inhalt…

Zum ersetzen von ganzen Bereichen werden also vorzugsweise „Subpart“ verwendet, weil damit der komplette Inhalt eines Bereiches ersetzt werden kann.

2.3.1.2 Einbindungsmöglichkeiten von HTML Dateien als TYPO3 Template

Es bestehen mehrer Möglichkeiten die HTML Vorlagedatei für die Verwendung als TYPO3 Template vorzubereiten:

1. Die Kennzeichen für die dynamischen Bereiche (Marker oder Subparts) werden direkt in die HTML Datei eingefügt. Der Nachteil dieser Methode ist, dass Sie die HTML Vorlagedatei, auch mit einen Design Programm das diese zulässt, nicht mehr bearbeiten oder verändern können.

2. Die zweite Methode benutzt eine Extension von TYPO3 die sich „Automake Template“ nennt. Dabei werden die schon vorhanden Tags einer HTML Datei wie <td>, <ol>, <li> oder auch <div id=“xxx“> von der Extension automatisch in dynamische Bereiche (Subparts) umgewandelt. Der Vorteil dieser Methode ist solange Sie keine manuellen Änderungen an der HTML Vorlagedatei vornehmen, kann diese immer noch mit der HTML Designer Programm bearbeitet werden.

3. Die dritte Methode ist die eleganteste und neueste. Dabei wird auch wieder eine Extension von TYPO3 verwendet diese heißt „TemplateVoila“ (Modern Template Building). Auch hier müssen keine Änderungen an der originalen HTML Vorlagedatei vorgenommen werden. Der Vorteil dieser Methode zeigt sich erst bei der Zuordnung der Inhalte zu den dynamischen Bereichen. Dies kann über ein grafisches Menü in TYPO3 per Drag&Drop vorgenommen werden.

2.3.1.3 HTML Vorlagedatei erstellen durch direkte einfügen dynamischer Bereiche

Auf der nächsten Seite werden die einzelnen Bereiche farblich markiert. Zusätzlich werden am Beginn und Ende des jeweiligen Bereiches die Kennzeichen für einen TYPO3 „Subpart“ angebracht:

body {color:#39AEFF; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; background-color:#000000; background-image:url(images/vs_autohintergrund_1.jpg);}

a:link {color:#00FF00;}

a:visited {color:#00FF00;}

a:active {color:#00FF00;}

a:hover {color:#00FF00;}

a:focus {color:#00FF00;}

--></style>

<!--

var d = document;

var ns = (navigator.appName.indexOf("Netscape") != -1);

function vs_change_pic(picname,url){document.images[picname].src = url;}

function vs_change_pic_frame(picname,url,framename){parent.frames[framename].document.images[picname].src = url;}

function vs_change_picani(picname,url,ftyp) {

if (ftyp == -2 || navigator.appName != 'Microsoft Internet Explorer' ){

document.images[picname].src = url;

}

else{

if (ftyp == -1){

document.images[picname].filters.blendTrans.Apply();

document.images[picname].src = url;

document.images[picname].filters.blendTrans.Play();

}

else{

document.images[picname].filters.revealTrans.Apply();

document.images[picname].src = url;

document.images[picname].filters.revealTrans.Play();

}

function vs_change_text(vs_id,vs_text){document.getElementById(vs_id).firstChild.replaceData(0,document.getElementById(vs_id).firstChild.nodeValue.length,vs_text); return;}

function vs_change_textvalue(vs_object,vs_text){vs_object.value=vs_text;}

function vs_visible_layer(vs_id,vs_vis){document.getElementById(vs_id).style.visibility = vs_vis;}

function vs_visible_layer_frame(vs_id,vs_vis,framename){parent.frames[framename].document.getElementById(vs_id).style.visibility = vs_vis;}

function vs_open_window(openbrse, openbrna, openbrop) {

var windowname = window.open(openbrse,openbrna,openbrop)

if (windowname){

if (windowname.focus){

windowname.focus();}}

return windowname;

}

function vs_open_url(url,target,options){

if(url != "") {

if(target == "_blank") {window.open(url)}

else{ if(target == "_self") {location.href=url;}

else{ if(target == "_top") {top.location.href=url;}

else{ if(target == "_parent") {parent.location.href=url;}

else{ if(options != "") {

var windowname = window.open(url, target, options)

if (windowname){

if (windowname.focus){

windowname.focus();}}

}

else{ if(target != "") {

parent.frames[target].location.href=url;}

else{location.href=url;}}}}}}}

}

function vs_sound(vs_sndaction,vs_sndname){

var A = eval(vs_sndname);

if (A != null){if (vs_sndaction=='stop') A.stop();

else{if (navigator.appName == 'Netscape') A.play();

else{if (document.M == null){

document.M = false; var m;

for(m in A) if (m == "ActiveMovie"){

document.M = true; break;}}

if (document.M) A.SelectionStart = 0;

if (document.M) A.play();}}}}

function vs_scrollwindow(pixel,target,speed,flags){

var py = ns ? pageYOffset : d.body.scrollTop;

var px = ns ? pageXOffset : d.body.scrollLeft;

if (pixel>0){

for (i=0; i<=pixel; i=i+speed){

window.scroll(px,py+i)

}

else{

for (i=0; i>=pixel; i=i-speed){

window.scroll(px,py+i)

}

//--></script>

</head>

<!-- ###LOGO### Begin - ->

<div id="ebene1" style="position:absolute; left:0px; top:0px; width:200px; height:489px; z-index:0; overflow:visible;">

<!-- ###LOGO### End - ->

<!-- ###NAVIGATION_LINKS### Begin - ->

<!-- ###NAVIGATION_LINKS### End - ->

<!-- ###BANNER### Begin - ->

<!-- ###BANNER### End - ->

<!-- ###CONTENT### Begin - ->

<!-- ###CONTENT### End - ->

<!- - ###BOTTOM### Begin - ->

<p class="text1">

<a href="mailto:name@domain.de" hidefocus="true">webmaster@company.com</a></p></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1">

</td><td colspan="3" width="30" rowspan="1"><p></p></td></tr></table>

<!- - ###BOTTOM### End - ->

</body>

</html>

Der Nachteil dieser Methode ist, außer das Sie diese Datei nicht mehr mit dem HTML Designer Programm bearbeiten werden darf, auch noch, das alle notwendigen Formatierungen für die späteren dynamischen Bereiche in „TypoScript“ (TYPO3 Script Sprache) vorgenommen werden müssen.

Wir könnten jetzt um die Vorgabe einer CSS Formatierung zu erfüllen um die Bereiche welche eine CSS Formatierung erhalten sollen einen <div class=“bereichsname“> und Am Ende eine </div> Tag für den Abschluß des Bereiches einfügen.

…

<div class=“bottom“>

<!- - ###BOTTOM### Begin - ->

<p class="text1">

<a href="mailto:name@domain.de" hidefocus="true">webmaster@company.com</a></p></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1">

</td><td colspan="3" width="30" rowspan="1"><p></p></td></tr></table>

<!- - ###BOTTOM### End - ->

</div>

…

Damit könnten wir mit einer CSS Klasse für „.bottom“ die Formatierung für diesen Bereich vorzunehmen.

Mann könnte auch, wie später beschrieben, nur <div> Tag mit der Extension „Automake Template“ anwenden. Der Nachteil, dass die HTML Vorlagedatei, mit dem verwendeten HTML Design Programm nicht mehr geändert werden darf, bleibt aber bestehen.

2.3.1.4 HTML Vorlagedatei mit der Extension „Automake Template“

Wie oben schon erwähnt wurde, hat die Extension „Automake Template“ den Vorteil, dass diese dynamische Bereiche durch Analyse von HTML Tags selbst erkennen kann. Wenn aber die HTML Vorlagedatei keine saubere Formatierung besitzt müssen Sie auch hier manche Kennzeichen (Marker oder Subpart) manuell in die HTML Vorlagedatei einfügen.

Es gibt in den Quellcode der vorherigen Seiten keine eindeutigen Tags wie <td>, <ol>, <li> oder auch <div..> mit welchen die einzelnen Bereiche sauber abgegrenzt werden können.

Damit kann die Extension „Automake Template“ für diese Datei die dynamischen Bereiche nicht selbst erkennen. Hier kann nur durch manuelle Formatierung mit HTML Tags nachgeholfen werden.

Wir machen eine Kopie der original Datei „index.html“, und speichern diese unter dem Namen “index.html.org“ ab. Danach öffnen wir die Datei „index.html“ in einen Texteditor und führen die gewünschten Änderungen durch. Wir definieren dadurch (wie schon im vorherigen Kapitel) die einzelnen dynamischen Bereiche. Der Nachteil, das damit eine spätere Bearbeitung der HTML Vorlagedatei mit dem verwendeten HTML Design Programm nicht mehr durchgeführt werden können stört uns hier nicht. Spätere Design Änderungen werden nur mehr in TYPO3 durchgeführt werden.

Da wir uns an die modernen Richtlinien für HTML Formatierungen halten wollen, müssen wir um den Quellcode HTML 4.0 (und XHTML) konform zu gestalten noch zusätzliche Formatierung am Anfang des Quellcodes beginnend mit „<!DOCTYPE…“ einfügen.

Zusätzlich fügen wir danach noch so genannte „Meta“ Tags Formatierungen ein.

Die Verwendung von Meta Tags, für die Suchindizierung von Suchmaschinen (z.B. Google, Yahoo etc.), variiert in deren Bedeutung für das Ranking. Ich verwende Sie hier trotzdem, um kurzen Überblick zu deren Verwendung zu liefern.

Der Meta Tag „description“ wird in den meisten Suchmaschinen als Überschrift verwendet (nicht bei Google).

Das Meta Tag „Language“ wird nur von der Suchmaschine AltaVista ausgewertet. Die Meta Tags „page-topic“, „audience“ und „page-type“ werden von der Suchmaschine Fireball ausgewertet.

Über die Bedeutung von, „robots“, und „revisit“ gibt es unterschiedliche Meinungen zu deren Verwendung.

Unser HTML Vorlagedatei wird folgenderweise geändert (die durchgestrichenen Zeilen wurden gelöscht):

~~<html><head>~~

<!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">

<head>

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

<title>Erste Schritte Homepage</title>

<META HTTP-EQUIV="Language" CONTENT="de">

<META NAME="author" CONTENT="Erste Schritte">

<META NAME=”publisher” CONTENT=”Verein Erste Schritte”

<META NAME="keywords" CONTENT="Erste Schritte, TYPO3, Automake Template">

<META NAME="description" CONTENT="Willkommen auf der Homepage von Erste Schritte ... ">

<META NAME="page-topic" CONTENT="Verein, Infos">

<META NAME="audience" CONTENT="Fans, Mitglieder">

<META NAME="page-type" CONTENT="Vereinsseite">

<META NAME="robots" CONTENT="INDEX,FOLLOW">

<META NAME="revisit" content="5 days">

<link rel="stylesheet" type="text/css" href="ersteschritte.css">

~~<meta name="robots" content="index">~~

~~<meta name="robots" content="follow">~~

~~<link rel="stylesheet" type="text/css" href="ersteschritte.css">~~

body {color:#39AEFF; margin-left:0px; margin-right:0px; margin-top:0px; margin-bottom:0px; background-color:#000000; background-image:url(images/vs_autohintergrund_1.jpg);}

a:link {color:#00FF00;}

a:visited {color:#00FF00;}

a:active {color:#00FF00;}

a:hover {color:#00FF00;}

a:focus {color:#00FF00;}

--></style>

<!--

var d = document;

var ns = (navigator.appName.indexOf("Netscape") != -1);

function vs_change_pic(picname,url){document.images[picname].src = url;}

function vs_change_pic_frame(picname,url,framename){parent.frames[framename].document.images[picname].src = url;}

function vs_change_picani(picname,url,ftyp) {

if (ftyp == -2 || navigator.appName != 'Microsoft Internet Explorer' ){

document.images[picname].src = url;

}

else{

if (ftyp == -1){

document.images[picname].filters.blendTrans.Apply();

document.images[picname].src = url;

document.images[picname].filters.blendTrans.Play();

}

else{

document.images[picname].filters.revealTrans.Apply();

document.images[picname].src = url;

document.images[picname].filters.revealTrans.Play();

}

function vs_change_text(vs_id,vs_text){document.getElementById(vs_id).firstChild.replaceData(0,document.getElementById(vs_id).firstChild.nodeValue.length,vs_text); return;}

function vs_change_textvalue(vs_object,vs_text){vs_object.value=vs_text;}

function vs_visible_layer(vs_id,vs_vis){document.getElementById(vs_id).style.visibility = vs_vis;}

function vs_visible_layer_frame(vs_id,vs_vis,framename){parent.frames[framename].document.getElementById(vs_id).style.visibility = vs_vis;}

function vs_open_window(openbrse, openbrna, openbrop) {

var windowname = window.open(openbrse,openbrna,openbrop)

if (windowname){

if (windowname.focus){

windowname.focus();}}

return windowname;

}

function vs_open_url(url,target,options){

if(url != "") {

if(target == "_blank") {window.open(url)}

else{ if(target == "_self") {location.href=url;}

else{ if(target == "_top") {top.location.href=url;}

else{ if(target == "_parent") {parent.location.href=url;}

else{ if(options != "") {

var windowname = window.open(url, target, options)

if (windowname){

if (windowname.focus){

windowname.focus();}}

}

else{ if(target != "") {

parent.frames[target].location.href=url;}

else{location.href=url;}}}}}}}

}

function vs_sound(vs_sndaction,vs_sndname){

var A = eval(vs_sndname);

if (A != null){if (vs_sndaction=='stop') A.stop();

else{if (navigator.appName == 'Netscape') A.play();

else{if (document.M == null){

document.M = false; var m;

for(m in A) if (m == "ActiveMovie"){

document.M = true; break;}}

if (document.M) A.SelectionStart = 0;

if (document.M) A.play();}}}}

function vs_scrollwindow(pixel,target,speed,flags){

var py = ns ? pageYOffset : d.body.scrollTop;

var px = ns ? pageXOffset : d.body.scrollLeft;

if (pixel>0){

for (i=0; i<=pixel; i=i+speed){

window.scroll(px,py+i)

}

else{

for (i=0; i>=pixel; i=i-speed){

window.scroll(px,py+i)

}

//--></script>

</head>

<div id=“container“>

<div id=“logo“>

<div id="ebene1" style="position:absolute; left:0px; top:0px; width:200px; height:489px; z-index:0; overflow:visible;">

</div>

<div id=“navigation_links“>

</div>

<div id=“banner“>

</div>

<div id=“content“>

</div>

<div id=“bottom“>

<p class="text1">

<a href="mailto:name@domain.de" hidefocus="true">webmaster@company.com</a></p></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1">

</td><td colspan="3" width="30" rowspan="1"><p></p></td></tr></table>

</div>

</body>

</html>

Somit haben wir über die <div> Tags die genauen Abschnitte für die jeweiligen dynamischen Bereiche festgelegt. Zusätzlich wurden am Anfang die Definitionen eingefügt damit der Quellcode als HTML 4.0 (oder XHTML) konform erkannt wird. Den Bereich mit dem JavaScript haben wir im Moment nicht verändert, wir werden dies bei Bedarf später durchführen. Alle durchgestrichenen Zeilen wurden aus dem Quellcode gelöscht, da diese an anderer Stelle eingefügt wurden.

Anmerkung

Speichern Sie die so geänderte Datei jetzt unter dem vorherigen Namen „index.htm“ ab, nachdem Sie eine Sicherung der alten Datei vorgenommen haben. Diese Datei in einem späteren Kapitel als HTML Template Datei verwendet.

Es ist hier noch anzumerken, dass die Verwendung einer HTML Vorlagedatei mit so einfacher Struktur, aber so unübersichtlichen Quellcode hier nur als Beispiel angeführt wurde. Damit wird gezeigt, dass es möglich ist nur gewünschte Bereiche einer komplexen Webseite durch dynamische Bereiche zu Ersetzen.

In einem konkreten Projekt könnte man die HTML Quelldatei mit dieser Struktur nur mit dem notwendigen Tags die TYPO3 benötigt versehen und alle anderen Formatierungen unter TYPO3 oder in einer CSS Datei vornehmen.

Beispiel HTML Datei mit der gleichen Struktur aber ohne die alten Inhaltselemente:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

Logo

</div>

Navigation

</div>

Banner

</div>

Content

</div>

Bottom

</div>

</body>

</html>

2.3.2 HTML Vorlagedatei auf CSS Formatierung umstellen

In dem vorher angeführten HTML Quellcode werden zwar CSS Formatierungen, über die Datei „ersteschritte.css“ verwendet, aber nur mit grundlegenden Formatierungen. Alle Abstände oder Positionierungen werden durch eine Vielzahl von Tabellen vorgenommen. Die ist nicht gerade hilfreich für die einfache Lesbarkeit des Quellcode und entspricht auch keiner zeitgemäßen modernen HTML Code Erstellung. Bei modernen Webseiten sollte der Quellcode ohne diesen Ballast auskommen und die komplette Formatierung nur über CSS vorgenommen werden.

Wir wollen uns hier aber ersparen den ursprünglichen HTML Quellcode auf CSS Formatierung umzustellen, da wir alle Bereich sowieso auf dynamische Bereiche umstellen, die von TYPO3 gefüllt werden. Daher wird die CSS Formatierung, im späteren Verlauf dieser Anleitung, nur noch für die Bereich die mit <div> Tags festgelegt wurden, vorgenommen werden.

2.4 Struktur der Website festlegen

Nachdem wir nun den Inhalt und das Design der Website festgelegt haben können wir die Struktur der Seite festlegen. Die Struktur einer Website ergibt sich meist schon der geplanten Navigation. Daraus ergibt sich in unserem Beispiel folgende Struktur:

Öffentlicher Bereich Interner Bereich

Homepage à Historie

Termine

Fotos

Gästebuch

Kontakt

Mitgliederliste

Interne Terminkalender

Profilverwaltung

In der oben gezeigten Website Struktur wurde auch schon der interne Bereich angeführt der nur mit einen Login zugänglich sein soll. Der interne Bereich wurde dabei komplett vom öffentlichen Bereich getrennt. Dies muss aber nicht so sein, es könnten Seiten für den internen Bereich auch unter den öffentlichen Seite festgelegt werden.

2.5 Erstellung der Website in TYPO3

Wir sollten erste mit der Erstellung der Website unter TYPO3 anfangen wenn wir alle Informationen aus den vorherigen Kapiteln zusammengestellt haben.

Wir wissen jetzt welche Inhalte dargestellt werden sollen, wir haben das Design der Website festgelegt und eine HTML Vorlage erstellt und danach wurde die Struktur der Website festgelegt.

Damit haben wir nun alle Informationen die wir benötigen um mit der Einrichtung der Website unter TYPO3 zu beginnen.

Bei einer Website unter TYPO3 würde sich auch kein gravierendes Problem ergeben, wenn während der Planung etwas vergessen wurde. Änderungen oder Ergänzungen können auch relativ leicht im nach hinein vorgenommen werden. Grundsätzlich ist es aber von Vorteil

und erspart manche nachträgliche Arbeit, wenn die Planung gewissenhaft durchgeführt wurde.

3 Website einrichten

Man unterscheidet in TYPO3 zwischen dem so genannten „Backend“ und „Frontend“.

Das „Backend“ bietet die Administrative Oberfläche zur Verwaltung der kompletten TYPO3 Site und aller Komponenten. Das „Frontend“ ist die normale Ansicht im Browser oder die mit einem Login durchgeführte Ansicht der Website im Browser.

Die komplette Einrichtung der Website unter TYPO3 erfolgt im „Backend“. Dies ist eine Browser passierende Administrationskonsole für TYPO3.

Wenn Sie vor der Einrichtung von TYPO3 schon versucht haben die Website im Browser zu öffnen werden Sie folgende Meldung angezeigt bekommen:

Dies besagt nur das für diese Website in TYPO3 noch kein Template angelegt wurde.

Wir öffnen also das Backend mit folgenden Eintrag in der Adressleiste des Browsers:

http://www.ihredomain.com/typo3

Wenn Sie direkt am Server arbeiten können anstatt des Domainnamens auch „localhost“ verwenden z.B. http://localhost/typo3

Der angegebene Domainname „ihredomain.com“ ist von Ihrer Installation abhängig. Ersetzen Sie diesen Teil durch den Domainnamen Ihrer Installation. Es könnte auch sein das sich Ihre TYPO3 Installation in einer Sub-Domain (Unterverzeichnis) Ihrer Domäne befindet z.B. http://www.ihredomain.com/subdomain/typo3 heißen.

Es sollte das Login Fenster für das TYPO3 Backend erscheinen:

Wenn Sie Ihre Einstellungen für Backend Benutzer nach der Installation von TYPO3 noch nicht verändert haben können Sie den Login mit dem Usernamen „admin“ und dem Passwort „password“ durchführen.

Wenn Sie das Standardpasswort „password“ noch nicht geändert haben werden Sie jetzt aufgefordert dies durchzuführen.

Wählen Sie dazu aus der Navigation „User“-„Setup“ durchführen. Gehen Sie in der Seite nach unten und geben Sie im Feld „New password“ und „New password again“ Ihr neues Passwort ein.

Nach dem Login wird die Navigationsoberfläche vom TYPO3 Backend angezeigt:

Sie sehen hier im Inhaltbereich zu jedem Navigationselement zusätzliche Informationen.

Aber im Moment nur in englischer Sprache. Wenn Sie der englischen Sprache nicht so mächtig sind, ist das immer mit einen gewissen „aha“ Effekt verbunden. Daher stellen Sie zuerst einmal die Sprache im Backend auf Deutsch um.

3.1 Backend Sprache auf Deutsch umstellen

1. Wählen im Backend aus dem Navigation „Tools“ à „Ext Manager“

2. Wählen Sie aus bei Menü: „Import extensions from online repository“

3. Stellen Sie eine Internetverbindung her.

4. Geben Sie in das Feld „Look up“ den Key-Namen Ihrer Extension ein z.B. „csh_de“

5. Klicken Sie auf „Connect to online repository“

6. Die gefundene Extension wird (normalerweise) angezeigt und kann durch klicken auf das Install-Icon (roter, linksgerichteter Pfeil) installiert werden. Achten Sie auf die Angaben in der letzten Spalte, welche die Abhängigkeiten von anderen Extensions anzeigt werden.

Wenn ein Fehler, so wie unten angezeigt, beim laden der Extension auftritt, müssen Sie die nachfolgend beschriebene Alternativmethode anwenden, ansonsten gehen Sie gleich zu Punkt 7.

Ich hatte leider bei den Versuch die Extension vom Online Repository zu laden (TER) beim Erstellen dieser Anleitung folgende Meldung erhalten:

Ich weiß bis heute nicht was mir diese Fehlermeldung genau sagen sollte, nur bekam ich diese Fehlermeldung auch bei eine weiteren Versuch die Extension zu laden.

Also Umstieg auf die Alternative Methode. Aufruf der Website http://typo3.org
Anklicken vom Menüpunkt „Extension“. In das Suchfeld „csh_de“ eingeben.
Bei der angezeigten Extension „German language pack“ den Text anklicken. Auf der nächsten Seite dann auf den Text „Details“ anklicken.
In der Seite nach unten scrollen und den Text „Download compressed extension .T3X file“ anklicken und Download durchführen.

Nach dem Download wird anstatt den Extension Namen im Feld „Look up:“ einzugeben, die Datei der Extension die Sie vorher downgeladen haben ausgewählt:

Klicken Sie jetzt auf die Schaltfläche „Upload extension file“.

7. Im nächsten Fenster klicken Sie auf das Symbol mit dem Plus oder den Text um die Extension zu installieren:

8. Wechseln Sie jetzt im Menü auf „Loaded extensions“. Sie sollten folgende Anzeige sehen:

Anmerkung

Wenn sie bei „Look up:“ keinen Key-Namen einer Extension eingeben, wird eine Liste aller verfügbarer Extension vom Online-Repository angezeigt.

Damit die Sprache im Backen auf Deutsch umgestellt wird wählen wir jetzt „User“-„Setup“.

Bei „LANGUAGE:“ die Sprachen „German – [German]“ aus.

Gehen Sie in der Seite nach unten und klicken Sie auf die Schaltfläche „Save Configuration“:

Klicken Sie in der Navigation jetzt auf die Schaltflächen „Logout“ und führen Sie einen neuen Login durch oder aktualisieren Sie Ihren Browser mit der Taste <F5>.

Wenn alles geklappt hat, das Backend in deutscher Sprache dargestellt bekommen:

3.2 Root Seite der Website anlegen

1. Wir wählen in der Navigation „Web“ à „Seite“ aus (wenn in englisch „Page“).

2. Klicken Sie auf das Symbol der Weltkugel und klicken Sie auf „Neu“.

3. Sie bekommen jetzt auf der rechten Seite eine Auswahl der möglichen Datensätze angezeigt die Sie hier erstellen können. Wir wählen „Seite“ aus.

4. Entfernen Sie das Häkchen bei „Seite verstecken:“. Den Typ lassen Sie auf „Standard“ stehen. Geben Sie in das Feld „Seitentitel:“ als Websitenamen „ErsteSchritte“ ein.

5. Speichern Sie die Seite mit dem Symbol für „Speichern und Schließen“ ab.

6. Sie sollten jetzt in der Website Navigation folgendes angezeigt bekommen.

3.3 Template anlegen

3.3.1.1 Template erstellen über Kontextmenü von Seite

1. Klicken Sie jetzt auf das Symbol Ihrer vorher erstellten Seite und wählen „Neu“ aus.

2. Wählen Sie jetzt aus der Navigation „Template“.

3. Geben Sie unter „Template title:“ einen Title für das Template ein. Unter „Website title:“ können Sie der Website einen Titel zuweisen.

4. Speichern Sie die Seite mit dem Symbol für „Speichern und Schließen“ ab.

3.3.1.2 Template erstellen von der Navigation Web->Template

1. Wählen Sie aus der Navigation Web->Template aus.

2. Klicken Sie jetzt auf den Text der Seite „ErsteSchritte“ die Sie vorher erstellt haben.

3. Sie bekommen auf der rechten Seite jetzt folgende dargestellt.

Es wird mit „NO TEMPLATE“ angezeigt, dass Sie noch kein Template für diese Seite eingerichtet haben.

4. Klicken Sie auf die Schaltflächen „Create template for a new site“ damit ein neues Template für Ihre Website erstellt wird.

5. Bestätigen Sie die Sicherheitsabfrage ob Sie das Template wirklich erstellen wollen mit „OK“.

6. Wenn Sie noch keine andere Extension installiert haben wird Ihnen danach folgendes Fenster angezeigt.

Konstanten („constants“) sind nur dann vorhanden wenn Sie schon andere Extensions installiert haben (z.B. die csh_de Extension). Die Meldung braucht Sie also nicht zu beunruhigen.

7. Entweder Sieh sehen jetzt schon die unten angezeigte Maske oder Sie klicken jetzt auf den Text „NEW SITE“ und Sie gelangen direkt in die Eingabemaske für das Template.

8. Klicken Sie auf den Bleistift beim Feld „Title:“ und geben Sie einen Namen für das Template ein z.B. „Template ErsteSchritte“. Im Feld „Sitetitle:“ können für die Website einen Namen vergeben.

9. Das Feld „Constants“ ist leer. Sie haben Sie unterhalb, die Möglichkeit in das Feld „Setup“ zu wechseln. Klicken Sie auf den Bleistift vor der Zeile „Setup“ damit der Inhalt vom Feld „Setup“ angezeigt wird.

10. Sie sehen jetzt den Standardinhalt vom Feld „Setup“ nachdem Sie ein neues Template erstellt haben.

#Default PAGE object

page = PAGE

page.10 = TEXT

page.10.value = HELLO WORLD!

Schließen Sie das Fenster wieder mit „Cancel“.

11. Sie können jetzt versuchen die Website im Browser mit dem Domainnamen (oder wenn direkt am Server mit „localhost“) zu öffnen. Sie geben dazu in die Adressleiste des Browser z.B. http://www.ihredomain.com/ ein und sollten folgendes angezeigt bekommen.

12. Wenn Sie den obigen Text sehen ist mit Ihrer Installation soweit alles Ok.

3.4 Subparts und Marker direkt Füllen

Sie könne die Subparts und Marker eines HTML Templates auch manuell direkt füllen.

Das folgende Script kann dazu im Setup Bereich des Root Templates eingetragen werden.

Beispiel zum füllen eines Subparts:

page = PAGE

page.10 = TEMPLATE

page.10.template = FILE

page.10.template.file = fileadmin/index.htm

page.10.workOnSubpart = DOCUMENT_BODY

page.10.subpart.logo.10 = TEXT

page.10.subpart.log0.10.value = Das ist ein Subpart Text

Beispiel zum füllen eines Marker:

page = PAGE

page.10 = TEMPLATE

page.10.template = FILE

page.10.template.file = fileadmin/index.htm

page.10.workOnSubpart = DOCUMENT_BODY

page.10.marks.logo.10 = TEXT

page.10.marks.logo.10.value = Das ist ein Subpart Text

3.5 Extension „Automake Template“ installieren

Wir wollen für die Einbindung unserer HTML Vorlagedatei die Extension „Automake Template“ verwenden. Die HTML Vorlagedatei wurde auch schon für die Verwendung mit der Extension vorbereitet. Wir installieren die Extension „Automake Template“ folgenderweise:

1. Wählen im Backend aus dem Menü „Ext Manager“

2. Wählen Sie aus bei Menü: „Import extensions from online repository“

3. Stellen Sie eine Internetverbindung her.

4. Geben Sie in das Feld „Look up“ den Key-Namen Ihrer Extension ein z.B. „automaketemplate“

5. Klicken Sie auf „Connect to online repository“

6. Die gefundene Extension wird (normalerweise) angezeigt und kann durch klicken auf das Install-Icon (roter, linksgerichteter Pfeil) installiert werden. Achten Sie auf die Angaben in der letzten Spalte, welche die Abhängigkeiten von anderen Extensions anzeigt.

Sollten Sie eine „Warning:“ angezeigt bekommen sind Problem bei der Verbindung zu Online Repository aufgetreten. Wenn die Extension angezeigt wird können Sie bei Punkt 7. weitermachen.

Also wieder Umstieg auf die Alternative Methode. Aufruf der Website http://typo3.org
Anklicken vom Menüpunkt „Extension“. In das Suchfeld „automaketemplate“ eingeben.
Bei der angezeigten Extension „Template Auto-parser“ den Text anklicken. Auf der nächsten Seite dann auf den Text „Details“ anklicken.
In der Seite nach unten scrollen und den Text „Download compressed extension .T3X file“ anklicken und Download durchführen.

Nach dem Download wird anstatt den Extension Namen im Feld „Look up:“ einzugeben, die Datei der Extension die Sie vorher downgeladen haben ausgewählt:

Klicken Sie jetzt auf die Schaltfläche „Upload extension file“.

7. Im nächsten Fenster klicken Sie auf das Symbol mit dem Plus oder den Text um die Extension zu installieren:

8. Klicken Sie im nächsten Fenster auf die Schaltflächen „Make updates“.

9. Wechseln Sie jetzt im Menü auf „Loaded extensions“. Sie sollten folgende Anzeige sehen:

3.6 HTML Vorlagedatei als Template einbinden

Wir binden jetzt unsere HTML Vorlagedatei in das TYPO3 als Vorlagedatei für das TYPO3 Template ein.

Wir müssen jetzt alle Dateien die von der HTML Vorlage verwendet werden in ein spezielles Verzeichnis unserer TYPO3 Installation kopieren.

Wir kopieren unsere HTML Vorlagedatei(n) und eventuell vorhandene CSS Datei(en) in das Verzeichnis „fileadmin“ und die CSS Dateien in den Unterordner „fileadmin/styles“. Wenn das Verzeichnis „styles“ nicht vorhanden ist, muss dieses angelegt werden.

Wenn Sie die Dateien nicht wie unten angeführt, sondern direkt am Server kopieren, achten Sie darauf, dass diese die richtige Berechtigung erhalten.

Wenn wir keinen direkten Zugriff auf den Server haben kopieren wir die Dateien über das TYPO3 Backend auf den Server:

1. Wählen Sie aus der Navigation „Dateiliste“.

2. Klicken Sie im Website Navigationsfenster auf das Plus Symbol das vor dem Verzeichnisnamen angezeigt wird.

3. Wenn Sie noch keine Verzeichnisse angelegt haben wird Ihnen folgendes angezeigt:

4. Um ein neues Verzeichnis anzulegen klicken Sie auf das Symbol für Verzeichnis.
Wählen Sie aus dem Pop-Up Menü „Neu“ aus.

5. Geben Sie in das leere Eingabefeld den Namen für Ihr neues Verzeichnis z.B. „styles“ ein. Klicken Sie dann auf die Schaltfläche „Ordner anlegen“.
Kontrollieren Sie die Existenz des neuen Ordners im Website Navigationsfenster.

6. Durch klicken auf das Symbol des Verzeichnisses (oder Ordners) und Auswahl des Menüpunktes „Datei-Download“ können wir die benötigten Dateien auf den Server hochladen.

7. Wählen Sie die Anzahl der Dateien aus. Klicken Sie dann in jeder Zeile auf die Schaltflächen „Durchsuchen“ um die Datei auszuwählen für die ein Upload durchgeführt werden soll.

Zusätzlich benötigen wir auch alle Grafiken und Bilder die in unsere HTML Vorlagedatei verwendet werden. Diese kopieren auf die gleiche Art und Weise in das Verzeichnis „fileadmin/images“.

Anmerkung

Wenn sie die Dateien nicht über die TYPO3 Verwaltung sondern über einen FTP Client oder direkt am Server kopieren. Müssen Sie nach dem kopieren Sicherstellen das die Dateien die korrekten Berechtigung für TYPO3 bekommen haben. Ansonsten könnten Sie ungewollte Fehler durch Zugriffsrechte auf die Dateien erzeugen.

3.6.1 TypoScript im Setup Bereich für Extension „Automake Template“

TypoScript ist die TYPO3 eigene Script Sprache mit der Definitionen und Formatierungen unter TYPO3 vorgenommen werden.

Damit das unten angeführte Script ohne Änderung funktioniert überprüfen Sie folgende Punkt:

§ Überprüfen Sie, dass sich Ihre HTML Template Datei im Verzeichnis „fileadmin“ mit dem Namen „index.htm“ angelegt wurde.

§ Überprüfen Sie ob Ihre CSS Datei „ersteschritte.css“, die im HTML Template angegeben wurde, im Verzeichnis „styles“ angelegt ist.

1. Klicken Sie in der Navigation auf „Web“ à „Template“.

2. Wählen Sie die Root Seite Ihrer Website z.B. „ErsteSchritte“ aus.

3. Klicken Sie auf der rechten Seite auf den Bleistift vor der Zeile „Setup“.

4. Sie bekommen jetzt den Inhalt des Feldes „Setup“ angezeigt. Wir ersetzen den Inhalt durch folgendes TypoScript:

# Konfiguration für den „Template Auto-parser“

plugin.tx_automaketemplate_pi1 {

content = FILE

# Dateiname der HTML Vorlagedatei für „Template Auto-parser“

content.file = fileadmin/index.htm

elements {
# Erzeuge einen Subpart mit den Namen ###HEAD###

HEAD.all = 1

HEAD.all.subpartMarker = DOCUMENT_HEADER

# Entfernen der Tags <titel> aus dem Dokument

HEAD.rmTagSections = title

# Erzeuge einen Subpart mit Namen ###BODY###

BODY.all = 1

BODY.all.subpartMarker = DOCUMENT_BODY
# Alle gefundenen <div> Tags werden auf Subparts umgesetzt.

DIV.all = 1

}

# Festlegung der relativen Pfade für den „Template Auto-parser“

relPathPrefix = fileadmin/

relPathPrefix.IMG = fileadmin/

relPathPrefix.LINK = fileadmin/styles/

}

# Erzeugen eines „temp“ Objektes für den Header der HTML Dokumentes

temp.headTemplate = TEMPLATE

temp.headTemplate {

template =< plugin.tx_automaketemplate_pi1

workOnSubpart = DOCUMENT_HEADER

}

# Erzeugen eines “temp” Objektes für den BODY des HTML Dokumentes

# Übergabe der Inhaltselemente an die Subparts des Dokumentes

temp.mainTemplate = TEMPLATE

temp.mainTemplate {

template =< plugin.tx_automaketemplate_pi1

workOnSubpart = DOCUMENT_BODY

}

# Erstellung des PAGE Objektes und Übergabe der voher erstellten „temp“ Objekte

# des Dokumentes „temp.mainTemplate“ und „temp.headTemplate“

page = PAGE

page.10 < temp.mainTemplate

page.headerData.10 < temp.headTemplate

Klicken Sie nach dem Einfügen auf die Schaltfläche „Update“.

In den oben angezeigten TypoScript wurden Absichtlich noch keine Inhalte an die Subparts übergeben. Dies wird in den nächsten Kapitel(n) ausführlich beschrieben.

3.6.2 Template Auto-parser - Ergebnis analysieren

3.6.2.1 Fehler schwarzer Hintergrund der Webseite verschwunden

Sehen Sie sich die Seite mit dem Browser an. Geben Sie in die Adressleiste des Browsers „http://www.ihredomain.com“ ein, oder wenn Sie direkt am Server arbeiten „http://localhost“.

Der Name der Domain „ihredomain.com“ ist wieder durch den Domainnamen zu ersetzen den Ihre Installation verwendet.

Beim ersten Aufruf im Browser wurde bei mir folgendes angezeigt:

Aus irgendeinem Grund war der schwarze Hintergrund verloren gegangen. Da dies im Quellcode mit einer Hintergrundgrafik festgelegt wurde, war meine erste Vermutung, dass etwas mit dem Pfad zu dieser Hintergrundgrafik nicht stimmt.

Es wurde der erzeugten Quellcodes im Browser mit „Ansicht“ à „Quelltext“ im Internet Explorer oder mit „Ansicht“ à „Seitenquelltext anzeigen“ im Firefox kontrolliert. Eine Suche nach den Text „vs_autohintergrund_1.jpg“ brachte kein Ergebnis. Ich stellte fest, dass dieser Text nicht mehr vorhanden ist.

Der komplette Abschnitt aus dem <head> bis </head> Bereich war durch die Extension „Template Auto-parser“ entfernt worden (siehe Quellcode der Website) und wurde durch eigenen Code ersetzt. Damit sind auch alle unsere Meta Tag Definitionen verschwunden, da diese innerhalb dieses Bereiches liegen. Auf die Einrichtung der Meta Tags unter TYPO3 gehen wir später ein.

Wichtig ist hier noch, dass der Tag <title> mit dem Seitennamen „ErsteSchritte“ ersetzt wurde, d.h. der Titel der Seite wird immer dem Seitenamen angepasst.

Quellcode der Website:

<!DOCTYPE html

PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<!--

This website is brought to you by TYPO3 - get.content.right

TYPO3 is a free open source Content Management Framework created by Kasper Skaarhoj and licensed under GNU/GPL.

Information and contribution at http://www.typo3.com

-->

<title>ErsteSchritte</title>

/*<![CDATA[*/

<!--

browserName = navigator.appName;

browserVer = parseInt(navigator.appVersion);

var msie4 = (browserName == "Microsoft Internet Explorer" && browserVer >= 4);

if ((browserName == "Netscape" && browserVer >= 3) || msie4 || browserName=="Konqueror") {version = "n3";} else {version = "n2";}

// Blurring links:

function blurLink(theObject) { //

if (msie4) {theObject.blur();}

}

// -->

/*]]>*/

</script>

</head>

<div id="ebene1" style="position:absolute; left:0px; top:0px; width:200px; height:489px; z-index:0; overflow:visible;">

…

Was war passiert? Es muss in Fehler bei der Umsetzung des HEAD Bereiches passiert sein den es fehlt der Block für die CSS Datei. Nach Durchsicht des TypoScripts im Setup Bereich für den HEAD Bereich wurde ein Schreibfehler gefunden:

…

HEAD.all = 1

HEAD.all.subpartMarker = DOCUMENT_HEADER

# Entfernen der Tags <titel> aus dem Dokument

HEAD.rmTagSections = title

…

Wichtig! Immer TYPO3 Cache Löschen und Browser Aktualisieren

Wenn Sie Änderungen an der vorhandenen HTML Vorlagedatei oder im TypoScript vornehmen. Löschen Sie immer den TYPO3 Frontend Cache. Sie können in der TYPO3 Navigationsleiste unter „Admin Funktion“ den Menüpunkt FE-Cache löschen auswählen:

Aktualisieren Sie auch nach einer Änderung Ihre Ansicht im Browser mit <F5>.

Ansonsten könnte es passieren, dass Sie die alte Seite aus dem TYPO3 oder Browser Cache angezeigt bekommen.

3.6.2.2 Fehler die angezeigte Texte sind nicht richtig formatiert

Beim nächsten Aufruf im Browser wurde folgendes angezeigt:

Wie wir sehen stimmt fast alles mit der Vorlage überein, nur die Texte „Welcom to..“, „zuletzt geändert…“ und „Copyright…“ haben in der HTML Vorlag anders ausgesehen. Sieht sehr nach einem CSS Fehler aus.

Dies wurde durch einen Fehler bei Eingabe des TypoScript im Setup Bereich ausgelöst. Ich hatten bei „relPathPrefix.LINK =“ anstatt „fileadmin/styles/“ mit einen Abschließenden Schrägstrich „/“, nur den Pfad mit „fileadmin/styles“ eingegeben und damit konnte die CSS Datei „ersteschritte.css“ nicht gefunden werden.

Nicht vergessen den TYPO3 Cache zu löschen und die Ansicht im Browser mit <F5> aktualisieren.

3.6.2.3 Fehler dynamischen Bereiche falsch verschachtelt

Nachdem wir diese Fehler behoben haben sehen wir folgendes im Browser:

Dies entspricht genau unserer HTM Vorlagedatei die wir verwendet haben.

Nach einer neuerlichen Durchsicht des Quellcode wurde eine komplett falsche Verschachtelung der <div> Elemente und somit auch der ersetzten Subparts festgestellt. Außerdem wird ein Subpart ###ebene1### angezeigt der nie festgelegt wurde:

</head>

…

<div id="ebene1" style="position:absolute; left:0px; top:0px; width:200px; height:489px; z-index:0; overflow:visible;">

<img src="fileadmin/images/erste_schritte.jpg" name="vs_bild128" border="0" width="150" height="110" alt=""></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="2"><p></p></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

</div>

<img src="fileadmin/images/vs_bild_3_2.jpg" name="home" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1"><p></p></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

<img src="fileadmin/images/vs_bild_19_25.jpg" name="historie" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1"><p></p></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

<img src="fileadmin/images/vs_bild_4_4.jpg" name="termine" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1"><p></p></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

<img src="fileadmin/images/vs_bild_5_6.jpg" name="fotos" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1"><p></p></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

<img src="fileadmin/images/vs_bild_20_27.jpg" name="gaestebuch" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1"><p></p></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

<img src="fileadmin/images/vs_bild_60_36.jpg" name="kontakt" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr></table>

</div>

</div>

…

Nach der obigen Definition würde sich der Subpart Bereich ###logo### über die komplette Navigation erstrecken und somit auch diese bei einer Subpart-Zuweisung ersetzten. Auch der Subpart Bereich der ###navigation_link### entspricht nicht dem gewünschten Bereich.

Was war hier passiert? In der HTML Vorlagedatei befand sich schon ein <div> Tag. Mit diesem wurde vom HTML Designer Programm die Ebene definiert:

Die Extension „Template Auto-parser“ erkannte (gewissenhaft) auch diese Definition und ermittelte dadurch automatisch, die zugehörigen, schließenden </div> Tags. Dies führte zu der ungewollten Verschachtelung der vorhanden <div> Tags.

Damit dies verhindert wird, müssen in der HTML Vorlagedatei die einzelne <div> Tags für die dynamischen Bereiche umgestellt werden.

Sie können dies über die Navigation Datei-> Dateiliste und Auswahl vom Verzeichnis „fileadmin/“ durchführen. Klicken Sie auf das Symbol bei der Seite „index.htm“ und wählen Sie „Bearbeiten“ aus:

Ändern Sie folgende Abschnitte:

…

</head>

<div id=“container“>

~~<div id=“logo“>~~

<div id="ebene1" style="position:absolute; left:0px; top:0px; width:200px; height:489px; z-index:0; overflow:visible;">

<div id=“logo“>

</div>

<div id=“navigation_links“>

~~</div>~~

…

Nicht vergessen den TYPO3 Cache zu löschen und die Ansicht im Browser mit <F5> aktualisieren.

3.6.2.4 Fehler beim „Mouse-Over“ werden keine Grafiken angezeigt

Es wurde noch ein weiterer Fehler festgestellt. Wenn man sich mit der Maus über die Navigationstexte bewegt wird, erscheint bei jedem Menüpunkt ein weißer Rahmen mit einen roten „x“:

Dies deutet darauf hin, dass die „onmouseover“ Bilder der Navigation nicht gefunden werden.

Im Quellcode sieht man, dass die Pfade bei „<img src=“, durch den TypoScript Eintrag „relPathPrefix = fileadmin/“, auf den Verzeichnisnamen „fileadmin/images/bildname.jpg“ umgestellt wurden. Bei den „onmousover“ oder „onmouseout“ Ereignissen, die durch JavaScript ausgeführt werden, sind in den Pfadangaben aber immer noch „images/bildname.jpg“ eingetragen. Unter TYPO3 muss aber der relative Name um das Verzeichnis „fileadmin“ ergänzt werden.

Quellcode ohne Änderung der Pfade:

<img src="fileadmin/images/vs_bild_3_2.jpg" name="home" border="0" width="150" height="30" alt=""></a></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1"><p></p></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="3">

Damit die komplette Funktionalität unter TYPO3, so wie der originalen HTML Vorlagedatei funktioniert, wird in dem JavaScript für den Bildwechsel die Pfadangaben „fileadmin“ eingefügt. Damit sparen wir uns ein komplettes Umschreiben alle Pfade bei den einzelnen Bildwechsel.

Wir Bearbeiten in der HTML Template Datei „index.htm“ folgenden Abschnitt:

…

var ns = (navigator.appName.indexOf("Netscape") != -1);

function vs_change_pic(picname,url){document.images[picname].src = 'fileadmin/'+url;}

function vs_change_pic_frame(picname,url,framename){parent.frames[framename].document.images[picname].src = url;}

…

Nach der Änderung wieder TYPO3 Cache löschen und Seite im Browser aktualisieren.

Nach dieser Änderung sollte der Bildwechsel auch unter TYPO3 einwandfrei funktionieren.

Nur ergänzend ist hier noch die Änderung der JavaScript Funktion angeführt, wenn die Seite mit Macromedia Dreamweaver erstellt wurde:

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=’fileadmin/’+a[i+2];}

}

3.6.2.5 Fehler Subparts Bereiche erhalten falsche Namen (mit Anführungszeichen)

Die Namen in den Subparts Bereichen werden falsch erzeugt. Der Name für den Subpart „logo“ sollte z.B. ###logo### lauten. In dem vom TYPO3 erzeugten Quellcode heißt der Name aber ###“logo“###. Es wird vor und nach dem Namen ein Anführungszeichen eingefügt. Der HTML Quellcode der Vorlagendatei scheint richtig zu sein, nur wurde als Schriftart „Lucida Sans Unicode“ (mit dem Windows Editor) verwendet.

Diese Formatierung mit einem Unicode Zeichensatz führte dazu, dass die Anführungszeichen nicht als solche, sondern als Textzeichen unter TYPO3 interpretiert wurden.

Zur Behebung des Fehlers den komplette Quellcode markieren und die Schriftart auf „Times New Roman“ (unter Windows) umstellen oder eine andere nicht Unicode Schriftart verwenden. Eventuell müssen Sie jedes Anführungszeichen neu eingeben damit der falsche Zeichencode entfernt wird (bei mir war es so).

Nach der Änderung wieder TYPO3 Cache löschen und Seite im Browser aktualisieren.

3.6.2.6 Inhalte an die einzelnen Subparts Bereiche übergeben

Was hat uns die Einbindung der HTML Vorlagedatei in TYPO3 nun eigentlich gebracht. Die Seite sieht doch gleich aus, wie wenn man die Seite ohne TYPO3 auf einen Webserver anzeigen würde.

Um dies zu Ergründen müssen wir uns wieder den von TYPO3 erzeugten Quellcode der HTML Seite ansehen:

<!DOCTYPE html

PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

…

</head>

<div id="ebene1" style="position:absolute; left:0px; top:0px; width:200px; height:489px; z-index:0; overflow:visible;">

</div>

</div>

<img src="fileadmin/images/erste_schritte_banner.gif" name="vs_bild131" border="0" width="600" height="40" alt=""></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="60" width="600" rowspan="10"><p></p></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="14" width="140" rowspan="40"><p></p></td><td colspan="31" width="310" rowspan="15" align="center" valign="top">

</div>

</div>

<p class="text1">

<a href="mailto:name@domain.de" hidefocus="true">webmaster@company.com</a></p></td></tr><tr><td height="10"></td></tr><tr><td height="10"></td><td colspan="15" width="150" rowspan="1">

</td><td colspan="3" width="30" rowspan="1"><p></p></td></tr></table>

</div>

</div>

</body>

</html>

Wir sehen, dass unsere dynamischen Bereiche eindeutig durch Subparts abgegrenzt werden.

Es gibt zwar in dieser Vorlage noch immer HTML Code wie <td> Tags, die eine uneingeschränkte Formatierung über CSS behindern. Wir werden aber im weiteren Verlauf dieser Anleitung auch diese Codeabschnitte entfernen.

Wir fügen in unser vorhandenes TypoScript in Setup Bereich des Templates folgendes ein:

…

# Erzeugen eines “temp” Objektes für den BODY des HTML Dokumentes

# Übergabe der Inhaltselemente an die Subparts des Dokumentes

temp.mainTemplate = TEMPLATE

temp.mainTemplate {

template =< plugin.tx_automaketemplate_pi1

workOnSubpart = DOCUMENT_BODY

# Ersetze den Subpart ###logo### durch das Vereinslogo

subparts.logo = IMAGE

subparts.logo.file = fileadmin/images/erste_schritte.jpg

# Ersetze den Subpart ###navigation_links### durch ein dynamisches Menü: „temp.menu“

subparts.navigation_links < temp.menu

# Ersetze den Subpart ###banner### durch das Website Banner

subparts.banner = IMAGE

subparts.banner.file = fileadmin/images/erste_schritte_banner.gif

# Ersetze den Subpart ###content### den Inhaltsbereich “NORMAL”

subparts.content < styles.content.get

# Ersetze den Subpart ###bottom### durch das Objekt “temp.bottom”

subparts.bottom < temp.bottom

}

…

Sie sollten nach dieser Änderung folgendes im Browser sehen:

Wir sehen, dass durch die Übergabe der Subparts „logo“ und „banner“ das Design der Seite verändert wurde. Dies ist logisch weil für beide Elemente noch keine CSS Formatierung vorhanden ist. Des Weiteren beeinflusst die Übergabe dieser Elemente auch den noch vorhandenen HTML Code der nur auf Tabellen aufgebaut ist.

Es fällt hier auch auf, dass obwohl eine Übergabe der Subparts „navigation_links“, „content“ und „bottom“ definiert wurde, immer noch der ursprüngliche Inhalt der HTML Vorlage angezeigt wird. Es wurde zwar eine Übergabe definiert nur gibt es übergeben Objekte „temp.menu“, „styles.content.get“ und „temp.bottom“ noch nicht, daher werden diese auch nicht ersetzt.

3.6.2.7 CSS Formatierung der Subparts „banner“, „navigation_links“ und „content“

Wir fügen folgende CSS Formatierungen am Ende der Datei „ersteschritte.css“ hinzu:

#banner {

padding-left: 155px;

}

#navigation_links {

padding-left: 20px;

}

#content {

padding-left: 155px;

}

Durch diese Formatierung sollte die „navigation_links“ richtig unter dem „logo“ ausgerichtet werden. Der „banner“ wird vom linken Rand eingerückt und sollte wieder in der ganzen Breite sichtbar sein. Der „content“ wird damit so wie der Banner vom linken Rand eingerückt.

Die Anzeige des „bottom“ wurde komplett verschoben und kann erste Formatiert werden wenn alle beeinflussenden Tabellen entfernt wurden.

Dadurch müsste sich die Ansicht im Browser folgenderweise ändern:

Um eine Analyse der Rahmen durchzuführen können Sie eine kleine Änderung an Ihrer CSS Datei „ersteschritte.css“ vornehmen:

#logo {

border: 1px solid #ffffff;

}

#banner {

padding-left: 155px;

border: 1px solid #ffffff;

}

#navigation_links {

padding-left: 20px;

border: 1px solid #ffffff;

}

#content {

padding-left: 155px;

border: 1px solid #ffffff;

}

#bottom {

border: 1px solid #ffffff;

}

Die Anzeige im Browser mir Rahmen würde wie folgt aussehen:

3.7 Seitenstruktur anlegen

Wir beginnen nun die Seiten Struktur die wir im Kapitel „Struktur der Website festlegen“ ermittelt haben in TYPO3 anzulegen.

3.8 Öffentliche Seiten anlegen

Da wir gleich mehrere Seiten hintereinander anlegen wollen. können wir aus der Navigation „Web“ à „Funktionen“ und danach in der Website Navigation unsere Root Seite „ErsteSchritte“ auswählen. Dieser Menüpunkt erlaubt es mehrere Seiten auf einmal zu erstellen.

Klicken Sie nach Eingabe der Seitennamen auf „Seiten anlegen“.

In der Website Navigation sollte danach folgendes angezeigt werden:

3.8.1 Seiten für Internen Bereich

3.8.1.1 Seitenstruktur für internen Bereich anlegen

1. Wir erstellen zuerst eine Seite unterhalb von „Kontakt“ mit dem Typ „Abstand“ und den Namen (Pflichtfeld) geben Sie die Tastenkombination <Alt>+255 ein.
Im Setup Bereich des Templates wo das Menü erstellt wird muss jetzt noch zusätzlich dieser Seitentyp aktiviert werden:

…

intensity = 80

}

SPC = .NO

SPC = 1

}

…

2. Unterhalb von Trenner erstellen wir eine Seite mit dem Typ „Standard“ und dem Namen „Intern“.

3. Jetzt erstellen wir noch innerhalb der Seite „Intern“ (nächste Ebene) zwei neue Seiten mit dem Typ „Standard“ und den Namen „Mitgliederliste“ und „Kalender“.

4. Öffnen Sie jetzt die vorher erstellte Seite „Intern“ mit „Seitentitel bearbeiten“. Wählen Sie unter „Allgemeine Optionen:“ beim Feld „Zugriff“ Ihre vorher erstellte Benutzergruppe „Mitglieder“ aus. Aktivieren Sie die Option „Inklusive Unterseiten“, damit der Login auch für alle Unterseiten dieser Seite gilt.

5. Erstellen Sie eine neue Seite mit dem Seitentyp „Standard“ und dem Namen „Login“. Das Inhaltsobjekt für die Loginbox erstellen wir später.

3.8.1.2 Website Benutzer anlegen

1. Unterhalb der Seite „Intern“ (gleiche Ebene) erstellen wir eine neue Seite mit dem Typ „SysOrdner“ und dem Namen „Benutzer“. In diese Seite werden die späteren Website Benutzer, die einen Login erhalten sollen, angelegt.

2. Klicken Sie auf dem eben erstellten SysOrdner „Benutzer“ auf „Neu“. Wählen Sie als Objekt „Website Benutzergruppe“ aus. Geben Sie als „Gruppennamen“ den Namen „Mitglieder“ ein.

3. Klicken auf „Neu“ beim SysOrdner „Benutzer“. Wählen Sie jetzt als Objekt „Website Benutzer“ aus. Geben Sie in das Feld „Benutzernamen“ den gewünschten Loginnamen für den Benutzer ein. In das „Passwort“ Feld das gewünschte Passwort. Füllen Sie danach auch alle anderen Felder für diesen Benutzer aus. Speichern Sie den Datensatz ab.

4. Führen Sie den Punkt 6. für alle Benutzer durch denen Sie Zugang zu den internen Bereichen zu Verfügung stellen wollen.

3.8.1.3 Installation der New Login Box (newloginbox)

1. Installation der Extension „New Login Box“ (newloginbox). die genaue Installation von Extension siehe in den vorherigen Kapiteln.

2. Klicken Sie auf die vorher erstellte Seite „Login“ und wählen Sie „Seitentitel bearbeiten“ aus. Wählen Sie beim Feld „Allgemeine Datensatzsammlung“ Ihren vorher erstellen SysOrdner „Benutzer“ aus.

3. Klicken Sie auf die vorher erstellte Seite „Login“ und wählen Sie „Seiteninhalt erstellen“ aus. Wählen Sie als Objekt „Besseres Anmeldformular“ aus.

4. Aktivieren Sie „Passwort vergessen? Link anzeigen“.

5. Klicken Sie auf den Reiter „Willkommen“ geben Sie eine „Überschrift“ und wenn gewünscht eine „Nachricht“ für die Begrüßung auf den internen Seiten ein.

6. Klicken Sie auf den Reiter „Erfolgreich angemeldet“ und geben Sie eine „Überschrift“ und eine „Nachricht“ für eine erfolgreiche Anmeldung ein.

7. Klicken Sie auf den Reiter „Anmeldefehler“ und geben Sie eine „Überschrift“ und eine „Nachricht“ für einen Fehler bei der Anmeldung ein.

3.9 Navigation für Seiten erstellen

Wir wollen die vorhanden Navigation aus der HTML Template Datei durch ein dynamische TYPO3 Menü ersetzen, das automatisch aus der Seitenstruktur generiert wird. Die einzelnen Menüpunkte sollen so, wie in der originalen Vorlage, als Grafikschaltflächen mit einen „Mouse-Over“ Effekt realisiert werden.

Zur Vorbereitung müssen wir auf noch die Fontvorlage „blippok.ttf“ in das Verzeichnis „styles“ kopieren. Es kann natürlich auch ein anderer Font verwendet werden in den unten angeführten Script ist dann nur der Name zu ändern.

Wir fügen folgendes TypoScript im Setup Bereich des Templates ein. Achten Sie darauf, dass Sie dies vor dem Objekten „temp.main.template“ durchführen, indem die Übergabe der Subparts für den Body Bereich erfolgt:

…

temp.menu = HMENU

temp.menu.1 = GMENU

temp.menu.1.noBlur = 1

temp.menu.1 {

NO {

wrap = | <br>

XY = 150,40

backColor = black

10 = TEXT

10.text.field = title

10.offset = 20,35

10.fontFile = fileadmin/styles/blippok.ttf

10.fontSize = 16

10.fontColor = #DD0000

10.align = center

10.shadow {

offset = 1,1

color = yellow

blur = 90

intensity = 80

}

RO < .NO

RO = 1

RO.10.fontColor = #008000

RO.10.shadow {

offset = 1,1

color = white

blur = 90

intensity = 80

}

CUR < .NO

CUR = 1

CUR.noLink = 1

CUR.10.fontColor = #666666

CUR.10.shadow {

offset = 1,1

color = #A9A9A9

blur = 90

intensity = 80

}

…

# Erzeugen eines “temp” Objektes für den BODY des HTML Dokumentes

# Übergabe der Inhaltselemente an die Subparts des Dokumentes

temp.mainTemplate = TEMPLATE

temp.mainTemplate {

template =< plugin.tx_automaketemplate_pi1

workOnSubpart = DOCUMENT_BODY

….

Danach müsste das Navigationsmenü mit Grafikschaltflächen angezeigt werden.

Wenn Sie das Menü in der Position Verändern wollen müssen Sie die Werte „XY=“ anpassen.

3.10 Seite auf moderne CSS Seitenformatierung umstellen

Als ersten befreien wir unsere HTML Vorlagedatei aus dem Ballast den das HTML Designer Programm erzeugt hat. Wir lassen nur mehr die Komponenten stehen die wir für Seite unter TYPO3 benötigen. Dem Verweise auf die CSS Datei ändern wir auf den Namen „styles.css“:

<!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">

<head>

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

<title>Erste Schritte Homepage</title>

<META HTTP-EQUIV="Language" CONTENT="de">

<META NAME="author" CONTENT="Erste Schritte">

<META NAME=”publisher” CONTENT=”Verein Erste Schritte”

<META NAME="keywords" CONTENT="Erste Schritte, TYPO3, Automake Template">

<META NAME="description" CONTENT="Willkommen auf der Homepage von Erste Schritte ... ">

<META NAME="page-topic" CONTENT="Verein, Infos">

<META NAME="audience" CONTENT="Fans, Mitglieder">

<META NAME="page-type" CONTENT="Vereinsseite">

<META NAME="robots" CONTENT="INDEX,FOLLOW">

<META NAME="revisit" content="5 days">

<link rel="SHORTCUT ICON" href="icon.ico">

<link href="styles/ersteschritte.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="ersteschritte.css">

</head>

<body >

<div id="all">

<div id="container">

<div id="logo">

Logo

</div>

<div id="content">

Content

</div>

<div id="banner">

Banner

</div>

<div id="navigation_links">

Navigation

</div>

<div id="bottom">

<p class="text1">zuletzt geändert 05.03.2006<br />

<a href="mailto:name@domain.de" hidefocus="true">webmaster@company.com</a><br />

</div>

</body>

</html>

Wir legen eine neue Style Datei mit dem Namen „styles.css“ an. In dieser Style Datei haben wird auch Rahmen für jedes Objekt zu leichteren Formatierung eingefügt:

body {

color:#39AEFF;

margin-left:0px;

margin-right:0px;

margin-top:0px;

margin-bottom:0px;

background-color:#000000;

background-image: url(images/austria/vs_autohintergrund_1.jpg);}

/* CSS Linkformate */

a:link {

text-decoration:none;

color:#00FF00;

}

a:visited {

text-decoration:none;

color:#00FF00;

}

a:active {

text-decoration:none;

color:#00FF00;

}

a:hover {

text-decoration:none;

color:#00FF00;

}

a:focus {

text-decoration:none;

color:#00FF00;

}

#container {

}

#logo {

float: left;

border: 1px solid #ffffff;

}

#banner {

float: left;

margin-top: 10px;

margin-left: 20px

width: 550px;

border: 1px solid #ffffff;

}

#content {

float: left;

position: absolute;

margin-top: 70px;

width: 600px;

border: 1px solid #ffffff;

}

#navigation_links {

margin-top: 122px;

padding-bottom: 20px;

width: 182px;

border: 1px solid #ffffff;

}

#bottom {

float: left;

padding-left: 25px;

width: 182px;

border: 1px solid #ffffff;

}

Nachdem wir die Positionierungen der einzelnen Objekte über die Style Datei durchgeführt und kontrolliert haben können wird die Rahmen aus der CSS Datei entfernen:

#container {

}

#logo {

float: left;

~~border: 1px solid #ffffff;~~

}

#banner {

float: left;

margin-top: 10px;

margin-left: 20px

width: 550px;

~~border: 1px solid #ffffff;~~

}

#content {

float: left;

position: absolute;

margin-top: 70px;

width: 600px;

~~border: 1px solid #ffffff;~~

}

#navigation_links {

margin-top: 122px;

padding-bottom: 20px;

width: 182px;

~~border: 1px solid #ffffff;~~

}

#bottom {

float: left;

padding-left: 25px;

width: 182px;

~~border: 1px solid #ffffff;~~

}

3.10.1 Installation der Extension „CSS Styled Content“

1. Wählen im Backend aus der Navigation „Tools“ à „Ext Manager“

2. Wählen Sie bei Menü: „Available extensions to install“

3. Suchen Sie in der Liste die Extension „CSS styled content“ (css_styled_content). Klicken Sie auf das Symbol mit dem Plus oder auf den Text um die Extension zu installieren:

4. Klicken Sie im nächsten Fenster auf die Schaltflächen „Update“. Achten Sie darauf das unter dem Bereich „Enable features“ die Option „Set PageTSConfig by default“ aktiviert ist.

5. Wechseln Sie jetzt im Menü auf „Loaded extensions“. Sie sollten folgende Anzeige sehen:

6. Damit die Extension in TYPO3 benutzt wird müssen wir diese unserem Root Template hinzufügen. Wählen Sie aus der Navigation „Web“ à „Template“. Klicken Sie auf die Root Seite Ihrer Website in welcher Sie das Root Template definiert haben.

7. Klicken Sie auf den Text „Click here to edit whole template record“. Gehen Sie in der Seite nach unten und klicken Sie bei „Include static (from extension):“ das Objekt „CSS Styled Content (css_styled_content)“ an. Dieses Objekt wird dann automatisch unter dem „Ausgewählt“ angezeigt.

8. Klicken Sie auf das Symbol für „Speichern und Schließen“

9. Sie können ab jetzt CSS Syled Content unter TYPO3 benutzen. Dies betrifft vor allen auch Dokumente die mit dem Rich-Text-Editor erstellt werden.

3.11 Einfache Inhalte der Seiten anlegen

Beginnen wir nun mit dem Anlegen der Seiteinhalte der einzelnen Seiten. Wenn wir Seiten mit den Rich-Text-Editor anlegen.

3.11.1 Normalen Text anlegen

1. Wählen Sie aus der Navigation „Web“ à „Seiten“.

2. Klicken Sie auf die Seite in der Sie das Textelement anlegen wollen.

3. Klicken Sie auf „Seiteninhalt anlegen“ wenn noch kein Inhaltselement vorhanden ist. Ansonsten auf das Symbol für neues Inhaltselement unterhalb anlegen.

4. Wählen Sie aus der Auswahlliste „Normaler Text“ aus.

5. Geben Sie im Fenster des Rich-Text-Editors den gewünschten Text ein.

3.11.1.1 Fehler bei Firefox Text Einfügen in RTE mit der Einfügeschaltfläche

Beim Versuch Text über die Einfügeschaltfläche (Paste) in den Rich-Text-Editor einzufügen erscheint die obige Fehlermeldung.

Ursache:

Der Firefox Browser verhindert in der Standardeinstellung das Einfügen von Text über die Zwischenablage mit der Schaltfläche „Paste“. Einfügen mit der Tastenkombination <Strg>+<v> funktioniert aber immer.

Abhilfe:

Die geforderte Anwendung „AllowClipboard Helper“ funktioniert nicht mehr ab Firefox 2.0.

Bei Firefox 2.x muss die „user.js“ Datei von Firefox bei den „allowclipboard“ Einträgen angepasst werden. Dabei wird der Site der Website eingetragen von der das Einfügen erlaubt werden soll.

3.11.1.2 Fehler <h1> Tag wird <typohead type=“1“> und <h2> wird etc.

Anzeige im Browser auf der Webseite:

…

<typohead type="1">Präsident</typohead>

…

Abhilfe:

1. Wählen Sie aus der Navigation „Tools“-„Installation“
In der Datei „typo3/install/index.php“ muss die Zeile mit „die(..)“ mit „//“ vorher remarked werden. Ansonsten kommt die Fehlermeldung:

In the source distribution of TYPO3, the install script is disabled by a die() function call.
Fix: Open the file typo3/install/index.php and remove/out-comment the line that outputs this message!

2. Das TYPO3 „Install Tool“ wird aufgerufen.

3. Geben Sie das Passwort für das „Install Tool“ ein.

4. Aus dem Menü wählen Sie „2: Database Analyser“ aus.

5. Gehen Sie in der Seite nach unten und klicken Sie bei „Update required tables“ auf den Text „COMPARE“.

6. Markieren Sie den Eintrag „DROP TABLES…“

7. Klicken Sie auf die Schaltfläche „Make Updates“.

8. Sie müssen jetzt die Texte in den Seiten öffnen und nochmals speichern.

9. Es sollte jetzt die eingegebenen Tags nicht mehr ausgetauscht werden.

3.11.2 Text mit oder Bild anlegen

3.11.2.1 Fehler die Bilder werden im Firefox und Opera immer links ausgerichtet (IE Ok)

Alle eingefügten Bilder werden im Firefox oder Opera Browser immer nach links ausgerichtet, obwohl die Ausrichtung Mittig oder Rechts ausgewählt wurde. Im Internet Explorer werden die Bilder richtig ausgerichtet dargestellt.

Ursache:

Der Fehler tritt in Verbindung mit der Extension „css_styled_content“ auf. Leider kommt es bei gewissen Browsern zu Fehlern bei der Bildausrichtung.

Abhilfe:

In der Datei „typo3_src-3.8.0/typo3/sysext/cms/tslib/class.tslib_content.php“ folgende Zeilen ändern:

Zeile 1087 ändern in

$output= '<div align="'.$align.'">'.$tablecode.'</div>'.$this->wrapSpace($content, $spaceBelowAbove.'|0');

Zeile 1090 ändern in

$output= $this->wrapSpace($content, '0|'.$spaceBelowAbove).'<div align="'.$align.'">'.$tablecode.'</div>';

Damit sollte das Problem behoben sein (Cache löschen).

Sie können auch nur eine Workaround für Bilder im Firefox immer zentrieren in Ihre CSS Datei einfügen:

/* Bild und Text mit Bild zentrieren */

.imgtext-table {

margin: 0 auto;

}

4 Extension installieren

4.1 Extension HTMLArea Rich Text Editor (rtehtmlarea)

Diese Rich Text Editor (RTE) unterstützt auch Mozilla / Firefox (Opera) Browser.

1. Installieren Sie die Extension „rtehtmlarea“. Neue Version ist 1.4.4

2. Klicken Sie auf „Install extension“ oder auf das Symbol (Kugel mit Plus) um die Extension zu installieren.

3. Klicken Sie auf der Konfigurationsseite für die Extension auf die Optionen „Enable images in the RTE“ und auf „Enable Mozilla / Firefox extension“. Alle anderen Einstellungen lassen Sie unverändert. De Screenshot dazu sehen Sie auf der nächsten Seite.

Die Einstellungen wurden um sehr viel Optionen Erweitert zusätzlich zum Firefox Browser wird jetzt auch der Opera Browser unterstützt.

Sei können jetzt auch den DAM Media Browser innerhalb vom Rich Text Editor verwenden.

Zusätzliche Optionen sind „Enable links accessibility icons“, „Force aspell command mode“, „Enable troubleshouting mode“ und „Enabled compressed scripts“.

Die Einstellungen für die Rechtschreibprüfung waren auch schon in der vorherigen Version vorhanden.

4. Nach der Installation können Sie durch Aufruf einer Seite zur Bearbeitung die Funktion des Rich Text Editors testen.

4.1.1.1 Beim Speichern von RichText gehen Formatierungen verloren (im IE mit „rte“)

Nach der Installation der Extension „rtehtmlarea“ gehen beim speichern von RichText der im MS Internet Explorer mit der „rte“ Extension bearbeitet werden Formatierungen verloren. Bei mir war mit den Buttons „Zentrieren“ kein zentrieren des Textes mehr möglich. Außerdem wurden in der Auswahl der Absatzformatierungen zusätzliche Formate angezeigt die vorher nicht vorhanden waren.

Ursache:

Die neue Version von „rtehtmlarea“ benötigt noch einige zusätzliche Konfigurationen damit sich der „rte“ (wenn Sie diesen weiterverwenden wollen), so wie vor der Installation der Extension verhält.

Abhilfe:

Es war zusätzlich noch Rich text Editor „rte“ installiert. Diesen deinstalliert und danach war der Text auch nach dem abspeichern mit allen Formatierungen vorhanden.

4.2 Extension für Gästebuch installieren

1. Wählen im Backend aus der Navigation „Web“ à „Ext Manager“

2. Wählen Sie aus bei Menü: „Import extensions from online repository“

3. Stellen Sie eine Internetverbindung her.

4. Geben Sie in das Feld „Look up“ den Key-Namen Ihrer Extension ein z.B. „ve_guestbook“

5. Klicken Sie auf „Connect to online repository“.

6. Alternative Installation wenn die Extension als *.t3x Datei vorhanden:

Klicken Sie auf „Upload extension file“ um die Extension auf „Local“ zu installieren.

7. Wenn sie das nachfolgende Fenster sehen klicken Sie auf das Symbol mit dem Plus oder auf den Text „Install extension“.

8. Wenn dieses Fenster angezeigt wird klicken Sie auf die Schaltfläche „Make updates“.

9. Wechseln Sie jetzt im Menü auf „Loaded extensions“. Sie sollten folgende Anzeige sehen:

Wir wollen für die Listanzeige des Gästebuches und für die Eintragungen in das Gästebuch eigene Seiten verwenden. Alle Einträge in das Gästebuch sollen in einen eigenen Ordner (SysOrdner) gespeichert werden. Vervollständigen Sie die Einrichtung des Gästebuches indem Sie die nachfolgenden Punkte durchführen.

4.2.1 Seiten für Gästebuch erstellen

1. Klicken Sie auf der Seite „Gästebuch“ auf das Symbol der Seite und wählen Sie „Neu“.

2. Wählen Sie aus der Objektliste „Seite“ aus.

3. Die Option „Seite verstecken“ deaktivieren. Wählen sie bei „Typ“ den „Standard“ und geben Sie als „Titel“ den Namen „Formular“ ein.

4. Klicken Sie nochmals bei der Seite „Gästebuch“ auf das Symbol und wählen Sie „Neu“.
Aus der Objektliste wählen Sie wieder „Seite (in)“ aus.

5. Die Option „Seite verstecken“ deaktivieren. Wählen sie bei „Typ“ den „SysOrdner“ und geben Sie als „Titel“ den Namen „Eintragungen“ ein.

6. Speichern und schließen.

7. Nachdem Sie alle Seiten erstellt haben sollte die Webseiten Navigation so aussehen:

4.2.2 Seite für die Gästebuch Listanzeige einrichten

1. Kopieren Sie zuerst die Datei „typo3conf/ext/ve-guestbook/pi1/guestbook_template.tmpl“ in das Verzeichnis „fileadmin/templates/“. Wenn das Verzeichnis „templates“ nicht vorhanden ist erstellen Sie es.

2. Wählen Sie aus der Navigation „Web“-„Seiten“.

3. Klicken Sie auf die Seite „Gästebuch“ in der die Listanzeige des Gästebuches erfolgen soll.

4. Klicken Sie auf „Seiteninhalt anlegen“ wenn noch kein Inhaltselement vorhanden ist. Ansonsten auf das Symbol für neues Inhaltselement unterhalb anlegen.

5. Wählen Sie aus der Rubrik „Plugin“ das Objekt „Gästebuch“ aus.

6. Es erscheint die Einrichtung für die Anzeige vom Gästebuch.
Wählen Sie bei „Was soll angezeigt werden?“ aus der Liste „LIST“ aus.
Als Ausgangspunkt wählen Sie Ihren SysOrdner für die „Eintragungen“ den Sie vorher erstellt haben.
Bei „Template“ wählen Sie die Datei aus die Sie in das Verzeichnis „/fileadmin/templates/“ mit dem Namen „guestbook_template.tmpl“ kopiert haben.

7. Wählen Sie jetzt den Reiter „Liste & Teaser“ aus.
Geben Sie in das Feld „Wieviele Einträge?“ die Anzahl „10“ für 10 Einträge pro Seite ein.
Wählen Sie bei „Sortierung nach diesem Feld:“ die Sortierung „Erstellungszeit“ aus.

8. Speichern und schließen.

4.2.3 Seite für das Gästebuch Formular einrichten

1. Wählen Sie aus der Navigation „Web“ à „Seiten“.

2. Klicken Sie auf die Seite „Formular“ in der das Formular für Gästebuch Einträge angezeigt werden soll.

3. Klicken Sie auf „Seiteninhalt anlegen“ wenn noch kein Inhaltselement vorhanden ist. Ansonsten auf das Symbol für neues Inhaltselement unterhalb anlegen.

4. Wählen Sie aus der Rubrik „Plugin“ das Objekt „Gästebuch“ aus.

5. Es erscheint die Einrichtung für die Anzeige vom Gästebuch.
Wählen Sie bei „Was soll angezeigt werden?“ aus der Liste „FORM“ aus.
Als Ausgangspunkt wählen Sie Ihren SysOrdner für die „Eintragungen“ den Sie vorher erstellt haben.
Bei „Template“ wählen Sie die Datei aus die Sie in das Verzeichnis „/fileadmin/templates/“ mit dem Namen „guestbook_template.tmpl“ kopiert haben.

6. Wählen Sie jetzt den Reiter „Formular“ aus.
Wählen Sie die Felder aus die in dem Gästebuch Formular angezeigt werden sollen.
Wählen Sie „E-Mail validieren?“ und „Website überprüfen?“ aus.
Als Zielseite wählen Sie wieder die Listanzeige des Gästebuches aus.
Bei „E-Mail-Benachrichtigung nach Eintrag:“ geben Sie die Email-Adresse ein an welche ein Email bei einen neuen Gästebucheintrag gesendet werden soll.
Wenn Sie „E-Mail an Benutzer“ nach Eintrag“ anwählen erhält auch der Benutzer der den Gästebucheintrag vornimmt ein Email.

7. Speichern und Schließen.

8. Wenn Sie jetzt auf die Seite „Gästebuch“ klicken sollten Sie folgendes sehen.

4.2.4 Link für neuen Gästebucheintrag auf Seite einfügen

1. Im Navigator „Web“ à „Seite“ auswählen.

2. Den Text der Seite „Gästebuch“ anklicken.

3. Klicken Sie auf das Symbol für neuen Seiteninhalt vor dem vorhandenen Inhalt.

4. Lassen Sie den Typ auf „Text“ stehen. Geben Sie in das Textfeld „Ins Gästebuch eintragen“ ein.

5. Markieren Sie den Text mit der Maus und klicken Sie auf das Linksymbol .
Wählen Sie den Reiter „Seite“ und wählen Sie die Seite „Formular“ aus.

6. Speichern und schließen.

4.2.5 Eintragungen in das Setup Feld des Templates

Wir setzen einige Grundeinstellungen für die Extension. Wir legen die HTML Template Datei und die zusätzliche CSS Datei fest.

…

# Konfiguration vom Gästebuch (ve_guestbook)

plugin.tx_veguestbook_pi1 {

templateFile = fileadmin/austria/templates/guestbook_template.tmpl

limit = 10

email_from_name = Erste Schritte

email_from_mail = office@ersteschritte.com

}

…

page = PAGE

…

page.stylesheet = fileadmin/styles/styles.css

page.includeCSS.file1 = fileadmin/styles/styles.css

page.includeCSS.file2 = fileadmin/styles/guestbook.css

…

Die Erstellung der CSS Datei „guestbook.css“ wird später beschrieben.

4.2.6 Anpassung der „locallang.php“ Datei

Wir führen auch einige Anpassungen and der Datei „/typo3conf/ext/ve_guestbook/locallang.php“ durch weil uns einige deutsche Texte nicht gefallen:

…

'de' => Array (

'form_firstname' => 'Vorname',

'form_surname' => 'Name',

'form_email' => 'E-Mail',

'form_homepage' => 'Homepage',

'form_place' => 'Ort',

'form_entry' => 'Nachricht',

'form_entrycomment' => 'Kommentar',

'form_submit' => 'Eintragen',

'form_error' => 'Bitte vergessen Sie nicht folgende Felder zu befüllen:',

'form_invalid_field' => 'ungültig',

'form_blacklisted' => 'gesperrt',

'form_captcha_response' => 'Antwort',

'list_from_place' => 'aus',

'no_entries_headline' => 'Keine Einträge',

'no_entries_text' => 'Keine Einträge im Gästebuch gefunden.',

'teaser_headline' => 'Zuletzt im Gästebuch',

'teaser_more' => 'mehr dazu',

'pi_list_browseresults_prev' => '< vorherige Einträge',

'pi_list_browseresults_page' => 'Seite',

'pi_list_browseresults_next' => 'weitere Einträge >',

'pi_list_browseresults_displays' => 'Anzeige: ###SPAN_BEGIN###%s - %s </span>von ###SPAN_BEGIN###%s.</span>',

'notification_mail_subject' => 'Neuer Gästebuch-Eintrag auf ###SERVER_NAME###',

'notification_mail_text' => 'Hallo ###FIRSTNAME### ###SURNAME###,

vielen Dank für den Eintrag ###SURNAME###:

E-Mail: ###EMAIL###

Website: ###HOMEPAGE###

Nachricht: ###ENTRY###

Hier geht es direkt zum Gästebuch: ###URL###',

'feedback_mail_subject' => 'Gästebuch-Eintrag (###SERVER_NAME###)',

'feedback_mail_text' => 'Ihr Gästebuch-Eintrag:

Name: ###FIRSTNAME### ###SURNAME###

E-Mail: ###EMAIL###

Website: ###HOMEPAGE###

Message: ###ENTRY###

Hier geht es direkt zum Gästebuch: ###URL###',

…

4.2.7 HTML Vorlagedatei und CSS anpassen

Wir führen folgende Änderungen in der Datei „fileadmin/templates/guestbook_template.tmpl“ durch:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<head>

<title>ve_guestbook</title>

</head>

<body>

<h3>TEMPLATE_LIST</h3>

<br />

<!-- ###TEMPLATE_LIST### begin

Teasing the gustbook

Following markers will be substituted:

###GUESTBOOK_FIRSTNAME### Firstname (Entry)

###GUESTBOOK_SURNAME### Surname (Entry)

###GUESTBOOK_EMAIL_URL### E-Mail URL (Entry)

###GUESTBOOK_EMAIL### E-Mail including spam protection if activated (Entry)

###GUESTBOOK_HOMEPAGE### Website (Entry)

###GUESTBOOK_PLACE### Place (Entry)

###GUESTBOOK_ENTRY### Message (Entry)

And the field names...

###FORM_FIRSTNAME### Firstname

###FORM_SURNAME### Surname

###FORM_EMAIL### E-Mail

###FORM_HOMEPAGE### Website

###FORM_PLACE### Place

###FORM_ENTRY### Message

-->

###RESULT_COUNT### <div align="right">###LINK_PREV### ###PAGES### ###LINK_NEXT###</div>

<!-- ###CONTENT### begin

This is the part of the template substituted with the list of entries:

-->

<!-- ###ENTRY### begin

Template for a single item

-->

<br />

<tr>

<td valign="top" colspan="2" class="tx-guestbook-list-header">###GUESTBOOK_FIRSTNAME### ###GUESTBOOK_SURNAME### ###GUESTBOOK_FROM### ###GUESTBOOK_PLACE###</td>

</tr>

<tr>

<!-- ###ENTRY_EMAIL### begin

This will be stripped out if empty

-->

<p><a href="###GUESTBOOK_EMAIL_URL###">###GUESTBOOK_EMAIL###</a></p>

<!-- ###ENTRY_HOMEPAGE### begin

This will be stripped out if empty

-->

<p><a href="###GUESTBOOK_HOMEPAGE###" target="blank">###FORM_HOMEPAGE###</a></p>

 </td>

<td valign="top" class="tx-guestbook-list-row"><span class="tx-guestbook-list-small">###GUESTBOOK_DATE###</span><br/>

###GUESTBOOK_ENTRY###

<!-- ###ENTRY_ENTRYCOMMENT### begin

This will be stripped out if empty

-->

<p><span class="tx-guestbook-list-entrycomment-title">###FORM_ENTRYCOMMENT###:</span><br /><span class="tx-guestbook-list-entrycomment">###GUESTBOOK_ENTRYCOMMENT###</span></p>

</td>

</tr>

</table>

<br/><div align="right">###LINK_PREV### ###PAGES### ###LINK_NEXT###</div>

<!-- ###TEMPLATE_NO_ENTRIES### begin

No entries found :-(

Following markers will be substituted:

###GUESTBOOK_FIRSTNAME### Firstname

###GUESTBOOK_SURNAME### Surname

###GUESTBOOK_EMAIL_URL### E-Mail (URL)

###GUESTBOOK_EMAIL### E-Mail including spam protection if activated

###GUESTBOOK_HOMEPAGE### Website

###GUESTBOOK_PLACE### Place

###GUESTBOOK_ENTRY### Message

-->

<tr>

<tr>

<td valign="top" class="tx-guestbook-list-header">###NO_ENTRIES_HEADLINE###</td>

</tr>

<tr>

<td valign="top" class="tx-guestbook-list-row">###NO_ENTRIES_TEXT###</td>

</tr>

</table>

</td>

</tr>

</table><br/>

<!-- ###TEMPLATE_TEASER### begin

Showing the guestbook

Following markers will be substituted:

###TEASER_HEADLINE### Headline (from the language file)

###TEASER_MORE### More (from the language file)

###GUESTBOOK_FIRSTNAME### Firstname

###GUESTBOOK_SURNAME### Surname

###GUESTBOOK_EMAIL_URL### E-Mail (URL)

###GUESTBOOK_EMAIL### E-Mail including spam protection if activated

###GUESTBOOK_HOMEPAGE### Website

###GUESTBOOK_PLACE### Place

###GUESTBOOK_ENTRY### Message

-->

<tr>

<tr>

<td valign="top" class="tx-guestbook-latest-header"> ###TEASER_HEADLINE###</td>

</tr>

<tr>

<!-- ###CONTENT### begin

This is the part of the template substituted with the list of entries:

-->

<!-- ###ENTRY### begin

Template for a single item

-->

<p><span class="tx-guestbook-list-small">###GUESTBOOK_DATE###</span><br/>

###GUESTBOOK_FIRSTNAME### ###GUESTBOOK_SURNAME###:<br/>###GUESTBOOK_ENTRY###</p>

<p align="right">###TEASER_MORE###</p></td>

</tr>

</table>

</td>

</tr>

</table><br/>

<!-- ###TEMPLATE_FORM### begin

The guestbook form for a new frontend entry

Following markers will be substituted:

###FORM_FIRSTNAME### Firstname

###FORM_SURNAME### Surname

###FORM_EMAIL### E-Mail

###FORM_HOMEPAGE### Website

###FORM_PLACE### Place

###FORM_ENTRY### Message

-->

<span class="tx-guestbook-form-error">###FORM_ERROR###</span>###FORM_ERROR_FIELDS###

<tr>

<td colspan="2">Neuer Eintrag ins Gästebuch</td>

</tr>

<tr>

<td>###FORM_SURNAME### <span class="tx-guestbook-form-obligationfield">###FORM_SURNAME_OBLIGATION###</span></td>

</tr>

<tr>

<td>###FORM_EMAIL### <span class="tx-guestbook-form-obligationfield">###FORM_EMAIL_OBLIGATION###</span></td>

</tr>

<tr>

<td>###FORM_HOMEPAGE### <span class="tx-guestbook-form-obligationfield">###FORM_HOMEPAGE_OBLIGATION###</span></td>

</tr>

<tr>

<td valign="top">###FORM_ENTRY### <span class="tx-guestbook-form-obligationfield">###FORM_ENTRY_OBLIGATION###</span></td>

<td><textarea name="tx_veguestbook_pi1[entry]" class="tx-guestbook-form-textarea" rows="8" cols="25">###VALUE_ENTRY###</textarea></td>

</tr>

<tr>

<td valign="top">###FORM_CAPTCHA_RESPONSE###<br> ###SR_FREECAP_NOTICE### ###SR_FREECAP_CANT_READ###</td>

###SR_FREECAP_IMAGE###</td>

</tr>

<tr>

</tr>

</table>

</form>

<br />

</body>

</html>

Wir legen im Verzeichnis „fileadmin/styles/“ eine Datei „guestbook.css“ an und tragen folgende Zeilen ein:

/* CSS Linkformate */

.tx-veguestbook-pi1 a:link {

text-decoration:none;

color:#678ece;

}

.tx-veguestbook-pi1 a:visited {

text-decoration:none;

color:#678ece;

}

.tx-veguestbook-pi1 a:active {

text-decoration:none;

color:#678ece;

}

.tx-veguestbook-pi1 a:hover {

text-decoration:none;

color:#678ece;

}

.tx-veguestbook-pi1 a:focus {

text-decoration:none;

color:#678ece;

}

.tx-veguestbook-pi1 {

font-family: Tahoma;

font-size: 11px;

color: #ffffff;

scrollbar-face-color: #ffffff;

scrollbar-shadow-color: #678ece;

scrollbar-track-color: #678ece;

scrollbar-darkshadow-color: #ffffff;

scrollbar-base-color: #ffffff;

scrollbar-track-color: #ffffff;

scrollbar-arrow-color: #678ece;

scrollbar-highlight-color: #ffffff;

scrollbar-shadow-color: #ffffff;

background-attachment: fixed;

background-repeat: no-repeat;

background-position: center center;

}

.tx-veguestbook-pi1 td {

font-size: 11px;

color: #ffffff;

}

.tx-veguestbook-pi1 td.tx-guestbook-list-row {

color: #000000;

background-color: #e7eff6;

}

.tx-guestbook-list-table {

font-family: Tahoma;

font-size: 11px;

color: #ffffff;

background-color: #000000;

}

.tx-veguestbook-pi1 td.tx-guestbook-list-header {

background-color: #678ece;

color: #000000;

font-weight:bold;

border: 1px solid #ffffff;

}

.tx-guestbook-list-row {

color: #000000;

background-color: #e7eff6;

border: 1px solid #ffffff;

}

.tx-guestbook-list-rowleft {

color: #000000;

background-color: #e7eff6;

}

.tx-guestbook-list-entrycomment-title {

font-weight: bold;

}

.tx-guestbook-list-entrycomment {

font-style: italic;

}

.tx-guestbook-list-small {

font-size: 9px;

color: #666666;

}

.tx-veguestbook-pi1-browsebox TD {

font-size: 9px;

color: #666666;

}

.tx-veguestbook-pi1-browsebox-strong, .tx-ttnews-browsebox-SCell {

font-weight: bold;

}

.tx-veguestbook-pi1-browsebox-SCell {

background-color: #e7eff6;

}

.tx-guestbook-latest-header {

background-color: #678ece;

color: #FFFFFF;

font-weight:bold;

}

.tx-guestbook-latest-row {

color: #000000;

background-color: #e7eff6;

}

.tx-guestbook-latest-small {

font-size: 9px;

color: #666666;

}

.tx-guestbook-form-inputfield-med {

background-color: #e7eff6;

border: 1px solid #000000;

color: #000000;

font-size: 11px;

font-family: Tahoma;

width:150px;

}

.tx-guestbook-form-inputfield-big {

background-color: #e7eff6;

border: 1px solid #000000;

color: #000000;

font-size: 11px;

font-family: Tahoma;

width:150px;

}

.tx-guestbook-form-textarea {

background-color: #e7eff6;

border: 1px solid #ffffff;

color: #000000;

font-size: 11px;

font-family: Tahoma;

width: 400px;

}

.tx-guestbook-form-obligationfield {

color: #ffffff;

}

.tx-guestbook-form-error {

font-size: 11px;

color: #CC0000;

}

4.2.7.1 Standard CSS der Extension deaktivieren

Nachdem wir die CSS Datei unseren Gegebenheiten angepasst haben, können wir die Standard CSS Einstellungen der Extension deaktivieren. Dies erfolgt im Setup Bereich des Template mit folgendem Eintrag:

…

# Konfiguration vom Gästebuch (ve_guestbook)

plugin.tx_veguestbook_pi1 {

templateFile = fileadmin/austria/templates/guestbook_template.tmpl

limit = 10

email_from_name = Erste Schritte

email_from_mail = office@ersteschritte.com

_CSS_DEFAULT_STYLE >

}

…

4.2.8 Gästebuch Anzeige im Browser nach Anpassung

Die Listenansicht des Gästebuches:

Eingabeformular für das Gästebuch:

4.3 Modern Guestbook Extended (sr_guestbook)

Diese Extension erweitert die normale Guestbook Exttension „ve_guestbook“ um die Funktionalität des RichTextEditors im Backend und im Frontend.

1. Die Extension „rtehtmlarea“ muss vor der Installation von „sr_guestbook“ installiert sein.

2. Installieren Sie die Extension „sr_guestbook“.

4.3.1.1 Fehler bei der Installation der Extension

No file uploaded! Probably the file was too large for PHPs internal limit for uploadable files.

Ursache:

Das Upload Limit für Dateien ist zu klein eingestellt.

Abhilfe:

Im TYPO3 „Install Tool“ folgende Einstellung vornehmen für Dateigröße bis 100MB:

oder direkt in die Datei „localconf.php“ im Verzeichnis „typo3conf“ Zeile einfügen:

…

$TYPO3_CONF_VARS["BE"]["maxFileSize"] = '100000'; // Dateigröße bis 100MB

…

4.4 Extension BB-Codes (Emoticons) für Gästebuch

Diese Extension erweitert die Extension „sr_guestbook“ damit wieder BB-Codes (Emoticons) eingegeben und angezeigt werden können.

1. Installieren Sie die Extension „bb_guestbook“.

4.5 Extension Fotogalerie installieren

Es wird die Extension „Gallery“ (lz_gallery) zur Anzeige der Fotos verwendet. Diese Extension benötigt zusätzlich noch die Extension „Oiktable Library“ (lz_table).

Bei dieser Extension werden die Fotos nicht in die Datenbank kopiert sondern nur in einem Verzeichnis unter „fileadmin/“ auf dem Server zur Verfügung gestellt.

1. Wählen im Backend aus dem Menü „Ext Manager“

2. Wählen Sie aus bei Menü: „Import extensions from online repository“

3. Stellen Sie eine Internetverbindung her.

4. Geben Sie in das Feld „Look up“ den Key-Namen der Extension ein z.B. „lz_table“

5. Klicken Sie auf „Connect to online repository“.

6. Alternative Installation wenn die Extension als *.t3x Datei vorhanden:

Klicken Sie auf „Upload extension file“ um die Extension auf „Local“ zu installieren.

7. Wenn sie das nachfolgende Fenster sehen klicken Sie auf das Symbol mit dem Plus oder auf den Text „Install extension“.

8. Als nächstes installieren wird die Extension für die Fotogalerie. Wir geben dazu in das Feld „Look up“ den Key-Namen der Extension ein z.B. „lz_gallery“ ein.

9. Klicken Sie auf „Connect to online repository“.

10. Alternative Installation wenn die Extension als *.t3x Datei vorhanden:

Klicken Sie auf „Upload extension file“ um die Extension auf „Local“ zu installieren.

11. Wenn sie das nachfolgende Fenster sehen klicken Sie auf das Symbol mit dem Plus oder auf den Text „Install extension“.

12. Wenn dieses Fenster angezeigt wird klicken Sie auf die Schaltfläche „Make updates“.

Wechseln Sie jetzt im Menü auf „Loaded extensions“. Sie sollten folgende Anzeige sehen:

4.5.1 Seite für Ablage der Fotogalerien erstellen

1. Klicken Sie auf der Seite „Fotos“ auf das Symbol der Seite und wählen Sie „Neu“.

2. Wählen Sie aus der Objektliste „Seite“ aus.

3. Die Option „Seite verstecken“ deaktivieren. Wählen sie bei „Typ“ den „SysOrdner“ und geben Sie als „Titel“ den Namen „Galerie“ ein.

4. Speichern und schließen.

5. Nachdem Sie alle Seiten erstellt haben sollte die Webseiten Navigation so aussehen:

4.5.2 Seite für die Anzeige der Fotogalerie einrichten

1. Wählen Sie aus der Navigation „Web“ à „Seiten“.

2. Klicken Sie auf die Seite „Fotos“ in welcher Sie die Fotogalerie anzeigen wollen.

3. Klicken Sie auf „Seiteninhalt anlegen“ wenn noch kein Inhaltselement vorhanden ist. Ansonsten auf das Symbol für neues Inhaltselement unterhalb anlegen.

4. Wählen Sie aus der Rubrik „Plugin“ das Objekt „Gästebuch“ aus.

5. Es erscheint die Einrichtung der Fotogalerie..
Als Ausgangspunkt wählen Sie Ihren SysOrdner „Galerie“ den Sie vorher erstellt haben.

6. Speichern und schließen.

4.5.3 Eintragung im Setup Feld des Templates

Legen Sie den Standardpfad („basepath“)für die Verzeichnisse mit den Fotos fest.

…

plugin.tx_lzgallery_pi1 {

basepath = fieleadmin/austria/fotos/

}

…

page = PAGE

…

page.stylesheet = fileadmin/styles/styles.css

page.includeCSS.file1 = fileadmin/styles/styles.css

page.includeCSS.file2 = fileadmin/styles/guestbook.css

page.includeCSS.file3 = fileadmin/styles/gallery.css

…

4.5.4 Neue Galerie anlegen

1. Kopieren Sie Ihre Fotos über einen FTP Client oder über das TYPO3 Backend in das Verzeichnis „fileadmin/austria/fotos/erstefotos/“. Erstellen ggf. vorher die benötigten Verzeichnisse.

2. Kontrollieren Sie die Zugriffsrechte auf das Verzeichnis und die Dateien wenn Sie mit einem FTP Client arbeiten.

3. Klicken Sie beim SysOrdner „Galerie“ auf das Symbol und wählen Sie „Neu“.

4. Wählen Sie das Objekt „Galerien“ aus.

5. Geben Sie einen Titel für die neue Galerie ein.

Sie können auch eine Kurbeschreibung oder eine ausführliche Beschreibung eingeben.
Sie könne ein Startdatum und Enddatum eingeben.

6. Jetzt kommt aber das wichtigste der Pfad zu der neuen Photogalerie. Dies ist der Pfad in welchen sich die Bilder dieser Photogalerie befinden. Geben Sie hier z.B. den Pfad relativ zu Ihrem vorher im Setup Bereich eingegeben „basepath“ ein, also z.B. „erstefotos/“.

7. Speichern und schließen.

4.5.5 HTML Vorlagedatei erstellen und CSS anpassen

Wir erstellen im Verzeichnis „fileadmin/templates/“ eine Datei mit dem Namen „gallery_template.tmpl“ mit folgenden Inhalt:

<tr>

<td>###COLROWS_LABEL###</td>

<td>###MAXWIDTH_LABEL###</td>

<td>###PAGE_LABEL###</td>

<td>###CLICKMODE_LABEL###</td>

</tr>

<tr>

<td>###COLROWS###</td>

<td>###MAXWIDTH###</td>

<td>###CLICKMODE###</td>

</tr>

<tr>

<td>###PREVIOUS###</td>

</tr>

</table>

</form>

###EFFECTS###

<div id="tx-lzgallery-pi1-title">###TITLE###</div>

<div id="tx-lzgallery-pi1-descr-long">###DESCR_LONG###</div>

###GALLERY###

<tr>

<td>###EFFECT_LABEL###</td>

<td>###ROTATION_LABEL###</td>

<td>###MIRROR_LABEL###</td>

<td>###COLORS_LABEL###</td>

<td>###CHANNEL_LABEL###</td>

<td>###RESET###</td>

</tr>

<tr>

<td>###EFFECT###</td>

<td>###ROTATION###</td>

<td>###MIRROR###</td>

<td>###COLORS###</td>

<td>###CHANNEL###</td>

<td>###SUBMIT###</td>

</tr>

<tr>

<td>###CONTRAST_LABEL###</td>

<td>###GAMMA_LABEL###</td>

<td>###BRIGHTNESS_LABEL###</td>

<td>###SATURATION_LABEL###</td>

<td>###HUE_LABEL###</td>

<td>###SOLARIZE_LABEL###</td>

</tr>

<tr>

<td>###CONTRAST###</td>

<td>###GAMMA###</td>

<td>###BRIGHTNESS###</td>

<td>###SATURATION###</td>

<td>###SOLARIZE###</td>

</tr>

<tr>

<td>###SWIRL_LABEL###</td>

<td>###IMPLODE_LABEL###</td>

<td>###CHARCOAL_LABEL###</td>

<td>###SPREAD_LABEL###</td>

<td>###AMPLITUDE_LABEL###</td>

<td>###WAVELENGTH_LABEL###</td>

</tr>

<tr>

<td>###SWIRL###</td>

<td>###IMPLODE###</td>

<td>###CHARCOAL###</td>

<td>###SPREAD###</td>

<td>###AMPLITUDE###</td>

<td>###WAVELENGTH###</td>

</tr>

</table>

###IMAGE### ###FILENAME###

###SPLIT_1###<center>###FILENAME### ###FILESIZE###</center>###IMAGE### ###SPLIT_2###

<td>

<td id="tx-lzgallery-pi1-parent-title">###TITLE###</td>

</tr>

<td id="tx-lzgallery-pi1-parent-count">###COUNT_LABEL###: ###COUNT### </td>

</tr>

<td id="tx-lzgallery-pi1-parent-subcount">###SUBCOUNT_LABEL###: ###SUBCOUNT### </td>

</tr>

<td id="tx-lzgallery-pi1-parent-descr-short">###DESCR_LONG###</td>

</tr>

</td>

</tr>

<td class="title">###TITLE###</td>

<td class="startdate">###STARTDATE###</td>

<td class="count">###COUNT###</td>

</tr>

<table>

<tr>

<td class="preview" rowspan=2>###PREVIEW### </td>

</tr>

<tr>

<td class="descr_short">###DESCR_SHORT###</td>

</tr>

</table>

</td>

</tr>

<td class="title">###MESSAGE###</td>

</tr>

<td>

<table>

<tr>

<td class="preview">###BUTTON###</td>

</tr>

</table>

</td>

</tr>

<td>

###PREVIOUS###

###PAGE_LABEL### ###PAGE_NUMBER###

###NEXT###

</td>

</tr>

</table>

Für die Simple Anzeige der Gallery wurde ein eigenes HTML Template mit folgenden Inhalt erstellt:

<tr>

<td>###PREVIOUS###</td>

</tr>

</table>

</form>

<div id="tx-lzgallery-pi1-title">###TITLE###</div>

<div id="tx-lzgallery-pi1-descr-long">###DESCR_LONG###</div>

###GALLERY###

###IMAGE###

<td>

<td id="tx-lzgallery-pi1-parent-title">###TITLE###</td>

</tr>

<td id="tx-lzgallery-pi1-parent-count">###COUNT_LABEL###: ###COUNT### </td>

</tr>

<td id="tx-lzgallery-pi1-parent-subcount">###SUBCOUNT_LABEL###: ###SUBCOUNT### </td>

</tr>

<td id="tx-lzgallery-pi1-parent-descr-short">###DESCR_LONG###</td>

</tr>

</td>

</tr>

<td class="title">###TITLE###</td>

<td class="startdate">###STARTDATE###</td> <td class="count">###COUNT###</td>

</tr>

<table>

<tr>

<td class="preview" rowspan=2>###PREVIEW###</td>

</tr>

<tr>

<td class="descr_short">###DESCR_SHORT###</td>

</tr>

</table>

</td>

</tr>

<td class="title">###MESSAGE###</td>

</tr>

<td>

<table>

<tr>

<td class="preview">###BUTTON###</td>

</tr>

</table>

</td>

</tr>

<td> ###PREVIOUS###

###PAGE_LABEL### ###PAGE_NUMBER###

###NEXT###

</td>

</tr>

</table>

Wir legen im Verzeichnis „fileadmin/styles/“ eine Datei „guestbook.css“ an und tragen folgende Zeilen ein:

/******** gallerie - listing ************/

#tx-lzgallery-pi1-listing {

border: 1px solid #ffffff;

font-size:12px;

color: black;

padding:0px;

font-family:verdana

}

#tx-lzgallery-pi1-listing tr {

border: 1px solid #ffffff collapse;

}

table#tx-lzgallery-pi1-listing {

background-color: #e7eff6;

}

#tx-lzgallery-pi1-listing tr.line1 {

background-color: #678ece;

color:black;

}

#tx-lzgallery-pi1-listing tr.line1 td.startdate{

white-space:nowrap;

}

#tx-lzgallery-pi1-listing tr.line1 td.count{

white-space-nowrap;

padding-left:20px;

}

#tx-lzgallery-pi1-listing td.preview {

padding:0px;

width:80px;

padding-left:4px;

}

#tx-lzgallery-pi1-listing td.title {

font-size:12px;

font-face:bold;

padding-left:10px;

width:80%;

}

#tx-lzgallery-pi1-listing tr.line2 {

padding:0px;

}

#tx-lzgallery-pi1-listing a {

color:black;

}

#tx-lzgallery-pi1-listing tr.sorting a {

color: #678ece;

}

#tx-lzgallery-pi1-listing td.descr_short {

color: black;

padding:4px 4px 20px 4px;

}

#tx-lzgallery-pi1-parent-descr-short {

color: black;

padding:4px 4px 20px 4px;

}

#tx-lzgallery-pi1-parent-title {

color: black;

font-size:20px;

padding:4px 4px 4px 4px;

}

#tx-lzgallery-pi1-parent-count {

padding:4px 4px 4px 4px;

}

#tx-lzgallery-pi1-parent-subcount {

padding:0px 4px 4px 4px;

}

#tx-lzgallery-pi1-listing td.information {

color: black;

font-size:10px;

white-space:nowrap;

}

/********* gallery - album ***********/

#tx-lzgallery-pi1-fotonav td {

text-align:center;

padding-left:15px;

}

#tx-lzgallery-pi1-fotonav td.descr {

color:#00008c;

}

#tx-lzgallery-pi1-fotonav {

background-color:lightgrey;

border-color:#00008c;

border-style:solid;

border-width:2px;

font-family:verdana;

}

#tx-lzgallery-pi1-fotos {

border-width:2px;

border-style:solid;

border-color:#00008c;

text-align:center;

padding:5px 5px 5px 5px;

background-color:white;

border-collapse:collapse;f

ont-family:verdana;

}

#tx-lzgallery-pi1-fotos td {

text-align:center;

padding:0;

border-style:solid;

border-width:1px;

border-color:#00008c;

padding:3px;

}

#tx-lzgallery-pi1-title {

border-bottom-width:2px;

border-bottom-style:solid;

border-bottom-color:#00008c;

text-align:center;

margin-bottom:20px;

font-size:20px;

}

#tx-lzgallery-pi1-descr-long {

margin:5px 5px 15px 5px;

text-align:justify;

}

/********** gallery - annotations ***********/

.tx-lzgallery-pi1-5x5-filename {

font-size:10px;

font-style:italic;

}

.tx-lzgallery-pi1-1x1-1 {

font-size:12px;

font-face:bold;

border-bottom:1px solid lightgray;

}

.tx-lzgallery-pi1-1x1-2 {

font-size:12px;

border:1px solid lightgray;

margin:3px 3px 3px 3px;

}

.tx-lzgallery-pi1-1x1-filename {

font-size:10px;

font-style:italic;

}

/********** gallery - album ***********/

#tx-lzgallery-pi1-fotonav td {

font-size: 12px;

text-align:center;

padding-left:15px;

color: 999999;

}

#tx-lzgallery-pi1-fotonav td.descr {

color:#00008c;

}

#tx-lzgallery-pi1-fotonav {

background-color:lightgrey;

border-color:#00008c;

border-style:solid;

border-width:2px;

font-family:verdana;

}

#tx-lzgallery-pi1-fotonav a {

color: 678ece;

}

#tx-lzgallery-pi1-fotos {

border-width:2px;

border-style:solid;

border-color:#00008c;

text-align:center;

padding:5px 5px 5px 5px;

background-color:white;

border-collapse:collapse;

font-family:verdana;

}

#tx-lzgallery-pi1-fotos td {

text-align:center;

padding:0;

border-style:solid;

border-width:1px;

border-color:#00008c;

padding:3px;

}

#tx-lzgallery-pi1-title {

border-bottom-width:2px;

border-bottom-style:solid;

border-bottom-color:#00008c;

text-align:center;

margin-bottom:20px;

font-size:20px;

}

#tx-lzgallery-pi1-descr-long {

margin:5px 5px 15px 5px;

text-align:justify;

}

/********** gallery - annotations **********/

.tx-lzgallery-pi1-5x5-filename {

font-size:10px;

font-style:italic;

}

.tx-lzgallery-pi1-1x1-1 {

font-size:12px;

font-face:bold;

border-bottom:1px solid lightgray;

}

.tx-lzgallery-pi1-1x1-2 {

font-size:12px;

border:1px solid lightgray;

margin:3px 3px 3px 3px;

}

.tx-lzgallery-pi1-1x1-filename {

font-size:10px;

font-style:italic;

}

Nachdem wir die Dateien angelegt haben führen wir folgende Änderungen im Setup Bereich des Template durch, damit diese Datei auch für die Anzeige verwendet wird:

#Umschaltung der Fotogalerie (lz_gallery) auf Simple Gallery wenn aktiviert

plugin.tx_lzgallery_pi1 < plugin.tx_lzgallery_pi1_simple

# HTML Template Datei für Fotogaliere (lz_gallery) festlegen

temp.gallery = FILE

#temp.gallery.file = fileadmin/austria/templates/gallery_template.tmpl

temp.gallery.file = fileadmin/austria/templates/gallery_simple_template.tmpl

…

plugin.tx_lzgallery_pi1 {

basepath = fieleadmin/austria/fotos/

layout < temp.gallery

}

…

4.5.6 Anzeige im Browser

Die Listenanzeige der Fotogalerie:

Die Galerie Anzeige der Fotogalerie:

4.5.7 Aufgetreten Fehler

4.5.7.1 Fehler „TYPO3 Fatal Error:..“ beim aufrufen der Seite Fotogalerie

TYPO3 Fatal Error: Extension key "lz_table" was NOT loaded! (t3lib_extMgm::extPath)

Ursache:

Die Extension „lz_gallery“ benötigt die Extension „lz_table“ zur korrekten Funktion. Die Extension „lz_table dürfe aber nicht installiert sein.

Abhilfe:

Installieren Sie die Extension „lz_table“. Deinstallieren Sie aber davor die Extension „lz_gallery“ wieder.

4.5.7.2 Fehler beim Installieren der Extension „lz_table“

Ursache:

Sie haben versucht die Extension „lz_table“ zu installieren während die Extension „lz_gallery“ schon installiert ist.

Abhilfe:

Deinstallieren Sie die Extension „lz_gallery“ bevor Sie die Extension „lz_table“ installieren.

4.5.7.3 Fehler „This gallery does not contain pictures.“

Beim anklicken einer angezeigten Fotogalerie kommt diese Fehlermeldung. Die Vorschaubilder der Fotogalerie werden angezeigt.

Ursache:

Analyse mit „Admin Panel“ durchführen. Schalten Sie das „Admin Panel“ durch folgenden Eintrag im Setup Bereich des Templates ein:

…

config.admPanel = 1

…

Wählen Sie im Navigator „Web“ à „Template“. Öffnen Sie jetzt die Seite indem Sie auf das Symbol für „Webseite anzeigen“ im Backend klicken.

Sie bekommen im Browser jetzt am Ende der Seite das „Admin Panel“ angezeigt:

Klicken Sie auf das Plus Symbol um das „Admin Panel“ zu erweitern.

Wählen Sie „TypoScript“ und markieren Sie folgende Optionen und klicken Sie auf „Aktualisieren“.

Klicken Sie jetzt auf die Seite Ihrer Fotogalerie z.B. „Fotos“.

Gehen Sie in der „Admin Panel“ Anzeige nach unten und achten Sie auf die Anzeige von Fehlermeldungen ähnlich der unten angezeigten Meldungen:

oder

Die erste Meldung zeigt uns an das ein Pfad „fileadmin/fileadmin/“ gesucht wird, der natürlich nicht existiert. Hier wurde kein „basepath“ vorgegeben die Standardvorgabe ist „filadmin/“.

Bei der zweiten Meldung wurde ein „basepath“ von „fileadmin/austria/fotos/“ vorgegeben und im Datensatz der Galerie im Feld Pfad wurde nochmals „fileadmin/austria/fotos/“ eingetragen.

Abhilfe:

Berichtigen Sie den in der Art und Weise das keine Verzeichnisnamen verdopplet werden. Bei der ersten Fehlermeldung (unter Ursache) wäre der Pfad im Datensatz der Galerie auf „austria/fotos/erstefotos/“ einzustellen. Im Falle der zweiten Fehlermeldung, darf nur mehr das Unterverzeichnis von „fileadmin/austria/fotos/“ in das Feld Pfad, also „erstefotos/“ eingetragen werden. Vergessen nie denSchrägstrich „/“ am Ende des letzten Verzeichnisnamen anzugeben.

Kontrollieren Sie danach nochmals mit dem „Admin Panel“. Es sollten danach auf der Seite irgendwo ein Eintrag ähnlich den folgenden angezeigt werden:

4.5.7.4 Fehler „Zeige Ergebnisse ###SPAN_BEGIN###...“ wird auf der Fotoseite angezeigt

Ursache:

Abhilfe:

4.6 Grafischen Counter für Website installieren

Einen graphischen Counter für die Zugriffe auf die Website installieren.

Wir verwenden die Extension „bkt_fe_prahiccounter“.

4.7 Installation der RealURL Extension

4.7.1 Installation

Wenn Sie TYPO3 Version 3.8.0 oder 3.8.1 Verwenden Sie die RealURL Version 1.0.0.

Die RealURL Version 1.1.0 ist für die TYPO3 Version 4.x geschrieben und funktioniert nicht mit der vorherigen TYPO3 Versionen.

Es werden sieben Tabelle angelegt und zu „pages“ und „sys_domain“ ein Feld hinzugefügt.

Bei „_.htaccess“ den Unterstrich entfernen.

Den Apache Server neu starten.

Einstellungen im Setup Bereich Ihres Templates damit RealURL aktiviert und der „baseURL“ vorgegeben wird:

…

# RealURL (realurl) Einstellungen

config.simulateStaticDocuments = 0

config.baseURL = 1

config.baseURL = http://www.company.com/cms/

config.tx_realurl_enable = 1

…

Wenn Sie keine Einstellungen in der Datei „typo3conf/locallang.php“ vornehmen werden die URL folgenderweise umgewandelt.

4.7.2 Funktion RealURL

Eingabe URL	TYPO3 ID und Type
http://www.domain.com/	id=0, type=0
http://www.domain.com/termine/6/	id=6, type=0
http://www.domain.com/fotos/5/	id=5, type=0

Einstellungen in der Datei „typo3conf/locallang.php“ für RealURL:

$TYPO3_CONF_VARS['EXTCONF']['realurl']['_DEFAULT'] = array(

'init' => array(

'enableCHashCache' => 0,

// 'appendMissingSlash' => 'ifNoFile',

'firstHitPathCache' => 1,

'preVars' => array(

array(

'GETvar' => 'no_cache',

'valueMap' => array(

'no_cache' => 1,

'noMatch' => 'bypass',

// define language settings

array(

'GETvar' => 'L',

'valueMap' => array(

'de' => '0',

'en' => '1',

'valueDefault' => '0',

'noMatch' => 'bypass',

'pagePath' => array(

'type' => 'user',

'userFunc' => 'EXT:realurl/class.tx_realurl_advanced.php:&tx_realurl_advanced->main',

'spaceCharacter' => '-',

'languageGetVar' => 'L',

'expireDays' => 3,

'fileName' => array(

'defaultToHTMLsuffixOnPrev' => 1,

);

4.7.3 Aufgetretene Fehler

4.7.3.1 Fehler bei „Web“ à „Info“ und Auswahl im Menü „Speaking URL Management“

Fatal error: Call to undefined method t3lib_BEfunc::workspaceol() in /opt/lampp/htdocs/ratten/typo3conf/ext/realurl/modfunc1/class.tx_realurl_modfunc1.php on line 135

Ursache:

Es wurde bei mir die RealURL Version 1.1.0 unter TYPO3 Version 3.8.0 eingesetzt. Diese RealURL Version ist aber für die TYPO3 Version 4.0 geschrieben.

Abhilfe:

Deinstallieren Sie die RealURL Version 1.1.0. Löschen Sie das komplette Verzeichnis „typo3conf/realurl“ und alle Datenbanken im „phpMyAdmin“ die den Text „realurl“ im Datenbanknamen enthalten. Installieren Sie dann die RealURL Version 1.0.0 (ist in den Downloaddateien enthalten).

4.8 Installation der Kalender Extension (jw_calendar)

1. Installieren Sie zuerst die Extension „overLIB“ (overlib) Version 1.1.0

2. Kalender Extension „jw_calendar“ Version 1.3.20 installieren.

3. Kopieren Sie die Datei „jw_calendar.tmpl“ vom Verzeichnis „typo3conf/ext/jw_calendar/“ in das Verzeichnis „fileadmin/templates/“.

<html>

<body>

<div class="title">###listTitle###<br />###categoryTitle###</div>

<tr>

</td>

<b>###dateBegin###</b>

<br />###timeBegin###

<br />###category###

</td>

<b>###title###</b><br />

<i>###teaser###</i><br />

###readMore###

</td>

</tr>

</table>

</div>

<div class="prev_items">###Prev_Events###</div>

<div class="next_items">###Next_Events###</div>

<div class="submit">###submitEvent###</div>

</div>

<div class="title">###viewTitle###:</div>

<div class="category">###category###</div>

</div>

<div class="images">###image###</div>

<span class="itemtitle"><p>###title###<br /></span>

<span class="teaser">###teaser###<br /></span>

<span class="desc">###description###</span>

</p></div>

</div>

<div class="label">###organiserLabel###:</div>

<div class="item">###organiser### <br />###email###</div>

<div class="label">###locationLabel###:</div>

<div class="item">###location###</div>

<div class="label">###beginLabel###:</div>

<div class="item">###begin###</div>

<div class="label">###endLabel###:</div>

</div>

<div class="submit">###submit###</div>

</div>

<div class="title"><p>###viewTitle###</p></div>

<div class="error">###errors###</div>

<div class="timelabel">###beginLabel### *</div>

<div class="item"><b>###beginInput###</b></div>

<div class="timelabel">###endLabel###  </div>

<div class="item"><b>###endInput###</b></div>

<div class="label">###categoryLabel###</div>

<div class="item">###categoryInput###</div>

<div class="label">###titleLabel### *</div>

<div class="item">###titleInput###</div>

<div class="label">###teaserLabel###  </div>

<div class="item">###teaserInput###</div>

<div class="label">###descriptionLabel### *</div>

<div class="item">###descriptionInput###</div>

<div class="label">###imageLabel###  </div>

<div class="item">###imageInput###</div>

<div class="label">###linkLabel###  </div>

<div class="item">###linkInput###</div>

<div class="label">###locationLabel### *</div>

<div class="item">###locationInput###</div>

<div class="label">###organiserLabel### *</div>

<div class="item">###organiserInput###</div>

<div class="label">###emailLabel### *</div>

<div class="item">###emailInput###</div>

<div class="submit">###submit###</div>

</div>

<div class="errors">###dbError###</div>

<div class="conftext">###thxForEntryMessage###</div>

<div class="submit">###confirmEntry###</div>

</div>

<div class="title">###VIEW_TITLE### - ###TIME_INFO###</div>

<div class="selector">###CATEGORYTITLE###</div>

<tr>

<td>

</table>

</td>

<td>

<tr>

</tr>

</table>

</td>

<td>

</table>

</td>

</tr>

</table>

</div>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</div>

<div class="submit">###submitEvent###</div>

</div>

<div class="title"><b>###VIEW_TITLE### </b><br /> ###TIME_INFO###</div>

<div class="selector">###CATEGORYTITLE###</div>

<tr>

<tr>

</tr>

</table></td>

</tr>

<tr>

<td>

<tr>

</tr>

<tr>

</tr>

</table>

</td>

</tr>

</table>

</div>

<tr>

###DAY###

</td>

###IMG###

</td>

</tr>

</table>

<tr>

###CAT###

</td>

###ITEM###

</td>

</tr>

</table>

<tr>

###CAT###

</td>

</tr>

<tr>

###ITEM###

</td>

</tr>

</table>

<div class="title">###title###:</div>

</div>

<div class="images">###image###</div>

<span class="desc">###description###</span>

</p></div>

</div>

<div class="label">###address_label###:</div>

<div class="addritem">###addr_name###<br />###street###</div>

<div class="label">###phone_label###:</div>

<div class="item">###phone###</div>

<div class="label">###email_label###:</div>

<div class="item">###email###</div>

<div class="label">###link_label###:</div>

</div>

</div>

<div class="title">###title###:</div>

</div>

<div class="images">###image###</div>

<span class="name"><p>###location###<br /></span>

<span class="desc">###description###</span>

</p></div>

</div>

<div class="label">###address_label###:</div>

<div class="addritem">###name###<br />###street###</div>

<div class="label">###phone_label###:</div>

<div class="item">###phone###</div>

<div class="label">###email_label###:</div>

<div class="item">###email###</div>

<div class="label">###link_label###:</div>

</div>

</div>

</DIV>

</body>

</html>

4. Kopieren Sie die Datei „jw_calendar.css“ vom Verzeichnis „typo3conf/ext/jw_calendar/“ in das Verzeichnis „fileadmin/styles/“.

/* default styles for extension "tx_jwcalendar_pi1" */

div.tx-jwcalendar-pi1{

font-family: Verdana, sans-serif;

font-size: 11px;

text-align: center; color:#193A72;

}

div.tx-jwcalendar-pi1 img{

border:0;

}

div.tx-jwcalendar-pi1 a, div.tx-jwcalendar-pi1 table a{

/* text-decoration:none;*/

text-decoration:none;

color: #692287;

}

div.tx-jwcalendar-pi1 a:hover,div.tx-jwcalendar-pi1 table a:hover{

color: red;

}

div.tx-jwcalendar-pi1 input{

clear:both;

background: #FBE29F;

border-top:2px #FCF6E5 solid;

border-left:2px #FCF6E5 solid;

border-right:2px #FECC3C solid;

border-bottom:2px #FECC3C solid;

text-align:center; margin:10px;

padding: 3px 14px;

}

div.tx-jwcalendar-pi1 .tx_jw_input_text{

width:260px;

border:1px #FECC3C solid;

padding:3px;

height:23px;

}

div.tx-jwcalendar-pi1 .tx_jw_select{

font-size:11px;

border:0px;

}

div.tx-jwcalendar-pi1 .tx_jw_textarea{

font-size:12px;

height:120px;

width:260px;

padding:3px;

border:1px #FECC3C solid;

}

div.tx-jwcalendar-pi1 .tx_jw_input_button{

font-size:12px;

background: #FBE29F;

text-align:center;

margin:4px 10px;

padding:2px 4px;

}

/********************************************/

/*****************LIST view ****************/

/********************************************/

div.jwcalendar_list{

width:100%;

background-color:#FDF2D2;

font-family: Verdana, sans-serif;

font-size: 12px;

color:#193A72;

border: 1px #FFC725 solid;

margin:10px 0;

}

div.jwcalendar_list .title{

font-size: 14px;

font-weight: bold;

color:#193A72;

padding: 8px 5px;

}

div.jwcalendar_list .prev_items{

float:left;

font-size: 11px;

font-weight: bold;

text-align:left;

color:#193A72;

padding:8px 0 0 16px;

}

div.jwcalendar_list .next_items{

float:right;

font-size: 11px;

font-weight: bold;

text-align:right;

color:#193A72;

padding:8px 0 0 16px;

}

div.jwcalendar_list .next_items{

}

div.jwcalendar_list .itemslist{

padding:0 10px;

}

div.jwcalendar_list table.items{

width:100%;

font-family: Verdana, sans-serif;

font-size: 11px;

text-align:left;

line-height:1.4em;

empty-cells:show;

border-collapse:separate;

border-collapse:collapse;

border-spacing:0;

border: 1px #FFC725 solid;

}

div.jwcalendar_list table.items td.label{

background:#FCECC0;

width:33%;

vertical-align:top;

border: 1px #FFC725 dotted;

padding:5px;

}

div.jwcalendar_list table.items td.item{

background:#FBE29F;

width:67%;

border: 1px #FFC725 dotted;

vertical-align:top;

padding:5px;

}

div.jwcalendar_list table.items p{

font-size: 11px;

padding:0;

}

div.jwcalendar_list table.items p{

font-size: 11px;

padding:0;

}

div.jwcalendar_list .submit{

clear:both;

font-size: 11px;

padding:0;

}

/********************************************/

/*****************WEEK view ****************/

/********************************************/

div.jwcalendar_week{

width:100%;

background-color:#FDF2D2;

font-family: Verdana, sans-serif;

font-size: 12px;

color:#193A72;

border: 1px #FFC725 solid;

margin:10px 0;

}

div.jwcalendar_week .prev_week{

margin:4px 120px 0px 10px;

float:left;

}

div.jwcalendar_week .selector{

margin:4px 0 0 0;

float:left;

}

div.jwcalendar_week .next_week{

text-align:right;

margin:4px 10px 0px 120px;

}

div.jwcalendar_week table.days{

clear:both;

font-family: Verdana, sans-serif;

font-size: 12px;

width:100%;

line-height:1.4em;

border-collapse:collapse;

empty-cells:show;

border-spacing:0;

border:1px solid #FFC725;

margin:8px;

}

div.jwcalendar_week table.days td.dayname{

text-align:right;

vertical-align:top;

border:1px solid #FFC725;

padding:2px 8px 0 4px;

}

div.jwcalendar_week table.day_events,div.jwcalendar_week table.times {

background:#FBE29F;

font-family: Verdana, sans-serif;

font-size: 12px;

width:100%;

border-collapse:collapse;

empty-cells:show;

border-spacing:0;

}

div.jwcalendar_week table.times {

border:1px solid #FFC725;

}

div.jwcalendar_week table.times td.time{

border-left:2px solid #FFC725;

border-right:2px solid #FFC725;

}

div.jwcalendar_week table.days a{

text-decoration:none;

}

div.jwcalendar_week table.days td.time{

font-family: Verdana, sans-serif;

font-size: 11px;

text-align:center;

}

div.jwcalendar_week table.days td.event_time{

height:4px;

padding:0;

margin: 0px;

}

div.jwcalendar_week table.days td.event{

font-family: Verdana, sans-serif;

font-size: 11px;

vertical-align:top;

padding:4px 2px;

margin: 0px;

}

div.jwcalendar_week table.days td.event a{

font-family: Verdana, sans-serif;

font-size: 11px;

}

/********************************************/

/*****************MONTH view ****************/

/********************************************/

div.jwcalendar_month{

width:100%;

background-color:#FDF2D2;

font-family: Verdana, sans-serif; font-size: 12px;

color:#193A72;

border: 1px #FFC725 solid;

margin:10px 0;

}

div.jwcalendar_month .title{

clear:both;

text-align: center;

font-size: 14px;

font-weight:bold;

color: #333;

padding:5px 0;

}

div.jwcalendar_month .navi, div.jwcalendar_month .days_view{

padding:0 10px;

}

/********************/

/*****tables navi******/

/*******************/

div.jwcalendar_month table.navs{

width:100%;

}

div.jwcalendar_month table.months, div.jwcalendar_month table.year{

width:100%;

font-family: Verdana, sans-serif;

font-size: 11px;

font-weight:bold;

text-align:center;

empty-cells:show;

border-collapse:separate;

border-spacing:10px;

}

div.jwcalendar_month table.year {

font-size: 12px;

border-spacing:5px;

}

div.jwcalendar_month table.months td, div.jwcalendar_month table.year td{

}

div.jwcalendar_month table.months td.other_month, div.jwcalendar_month table.year td.last_year, div.jwcalendar_month table.year td.next_year{

background: #FBE29F;

border-top:2px #FCF6E5 solid;

border-left:2px #FCF6E5 solid;

border-right:2px #FECC3C solid;

border-bottom:2px #FECC3C solid;

padding:15px 5px;

}

div.jwcalendar_month table.months td.other_month{

padding:5px;

}

div.jwcalendar_month table.months td.current_month{

background: #FBE29F;

border-right:2px #FCF6E5 solid;

border-bottom:2px #FCF6E5 solid;

border-top:2px #FECC3C solid;

border-left:2px #FECC3C solid;

padding:5px;

}

/******************/

/****table days******/

******************/

/*div.jwcalendar_month .days_view table{*/

div.jwcalendar_month table.days{

font-family: Verdana, sans-serif;

font-size: 11px;

width:100%;

line-height:1.4em;

border-collapse:collapse;

empty-cells:show;

border-spacing:0;

border:1px solid #FFC725;

padding:0;

}

div.jwcalendar_month table.days a{

text-decoration:none;

}

div.jwcalendar_month table.days td{

vertical-align:top;

border:dotted 1px #FFC725;

padding:4px;

}

div.jwcalendar_month table.days td.week{

background:#FBE29F;

font-weight:bold;

}

div.jwcalendar_month table.days td.dayname{

background:#FBE29F;

font-weight:bold;

text-align:center;

}

div.jwcalendar_month table.days,div.jwcalendar_month table.days td.inside,div.jwcalendar_month table.days td.today,div.jwcalendar_month table.days td.inside_weekend,div.jwcalendar_month table.days td.today_weekend,div.jwcalendar_month table.days td.outside_weekend{

font-weight:bold;

}

div.jwcalendar_month table.days a,div.jwcalendar_month table.days td.inside a,div.jwcalendar_month table.days td.today_inside a,div.jwcalendar_month table.days td.inside_weekend a,div.jwcalendar_month table.days td.today_weekend a,div.jwcalendar_month table.days td.outside_weekend a{

font-weight:bold;

color:blue;

}

div.jwcalendar_month table.days td.today{

background: #F9F4E7;

border:solid 2px #CD9705;

border:solid 1px #AD1602;

}

div.jwcalendar_month table.days td.outside_weekend,div.jwcalendar_month table.days td.outside{

background:#EAEAEB;

border:dotted 1px #F9DF94;

}

div.jwcalendar_month table.days td.inside_weekend{

background:#FCECC0;

}

/***********************/

/*****table singleday******/

/**********************/

div.jwcalendar_month table.singleday,div.jwcalendar_month table.singleday td,div.jwcalendar_month table.singleday td a,div.jwcalendar_month table.singleday a{

font-weight:bold;

font-family: Verdana, sans-serif;

font-size: 11px;

width:100%;

line-height:1.0em;

border-collapse:collapse;

empty-cells:show;

border-spacing:0px;

border:0px solid #ddd;

padding:0px;

margin:0 0 2px 0;

}

div.jwcalendar_month table.singleday{

background: #eee;

border:1px dotted #ddd;

}

div.jwcalendar_month table.singleday td{

border:0px solid #ddd;

padding:3px 0;

}

/*********************/

/*****table dayitem******/

/*********************/

div.jwcalendar_month table.dayitem,div.jwcalendar_month table.dayitem a{

font-weight:normal;

font-family: Verdana, sans-serif;

font-size: 11px;

width:100%;

line-height:1.0em;

border-collapse:collapse;

empty-cells:show;

border-spacing:0px;

border:1px solid #ddd;

padding:0px;

margin:1px 0;

}

div.jwcalendar_month table.dayitem td.item,div.jwcalendar_month table.dayitem td.item a{

color:#333;

text-decoration:none;

font-weight:normal;

border:0;

}

div.jwcalendar_month table.dayitem td.itemcat,div.jwcalendar_month table.dayitem td.itemcat a{

font-weight:normal;

color:#333;

text-decoration:none;

font-size: 8px;

padding:0px;

Cursor:help;

width:2px;

border:0;

}

/********************************************/

/*****************SINGLE view ****************/

/*******************************************/

div.jwcalendar_single{

background-color:#FDF2D2;

border: 1px #FFC725 solid;

padding:10px 10px;

}

div.jwcalendar_single .content,div.jwcalendar_single .header,div.jwcalendar_single .org{

width:100%;

clear:both;

}

div.jwcalendar_single .contentie,div.jwcalendar_single .headerie,div.jwcalendar_single .orgie{

float:left;

width:100%;

text-align:left;

border-left: 1px #FFC725 dotted;

border-right: 1px #FFC725 dotted;

border-bottom: 1px #FFC725 dotted;

background:#FCECC0;

}

div.jwcalendar_single .headerie{

border-top: 1px #FFC725 dotted;

}

div.jwcalendar_single .contentie{

background:#FBE29F;

}

div.jwcalendar_single .title, div.jwcalendar_single .category{

float:left;

font-size: 14px;

text-align:left;

font-weight:bold;

padding:4px 8px 8px 8px;

}

div.jwcalendar_single .catcolor{

float:none;

font-size: 2px;

padding:0;

}

div.jwcalendar_single .category{

float:none;

font-size: 12px;

font-weight:normal;

padding:6px 8px 8px 8px;

}

div.jwcalendar_single .images{

float:left;

padding:10px 8px;

margin:0px;

}

div.jwcalendar_single .itemtext{

margin:8px;

}

div.jwcalendar_single .itemtitle p:first-letter{

font-size: 15px;

font-weight:bold;

color:red;

}

div.jwcalendar_single .itemtitle p:first-line{

font-size: 13px;

font-weight:bold;

line-height:1.2em;

}

div.jwcalendar_single .teaser{

font-weight:bold;

font-style:italic;

line-height:1.8em;

}

div.jwcalendar_single .desc{

font-size: 11px;

}

div.jwcalendar_single .itemlink{

line-height:1.8em;

}

div.jwcalendar_single .label, div.jwcalendar_feEntry .label,div.jwcalendar_feEntry .timelabel{

clear:both;

float:left;

text-align:right;

font-weight:bold;

width:33%;

padding:4px 8px;

}

div.jwcalendar_single .item, div.jwcalendar_feEntry .item{

text-align:left;

padding:4px 4px 4px 32%;

}

/********************************************/

/*****************feEntry view ****************/

/********************************************/

div.jwcalendar_feEntry{

background-color:#FDF2D2;

border: 1px #FFC725 solid;

padding:8px;

}

div.jwcalendar_feEntry .label,div.jwcalendar_feEntry .timelabel{

vertical-align:bottom;

line-height:1.6em;

padding:8px 8px;

width:32%;

}

div.jwcalendar_feEntry .timelabel{

width:20%;

}

div.jwcalendar_feEntry .title{

font-size:14px;

font-weight:bold;

color:blue; text-align:left;

line-height:1.0em;

padding:0px 8px;

}

div.jwcalendar_feEntry .title p:first-letter{

font-size:20px;

}

div.jwcalendar_feEntry .item{

text-align:left;

padding:8px 8px;

}

div.jwcalendar_feEntry .fileitem{

text-align:left;

padding:8px 8px;

width:30px;

}

div.jwcalendar_feEntry input{

clear:none;

background: white;

border-top:2px #FCF6E5 solid;

border-left:2px #FCF6E5 solid;

border-right:2px #FECC3C solid;

border-bottom:2px #FECC3C solid;

text-align:left;

font-size:12px;

margin:0;

padding: 0;

}

div.jwcalendar_feEntry .error ul li{

list-style:circle inline;

text-align:left;

font-size:12px;

color:red;

margin:4px 40px;

}

div.jwcalendar_feEntry .error ul li:first-letter{

font-size:16px; font-weight:bold;

}

div.jwcalendar_confirm .error{

font-size:12px;

color:red;

margin:10px;

}

div.jwcalendar_confirm .conftext{

font-size:14px;

margin:10px;

}

/************************************************/

/*****************ORGANIZER view ****************/

/***********************************************/

div.jwcalendar_organizer, div.jwcalendar_location{

background-color:#FDF2D2;

border: 1px #FFC725 solid;

padding:10px 10px;

}

div.jwcalendar_organizer .content,div.jwcalendar_organizer .header,div.jwcalendar_organizer .org, div.jwcalendar_location .content,div.jwcalendar_location .header,div.jwcalendar_location .org{

width:100%;

clear:both;

}

div.jwcalendar_organizer .contentie,div.jwcalendar_organizer .headerie,div.jwcalendar_organizer .orgie,div.jwcalendar_location .contentie,div.jwcalendar_location .headerie,div.jwcalendar_location .orgie{

float:left;

width:100%;

text-align:left;

border-left: 1px #FFC725 dotted;

border-right: 1px #FFC725 dotted;

border-bottom: 1px #FFC725 dotted;

background:#FCECC0;

}

div.jwcalendar_organizer .headerie,div.jwcalendar_location .headerie{

border-top: 1px #FFC725 dotted;

}

div.jwcalendar_organizer .contentie,div.jwcalendar_location .contentie{

background:#FBE29F;

}

div.jwcalendar_organizer .title,div.jwcalendar_location .title{

float:left;

font-size: 14px;

text-align:left;

font-weight:bold;

padding:4px 8px 8px 8px;

}

div.jwcalendar_organizer .text,div.jwcalendar_location .text{

margin:8px;

}

div.jwcalendar_location .name,div.jwcalendar_organizer .name{

font-size: 14px;

text-align:l eft;

font-weight:bold;

padding:0;

}

div.jwcalendar_location .name p:first-letter,div.jwcalendar_organizer .name p:first-letter{

font-size: 15px;

font-weight:bold;

color:red;

}

div.jwcalendar_location .name p:first-line,div.jwcalendar_organizer .name p:first-line{

font-size: 13px;

font-weight:bold;

line-height:1.2em;

}

div.jwcalendar_location .images,div.jwcalendar_organizer .images{

float:left;

padding:10px 8px;

margin:0px;

}

div.jwcalendar_location .desc,div.jwcalendar_organizer .desc{

font-size: 11px;

}

div.jwcalendar_location .label,div.jwcalendar_organizer .label{

clear:both;

float:left;

text-align:right;

font-weight:bold;

width:33%;

padding:4px 4px;

}

div.jwcalendar_location .item,div.jwcalendar_organizer .item{

text-align:left;

padding:4px 4px 4px 32%;

}

div.jwcalendar_location .addritem,div.jwcalendar_organizer .addritem{

text-align:left;

padding:4px 4px 0px 32%;

}

div.jwcalendar_location .cityitem,div.jwcalendar_organizer .cityitem{

text-align:left;

padding:0px 4px 8px 32%;

}

.jwcalendar_olbg {

border: solid 0px #003399;

background-color: #6666CC;

}

.jwcalendar_olfg {

border: 0px;

background-color: #EEEEEE;

padding:4px 6px;

text-align:left;

}

.jwcalendar_olcf {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

line-height: 2em;

font-weight: bold;

color: #FFFFFF;

}

.jwcalendar_oltf {

font-family: Verdana, Arial, Helvetica, sans-serif;

font-size: 10px;

color: #000000;

}

5. Führen Sie in die gewünschten Änderungen in den kopierten Dateien „jw_calendar.tmpl“ und in der Datei „jw_calendar.css“ durch.

4.8.1 Aufgetreten Fehler in „jw_calendar“

4.8.1.1 Fehler Extension „overlib“ nicht geladen

TYPO3 Fatal Error: Extension key "overlib" was NOT loaded! (t3lib_extMgm::extPath)

Ursache:

Die Extension „overlib“ wurde nicht installiert.

Abhilfe:

Installieren Sie die Extension „overlib“.

4.8.1.2 Fehler bei Auswahl aus den Dropdownfelder wird Seite nicht gefunden

Error. Reason: "austria/mitglieder/austria/mitglieder/kalender.html" could not be found, closest page matching is austria/mitglieder/

Ursache:

Durch die Verwendung der RealURL Extension wird der Pfad der aufgerufen wird verdoppelt.

Abhilfe:

Noch keine. Hier muss der Quellcode umgeschrieben werden damit der komplette Query an die Optionen als Links übergeben wird.

4.9 Installation der Extension Full Backup (w4x_backup)

1. Extension „w4x_backup“ Version installieren.

5 Zusätzliche Konfigurationen

5.1 Sicherheitseinstellungen

Es gibt unter TYPO3 eine Vielzahl von Maßnahmen die zur Erhöhung der Sicherheit der Website angewendet werden können. Wie wollen einige davon auf unsere Website einsetzen.

5.1.1 Spam Schutz durch Email-Adressen Umwandlung

Inhalt des Setup Bereiches:

…

# Einschalten des Spam Schutzes (benötigt alerdings Java) und Angaben in welches Symbol @ umgewandelt werden soll

config.spamProtectEmailAddresses = -2

config.spamProtectEmailAddresses_atSubst = (at)

…

Folgendes Script wird automatisch in den Quellcode der Webseite dynamisch eingefügt:

// JS function for uncrypting spam-protected emails:

function UnCryptMailto(s) { //

var n=0;

var r="";

for(var i=0; i < s.length; i++) {

n=s.charCodeAt(i);

if (n>=8364) {n = 128;}

r += String.fromCharCode(n-(-2));

}

return r;

}

// JS function for uncrypting spam-protected emails:

function linkTo_UnCryptMailto(s) { //

location.href=UnCryptMailto(s);

}

Eine Email Adresse wird im Quellcode dann folgenderweise angezeigt:

<p><a href="javascript:linkTo_UnCryptMailto('k_gjrm8qcapcr_pw>p_rrcl+ka,bc');">office(at)company.com</a></p>

5.1.2 Den Aufruf des Browser Kontextmenü nicht erlauben

Wenn Sie wollen, dass der Benutzer Ihrer Website das Kontextmenü des Browsers nicht verwenden kann, können Sie folgenden Eintrag im Setup vornehmen:

…

page = PAGE

…

page.bodyTag = <body bgcolor="#000000" oncontextmenu="return false">

…

Zusätzlich wird in der obigen Einstellung auch noch die Hintergrundfarbe für den ganzen „Body“ Abschnitt auch schwarz umgestellt.