Kurzanleitung - Anpassen der Mustervorlagen des allgemeinen Designkonzepts für das eigene Fachportal

Transkript

1 Kurzanleitung - Anpassen der Mustervorlagen des allgemeinen Designkonzepts für das eigene Fachportal GESIS Leibniz Institut für Sozialwissenschaften Daniel Hienert daniel.hienert@gesis.org November 2008 Dieses Werk ist unter einer Creative Commons-Lizenz lizensiert. 1

2 Inhalt 1 Photoshop-Dateien Welche Photoshop-Dateien existieren und wofür sie gebraucht werden Einzelne Schritte für die Bearbeitung der Photoshop-Dateien Bearbeitungsmöglichkeit durch Farbüberlagerung der Ebenen Bearbeitungsmöglichkeit bei Vorkommen von Schnittmasken Erstellen eines Verlaufs für den Hintergrund (balken.psd) Speichern der Grafiken Bearbeitung der einzelnen Dateien im Detail Bearbeiten der Hintergrundgrafik der linken und der mittleren Spalte Bearbeiten der Navigation (zwei horizontale und vertikale Navigation) Buttons Schriftgröße Grafik-Vorlagen für Links, Symbole und Icons Das Logo im Kopfbereich Einfache Suche Erweiterte Suche Trefferliste Hintergrund CSS-Dateien Welche CSS-Dateien existieren und wofür sie gebraucht werden Generelle Bearbeitung Farbtafel

3 1 Photoshop-Dateien 1.1 Welche Photoshop-Dateien existieren und wofür sie gebraucht werden Vertikales Layout der Seite o bg_main.psd: Hintergrund der linken und mittleren Spalte o bg_col2.psd: Hintergrund der rechen und mittleren Spalte Hauptnavigationsleiste o gfx_sliding_door_vifa1.psd: Grafiken für die Gestaltung der Hauptnavigationszeile Subnavigation (zweite waagerechte und erste vertikale Navigation) o gfx_sliding_door_sub_vifa.psd: Gestaltung der zweiten horizontalen Navigationsleiste o node_graphics.psd: Gestaltung der seitlichen vertikalen Navigation Buttons o button_graphics.psd: Grafiken für Buttons Grafik-Vorlagen für Links o icons.psd: Grafiken für Icons, welche für Links oder andere Aktionen stehen Grafik-Vorlagen für Buttons o icons_button.psd: Icons, welche in Buttons eingesetzt werden Das Logo im Kopfbereich o kopf.psd: Layout-Vorlage für den Kopfbereich Einfache Suche o formline.psd: Hintergrund der Suchmaske o bg_textinputframe.psd: linker Rand bei den Eingabefeldern Erweiterte Suche o gfx_sliding_door_tab_vifa1.psd: Grafiken für die Tabs der Filtersuche Trefferliste o balken.psd: linker Balken an jedem Treffer o verfeinern.psd: Grafiken zur rechten Spalte Suche verfeinern Hintergrund o Background.psd: Hintergrund-Verlauf des Portals Buttons für die Anpassung der Schriftgröße 3

4 o fontzoombuttons.psd: Grafiken für die Anpassung der Schriftgröße 1.2 Einzelne Schritte für die Bearbeitung der Photoshop-Dateien Bearbeitungsmöglichkeit durch Farbüberlagerung der Ebenen 1. In der Ebenen-Auswahl die Ebene anklicken (Doppelklick), dessen Farbe verändert werden soll. 2. Klicken auf Farbüberlagerung und anschließend auf das Farb-Feld neben der Füllmethode. 4

5 3. Unten den Hexadezimalcode eintragen und mit einem Klick auf OK bestätigen. Man kann stattdessen die RGB-Werte der Farbe eintragen. Die Eingabefelder dafür befinden sich direkt über dem Eingabefeld für die Hexadezimalzahl Bearbeitungsmöglichkeit bei Vorkommen von Schnittmasken Bearbeitungsmöglichkeit bei Vorkommen von Schnittmasken. Schnittmasken kann man daran erkennen, dass eine Ebene mit einem Pfeil vor der einer anderen Ebene eingerückt ist: 5

