Kurzeinführung in Typo3

Transkript

1 Kurzeinführung in Typo3 Inhaltsverzeichnis - 1. Einführung Grundlagen zu Typo An- und Abmelden am System Grundlegende Bedienung Symbolerklärungen Menüstruktur Seitenerstellung Inhaltsübernahme aus anderen Quellen Dateiupload Einbinden von Dateien und Setzen von Links Einbinden von Dateien durch Links in einem Text Links auf Seiten innerhalb von Typo Links auf Seiten außerhalb von Typo Shortcut Links auf externe Seiten im Menü...18 Kurzeinführung Typo3 1 Stand:

2 Einführung Diese Kurzeinführung richtet sich vor allem an Typo3 Neulinge und soll Ihnen bei Ihren ersten Schritten in Typo3 eine Hilfe sein. Die entsprechenden Beschreibungen sind deswegen sehr detailliert. Sie ist als Ergänzung zu den im Internet erhältlichen Tutorials gedacht und ist speziell auf Nutzer der Universität Würzburg zugeschnitten. Bei Fragen wenden Sie sich bitte an Stephan Kalhöfer, oder Sabine Müller, Die Schulungsbereiche stehen Ihnen ca. 2 Wochen zur Verfügung. In dieser Zeit können Sie sich innerhalb des Uni-Netzes bzw. mit einem VPN-Client auf diesen Seiten anmelden und die Funktionalitäten von Typo3 testen. Bitte notieren Sie sich dazu die Benutzerkennung, die auf dem PC vor Ihnen vermerkt ist. Login: Passwort: Die Universität Würzburg ist seit dem verpflichtet, neue Webangebote barrierefrei zu gestalten. Informationen hierzu finden Sie unter Grundlagen zu Typo3 Typo3 dient als so genanntes Content-Management-System (CMS) der konsistenten Verwaltung von WWW- Inhalten, wobei die Inhalte der WWW-Seiten von ihrer Darstellung entkoppelt sind. In Typo3 wird zwischen dem Frontend (FE), über das auf die WWW-Seiten zugegriffen wird, und dem Backend (BE), über das die Seiten gepflegt werden, unterschieden. Auch die BE-Schnittstelle kann plattformunabhängig mit WWW-Browsern wie Firefox oder Internet Explorer bedient werden. Die Integration eines einfachen HTML- Editors (Rich-Text-Editor RTE) erlaubt die Bearbeitung der Seiteninhalte ohne tiefgehende HTML-Kenntnisse. Abb. 2.1 Schematischer Aufbau Kurzeinführung Typo3 2 Stand:

3 An- und Abmelden am System Der Zugang zum Typo3-System erfolgt über den Link Login oben rechts auf der Uni-Startseite. Als Zugangsdaten verwenden Sie Ihre Novell-Kennung (ohne Kontext) und Ihr Novell-Passwort. Abb. 3.1 Anmeldebildschirm auf der Uni-Homepage Sobald die Anmeldung erfolgreich war, erscheint der Link Typo3 Backend. Klicken Sie darauf. Abb. 3.2 Link zum Backend Kurzeinführung Typo3 3 Stand:

4 Im Backend erwartet Sie dann folgender Bildschirm: Abb. 3.3 Begrüßungsbildschirm Hier finden Sie eine ganze Reihe nützlicher Informationen und Erklärungen zu den Funktionen und Buttons links in der Liste. Hinweis: Bitte melden Sie sich nicht am Typo3-Backend (mit dem Logout-Button oben rechts) ab, sondern auf der Seite, auf der auch die Anmeldung erfolgt. Kurzeinführung Typo3 4 Stand:

