Typo 3 für Einsteiger

Transkript

1 1. Grafischer Aufbau von Webseiten auf uni-bamberg.de 2. Erste Schritte in Typo Menü Strukturbaum Seiteninhalte 2.2 Ansichtsoptionen Seiteninhalte 2.2 Seiteninhalte ändern 2.4 Bearbeitungsmodus starten und beenden 2.5 Persönliche Einstellungen 3. Eine neue Webseite erstellen 4. Inhalte auf der neuen Webseite erstellen 5. Seiteninhaltstyp Text & Medien 5.1 Reiter Allgemein 5.2 Reiter Medien 5.3 Reiter Erscheinungsbild 5.4 Reiter Zugriff 6. Bearbeiten der Eigenschaften einer Webseite 7. Löschen, Kopieren, Verschieben einer Webseite 8. Weitere Seiteninhaltstypen neben Text und Medien Seite 1

2 1. Grafischer Aufbau von Webseiten auf uni-bamberg.de Gelbe Elemente können von Ihnen inhaltlich gestaltet werden: Kopfzeile Universität Kopfzeile des Bereichs/der Einrichtung Inhaltsbereich (Content) Hauptnavigation Brotkrumen Fußzeile des Bereichs/der Einrichtung mit Seiten-ID & Datum Fußzeile Universität Seite 2

3 2. Erste Schritte in Typo 3 URL: Menü Strukturbaum Seiteninhalte In Typo 3 ist der Bildschirm dreigeteilt: Menü Strukturbaum Seiteninhalte Seite 3

4 Linker Bildschirmteil: Menü Seite: Grundeinstellung für 95% aller Tätigkeiten Dateiliste: Typo 3-interne Festplatte Rest meist nicht relevant Mittlerer Bildschirmteil: Strukturbaum Ähnlich Windows Explorer Zeigt die vorhandene Seitenstruktur Seiteninhalte einer Webseite aufrufen: Linksklick auf Seitentitel im Strukturbaum Weißer Hintergrund markiert die ausgewählte Seite Ausklappen von Unterseiten: Linksklick auf Pfeilsymbol im Strukturbaum [Seiten-ID] = Seiten-Nummer in der Fußzeile auf uni-bamberg.de Logik des Strukturbaums: >> Entspricht 1:1 der Struktur Ihrer Seiten (Hierarchie & Reihenfolge) >> Ausnahme: Kontaktnavigation [113613] (= Kontakt/Impressum in Fußzeile) Jeder Redakteur sieht i.d.r. nur die Seiten, für die er schreibberechtigt ist Übung Browser starten (am besten Firefox) Erstes Tab: Zweites Tab: >> Benutzername schulung >> Passwort schulung Strukturbaum auf- und zuklappen Seite aufrufen mit Linksklick auf Seitentitel im Strukturbaum Ausgewählte Seite ansehen Seite 4

5 Rechter Bildschirmteil: Seiteninhalte Seiteninhalte (hier: drei Inhaltselemente im Haupt-Inhalt) Jede Seite kann beliebig viele Seiteninhaltselemente beinhalten. Seite 5

6 So sieht diese Seite im Internet (Frontend) aus: Element 1 Element 2 Element 3 Seite 6

7 2.2 Ansichtsoptionen Seiteninhalte Auswahlmenü Spalten Sprachen Schnelleingabe What you see is what you get ( WYSIWYG ) mit der Ansichtsoption Spalten Seite 7

8 2.3 Seiteninhalte ändern Über die Icons in der Kopfzeile des Inhaltselementes: Element bearbeiten Element aktivieren/deaktivieren (=online/offline) Element löschen Element hinzufügen Weitere Optionen bei Klick auf Elementsymbol Elemente können mit Drag & Drop verschoben werden Seite 8

9 2.4 Bearbeitungsmodus starten und beenden Klick auf Element bearbeiten startet Bearbeitungsmodus So sieht ein Element auf Seite im Bearbeitungsmodus aus: Bearbeitungsmodus beenden durch Schließen (Kreuzchen) Speichern oder auf eine andere Seite im Strukturbaum klicken Seite 9

10 >> Übung: Verschiedene Seiten und Elemente auswählen Bearbeitungsmodus starten Schließen (ohne Speichern) 2.5 Persönliche Einstellungen Persönliche Daten, Passwort ändern etc. Seite 10

11 3. Eine neue Webseite erstellen Rechtsklick auf Seite > Seitenaktionen > Neu: Oder: (Icon Seite hinzufügen) >> Drag & Drop >> Übung: Anlegen neue Seite Vorname Nachname unter Teilnehmer Seite 11

12 4. Inhalte auf der neuen Webseite erstellen Element hinzufügen >> Seiteninhaltstyp auswählen >> Standard-Inhaltstyp = Text & Medien Seite 12

13 5. Seiteninhaltstyp Text & Medien Vier Reiter: Allgemein Medien Erscheinungsbild Zugriff 5.1 Reiter Allgemein >> Eingabe von Überschrift/en, Text, Links über den Texteditor >> Bedienung ähnlich wie Word o.ä. a) Texte eingeben und formatieren: Formatierungen übe Icon-Leiste: Blockformat (Überschriften), Fett (B), Kursiv (I), Aufzählungen Formatierung setzen: zu formatierenden Text markieren, dann Icon klicken Formatierung rückgängig: Cursor nur auf formatierten Text platzieren, dann Icon klicken oder Blockformat zurücksetzen Wichtig: Jede Seite braucht eine Hauptüberschrift (Format Überschrift 1) Zwischenüberschriften im Format Überschrift 2 oder Überschrift 3 Einkopierte Formate aus Word o.ä. entfernen >> Übung Seite 13

