Typo3 Website - Die Innenarchitekten

Transkript

1 Kurzeinstieg - Leitfaden - Stand Redaktionelle Bearbeitung der Seite Top-News inkl. Anlegen von Pop-Up Fenstern ge der Anfangsseite Top-News. Um die Redaktiionsmöglichkeiten übersichtlich zu halten sind diese in der Rechtezuordnung und damit in den Editiermöglichkeiten stark reduziert. Im Prinzip sind alle weiteren Seiten analog zur Anfangsseite aufgebaut und können (nach entsprechender Rechtezuweisung) nach diesem Leitfaden redaktionell bearbeitet werden. Anmeldung auf Typo3: Benutzername: Passwort: Generelle Hinweise zur Bearbeitung: Typo3 ist als webbasierte Anwendung durchgehend online. D.h., alle redaktionellen Bearbeitungsschritte werden bei jedem Speichervorgang direkt ins Web hochgeladen. Selbstverständlich können Inhalte für den Websitebesucher zur späteren Weiterbearbeitung unsichtbar (verborgen) geschaltet werden. Diese sind dann nur im Bearbeitungsmodus sichtbar. Zur komfortablen Bearbeitung bietet es sich an im Browserprogramm die aktuell sichtbare Website sowie die Bearbeitungsanwendung parallel in zwei Browserfenstern zu öffnen. Damit kann zwischen Bearbeitung und sichtbarem Ergebnis schnell zu Überprüfungszwecken gewechselt werden. Bitte Beachten: Nach jedem Speichervorgang im Bearbeitungsmodus muss die sichtbare Website im Browser aktualisiert (neu geladen) werden um die Veränderung anzeigen zu können.

2 Ansicht der Website in Typo3 nach der Anmeldung linke Spalte: Im Bearbeitungsmodus bietet Typo3 mehrere Ansichtsmöglichkeiten um auf der Seite zu navigieren. Zwischen diesen kann in der linken Spalte unter Web zwischen Seite und Liste hin- und hergeschaltet werden. mittlere Spalte: Die mittlere Spalte zeigt den Verzeichnisbaum der Haupt- und Unterseiten, die vom Benutzer editiert werden können. Auch dieser Verzeichnisbaum kann als Navigation genutzt werden. rechte Spalte: Die rechte Spalte zeigt das Bearbeitungsfenster in dem Dieses Fenster ist im Startmodus noch leer und wird nach Wahl der Ansichtsoption Seite oder Liste aktiviert. Wie viele Websites arbeitet Typo3 mit einer sehr einfachen Grundstruktur. Templates steuern das Aussehen der Seite im Browser. Die Inhalte werden auf einzelnen Seiten (siehe Verzeichnisbaum) angelegt. Die Innenarchitektenseite arbeitet mit Haupt- und Unterseiten, die zueinander verlinkt sind. In diese Seiten sind Inhalte (Inhaltselemente) eingefügt und werden im Browser angezeigt. Wird eine neue Seite in Typo3 angelegt so wird diese zuerst nur als reines Verzeichnis gebildet und dem Verzeichnisbaum zugeordnet. Inhalte d.h. die Seite ist an sich im Browser noch unsichtbar. 1.:Seite als Ansichtsmodus wählen 2.: TOP-NEWS anwählen Bearbeitungsfenster

3 Ansichten der Website in Typo3 bei Wahl Web/Seite/Top-News oder Web/Liste/Top-News Ansicht der Website in Typo3 bei Wahl Web/Seite/Top-News Inhaltselemente inkl. des tatsächlichen Inhalts angezeigt. Ansicht der Website in Typo3 bei Wahl Web/Liste/Top-News Inhaltselemente (Seiteninhalt) als Liste angezeigt. Darüber werden alle Unterseiten angezeigt, die der Seite Top-News zugeordnet sind. auf der aktuellen Seite: neue Unterseite anlegen neues Inhaltselement auf aktueller Seite anlegen Seite anzeigen Seite bearbeiten Seite im Verzeichnisbaum verschieben Seite zeitlich begrenzt anzeigen auf der aktuellen Seite: neues Inhaltselement anlegen/bearbeiten bestehendes Inhaltselement auf aktueller Seite: bearbeiten sichtbar/unsichtbar im Browser löschen Position des Elements auf Seite verschieben Art des Elements Abstand zu nächstem Element Unterseiten (Seitentitel) Editierung i.p. wie linke Seite Inhaltselemente (Seiteninhalt) Editierfunktionen i.p. wie linke Seite

4 Ansichten der Website in Typo3 bei Wahl Web/Seite/Top-News Anlegen eines neuen Inhaltelements auf der Seite Top-News 1.: neues Inhaltselement anlegen Website-Ansicht im Browser Ziel: Über dem Inhaltselement Leuchtobjekte soll ein neues Inhaltselement angelegt werden.

5 Ansichten der Website in Typo3 bei Wahl Web/Seite/Top-News Bestimmen der Art des neuen Inhaltselements 1.: für Seite TOP-NEWS Option Text mit Bild wählen Website-Ansicht im Browser Ziel: Über dem Inhaltselement Leuchtobjekte soll ein neues Inhaltselement angelegt werden.

6 Ansichten der Website in Typo3 bei Wahl Web/Seite/Top-News Benennung des neuen Inhaltselements / opt. Verhältnis zu anderen Inhaltselementen 3.: nach dem Eintrag neuer Daten auf aktueller Screen-Seite speichern. Nichtgespeicherte Eingaben gehen bei Wechsel zu anderen Menüpunkten u.u. verloren. Website-Ansicht im Browser Ziel: Über dem Inhaltselement Leuchtobjekte soll ein neues Inhaltselement angelegt werden. Angabe zu Typ Seiteninhalt 1.: opt. Abstand zwischen den verschiedenen Beiträgen eingeben: bisher immer 15 2.: Thema in Versalien eingeben Überschrift gem. Template in OCR angezeigt wird

7 Ansichten der Website in Typo3 bei Wahl Web/Seite/Top-News Kurztext für neues Inhaltselements anlegen 2.: nach dem Eintrag neuer Daten auf aktueller Screen-Seite speichern. Nichtgespeicherte Eingaben gehen bei Wechsel zu anderen Menüpunkten u.u. verloren. Website-Ansicht im Browser Ziel: Über dem Inhaltselement Leuchtobjekte soll ein neues Inhaltselement angelegt werden. kein Blockstil Kurztext kann aus anderen Programmen in unterschiedlicher Formatierung per Drag / Drop eingefügt werden. Die Schriftfont-Formatierung wird in Typo3 gelöscht und gemäß Template angezeigt. 1.: Kurztext anlegen aktuell 214 inkl. Leerzeichen >>>>> Symbol für Link zu weiterem Inhalt

8 Ansichten der Website in Typo3 bei Wahl Web/Seite/Top-News Bild für neues Inhaltselements hochladen/anlegen 4.: nach der Auswahl eines Bildes muss gespeichert werden. Bei Auswahl mehrerer Bilder muss nach jedem Bild gespeichert werden. Bild wird erst nach Befehl Speichern angezeigt Website-Ansicht im Browser Ziel: Über dem Inhaltselement Leuchtobjekte soll ein neues Inhaltselement angelegt werden. 1.: über Explorer vorbereitetes Bild auswählen 3.: Position des Bildes Neben Text links wählen Breite 450 wählen gibt an mit welcher Breite Bilder angezeigt werden. Die Höhe ergibt sich durch das Seitenverhältnis des Bildes automatisch. Das optimale Seitenverhältnis der Bilder auf den Übersichtsseiten beträgt 45 x 17. Die optimale Bildgröße beträgt 450 x 170 Pixel. Bei gleichem Seitenverhältnis und anderer Pixelanzahl können Darstellungsprobleme auftreten. Diese können durch die Wahl einer anderen Anzeigequalität (z.b. JPG/hoch) verbessert werden. 2.: Bild auswählen / über Öffnen die Auswahl bestätigen

9 Ansichten der Website in Typo3 bei Wahl Web/Seite/Top-News Bild für neues Inhaltselements hochladen/anlegen Anzeige des Bildes nach Upload-Vorgang Anzeige im Browser Website-Ansicht im Browser Ziel: Über dem Inhaltselement Leuchtobjekte soll ein neues Inhaltselement angelegt werden. Anzeige der aufgespielten Bilder als Dateibezeichnung und Thumbnail-Image Nachdem das Bild hochgeladen und dieser Vorgang gespeichert wurde ist das Inhaltselement auf der Website im Browser sichtbar. Einfache Informationen können so sehr schnell publiziert werden.

10 neue Unterseite anlegen als Pop-Up-Fenster zu einem Inhaltslement auf der Hauptseite Website-Ansicht im Browser Ziel: Das Inhaltselement Die Wurzeln der Aggression soll mit einem Pop-Up Fenster verlinkt werden - um weitere Informationen zu zeigen. 1.: Liste Wählen / Zum Anlegen eines neuen Pop-Up Feldes neuen Seitentitel anlegen.

11 neue Unterseite anlegen als Pop-Up-Fenster zu einem Inhaltslement auf der Hauptseite / Unterseite benennen Website-Ansicht im Browser Ziel: Das Inhaltselement Die Wurzeln der Aggression soll mit einem Pop-Up Fenster verlinkt werden - um weitere Informationen zu zeigen. Option Seite verbergen wird standardmäßig gesetzt Zum Anzeigen in Netz muss diese Option ausgeschaltet werden. 1.: Seitentitel angeben - In der Regel wird er analog des zuvor angelegten Seiteninhalts benannt.

12 neue Unterseite anlegen als Pop-Up-Fenster zu einem Inhaltslement auf der Hauptseite / unter Erweitert Vorlage anwählen. Website-Ansicht im Browser Ziel: Das Inhaltselement Die Wurzeln der Aggression soll mit einem Pop-Up Fenster verlinkt werden - um weitere Informationen zu zeigen. unter Erweitert können voreingestellte Vorlagen ausgewählt werden. Immer Vorlage und Inhaltsvorlage gemeinsam anwählen!

