Style-Guide für Web-Redakteure

Transkript

1 Style-Guide für Web-Redakteure Kontakt:

2 Anleitung zur Textformatierung der Inhalts- und der Kontaktspalte. Textformatierung der breiten Inhaltsspalte rechts. Die korrekte Gliederung des Textes erfolgt mittels den drei Titelformaten: Haupttitel (Überschrift 2 / heading 2) Der Haupttitel darf pro Seite nur einmal, am Textanfang, verwendet werden. Er ist 16 Pixel gross und fett ausgezeichnet. Der Haupttitel hat einen fixen Abstand zum nachfolgenden Text. Zwischentitel (Überschrift 3 / heading 3) Der Titel ist 16 Pixel gross und nicht fett. Er hat einen automatischen Abstand zum vorangehenden und nachfolgenden Text. Untertitel (Überschrift 4 / heading 4) Der Untertitel ist Bold gesetzt. Die Schriftgrösse und der Zeilenabstand entsprechen dem Lauftext. Aufzählungen Aufzählungen werden via Bulletpoints gegliedert. Textformatierung der Kontaktspalte links Die schmale Kontaktspalte verfügt lediglich über ein Titelformat (Überschrift 2 / heading 2) Adressen Adressblöcke beginnen jeweils mit dem Namen der Kontaktperson. Der Name ist zugleich mit dem Link hinterlegt. Kontakt: webredaktion@zhdk.ch Seite 2

3 do and don ts 1 Inhalte korrekt gesetzt. Mittlere Spalte leer. Es ensteht ein unschönes Loch. Lösung: Kontaktadresse oder notfalls ein Bild einsetzen. Kontakt: webredaktion@zhdk.ch Seite 3

4 dos and don ts 2 Haupttitel (Überschrift 2 / heading 2) wird fälschlicherweise als Titel im Text eingesetzt. Richtig ist, Zwischentitel oder Untertitel (Überschrift 3 oder 4) zu verwenden. Untertitel (Überschrift 4 / heading 4) sollten ohne nachfolgenden Zeilenabstand verwendet werden. Die Abbildung rechts zeigt die korrekte Anwendung. Zu grosse Abstände zwischen den Adressblöcken. Die Abbildung rechts zeigt die korrekte Anwendung. Kontakt: webredaktion@zhdk.ch Seite 4

5 Anleitung zur Textformatierung der mittleren und der rechten Spalte. Mittlere Spalte (Kontakt-Spalte) Ansicht im Typo3: - Absatzschaltung vor und nach Überschrift 2 - Zeilenschaltung für sonstige Umbrüche Darstellung auf der Website: Rechte Spalte (Inhalts-Spalte) Ansicht im Typo3: - Absatzschaltung nach Überschrift 2 und Überschrift 3 sowie für Absätze im Text. Darstellung auf der Website: Aufzählung Was ist eine Absatzschaltung/Zeilenschaltung? Absatzschaltung : Zeilenschaltung : RETURN-Taste RETURN-Taste + + SHIFT-Taste Kontakt: webredaktion@zhdk.ch Seite 5

6 Die verschiedenen Bildformate der ZHdK Website Bilder Inhaltsseiten maximale Breite oder Höhe 370px Die Bilder der Inhaltsseiten können unterschiedlich gross sein. Grosse Bilder werden automatisch auf die Höhe oder Breite von 370 Pixeln verkleinert. Die jeweilige Bildbreite ergibt sich aus dem Seitenverhältnis des Originals. Kleinere Bilder werden nicht vergrössert. Es können mehrere Bilder nebeneinander oder ein einziges breites Bild über die ganze Inhaltsspalte platziert werden. Vorgehen: Laden Sie Ihre Bilder zuerst in die Dateiliste (File list) hoch. Wenn Sie mehrere Bilder nebeneinander platzieren möchten, verkleinern Sie die Bilder mit Photoshop vor dem Hochladen. Damit Sie Bilder in den Text setzen können, müssen Sie den Text in zwei Inhaltselemente abfüllen und dazwischen ein Bildelement einsetzen. Kontakt: Seite 6

7 Style-Guide Die verschiedenen Bildformate der ZHdK Website Bilder Kontaktspalte Max. Breite oder Höhe 190px Die Bilder der Kontaktspalte werden automatisch auf die Höhe oder Breite von 190 Pixeln verkleinert. Die jeweilige Bildbreite ergibt sich aus dem Seitenverhältnis des Originals. Kleinere Bilder werden nicht vergrössert. Es können mehrere Bilder untereinander platziert werden, keinesfalls darf die Kontaktspalte aber höher werden als die Inhaltsspalte. Empfehlung: möglichst wenig Bilder in der Kontaktspalte platzieren. Bilder in der Kontaktspalte und in der Inhaltsspalte nebeneinander zu platzieren ist nicht erlaubt. Kontakt: Seite 7

8 Die verschiedenen Bildformate der ZHdK Website Teaser Departemente 232px 160px Die Bilder für die Teaser der Departemente sind 232 Pixel breit und 160 Pixel hoch. Diese Bilder können Sie selbst hochladen. Bitte benutzen Sie dazu die Spalte Teaser. Folgende Bilder können Sie nicht selbst hochladen: Bilder Projekte max. Grösse Die Bilder der Projekte sind unterschiedlich gross. Bitte laden Sie immer möglichst grosse Bilder Ihrer Projekte hoch, das Bild für die Vorschau wird automatisch auf die richtige Grösse zugeschnitten. Das Projektarchiv ist noch in Bearbeitung. In Kürze erhalten Sie die Möglichkeit, Projekte hochzuladen. Home Departemente 728px 290px Die Bilder für die Home-Pages der Departemente sind 728 Pixel breit und 290 Pixel hoch. Sie können dieses Bild nicht selbst hochladen. Bitte senden Sie Ihre Bilder im Originalformat an Die Webredaktion wird den Bildausschnitt festlegen. ZHdK Bühne 968px 290px Die Bilder für die ZHdK Bühne sind 968 Pixel breit und 290 Pixel hoch. Diese Bilder können Sie nicht selbst auf der Website platzieren. Bitte senden Sie Ihre Bilder im Originalformat inklusive Bildnachweis (Fotografin, Vertiefung, Departement) an Die Webredaktion wird den Bildausschnitt festlegen. Events 232px 68px Die Bilder der Events sind 232 Pixel breit und 68 Pixel hoch. Wenn Sie eine Veranstaltung erfassen können Sie dazu ein Bild im Backend des Event-Erfassungstool hochladen. Das Bild wird automatisch auf die richtige Grösse zugeschnitten. Kontakt: Seite 8

9 Photoshop-Anleitung Anpassung der Bildgrössen Anpassung der Bildgrössen mit Photoshop 1. Bildmodus Überprüfen Sie den Farbmodus. Wählen Sie Menüpunkt: Bild g Modus. Die korrekten Einstellungen lauten: RGB-Farbe und 8-Bit-Kanal. 2. Freistellwerkzeug konfigurieren Wählen Sie in der Werkzeugpalette das Werkzeug Freistellwerkzeug aus. Unterhalb des Menübalken erscheinen die Optionen dieses Werkzeuges: Breite, Höhe, Auflösung. Tragen Sie die gewünschten Werte ein. Im Feld Auflösung muss der Wert 72 Pixel/Zoll stehen! 3. Bild freistellen Ziehen Sie den Maus-Zeiger mit gedrückter Maus-Taste über das Bild. Wenn Sie mit der Auswahl zufrieden sind drücken Sie die ENTER -Taste (Alternative: Doppelklick). 4. Bild für Web speichern Wählen Sie den Menüpunkt: Datei g Für Web und Geräte speichern.... Im neuen Fenster wählen Sie die Einstellungen in der Spalte rechts: - JPG - Qualität hoch oder sehr hoch - Progressiv: ja - ICC-Profil: Nein - Qualität ergibt sich automatisch - Weichzeichnen: 0 - Hintergrund: kein Wert Unten links sehen Sie die finale Dateigrösse. 5. Namensgebung Geben Sie dem Bild einen verständlichen Name. Im Namen soll die Vertiefung und das Departement enthalten sein. Vermeiden Sie Zeichen, die nicht mit dem Web kompatibel sind wie, ö, ä, ü etc. 6. Aktion beenden Schliessen Sie das Bild ohne es zu speichern (Sie haben ja bereits eine Version als JPG gespeichert). Kontakt: webredaktion@zhdk.ch Seite 9