Windows-Look für die WebsiteFenster im Fenster

Windows-artiges Design

Windows-Look für die Website

Über 90 Prozent der Computernutzer arbeiten unter Windows. Insofern ist die Idee nur natürlich, dieser Nutzergruppe die gewohnte Umgebung auch im Web zu geben. Da sind Sie anderer Meinung? Sie finden das Windows-Design dröge oder wollen auch Mac- und Linux-Nutzer berücksichtigen? Für die normale Webseite stimmt das. Dort sollten Sie ganz bewusst vermeiden, mit Ihrem Design Nutzer auszuschließen. Und es mag nun einmal nicht jeder Windows und seine Oberfläche.

Anders liegt der Fall zum Beispiel bei Software-Anbietern, die ihre Website optisch an ihr Produkt anlehnen wollen oder gar die bisher nur auf Windows verfügbare Software ins Web portieren möchten. Hier assoziiert die Zielgruppe den Web-Auftritt oft mit der Software. Windows-artiges Design kann den Umstieg erleichtern.

Und auch wenn das Windows-Design für Sie nicht in Frage kommt: Einige Funktionalitäten der Oberfläche sind recht praktisch. Dazu zählen im Web öfter zu sehende Effekte wie vom Benutzer frei verschiebbare Fenster, aber auch Besonderheiten wie das Minimieren eines Fensters, um es bei Bedarf wieder aufzuklappen. In diesem Workshop wird eine kleine Beispielseite so weit wie möglich im Betriebssystem-Look-and-Feel gestaltet. Sie können sich dann die Teile heraussuchen, die für Sie geeignet sind.

Realistisches Fenster-Design

Windows-Look für die Website

Beim Design gibt es zwei Ansätze: den realistischen und den nachgebauten. Beim realistischen Ansatz verwenden Sie einfach einen Screenshot eines Fensters und passen ihn auf Ihre Bedürfnisse an. Dazu reicht ein div-Block für den Inhalt:

Und per CSS-Anweisung folgen dann das Hintergrundbild, die Positionierung et cetera:

.fenster {
background-image: url("fenster.jpg");
background-repeat: no-repeat;

Um den Inhalt korrekt zu positionieren, setzen Sie am besten die padding-Anweisungen für jede Seite einzeln ein.

padding-left: 8px;
padding-right: 8px;
padding-top:35px;

Wie gewohnt finden Sie das vollständige Beispiel unter dem Namen fenster.html auf der Heft-CD von Internet Professionell.

Fenster als Nachbau

Windows-Look für die Website

Fenster, die völlig wie die Fenster des Betriebssystems aussehen, haben einige Nachteile: Der unbedarfte Nutzer verwechselt sie leicht mit einem echten Fenster und erwartet zum Beispiel, dass sie in der Task-Leiste auftauchen. Und da sie doch stark an ein Betriebssystem erinnern, sind Nutzer anderer Betriebssysteme benachteiligt. Das ist ein ähnliches Problem wie Bildschirmfotos und Dialogfenster in Werbeanzeigen: Da die meisten Werbeagenturen Macs einsetzen, sehen viele Betrachter in der Anzeige eine Oberfläche, die sie gar nicht kennen.

Bevor Sie anfangen, müssen Sie sich Gedanken machen, wie Ihre Fenster aufgebaut sind. Es bietet sich an, das Fenster als div-Element anzulegen und darin zwei untergeordnete Elemente für die Titelleiste und den Inhalt zu haben. Die Bedienelemente, also die Schaltflächen zum Minimieren, für den Vollbild-Modus und zum Schließen des Fensters, landen noch einmal in einem eigenen div-Block:

Fenster 1

Text

Design mit CSS

Windows-Look für die Website

Einige CSS-Klassen helfen dann, die Fenster-Optik zu erzielen. Den kompletten CSS-Code aufzuführen, würde an dieser Stelle zu weit führen. Sie finden ihn auf der Heft-CD. Ein Beispiel erläutert aber die grundsätzliche Funktionsweise. Die Klasse fenster formatiert das gesamte Fenster. Der Rand erhält mit border-style einen 3D-Effekt.

.fenster {
border-width: 2px;
border-color: InactiveBorder;
border-style: outset;
width: 300px;
background-color: Menu;
visibility: visible;
}

Die Farben für Rand und Hintergrund des Fensters werden aus den Systemfarben generiert. Dies hat den großen Vorteil, dass sich die Farben bei einem Wechsel des Systemdesigns automatisch anpassen.
Der größte Nachteil ist dagegen, dass die Farben nie ausschließlich von Ihnen als dem Gestalter kontrolliert werden können. Sind die Fenster also in ein Gesamtlayout eingebunden, sollten Sie auf jeden Fall zu festen Farbwerten greifen, anstatt auf die Systemfarben des Anwenders zu setzen.

Funktionalität hinzufügen

Windows-Look für die Website

Nun zur Funktionalität: Belegt werden sollen die Standard-Schaltflächen für Fenster: Minimieren, Vollbild und Schließen. Den Anfang macht das Minimieren. Für die Schaltfläche rufen Sie die Funktion minimieren() auf. Sie erhält als Parameter die Nummer des Fensters. Damit ist die Funktion modular für beliebig viele Fenster verwendbar.

Beim Zugriff beschränkt sich das Skript auf den W3C-konformen Weg. Abgedeckt werden sollen alle aktuellen Browser wie Internet Explorer (ab 5.5) und die W3C-konformen Browser wie Mozilla, Netscape, Firefox und Opera. Im ersten Schritt benötigen Sie Zugriff auf die einzelnen div-Elemente:

if (document.getElementById) {
objekt1 = document.getElementById("fenster" + nummer);
objekt2 = document.getElementById("inhalt" + nummer);
objekt3 = document.getElementById("bedienelemente" + nummer);
objekt4 = document.getElementById("vollbild" + nummer);
}

Der Wechsel des Aussehens erfolgt über den Wechsel der CSS-Klasse:

if (objekt1.className ==
"fenster" || objekt1.className ==
"fenster_voll")
{
objekt1.className = "fenster_mini";
objekt2.className = "inhalt_mini";
objekt2.style.visibility = "hidden";
} else {
objekt1.className = "fenster";
objekt2.className = "inhalt";
objekt2.style.visibility = "visible";
}

Da der Internet Explorer die Höhenänderung für den Inhalt aus der CSS-Klasse inhalt_mini nicht erkennt, müssen Sie noch zusätzlich den Inhalt ausblenden.

Wechsel in den Vollbild-Modus

Windows-Look für die Website

Das Schalten ins Vollbild funktioniert recht ähnlich wie das Minimieren. Zusätzlich wird allerdings noch die Grafik selbst gewechselt:

objekt4.src = "voll2.gif";

Ansonsten soll das Fenster beim Zurückschalten in den Normalmodus wieder die ursprünglichen Koordinaten erhalten. Dazu werden die Koordinaten beim Wechsel in den Vollbildmodus in globale Variablen gespeichert.

if (objekt1.className == "fenster" ||
objekt1.className == "fenster_mini") {
objekt1.className = "fenster_voll";
objekt3.className = "bedienelemente_voll";
objekt4.src = "voll2.gif";
x_voll = objekt1.style.left;
y_voll = objekt1.style.top;
objekt1.style.left = "0px";
objekt1.style.top = "0px";

Beim Wechsel zurück setzen Sie das Fenster dann auf die Koordinaten:

} else {
objekt1.className = "fenster";
objekt3.className = "bedienelemente";
objekt4.src = "voll1.gif";
objekt1.style.left = x_voll;
objekt1.style.top = y_voll;
}

Das Skript ändert auch die CSS-Klasse für die Bedienelemente, da diese im Vollbildmodus natürlich eine andere Position haben.

… durch neue CSS-Klasse

Windows-Look für die Website

Die hier gezeigte Variante ist kein echter Vollbildmodus, wie Sie ihn aus Ihrem Betriebssystem kennen, sondern die Maße werden in der CSS-Klasse festgelegt:

.fenster_voll {
border-width: 2px;
border-color: InactiveBorder;
border-style: outset;
width: 1024px;
height: 800px;
background-color: Menu;
visibility: visible;
}

Die variable Anpassung an die Fenstergröße ist schwieriger, da der Standardweg window.innerHeight und window.innerWidth nicht für den Internet Explorer zur Verfügung steht. Dort gibt es die alternative Eigenschaft document.body.clientWidth. An sich wäre das also kein Problem. Nur leider liefert document.body.clientHeight je nach Modus des IE nicht die richtige Höhe. Hier hilft dann document.documentElement.clientWidth.

Das vorliegende Beispiel beschränkt sich allerdings auf eine feste Größe, da als grundlegende Technik das Wechseln der CSS-Klasse zum Einsatz kommt.

Fenster ein- und ausblenden

Windows-Look für die Website

Sehr einfach sind die Funktionen zum Einblenden (oeffnen()) und Ausblenden (schlie()) der Fenster. Nach dem Zugriff schalten Sie die div-Elemente einfach unsichtbar beziehungsweise sichtbar:

objekt1.visibility = "hidden";
objekt2.visibility = "hidden";

objekt1 ist das Fenster selbst, objekt2 der Inhalt. Letzteres ist notwendig, damit auch der Text ordentlich ausgeblendet wird.

Drag-and-Drop-Feature

Windows-Look für die Website

Zu guter Letzt folgt noch die Funktion für das Drag and Drop. Zur Vorbereitung müssen Sie die absolute Positionierung direkt als Inline-Stil in das div-Element schreiben. Die Positionierung in einer Klasse erkennt der Internet Explorer nicht automatisch.

Da der Code schon für diese einfache Drag-and-Drop-Variante recht komplex ist, erhalten Sie hier nur die Grundidee. Beim Laden des Dokuments wird eine Funktion start() aufgerufen. Als Parameter übergibt sie die Nummern der Fenster, die gezogen werden sollen. Die Nummer ist immer integraler Bestandteil der ID der div-Elemente.

Die Funktion start() enthält den Event-Listener für das Drücken der Maus.

function start() {
if (document.captureEvents) {
document.captureEvents(Event.MOUSEDOWN);
}
document.onmousedown = druecken;
}

Wird die Maus gedrückt, ruft das Skript die Funktion druecken() auf. Hier wird es etwas schwierig, denn die unterschiedlichen Ereignismodelle von Internet Explorer und den W3C-kompatiblen Browsern muss beachtet werden. Dies fragen Sie einfach ab, indem Sie prüfen, ob der Browser document.all unterstützt. Da dies nur der Internet Explorer kann, folgt der für ihn passende Code.

function druecken(e) {
if (document.all) {
var nummer = event.srcElement.id.slice(-1);
} else {
var nummer = e.target.id.slice(-1);
event = e;
}

Getrickst

Windows-Look für die Website

Ein kleiner Trick ist für das Beispiel hier notwendig. Da Titelleiste und Inhalt das eigentliche Fenster überlagern, müssen Sie die Nummer aus den IDs dieser Elemente herauslösen und daraus dann den Namen des Fensters bilden. Beim Testen merken Sie dies, wenn Sie die Maus schnell bewegen. Dann verlässt der Cursor nämlich das Fenster. Ein alternativer Ansatz wäre hier, Titelleiste und Inhalt als zwei völlig getrennte div-Blöcke zu handhaben.
Von der Funktion druecken() werden die Ereignisse zum Ziehen und Loslassen der Maus aufgerufen.

if (document.captureEvents)
document.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
document.onmousemove = ziehen;
document.onmouseup = aufheben;

Diese Ereignisse sind die integralen Bestandteile von Drag and Drop. Der Nutzer drückt die Maus. Wenn er dann die Maus bewegt, folgt ihm das Fenster. Und wenn er loslässt, verharrt das Fenster.

Das Ziehen an sich ist sehr einfach: Sie müssen die Koordinaten auf die aktuelle Mausposition setzen und dazu noch die ursprüngliche Position berücksichtigen, die Sie beim Drücken der Maus gespeichert haben. Hier beispielhaft für die y-Koordinate:

document.getElementById("fenster" +
nummer).style.top = (parseInt(event.clientY) ? y) + "px";

Achtung, die Endung PX benötigen Sie für die W3C-konformen Browser.
Das Aufheben ist ganz simpel. Sie löschen einfach das Ereignis:

function aufheben() {
if (document.releaseEvents)
document.releaseEvents(Event.MOUSEMOVE);
document.onmousemove = null;
return false;
}

Fazit

Windows-Look für die Website

Ob die Fenster auf Websites nun direkt bei Windows abgekupfert sind oder ob Sie bei der Umsetzung der Fensteroptik eigene Wege gehen ? Fenster helfen, den Inhalt zu strukturieren. So verwendet zum Beispiel Conware (www.conware.de) für die Online-Version ihrer E-Mail-Protect-Software eine Fenster-Oberfläche, da diese für ihre Nutzer recht einfach zu bedienen ist.

Trotzdem sollte man sich überlegen, ob Fenster eine gute Lösung für die eigene Site sind. Nicht nur Usability spielt hier eine Rolle, sondern auch der immense Aufwand, der dahinter steckt. Das hier vorgestellte Projekt ist relativ klein und erfüllt nicht alle Anforderungen, benötigt aber schon über 200 Zeilen Code. Vorgefertigte Lösungen schaffen Abhilfe, sind aber nur schwer zu kontrollieren und auf die eigenen Bedürfnisse anzupassen. Sie sollten also nur dann mit Fenstern arbeiten, wenn das Ihrer Website einen deutlichen Mehrwert bietet und Ihrer Zielgruppe entspricht.

Alle Listings zum Workshop finden Sie auf der Heft-CD und unter listings.internet-pro.de.