14 b) Interne und externe Links erstellen: Zu verlinkenden Text markieren, dann Icon Link einfügen Linkeditor wird in neuem Fenster geöffnet Seite = Link zu einer Seite auf uni-bamberg.de Externe URL = Link zu einer Seite außerhalb von uni-bamberg.de Gleiches Fenster vs. Neues Fenster Titel optional Linkeditor: Links zu internen Seiten immer über Seite setzen, nicht über externe URL. >> Übung Seite 14

15 c) Attachments (= Link auf eine Datei) erstellen mit Linkeditor: EXKURS: Dateiliste (Doku zum Nachlesen) Datei über Dateiliste hochladen Link einfügen >> Datei >> Auswählen >> Übung d) -Adressen: Linkeditor nicht erforderlich Stattdessen -Adresse im Klartext im Texteditor eingeben Dann Leertaste oder neuer Absatz >> Ggf. Übung Seite 15

16 5.2 Reiter Medien So fügen Sie Medien (insb. Bilder) in die Seite ein: a) Mediendatei hinzufügen >> Hochladen oder vorhandene Datei aus Dateiliste auswählen b) Speichern c) Ergebnis: Hinzugefügte Mediendatei erscheint als Thumbnail d) Ggf. Bilder auf verfügbare Breite anpassen oder Bei Klick vergrößern aktivieren e) Weitere Optionen durch Klick auf grauen Balken oder Metadaten bearbeiten Seite 16

17 5.2 Reiter Erscheinungsbild Ggf. Dimensionen festlegen Ggf. Bild positionieren Ggf. Anzahl der Spalten anpassen (2 bedeutet: wenn man in diesem Inhaltselement mehrere Medien verwendet, werden sie in zwei Spalten angeordnet) >> Übung EXKURS: Weitere Optionen mit Hilfe von Farben und Leseinsel mit Breite Vgl. Doku Leseinsel und Doku Boxen in rechter Spalte Seite 17

18 5.4 Reiter Zugriff Deaktivieren: stellt Element offline Veröffentlichungsdaten: Element (!) automatisiert zeitversetzt on- oder offline stellen Seite 18

19 6. Bearbeiten der Eigenschaften einer Webseite a) Seite auswählen b) Icon Seiteneigenschaften Sieben Reiter: Allgemein Zugriff Metadaten Erscheinungsbild - Verhalten Seitenlayouts Seiteneinstellungen Seite 19

20 Allgemein: Seitentitel, Navigationstitel, Pfadsegment definieren Details hierzu in der Doku URLs modifizieren und verkürzen Zugriff: Seite deaktivieren (Seite geht dadurch offline, ist im Internet nicht mehr erreichbar) Seite in Menüs verbergen (Seite ist online, kann aber nur direkt über die URL aufgerufen werden, nicht über die Navigation) Veröffentlichungs-/Ablaufdatum definieren: Seite wird automatisch zu definierten Zeitpunkten on- oder offline gestellt Metadaten: Beschreibung (Meta Description) definieren: dient der Suchmaschinenoptimierung der Seite (Details hierzu in der Doku SEO für Webseiten) Inhaltsangabe (Abstract) definieren: kann ggf. für Menüs/Sitemaps verwendet werden (Details hierzu in der Doku Menüs und Sitemaps) Erscheinungsbild: Zeige Inhalt von: auf dieser Seite den Inhalt einer anderen Seite analog anzeigen (spart u.u. doppelte Pflege) (hier können Sie als Quellseite nur Seiten innerhalb Ihres Zugriffsbereichs auswählen; wenn Sie den Inhalt von Seiten anzeigen möchten, die außerhalb Ihres Zugriffsbereichs liegen, wenden Sie sich bitte an Joachim Drescher) Verhalten: Seite verbergen, wenn keine Übersetzung für aktuelle Sprache vorhanden: Aktivieren, wenn Seite nur in deutscher Navigation erscheinen soll In Indexsuche einbeziehen: Deaktivieren, wenn Seite (ggf. Unterseiten) nicht in Suchmaschinen auftauchen sollen Seitenlayouts: Seitenlayout diese Seite: Rechte Spalte auf dieser Seite ja/nein Seitenlayout Unterseiten: Rechte Spalte auf Unterseiten dieser Seite ja/nein Seiteneinstellungen: Diese Seite: Linke/rechte Spalte auf dieser Seite von übergeordneter Seite erben ja/nein Unterseiten: Linke/rechte Spalte auf Unterseiten dieser Seite von übergeordneter Seite erben ja/nein Bereichslogo: Logo in der Kopfzeile Ihres Bereichs/Ihrer Einrichtung (nur in den Seiteneigenschaften Ihrer Startseite definierbar) >> Ggf. Übung Seite 20

21 7. Löschen, Kopieren, Verschieben einer Webseite a) Auswahl einer Seite im Strukturbaum b) Rechte Maustaste >> Seitenaktionen >> Ausschneiden, Kopieren, Löschen Ggf. c) Einfügen einer kopierten/ausgeschnittenen Seite Auswahl einer anderen Seite im Strukturbaum Rechtsklick >> Seitenaktionen >> Einfügen in oder Einfügen nach Schnelle Alternative zum Ausschneiden/Einfügen: Drag & Drop 8. Weitere Seiteninhaltstypen neben Text und Medien Seite 21