(0) exportieren Drucken
Alle erweitern
Erweitern Minimieren

Erstellen und Bereitstellen von Outlook Web Access-Designs

 

Letztes Änderungsdatum des Themas: 2005-03-22

Die Informationen in diesem Thema sollen Exchange-Administratoren dabei helfen, Designs von Microsoft® Office Outlook® Web Access für Exchange Server 2003 zu entwerfen und zu ändern.

Bei der Entwicklung von Microsoft Exchange Server 2003 entschied sich Microsoft dafür, die Verwendung von Stylesheets zu vereinheitlichen. Diese Entscheidung sorgte dafür, dass das Aussehen des Outlook Web Access-Clients nahezu dem von Microsoft Office Outlook 2003 entspricht. Im Rahmen dieser Arbeit stellten einige höchst motivierte Leute im Outlook Web Access-Team fest, dass es relativ einfach ist, diese Version mit einer Funktion zum Ändern der Oberfläche oder Designs auszustatten. Dank dieser Bemühungen können Sie nun eigene Outlook Web Access-Designs erstellen. Dieses Thema befasst sich mit den Grundlagen des Erstellens und Implementierens eines Designs in Outlook Web Access.

Wenn Sie diesen Artikel gelesen haben, sollten Sie über ausreichend Grundwissen betreffend die Designarchitektur in Outlook Web Access verfügen, um eigene angepasste Designs wie das in der folgenden Abbildung gezeigte Design für die Microsoft Xbox® zu erstellen.

XBOX-Design für OWA-Benutzeroberfläche

Beinahe jedes Element in Outlook Web Access – vom neuen E-Mail-Formular bis zur Anzeige des Listen- und Vorschaufensters – wird mithilfe von kaskadierenden HTML-Stylesheets formatiert.

Eines der grundlegenden Ziele von SGML (Standard Generalized Markup Language) besteht darin, eine Möglichkeit zum Trennen des Formats vom Inhalt bereitzustellen. HTML und XML sind Beispiele für auf SGML basierende Sprachen. Vor der Einführung von kaskadierenden Stylesheets (Cascading Style Sheets, CSS) war diese Trennung in HTML nicht möglich, und die Autoren mussten die gesamte Formatierung in der Regel inline in den Inhalt einschließen. Mit CSS können Sie diese Formatanweisungen nun in einer separaten Datei speichern und dem Inhalt stattdessen Bezeichnertags zuweisen. Diese Funktion ist ein Grundpfeiler von Outlook Web Access-Designs.

Wenn Sie sich mit den Grundlagen von Outlook Web Access-Designs vertraut machen möchten, müssen Sie auch wissen, wie kaskadierende Stylesheets funktionieren.

Outlook Web Access-Designs setzen auf das Konzept der verknüpften Stylesheets auf. In verknüpften Stylesheets wird im Kopfbereich jeder HTML-Seite eine Deklaration angezeigt, die angibt, welches Stylesheet für diese Seite verwendet werden soll.

So sehen Sie beispielsweise im Kopfbereich jeder von Outlook Web Access dargestellten Seite Headerinformationen wie die folgenden:

<!--Copyright (c) 2000-2003 Microsoft Corporation. All rights reserved.-->
<HTML xmlns:MSIE DIR=LTR>
<HEAD>
<LINK rel="stylesheet" type="text/css" href="http://myserver.example.com/exchweb/themes/0/owacolors.css">

Mit der Anweisung <link> wird also angegeben, wo sich das Stylesheet befindet, mit dem die Outlook Web Access-Designinformationen gesteuert werden.

Das Stylesheet als solches besteht aus einer Reihe von Regeln, mit denen definiert wird, wie die Elemente auf der Seite formatiert werden. Diese Regeln können sich sowohl auf Standardelemente wie Überschriften- und Absatzformate sowie auf die Elemente beziehen, die mit Klassen bezeichnet werden.

Das standardmäßige Stylesheet für Outlook Web Access-Designs, das sich an [Laufwerksbuchstabe]\Programme\Exchsrvr\exchweb\themes\0\owacolors.css befindet, enthält mehr als 900 Zeilen Text. Mit dieser Datei werden die Regeln oder Styledefinitionen festgelegt, die die Designfarben angeben, die beim Erstellen von Outlook Web Access-Seiten verwendet werden.

Eine Regel setzt sich aus einer Liste von Elementen oder HTML-Tags gefolgt von einer Liste von CSS-Styleeigenschaften zusammen, die in geschweifte Klammern eingeschlossen werden. Es können mehrere Tags gleichzeitig definiert werden, indem diese durch Kommas getrennt werden. Jede Eigenschaft in der Regel wird durch ein Semikolon abgesetzt, wie das folgende Beispiel zeigt.

/* DEFAULT (BLUE) */
.dlgBody, .noteBody, .bdyOptions, .bdySpell, .bdyRules, .bdyFontEdit, .bdyDatePkr
{
     background-color:#C3DAF9;
}

Diese Beispiel für ein Stylesheet zeigt, dass für mehrere unterschiedliche Outlook Web Access-Elemente die gleiche Hintergrundfarbe (background-color) #C3DAF9 verwendet wird. Dieser Verweis auf die Farbe anhand einer Zahl entspricht den Regeln für die Festlegung von Farben in HTML.

In einem Outlook Web Access-Stylesheet können zwar zahlreiche Eigenschaften definiert werden, dennoch möchten wir Sie mit der nachstehenden Tabelle mit den Eigenschaften vertraut machen, die von Wichtigkeit sind.

 

Wichtige CSS-Eigenschaften für ein Outlook Web Access-Design

background-image

border-bottom-color

background-color

color

border-color

border-left-color

border-right-color

border-top-color

border-bottom-color

noteAnmerkung:
Sie können zwar mit der Angabe weiterer Eigenschaften experimentieren, wozu auch Eigenschaften für die Definition von Schriftarten und Positionierung gehören, dennoch sollten Sie im weiteren Verlauf Vorsicht walten lassen. Es wird dringend empfohlen, die ursprüngliche CSS-Datei zu sichern, bevor Sie Änderungen hieran vornehmen.

