Typo3 kurz und gut by valentin schübl

kurz und gut 2. Auflage

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

Seite 2

16.11.2012

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

Über TYPO3 TYPO3 ist ein kostenlos erhältliches Open Source Content Management System, für das Internet, Intranet und Extranet. TYPO3 bietet Funktionen und Module sowie eine Erweiterungsschnittstelle für ein Maximum an Einsatzmöglichkeiten.

Das sagt WIKIPEDIA http://de.wikipedia.org/wiki/Typo3 TYPO3 ist ein freies Content-Management-Framework für Websites, welches seit Oktober 2012 offiziell unter dem NamenTYPO3 CMS vertrieben wird. Es wurde ursprünglich von Kasper Skårhøj entwickelt. TYPO3 basiert auf der SkriptsprachePHP. Als Datenbank kann MySQL, aber auch etwa PostgreSQL oder Oracle eingesetzt werden. Das System wird von Core-Teams, weiterentwickelt, welches sich in zwei SubTeams aufteilen: Einem für TYPO3 CMS und einem für TYPO3 Neos. Die Marke TYPO3 dient seit Oktober 2012 zudem als Dach für eine Reihe einzelner Produkte. Der Name TYPO3 stammt daher, dass Skårhøj durch einen Tippfehler (englisch „typo“) bei der Entwicklung einen Teil seiner Arbeit verlor. Die Zahl „3“ wurde dem Namen schließlich angehängt, nachdem die dritte Version des Systems durch ihren Erfolg als eine Art Marke bekannt wurde. Zahlreiche Funktionen von TYPO3 können mit Erweiterungen integriert werden, ohne dass ein eigener Programmcodegeschrieben werden muss. Die derzeit über 5000 Erweiterungen stammen zum größten Teil von anderen Anbietern und sind kostenlos verfügbar. Erhältlich sind unter anderem News, Shop-Systeme oder Diskussionsforen. Das System ist auf Mehrsprachigkeit ausgelegt und wird von einer Anwender- und Entwicklergemeinde aus aller Welt betreut. TYPO3 gehört zusammen mit Drupal, Joomla! und WordPress zu den bekanntesten Content-Management-Systemen aus dem Bereich der freien Software, und wird vor allem im deutschen Sprachraum sehr häufig eingesetzt.

Seite 3

16.11.2012

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

Also: Legen wir los! Sie benötigen eine TYPO3 Umgebung mit eigenen Zugangsdaten und etwas Zeit zum kreativen Schaffen.

1. Übung (Zugang zum Backend) Als Beispiel der Domain nehmen wir die Website: www.memoweb.ch zum Login gelangen wir über den zusätzlichen Eintrag im Pfad www.memoweb.ch/typo3 Ihre Zugangsdaten können Sie unten eintragen.

Domainname: Benutzername: Password:

__________________________________ __________________________________ __________________________________

So sieht eine Zugangsseite aus:

Nun den Usernamen und das Passwort eingeben und auf die Schaltfläche Anmelden klicken

Seite 4

16.11.2012

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

und wir sind eingeloggt.

Nun kann der Seitenbaum angesehen werden: Mit einem Klick auf Seite:

Wir können uns auch die Dateiliste ansehen. Klick auf die Dateiliste: Geschafft, die wichtigste Aktivität ist gelungen, eingeloggt und bereit zum Arbeiten.

Seite 5

16.11.2012

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

2. Übung (Seiteninhalt anlegen) Nun wollen wir mit der eigentlichen Arbeit in Typo3 beginnen, wir legen einen neuen Seiteninhalt an.

Wir klicken auf Seite, dann auf die gewünschte Seite im Seitenbaum z.B. neue Seite. Es öffnet sich ein neues Fenster:

Hier können wir nun den neuen Inhalt anlegen.

Es kann eine der oben stehenden Möglichkeiten ausgewählt werden. Wir wählen: Normaler Text

Seite 6

16.11.2012

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

Es öffnet sich das Bearbeitungsfenster für unseren neuen Text. Der Inhalt lässt sich so einfach erstellen wie ein Brief in einer Textverarbeitung.

Der rote Bereich ist für die Überschrift der blaue für den Inhalt. Schliesslich wird der Text mit einem am oberen oder unteren Rand existierenden Diskettensymbol gespeichert.

So sieht der Text im Web aus.