6 1. Wählen Sie die Ebene aus, die eingefärbt werden soll, und klicken Sie auf das Füll- oder Einstellungsebene-Symbol unten im selbigen Fenster. 2. Wählen Sie Volltonfarbe aus 6

7 3. Geben Sie hier unten den Hexadezimalwert der gewünschten Farbe ein. (Alternativ auch RGB-Werte) 4. Somit hat man die Hauptfarbe verändert ohne die Zweitfarbe zu verändern. Die Zweitfarbe verändert man daraufhin mit der Methode der Farbüberlagerung Erstellen eines Verlaufs für den Hintergrund (balken.psd) Für den Hintergrund der Webseite wird ein Verlauf erstellt. 7

8 1. Die Vordergrundfarbe festlegen. Klicken Sie dazu auf das vordere Farbfeld in der Werkzeugleiste und geben Sie den HEX oder RGB- Wert ein. 8

9 2. Klicken Sie auf das hintere Farbfeld und geben Sie den Wert für die zweite Farbe ein: 9

10 10

11 3. Wählen Sie das Verlaufswerkzeug aus der Werkzeugleiste. Befindet sich an dieser Stelle nicht das Verlaufssymbol, sondern ein Fülleimer, muss auf den kleinen Pfeil unten rechts geklickt und das Verlaufswerkzeug ausgewählt werden. 11

12 4. Wählen Sie die Ebene farbe aus und ziehen Sie mit gedrückter linker Maustaste einen Verlauf vom oberen zum unteren Rand. 12

13 1.2.4 Speichern der Grafiken Speichern über den Dialog Für Web und Geräte speichern. Bei mehreren Grafiken in einer Datei (Grafiken mit Slices) Speichern wählen und ganz unten im Dialog bei Slices: Alle Benutzerslices auswählen. 13

14 1.3 Bearbeitung der einzelnen Dateien im Detail Bearbeiten der Hintergrundgrafik der linken und der mittleren Spalte bg_main.psd: Die Ebene linke spalte farbe mit Grundfarbe (Variation 4) einfärben. bg_col2.psd: Die Ebene col2 farbe mit Grundfarbe (Variation 4) einfärben. Abspeichern der Bilder in der Html-Vorlage unter vifa/images. Abspeichern auf dem Typo3-System unter /fileadmin/images/ Bearbeiten der Navigation (zwei horizontale und vertikale Navigation) gfx_sliding_door_vifa1.psd: Das ist die erste horizontale Hauptnavigation. Hier kommen Schnittmasken vor. o Normal: Zweitfarbe o Normal hover: Zweitfarbe Variation 1 o Selected: Schmuckfarbe o Selected hover: Schmuckfarbe Variation 1 o Bg farbe: Zweitfarbe o Vor dem Exportieren müssen die Textebenen ausgeblendet werden. Dazu muss das Auge links neben den Ebenen angeklickt werden. o Die Dateien left.gif, left_on.gif, right.gif, right_on.gif und bg.gif müssen im Ordner /vifa/css/navigation/images/sliding_door/vifa1 gespeichert werden. o Im Typo3-System werden diese Dateien einmal unter fileadmin/css/03_layouts_3col/css/navigation/images/sliding_door/ vifa1/ und 14