In HTML wird eine Farbe mit einem aus sechs Ziffern bestehenden hexadezimalen Wert angegeben. Diese Zahlen sind in Zweiergruppen aufgeteilt, von denen jede eine Schattierung von Rot, Grün und Blau (RGB) angibt. Der Wert wird in CSS-Dateien und auf Webseiten mit einer voranstehenden Raute (#) angegeben.

Beim Entwurf Ihres Designs finden Sie es ggf. hilfreich, auf eine funktionsreiche Grafikbearbeitungssoftware wie PaintShop Pro oder Adobe Photoshop oder auf ein spezielles Tool für die Farbauswahl zurückzugreifen, wie auf eines der vielen Dienstprogramme, die auf zahlreichen Internetsites wie Download.com von C|Net zur Verfügung stehen. Mit diesen Tools können Farben analysiert und die jeweiligen Werte für das Web ermittelt werden.

Die am häufigsten verwendeten Farben können anhand des Namens angegeben werden. Diese Kürzel werden von den meisten Browsern verarbeitet, die die Farbe dann bei der Darstellung in den hexadezimalen Wert umwandeln.

Outlook Web Access wurde für Microsoft Internet Explorer ab Version 6 optimiert. Solche Clients werden als Premium-Clients bezeichnet. Outlook Web Access bietet zudem eine grundlegende E-Mail-Anzeige mit anderen Browser, wozu Internet Explorer 5.01 und Netscape 4.8 und höher gehören. Unglücklicherweise wird CSS nicht von allen Basic-Clients unterstützt, sodass umfassend formatierte Designs von diesen Clients nicht unterstützt werden.

Wie bereits im Vorfeld erwähnt, sucht Outlook Web Access in einem der Unterverzeichnisse der Exchange 2003 Server-Installation nach den Designinformationen. Begonnen wird mit dem Verzeichnis ..\exchsrvr\exchweb\themes. In diesem Verzeichnis befindet sich eine Reihe von Unterverzeichnissen. Hier finden Sie ein Unterverzeichnis für jedes Design, das für diese spezielle Outlook Web Access-Instanz installiert wurde.

In der folgenden Abbildung wird die standardmäßige Designstruktur angezeigt.

Speicherort von designbezogenen Dateien

Eine neue Exchange Server 2003-Installation weist fünf Unterverzeichnisse auf. Jedes Verzeichnis entspricht jedem der fünf Standarddesigns im Produkt.

In jedem der Unterverzeichnisse finden Sie eine Master-CCS-Datei sowie mehrere Grafikdateien, die mit dem Design verknüpft sind.

In der folgenden Tabelle wird beschrieben, wofür jede Grafik steht.

 

Grafik Datei Beschreibung
OWA-Produktlogo

Logo2.gif

Das Hauptlogo. Hierbei handelt es sich um ein Logo der Marke mit einer Größe von 179 x 36 Pixeln. Um den Arbeitsaufwand möglichst gering zu halten, sollte Sie versuchen, dieses Logo durch eine Grafik zu ersetzen, die etwa die gleiche Größe aufweist. Darüber hinaus sollte auch die Hintergrundfarbe des Logos die gleiche wie die Hintergrundfarbe der Anwendung sein.

OWA-Designabbild

Nb-bkgd.gif

Der Hintergrund der Navigationsleiste (wird wiederholt). Hierbei handelt es sich um einen Streifen der Größe 1 x 26 Pixel, der als Hintergrundfarbe für die Navigationsleiste auf der linken Seite des Outlook Web Access-Fensters verwendet wird. In der Standardgrafik wird ein Farbverlauf verwendet.

OWA-Designgrafik

Nb-hide-ql.gif

Grafik für die „ausgeblendete“ Navigationsleiste. Diese 50 x 8 Pixel große Grafik wird im linken Navigationsfenster verwendet, wenn die Navigationsleiste aus- oder eingeblendet wird.

OWA-Designgrafik

Nb-ql-tgl.gif

Grafik für den „ausgeblendeten“ Hintergrund der Navigationsleiste. Diese Grafik wird hinter den Dateien hb-hide-ql.gif und hb-show-ql.gif angezeigt. Sie weist normalerweise eine Verlaufsfüllung sowie eine Farbe auf, die zu den darüberliegenden Grafiken passt.

OWA-Designgrafik

Nb-sel-bkgd.gif

Navigationsleiste ausgewählt. Diese 1 x 26 Pixel große Grafik wird als Hintergrundhervorhebung für die Navigationsleiste verwendet.

OWA-Designgrafik

Nb-show-ql.gif

Grafik für die „eingeblendete“ Navigationsleiste. Diese Grafik weist die gleiche Größe wie nb-hide-ql.gif auf. Sie wird angezeigt, wenn die Navigationsleistenoptionen (Kalender, Optionen, Posteingang) ausgeblendet sind.

OWA-Designgrafik

Nin-bg.gif

Popupbenachrichtigung „Toast“-Hintergrund. Diese 130 x 126 Pixel große Grafik ist der Hintergrund für die Outlook Web Access-Popupbenachrichtigung. Sie können diese Grafik mit dem Wasserzeichen einer beliebigen Grafik ändern, müssen jedoch sicherstellen, dass der im Vordergrund angezeigte Text weiterhin lesbar ist.

OWA-Designgrafik

Resize-dot.gif

Eine 1 x 1 Pixel große Grafik, die von Outlook Web Access intern verwendet wird.

OWA-Designgrafik

Tool-bkgd.gif

Der Symbolleistenhintergrund. Diese 1 x 32 Pixel große Grafik wird als Hintergrund für die Symbolleiste im oberen Bereich des Outlook Web Access-Fensters verwendet. Sie dient zudem als Hintergrundgrafik für nicht aktivierte Schaltflächen in der Navigationsleiste.

Mit diesen Grundkenntnissen im Hinblick auf kaskadierende Stylesheets und die unterschiedlichen verfügbaren Clientversionen von Outlook Web Access können nun Sie ein neues Design mit Namen „Orange“ basierend auf dem Standarddesign „Blau“ erstellen.

Die nachstehende Abbildung zeigt Outlook Web Access mit dem blauen Standarddesign.

Blaues Standarddesign für OWA-Benutzeroberfläche

Die Vorgehensweise zum Ändern des Designs umfasst die folgenden Schritte:

  1. Erstellen Sie für das Design einen neuen Bereich auf dem Outlook Web Access-Server.
  2. Aktualisieren Sie die Registrierung des Servers so, dass Outlook Web Access das neue Design finden kann.
  3. Ändern Sie das Stylesheet des Designs.
  4. Aktualisieren Sie die Grafiken des Designs.

Die einfachste Methode zum Erstellen eines Designs besteht darin, das Standarddesign zu ändern. Wenn Sie beispielsweise ein neues Design mit Namen „Florida“ erstellen möchten, kopieren Sie zunächst die Dateien des Standarddesigns.

noteAnmerkung:
Im Allgemeinen stellen die meisten Unternehmen Outlook Web Access in einen Front-End/Back-End-Szenario bereit. Die Anweisungen in diesem Artikel ein solches Szenario voraus. Bei der Erstellung eines Prototyps auf einem eigenständigen Server können Sie alle Einstellungen auch für den eigenständigen Computer übernehmen.
So erstellen Sie einen neuen Bereich für Ihr Design
  1. Wechseln Sie auf dem Front-End-Server zum Verzeichnis Programme\exchsrvr\exchweb\themes\0\.

  2. Erstellen Sie eine Kopie dieses Ordners, und nennen Sie die Kopie Programme\exchsrvr\exchweb\themes\orange\.

CautionVorsicht:
Eine fehlerhafte Bearbeitung der Registrierung kann zu ernsthaften Problemen führen, die möglicherweise eine Neuinstallation des Betriebssystems erforderlich machen. Hierdurch entstandene Probleme können unter Umständen nicht mehr behoben werden. Sichern Sie daher vor dem Ändern der Registrierung alle wichtigen Daten.
So aktualisieren Sie die Registrierung für die Verwendung des neuen Designs
  1. Führen Sie auf dem Back-End-Server den Registrierungs-Editor aus, und suchen Sie den folgenden Schlüssel:

    HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA

  2. Wenn dieser Unterschlüssel nicht vorhanden ist, erstellen Sie einen neuen Unterschlüssel mit Namen „Themes“.

  3. Erstellen Sie im Unterschlüssel „Themes“ einen neuen Zeichenfolgenwert (REG_SZ) mit Namen „FloridaTheme“. Dieser Wert ist für die Benutzer nicht sichtbar.

  4. Legen Sie diesen Wert wie in der nachstehenden Abbildung gezeigt fest:

    id=0x1;path=orange;title=Florida;bgcolor=#b26d0a

    Speicherort des Registrierungsschlüssels für OWA

    ID: Der Bezeichner für das Design muss für alle Designs eindeutig sein. Er kann als dezimale oder hexadezimale Zahl angegeben werden und muss kleiner als 0x80000000 sein. Beachten Sie zudem, dass die erste Zahl eine Null sein muss, wenn Sie den Bezeichner als hexadezimalen Wert angeben.

    Bei integrierten Designs muss das erste Bit nicht auf 1 festgelegt werden, bei benutzerdefinierten Designs schon. Aus diesem Grund können Sie kein benutzerdefiniertes Design mit einem anderen Bezeichner als 0 festlegen. Nachdem Sie den Bezeichner in der Registrierung angegeben haben, müssen Sie mit dem Operator ODER (OR) den Wert 0x80000000 angeben, und dieser Wert ist dann der finale Bezeichner in den Postfächern der Benutzer.

    Path (Pfad): Gibt den Pfad unterhalb des Verzeichnisses exchweb\themes an, in dem sich die Designdateien befinden.

    Title (Titel): Der Outlook Web Access-Anzeigename für das Design. Dieser Wert darf nicht leer und nicht mehr als 512 Zeichen lang sein.

    Bgcolor (Hintergrundfarbe): Gibt die standardmäßige Hintergrundfarbe für das Frameset des Designs an. Dieser Wert muss außerhalb der Datei owacolors.css angegeben werden, da die Hintergrundfarbe eines Framesets nicht mit einer CSS-Datei festgelegt werden kann. Dieser Wert ist als Hintergrundfarbe der Frames im Abschnitt „Vereinfachte Farbpalette“ aufgeführt. Wenn Sie die Hintergrundfarbe der Frames noch einmal ändern, müssen Sie diesen Wert aktualisieren. Darüber hinaus sollten Sie sicherstellen, dass der Wert für die Hintergrundfarbe des Logos und dieser Wert gleich sind. Der Wert muss im Format #RRGGBB angegeben werden (Sie können keine Browserstandardnamen wie Schwarz oder Weiß verwenden).

    Nach 30 bis 60 Sekunden sollte das neue Design auf der Optionsseite von Outlook Web Access angezeigt werden.

    noteAnmerkung:
    Stellen Sie sicher, dass Sie die Designdateien auf alle Front-End-Server kopieren und dass Sie die Registrierungseinstellungen auf allen Back-End-Servern aktualisieren. Wenn Outlook Web Access feststellt, dass der Registrierungswert falsch ist, wird das Design ignoriert.

Nachdem der Server eingerichtet wurde, beginnt die eigentliche Arbeit.

So ändern Sie das kaskadierende Stylesheet
  1. Suchen Sie die CSS-Datei.

  2. Verwenden Sie den Editor oder einen anderen Text-Editor, um alle Vorkommen von „themes\0“ durch „themes\orange“ zu ersetzen.

  3. Speichern Sie die aktualisierte Datei.

Mithilfe des aktualisierten Stylesheets können Sie die Farben in Ihrem Design ändern.

Eine der schwierigsten Aufgaben beim Entwurf Ihres Designs besteht darin, eine gute Zusammenstellung von einander ergänzenden Farben zu finden. Eine Möglichkeit zum Verhindern größerer Probleme besteht darin, eine Hauptfarbe auszuwählen, auf der das Design basieren soll, und diese Farbe dann für die anderen Elemente im Design nur minimal anzupassen. Solche Anpassungen lassen sich einfacher realisieren, wenn Ihr Grafikbearbeitungsprogramm die Modi für Farbton, Sättigung und Helligkeit unterstützt.

Eine detaillierte Erörterung der richtigen Farbauswahl würde den Umfang dieses Dokuments sprengen. Um es kurz zu umreißen: Die Farbauswahl basiert meist auf der Theorie des Farbkreises. In der Farbenlehre gibt es einige recht einfache Werkzeuge, die verwendet werden können, um Komplementärfarben zu ermitteln. In Fällen, in denen mit kontrastierenden Farben gearbeitet werden soll, besteht die grundlegende Vorgehensweise darin, Farben auszuwählen, die einander im Farbkreis genau gegenüberliegen. Mit diesem Ansatz sollte ein Farbenpaar entstehen, das sich aus Komplementärfarben zusammensetzt. Die einfachste Methode zur Auswahl der Designfarben besteht darin, ein monochromatisches Farbschema zu verwenden, in dem alle Farben im Hinblick auf Helligkeit und Sättigung Variationen einer einzigen Farbe sind. Dieses Schema ist visuell ansprechend und einfach zu entwickeln. Aber obwohl es einfach einzusetzen ist, bietet dieses Schema nicht notwendigerweise auch den besten Kontrast.

Wenn sich in Ihrem Team ein Webdesigner befindet, sollte dieser Ihnen helfen können, ein ansprechendes Farbschema für das angepasste Design zu entwickeln. Für diesen Artikel wurde ein Programm namens Color Wheel Pro verwendet, um eine Palette von Komplementärfarben für das Design zu generieren. Für unser Design wird ein geteiltes Komplementärfarbenschema verwendet, das auf einem warmen Orange basiert. Die generierte Palette basiert auf einem einzigen Farbton, umfasst jedoch unterschiedliche Helligkeits- und Sättigungsstufen.

Die folgende Abbildung zeigt die Farbpalette des Designs „Florida“ und die zugehörige Palette der Komplementärfarben.

Farbpalette aus blau und orange für das Design "Florida"

Im Standarddesign von Outlook Web Access und im Stylesheet owacolors.css sind mehr als 60 Farben angegeben, und die CSS-Datei enthält mehr als 900 Zeilen und über 200 Klassen, die durchsucht werden müssen. Im Abschnitt „In der Standardvorlage verwendete Farben“ sind die Farben dokumentiert, die im Standarddesign verwendet werden. Glücklicherweise müssen nur etwa 30 Hauptfarben geändert werden, um ein Design zu entwerfen.

Die folgende Abbildung zeigt die in diesem Design verwendete Palette sowie die Ersatzfarben. Detaillierte Informationen zur Standardfarbpalette finden Sie im Abschnitt „In der Standardvorlage verwendete Farben“ an späterer Stelle in diesem Artikel.

 

Entspricht

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

1. Hintergrund von Dialogfenstern und Hinweisen

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

2. Hintergrund von Frames

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

3. Symbolleistenhintergrund

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

4. Hintergrund von Navigationsleisten und Bezeichnern, Farbe der Trennlinie in Symbolleisten

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

5. Menühintergrund

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

6. Farbe für 3D-Rahmen: dunkel

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

7. Farbe für 3D-Rahmen: normal, Farbverlauf des Ansichtsheaders (zweite Linie, sollte etwas dunkler als 15 sein)

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

8. Hintergrund der Informationsleiste

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

9. Text der Informationsleiste

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

10. Hintergrund der S/MIME-Fortschrittsanzeige

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

11. Hintergrund für nicht ausgewählte Registerkarte (sollte etwas dunkler als 1 sein)

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

12. Registerkartenhintergrund (sollte etwas dunkler als 11 sein)

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

13. Sortierspalte in Ansichtsheadern

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

14. Hintergrund des Ansichtsheaders, ausgewählte Zeile in der Ansicht (Schatten)

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

15. Farbverlauf des Ansichtsheaders (erste Linie, sollte etwas dunkler als 14 sein)

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

16. Hintergrund des Vorschaufensters

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

17. Ausgewähltes Element

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

18. Rahmen des Feldsets (sollte dunkler als 1 sein)

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

19. Hintergrundfarbe der linken Seitenleiste des Kontextmenüs

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

20. Hintergrundfarbe des Hovereffekts von Schaltflächen

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

21. Angeklickte Schaltfläche

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

22. Rahmenfarbe des Navigationsleistenbezeichners

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

23. Rahmenfarbe des Baumstruktur-Steuerelements

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

24. Hintergrund des Kalenderheaders

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

25. Rahmen des Kalenderheaders (sollte etwas heller als 23 sein)

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

26. Hintergrund des Frei/Gebucht-Steuerelements

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

27. Hintergrund des Frei/Gebucht-Steuerelements (Empfänger)

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

28. Rahmen des Baumstruktur-Steuerelements

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

29. Hintergrund des Vorschaufensters (keine Elemente)

Tabelle der Farbersetzungen zum Erstellen eines neuen Designs

Die folgende Abbildung zeigt die Hauptseite von Outlook Web Access mit den meisten dieser Farben, und zwar so nummeriert und gekennzeichnet, dass diese der Palettendatei entsprechen.

Beschriftungen an der OWA-Benutzeroberfläche, die die Farbpositionen erläutern

Die meisten der Farben sind eine Variation von Blau. Zum Entwurf eines neuen Designs können Sie die vorstehend dargestellte vereinfachte Palette verwenden und damit beginnen, die Farben durch die Farben des neuen Designs zu ersetzen. Versuchen Sie, Farben mit vergleichbarer Sättigung und Helligkeit zu verwenden. Für einige der Kontrastfarben können Sie entweder dunklere Farben oder Komplementärfarben verwenden, um einen besseren Kontrast zu erzielen. Zwei Beispiele hierfür sind die Hintergrundfarbe des Hovereffekts einer Schaltfläche und die Farbe für angeklickte Schaltflächen.

So ersetzen Sie die Farben in Ihrer Palette
  1. Öffnen Sie die CSS-Datei, und ändern Sie die Farbpalette mithilfe der vereinfachten Farbpalette eines Grafikbearbeitungsprogramms wie Adobe Photoshop oder Jasc Paint Shop Pro.

  2. Verwenden Sie die Pipette (oder ein ähnliches Tool) und die Standardpalettendatei in Verbindung mit der vorstehend erstellten Farbpalette, um den neuen Hexadezimalwert zu finden.

    noteAnmerkung:
    Vergewissern Sie sich, dass die Grafikkarte des Computers auf den 32-Bit-Farbmodus eingestellt ist. Wenn Sie nicht im 32-Bit-Farbmodus arbeiten, können die vom Grafikbearbeitungsprogramm zurückgegebenen Werte für die Standardpalette ein wenig von denen abweichen, die in diesem Artikel aufgeführt sind.
  3. Notieren Sie den Hexadezimalwert jeder Ersatzfarbe, sodass Sie die Datei owacolors.css mit den neuen Farben aktualisieren können.

  4. Öffnen Sie die Datei owacolors.css im Editor, und suchen und ersetzen Sie den jeweiligen alten hexadezimalen Farbwert durch den neuen Wert.

  5. Nachdem Sie die Datei owacolors.css geändert haben, kopieren Sie die neue Datei auf den Server, melden Sie sich bei Outlook Web Access an, und prüfen Sie die bisherigen Ergebnisse. Denken Sie daran, dass sich diese Änderungen nur auf die Farben und nicht auf die Grafiken beziehen. Nachdem Sie die Anpassung Ihrer Farbpalette abgeschlossen haben, können Sie damit beginnen, die Grafiken zu ändern.

Der letzte Schritt beim Erstellen eines benutzerdefinierten Designs besteht darin, die standardmäßigen Grafiken zu ändern.

So aktualisieren Sie die Grafiken
  1. Öffnen Sie jede Grafik in Ihrem Grafikbearbeitungsprogramm, und konvertieren Sie sie vorübergehend in eine Grafik mit 24-Bit- oder 32-Bit-Farben.

  2. Weisen Sie der Grafik Farbverläufe zu, die den Farben der neuen Palette entsprechen.

noteAnmerkung:
Sie sollten die aktualisierten Grafiken als GIF-Dateien mit 16 oder 256 Farben speichern. Die Dateien tool-bkgd.gif und nin-bg.gif sollten mit 256 Farben gespeichert werden. Die anderen Grafiken können mit 16 Farben gespeichert werden.

Die folgende Tabelle zeigt die aktualisierten Grafiken für das Beispieldesign.

 

Grafik Datei Beschreibung
Gefälschtes OWA-Logoabbild

Logo2.gif

Das Hauptlogo. Ersetzen Sie bei dieser Grafik die Hintergrundfarbe durch den neuen „Framehintergrund“, oder ersetzen Sie die Grafik durch eine eigene, benutzerdefinierte Grafik.

OWA-Designgrafik "Florida"

Nb-bkgd.gif

Der Hintergrund der Navigationsleiste (wird wiederholt). Hierbei handelt es sich um einen Streifen der Größe 1 x 26 Pixel, der als Hintergrundfarbe für die Navigationsleiste auf der linken Seite des Outlook Web Access-Fensters verwendet wird. In der Standardgrafik wird ein Farbverlauf verwendet.

OWA-Designgrafik

Nb-hide-ql.gif

Grafik für die „ausgeblendete“ Navigationsleiste. Diese 50 x 8 Pixel große Grafik wird im linken Navigationsfenster verwendet, wenn die Navigationsleiste aus- oder eingeblendet wird.

OWA-Designgrafik "Florida"

Nb-ql-tgl.gif

Grafik für den „ausgeblendeten“ Hintergrund der Navigationsleiste. Diese Grafik wird hinter den Dateien hb-hide-ql.gif und hb-show-ql.gif angezeigt. Sie weist normalerweise eine Verlaufsfüllung sowie eine Farbe auf, die zu den darüberliegenden Grafiken passt.

OWA-Designgrafik "Florida"

Nb-sel-bkgd.gif

Navigationsleiste ausgewählt. Diese 1 x 26 Pixel große Grafik wird als Hintergrundhervorhebung für die Navigationsleiste verwendet.

OWA-Designgrafik

Nb-show-ql.gif

Grafik für die „eingeblendete“ Navigationsleiste. Diese Grafik weist die gleiche Größe wie nb-hide-ql.gif auf. Sie wird angezeigt, wenn die Navigationsleistenoptionen (Kalender, Optionen, Posteingang) ausgeblendet sind.

OWA-Designgrafik "Florida"

Nin-bg.gif

Popupbenachrichtigung „Toast“-Hintergrund. Diese 130 x 126 Pixel große Grafik ist der Hintergrund für die Outlook Web Access-Popupbenachrichtigung. Sie können diese Grafik mit dem Wasserzeichen einer beliebigen Grafik ändern, müssen jedoch sicherstellen, dass der im Vordergrund angezeigte Text weiterhin lesbar ist.

OWA-Designgrafik

Resize-dot.gif

Eine 1 x 1 Pixel große Grafik, die von Outlook Web Access intern verwendet wird.

OWA-Designgrafik "Florida"

Tool-bkgd.gif

Der Symbolleistenhintergrund. Diese 1 x 32 Pixel große Grafik wird als Hintergrund für die Symbolleiste im oberen Bereich des Outlook Web Access-Fensters verwendet. Sie dient zudem als Hintergrundgrafik für nicht aktivierte Schaltflächen in der Navigationsleiste. Diese Grafik sollte mit 256 Farben gespeichert werden.

Die nachstehende Abbildung zeigt Outlook Web Access mit dem neuen Design.

Beispiel für das auf die OWA-Benutzeroberfläche angewendete Design "Florida"

Die folgenden Abschnitte enthalten weitere Informationen, die beim Erstellen eines Designs möglicherweise hilfreich sind.

Als optionaler Download zu diesem Artikel steht eine HTML-Datei mit Namen owatheme.htm zur Verfügung. Wenn diese Datei in das gleiche Verzeichnis wie das Stylesheet owacolors.css kopiert wird, wird eine Liste aller im Stylesheet verwendeten Farben zusammen mit den zugehörigen Outlook Web Access-Klassen angezeigt. Ein Beispiel für diese Liste finden Sie im Abschnitt „In der Standardvorlage verwendete Farben“ an späterer Stelle in diesem Artikel.

Im Allgemeinen gilt, dass Sie einen Screenshot der Outlook Web Access-Benutzeroberfläche erstellen sollten, wenn Sie eine Farbe sehen, die Sie ändern möchten. Diesen Screenshot können Sie dann in Ihrem Grafikbearbeitungsprogramm öffnen, um den für das Web relevanten Wert der Farbe zu ermitteln. Diesen Wert können Sie anschließend im Stylesheet owacolors.css suchen und ersetzen.

Faktisch allen Outlook Web Access-Objekten ist eine Styleklasse zugeordnet. Beim Anzeigen der Datei owacolors.css fallen einige hiervon mehr ins Auge als andere. Möglicherweise erfordert es ein wenig Experimentierfreude, um herauszufinden, welchem Klassennamen Sie einen Hintergrund hinzufügen möchten.

Im Allgemeinen entspricht die CSS-Syntax zum Hinzufügen einer Hintergrundgrafik etwa dem folgenden Beispiel:

Classname
{
     Background-image:url(/exchweb/themes/yourtheme/imagename.gif)
}

Wenn Sie dem Hintergrund der Outlook Web Access-Seite im benutzerdefinierten Design beispielsweise eine Palme hinzufügen möchten, ändern Sie die Regel für die Klassen msgViewer, msgViewerCont und msgViewerGroupCont. Das folgende Beispiel zeigt die Änderung.

.msgViewer, .msgViewerCont, .msgViewerGroupCont
{
     Background-image:url(/exchweb/themes/orange/viewpalm.gif)
}

Die nachstehende Abbildung zeigt die Ergebnisse dieser Änderung.

Design 'Florida' für die OWA-Benutzeroberfläche mit Palme als Hintergrund

Obwohl es mehr als 200 Klassen gibt, unter denen Sie wählen können, sind wahrscheinlich nur einige wenige von Interesse, wenn es um das Ändern der Hintergrundgrafik geht. In der folgenden Tabelle sind diese Klassen aufgeführt.

 

Klassennamen Beschreibung

.notebody

Alle Elementtypen (Nachricht, Besprechungsanfrage, Aufgabe)

.treefolder, .nbTreeProgress

Ordnerstruktur-Steuerelement

.dlgBody

Verschiedene generische Dialogfelder wie Verschieben, Kopieren, Neuer Ordner, Namensauflösung der Adresse, Nachrichtenoptionen.

.previewBody, .vwPrvwTD

Hauptteil und Hintergrund des Vorschaufensters

.bdyOptions

Outlook Web Access-Optionsseite

.bdySpell

Dialogfelder der Rechtschreibprüfung

.bdyRules

Regeloption und -Editor

.msgViewer, .msgViewerCont, .msgViewerGroupCont

Outlook Web Access-Ansichtsliste der Elemente

Dieser Abschnitt befasst sich mit den Grafiken des Standarddesigns. Werden Grafiken außerhalb der Designverzeichnisse geändert, sind hiervon alle Designs betroffen. In Outlook Web Access unter Exchange Server 2003 werden mehr als 500 verschiedene Grafiken verwendet. In den Standarddesigns von Outlook Web Access werden jedoch nur einige wenige spezielle Grafiken verwendet. Wenn Sie Änderungen an den Hauptgrafiken vornehmen möchten, sollten Sie nicht die Grafikgröße (Höhe und Breite in Pixeln) ändern.

Dieser Artikel befasst sich zwar nur mit Änderungen an der Datei owacolors.css, dennoch gibt es weitere, intern verwendete Stylesheets, die sich im Verzeichnis ..exchweb/versionnumber/controls befinden, wozu auch OWAStyle.css gehört. Generell gilt, dass die in OWAStyle.css definierten Elemente nicht in owacolors.css auftreten, obwohl sich die Klassendefinitionen in diesen Dateien ggf. überlappen. Wenn Sie versuchen, eines dieser Elemente in Ihrem Designstylesheet neu zu definieren, führt dies zu keinerlei Ergebnissen, da immer die letzte Elementdefinition gültig ist, und in der HTML, die der Browser verarbeitet, auf die Datei OWAStyle.css als letzte verwiesen wird.

Nachdem Sie Ihr Design hinzugefügt haben, stehen verschiedene weitere Optionen für die Festlegung der Art und Weise zur Verfügung, wie das Design in Ihrem Unternehmen verwendet wird.

Wenn Sie die Anweisungen in diesem Artikel befolgen, steht Ihr Design standardmäßig für alle Benutzer zur Verfügung. Einige Unternehmen möchten ihre Outlook Web Access-Installation aber möglicherweise standardisieren und das benutzerdefinierte Design festlegen, das für alle Benutzer angezeigt wird. Sie können das Standarddesign festlegen, indem Sie den Outlook Web Access-Registrierungseinstellungen den Eintrag „DefaultTheme“ hinzufügen und dessen Wert so festlegen, dass er auf das von Ihnen erstellte Standarddesign verweist.

So legen Sie mit dem Eintrag „DefaultTheme“ das Standarddesign fest
  1. Führen Sie auf dem Back-End-Server den Registrierungs-Editor aus.

  2. Navigieren Sie zum folgenden Schlüssel:

    \HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA\Themes

  3. Erstellen Sie unter dem Unterschlüssel Themes einen neuen DWORD-Wert mit dem Namen DefaultTheme.

  4. Geben Sie als Wert für DefaultTheme die ID des Designs an, das als Standard verwendet werden soll.

noteAnmerkung:
Wenn DefaultTheme festgelegt wird, wird das gleiche Design für alle Benutzer angezeigt, und es kann kein anderes Design ausgewählt werden. Wenn die Benutzer eigene Designs auswählen können sollen, löschen Sie den Wert DefaultTheme.

Die folgenden Ressourcen enthalten zusätzliche Informationen zum Erstellen von Outlook Web Access-Designs.

Mit der Datei OWATheme.htm wird eine Liste aller Farben und Klassen generiert, die in einem Design verwendet werden. Wenn Sie diese Datei verwenden möchten, kopieren Sie die Datei owacolors.css des Designs, das Sie prüfen möchten, in das gleiche Verzeichnis wie die Datei OWATheme.htm. Wenn Sie die Datei OWATheme.htm öffnen, wird die Datei owacolors.css gelesen, und es wird eine Tabelle mit den Farben und Klassen für Ihr Design generiert.

Die Datei OWATheme.htm befindet sich in der optionalen herunterladbaren Datei, die für diesen Artikel zur Verfügung steht.

Die standardmäßige vereinfachte Outlook Web Access-Palette befindet sich in der optionalen herunterladbaren Datei.

In Zusammenarbeit mit dem Xbox-Team wurde ein Xbox-Design für Outlook Web Access erstellt.

So verwenden Sie das Xbox-Design
  1. Laden Sie die optionale Datei für das Design herunter.

  2. Dekomprimieren Sie den Inhalt der Datei, und kopieren Sie ihn in ein Verzeichnis themes\xbox.

  3. Führen Sie den Registrierungs-Editor aus, und suchen Sie den folgenden Schlüssel:

    \HKEY_LOCAL_MACHINE\SYSTEM\CurrentControlSet\Services\MSExchangeWeb\OWA\Themes

  4. Fügen Sie unter dem Unterschlüssel Themes den Wert xbox hinzu.

  5. Legen Sie diese Wert wie folgt fest:

    Id=100;path=xbox;title=Xbox;bgcolor=#000000

    noteAnmerkung:
    Möglicherweise müssen Sie die ID so ändern, dass sie mit dem Server kompatibel ist.

In der nachstehenden Tabelle sind alle im Standarddesign verwendeten Farben aufgeführt. Jeder Eintrag enthält ein Farbmuster, den webäquivalenten Code, den RGB-Code und sämtliche Outlook Web Access-Klassen, in denen diese Farbe in der Datei owacolor.css verwendet wird.

 

Farbbeispiel aus der OWA-Palette

dlgBody noteBody bdyOptions bdySpell bdyRules bdyFontEdit bdyDatePkr bdyView tabselected tabdiv srchBody notification galBody galInputArea galButtons gallBody gallClsTable gallClsTextField enBody enClsTable rmndrBODY rmndrICell btnSig btnSig btnSig btnSig btnEnc btnEnc btnEnc btnEnc

Farbbeispiel aus der OWA-Palette

mainBody cbToolbar fldrTitleBar vwTbl THeader nbTableMain dailyAllDayCell dailyAllDayContainer

Farbbeispiel aus der OWA-Palette

msgViewer msgViewerCont msgViewerGroupCont recipWell recipBox tbButtonDown:hover cbSubmenu cbSubmenu cbSubmenu cbSubmenu viewBody tblMsgBody txtBody grpLEFT grpRIGHT grpTop grpBottom tabselected tabselected tabselected tabsunselected tabsunselected tabsnone tabdiv tabdiv vwHdrTD vwHdrTD vwHdr vwHdr vwHdrSrtd vwHdrSrtd vwHdrSrtd attachList divCtxtMenu divCtxtMenu previewBody rulesHeader rulesHeader selRow trSelItem nbDropMenu nbDropMenu treeFolder nbTreeProgress dlgTree dlgTree dlgTree rowselected divgaltable rmndrRowSel groupHdr groupHdr ctxtMenu ctxtMenu ctxtMenu ctxtMenu cpMainTable dailyAppt weeklyMainTable weeklyAlldayAppointment weeklySelectedDateHeader monthlyNextPrevDateHeader monthlySelectedDateHeader monthlyDateBody monthlyNextPrevDateBody monthlyAlldayAppointment fbbodyLTR fbbodyLTR fbbodyLTR fbbodyLTR fbbodyRTL fbbodyRTL fbbodyRTL fbbodyRTL recip hrdivbottom btnSigPreview btnSigPreview btnSigPreview btnSigPreview btnEncPreview btnEncPreview btnEncPreview btnEncPreview btnSigHover btnSigHover btnSigDown btnSigDown

Farbbeispiel aus der OWA-Palette

msgHeader previewHdr rnSecBar fldDisabled unselRow trUnselItem rowunselected UNKNOWN fb_splitter_behavior fb_span_div fbtable fbbodyLTR fbbodyRTL tr sigInfoInput sigInfoTable

Farbbeispiel aus der OWA-Palette

recipWell ipFlat ipFlat ipFlat ipFlat recipBox recipBox recipBox recipBox MSGBODY MSGBODY MSGBODY MSGBODY txtBody txtBody txtBody txtBody attachList attachList attachList attachList

Farbbeispiel aus der OWA-Palette

cbToolbar FORMATBAR nbTglTD nbTglQLTD

Farbbeispiel aus der OWA-Palette

tbDivider tbDivider tbDivider tbDivider apptTdDatePicker apptTdDatePicker nbLabel

Farbbeispiel aus der OWA-Palette

tbButton tbButtonDown tbButtonRaise cbSubmenuItem cbSubmenu rnProgressBar divRcpResRIn divRcpResROut divRcpResCIn divRcpResCOut divRcpResC unselRow shdwRow ctxmnuMnu trUnselItem nbHref treeFolder nbTreeProgress fldName rowunselected divgaltable divgaltable divgaltable divgaltable rmndrCol1hd rmndrCol1hd crdHeader groupHdr cpMainTable cpMainTable cpMainTable cpMainTable cpTopRow cpActiveDateCell cpSelectedDateCell cpKeyNavCell1 cpKeyNavCell1 cpKeyNavCell1 cpKeyNavCell1 cpKeyNavCell1 dailyViewCell dailyAllDayAppointment dailyAllDayAppointment dailyAllDayAppointment dailyAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailySelectedAllDayAppointment dailyContainer1 dailyContainer1 dailyContainer1 dailyContainer1 dailyContainer2 dailyContainer2 dailyContainer2 dailyContainer2 dailyContainer3 dailyContainer3 dailyContainer3 dailyContainer3 dailyContainer4 dailyContainer4 dailyContainer4 dailyContainer4 dailyContainer5 dailyContainer5 dailyContainer5 dailyContainer5 dailyContainer6 dailyContainer6 dailyContainer6 dailyContainer6 dailyContainer7 dailyContainer7 dailyContainer7 dailyContainer7 dailyAppt dailyAppt dailyAppt dailyAppt weeklyMainTable weeklyMainTable weeklyMainTable weeklyMainTable weeklyDateCell weeklyDateCell weeklyDateCell weeklyDateCell weeklyWeekendDateCell weeklyWeekendDateCell weeklyWeekendDateCell weeklyWeekendDateCell weeklySelectedAppointment weeklySelectedAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyAlldayAppointment weeklyDateHeader weeklySelectedDateHeader monthlyDateHeader monthlySelectedDateHeader monthlyNextPrevDateHeader monthlyDayTitlesCell monthlyDayTitlesCell monthlyDayTitlesCell monthlyDayTitlesCell monthlySelectedAppointment monthlySelectedAlldayAppointment monthlyAlldayAppointment monthlyAlldayAppointment monthlyAlldayAppointment monthlyAlldayAppointment

Farbbeispiel aus der OWA-Palette

tbButtonDown tbButtonRaise tbButtonRaise tbButton A:hover tbButton:hover cbSubmenuItem A:hover cbSubmenuItem:hover

Farbbeispiel aus der OWA-Palette

tbButtonDown:hover

Farbbeispiel aus der OWA-Palette

cbSubmenuItem cbSubmenuItem cbSubmenuItem cbSubmenuItem fbButton fbButton fbButton fbButton cbSubmenu divContextMenu divCtxtMenu ctxmnuBar nbDropMenu ctxtMenu dailyRow monthlyDayHeader

Farbbeispiel aus der OWA-Palette

tblMsgBody tblMsgBody vwHdrSrtd vwHdrSrtd vwHdrBrdr3 divCtxtMenu nbDropMenu dlgTree dlgTree btnSigHover btnSigHover btnSigDown btnSigDown

Farbbeispiel aus der OWA-Palette

tblMsgBody tblMsgBody tabselected tabsunselected tabsunselected tabdiv tabdiv vwHdrTD vwHdrTD vwHdr vwHdr vwHdrBrdr2 divCtxtMenu rulesTableContainer rulesTableContainer rulesHeader rulesHeader nbDropMenu groupHdr groupHdr

Farbbeispiel aus der OWA-Palette

rnStatusBar

Farbbeispiel aus der OWA-Palette

rnStatusBar

Farbbeispiel aus der OWA-Palette

rnProgressBar

Farbbeispiel aus der OWA-Palette

tabsunselected

Farbbeispiel aus der OWA-Palette

tabBkgd

Farbbeispiel aus der OWA-Palette

vwHdrSrtd

Farbbeispiel aus der OWA-Palette

vwHdrTR vwHdr tblHdr rulesHeader shdwRow gallistheading crdHeader groupHdr cpTopRow cpSelectedDateCell calDateHeadingCell dailyAllDayCell dailyAllDayAppointment dailySelectedAllDayAppointment calDateHeadingText1 calDateHeadingText2 calDateHeadingText3 calDateHeadingText4 calDateHeadingText5 calDateHeadingText6 calDateHeadingText7 dailyHoursCell dailyMinsCell

Farbbeispiel aus der OWA-Palette

vwHdrBrdr1

Farbbeispiel aus der OWA-Palette

divRcpUnresRIn divRcpUnresROut divRcpUnresCIn divRcpUnresCOut divRcpUnresC ruleBroken cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell cpTodaysDateCell tblSigInvalid tblSigInvalid

Farbbeispiel aus der OWA-Palette

purpleFlg

Farbbeispiel aus der OWA-Palette

orangeFlg

Farbbeispiel aus der OWA-Palette

greenFlg

Farbbeispiel aus der OWA-Palette

yellowFlg

Farbbeispiel aus der OWA-Palette

blueFlg

Farbbeispiel aus der OWA-Palette

redFlg

Farbbeispiel aus der OWA-Palette

completeFlg vwFldrTtl vwName THeader rulesTableContainer

Farbbeispiel aus der OWA-Palette

noFlg

Farbbeispiel aus der OWA-Palette

previewBody previewBody previewBody previewBody

Farbbeispiel aus der OWA-Palette

vwSortCol

Farbbeispiel aus der OWA-Palette

vwPrvwTD

Farbbeispiel aus der OWA-Palette

vwItemSep

Farbbeispiel aus der OWA-Palette

ruleNotSupported

Farbbeispiel aus der OWA-Palette

DLCertMissing tr tr tr tr

Farbbeispiel aus der OWA-Palette

selRow trSelItem rowselected rmndrRowSel ctxtMenu cpDayLettersCell cpWeekNumberCell dailySelectedAllDayAppointment weeklySelectedAppointment weeklySelectedAlldayAppointment weeklySelectedDateHeader monthlySelectedDateHeader monthlySelectedAppointment monthlySelectedAlldayAppointment

Farbbeispiel aus der OWA-Palette

fldset

Farbbeispiel aus der OWA-Palette

ctxmnuBar

Farbbeispiel aus der OWA-Palette

ctxmnuMnu nbHref:hover nbTglHref:hover aQL:hover aFU:hover

Farbbeispiel aus der OWA-Palette

nbLabel nbLabel nbLabel nbLabel

Farbbeispiel aus der OWA-Palette

nbTglTD nbTglTD nbTglTD nbTglTD nbTglQLTD nbTglQLTD nbTglQLTD nbTglQLTD

Farbbeispiel aus der OWA-Palette

treeFolder treeFolder treeFolder treeFolder nbTreeProgress nbTreeProgress nbTreeProgress nbTreeProgress

Farbbeispiel aus der OWA-Palette

fldUrdCt

Farbbeispiel aus der OWA-Palette

fldCntCt divMins divMins divMins divMins

Farbbeispiel aus der OWA-Palette

rmndrWarning

Farbbeispiel aus der OWA-Palette

cpInactiveDateCell colorFree row

Farbbeispiel aus der OWA-Palette

dailyViewCell dailyBackgroundTable colAM

Farbbeispiel aus der OWA-Palette

dailyBackgroundTable dailyBackgroundTable dailyBackgroundTable dailyBackgroundTable dailyHoursCell dailyHoursCell dailyHoursCell dailyHoursCell dailyMinsCell dailyMinsCell dailyMinsCell dailyMinsCell dailyApptCell dailyApptCell dailyApptCell dailyApptCell dailyCellEven

Farbbeispiel aus der OWA-Palette

dailyCellWorking colPM

Farbbeispiel aus der OWA-Palette

colorBusy

Farbbeispiel aus der OWA-Palette

colorTentative

Farbbeispiel aus der OWA-Palette

colorOOF

Farbbeispiel aus der OWA-Palette

weeklyDateHeader weeklySelectedDateHeader monthlyDateHeader monthlySelectedDateHeader monthlyDayTitlesCell

Farbbeispiel aus der OWA-Palette

weeklyDateHeader weeklyDateHeader weeklyDateHeader weeklyDateHeader weeklySelectedDateHeader weeklySelectedDateHeader weeklySelectedDateHeader weeklySelectedDateHeader monthlyDateHeader monthlyDateHeader monthlyDateHeader monthlyDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlySelectedDateHeader monthlyDateCell monthlyDateCell monthlyDateCell monthlyDateCell monthlyWeekendDateCell monthlyWeekendDateCell monthlyWeekendDateCell monthlyWeekendDateCell

Farbbeispiel aus der OWA-Palette

monthlyNextPrevDateBody

Farbbeispiel aus der OWA-Palette

monthlyWeekendDateCell

Farbbeispiel aus der OWA-Palette

fbtime tdUsrBkgd

Farbbeispiel aus der OWA-Palette

fb_color_div

Farbbeispiel aus der OWA-Palette

recipBg dvAllAttend

Farbbeispiel aus der OWA-Palette

busy busyClr

Farbbeispiel aus der OWA-Palette

tent tentClr

Farbbeispiel aus der OWA-Palette

oof oofClr

Farbbeispiel aus der OWA-Palette

unknownClr

Farbbeispiel aus der OWA-Palette

tblSigWarning tblSigWarning

In der folgenden Tabelle werden die Farben und die zugehörigen Dezimalwerte aufgeführt. Darüber hinaus wird angegeben, wo diese Farben in der einfachen Palette verwendet werden.

 

Farbe und Hexadezimalwert Entspricht
Farbbeispiel aus der OWA-Palette

1. Hintergrund von Dialogfenstern und Hinweisen

Farbbeispiel aus der OWA-Palette

2. Hintergrund von Frames

Farbbeispiel aus der OWA-Palette

3. Symbolleistenhintergrund

Farbbeispiel aus der OWA-Palette

4. Hintergrund von Navigationsleisten und Bezeichnern, Farbe der Trennlinie in Symbolleisten

Farbbeispiel aus der OWA-Palette

5. Menühintergrund

Farbbeispiel aus der OWA-Palette

6. Farbe für 3D-Rahmen: dunkel

Farbbeispiel aus der OWA-Palette

7. Farbe für 3D-Rahmen: normal, Farbverlauf des Ansichtsheaders (zweite Linie, sollte etwas dunkler als 15 sein)

Farbbeispiel aus der OWA-Palette

8. Hintergrund der Informationsleiste

Farbbeispiel aus der OWA-Palette

9. Text der Informationsleiste

Farbbeispiel aus der OWA-Palette

10. Hintergrund der S/MIME-Fortschrittsanzeige

Farbbeispiel aus der OWA-Palette

11. Hintergrund für nicht ausgewählte Registerkarte (sollte etwas dunkler als 1 sein)

Farbbeispiel aus der OWA-Palette

12. Registerkartenhintergrund (sollte etwas dunkler als 11 sein)

Farbbeispiel aus der OWA-Palette

13. Sortierspalte in Ansichtsheadern

Farbbeispiel aus der OWA-Palette

14. Hintergrund des Ansichtsheaders, ausgewählte Zeile in der Ansicht (Schatten)

Farbbeispiel aus der OWA-Palette

15. Farbverlauf des Ansichtsheaders (erste Linie, sollte etwas dunkler als 14 sein)

Farbbeispiel aus der OWA-Palette

16. Hintergrund des Vorschaufensters

Farbbeispiel aus der OWA-Palette

17. Ausgewähltes Element

Farbbeispiel aus der OWA-Palette

18. Rahmen des Feldsets (sollte dunkler als 1 sein)

Farbbeispiel aus der OWA-Palette

19. Hintergrundfarbe der linken Seitenleiste des Kontextmenüs

Farbbeispiel aus der OWA-Palette

20. Hintergrundfarbe des Hovereffekts der Schaltfläche

Farbbeispiel aus der OWA-Palette

21. Angeklickte Schaltfläche

Farbbeispiel aus der OWA-Palette

22. Rahmenfarbe des Navigationsleistenbezeichners

Farbbeispiel aus der OWA-Palette

23. Rahmenfarbe des Baumstruktur-Steuerelements

Farbbeispiel aus der OWA-Palette

24. Hintergrund des Kalenderheaders

Farbbeispiel aus der OWA-Palette

25. Rahmen des Kalenderheaders (sollte etwas heller als 23 sein)

Farbbeispiel aus der OWA-Palette

26. Hintergrund des Frei/Gebucht-Steuerelements

Farbbeispiel aus der OWA-Palette

27. Hintergrund des Frei/Gebucht-Steuerelements (Empfänger)

Farbbeispiel aus der OWA-Palette

28. Rahmen des Baumstruktur-Steuerelements

Farbbeispiel aus der OWA-Palette

29. Hintergrund des Vorschaufensters (keine Elemente)

 
Fanden Sie dies hilfreich?
(1500 verbleibende Zeichen)
Vielen Dank für Ihr Feedback.
Anzeigen:
© 2014 Microsoft