5 Grundlegende Bedienung Hier werden die einzelnen Menüpunkte kurz erklärt. Menüpunkte, die Sie zur Erstellung und Bearbeitung von Seiten nicht benötigen, wurden ausgeblendet. Symbolerklärungen Grundsätzlich erhalten Sie die Beschreibung eines Symbols bzw. Buttons, wenn Sie die Maus darüber bewegen und kurz warten. Für die Seitentypen ist dies nicht der Fall, deswegen sollen sie hier kurz erklärt werden. Normale Seite Seite ist nicht im Menü Shortcut versteckte Seite Systemordner Neue Seite anlegen Neuer Datensatz anlegen Seite bzw. Seitenbaum neu laden Seite im Frontend aufrufen (Achtung PopUp-Blocker) Seiteneigenschaften bzw. Inhaltselement bearbeiten Seite bzw. Inhaltselement verstecken Seite bzw. Inhaltselement sichtbar machen Seite bzw. Inhaltselement verschieben Seitencache löschen Änderungen speichern Änderungen speichern und im Frontend anzeigen lassen Änderungen speichern und Ansicht schließen Kurzeinführung Typo3 5 Stand:

6 Menüstruktur Typo3 verwaltet Seiten in einer Baumstruktur, aus der sich direkt die Menüstruktur ergibt. Deswegen sollten Sie sich vor Beginn der Erstellung der Seiten die gewünschte Menüstruktur überlegen. Sie können die Reihenfolge der einzelnen Punkte nachträglich durch Kopieren und Verschieben noch ändern, sollten aber unbedingt das Löschen und anschließend neu Erstellen von Seiten mit dem gleichen Namen vermeiden. Dateien gleichen Namens in verschiedenen Ebenen sind jedoch zulässig Folgende Menüstruktur ist im Moment vorgegeben: Wird die erste Menüebene alleine, d.h. ohne Unterebenen, wird sie im linken Teil des Bildschirms angezeigt.. Beachten Sie, dass Seiten, deren Typ auf Nicht im Menü geändert wurde, selbstverständlich nicht angezeigt werden. Abb Menüleiste 1: Ansicht in Typo3 Abb Menüleiste 1: Ansicht online Kurzeinführung Typo3 6 Stand:

7 Sobald man in die zweite Unterebene wechselt, wandert die erste Unterebene in die graue Leiste unterhalb des Fakultätslogos.. Abb Menüleiste links: Ansicht in Typo3 Abb Menüleiste links: Ansicht online, 1&2 bezeichnen die Menü-Ebenen Alle folgenden Unterebenen werden in dem Menü auf der linken Seite unterhalb der ersten Ebene dargestellt. Dabei entspricht die Menüstruktur von oben nach unten dem Baum der zweiten Ebene ebenfalls von oben nach unten. Wenn eine Seite keine weiteren Unterseiten hat, erscheint links kein Menü Abb Menüebene 3 Ansicht in Typo3 Abb Menüebene 3 Ansicht online, 2&3 bezeichnen die Menüebenen Kurzeinführung Typo3 7 Stand:

8 Seitenerstellung Wenn Sie die Menüstruktur für Ihren Lehrstuhl bzw. Bereich festgelegt haben, können Sie mit der Erstellung der Seiten beginnen. Neue Seiten erstellen Wählen Sie dazu im linken Menü von Typo3 Liste aus (1), klicken Sie auf den Namen Ihres Verzeichnisses (2) und oberhalb des Seitenbaums im grauen Kasten rechts auf das Symbol (3). Abb Neue Seite erstellen Legen Sie die Position der neuen Seite mit Klick auf einen der Pfeile fest. Abb Position der Seite bestimmen Hinweis: Neue Seiten können immer nur eine Ebene unterhalb des Ausgangspunktes (hier XY) im Baum angelegt werden. Diese wird Ihnen unterhalb von Neuer Datensatz angezeigt. Wenn Sie also eine Seite unterhalb von Studierende (dort wo die Seite Aktuelles sitzt) hätten erstellen wollen, hätten Sie den Assistenten dort aufrufen müssen. Wo Sie sich gerade befinden wird unterhalb von Neuer Datensatz im rechten Menü angezeigt. Kurzeinführung Typo3 8 Stand:

9 Abb Kein Einfügen nach Bachelor möglich Danach kommen Sie zum Vorlagen-Auswahlbildschirm. In der Regel sollten Sie die Standard-Vorlage verwenden. Abb Standard-Vorlage Geben Sie nun den Seitentitel ein, speichern und schließen (Symbol mit Diskette und X) Sie die neu angelegte Seite. Abb Seitentitel festlegen Kurzeinführung Typo3 9 Stand:

10 Seitenlayout ändern Das Layout (=die Vorlage) der Seiten kann in gewissem Umfang vom Redakteur vorgegeben werden. Um das Layout ändern zu können, wählen Sie bitte ganz links im Menü Liste (1) aus, klicken dann im Menü in der Mitte auf die Seite, die Sie bearbeiten wollen (2) und dann im Menü rechts auf den Bleistift in der Bearbeitungsleiste (3). Abb zur Bearbeitung der Seiteneigenschaften Sie befinden sich dann im Bearbeiten -Menü der Seite. Wechseln Sie auf das Tab Extended. Sie sehen den Eintrag Seiten-Datenstruktur. Abb Datenstruktur-Menü Hier wählen Sie im Pulldown-Menü UNIWUE aus. Unterhalb dieses Eintrags finden Sie den neuen Eintrag Benutze Vorlagendesign. Sie müssen hier jetzt noch ein Vorlagendesign auswählen und die Seite speichern, sonst kann sie nicht angezeigt werden. Abb Vorlagendesign auswählen Benutzen Sie am besten hier auch das Pulldown-Menü. Hier eine kurze Beschreibung der verschiedenen Vorlagen: Beim Design Ohne Standardelemente werden in der rechten Spalte die Inhaltselemente, die für den gesamten Teilbaum auf allen Seiten eingebunden sind, ausgeschlossen. Es sind nur noch die Inhaltselemente sichtbar, die auf der Seite vom Redakteur Rechts explizit eingefügt wurden. Die Designs Ohne rechte Spalte und Ohne rechte & linke Spalte sind primär für Seiten gedacht, deren primärer Inhalt sich im mittleren Bereich der Standardseite nicht ansprechend unterbringen lässt. Kurzeinführung Typo3 10 Stand:

11 Seiteninhalt erstellen Klicken Sie im linken Menü Seite an und wählen danach die entsprechende Seite, die bearbeitet werden soll, aus (bitte wie bereits erwähnt nicht das Symbol sondern den Seitennamen anklicken). Abb Seiteninhalt erstellen Wählen Sie nun Neuen Datensatz erstellen (kleines Seitensymbol unterhalb von Inhalt, Abb , je nachdem wo Sie den Inhalt innerhalb der Vorlage einfügen wollen. Bitte beachten Sie, dass die Auswahlmöglichkeiten je nach benutzter Vorlage variieren können) und danach z.b. normalen Text aus. Abb Inhaltstyp auswählen In der darauf folgenden Ansicht wechseln Sie bitte in das Tab Allgemein. Der Text, der in das Feld Überschrift eingetragen wird, erscheint auf der Seite linksbündig, fett und in großer Schrift, der Inhalt des Textfeldes als Text. Abb Die Überschrift Kurzeinführung Typo3 11 Stand:

12 Im Tab Text kann im Editor Text geschrieben oder aus bestehenden Seiten eingefügt werden. Für weitere Informationen zur Übernahme von Inhalten lesen Sie bitte den nächsten Abschnitt. Abb Der Texteditor Der Texteditor bietet im Wesentlichen alle wichtigen Formatierungsoptionen, die auch aus Word bekannt sind, die Symbole sind dieselben. Zum Abschluss speichern und schließen Sie die Seite (Diskettensymbol mit kleinem x). Im Menüpunkt links Anzeigen kann die Seite so eingesehen werden, wie sie später online erscheinen wird. Inhaltsübernahme aus anderen Quellen Inhalte können aus verschiedenen Quellen nach Typo3 übernommen werden. Aus Word z.b. kann per Copy&Paste in den Editor eingefügt werden. Die in Word angelegten Formatierungen übernimmt der Editor, soweit dies mit html umsetzbar ist, dadurch ist das System limitiert. Ein generelles Problem ist, dass im Moment Firefox das Einfügen per Editor nicht zulässt. Sie können diese Schutzfunktion durch drücken des Tastaturbefehls für Einfügen, Strg+V, umgehen. Probleme bereiten z.b. Aufzählungszeichen. Diese formatieren Sie besser im Editor selbst. Wenn Ihnen die Formatierung nicht zusagt nachdem Sie die Inhalte in den Editor eingefügt haben, kann die Formatierung entfernt werden. Klicken Sie dazu auf den Button mit dem A, in Abbildung direkt unterhalb des Pulldown-Menüs ( Normal ). Sie können auch eine bestehende Seite im Internet Explorer markieren und kopieren. Zum Teil bleibt so auch die Formatierung der Seite erhalten. Sie sollten aber das Ergebnis auf alle Fälle überprüfen.weiterhin kann bereits bestehender html-code direkt eingefügt werden. Dazu schalten Sie den Editor in den html-modus um. Abb Editor in den html-modus umschalten Danach können Sie in das Feld Text direkt den Code für Ihre Seite einfügen. Bitte beachten Sie, dass verwendete StyleSheets und Scripten nicht übernommen werden können. Achten Sie also darauf, dass Ihr Code bereinigt ist. Kurzeinführung Typo3 12 Stand:

13 Dateiupload Jedem Lehrstuhl/Einrichtung steht ein eigener Uploadbereich in Typo3 zur Verfügung. Hier kann der Webmaster des Lehrstuhls/Einrichtung eine eigene Ordnerstruktur anlegen und Dateien hochladen. Um einen neuen Ordner zu erstellen, klicken Sie im linken Menü Dateiliste (1) an. Im mittleren Menü erscheint ähnlich dem Seitenbaum eine Ordnerstruktur. Auf die Bezeichnung des Ordners (2) klicken, rechts erscheint die zugehörige Struktur, falls vorhanden. Oberhalb der Struktur auf das Icon Neu (3) klicken. Danach erscheint rechts Neuer Ordner. Es ist möglich, mehrere Ordner auf einmal zu erstellen. Abb Neue Ordner erstellen Mehrere Ordner anlegen Hinweis Benennen Sie bitte die Ordner mit Kleinbuchstaben, Dateinamen können auch Großbuchstaben enthalten. Kurzeinführung Typo3 13 Stand:

14 Zum Hochladen von Dateien im linken Menü Dateiliste (1) auswählen, auf die Bezeichnung des Ordners (2) klicken und dann Datei-Upload (3) im Menü oben rechts klicken. Abb Das Upload-Menü Abb Dateiupload Es können hier ebenfalls mehrere Dateien gleichzeitig hochgeladen werden. Hinweis: Die Datei wird in den Ordner geladen, der unterhalb der Kopfzeile Datei Upload angegeben ist. (vgl. Punkt 3 in Abb ) Hinweis: Dateinamen, die Leer- oder Sonderzeichen bzw. Umlaute enthalten, werden vom Programm geändert: Leer- und Sonderzeichen werden in Unterstriche umgewandelt, die Umlaute in den Vokal und ein E. Entfernen Sie trotzdem möglichst alle Sonderzeichen vor dem Hochladen. Kurzeinführung Typo3 14 Stand:

15 Einbinden von Dateien und Setzen von Links Einbinden von Dateien durch Links in einem Text Klicken Sie bitte im linken Menü auf Seite und wählen danach die zu ändernde Seite aus. Klicken Sie dann auf den Text, in den der Link eingefügt werden soll. Abb bisheriger Inhalt der Seite Markieren Sie im Editor den Text, der in einen Link umgewandelt werden soll und klicken das Icon Link erstellen an. Abb Einfügen des Links Danach klicken Sie in dem neuen Popup-Fenster den Reiter Datei an und wählen den entsprechenden Ordner und die vorher hochgeladene Datei durch einen Klick auf Ihren Namen aus. Abb Die entsprechende Datei auswählen Kurzeinführung Typo3 15 Stand:

16 Hinweis: Das Fenster schließt sich nach dem Anklicken der Datei sofort. Der neue Dateilink ist wie üblich an der blauen Schrift im Texteditor erkennbar. Links auf Seiten innerhalb von Typo3 Wenn Sie innerhalb Ihrer neuen Seite Links setzen wollen, markieren Sie wieder den Text, der für den Link vorgesehen ist und klicken auf das Hyperlink -Symbol. Suchen Sie die Seite, auf die Sie verlinken wollen und wählen Sie die durch einen Klick aus. Abb Die Zielseite auswählen Hinweis: Da der Lehrstuhl- bzw Einrichtungsaccount nur auf seinen eigenen Bereich Zugriffsrechte hat, können Sie mit dieser Funktion keinen Link zu Seiten legen, die sich zwar innerhalb von Typo3, jedoch außerhalb Ihres Bereiches befinden. Es wird die Möglichkeit geschaffen, dass jeder Account zwar alle Seiten im Baum sehen und damit verlinken kann. Bis das soweit umgesetzt ist, wenden Sie sich für Links, die auf Seiten außerhalb Ihres sichtbaren Bereichs gehen, an Ihren zuständigen Hauptredakteur. Hinweis: Eine Verlinkung innerhalb von Typo3 ist einer Verlinkung durch externe URL wenn möglich immer vorzuziehen, da erstere auch dann funktional bleibt, wenn die verlinkte Seite verschoben wird, während letztere aktualisiert werden muss. Kurzeinführung Typo3 16 Stand:

17 Links auf Seiten außerhalb von Typo3 Um Links auf Seiten, die sich außerhalb von Typo3 befinden, zu erstellen, wiederholen Sie bitte den oberen Schritt und wählen statt Datei Externe URL. Tragen Sie hier die URL der Seite, auf die verlinkt werden soll, ein und klicken Link setzen. Abb Eintragen der URL Shortcut Um einen Link in einem der Menüs zu erstellen, benutzen Sie bitte einen Shortcut. Dies ist eine eigene Seite, deren einzige Funktion die Weiterleitung zu einer anderen Seite innerhalb von Typo3 ist. Erstellen Sie eine neue Seite, klicken Sie im linken Menü auf Liste (1), wählen Sie die neu angelegte Seite aus (2) und klicken auf das Bearbeiten -Symbol (der kleine gelbe Bleistift) (3) oben links. Abb Das Bearbeiten -Symbol Wechseln Sie auf das Tab Allgemein und wählen Sie anschließend unter Typ den Eintrag Shortcut (2) aus. Die Nachfrage zur Veränderung der Eingabefelder bestätigen Sie mit Ja Abb Das Seitentyp-Menü Hinweis: Mit dieser Methode kann der Typ einer Seite immer verändert werden. Alternativ kann bereits beim Erstellen der Seite Shortcut als Typ ausgewählt werden. Kurzeinführung Typo3 17 Stand:

18 Wechseln Sie auf das Tab Shortcut (1). Klicken Sie bitte auf das Öffnen -Symbol neben dem Feld Shortcut zur Seite (2) und wählen Sie im Popup-Fenster die Seite aus, zu der verlinkt werden soll (3). Abb Die Zielseite auswählen Die Zielseite wird anschließend im Bereich Shortcut zur Seite: aufgelistet. Um den Verweis zu löschen, klicken Sie bitte einmal auf den Eintrag um ihn zu markieren und klicken Sie anschließend auf das X rechts neben dem Anzeigefeld. Abb Anzeige nach der Prozedur und Lösch-Icon Hinweis: Vergessen Sie bitte nicht, die Seite zu speichern, sonst werden Änderungen im Feld Shortcut zur Seite nicht wirksam. Links auf externe Seiten im Menü Wenn Sie wie unter beschrieben anstatt Shortcut Externe URL wählen, erscheint das Tab URL. Dort können Sie einen Link auf eine externe Seite anlegen, der im Menü erscheint. Abb Seitentyp externer Link auswählen Kurzeinführung Typo3 18 Stand:

19 Abb Externer Link im Menü anlegen Hinweis: Tragen Sie dazu im Feld URL die Seite ein, auf die Sie verlinken wollen. Bitte beachten Sie, dass der Typ http schon vorgeben ist. Tragen Sie also im Feld URL das nicht mehr mit ein. Kurzeinführung Typo3 19 Stand: