TYPO3 Videotutorial - Videos zur Einführung in TYPO3: NBproMedia WebDesign GbR, Bayreuth, Oberfranken

Video Text

Hier sehen Sie ein Video, wenn Sie JavaScript aktivieren und den neusten Flashplayer installieren.

In diesem Video gebe ich Ihnen einen kurzen Überblick über die Benutzeroberfläche von TYPO3.

Die Seite, die Sie hier sehen hat noch ziemlich wenig Inhalt. Um das zu ändern klicke ich in die Adresszeile des Browsers und tippe „typo3“ hinter die Webseitenadresse ein. So öffnet man den Anmeldebereich von TYPO3.
Wenn man jetzt den Benutzernamen und das Passwort eingibt, kommt man zur eigentlichen Benutzeroberfläche.
Falls die Oberfläche bei Ihnen etwas anders aussieht, liegt das daran, dass Sie eine andere Version von TYPO3 nutzen, die Funktionen sind aber im Prinzip alle ähnlich.

Die Benutzeroberfläche besteht aus 3 Bereichen. In der Mitte ist der große Hauptarbeitsbereich. Hier werden alle Arbeiten an der Webseite durchgeführt. In der Leiste oben können Sie neben Ihrem Benutzernamen und dem Abmeldebutton auch noch weitere hilfreiche Werkzeuge finden, die ich Ihnen noch in weiteren Tutorials erkläre. Links in dem Menü befinden sich alle Module von TYPO3. Von hier aus können Sie Dateien hochladen, sich eine Vorschau der Webseite anzeigen lassen, und Inhalte einfügen.

Ich klicke jetzt mal auf „Seite“, um den Text auf der Startseite zu bearbeiten. Nun wird der große Bereich nochmals aufgeteilt. Neben dem Menü sieht man den Seitenbaum, der alle vorhandenen Seiten und Unterseiten darstellt. Daneben befindet sich der Bearbeitungsbereich. Um eine Seite zu bearbeiten klickt man sie einfach an.

Hier sieht man die Bereiche der Webseite. Welche das bei Ihnen sind richtet sich nach Ihrem Design. Hier sind es rechts einmal die graue Leiste, die Sie am Anfang des Videos gesehen haben und der weiße Hauptinhaltsbereich auf der linken Seite. Zur Zeit gibt es nur ein Inhaltselement in der linken Spalte. Wenn ich das bearbeiten möchte, klicke ich entweder auf das kleine Bleistiftsymbol oder einfach mitten in den Text hier. Da ich den Text bearbeiten möchte, klicke ich auf den Reiter Text. Jetzt kann ich z.B. "Herzlich Willkommen!" anstatt des bereits vorhandenen Textes hier rein schreiben.

So, das speichere ich mal und sehe es mir dann auch gleich an ...

... und schon steht auf der Startseite „Herzlich Willkommen!“.

Video Text

Hier sehen Sie ein Video, wenn Sie JavaScript aktivieren und den neusten Flashplayer installieren.

Um eine neue Seite zu erstellen, klicken sie zunächst auf das Modul Seite.

Hier werden alle Veränderungen an der Internetseite durchgeführt. Nun sieht man den Seitenbaum, der alle verfügbaren Seiten und Unterseiten darstellt und das Bearbeitungsfenster rechts daneben.

Wenn eine Seite Unterseiten hat kann man sie mit dem kleinen Pfeil am Seitenbau auf und zuklappen. Ältere Typo3 Versionen haben eventuell ein Plus-/Minuszeichen. Wenn ich einen Rechtsklick auf eine Seite mache und dann auf ansehen klicke, kann ich mir die Seite in einem neuen Fenster anzeigen lassen. Eventuell müssen sie ihrem Browser dafür erlauben Popups zu öffnen.

Hier kann man jetzt genau die Struktur des Seitenbaums von Typo3 wiederfinden. Diese Seite ist im Menü oben, diese hier sind die Unterseiten.