15 fileadmin/css/02_layouts_2col/css/navigation/images/sliding_door/ vifa1/ abgespeichert. Die Datei extranav_lupe.gif wird aber unter /fileadmin/templates/images/ abgelegt. gfx_sliding_door_sub_vifa.psd: Subnavigation (zweite waagerechte Navigation). Aufbau ist der Gleiche wie bei der Hauptnavigationszeile. Hier kommen Schnittmasken vor. o Normal: Zweitfarbe Variation 1 o Normal hover: Weiß o Selected: Weiß o Selected hover: Weiß o Background: Zweitfarbe Variation 1 o Die Dateien left_sub.gif, left_on_sub.gif, right_sub.gif, right_on_sub.gif und bg_sub.gif müssen im Ordner /vifa/css/navigation/images/sliding_door/vifa1 gespeichert werden. o Im Typo3-System werden diese Dateien einmal unter fileadmin/css/03_layouts_3col/css/navigation/images/sliding_door/ vifa1/ und fileadmin/css/02_layouts_2col/css/navigation/images/sliding_door/ vifa1/ node_graphics.psd: Vorlage für die linke seitliche Navigation. Hier kommen Schnittmasken vor. o In der Ebene mit der Bezeichnung farbe kann man den Hintergrund der einzelnen Unterpunkte festlegen. Current: Grundfarbe Variation 3 Current hover: Grundfarbe Variation 4 Normal: Grundfarbe Variation 3 Normal hover: Grundfarbe Variation 4 o In der Ebene balken kann man die Farbe des linken Balkens festlegen Current Balken: Zweitfarbe Current hover: Zweitfarbe Variation 1 Normal: Grundfarbe Variation 1 15

16 Normal hover: Grundfarbe Variation 2 o Abspeichern der Bilder unter vifa/css/navigation/images/vlist/vifa1 o Im Typo3-System werden diese Dateien einmal unter /fileadmin/css/03_layouts_3col/css/navigation/images/vlist/vifa1/ und /fileadmin/css/02_layouts_2col/css/navigation/images/vlist/vifa1/ abspeichern Buttons button_graphics.psd: Grafiken für Buttons. Hier kommen Schnittmasken vor. o Normal: Grundfarbe Variation 3 o Hover: Grundfarbe Variation 4 o Normal Balken: Grundfarbe Variation 1 o Normal hover Balken: Grundfarbe oder Zweitfarbe Variation 2 Abspeichern in vifa/images/ Im Typo3-System werden die Dateien unter /fileadmin/images/ gespeichert Schriftgröße fontzoombuttons.psd: o Diese Grafik muss ganz zum Schluss bearbeitet werden, da die Hintergrundfarbe an dieser Stelle ausgemessen werden muss. o Es stehen drei mögliche Designs zur Auswahl. Variante c ist automatisch ausgewählt: a. A+ A= A- b. + = - c. A A A o Alle Ebenen mit der Bezeichnung A mit der Grundfarbe einfärben. o Ebene Background.psd:Hintergrund mit Farbe des Hintergrunds auf der Webseite an der Stelle, wo die Symbole stehen, einfärben. Dazu muss die Hintergrundfarbe mit dem Firefox-Plug-In Color-Picker auf der fertigen Webseite ausgemessen werden. o Abspeichern der Bilder unter vifa/images o Im Typo3-System Bilder abspeichern unter /fileadmin/img/icons/ 16

