www.medunigraz.at Corporate Design Typo3 M

www.medunigraz.at
Webauftritt Med Uni Graz
Corporate Design Manual
Typo3 Content Management System
Typo3 Rich Text Editor
Stand: 26.09.2014
Webteam: Gerald Auer, Martina Cvirn, Michael Fladischer, Ursula Leopold, Verena Maidl, Sylvia Trabi
Inhalt
Webauftritt Med Uni Graz CD-Manual 3
Corporate Design Med Uni Graz
3
Alias und Subdomains
3
Seitenvorlagen3
Corporate Design
3
Corporate Design - don‘ts
3
Empfehlungen4
Startseite = Homepage der Med Uni Graz
5
Seitenvorlage Portal
5
Seitenvorlage Thema
6
Seitenvorlage Text
7
Variation: Seitenvorlage Text mit Sujet oben
7
Variation: Seitenvorlage Text - Text mit Carousel
7
Boxen für linke und rechte Spalten
8
Typo3 Content Management System
9
Backend = Administrationsoberfläche 9
Bearbeitungselemente9
Seiten und Seiteneigenschaften
10
Seiten erstellen
10
Seiten(eigenschaften) bearbeiten
11
Auswahl einer anderen Seitenvorlage
11
Seitentyp: Verweis
11
Aktivieren und deaktivieren von Seiten
12
Seitenaktionen (löschen, kopieren, ausschneiden,
einfügen)12
Seite im Menü nicht sichtbar
12
Seitenaufbau und Inhaltsbereiche
13
Ändern der Seitenvorlage
13
Inhaltselemente einfügen
14
Inhaltselemente bearbeiten
14
Inhaltselemente löschen
14
Inhalte einer anderen Seite anzeigen
14
Inhaltselemente kopieren bzw. ausschneiden 15
2
Inhaltselement | Typischer Seiteninhalt
16
Überschrift16
Text16
Text und Bilder
16
Nur Bilder
16
Inhaltselement | Spezielle Elemente | Dateilinks
16
Inhaltselement | Sonderelemente | Boxen
16
Box Link 16
Box Text
17
Box Kontakt MEDonline Organisationseinheit oder
Person17
Box Kontakt frei
17
Box Neues
18
Box Text
18
Inhaltselement | Plug-Ins | Carousel Item
18
Dateien verwalten
20
Hochladen von Dateien
20
Abbildungen im Verzeichnis public
Abbildungen für Teaser Boxen
22
HTML Rich Text Editor
24
Handbuch zum RTE von Typo3
24
Einfügen von Texten
24
Zeichen- und Absatzformatierungen
24
Formatierungen übernehmen und entfernen
24
Formatierung Blockstil
24
Formatierung Textstil
24
Verlinkungen25
Verlinkungen auf einzelne Inhaltselemente
25
Tabellen26
Tabellenstile26
Tabellen- und Spaltenbreite
26
Webauftritt Med Uni Graz CD-Manual
Ziele des Webauftritts der Med Uni Graz sind den Internetauftritt der Med Uni Graz in einem zeitgemäßen Layout umzusetzen, das Webdesign barrierefrei und responsiv zu gestalten, ein technisch
ausgereiftes, stabiles Content Management System als technische Basis zu etablieren, den Web-RedakteurInnen eine dynamische, flexible Seitengestaltung zu ermöglichen, attraktives Bildmaterial zur
abwechslungsreichen Gestaltung anzubieten sowie Imagetexte und universitäre Gesundheitsprojekte
durch die Pressestelle zu betreuen.
Corporate Design Med Uni Graz
»» Screendesign Webauftritt Med Uni Graz für alle Sub-Webauftritte
»» Vorgabe von Seitenvorlagen und Gestaltungselementen
»» Fixe und variable Gestaltungselemente
»» Allgemeine Formatierungsmöglichkeiten über Editor
»» Webseitengestaltung über Content Managementsystem Typo3
Alias und Subdomains
Internetadressen (URLs) für Bereiche und Themen können durch Alias oder Subdomains kurz und einprägsam gehalten werden. Alias-Einträge werden an der Domain www.medunigraz.at angehängt (z.B.
www.medunigraz.at/marketing), bei Subdomainen wird das www durch die entsprechende Bezeichnung ersetzt (z.B. anatomie.medunigraz.at).
»» Alias für sämtliche Themen und Bereiche, die über eine kurze URL angesprochen werden sollen
»» Subdomains für Institute und größere Organisationseinheiten
»» Bei der Namensvergabe ist die Außenwirksamkeit relevant, sinnlose Abkürzungen sollen vermieden
werden.
Seitenvorlagen
Ausgehend vom Design der Startseite stehen folgende Seitenvorlagen zur Auswahl:
»» Portal [Seitenvorlage Portal auf Seite 5]
»» Thema [Seitenvorlage Thema auf Seite 6]
»» Text und Text mit Sujet oben [Seitenvorlage Text auf Seite 7]
Corporate Design
»» Die Seitenvorlagen sind entsprechend zu verwenden [siehe Seite 6ff].
»» Boxen in den linken und rechten Spalten sind gemäß ihrer Fuktion einzusetzen [Boxen für linke und
rechte Spalten auf Seite 8].
»» Die Farben bei allen Formatelementen entsprechen dem CD und dürfen nicht verändert werden.
Corporate Design - don‘ts
»» Die Seitenvorlagen dürfen nicht in ihren Schemata modifiziert werden.
»» Die vordefinierten Formate (Schriften, Farben u.a.m.) dürfen nicht verändert werden.
Webauftritt Med Uni Graz CD-Manual
»» Text mit Carousel [Variation: Seitenvorlage Text - Text mit Carousel auf Seite 7]
3
»» Verwendung anderer Symbole als Aufzählungszeichen u.ä. (das Standardaufzählungszeichen findet
sich im Ordner /public/symbole).
Empfehlungen
»» Die Texte auf den Webseiten sollen im Sinne der Lesefreundlichkeit kurz, prägnant und aktuell
gehalten sein. Informationen auf Webseiten sind keine Briefe, daher sind persönliche Anreden eher
zu vermeiden.
»» Jede Seite hat nur eine Überschrift erster Ordnung (H1). Für weitere Überschriften bzw. Überschriften zusätzlicher Inhaltselemente sollen untergeordnete Typen verwendet werden.
»» Menüpunkte kurz und sinnvoll benennen: Dadurch bleibt die Menüführung klar strukturiert und
URLs werden übersichtlich knapp gehalten.
»» Es sind ausschließlich Abbildungen zu verwenden, für welche die Med Uni Graz das Copyright
innehat. Zahlreiches Abbildungsmaterial, bereits in den passennden Größen für die Seitenvorlagen
sowie nach Themen geordnet sind im Order /public zu finden [Dateien verwalten auf Seite 20].
»» Kontaktdaten sollen nach Möglichkeit über die Daten aus MEDonline eingebunden werden. Für
die Aktualisierung der Kontaktdaten in MEDonline ist jede/r selbstverantwortlich.
»» Publikationen sind am besten über die Schnittstelle zur Forschungsdatenbank aufzulisten.
HINWEIS
Das Webteam unterstützt gerne bei sowohl bei Layoutfragen als auch bei inhaltlichen Aspekten und behält sich vor, aktiv Gestaltungsvorschläge einzubringen.
Webauftritt Med Uni Graz CD-Manual
Unter www.medunigraz.at/web werden die jeweils aktuelle Fassung dieses Manuals sowie
Layoutbeispiele angeboten.
4
Startseite = Homepage der Med Uni Graz
Einstiegsseite des Webauftritts der Med Uni Graz und Ausgangspunkt für alle Informationen der Med
Uni Graz. Das Layout dient als Grundlage für die nachgeordneten Seitenvorlagen und wird ausschließlich als Haupteinstiegsseite eingesetzt.
Seitenvorlage Portal
»» Einstiegsseite für Institute, Projekte, Kongresse, Themen ...
»» Vor allem für Bereiche mit vielen Unterseiten/Verzweigungen.
»» Eigene Header-Menüpunkte und eigene Navigationshilfe [Breadcrumb] auf den Folgeseiten. Die
ersten fünf Menüpunkte unter dem Portal werden in der Menüleiste angezeigt.
»» Logo/Motto: Platz für etwaig eigenes Logo, oder auch für Texte (Motto, Visionen o.ä.).
Maximale Breite: 272, maximale Höhe: 160, die Abbildungen werden entsprechend beschnitten.
»» Sujet: Abbildung passend zum Institut/Thema ...
Höhe + Breite der Abbildung fix (941 x 179). Bilder unter abb_PORTAL
[Dateien verwalten auf Seite 20]
»» Freies Textfeld: Für Informationen wie Kontaktdaten, Öffnungszeiten, Topthemen.
Höhe des Feldes fix: XXXX
»» Spalten 1-3: 3 Spalten mit Möglichkeiten für unterschiedliche Inhaltselemente: alle optionalen
Boxen, Überschriften, Abbildungen, Link-Listen u.a.m
Header-Toolbar mit Datum, Sprachauswahl und Suche
Header mit Nennung des Themas/des Instituts ...
Logo / Motto ...
Freies Textfeld
Freies Textfeld
Spalte 1
Spalte 2
Spalte 3
Footer mit Kontaktdaten der Med Uni Graz
Webauftritt Med Uni Graz CD-Manual
Sujet
5
Seitenvorlage Thema
»» Einstiegsseite für Institute, Projekte, Kongresse, Themen ...
»» Allgemeine Header-Menüpunkte und Navigationshilfe (Breadcrumb) der Med Uni Graz
»» Kann auch eine Unterseite eines Portals sein.
»» Sujet: Abbildung passend zum Institut/Thema ... Kann auch weggelassen werden.
Höhe + Breite der Abbildung fix (455 x 190). Vorlagen unter abb_THEMA
[Dateien verwalten auf Seite 20]
»» Linke Spalte: Enthält das seitliche Menü sowie nach Möglichkeit Boxen mit Links
»» Freies Textfeld: Mit Text und Abbildungen gestaltbares Element.
»» Rechte Spalte: Für unterschiedliche Boxen; eine Box Kontakt soll auf der Portalseite als erstes angeführt werden. Die weiteren Boxen können (in beliebiger Reihenfolge) aufgelistet werden.
Header-Toolbar mit Datum, Sprachauswahl und Suche
Header mit dem Hauptmenü DIE MED UNI GRAZ - STUDIEREN - LEHREN - FORSCHEN - MITARBEITEN
Linke Spalte
Rechte Spalte
SEITLICHES MENÜ
BOX KONTAKT
BOX LINK
Sujet
Freies Textfeld
Webauftritt Med Uni Graz CD-Manual
Footer mit Kontaktdaten der Med Uni Graz
6
BOX VERANSTALTUNGEN
BOX NEUES
BOX TEXT
Seitenvorlage Text
»» Inhaltsseiten
»» Linke Spalte: Enthält das seitliche Menü und je nach Kontext ein bis mehrere Box(en) Link.
»» Freies Textfeld: Mit Text und Abbildungen gestaltbares Element.
Header-Toolbar mit Datum, Sprachauswahl und Suche
Header mit dem Hauptmenü der Med Uni Graz oder mit eigenem Menü (bei großem Portal)
Linke Spalte
Freies Textfeld
SEITLICHES MENÜ
BOX LINK
Footer mit Kontaktdaten der Med Uni Graz
Variation: Seitenvorlage Text mit Sujet oben
»» wie Seitenvorlage TEXT mit zusätzlich:
»» Sujet: Abbildung passend zum Institut/Thema als erstes Element oberhald des Textfeldes
Höhe + Breite der Abbildung fix (697 x 191). Vorlagen unter abb_TEXT_OBEN
[Dateien verwalten auf Seite 20]
Header-Toolbar mit Datum, Sprachauswahl und Suche
Header mit dem Hauptmenü der Med Uni Graz oder mit eigenem Menü (bei großem Portal)
Linke Spalte
Sujet
BOX LINK
Freies Textfeld
Footer mit Kontaktdaten der Med Uni Graz
Variation: Seitenvorlage Text - Text mit Carousel
Über dem freien Textfeld ist das Einfügen des Inhaltselemts Carousel item möglich. [Carousel Item auf
Seite 8]
Webauftritt Med Uni Graz CD-Manual
SEITLICHES MENÜ
7
Boxen für linke und rechte Spalten
Die folgende Aufstellung gibt einen Überblick über die Verwendung der Inhaltselemente Boxen in den
unterschiedlichen Seitenvorlagen. [Inhaltselement | Sonderelemente | Boxen auf Seite 16]
Seitliches Menü
Die linke Spalte enthält die seitliche
Navigation (je nach Kontext, in dem die
Seite eingebettet ist). Bei eigenen Subdomain-Themen wird das Seitenmenü auf
der erste Seite nicht angezeigt.
Optionale Boxen für linke Spalte
Unter dem seitlichen Menü sind Box(en)
Link jeweils mit dazugehörigen Teaser-Bildern vorgesehen.
Box Link
Links zu hilfreichen, relevanten und/oder
eng verknüpften Themen. Jeweils mit Text
UND einem Teaser-Bild.
Themenseiten sollen in der linken Spalte
immer mindestens zwei hilfreiche Links mit
Teasern aufweisen.
Für die Teaser-Bilder stehen Vorlagen zur
Verfügung.
Mögliche Links: MEDonline, Fodok, zu
anderen Bereichen, zu Partnern u.v.m.
Optionale Boxen für rechte Spalte
Die rechte Spalte kann unterschiedliche Boxen-Elemente beinhalten. Eine Box Kontakt
soll etwa auf den Tehmenseiten als erstes
angeführt werden. Wenn es eine Box Neues
gibt, dann wird diese nach der Box Kontakt
angeführt.
Weitere Boxen können (in beliebiger Reihenfolge) aufgelistet werden.
Box Kontakt MEDonline
Kontaktdaten aus MEDonline. Optional
Porträt der Kontaktperson. Überschrift
„KONTAKT“.
Box Kontakt frei
Kontaktdaten frei einzugeben
Box Neues
Aktuelle Meldungen den Themenbereich
betreffend.
Box Text
= freies Textfeld
Platz für kurze Texte und/oder Abbildungen, längere Listen ...
Überschrift frei wählbar (nach Möglichkeit
nicht länger als eine Zeile)
Webauftritt Med Uni Graz CD-Manual
Möglichkeit für Abbildungen, wenn sonst
keine Abbildungen in der rechten Spalte
angeboten werden.
8
Typo3 Content Management System
HINWEIS
Im Folgenden wird vor allem auf die für den Webauftritt der Med Uni Graz relevanten
Bearbeitungsmöglichkeiten eingegangen. Umfangreichere und ergänzende Informationen
finden sich in vielen Typo3 Unterlagen im Internet. z.B. http://www.typo3-handbuch.net/
Backend = Administrationsoberfläche
Aufruf http://www.medunigraz.at/typo3/backend.php
Im Bereich Module werden alle relevanten bzw. verfügbaren Bearbeitungstools angezeigt:
»» WEB Seite: Zentrales Modul zur Bearbeitung von Seiten, Seiteneigenschaften und Inhaltselementen
»» WEB Liste: Auflistung aller zur Verfügung stehenden Elemente einer Seite
»» DATEI Dateiliste: Dateiverwaltung für Typo3. Dokumente (pdfs, Bilder u.a.m.) können hier verwaltet werden.
Der Seitenbaum bildet die Struktur des Webauftritts ab. Je nach Berechtigungen werden die zugeordndeten Bereiche eingeblendet. Über die rechte Maustaste wird ein Kontextmenü mit den jeweiligen
Bearbeitungsoptionen aufgerufen.
Bearbeitungselemente
WEB Seite bearbeiten
(Seiteneigenschaften)
Neuen Datensatz (Inhalt) einfügen
Dokument speichern
und Vorschau
Seitenvorschau
Dokument schließen
(ohne zu speichern)
Dokument speichern
und schließen
WEB Liste
Dokument speichern
Dokument speichern
und neues erstellen
Informationen über Referenzen
Typo3 Content Management System
Der Inhaltsbereich stellt den eigentlichen Seiteninhalt dar, je nach Template gibt es zwei (Left, Text)
bzw. drei (Left, Center, Right) Spalten, die den Darstellungen im Frontend entsprechen.
9
Seiten und Seiteneigenschaften
Die hierarchische Anordnung der Seiten im Seitenbaum entspricht der Darstellung des Menüs auf den
Webseiten. Über das Kontextmenü (rechte Maustaste) im Seitenbaum können Seiten angelegt, bearbeitet und gelöscht werden.
Seiten erstellen
Kontextmenü:
Seitenaktionen - Neu
Typo3 Content Management System
Position der Seite
festlegen
10
Nach dem Festlegen der
Position im Hierarchiebaum wird eine Seite mit
Standardvoreinstellungen
angelegt. Erforderlich ist
nur der Eintrag des Titels
für die neue Seite. Dieser
Titel wird in der Navigation links, in der Breadcrumb und im BroswerHeader angezeigt.
Im Regelfall können die Standardeinstellungen übernommen werden. Die häufigste Änderung wird
die Seitenvorlage betreffen, wenn nicht TEXT sondern eine andere Seitenvorlage gewünscht wird.
NICHT VERGESSEN!
Alle Einträge, Änderungen ... werden erst nach dem Speichern durchgeführt!
Seiten(eigenschaften) bearbeiten
Die Eigenschaften einer Seite (Titel, Template u.a.m.) können jederzeit im Modul WEB Seite entweder über das Kontextmenü Bearbeiten oder über das Symbol Seite Bearbeiten der Bearbeitungsleiste
modifiziert werden.
Auswahl einer anderen Seitenvorlage
Aufruf der Seiteneigenschaften über die Bearbeitungsleiste
Im Reiter Erscheinungsbild
unter Page template die
gewünschte Seitenvorlage
(Template) aussuchen.
Seitentyp: Verweis
Im Reiter Allgemein der
Seiteneigenschaften wird
bei Typ Verweis ausgewählt. Die entsprechende
Seite wird über das Symbol Datensätze durchblättern gefunden, kann aber
auch gleich direkt über
die Angabe der ID-Nummer im Feld rechts davon
eingetragen werden.
Hinweis
Verlinkungen auf externe Seiten innerhalb der Navigation
sind nicht erwünscht. Für externe Links sind die Box Link (standardmäßig mit
einem Teaser-Bild) und die Box Text (vor allem für längeren Listen) vorgesehen.
Typo3 Content Management System
Manchmal wird in der Navigation nur eine Verlinkung auf einen anderen Bereich benötigt. Diese Verlinkung verweist auf eine andere Seite im Typo3-Baum.
11
Aktivieren und deaktivieren von Seiten
Mit einem Klick der rechten Maustaste auf die jeweilige Seite kann diese aktiviert oder deaktiviert
werden (d.h. die Seite ist nicht sichtbar und nicht aufrufbar).
Seitenaktionen (löschen, kopieren, ausschneiden, einfügen)
Über das Kontextmenü Seitenaktionen können Seiten
gelöscht, kopiert und ausgeschnitten werden.
Wird eine Seite ausgeschnitten oder kopiert, so erscheinen im Kontextmenü Seitenaktionen zusätzlich die
Optionen Einfügen in (für Einfügen unter der mit der
rechten Maustaste angeklickten Seite) und Einfügen
nach (für Einfügen nach der mit der rechten Maustaste
angeklickten Seite).
NICHT VERGESSEN!
Alle Einträge, Änderungen ... werden erst nach dem Speichern durchgeführt!
Typo3 Content Management System
Seite im Menü nicht sichtbar
12
Die Einstellung, dass Seiten im linken Navigationsmenü
nicht angezeigt werden, jedoch aktiv, also aufrufbar,
sind, erfolgt über die Seiteneigenschaften, im Reiter
Zugriff: Die Auswahl In Menüs Verbergen muss aktiviert
sein.
Seitenaufbau und Inhaltsbereiche
Neue Seiten werden standardmäßig mit der Seitenvorlage Text angelegt, d.h. der Inhalt der Seite
besteht aus einer linken Spalte und einem zentralen Textbereich.
Die Seitenaufteilung wird im Inhaltsbereich schematisch dargestellt.
Seitenschema für Template Text mit linker Spalte
und breitem Inhaltsbereich
Seitenschema für Template Thema mit linker
und rechter Spalte sowie
einem zentralen Inhaltsbereich
Hinweis
Im Regelfall werden nur die Seitenvorlagen Text und Thema gebraucht.
Die Seitenvorlage Portal wird für Einstiegsseiten verwendet,
die Seitenvorlage Homepage ausschließlich für die Startseite.
Je nach Inhaltsbereich sind unterschiedliche Inhaltselemente vorgesehen:
Linke Spalte (left)
Text
Darstellung der Menüführung
Für unterschiedliche Inhaltselemente [Inhaltselemente einfügen
Box Link zu hilfreichen, relevan-
ten und/oder eng verknüpften
Themen [Boxen für linke und
rechte Spalten auf Seite 14]
bzw.
Content
auf Seite 12]
Rechte Spalte (right)
Box Kontakt, Hinweise auf
News und/oder Veranstaltungen, freigestaltbare Boxen
[Boxen für linke und rechte Spalten
auf Seite 14]
Ändern der Seitenvorlage
Im Modul WEB Liste werden diese „verlorenen“ Inhaltselemente
jedoch aufgelistet und können
den Inhaltsbereichen zugeordnet
werden. [Auswahl einer anderen
Seitenvorlage auf Seite 11]
Die einzelnen Inhaltselemente
können durch Anklicken bearbeitet werden. Im Reiter Allgemein
wird in der Spalte die Option
[WERT IST NICHT ERLAUBT] auf
den gewünschten Inhaltsbereich
(z.B. „center“) umgestellt.
Typo3 Content Management System
Über das Kontextmenü Bearbeiten oder über das Symbol Seite Bearbeiten der Bearbeitungsleiste
kann im Reiter Erscheinungsbild die Seitenvorlage umgestellt werden. Inhaltselemente, die bereits
angelegt wurden, werden nach einer Änderung der Seitenvorlage eventuell nicht mehr in den Seitenschemata angezeigt (vor allem bei der Umstellung von drei auf zwei Inhaltsbereiche).
13
Inhaltselemente einfügen
Je nach Inhaltsbereich können im Modul WEB Seite und WEB Liste über das Symbol Neuen Datensatz
(Inhalt) einfügen unterschiedliche Inhaltselemente angelegt werden:
»» Reiter Typischer Seiteninhalt
Im zentralen Textbereich kann Nur Überschrift, Text, Text und Bilder und Nur Bilder ausgewählt
werden. In den linken und rechten Spalten steht ausschließlich Nur Überschrift zur Verfügung.
»» Reiter Spezielle Elemente
Hier können Medienelemente (Audio, Video), Spezialmenüs oder Dateilinks (Listen von Dateien) in
den zentralen Textbereich eingebunden werden.
»» Reiter Sonderelemente
Für Boxen in den linken und rechten Spalten. [Boxen für linke und rechte Spalten auf Seite 15]
Inhaltselemente bearbeiten
Bereits angelegte Inhaltselemente können über das Symbol Bearbeiten im oberen Bereich des Elemtents modifiziert werden.
Inhaltselemente löschen
Einzelne Inhaltselemente können über das Symbol Löschen im
oberen Bereich des Elements gelöscht werden.
Inhalte einer anderen Seite anzeigen
Typo3 Content Management System
Soll der Inhalt einer anderen Seite angezeigt werden (damit nicht über einen Verweis der Kontext in
der Navigation verloren geht), erfolgt dies über das Symbol Bearbeiten und den Reiter Erscheinungsbild.
14
Im Feld Ersetze den Inhalt wird die
Nummer der Seite, deren Inhalt
wiedergegeben wird, eingefügt.
Alternativ kann über die Verzeichnisstruktur die betreffende Seite
ausgewählt werden.
Klickt man über WEB Seite auf
diese Seite wird im Inhaltsbereich
die Information Die Seite benutzt
Inhalt von dieser Seite: Strategische Projekte (PID 1447) angezeigt.
ACHTUNG
Auf Seiten, die Inhalte von anderen Seiten übernehmen darf sonst kein weiteres
Inhaltselement eingefügt werden, da es sonst zu Darstellungsproblemen kommt.
Inhaltselemente kopieren bzw. ausschneiden
Inhaltselemente können auf andere Seiten kopiert bzw. über „Copy + Paste“ verschoben werden.
Das Kopieren bzw. Ausschneiden erfolgt über das Modul
WEB Liste im Kontextmenü des Datensatzsymbol.
Ja nachdem, ob das betreffende Inhaltselement kopiert
oder verschoben werden soll, wird Kopieren oder Ausschneiden gewählt.
Um den kopierten Inhalt an anderer Stelle wieder einzufügen, wird auf das Datensatzsymbol des Seiteninhalts,
hinter dem der kopierte Inhalt eingefügt werden soll.
Im Kontextmenü wird Einfügen nach ausgewählt.
Auf noch leeren Seiten muss statt Einfügen nach des Kontextmenüs der zu kopierende Seiteninhalt über das Icon
Zwischenablageninhalt einfügen in der grauen Zeile unter
der Benutzerleiste eingefügt werden.
Der Inhalt des kopierten bzw. verschobenen Inhaltselements kann individuell bearbeitet werden dazu wieder in die Ansicht Modul WEB Seite wechseln!
Typo3 Content Management System
Das Inhaltselement kann auch mehrfach kopiert werden,
da es solange in der Typo3-Zwischenablage bleibt, bis es
durch ein anderes Inhaltselement ersetzt wird.
15
Inhaltselement | Typischer Seiteninhalt
Überschrift
Standardmäßig handelt es sich um den größten Überschriftstyp <H1>. Da diese H1-Überschrift eher
nur dem gesamten Seiteninhalt vorbehalten sein soll, gibt es die Möglichkeit über das Auswahlmenü
Überschrift Typ Überschriften der untergeordneten Hierarchien (H2 bis H6) den Inhaltselementen
zuzuweisen.
Generell kann jedem Inhaltselement eine Überschrift zugewiesen werden, die über Überschrift Typ in
ihrer Größe geändert werden kann.
Text
Normales Textelement mit/ohne Überschrift und Fließtext, Formatierungsmöglichkeiten über den
HTML Rich Text Editor [HTML Rich Text Editor auf Seite 24].
Text und Bilder
Eine beliebige Anzahl von Bildern mit umfließendem Text. Sehr zu empfehlen bei Listen mit Bild-Textkombination (z.B. Zuständigkeiten von Personen, Aufstellung von Produkten mit Beschreibung u.v.m.)
Nur Bilder
Eine beliebige Anzahl von in Zeilen und Spalten angeordneten Bildern mit/ohne Beschriftung.
Inhaltselement | Spezielle Elemente | Dateilinks
Möglichkeit, um effizient Auflistungen von Dateien (meist PDFs) anzubieten. Die Dateien werden aus
der Dateiliste für die Auflistung ausgewählt, standardmäßig wird der Dateiname angeführt, zusätzlich
kann als Überschrift im Feld Beschreibung eine nähere Bezeichnung angegeben werden.
TIPP
Ist der Dateiname aussagekräftig genug, reicht es, nur diesen anzeigen zu lassen.
Vor allem bei längeren Listen ist dies noch übersichtlicher.
Inhaltselement | Sonderelemente | Boxen
Boxen einfügen
Typo3 Content Management System
Alle Boxen werden als Inhaltselemente in den entsprechenden Spalten positioniert [Inhaltselemente
16
einfügen auf Seite 14].
Box Link
Die Box besteht aus einer (fakultativen) Überschrift, einem Teaser-Bild und einem (fakultativen) Text;
verlinkt wird die gesamte Box. Ein große Auswahl an Teaser-Bildern findet sich im für alle Web-RedakteurInnen zugänglichen Verzeichnis /public [Dateien verwalten auf Seite 20].
Wenn eine Überschrift
eingetragen wird, wird
sie über dem Teaser-Bild
angezeigt. Sie sollte nicht
länger als eine Zeile sein.
Bei Link können interne
und externe Links eingetragen werden (Auswahl
über den entsprechenden
Reiter des Link-Dialogs).
Bei externen Links (= alle
Links, die aus dem TYPO3
Webauftritts zeigen) sollte
unter den Erweiterungsoptionen die Auswahl
New window (_blank)
gesetzt werden.
Abbildungen für die Teaser-Bilder finden sich im
Verzeichnis public/abb_
TEASER_BOXEN [Dateien
verwalten auf Seite 20].
Hinweis
Die Box Link soll nur einen Link enthalten, einige Links werden in Boxen untereinander angeordnet. Für Listen mit mehreren Links empfiehlt sich eine Box Text, in der die Links mit einer
Aufzählungs- oder Nummerierungsliste aufgeführt werden.
Box Text
Für Text und/oder Abbildungen, für längere Listen mit Links.
Bildgröße: Breite: 193 px
Für Kontakte von Personen und Organisationseinheiten der Med Uni Graz, die Daten werden aus
MEDonline übernommen.
Soll ein Bild verwendet werden, so muss dieses in den eigenen Bereich DATEI Dateiliste hochgeladen
werden, die Größe soll 70 x 70 Pixel betragen [Hochladen von Dateien auf Seite 20]
Box Kontakt frei
In dieser Box können die Kontaktdaten frei eingegeben werden. Die Angabe im Feld Titel wird grün
angezeigt.
Typo3 Content Management System
Box Kontakt MEDonline Organisationseinheit oder Person
17
Box Neues
Die Box Neues zeigt über einen Teaser-Text und ein Teaser-Bild eine aktuelle Information an. Alle
Web-RedakteurInnen können in ihrem Bereich aktuelle (bereits angelegte) Meldungen anzeigen lassen. Prinzipiell können auf allen Seiten alle aktuellen Meldungen (auch über Themenbereiche hinweg)
über die Angabe der ID angezeigt werden.
Hinweise auf aktuelle Meldungen auf der Startseite und anderen zentralen Seiten werden über die
Stabsstelle Marketing koordiniert.
Box Text
In diese Box kann Freitext (etwa auch längere Listen von Links) und/oder Abbildungen einfügt werden, sie soll alle Anforderungen für Anzeigen in den seitlichen Menüs erfüllen, die über die anderen
Boxen nicht abgedeckt werden können.
Bilder in der Box Text dürfen maximal eine Breite von 193 Pixel haben, die Höhe ist variabel.
ACHTUNG
Boxen dürfen nur im linken und rechten Bereich verwendet werden!
Zur Anordnung der Boxen [Boxen für linke und rechte Spalten auf Seite 8]
Inhaltselement | Plug-Ins | Carousel Item
In der Seitenvorlage Text mit Seitenvorlage können über dem Inhaltsbereich Center im Inhaltsbereich
Carousel sogenannte Carousel Items eingefügt werden.
Typo3 Content Management System
Symbol Neuen Datensatz
(Inhalt) einfügen: Das Inhaltselement Carousel Item
wird über den Reiter PlugIns und Allgemeines Plug-In
aufgerufen.
18
In der Liste Inhaltselement
Typ wird unter SPEZIAL
Carousel Item ausgewählt.
Optional kann die Überschrift, ein Link, Text (erscheint rechts neben der
Abbildung) angegeben
werden.
Über den Reiter Bilder wird
die Abbildung eingefügt.
Die Abbildungen haben das
Format 455 x 354 Pixel,
etliche Sujets finden sich im
Verzeichnis /public [Dateien
verwalten auf Seite 20].
Zusätzlich können Abbildungen für Carousel Items
wie alle eigenen Dateien in
der Dateiliste im jeweils den
Sub-Webseiten zugeordneten Verzeichnis abgelegt
werden.
HINWEIS
Typo3 Content Management System
Es können beliebig viele Carouselbilder in das Carousel eingebaut werden, für jedes
Carouselbild muss ein eigenes Carousel Item ausgewählt werden.
19
Dateien verwalten
Alle (eigenen) Abbildungen und Dokumente, auf die von den Webseiten referenziert wird, müssen
zuerst auf den Webserver geladen werden, bevor diese über den Rich Text Editor [ auf Seite 21] eingebunden werden können.
Die Dateiverwaltung für Typo3 erfolgt im Modul DATEI Dateiliste. Sämtliche Dokumente (pdfs, Bilder
u.a.m.) können hier verwaltet werden. Zusätzlich können Dateien auch über diverse Editor-Funktionen (Abbildungen einbinden, Referenzierungen setzen u.ä.) manipuliert werden.
Hochladen von Dateien
Das Hochladen von Dateien (maximale Dateigröße: 10 MB) erfolgt entweder im Zusammenhang mit
dem Editieren von Seiteninhalten oder über das Modul DATEI Dateiliste. Unter DATEI Dateiliste sind
folgende Verzeichnisse angelegt:
»» Verzeichnis public für Abbildungen, die allen Web-RedakteurInnen zum Lesen zugänglich sind. Das
Angebot ist nach Verwendungszweck und Themen gegliedert.
»» Eigenes Verzeichnis für Organisationseinheiten/Themen, um eigene Dateien abzulegen und zu verwalten. Dieses Verzeichnis kann von den zuständigen Web-RedakteurInnen weiter beliebig unterteilt werden (z.B. Verzeichnisse für PDFs, Abbildungen, Videos u.v.m.)
HINWEIS
Für Verzeichnis- und Dateinamen gelten folgende Regeln:
Ausschließliche Verwendung von Groß- und Kleinbuchstaben, Zahlen, Bindestrich, Unterstrich; der Punkt ist der Trennung vom Dateityp vorbehalten!
Leerzeichen werden von TYPO3 durch Bindestriche ersetzt.
»» Verzeichnis MedUniGraz für Dokumente, die allen zentral zur Verfügung gestellt werden (z.B.
Grundsatzdokumente).
HINWEIS
Alle zentralen Dokumente sollen nur einmal am Webserver gespeichert werden. Die aktuelle
Version wird jeweils von den Zuständigen hochgeladen. Alle Referenzierungen auf solche
zentralen Dateien müssen dadurch nicht ständig überprüft und aktualisiert werden.
Es wird empfohlen, etwaige Versionierungen NICHT in den Dateinamen mitaufzunehmen,
sondern bei Bedarf (z.B. in der Fußzeile) nur im Dokumentt selbst zu erwähnen.
Allgemeine Dokumente im Verzeichnis public
Typo3 Content Management System
Verzeichnis MedUniGraz für Dokumente, die allen zentral zur Verfügung gestellt werden. Folgende
Dateien finden sich im Order pdf_medunigraz:
20
»» Betriebsvereinbarungen
»» Grundsatzdokumente
»» Vollmachten
HINWEIS
Alle zentralen Dokumente sollen nur einmal am Webserver gespeichert werden. Die aktuelle
Version wird jeweils von den Zuständigen hochgeladen. Alle Referenzierungen auf solche
zentralen Dateien müssen dadurch nicht ständig überprüft und aktualisert werden.
Es wird empfohlen, etwaige Versionierungen NICHT in den Dateinamen mitaufzunehmen,
sondern bei Bedarf (z.B. in der Fußzeile) nur im Text zu erwähnen.
Abbildungen im Verzeichnis public
Im Modul DATEI Dateiliste wird im Verzeichnis public eine große Auswahl an Abbildungen in unterschiedlichsten Formaten für alle Web-RedakteurInnen zur Verfügung gestellt. Für all diese Fotos und
Grafiken liegen die Lizenzrechte bei der Med Uni Graz, eine Verwendung im Kontext des Webauftritts
der Med Uni Graz ist daher erlaubt und sogar sehr erwünscht.
Die Abbildungen sind nach ihren Verwendungszwecken und danach jeweils nach Themen geordnet.
Je nach Verwendungszweck haben die Abbildungen unterschiedliche Größen, daher wird dringend
empfohlen, die Abbildungen jeweils entsprechend der Inhaltselemente oder Seitenvorlage auszuwählen. Abbildungen können in unterschiedliche Inhaltselemente eingebunden werden: als Teaser-Bilder
in Boxen, als Sujet-Bilder in den Seitenvorlagen oder als Elemente im Fließtext.
Verzeichnis
Grösse
abb_CAROUSEL
abb_NEUES_GESUNDHEIT
455 x 354
697 x 191
in
Pixel
für Carousel Items
Originalbild: 697 x 191: wird für die Textseite
oben verwendet.
DasSELBE Bild wird für die Teaser-Darstellungen skaliert auf
»» 287 x 79: für Teaser auf Homepage und
Auflistung auf Neues-Seite
abb_PORTAL
abb_TEXT_OBEN
abb_TEASER_BOXEN
941 x 179
697 x 191
223 x 83
abb_TEASER_KALENDER
140 x 95
abb_THEMA
abb_VARIABLE_GROESSE
455 x 190
maximale Breite: 697
maximale Höhe: 500
»» 193 x 53: für Teaser in Box Neues
Sujet für Seitenvorlage Portal
Sujet für Seitenvorlage Text
Teaser-Bild für Box Neues, Box Link und Box
Veranstaltung
Teaser-Bild für die Auflistung auf der Seite
Veranstaltungskalender
Sujet für Seitenvorlage Thema
Eigene Abbildungen, die eingebunden werden, müssen zuerst auf den Webserver geladen werden
und können erst dann in die Webseiten eingebunden werden [Hochladen von Dateien auf Seite 20].
HINWEIS
Typo3 Content Management System
Abbildungen, die zentral angeboten werden sollen, können jederzeit ans
Webteam geschickt werden.
21
Abbildungen für Teaser Boxen
Viele Link-Boxen verweisen auf zentrale Services der Med Uni Graz (z.B. Link auf MEDonline) oder
sind häufig gleiche Hinweise (z.B. Hinweis auf Ansprechpersonen). Für diese Links gibt es einen Pool
an Teaser Abbildungen, die um das Corportate Design zu unterstützen, verwendet werden sollen.
Folgende Verzeichnisse und Abbildungen finden sich unter abb_TEASER_BOXEN:
Verzeichnis
Unterverzeichnis
Teaser Abbildungen für
klinikum-graz
Logos von Einrichtungen am
Klinikum
logos_extern
Logos von externen Institutionen, Partnern ...
Unterteilt in Logos von
Ministerien, Land Steiermark
und Stadt Graz, anderen
Universitäten, Firmen und
Sponsoren
medunigraz
applikationen
Typo3 Content Management System
dokumente
22
Zentrale Applikationen wie
MEDonline, Fodok, Moodle,
der Veranstaltungskalender
...
Archiv, Betriebsvereinbarungen, Formulare, Geschäftsordnung, Grundsatzdokumente, Leitbild,
Mitteilungsblatt, pdf, Richtlinien, Satzung, Sitzungstermine, Vollmachten ...
forschen
Nachhaltige Gesundheitsforschung
gesundheit
Betriebliches Gesundheitsmanagement, Gesundheitsprojekte, Ökoprofit ...
kontakt_etc
Ansprechpersonen, Kontakte
mitarbeiten
AKGL, Dual career Service,
Personalentwicklung ...
Beispiele
Bibliothek, Genderunit, IT,
Marketing, QM, Servicestellen ...
studieren
AbsolventInnen, Aufnahmeverfahren, CSC, MUGthesis,
ULGs ...; Unterordner mit
Studienangebot ...
themen
unterschiedliche Themen
wie International, MEDitio,
Weiterbildung ...
Word-Clouds (Wortwolken)
zu Themen u.ä.
Typo3 Content Management System
wordle
organisation_struktur
23
HTML Rich Text Editor
Der in Typo3 integrierte Rich Text Editor (RTE) ermöglicht das Editieren von Webseiten auch ohne
HTML-Kenntnisse. Das Formatieren im RTE entspricht weitestgehend dem Arbeiten in gängigen Programmen zur Textverarbeitung. Textabschnitte, Wörter oder auch einzelne Zeichen werden markiert
um die gewünschten Formatierungen über die Symbole vornehmen zu können.
Handbuch zum RTE von Typo3
http://www.typo3-handbuch.net/redakteure/rte-rich-text-editor/
Im Folgenden werden nur einige spezielle Themen hervorgehoben:
Einfügen von Texten
Beim Einfügen von bereits bestehenden Texten (z.B. aus Microsoft® Word, Internetseiten u.a.) werden standardmäßig alle bereits bestehenden Formatierungen gelöscht, damit es auf den neuen Seiten
keine Konflikte in der HTML-Formatierung gibt.
Zeichen- und Absatzformatierungen
Formatierungen übernehmen und entfernen
Sollen Fremdformatierungen (z.B. aus Microsoft® Word) beim Einfügen in das Textfeld mitübernommen werden (z.B. eine Tabellenstruktur), so kann dies über das Symbol Einfügen als einfachen Text
deaktivieren erfolgen.
Sollten spezielle Fremdformatierungen mitübertragen werden oder ist das Löschen von im RTE erstellten Formatierungen notwendig, so kann dies über das Icon Formatierungen entfernen erfolgen. Das
Symbol
im RTE ermöglicht ein selektives Entfernen von Formatierungen. Möglich sind:
»» Auswahl des Bereichs („Gesamt“ oder „ausgewählten Text“)
»» Arten der Formatierung (HTML-Formatierung für im RTE angelegte Formate, MS-Word-Formatierungen für eingefügte Texte)
Formatierung Blockstil
Fix definierte Formatierungen für Absätze.
Formatierung Textstil
Fix definierte Formatierungen für Zeichen.
Folgende Stile sind definiert:
Typo3 Content Management System
»» Detail
24
»» Name der Person
»» Wichtig
Alle Vor- und Nachnamen in Fließtexten sollen mit dem Stil Name der
Person formatiert werden.
Verlinkungen
Mit dem Symbol
im RTE
können folgenden Verlinkungen gesetzt werden:
»» auf eine Seite innerhalb
des TYPO3 Systems
»» auf eine Datei in der Dateiliste des TYPO3 Systems
»» auf einen Ordner in der
Dateiliste des TYPO3
Systems
»» auf einen externen URL
»» auf eine e-Mail-Adresse
Für externe URLs sollen
immer als Zielfenster Neues
Fenster angegeben werden.
Verlinkungen auf einzelne Inhaltselemente
In Typo3 sind nicht nur Verlinkungen auf Seiten, Dateien und externe URLs möglich, sondern auch
auf einzelne Inhaltselmente. Vor allem bei längeren Seiten kann ein Verweis auf Teilbereiche hilfreich
sein.
Mit Aufruf Verlinkungen - Seite wird rechts pro Seite ein kleiner roter Pfeil angezeigt, beim Klick auf
diesen werden im Link-einfügen-Fenster rechts die einzelnen Inhaltselemente aufgelistet, jedes einzelne kann zur Verlinkung angeklickt werden.
TIPP
Typo3 Content Management System
Generell ist es praktisch, längere Seiteninhalte in einzelne Inhaltselemente aufzuteilen.
Da die einzelnen Inhaltselmente ohne (im Frontend) merkbare Übergänge aneinander
anschließen, können auch lange Textblöcke in kürzere Elemente aufgeteilt werden.
25
Tabellen
Über das Symbol Tabelle einfügen wird ein Dialog zur Erstellung von Tabellen eröffnet, bei dem neben Spalten- und Zeilenanzahl auch der Stil der Tabelle definiert werden kann.
Neben „kein Blockstil“ stehen drei dem CD
entsprechende Stile für Tabellen zur Verfügung:
»» Grau
»» Grün
»» Weiß
Das Symbol Ränder umschalten erleichtert
das Arbeiten in den Tabellen.
Die Eigenschaften der Tabelle bzw. einzelner Elemente (z.B. alternative Stile) können über das Kontextmenü (Klick mit der rechten Maustaste) nachträglich geändert werden.
Tabellenstile
Tabellenstil Grau
Tabellenstil Grün
Typo3 Content Management System
Tabellenstil Weiß
26
»» Kopfzellen (optional): schwarz, fett, dunkelgrauer Hintergrund, dunkler
Rahmen unten
»» Zellen: hellgrau, weißer Rahmen unten
»» Alternativklasse für Zeilen: weißer Hintergrund
»» Kopfzellen (optional): Med Uni hellgrün, Text: weiß, fett
»» Zellen: hellgrüner Rahmen
»» Kopfzellen (optional): Schrift schwarz und fett
»» Zellen: ohne Änderungen
»» Alternativ-Klasse für Zeilen: Rahmen unten gepunktet
Tabellen- und Spaltenbreite
Die Gesamtbreite aller Tabellen ist mit 100% festgelegt, je nach Seitenvorlage ist die Tabelle dann
schmäler oder breiter.
HINWEIS
Die Breite der Tabelle oder einzelner Spalten kann nur über den HTML-Code beeinflusst werden.
Nicht alle in HTML möglichen Tabellen- und Zelleneigenschaften werden im RTE übernommen.