Jetzt möchte ich eine Seite erstellen, die nach der Unterseite 2.3 erscheinen soll.
Dazu habe ich 2 Möglichkeiten. Erstmal klicke ich auf die Seite, die sich direkt in der Umgebung von der Seite befindet, die ich neu erstellen möchte. In diesem Fall die Unterseite 2.3. Jetzt kann ich auf dieses kleine Symbol da oben klicken. Nun erscheint ein Menü in dem ich auswählen kann wo meine neue Seite erscheinen soll. Mit diesen Pfeilen wähle ich die Position aus.

Es gibt aber noch eine zweite Möglichkeit, die ich Ihnen auch zeigen möchte. Dazu klicke ich erstmal wieder auf die Unterseite 2.3. Jetzt mache ich einfach einen Rechtsklick auf die Unterseite 2.3. Dann erscheint das Menü, in dem ich vorhin schonmal auf "ansehen" geklickt habe. Dort gibt es auch den Punkt "neu". Und wie man sieht erscheint ein ähnliches Menü wie eben, nur dass ich jetzt keine Pfeile zum auswählen habe, sondern die Positionen direkt anwählen kann.

Man sieht hier einige Felder. Zunächst einmal das Feld "Seite verbergen". Das ist standardmäßig aktiviert. Bei diesen Unterseiten von Startseite kann man das gut sehen. Die sind zwar schon angelegt, aber da sie keinen Inhalt enthalten, sind sie für Besucher der Webseite noch nicht zu sehen. Diese Funktion ist sehr praktisch.
Man kann die Seite ganz in Ruhe bearbeiten und anzeigen lassen wenn sie fertig ist.

Wenn man die Seiten anzeigen lassen will, klickt man wieder mit der rechten Maustaste auf die Seite und wählt hier "sichtbar machen" aus.

Die rechte Maustaste sollten Sie sich merken! Mit ihr kann man hier sehr viel steuern.

Nun wieder zurück zu unserer Seite. Die Seite braucht einen Seitentitel. Der wird dann auch im Menü der Webseite angezeigt. Ich gebe hier mal "Unterseite 2.4" ein. Wenn man möchte das in der Adresszeile des Browsers und natürlich dann auch in Links ein anderer Name für die Seite erscheint, schreibt man das Feld "Adress-Alias". Den Navigationstitel verwendet man, wenn man möchte, dass zwar die Seite "Unterseite" heißt, aber im Menü der Webseite ein anderer Titel stehen soll, also genau anderes herum wie "Adress-Alias". Ich lass aber jetzt alles so wie es ist.

Sehr wichtig sind die Metadaten. Die sollten nicht vergessen werden! Denn das ist der Text der unter anderem auch für die Suchmachinen wichtig ist. Die Beschreibung hier unten ist das, was z. B. in den Suchergebnissen angezeigt wird.

Ich gebe hier mal ein: "Testseite zum Lernen wie Typo3 funktioniert". Hier oben kommen Suchbegriffe hinein.
Beispielsweise "Testseite", "Videotutorial" und "Typo3". Ganz oben gebe ich noch den Autor an.

Es bringt aber nichts hier wie wild Wörter einzugeben, die in der Internetseite überhaupt nicht vorkommen, denn die Suchmaschinen vergleichen die Metadaten mit dem Seiteninhalt. Unter Umständen sinkt man dann im Ranking ganz schön ab.

Damit habe ich das Wichtigste zur Erstellung meiner neuen Seite getan. Ich klicke jetzt hier oben auf "speichern und schließen". Das ist das kleine Diskettensymbol mit dem "x" drauf.