17 1.3.5 Grafik-Vorlagen für Links, Symbole und Icons icons.psd: Grafiken für Icons, welche für Links oder andere Aktionen stehen. Diese Grafiken sollten in der Grundfarbe des Portals sein. Die hover-darstellung kann in der Zweitfarbe geschehen. o Hauptfarbe: Grundfarbe o Zweitfarbe: Schmuckfarbe o Ebene Hintergrund ausblenden. icons_button.psd: Bearbeitung wie bei icons.psd. Hier ist darauf zu achten, dass der Hintergrund genau dieselbe Farbeinstellung hat wie der Button -> Vermeidung von Farbsprüngen. Abstimmung also mit der Datei button_graphics.psd. Hier kommen Schnittmasken vor. o Hauptfarbe: Grundfarbe [Einfärbmethode Schnittmaske] o Zweitfarbe: Schmuckfarbe [Einfärbmethode normal] In der Html-Vorlage werden alle Grafiken in vifa/images/icons/ abgelegt. Im Typo3-System abspeichern unter /fileadmin/images/icons/. Die Lupengrafik extranav_lupe.gif muss in vifa/vifa/css/navigation/images/sliding_door/vifa1 gespeichert werden. Im Typo3- System in /fileadmin/images/ ablegen Das Logo im Kopfbereich kopf.psd: Die Entwicklung der Kopfgrafik und des Logos sind Designerarbeit! Kopf-Hintergrund als kopf.jpg in Ordner /vifa/css/navigation/images/sliding_door/vifa1 speichern. Logo als logo.gif in denselben Ordner speichern. Im Typo3-System: o kopf.jpg: /fileadmin/images/ o logo.gif: /fileadmin/images/ Einfache Suche formline.psd: Hintergrund der Eingabefelder. Bearbeitung nach demselben Schema wie vorher. Abspeichern (mit für web speichern ) unter /vifa/images. Hier kommen Schnittmasken vor. o Formline 1 farbe (das Überall Suchfeld): Grundfarbe Variation 3 o Formline farbe (Andere Suchfelder): Grundfarbe Variation 4 17

