RiS Kommunal Farben, Leisten (Stylesheet)

Transkript

1 Anwenderhandbuch RiS Kommunal Inhaltsangabe Einleitung Verwendungszweck Grundeinstellungen Allgemeine Erklärungen Breiten, Abstände Größe, Schriftgröße Farben Positionen Bilder einfügen Drop-Down-Listen Einstellungen Allgemeine Schrifteinstellungen (Inhalt) Schriftfarbe, Schriftgröße, Textausrichtung Links Übersicht, Pfad, Liste Überschriften News Hintergrund, Abkürzung Allgemeine Layout Einstellungen Abstand Homepage, Eingabefeld, Kategorienbox Listen, Trennlinie, Innenabstand Bilder Tabellen Einstellungen (horizontal & vertikal) Boxenlayout 1 Spalte Links + Rechts Boxenlayout 2 Box horizontal Boxenlayout 4 Tray Seite 1 von 50

2 3.7 Hintergrundfarben und Hintergrundbilder (der Inhaltsbereiche) Inhaltsbereiche Dehnung Kopfzeile Kopfzeile erweitert, Fußzeile, Inhalt, Inhalt Kopfzeile / Fußzeile Linke und Rechte Spalte Breiten und Höhen Einstellungen Boxenlayout 3 Menü Baumstruktur Boxenlayout 3 Menü Baumstruktur erweitert Horizontales Menü Einstellungen News Layout Einstellungen Erweiterte Menüklassen Einstellungen Erweiterte Rahmenklassen Einstellungen Fotogalerie Formulare Freie Einstellungen Alternative Vorlagen Vorlage einfach Vorlage standard Vorlage Newsletter Farben, Breite, Bilder Schrift Trennlinie, Liste, Überschriften Abbildungsverzeichnis Alle Rechte vorbehalten. Kein Teil dieser Dokumentation darf in irgendeiner Form (Druck, Fotokopie oder einem anderen Verfahren) ohne schriftliche Genehmigung der Niederösterreichischen Gemeinde-Datenservice GesmbH reproduziert oder unter Verwendung elektronischer Systeme verarbeitet, vervielfältigt oder verbreitet werden. Copyright 2008, Niederösterreichische Gemeinde-Datenservice GesmbH Seite 2 von 50

3 Einleitung 1.1 Verwendungszweck In RiS Kommunal 3.0 werden CSS (Cascading Style Sheets; kurz Stylesheets) verwendet, um die Erscheinung des Webauftritts zu verändern. Hier wird definiert, wie ein bestimmter Bereich oder Inhalt auszusehen hat. Das bedeutet, dass Einstellungen in diesem Bereich nichts mit den Inhalten der Website zu tun haben, sondern ausschließlich mit deren Layout. 1.2 Grundeinstellungen Abbildung 1: Grundeinstellungen (1) Auswählen bzw. Löschen einer CSS-Vorlage Hier besteht die Möglichkeit, aus verschiedenen vorgefertigten Farbschemata zu (2) wählen (z.b.: um einen ersten Eindruck zu gewinnen, welche Farben am ehesten den eigenen Vorstellungen entsprechen). Hier kann ein neuer Name für das Stylesheet eingegeben werden dadurch wird ein (3) neues CSS generiert, das dann an einer bestimmten Stelle verwendet werden kann [siehe (6)]. (4) Ein Klick auf diesen Button lädt die Vorlage zur weiteren Bearbeitung. Hier kann eingestellt werden, ob nur sehr wenige, generelle ( einfach, siehe 4.1), die gebräuchlichsten ( standard, siehe 4.2) oder viele, detaillierte (5) Einstellungsmöglichkeiten ( erweitert, siehe 3.) in den einzelnen Kategorien angezeigt werden sollen. Zusätzlich gibt es Einstellungsmöglichkeiten für den Newsletter (siehe 4.3). Hier wird angezeigt, bei welchem Menüpunkt das momentan aktive CSS verwendet (6) wird. Einstellbar ist dies über die Menüpunkte (Layout V3 / Menüpunkte). Für einen Webauftritt können beliebig viele Stylesheets generiert werden. Theoretisch kann jedem einzelnen Menüpunkt ein eigenes CSS-Layout zugeordnet werden und so das Aussehen der Site bei jedem Menüpunkt verändert werden. Seite 3 von 50

4 2 Allgemeine Erklärungen Es gibt einige Einstellungen, die in vielen Kategorien immer wieder vorkommen daher werden sie der Einfachheit halber vorweg kurz vorgestellt 2.1 Breiten, Abstände Bei Außen- und Innenabständen bzw. allen Rahmen können bis zu vier Angaben getätigt werden, da der Abstand bzw. die Dicke oben, rechts, unten und links definiert werden können. Die Angabe erfolgt auch genau in dieser Reihenfolge und zwar, aus Gründen der Barrierefreiheit (Priorität 2 AA), in der Einheit em. Dies ist eine relative Angabe, die sich auf die Schriftgröße bezieht. Es handelt sich hierbei um eine Voreinstellung in RiS Kommunal 3.0 entspricht 1em 16 Pixeln. Abbildung 2: Breiten und Abstände Ein Klick auf öffnet die Eingabehilfe hier können die Einstellungen bequem vorgenommen werden (es wird auch der entsprechende Pixelwert in Klammern angegeben). Innenabstände, häufig auch Polsterung genannt, legen den Abstand zwischen Inhalt und Rahmen einer Box fest. Außenabstände sind die Abstände zwischen dem Rand eines Elements und anderen Elementen, bzw. dem übergeordneten Element. Außenabstände sind immer transparent. Abbildung 3: Außen- und Innenabstand Seite 4 von 50