Jetzt habe ich eine neue Seite. Allerdings ist die noch an der falschen Stelle. Ich habe wohl vorhin versehentlich auf "Seite (in)" geklickt, statt "Seite (hinter)". Wenn ich das ändern möchte, klicke die Seite an und ziehe sie mit der Maus auf  die Seite über ihr. Hier ist das Unterseite 2.3. Dann erscheint dieses Popup Menü hier. Hier kann jetzt die Position wählen. Ich klicke auf "Seite verschieben hinter". Und schon ist die Seite an der richtigen Stelle gelandet.

Um die Seiteneigenschaften wieder zu öffnen und dort später Änderungnen durchzuführen, klicke ich entweder mit rechts auf die Seite und wähle Seiteneigenschaften oder ich klicke die Seite an und wähle oben rechts im Bearbeitungsbereich das Bleistiftsymbol.

Wie Sie nun Inhalte auf Ihrer neuen Seite erstellen, zeige ich Ihnen im nächsten Tutorial.
   

Video Text

Hier sehen Sie ein Video, wenn Sie JavaScript aktivieren und den neusten Flashplayer installieren.

In diesem Tutorial zeige ich Ihnen wie man Inhalte in Seiten einfügt, indem ich zuerst auf die Seite in der ich Inhalte erstellen möchte klicke. Ich nehme dafür mal die Unterseite 2.4.

Jetzt sieht man die Aufteilung der Webseite, so wie sie in Ihrem Design angelegt wurde. Hier gibt es eine rechte und eine linke Spalte, in die man Inhalte einfügen kann. Dieser graue Balken ist bei dieser Seite die rechte Spalte, die weiße Haupinhaltsspalte die Linke. Ich möchte jetzt ein Inhaltselement in die linke, also die Hauptspalte einfügen. Dazu klicke ichauf dieses kleine Plus-Symbol hier.

Nun öffnet sich ein, in verschiedene Kategorien gegliedertes, Auswahlfenster in dem ich wählen kann welche Art Element ich einfügen möchte. Je nach dem, was ihr Webdesigner dort für sie angelegt hat, stehen Ihnen noch verschiedene Elemente zur Verfügung. Die wichtigsten Grundelemente sind aber "Normaler Text", "Text mit Bild" und "Nur Bilder". Wie Sie mit Bildern arbeiten, werde ich Ihnen noch in einem weiteren Video genau erklären.

Ich füge jetzt erstmal einen Text ein. Nun öffnet sich das neue Textelement, das ebenfalls in Reiter untergliedert ist. Zunächst einmal sieht man, dass man auch im Nachhinein noch den Typ ändern kann. Wenn man also später einmal doch lieber ein Bild neben dem Text haben möchte, kann man das an dieser Stelle ändern. Dann kann man hier, wie bei Seiten gezeigt, das Inhaltselement verbergen, wenn man nicht möchte,dass es sofort auf der Webseite erscheint. Wenn man allerdings schon die ganze Seite ausgeblendet hat,
macht das natürlich wenig Sinn.

Nun braucht das Element eine Überschrift. Hier kann man mit diesem Pull-Down Menü die Hierarchie der Überschrift auswählen. Durch Auswahl verschiedenner Überschriften kann man die Seite so sinnvoll gliedern.
Wichtig ist, dass man eine logische Überschriftenstruktur erstellt, denn sowohl Suchmachinen, als auch Vorleseprogramme für Blinde nutzen diese, um die inhaltliche Struktur des Dokuments zu erkennen.

Ganz unten kann man noch einen Link zum Seitenanfang hinzufügen. Das kann bei sehr langen Texten sehr angenehm für die Besucher Ihrer Internetseite sein.

Wenn man jetzt auf den Textreiter hier in der Mitte klickt, kann man in diesem Fenster den Text eintippen. Wie die einzelnen Formatierungen funktionieren, zeige ich Ihnen in einem weiteren Tutorial. Hier füge ich jetzt mit den Tasten "Strg" und "V" einen Beispieltext ein, den ich zuvor schon geschrieben und mit der Tastenkombination "Strg" und "C" kopiert habe.

Wenn Sie mit Ihrer Bearbeitung fertig sind, haben Sie verschiedene Möglichkeiten das Element zu speichern. Wenn Sie auf dieses "x" hier links klicken, schließen Sie das Element OHNE zu speichern. Es wäre dann in diesem Fall leer. Mit dem Mülleimersymbol löschen Sie das Element. Dazwischen sind 4 Diskettensymbole mit denen Sie speichern können. Die Diskette ohne irgend einen Zusatz speichert und lässt das Element geöffnet. Ebenso die Diskette mit dem Auge, diese öffnet aber zusätzlich ein Fenster in dem eine Vorschau der Seite erscheint. Eventuell müssen Sie Ihren Browser hierbei erlauben, Popups zu öffnen. Die Diskette mit dem "x" speichert und schließt das Element dann und das letzte Diskettensybol mit dem "+" speichert und legt dann noch ein neues Inhaltselement an.

Wenn Sie einmal vergessen sollten was die Symbole bedeuten halten sie einfach den Mauszeiger ohne zu drücken über die Symbole. Dann erscheint ein Hinweis zum Symbol. Das funktioniert auch mit allen anderen Symbolen.

Ich speichere und schließe das Element jetzt mal. Und schon sieht man das neue Inhaltselement in der Seite.
Ich lasse mir jetzt mal die Vorschau anzeigen. Jetzt möchte ich noch ein weiteres Element daneben einfügen.

Das neue Element erstelle ich wieder mit dem Plus-Symbol. Die Position bestimmt sich danach, welches Plus-Symbol ich anklicke. Die Überschrift ist "Contra". Und ich füge hier wieder eine Liste ein. Nun noch das Element speichern und schließen und ich habe ein zweites Element.

Ich kann die Inhaltselemente in ihrer Position mit der Maus frei verschieben. Ich schiebe jetzt mal das Element in die rechte Spalte und sehe mir das Ergebnis in der Vorschau an. Wie man sieht ist das Element jetzt zwar neben dem "Pro"-Element, aber so ganz ist das nicht das Ergebnis was ich haben wollte, das mache ich erstmal wieder rückgänig.

Ich kann Elemente, wenn ich sie woanders haben möchte, nicht nur verschieben, ich kann sie auch mit diesen kleinen Symbolen kopieren, auschneiden und aus der Seite entfernen. Jetzt erscheinen diese "Einfügen-Symbole", mit dem Element selbst ist aber noch nichts passiert. Auf diese Weise kann man nun auch zwischen verschiedene Seiten hin und her verschieben und kopieren.

Wenn ich hier die Verknüpfung des Elements löse, entferne ich es von der Seite. Es ist aber nicht weg, sondern hier oben unter "Nicht verwendete Elemente" gelandet. Mit dem Mülleimer würde ich es komplett löschen. Das möchte ich jetzt aber nicht, ich füge es wieder ein, indem ich hier klicke.

Neben dem "Pro-Element" ist es jetzt aber immer noch nicht. Man kann nicht nur Text und Bilderelemente einfügen, sondern auch Spalten. Diese Spalten sorgen dafür, dass ich meinen Inhaltselementen prozentual nebeneinander unterschiedlichen Platz zuweisen kann. Ich nehme hier eine Aufteilung von jeweils 50%.

Jetzt schiebe ich die beiden Elemente nebeneinander in diese Spalten und schon befinden sie sich nebeneinander. Das schaue ich mir jetzt auch noch mal in der Vorschau an. Genau so wollte ich das. Und damit bin ich mit der Bearbeitung fertig.

An diesem "Preview" hier oben sieht man aber, dass dies nur eine Vorschau ist. Die Seite ist ja noch ausgeblendet und damit nicht öffentlich sichtbar. Ich blende sie jetzt mal wieder ein. Nun ist auch das "Preview" verschwunden, die Seite ist nun online.