18 Im Typo3-System abspeichern unter /fileadmin/images/ bg_textinputframe.psd: Der Balken links in jedem Eingabefeld. Bearbeitung nach demselben Schema wie vorher. Abspeichern (mit für web speichern ) unter /vifa/images. Hier kommen Schnittmasken vor. o Normal Balken: Grundfarbe Variation 1 Im Typo3-System abspeichern unter /fileadmin/images/ Erweiterte Suche gfx_sliding_door_tab_vifa1.psd: Hintergrundbearbeitung nach demselben Schema wie vorher. Hier kommen Schnittmasken vor. o Normal Farbe: Grundfarbe Variation 2 o Normal hover Farbe: Grundfarbe Variation 1 o Selected Farbe: Grundfarbe Variation 3 o Selected hover Farbe: Grundfarbe Variation 1 o Bg Farbe: Grundfarbe Variation 2 Bis auf bg_textinputframe.gif müssen alle Dateien in vifa/css/navigation/images/sliding_door/vifa1 abgespeichert werden. Die Datei bg_textinputframe.gif in den Ordner vifa/images/ speichern. Im Typo3-System alle Dateien bis auf bg_textinputframe.gif in die Ordner o fileadmin/css/03_layouts_3col/css/navigation/images/sliding_door/vifa1/ o fileadmin/css/02_layouts_2col/css/navigation/images/sliding_door/vifa1/ und bg_textinputframe.gif in den Ordner /fileadmin/images/ Trefferliste balken.psd: Man kann hier auch die Dubletten bearbeiten. (Für die Sichtbarkeit von Dubletten muss der HTML-Code verändert werden: Um die Darstellung der mehrfachen Treffer wird ein <div class= dubletten > </div> gemacht. In Photoshop kann man die Hintergrundfarbe der Vorlage der Dubletten verändern. Hier kommen Schnittmasken vor. o Balkenfarbe: Zweitfarbe o Dubletten: Grundfarbe Variation 2 (oder 3) o Abspeichern im Typo3-System in mehrere Ordner /fileadmin/images/ verfeinern.psd: Bei den Suchergebnissen in der rechten Spalte. Hier kommen Schnittmasken vor. 18

19 o Current (Hintergrundfarbe der Überschriften): Grundfarbe Variation 2 o Normal Hover: Grundfarbe Variation 4 o Normal Hover Balken: Grundfarbe Variation 3 o Normal Farbe: Grundfarbe Variation 3 o Normal Balken: Grundfarbe Variation 2 In den Ordner vifa/images/ speichern. Im Typo3-System speicher unter /fileadmin/images/ Hintergrund Background.psd: Die Ebene background farbe muss mit einem Verlauf von Grundfarbe (Variation 2) zu Variation 4 gefüllt werden (siehe 1.2.3). Der Bereich der durch die Grafik nicht abgedeckt wird, wird per CSS eingefärbt. Abspeichern der Grafik unter vifa/images Im Typo3-System speicher unter /fileadmin/images/. 2 CSS-Dateien 2.1 Welche CSS-Dateien existieren und wofür sie gebraucht werden Allgemeine Stylesheets der Seite: o vifa.css: Fasst alle CSS-Dateien zusammen, die für die Seite beansprucht werden. o content.css: Hier sind die alle allgemeinen Styles, Hintergrundgraphiken, Schriftart bei Überschriften, Absätze etc. festgelegt. o basemod.css: Hier ist die grundlegende Struktur, wie die Anzahl der Spalten, der Body-Hintergrund oder auch die Struktur der Navigationsleisten, der Seite festgelegt. o basemod_2col_right.css und basemod_2col_left.css: Varianten von basemod.css für 2-spaltige Layouts mit vertikaler Navigation links oder rechts. Waagerechte Navigation o nav_slidingdoor.css: Formatierung der horizontalen Hauptnavigation. Auch die zweite waagerechte Navigationszeile ist hier formatiert. Senkrechte seitliche Navigation 19

20 o nav_vlist.css: Alle Formatierungen der seitlichen Navigation, bis zu einer Tiefen von 5 Ebenen. 2.2 Generelle Bearbeitung Als Vorlage dient die Excel-Datei Vifa_css_Farbwerte.xls. Darin ist dargestellt, für welche Bereiche welche Farben eingesetzt werden. Ersetzen Sie alle Farben durch die gewünschten und vorher definierten neuen Farben. o Zum Beispiel will man die Farbe der Überschrift h2 ändern. Man sucht also nach h2 in der Spalte ID o Die Spalte Datei verrät einem in welcher Datei sich die ID befindet. o Man öffnet das CSS-File, welches unter Datei angegeben ist und sucht nach der ID. o Dort tauscht man den Farbwert, der unter Beispiel steht durch einen anderen Wert aus. Welcher Wert dafür verwendet werden soll, sagt die Spalte Zuordnung aus. Steht da Grundfarbe, so tauscht man die alte Grundfarbe (zum Beispiel #182E7A) durch die neue Grundfarbe (zum Beispiel #5a5a5a) aus Es kann zu Farbüberlagerungen kommen, sodass z.b. die Schrift eine ähnliche Farbe hat, wie der Hintergrund. In diesem Fall sind Anpassungen notwendig. o Nutzen Sie das Tool Firebug. Dieses Tool zeigt Ihnen an, in welcher Datei welche ID die Farbe eines Elementes definiert. o Öffnen Sie das nötige CSS-Dokument, und ändern Sie die Farbe des Elementes. Meist reicht es hier die Farbe auf Schwarz oder Weiß zu setzten, oder eine andere Farbvariation der Standardfarben zu verwenden. o Diese Anpassungen sind meistens notwendig: Hintergrund: Der Grafik-Hintergrund der Webseite hört in der Mitte der Seite auf, der Rest der Seite wird per CSS eingefärbt. Dazu muss man den Farbwert ganz unten in der Grafik ermitteln und diesen Wert in in der Datei basemod.css und der id #body als background-color eintragen. 20

21 Suchfeld: Der Hintergrund des Suchfeldes oben rechts sollte stets auf weiß gesetzt werden. Links: Die Farbe der Links ist meist etwas Kontrastschwach. Daher die ID a in der Datei content.css auf eine andere Variation einer Standardfarbe setzen. 3 Farbtafel Beispiel Farbe Variationen Grundfarbe Zweitfarbe 1 Schmuckfarbe 1 Farbname RGB-Wert Hexadezimalwert Grundfarbe a5a5a Variation bac5d0 Variation d2d9e0 Variation e8ebef Variation f3f5f7 Zweifarbe c3f63 Variation da8 Schmuckfarbe b01a1d Variation da0e12 21