Seite 7

16.11.2012

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

Sie haben gerade eben ein Inhaltselement angelegt, Der Inhalt einer Webseite kann aus vielen Inhaltselementen bestehen. Es ist von Vorteil, einen Inhalt in verschiedene Inhaltselemente aufzuteilen.

-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------

Seite 8

16.11.2012

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

3. Übung (Der Dateimanager von Typo3 und das Hochladen von Dateien, Bildern oder Videos) Bevor wir uns an die fortgeschrittene Inhaltsgestaltung wagen, also von Grafikeinbindung, Download-Angeboten (pdf-Dokumente) oder von Verlinkung sprechen, brauchen wir einen Ort auf unserem Server, wo wir Bilder, Dokumente oder Videos ablegen können. Die Rede ist vom Typo3-Dateimanager, der von Typo3 als Dateiliste bezeichnet wird. Wenn wir auf den Auswahlpunkt Dateiliste geklickt haben, sehen wir in der Spalte daneben den Dateibaum von Typo3.

Anlegen eines neuen Ordners Wir klicken dazu auf die Dateiliste, dann auf den gewünschten Ordner. Wir legen dort unseren eigenen neuen Ordner an.

z.B. Kundenordner

dann Neu

anklicken.

Seite 9

16.11.2012

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

den Ordner beschriften und auf Ordner anlegen klicken.

Sie können beliebig viele Ordner anlegen (Sie sollten aber bestehende Ordner, welche Sie nicht angelegt haben, nicht löschen), denn auch Typo3 legt hier seine Systemdateien ab. Sind alle Ordner nach Ihren Wünschen angelegt, können wir uns dem nächsten Schritt, dem Datei-Upload zuwenden.

Seite 10

16.11.2012

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

4. Übung (Hochladen von Dateien in Ihr TYPO3-System Wir lernen nun das Hochladen einer Datei in den erstellten Ordner. Wir klicken auf den Namen des gewünschten Ordners. Wir sind wie vorher in einem Ordner und können dessen Inhalt bearbeiten, neuen Inhalt hochladen oder Ordner anlegen. Wir klicken auf das Hochladen-Symbol

Nun können wir Ihren PC nach der hochzuladenden Datei durchsuchen, diese anklicken und zum Schluss öffnen anklicken. Wir shen im Ordner, ob die Datei erfolgreich auf den Server geladen wurde.

Seite 11

16.11.2012

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

5. Übung (Inhaltselement Bild und Text einfügen) Wenn wir unsere gewünschten Bilder in der Dateiliste abgespeichert haben, können wir ein neues Inhaltselement einfügen (Text und Bilder)

Wir wählen Text mit Bild

Zuerst können die Überschrift und der Text eingegeben werden, wie wir dies schon einmal gemacht haben. Dann werden wir in dieses Inhaltselement noch ein Bild einfügen. Um dies zu realisieren, müssen wir in der Registerkarte Bilder dieses Feld suchen und den Ordner anklicken

Es wird ein neues Fenster geöffnet mit der Dateiliste, Jetzt öffnen wir den gewünschten Ordner, in unserem Beispiel den Ordner Neuer Ordner und wir sehen unsere Bilder.

Seite 12

16.11.2012

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

Das gewünschte Bild kann angeklickt werden und erscheint nun im Feld.

Jetzt noch den Bildtext eingeben. Pro Zeile wird ein Bild beschrieben.

Soll das Bild auf der Homepage mit einem „Klick“ auf die Originalgrösse vergrössert werden können, setzen wir bei Klick-vergrössern und ColorBox Slideshow ein Häklein.

Seite 13

16.11.2012

www.memoweb.ch • Kanderstegstrasse 40 • 3714 Frutigen • Tel. 033 44 200 44 • Webdesign für Sie!

Danach legen wir die Breite oder die Höhe des Bildes fest.

Nun müssen wir unseren Text und das Bild noch positionieren. Dazu klicken wir auf die Registerkarte Erscheinungsbild und wählen die Position Oben mittig (bezieht sich nur auf das Bild, nicht auf den Text). Bei diesem Beispiel benötigen wir nur eine Spalte (mehrere Spalten benötigen wir bei mehreren Bildern).

Wir speichern und das Ergebnis steht 1:1 im WEB.

Seite 14

16.11.2012