5 2.2 Größe, Schriftgröße Abbildung 4: Größe (1) Abbildung 5: Schriftgröße (2) (1) (2) Bei Größenangaben von einzelnen Breiten/Höhen kann die Angabe entweder in em oder pixel gemacht werden. Aus Gründen der Barrierefreiheit wird aber immer automatisch in em umgerechnet. Die Schriftgröße wird mittels Auswahl aus einem Drop-Down Menü getroffen. Auch hier wird automatisch die Einheit em ermittelt und verwendet aus Gründen der höheren Geläufigkeit ist aber in Klammern auch der Wert in px angegeben. 2.3 Farben Für Hintergründe, Schriften, Rahmen usw. können Farben gewählt werden. Hierzu kann der hexadezimale Farbcode (#RRGGBB) entweder manuell eingegeben, oder mittels Color Chooser eingestellt werden. Ein Klick auf öffnet den Color Chooser hier kann aus 216 Möglichkeiten die gewünschte Farbe ausgewählt werden. Abbildung 6: Color-Chooser Seite 5 von 50

6 Spezielle Einstellungen: Inherit: Farbe wird von der darüber liegenden Ebene übernommen Transparent: Farbe wird von der darunterliegenden Ebene übernommen Im Sinne der Barrierefreiheit ist immer auf ausreichenden Kontrast zwischen Hintergrundund Schriftfarbe zu achten! Oft kann die Schrift- oder Hintergrundfarbe eines Links, über dem sich gerade der Mauscursor befindet, verändert werden. Hier eine andere Farbe zu vergeben, erzeugt einen optischen Effekt den mouse-over-effekt. AUSREICHENDEN KONTRAST BERÜCKSICHTIGEN 2.4 Positionen Die Positionsangaben von Elementen (Text, Bildern) haben immer eine horizontale und eine vertikale Komponente. Diese können in der Eingabehilfe im Drop-Down Menü ausgewählt werden (horizontal: links zentriert rechts; vertikal: oben zentriert - unten) oder manuell in em oder pixel eingestellt werden. Es ist auch möglich, im Eingabefeld eine Kombination aus Angaben in em und relativen Angaben (wie left center right / bzw. top center - bottom) zu erfassen. Bsp.: Die Angabe 0.8em center rückt ein Bild 0.8em nach rechts und positioniert es vertikal zentriert. Abbildung 7: Positionsangabe Seite 6 von 50

7 2.5 Bilder einfügen In verschiedenen Bereichen können Bilder hochgeladen werden (z.b. als Hintergrundbild oder als Symbol vor Menüpunkten). Ein Klick auf öffnet ein Fenster und durch einen weiteren Klick auf gelangt man zum Medienserver, wo Bilder hochgeladen bzw. ausgewählt werden können. Soll ein Bild als Symbol z.b. vor Listeneinträgen oder Überschriften eingefügt werden, so empfiehlt sich eine Größe von 8x8 bis 10x10 Pixel. Abbildung 8: Bild einfügen 2.6 Drop-Down-Listen Bei einigen Einstellungen kann die gewünschte Option aus einer Liste gewählt werden. o o o Textdekoration: unterstrichen keine Textausrichtung: Links Zentriert Rechts Keine - Blocksatz Wiederholeffekt bei Hintergrundbildern: nicht wiederholen horizontal wiederholen vertikal wiederholen wiederholen (=horizontal und vertikal) Nicht wiederholen: Das Bild wird nur einmal an der gewählten Position angezeigt Horizontal wiederholen: Das Bild wird über die komplette Breite des Bereichs hinweg angezeigt. Der x-wert der Position ist hier irrelevant. Vertikal wiederholen: Das Bild wird über die komplette Höhe des Bereichs hinweg angezeigt. Der y-wert der Position ist hier irrelevant. Wiederholen: Das Bild wird sowohl horizontal als auch vertikal über die komplette Breite und Höhe wiederholt, d.h. der gesamte Bereich wird ausgefüllt. Die gesamte gewählte Position ist hier irrelevant. o Rahmentyp: gepunktet gestrichelt durchgezogen doppelt durchgezogen 3 D-Effekt Typ groove 3D-Effekt Typ Ridge 3D-Effekt Typ Inset 3D-Effekt Typ Outset Abbildung 9: Verschiedene Rahmentypen Abbildung 10: Listen Darstellungstypen o Darstellungstypen bei Listen: gefüllter Kreis leerer Kreis gefülltes Quadrat dezimale Nummerierung - römische Nummerierung (klein/groß) - Buchstaben (klein/groß) kein Zeichen Seite 7 von 50

8 3 Einstellungen Im Folgenden werden die Einstellungsmöglichkeiten erweitert erläutert. (alternative Vorlagen siehe 4) Abbildung 11: Redaktion - Einstellungskategorien (Überblick) Ein Klick auf öffnet das Stylesheet zur weiteren Bearbeitung. Die Elemente, die verändert werden können, sind thematisch in 15 Kategorien unterteilt, wobei es sich beim letzten Punkt um Freie Einstellungen handelt, in denen manuell Einstellungen vorgenommen werden können. Ein Klick auf die gewünschte Kategorie klappt diese auf und führt zu den Einstellungsmöglichkeiten. Wenn man die gewünschten Änderungen vorgenommen hat, führt ein Klick auf diese aus, und die kompletten Einstellungen werden unter dem angegebenen Dateinamen gespeichert. ACHTUNG!! Ein unter demselben Namen bereits vorhandenes Layout wird dabei überschrieben! Die Änderungen können sofort auf der Website betrachtet werden, dazu ist aber erst eine Aktualisierung notwendig das Browserfenster muß neu geladen werden. Seite 8 von 50

9 3.1 Allgemeine Schrifteinstellungen (Inhalt) Schriftfarbe, Schriftgröße, Textausrichtung Abbildung 12: Redaktion Schriftfarbe, Schriftgröße, Textausrichtung (1) Einstellen der Schriftfarbe (siehe 2.3) Einstellen der Zeilenhöhe der Schrift (sollte größer als die eingestellte (2) Schriftgröße sein, sonst überschneiden sich die Zeilen). Einstellen der Schriftart: Der Button Standardschrift fügt einige gängige Schriftarten ein. Aufgrund der angestrebten Einheitlichkeit wird nur eine Schriftart für die gesamte Website verwendet. Es können manuell mehrere Schriftarten eingeben werden, wobei diese durch einen Beistrich zu trennen sind. Wenn bei mehreren angegebenen Schriftarten beim User die erste nicht installiert ist, wird automatisch die zweite verwendet, usw. (3) Die Schriftart Verdana wurde eigens für die Verwendung im Internet entwickelt sie ist sehr gut lesbar und auf allen Betriebssystemen standardmäßig verfügbar. Keine ausgefallenen Schriftarten verwenden, denn jeder Besucher der Site muss die Schriftart auf seinem PC installiert haben, damit sie angezeigt werden kann. (4) Einstellen der Schriftgröße (siehe 2.2) (5) Einstellen der Textausrichtung (Links Zentriert Rechts Keine Blocksatz; siehe 2.6) (6) Einstellen der Schriftgröße für fliesstext2 (siehe 2.2): Damit kann ein Absatz, der im Editor als fliesstext2 definiert wird, besonders hervorgehoben werden. (7) Einstellen der Schriftfarbe für fliesstext2 (siehe 2.3). Damit kann ein Absatz, der im Editor als fliesstext2 definiert wird, besonders hervorgehoben werden. Seite 9 von 50

10 Abbildung 13: Redaktion - Definieren eines Absatzes als fliesstext Links Abbildung 14: Redaktion - Links (1) Einstellen der Schriftfarbe eines Links (siehe 2.3). (2) Textdekoration eines Links verändern (Unterstrichen keine; siehe 2.6) Einstellen der Schriftfarbe eines besuchten Links (d.h. dieser Link wurde bereits einmal angeklickt) (siehe 2.3) (3) Hier eine andere Farbe zu vergeben, erleichtert es dem User zu erkennen, welche Links er bereits besucht hat. (4) Textdekoration eines besuchten Links verändern (Unterstrichen keine; siehe 2.6) Seite 10 von 50

11 (5) Einstellen der Schriftfarbe für mouse-over-effekt (siehe 2.3) (6) Einstellen der Hintergrundfarbe eines Links ( mouse-over-effekt ; siehe 2.3) (7) Textdekoration eines Links, über dem sich gerade der Mauscursor befindet, verändern (Unterstrichen keine; siehe 2.6). (8) Einstellen der Schriftfarbe eines Links, der gerade angeklickt wird (siehe 2.3). (9) Textdekoration eines Links, der gerade angeklickt wird, verändern (Unterstrichen keine; siehe 2.6). (10) Einstellen der Schriftfarbe eines Links, auf dem gerade der Fokus liegt. Das passiert, wenn Links mit der Tabulatortaste angewählt werden (siehe 2.3). (11) Textdekoration eines Links, auf dem gerade der Fokus liegt, verändern (Unterstrichen keine; siehe 2.6) Übersicht, Pfad, Liste Abbildung 15: Redaktion Übersicht, Pfad, Liste (1) Einstellen der Schriftfarbe der Seitenübersicht (siehe 2.3) (2) Einstellen der Schriftfarbe der gerade selektierten Seite in der Seitenübersicht (siehe 2.3). (3) Einstellen der Schriftfarbe des Navigationspfades (siehe 2.3) (4) Einstellen der Schriftfarbe der ABC-Liste (siehe 2.3) (5) Einstellen der Schriftfarbe des gerade selektierten Eintrages in der ABC-Liste (siehe 2.3). Abbildung 16: Präsentation Übersicht, Pfad, Liste Seite 11 von 50

12 3.1.4 Überschriften Abbildung 17: Redaktion - Überschriften (1) Einstellen der Schriftgröße der Überschrift H1 = Seitenüberschrift (siehe 2.2) (2) Einstellen der Schriftfarbe der Überschrift H1 (siehe 2.3) (3) Einstellen der Textausrichtung der Überschrift H1 (Links Zentriert Rechts Keine Blocksatz; siehe 2.6) (4) Einstellen der Schriftgröße der Überschrift H2 (siehe 2.2) (5) Einstellen der Schriftfarbe der Überschrift H2 (siehe 2.3) (6) Einstellen der Textausrichtung der Überschrift H2 (Links Zentriert Rechts Keine Blocksatz; siehe 2.6) (7) Einstellen der Schriftgröße der Überschrift H3 (siehe 2.2) (8) Einstellen der Schriftfarbe der Überschrift H3 (siehe 2.3) (9) Einstellen der Textausrichtung der Überschrift H3 (Links Zentriert Rechts Keine Blocksatz; siehe 2.6) Die Überschrift H1 entspricht der Seitenüberschrift diese ergibt sich automatisch aus der Bezeichnung des Datensatzes. Man sollte bei der Vergabe weiterer Überschriften hierarchisch vorgehen, das heißt nachfolgend eine Überschrift H2 usw. Nur dann mehrere Überschriften einer Ebene vergeben, wenn die Inhalte auch wirklich gleich wichtig sind. Abbildung 18: Präsentation Überschriften, Links, Schrift Seite 12 von 50

13 3.1.5 News Hintergrund, Abkürzung Abbildung 19: Redaktion News - Hintergrund (1) (2) (3) Einstellen der Hintergrundfarbe für alle ungerade Zeilen bei den News (d.h. der erste, dritte, fünfte usw. News-Eintrag erhält in der Präsentation diese Hintergrundfarbe; siehe 2.3). Einstellen Hintergrundfarbe für alle geraden Zeilen bei den News (d.h. der zweite, vierte, sechste usw. News-Eintrag erhält in der Präsentation diese Hintergrundfarbe; siehe 2.3). Der Mauscursor nimmt die gewählte Form an, wenn er über einer gekennzeichneten Abkürzung positioniert ist. (Standard Cursor Fadenkreuz Hilfe Symbol Fingerzeig Text) (4) Einstellen der Hintergrundfarbe für eine Abkürzung (siehe 2.3) (5) Einstellen des Rahmentyps für eine Abkürzung (siehe 2.6) (6) Einstellen der Rahmendicke für eine Abkürzung (siehe 2.1) (7) Einstellen der Rahmenfarbe für eine Abkürzung (siehe 2.3) Abbildung 20: Präsentation News - Hintergrund Seite 13 von 50

14 Abbildung 21: Redaktion - Abkürzung Seite 14 von 50

15 3.2 Allgemeine Layout Einstellungen Abstand Homepage, Eingabefeld, Kategorienbox Abbildung 22: Abstand Homepage, Eingabefeld, Kategorienbox (1) Einstellen des Abstandes zwischen Homepage und Browserfenster (siehe 2.1) (2) Einstellen der Rahmenfarbe für Eingabefelder oder Schaltflächen (z. B.: Suche) (siehe 2.3). (3) Einstellen der Hintergrundfarbe für Buttons (z.b.: Suche) (siehe 2.3) (4) Einstellen der Hintergrundfarbe für den Kategorienbox-Kopf (siehe 2.3) (5) Einstellen der Schriftfarbe für die Überschrift des Kategorienbox-Kopfes (siehe 2.3) (6) Auswählen eines Bildes für den eingeklappten Kategorienbox-Kopf (siehe 2.5) (7) Auswählen eines Bildes für den ausgeklappten Kategorienbox-Kopf (siehe 2.5) (8) Einstellen der Hintergrundfarbe für die Auswahlmöglichkeiten in der Kategorienbox (siehe 2.3). (9) Einstellen der Schriftfarbe für ein selektiertes Datum (siehe 2.3) Abbildung 23: Präsentation - Abstand Homepage, Eingabefeld, Kategorienbox Seite 15 von 50

16 3.2.2 Listen, Trennlinie, Innenabstand Bilder Abbildung 24: Listen, Trennlinie, Abstand Bilder (1) Auswählen eines Symbols für Listeneineinträge der Ebene 1 bei Aufzählungslisten (siehe 2.6) (2) Auswählen eines Symbols für Listeneineinträge der Ebene 2 bei Aufzählungslisten (siehe 2.6) (3) Auswählen eines Symbols für Listeneineinträge der Ebene 3 und darunter bei Aufzählungslisten (siehe 2.6) (4) Auswählen einer Grafik für Listeneineinträge der Ebene 1 bei Aufzählungslisten (siehe 2.5) (5) Auswählen einer Grafik für Listeneineinträge der Ebene 2 bei Aufzählungslisten (siehe 2.5) (6) Auswählen einer Grafik für Listeneineinträge der Ebene 3 und darunter bei Aufzählungslisten (siehe 2.5) (7) Auswählen eines Symbols für Listeneineinträge der Ebene 1 bei nummerierten Listen (siehe 2.6) (8) Auswählen eines Symbols für Listeneineinträge der Ebene 2 bei nummerierten Listen (siehe 2.6) (9) Auswählen eines Symbols für Listeneineinträge der Ebene 3 und darunter bei nummerierten Listen (siehe 2.6) (10) Einstellen der Farbe von Trennlinien (siehe 2.3) (11) Einstellen des Abstandes (padding) zwischen Bild und Rahmen (siehe 2.1) Abbildung 25: Editor Listen und Trennlinie einfügen Seite 16 von 50

17 Abbildung 26: Präsentation - Listen, Trennlinie, Abstand Bilder 3.3 Tabellen Einstellungen (horizontal & vertikal) Abbildung 27: Redaktion Tabellen Einstellungen (horizontal & vertikal) Seite 17 von 50

18 (1) Einstellen der Hintergrundfarbe im Tabellenkopf (= 1. Zeile) (siehe 2.3) (2) Einstellen der Schriftfarbe im Tabellenkopf (= 1. Zeile) (siehe 2.3) (3) Einstellen des Rahmentyps für einen Rahmen um die gesamte Tabelle (siehe 2.6) (4) Einstellen der Rahmendicke für einen Rahmen um die gesamte Tabelle (siehe 2.1) (5) Einstellen der Rahmenfarbe für einen Rahmen um die gesamte Tabelle (siehe 2.3) (6) Einstellen des Rahmentyps für einen Rahmen um die einzelnen Zellen (siehe 2.6) (7) Einstellen der Rahmendicke für einen Rahmen um die einzelnen Zellen (siehe 2.1) (8) Einstellen der Rahmenfarbe für einen Rahmen um die einzelnen Zellen (siehe 2.3) (9) Einstellen der Hintergrundfarbe im Tabellenkopf (= 1. Spalte) (siehe 2.3) (10) Einstellen der Schriftfarbe im Tabellenkopf (= 1. Spalte) (siehe 2.3) (11) Einstellen des Rahmentyps für einen Rahmen um die gesamte Tabelle (siehe 2.6) (12) Einstellen der Rahmendicke für einen Rahmen um die gesamte Tabelle (siehe 2.1) (13) Einstellen der Rahmenfarbe für einen Rahmen um die gesamte Tabelle (siehe 2.3) (14) Einstellen des Rahmentyps für einen Rahmen um die einzelnen Zellen (siehe 2.6) (15) Einstellen der Rahmendicke für einen Rahmen um die einzelnen Zellen (siehe 2.1) (16) Einstellen der Rahmenfarbe für einen Rahmen um die einzelnen Zellen (siehe 2.3) Horizontaltabelle Vertikaltabelle Abbildung 28: Präsentation Tabellen Einstellungen (horizontal & vertikal) Seite 18 von 50

19 3.4 Boxenlayout 1 Spalte Links + Rechts Boxenlayouts werden zur optischen Gestaltung von Boxen-Inhalten verwendet. Diese können in allen Bereichen positioniert werden unabhängig vom verwendeten Boxenlayout. D.h., es ist nicht zwingend erforderlich, dass ein Boxen-Inhalt (z.b. Wetter), dem das Boxenlayout1 (also Spalte Links + Rechts) zugeordnet wurde, sich auch wirklich in einer der Spalten befinden muß (genauso kann er sich z.b. in der Kopfzeile befinden). Abbildung 29: Redaktion Boxenlayout 1 Spalte Links + Rechts (1) Einstellen der Schriftfarbe für den Boxen-Inhalt (siehe 2.3) (2) Einstellen der Rahmenfarbe (= Rahmen um den gesamten Boxen-Inhalt) (siehe 2.3) (3) Einstellen des Rahmentyps (= Rahmen um den gesamten Boxen-Inhalt) (siehe 2.6) (4) Einstellen der Rahmendicke (= Rahmen um den gesamten Boxen-Inhalt) (siehe 2.1) (5) Einstellen der Hintergrundfarbe für den gesamten Boxen-Inhalt (siehe 2.3) (6) Einstellen des Box-Außenabstandes (siehe 2.1) (7) Einstellen des Box-Innenabstandes (siehe 2.1) (8) Einstellen der Schriftgröße für die Überschrift (siehe 2.2) (9) Einstellen der Schriftfarbe für die Überschrift (siehe 2.3) (10) Auswählen eines Hintergrundbildes für die Überschrift (siehe 2.5) (11) Einstellen eines Wiederholeffekts für das Hintergrundbild (siehe 2.6) (12) Hintergrundbild für die Überschrift positionieren (siehe 2.4) (13) Seite 19 von 50 Breite der Überschrift einstellen o bei einer Angabe von über 100% kann die Überschrift über die horizontale Ausdehnung des Boxen-Inhaltes hinausgehen und dadurch abgeschnitten werden o eine relativ geringe Breite bewirkt, dass es zu Zeilenumbrüche in der Überschrift kommt (bei Überschriften die aus mehr als einem Wort bestehen) (14) Einstellen des Innenabstandes der Überschrift (siehe 2.1) (15) Einstellen der Hintergrundfarbe der Überschrift (siehe 2.3) (16) Einstellen der Textausrichtung der Überschrift (Links Zentriert Rechts Keine Blocksatz; siehe 2.6)

20 (17) Einstellen des Außenabstandes des Textes im Boxen-Inhalt (siehe 2.1) Diese Einstellung bezieht sich nur auf Elemente mit Text Bilder bleiben davon völlig unberührt. Abbildung 30: Präsentation - Boxenlayout 1 Spalte Links + Rechts Abbildung 31: Boxenlayout 1 Spalte Links + Rechts Box Text Außenabstand Seite 20 von 50

21 3.5 Boxenlayout 2 Box horizontal Abbildung 32: Redaktion Boxenlayout 2 Box horizontal (1) Einstellen der Schriftfarbe für den Boxen-Inhalt (siehe 2.3) (2) Einstellen der Rahmenfarbe (=Rahmen um den gesamten Boxen-Inhalt) (siehe 2.3) (3) Einstellen des Rahmentyps (=Rahmen um den gesamten Boxen-Inhalt) (siehe 2.6) (4) Einstellen der Rahmendicke (=Rahmen um den gesamten Boxen-Inhalt) (siehe 2.1) (5) Einstellen der Hintergrundfarbe für den gesamten Boxen-Inhalt (siehe 2.3) (6) Einstellen des Box-Außenabstandes (siehe 2.1) (7) Einstellen des Box-Innenabstandes (siehe 2.1) (8) Einstellen der Schriftgröße für die Überschrift (siehe 2.2) (9) Einstellen der Schriftfarbe für die Überschrift (siehe 2.3) (10) Einstellen der Textausrichtung der Überschrift (Links Zentriert Rechts Keine Blocksatz; siehe 2.6) Abbildung 33: Präsentation - Boxenlayout 2 Box horizontal Seite 21 von 50

22 3.6 Boxenlayout 4 Tray Abbildung 34: Redaktion Boxenlayout 4 - Tray (1) Einstellen der Schriftgröße für die Box (siehe 2.2) (2) Einstellen der Schriftfarbe für Links in der Box (siehe 2.3) (3) Einstellen der Textdekoration für Links in der Box (Unterstrichen keine; siehe 2.6) Einstellen der Schriftfarbe eines besuchten Links (d.h. dieser Link wurde bereits einmal angeklickt) (siehe 2.3) (4) Hier eine andere Farbe zu vergeben, erleichtert dem Besucher zu erkennen, welche Links er bereits besucht hat. (5) Textdekoration eines besuchten Links verändern (Unterstrichen keine; siehe 2.6) (6) Schriftfarbe eines Links, über dem sich gerade der Mauscursor befindet, verändern (siehe 2.3). (7) Textdekoration eines Links, über dem sich gerade der Mauscursor befindet, verändern (Unterstrichen keine; siehe 2.6). (8) Hintergrundfarbe eines Links, über dem sich gerade der Mauscursor befindet, verändern (siehe 2.3). (9) Schriftfarbe eines Links, der gerade angeklickt wird, verändern (siehe 2.3). (10) Textdekoration eines Links, der gerade angeklickt wird, verändern (Unterstrichen keine; siehe 2.6). (11) Schriftfarbe eines Links verändern, auf dem gerade der Fokus liegt. Das passiert, wenn man Links mit der Tabulatortaste anwählt. (12) Textdekoration eines Links, auf dem gerade der Fokus liegt, verändern (Unterstrichen keine; siehe 2.6). Abbildung 35: Präsentation - Boxenlayout 4 - Tray Seite 22 von 50

23 3.7 Hintergrundfarben und Hintergrundbilder (der Inhaltsbereiche) Inhaltsbereiche Die folgenden Einstellungsmöglichkeiten beziehen sich auf die Hintergrundfarben und bilder der verschiedenen Inhaltsbereiche wo sich diese befinden, verdeutlicht folgende Abbildung. Abbildung 36: Darstellungsbereiche in RiS-Kommunal 3.0 Abbildung 37: Darstellungsbereiche auf verschiedenen Ebenen Seite 23 von 50

24 3.7.2 Dehnung Abbildung 38: Redaktion Hintergrund Dehnung (1) Einstellen der Hintergrundfarbe der Dehnung (siehe 2.3) (2) Auswählen eines Hintergrundbildes für die Dehnung (siehe 2.5) (3) Einstellen der Position des Hintergrundbildes für die Dehnung (siehe 2.4) (4) Einstellen des Wiederholeffekts für das Hintergrundbild der Dehnung (siehe 2.6) Abbildung 39: Präsentation Wiederholen für Hintergrundbild in der Dehnung Mit einer kleinen Grafik, die wiederholt wird, lässt sich ein Hintergrund erstellen, der wenig Speicherplatz benötigt und dadurch schnell geladen werden kann. Weiters wird empfohlen, keine dunklen Farben für die Dehnung zu verwenden Kopfzeile Abbildung 40: Redaktion Hintergrund Kopfzeile (1) Einstellen der Hintergrundfarbe der Kopfzeile (siehe 2.3) (2) Einstellen der Rahmenfarbe für die Kopfzeile (siehe 2.3) (3) Einstellen der Rahmendicke für die Kopfzeile (siehe 2.1) (4) Einstellen des Rahmentyps für die Kopfzeile (siehe 2.6) (5) Auswählen eines Hintergrundbildes für die Kopfzeile (siehe 2.5) (6) Einstellen der Position des Hintergrundbildes für die Kopfzeile (siehe 2.4) (7) Einstellen des Wiederholeffekts für das Hintergrundbild der Kopfzeile (siehe 2.6 und 3.7.2) Abbildung 41: Präsentation Hintergrund Kopfzeile Seite 24 von 50

25 3.7.4 Kopfzeile erweitert, Fußzeile, Inhalt, Inhalt Kopfzeile / Fußzeile Abbildung 42: Redaktion Kopfzeile erw., Fußzeile, Inhalt, Inh, Kopfzeile/Fußzeile (1) Einstellen der Hintergrundfarbe der Kopfzeile erweitert (siehe 2.3) (2) Auswählen eines Hintergrundbildes für die Kopfzeile erweitert (siehe 2.5) (3) Einstellen der Position des Hintergrundbildes für die Kopfzeile erweitert (siehe 2.4) (4) Einstellen des Wiederholeffekts für das Hintergrundbild der Kopfzeile erweitert (siehe 2.6 und 3.7.2) (5) Einstellen der Hintergrundfarbe der Fußzeile (siehe 2.3) (6) Auswählen eines Hintergrundbildes für die Fußzeile (siehe 2.5) (7) Einstellen der Position des Hintergrundbildes für die Fußzeile (siehe 2.4) (8) Einstellen des Wiederholeffekts für das Hintergrundbild der Fußzeile (siehe 2.6 und 3.7.2) (9) Einstellen der Hintergrundfarbe des Inhalts (siehe 2.3) (10) Auswählen eines Hintergrundbildes für den Inhalt (siehe 2.5) Dieses Hintergrundbild sollte sehr dezent gehalten sein, um die Lesbarkeit des Inhalts nicht zu gefährden. Weiters muss man beachten, dass sich die Größe des Inhaltsfensters an den dargestellten Inhalt anpasst und daher von der Hintergrundgrafik, je nach gerade angezeigtem Inhalt, unterschiedlich viel zu sehen ist. (11) Einstellen der Position des Hintergrundbildes für den Inhalt (siehe 2.4) (12) Einstellen des Wiederholeffekts für das Hintergrundbild des Inhalts (siehe 2.6 und 3.7.2) (13) Einstellen der Hintergrundfarbe der Inhalt-Kopfzeile (siehe 2.3) (14) Einstellen der Hintergrundfarbe der Inhalt-Fußzeile (siehe 2.3) Seite 25 von 50

26 Abbildung 43: Präsentation Kopfzeile erw., Fußzeile, Inhalt, Inh. Kopfzeile/Fußzeile Linke und Rechte Spalte Abbildung 44: Redaktion Spalten Hintergrund (1) Einstellen der Hintergrundfarbe für die linke und rechte Spalte (siehe 2.3) (2) Auswählen eines Hintergrundbildes für die rechte Spalte (siehe 2.5) Einstellen der Position des Hintergrundbildes für die rechte Spalte (siehe 2.4) (3) Hier ist automatisch der Wert eingestellt, bei dem die rechte Spalte sichtbar beginnt, d.h. will man ein Bild links oben in der rechten Spalte platzieren, dann belässt man am besten den voreingestellten Wert. Einstellen des Wiederholeffekts für das Hintergrundbild der rechten Spalte (4) (siehe 2.6 und 3.7.2). (5) Auswählen eines Hintergrundbildes für die linke Spalte (siehe 2.5) Einstellen der Position des Hintergrundbildes für die linke Spalte (siehe 2.4) Will man ein Bild links oben in der linken Spalte platzieren, dann muss (6) left top eingestellt werden. Die horizontale Einstellung center ist nicht sichtbar (weil hinter dem Inhalts-Bereich verborgen), die Einstellung right befindet sich bereits in der rechten Spalte (7) Einstellen des Wiederholeffekts für das Hintergrundbild der linken Spalte (siehe 2.6 und 3.7.2) Seite 26 von 50

27 Abbildung 45: Präsentation linke und rechte Spalte Hintergrund Wenn für einen Inhaltsbereich ein Hintergrundbild eingestellt ist, wird dadurch die Hintergrundfarbe überdeckt. Für den Effekt in der rechten Spalte wurde dieses Bild links oben platziert und vertikal wiederholt. 3.8 Breiten und Höhen Einstellungen Abbildung 46: Redaktion Breiten und Höhen Einstellungen (1) Einstellen der Mindestbreite des Hauptfensters. Wird das Browserfenster unter die angegebene Mindestbreite verkleinert, dann erscheint ein horizontaler Scrollbalken. Empfohlen wird eine Breite zwischen 640 und 800 Pixel. (2) Einstellen der Maximalbreite des Hauptfensters (3) Einstellen der Höhe der Kopfzeile (4) Einstellen der Höhe der Kopfzeile erweitert (5) Einstellen der Höhe der Fußzeile (6) Einstellen der Breite der linken Spalte (7) Einstellen der Breite der rechten Spalte (8) Einstellen, ob die Kopfzeile angezeigt werden soll (9) Einstellen, ob die Kopfzeile erweitert angezeigt werden soll (10) Einstellen, ob die linke Spalte angezeigt werden soll (11) Einstellen, ob die rechte Spalte angezeigt werden soll (12) Einstellen, ob die Fußzeile angezeigt werden soll (13) Einstellen, ob der Überlauf der linken Spalte sichtbar oder versteckt sein soll. Das bedeutet, dass Inhalte, die in der linken Spalte angezeigt werden, aber für die Breite siehe 2.2 Seite 27 von 50

28 dieser Spalte zu groß sind (z.b. ein vertikales Drop-Down Menü), entweder über den rechten Rand hinausgehend angezeigt (=sichtbar), oder dort abgeschnitten werden (=versteckt). Sinnvoll ist hier meist die Einstellung sichtbar. Abbildung 47: Präsentation Breiten und Höhen Einstellungen Seite 28 von 50

29 3.9 Boxenlayout 3 Menü Baumstruktur Abbildung 48: Redaktion Boxenlayout 3, Menü Baumstruktur Diese Einstellungen (1) bis (3) vererben sich auf die darunterliegenden Ebenen. (1) Einstellen der Schriftgröße (siehe 2.2). Einstellen der Schriftfarbe eines Links, über dem sich gerade der Mauscursor (2) befindet (siehe 2.3). (3) Einstellen der Schriftfarbe eines Links, der gerade angeklickt wird (siehe 2.3). Auswählen eines Bildes für einen ausgeklappten Menüpunkt (d.h.: für einen Menüpunkt der Unterpunkte beinhaltet und angeklickt wurde). (4) Damit die Bilder (4) und (5) angezeigt werden, muss in der Redaktion unter Layout V3 / Objekttypen / Menü / Explorer-Navigation (+/-) anzeigen aktiviert werden. Auswählen eines Bildes für einen eingeklappten Menüpunkt (d.h.: für einen (5) Menüpunkt der Unterpunkte beinhaltet und nicht angeklickt wurde). Auswählen eines Bildes, das vor dem Menüpunkt der Ebene 0 (=Home) (6) angezeigt wird (siehe 2.5) (7) Einstellen der Schriftfarbe für den Menüpunkt der Ebene 0 (=Home) (siehe 2.3) (8) Einstellen der Hintergrundfarbe für die Menüpunkte der Ebene 1 (siehe 2.3) Einstellen der Rahmenfarbe für den ersten Menüpunkt der Ebene 1 (d.h. die Farbe des Striches über dem ersten Menüpunkt einer Ebene 1 (siehe 2.3)) (9) Diese Einstellung vererbt sich auf die darunterliegenden Ebenen, d.h. auch über dem ersten Menüpunkt der Ebene 2, 3 usw. erscheint ein Strich in der gewählten Farbe. (10) Einstellen der Rahmenfarbe für alle Elemente der Ebene 1 (d.h. die Farbe des Striches unter allen Menüpunkten der Ebene 1) Seite 29 von 50

30 (11) Einstellen der Schriftfarbe für die Menüpunkte der Ebene 1 (siehe 2.3) Einstellen der Schriftfarbe für aktive Menüpunkte der Ebene 1 (siehe 2.3) Aktiv bedeutet hier, dass der Inhalt des Menüpunktes gerade (12) angezeigt wird (=selektiert). Klickt man also z.b. auf einen Menüpunkt der Ebene 1, der über Unterpunkte verfügt, und der erste dieser Unterpunkte wird angezeigt, dann gilt der Punkt der Ebene 1 NICHT als aktiv. (13) Einstellen der Hintergrundfarbe für die Menüpunkte der Ebene 2 (siehe 2.3) (14) Einstellen der Schriftfarbe für die Menüpunkte der Ebene 2 (siehe 2.3) (15) Einstellen der Schriftfarbe für aktive (= selektierte) Menüpunkte der Ebene 2 (siehe 2.3) (16) Einstellen der Hintergrundfarbe für die Menüpunkte der Ebene 3 und aller darunter liegenden (siehe 2.3). (17) Einstellen der Schriftfarbe für die Menüpunkte der Ebene 3 und aller darunter liegenden (siehe 2.3). (18) Einstellen der Schriftfarbe für aktive (= selektierte) Menüpunkte der Ebene 3 und aller darunter liegenden (siehe 2.3). Bei der Baumstruktur gilt, dass alle Einstellungen, die für eine Ebene getroffen wurden, automatisch an alle untergeordneten Ebenen vererbt werden, wenn dort nicht andere Einstellungen getroffen werden. Man kann diese Vererbung auch gezielt durch Eingabe des Wertes inherit herbeiführen, dann wird der entsprechende Wert der übergeordneten Ebene übernommen. Abbildung 49: Präsentation - Boxenlayout 3, Menü Baumstruktur Seite 30 von 50

31 3.10 Boxenlayout 3 Menü Baumstruktur erweitert Abbildung 50: Redaktion Boxenlayout 3, Menü Baumstruktur; Abstände (1) Einstellen des Außenabstandes für die gesamte Ebene 1 (siehe 2.1) (2) Einstellen des Innenabstandes für die gesamte Ebene 1 (siehe 2.1) (3) Einstellen des Außenabstandes für die einzelnen Listeneinträge (= Menüpunkte) der gesamten Ebene 1 (siehe 2.1) (4) Einstellen des Innenabstandes für die einzelnen Listeneinträge (= Menüpunkte) der gesamten Ebene 1 (siehe 2.1) Dieselben Einstellungsmöglichkeiten gibt es auch für die Menüebenen 0 (dort gibt es aber nur einen Eintrag), sowie für die Ebenen 2 und 3 (Einstellungen in der Ebene 3, gelten automatisch für alle darunter liegenden, daher die Bezeichnung 3+ ). Hier muß auf jeden Fall darauf geachtet werden, dass Einstellungen, die für eine Ebene getroffen wurden, automatisch an alle untergeordneten Ebenen vererbt werden, wenn dort nicht andere Einstellungen getroffen werden. Angaben wie auto oder inherit führen dazu, dass die übergeordneten Einstellungen übernommen werden. Seite 31 von 50

32 Abbildung 51: Präsentation - Boxenlayout 3, Menü Baumstruktur, Abstände Seite 32 von 50

33 3.11 Horizontales Menü Einstellungen Das horizontale Menü wird in den meisten Fällen in der Kopfzeile erweitert angezeigt (einstellbar unter Boxen-Inhalte). Abbildung 52: Redaktion Horizontales Menü (1) Einstellen der Schriftgröße für das horizontale Menü (siehe 2.2) Einstellen der Schriftausrichtung für das horizontale Menü (Links Zentriert Rechts (2) Keine Blocksatz; siehe 2.6) Auswählen des Bildes für mouse-over-effekt (siehe 2.5) (3) Diese Einstellung gilt für alle Ebenen wird allerdings nur bei Menüpunkten mit Unterpunkten angewendet. (4) Einstellen der Position des Bildes für mouse-over-effekt (siehe 2.4) (5) Einstellen des Wiederholeffekts des Bildes für mouse-over-effekt (siehe 2.6) (6) Einstellen der Schriftfarbe für Menüpunkte der Ebene 1 (siehe 2.3) Auswählen des Bildes für Menüpunkte der Ebene 1 (siehe 2.5) (7) (8) Seite 33 von 50 Dieses Bild wird nur bei Menüpunkten mit Unterpunkten angezeigt und vererbt sich auf die darunterliegenden Ebenen, wenn dort nichts anderes eingestellt wird. Einstellen der Position des Bildes für Menüpunkte der Ebene 1 (siehe 2.4) Standardmäßig wird dieses Bild right center angezeigt. (9) Einstellen des Wiederholeffekts des Bildes für Menüpunkte der Ebene 1 (siehe 2.6) (10) Einstellen der Schriftfarbe für mouse-over-effekt in der Ebene 1 (siehe 2.3) (11) Einstellen der Hintergrundfarbe für Menüpunkte der Ebene 2 und darunter (siehe 2.3) (12) Einstellen der Farbe für den linken, rechten und oberen Rahmen der Menüpunkte der Ebene 2 und darunter (siehe 2.3). (13) Einstellen der Farbe für den unteren Rahmen der Menüpunkte der Ebene 2 und

34 darunter (siehe 2.3). (14) Einstellen der Schriftfarbe für Menüpunkte der Ebene 2 und darunter (siehe 2.3) Auswählen des Bildes für Menüpunkte der Ebene 2 und darunter (siehe 2.5) (15) Dieses Bild wird nur bei Menüpunkten mit Unterpunkten angezeigt. (16) (17) (18) Einstellen der Position des Bildes für Menüpunkte der Ebene 2 und darunter (siehe 2.4) Standardmäßig wird dieses Bild right center angezeigt. Einstellen des Wiederholeffekts des Bildes für Menüpunkte der Ebene 2 und darunter (siehe 2.6) Einstellen der Hintergrundfarbe für mouse-over-effekt in der Ebene 2 und darunter (siehe 2.3) Abbildung 53: Präsentation Horizontales Menü Seite 34 von 50

35 3.12 News Layout Einstellungen Abbildung 54: Redaktion News Layout Einstellungen (1) Seite 35 von 50 Einstellen der Rahmenfarbe für News (siehe 2.3) Wenn der Rahmen angezeigt werden soll, muss bei Allgemeines / News bei den einzelnen Einträgen Schlagzeile einrahmen aktiviert werden. (2) Einstellen der Schriftgröße für News-Überschrift (siehe 2.2) (3) Einstellen der Schriftfarbe für News-Überschrift (siehe 2.3) (4) Einstellen der Textdekoration für News-Überschrift (Unterstrichen keine; siehe 2.6) (5) Einstellen der Schriftfarbe für News-Überschrift bei bereits besuchten News (siehe 2.3) (6) Einstellen der Textdekoration für News-Überschrift bei bereits besuchten News (Unterstrichen keine; siehe 2.6) (7) Einstellen der Schriftfarbe für mouse-over-effekt bei News-Überschrift (siehe 2.3) (8) Einstellen der Textdekoration für mouse-over-effekt bei News-Überschrift (Unterstrichen keine; siehe 2.6) (9) Einstellen der Hintergrundfarbe für mouse-over-effekt bei News-Überschrift (siehe 2.3) (10) Einstellen der Schriftfarbe für News-Überschrift, die gerade angeklickt wird (siehe 2.3) (11) Einstellen der Textdekoration für News-Überschrift, die gerade angeklickt wird (Unterstrichen keine; siehe 2.6) (12) Einstellen der Schriftfarbe für News-Überschrift, auf der gerade der Fokus liegt. Das passiert, wenn Links mit der Tabulatortaste angewählt werden. (siehe 2.3) Einstellen der Textdekoration (Unterstrichen keine; siehe 2.6) für News- (13) Überschrift, auf der gerade der Fokus liegt. Das passiert, wenn Links mit der Tabulatortaste angewählt werden. (14) Auswählen eines Bildes für News-Überschriften (siehe 2.5) (15) Einstellen der Position des Bildes für News-Überschriften (siehe 2.4) (16) Einstellen des Abstandes (Innenabstand; padding) für News-Überschrift (siehe 2.1) (17) Einstellen des Abstandes (padding) zwischen Bild und Rahmen bzw. Text (siehe 2.1)

36 Abbildung 55: Präsentation News Layout Einstellungen Abbildung 56: Präsentation News Layout Einstellungen, Abstände 3.13 Erweiterte Menüklassen Einstellungen In dieser Kategorie können drei zusätzliche Menüklassen definiert werden, die Menüpunkten zugeordnet werden können, wodurch man diesen ein anderes Layout zuteilt. Um einem Menüpunkt eine erweiterte Menüklasse zuzuordnen, wählt man diesen unter Layout V3 / Menüpunkte aus und selektiert dann unter Horizontales Menü, Tray oder Menü Baumstruktur (je nachdem, wo der Menüpunkt angezeigt wird) die gewünschte erweitere Menüklasse. Seite 36 von 50

37 Abbildung 57: Redaktion - Erweiterte Menüklassen - Zuordnung Abbildung 55 zeigt nur die Optionen für die erweiterte Menüklasse 1, da es bei den Klassen 2 und 3 exakt dieselben Einstellungsmöglichkeiten gibt. Abbildung 58: Redaktion Erweiterte Menüklassen Einstellungen (1) Einstellen der Hintergrundfarbe für die erweiterte Menüklasse 1 (siehe 2.3) (2) Auswählen eines Hintergrundbildes für die erweiterte Menüklasse 1 (siehe 2.5) (3) Einstellen des Wiederholeffektes für das Hintergrundbild (siehe 2.6) (4) Einstellen der Position für das Hintergrundbild (siehe 2.4) (5) Einstellen des Innenabstandes der erweiterten Menüklasse 1 (siehe 2.1) (6) Einstellen des Außenabstandes der erweiterten Menüklasse 1 (siehe 2.1) (7) Auswählen des Rahmentyps der erweiterten Menüklasse 1 (siehe 2.6) (8) Einstellen der Rahmendicke der erweiterten Menüklasse 1 (siehe 2.1) (9) Einstellen der Rahmenfarbe der erweiterten Menüklasse 1 (siehe 2.3) (10) Einstellen der Schriftfarbe für Links in der erweiterten Menüklasse 1 (siehe 2.3) Seite 37 von 50

38 (11) Einstellen der Schriftfarbe für besuchte Links in der erweiterten Menüklasse 1 (siehe 2.3) (12) Einstellen der Schriftfarbe für Links, die gerade angeklickt werden (siehe 2.3) (13) Einstellen der Schriftfarbe für Links, auf denen gerade der Fokus liegt (siehe 2.3) (14) Einstellen der Schriftfarbe für den mouse-over-effekt (siehe 2.3) (15) Einstellen der Hintergrundfarbe für den mouse-over-effekt (siehe 2.3) Stellt man in einer Option inherit ein, dann wird aus der entsprechenden übergeordneten Klasse (also entweder Horizontales Menü, Menü Baumstruktur oder Tray) der Wert übernommen. Abbildung 59: Präsentation erweiterte Menüklassen Einstellungen Seite 38 von 50

39 3.14 Erweiterte Rahmenklassen Einstellungen In dieser Kategorie kann eine zusätzliche Rahmenklasse definiert werden, die dann über den Editor einem Bild zugeordnet werden kann. Abbildung 60: Redaktion Erweiterte Rahmenklassen Einstellungen (1) Auswählen eines Rahmentyps für die erweiterte Rahmenklasse (siehe 2.6) (2) Einstellen der Rahmendicke für die erweiterte Rahmenklasse (siehe 2.1) (3) Einstellen der Rahmenfarbe für die erweiterte Rahmenklasse (siehe 2.3) (4) Einstellen des Abstandes (padding) zwischen Bild und Rahmen (siehe 2.1) Abbildung 61: Editor Bild einfügen Rahmen einstellen Im Editor kann dann für jedes Bild - das man einfügt - eingestellt werden, ob ein Rahmen angezeigt werden soll. Abbildung 62: Präsentation Erweiterte Rahmenklassen Seite 39 von 50

40 3.15 Fotogalerie Abbildung 63: Redaktion Fotogalerie Einstellungen Die Übersicht einer Fotogalerie ist in RiS-Kommunal eine Liste, wobei jedes Vorschaubild (Thumbnail) einen Listeneintrag darstellt (1) Einstellen der Höhe, die einem Thumbnail zur Verfügung steht (siehe 2.1) Einstellen der Breite, die einem Thumbnail zur Verfügung steht (siehe 2.1) (2) (3) Einstellen der Außenabstände zwischen den einzelnen Thumbnails (siehe 2.1) (4) Einstellen des Rahmentyps für den Rahmen rund um ein Thumbnail (siehe 2.6) (5) Einstellen der Rahmendicke für den Rahmen rund um ein Thumbnail (siehe 2.1) (6) Einstellen der Rahmenfarbe für den Rahmen rund um ein Thumbnail (siehe 2.3) Ausrichtung des Alternativtextes (siehe 2.6) (7) Um den Alternativtext der einzelnen Bilder in der Übersicht darzustellen, muss unter Layout V3 Objekttypen Fotogalerie Foto, die Option Alternativtext anzeigen aktiviert sein. (8) Die Größe eines Thumbnails wird unter Layout V3 Autoskalierung Konfig Fotogalerie thumbnail eingestellt Falls der Alternativtext länger ist, als der Platz, den ein Thumbnail zur Verfügung hat (ergibt sich aus Breite und Höhe), dann kann hier eingestellt werden, dass der Text in den Bereich von anderen Thumbnails überläuft ACHTUNG: Die em-angaben für Höhe, Breite, Rahmendicke und Außenabstände beziehen sich hier auf die eingestellte Schriftgröße. D.h. wenn unter Allgemeine Schrifteinstellungen die Schriftgröße auf 0.75em (=12px) eingestellt wurde, dann werden diese 12px als Referenzwert für 1em herangezogen. Stellt man dann als Wert für die Höhe beispielsweise 9em ein, dann ist die Höhe 9 x 12px = 108px. In allen anderen Bereichen entspricht 1em immer 16px. Abbildung 64: Präsentation - Fotogalerie Seite 40 von 50

41 3.16 Formulare In dieser Kategorie können manuelle Einstellungen für das Erscheinungsbild der Online-Formulare vorgenommen werden, d.h. hier kann das Stylesheet völlig frei editiert werden. Die Verwendung dieser Möglichkeit wird nur Benutzern mit CSS-Kenntnissen empfohlen Freie Einstellungen In dieser Kategorie können manuelle Einstellungen für das CSS getätigt werden, d.h. hier können alle Klassen und Bereiche völlig frei bearbeitet werden. Alle hier eingetragenen Einstellungen, haben höhere Priorität, als die Einstellungen der anderen Kategorien. Abbildung 58 zeigt beispielsweise Einstellungen, die bewirken, dass neben den Einträgen im Menübaum, ab der Ebene 1, Grafiken angezeigt werden. Abbildung 65: Redaktion Freie Einstellungen Abbildung 66: Präsentation Beispiel für Freie Einstellungen Die Verwendungen der Freien Einstellungen wird nur Benutzern mit einiger CSS- Erfahrung empfohlen. Seite 41 von 50

42 4 Alternative Vorlagen 4.1 Vorlage einfach Abbildung 67: Redaktion Einstellungsmöglichkeiten Vorlage einfach Über diese CSS-Vorlage kann man über nur vier Einstellungen ein komplettes Layout für einen Webauftritt erstellen. Jede der vier Optionen ändert die Farbe von verschiedenen Schriften, Rahmen oder Hintergründen. Die nachfolgende Tabelle gibt Aufschluß darüber, was wodurch geändert wird: Es ist möglich, in der Vorlage einfach die generelle Farbausrichtung für die Website zu fixieren und dann, über die weiterführenden Einstellungsmöglichkeiten in den Vorlagen standard oder erweitert, Details zu ändern. (1) (2) Einstellen der Farbe für o Allgemeine Schrifteinstellungen (Inhalt): Schriftfarbe, Schriftfarbe fliesstext2, Link Schriftfarbe (auch aktiv, besucht, mouse-over, fokus), selektierte Schriftfarbe Seitenübersicht, selektierte Schriftfarbe ABC-Liste, Überschriften (H1, H2, H3) o Boxenlayout 1- Spalte Links + Rechts: Box Schriftfarbe, Box Überschrift Schriftfarbe o Boxenlayout 3 - Menü Baumstruktur: Menübaum Schriftfarbe (mouse over und aktiv), Menübaum Ebene 0 Schriftfarbe, Menübaum Ebene 2 Schriftfarbe o Horizontales Menü Einstellungen: Horizontales Menü Ebene 2+ Schriftfarbe o News Layout Einstellungen: Rahmenfarbe News Einstellen der Farbe für o Allgemeine Schrifteinstellungen (Inhalt): gerade Zeilen Hintergrundfarbe o Allgemeine Layout Einstellungen: Kategorienbox-Kopf Überschrift Schriftfarbe o Tabellen Einstellungen (horizontal & vertikal): Tabellenkopf Schriftfarbe (horizontal), Tabellenkopf Schriftfarbe (vertikal) o Boxenlayout 2 - Box horizontal: Box2 Schriftfarbe, Box2 Überschrift Schriftfarbe o Boxenlayout 4 - Tray: Tray Link Schriftfarbe (+ besucht, aktiv, fokus) o Hintergrundfarben und Hintergrundbilder (der Inhaltsbereiche): Dehnung Hintergrundfarbe, Kopfzeile Rahmenfarbe, Inhalt Hintergrundfarbe, Inhalt-Kopfzeile Hintergrundfarbe, Inhalt-Fußzeile Hintergrundfarbe Seite 42 von 50

43 (3) (4) o Boxenlayout 3 - Menü Baumstruktur: Menübaum Ebene 1 Schriftfarbe o Horizontales Menü Einstellungen: Horizontales Menü Ebene 1 Schriftfarbe, Horizontales Menu Ebene 2+ Hintergrundfarbe Einstellen der Farbe für o Allgemeine Schrifteinstellungen (Inhalt): Schriftfarbe Seitenübersicht, Schriftfarbe Navigations-Pfad, Schriftfarbe ABC- Liste o Allgemeine Layout Einstellungen: Eingabefeld Rahmenfarbe, Kategorienbox-Kopf Hintergrundfarbe, selektiertes Datum Schriftfarbe, Trennlinie Farbe o Tabellen Einstellungen (horizontal & vertikal): Tabellenkopf Hintergrundfarbe (horizontal), Tabellenkopf Hintergrundfarbe (vertikal) o Boxenlayout 1- Spalte Links + Rechts: Box Rahmenfarbe o Boxenlayout 2 - Box horizontal: Box2 Rahmenfarbe o o Boxenlayout 4 - Tray: Tray Link (Maus über Link) Hintergrundfarbe Hintergrundfarben und Hintergrundbilder (der Inhaltsbereiche): Kopfzeile Hintergrundfarbe, Kopfzeile erweitert Hintergrundfarbe, Fußzeile Hintergrundfarbe o Boxenlayout 3 - Menü Baumstruktur: Menübaum Ebene 1 Hintergrundfarbe, Menübaum Ebene 2 aktiver Menupunkt Schriftfarbe o Horizontales Menü Einstellungen: Horizontales Menü Ebene 2+ Rahmenfarbe (oben, rechts, links + Trennlinie), Horizontales Menü Ebene 2+ Rahmenfarbe (Linie unten) o News Layout Einstellungen: News H2 Link Schriftfarbe, News H2 Link (besucht) Schriftfarbe, News H2 Link (Maus über Link) Schriftfarbe, News H2 Link (aktiv) Schriftfarbe, News H2 Link (fokus) Schriftfarbe Einstellen der Farbe für o Allgemeine Schrifteinstellungen (Inhalt): ungerade Zeilen Hintergrundfarbe o Allgemeine Layout Einstellungen: Button Hintergrundfarbe, Kategorienbox Auswahl Hintergrundfarbe o Boxenlayout 1- Spalte Links + Rechts: Box Überschrift Hintergrundfarbe o o Boxenlayout 4 - Tray: Tray Link (Maus über Link) Schriftfarbe Hintergrundfarben und Hintergrundbilder (der Inhaltsbereiche): linke + rechte Spalte Hintergrundfarbe o Boxenlayout 3 - Menü Baumstruktur: Menübaum Ebene 1 Rahmenfarbe (oben) 1. Element, Menübaum Ebene 1 Rahmenfarbe (unten) Element 1+, Menübaum Ebene 1 aktiver Menupunkt Schriftfarbe, Menübaum Ebene 2 Hintergrundfarbe o Horizontales Menü Einstellungen: Horizontales Menü Ebene 1 Maus über Link Schriftfarbe, Horizontales Menü Ebene 2+ Maus über Link Hintergrundfarbe Seite 43 von 50

44 Abbildung 68: Präsentation Mit Vorlage einfach verändertes Layout 4.2 Vorlage standard In dieser Vorlage finden sich keine anderen Einstellungsmöglichkeiten, als in der erweiterten (siehe 3.), allerdings sind sie um die Kategorien Erweiterte Menüklassen Einstellungen (siehe 3.12) und Erweiterte Rahmenklassen Einstellungen (siehe 3.13), sowie einige Detaileinstellungen vermindert. 4.3 Vorlage Newsletter In dieser Vorlage finden sich Einstellungen für den Newsletter (sowohl für den klassischen als auch für den Veranstaltungsnewsletter). Nachdem man hier ein Stylesheet generiert hat, muß man es unter Layout V3 Objekttypen Newsletter noch zuordnen. Outlook 2007 verhindert die korrekte Darstellung verschiedener Layout-Elemente. Hintergrundgrafiken werden z.b. nicht angezeigt und von Text umflossene Bilder werden ohne Ausrichtung dargestellt. Will man Bilder links- oder rechtsbündig einstellen, dann muß man dies mittels einer Tabelle im Editor verwirklichen. Seite 44 von 50

45 4.3.1 Farben, Breite, Bilder Abbildung 69: Redaktion Newsletter: Farben, Breite, Bilder (1) Einstellen der Hintergrundfarbe für die Dehnung (siehe 2.3) Auswählen eines Hintergrundbildes für Kopfzeile (siehe 2.5) Outlook 2007 kann keine Hintergrundbilder darstellen! Hier eingefügte Grafiken werden bei Newsletter Empfänger mit Outlook 2007 im (2) Einsatz nicht dargestellt. Wenn Sie sicher gehen wollen dass eine Header Grafik in jeden Mail Programm dargestellt wird sollten Sie, beim versenden des Newsletters, die Grafik über den Editor einfügen. (3) Einstellen der Position für das Hintergrundbild (siehe 2.4) (4) Einstellen der Höhe der Kopfzeile; sollte auf die Höhe der Hintergrundgrafik abgestimmt werden (siehe 2.2) (5) Einstellen der Hintergrundfarbe für den Inhaltsbereich (siehe 2.3) Einstellen der Breite des Inhaltsbereichs (siehe 2.1) (6) Es empfiehlt sich, eine Breite von ca. 600 bis 650 Pixel zu verwenden. Seite 45 von 50

46 4.3.2 Schrift Abbildung 70: Redaktion Newsletter: Schrift Outlook 2007 verhindert die Darstellung von verschiedenen grafischen Effekten, wie z.b. andere Farben für besuchte Links oder mouse-over-effekte. (1) Einstellen der Schriftfarbe für den Newsletter (siehe 2.3) (2) Einstellen der Zeilenhöhe der Schrift (sollte größer als die eingestellte Schriftgröße sein, sonst überschneiden sich die Zeilen). (3) Einstellen der Schriftart (siehe 3.1.1; (3)) (4) Einstellen der Schriftgröße (siehe 2.2) (5) Einstellen der Textausrichtung (Links Zentriert Rechts Keine Blocksatz; siehe 2.6) (6) Einstellen der Schriftfarbe für Links im Newsletter (siehe 2.3) (7) Textdekoration eines Links verändern (Unterstrichen keine; siehe 2.6) Einstellen der Schriftfarbe eines besuchten Links (d.h. dieser Link wurde bereits einmal angeklickt) (siehe 2.3) (8) Hier eine andere Farbe zu vergeben, erleichtert es dem User zu erkennen, welche Links er bereits besucht hat funktioniert aber nicht mit Outlook (9) Textdekoration eines besuchten Links verändern (Unterstrichen keine; siehe 2.6) (10) Einstellen der Schriftfarbe für mouse-over-effekt (siehe 2.3) (11) Einstellen der Hintergrundfarbe eines Links ( mouse-over-effekt ; siehe 2.3) (12) Textdekoration eines Links, über dem sich gerade der Mauscursor befindet, verändern (Unterstrichen keine; siehe 2.6). (13) Einstellen der Schriftfarbe eines Links, der gerade angeklickt wird (siehe 2.3). Seite 46 von 50

47 (14) (15) (16) Textdekoration eines Links, der gerade angeklickt wird, verändern (Unterstrichen keine; siehe 2.6). Einstellen der Schriftfarbe eines Links, auf dem gerade der Fokus liegt. Das passiert, wenn Links mit der Tabulatortaste angewählt werden (siehe 2.3). Textdekoration eines Links, auf dem gerade der Fokus liegt, verändern (Unterstrichen keine; siehe 2.6) Trennlinie, Liste, Überschriften Abbildung 71: Redaktion Newsletter: Trennlinie, Liste, Überschriften (1) Einstellen der Farbe von Trennlinien (siehe 2.3) (2) Auswählen eines Symbols für Listeneineinträge der Ebene 1 bei Aufzählungslisten (siehe 2.6) (3) Einstellen der Schriftgröße der Überschrift H1 (siehe 2.2) (4) Einstellen der Schriftfarbe der Überschrift H1 (siehe 2.3) (5) Einstellen der Textausrichtung der Überschrift H1 (Links Zentriert Rechts Keine Blocksatz; siehe 2.6) (6) Einstellen der Schriftgröße der Überschrift H2 (siehe 2.2) (7) Einstellen der Schriftfarbe der Überschrift H2 (siehe 2.3) (8) Einstellen der Textausrichtung der Überschrift H2 (Links Zentriert Rechts Keine Blocksatz; siehe 2.6) Seite 47 von 50

48 Abbildung 72: Präsentation - Newsletter Außerdem gibt es auch beim Newsletter die Möglichkeit, Freie Einstellungen zu setzen, d.h. hier kann CSS manuell völlig frei bearbeitet werden. Alle hier eingetragenen Einstellungen, haben höhere Priorität, als die Einstellungen der anderen Kategorien (siehe 3.14). Die Benutzung der Freien Einstellungen wird nur Benutzern mit einiger CSS- Erfahrung empfohlen. Seite 48 von 50