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.