13 neue Unterseite anlegen als Pop-Up-Fenster zu einem Inhaltslement auf der Hauptseite / unter Allgemein Seite Speichern (die Seite wird online angelegt) / weitere Bearbeitung 1.: Speichern um Seite anzulegen Die neu angelegte Unterseite (Seitentitel) ist bisher noch leer und beinhaltet keinen online sichtbaren Inhalt. 2.: Top-News anwählen und im Listenansicht Bearbeitungsmodus für die neu angelegte Seite aktivieren

14 Inhalt auf neuer Unterseite anlegen / Unterseite als Pop-Up-Fenster editieren 1.: neues Inhaltselement anlegen Die neu angelegte Unterseite (Seitentitel) ist bisher noch leer und beinhaltet keinen online sichtbaren Inhalt. 2.: Zum Anlegen den Typo3-Assistenten wählen

15 Inhalt auf neuer Unterseite anlegen / Unterseite als Pop-Up-Fenster editieren 1.: Text mit Bild wählen 2.: Position innerhalb der Seite festlegen. Da das Pop-Up Fenster nur einen Inhalt hat - einfach Pfeil unter Normal wählen

16 Inhalt auf neuer Unterseite anlegen / Unterseite als Pop-Up-Fenster editieren / Allgemein Inhaltselement (Seiteninhalt) benennen Da die Unterseite als Pop-Up genutzt werden soll sind keine Bezüge zu benachbarten Inhalten zu beachten. Verbergen abwählen 1.: Titel für den Inhalt angeben Dieser Titel wird als Text angezeigt

17 1.: Text hinzufügen Typo3 Website - Die Innenarchitekten Inhalt auf neuer Unterseite anlegen / Unterseite als Pop-Up-Fenster editieren / Text Fließtext einfügen

18 Inhalt auf neuer Unterseite anlegen / Unterseite als Pop-Up-Fenster editieren / Medien Bilder hochladen 2.: Bilder im Explorer auswählen Jedes Bild muss nach dem Befehl Öffnen auf der Typo3-Seite gespeichert werden. 1.: 630 Bildmaße angeben mit der das Bild angezeigt werden soll. Die Dateien wurden mit den Bildgrößen 600x400Pixel vorbereitet.

19 Inhalt auf neuer Unterseite anlegen / Unterseite als Pop-Up-Fenster editieren / Medien Bilder hochladen Liste der hochgeladenen Bilder 1.: SmoothGallery aktivieren Wenn mehrer Bilder hochgeladen sind können diese nacheinander angeschaut werden.

20 Link anlegen / Listenansicht Top-News / Seiteninhaltelement Die Wurzeln der Aggression zur Bearbeitung auswählen Das Pop-Up Fenster wird jetzt noch nicht angezeigt. Dazu muss das zuvor auf der Seite Top-News angelegt Inhaltselement Die Wurzeln der Aggression noch mit einem Link versehen werden. 1.: Listenansicht / Top-News / Seiteninhaltelement Die Wurzeln der Aggression zur Bearbeitung auswählen 2.: Bearbeitenfunktion (Stift) des Seiteninhalts Die Wurzeln der Aggression auswählen

21 unter Text das angelegte Linksymbol anwählen / Link einfügen Das Pop-Up Fenster wird jetzt noch nicht angezeigt. Dazu muss das zuvor auf der Seite Top-News angelegt Inhaltselement Die Wurzeln der Aggression noch mit einem Link versehen werden. 1.: Linksymbol >>>>> auswählen, mit Maus-Rechtsklick Insert Link auswählen. Die ausgewählten Zeichen können dann als Linksymbol angelegt werden.

22 unter Text das angelegte Linksymbol anwählen / Link editieren / Bezug festlegen / Größe des Pop-Up-Fensters bestimmen 4.:Befehl Link setzen abschließen und speichern 1.: Größe des Pop-Up-Fensters bestimmen z.b. 660x600 Die Breite des Fensters wird durch das anzuzeigende Bild mitbestimmt. Da die Bilder in der Breite 630 angezeigt werden sollen bietet sich 660 für die Breite an. Die Höhe des Pop-Up-Fensters richtet sich nach der Textmenge. Der Wert 600 ist ein Schätzwert. Zeigt sich das er nicht ausreicht oder zu groß ist kann er jederzeit korrigiert werden. 2.: Internal Link New Window auswählen Pop-Up wird als neues Fenster gezeigt 3.: Zieladresse des Links bestimmen Dazu einfach die betreffende Seite anwählen

23 Ist das Ergebnis bei der Überprüfung im Browser nicht zufrieden stellend, kann das Pop-Up- Fenster sofort über die schon beschriebenen Editiermöglichkeiten (Modify Link) bearbeitet werden. Dazu wieder zum Inhaltselement auf der Top-News -Seite wechseln und unter Text des betreffenden Inhaltelements den angelegten Link auswählen und per Rechtsklick mo- zur Link-Setzung. Typo3 Website - Die Innenarchitekten Link im Browserfenster testen / Ergebnis