WEBFEATURES - Websitegestaltung

Die richtige Auflösung

Beim Webdesign ist der Einsatz von Browsersizern zu empfehlen. Man sollte auf jeden Fall berücksichtigen, dass es immer noch Leute gibt, die einen 15'' Bildschirm haben. Auch in Firmen sind diese Bildschirme durchaus noch verbreitet. Daher sollte man darauf achten, dass auch für diese Besucher die Funktionalität der Webseiten gewährleistet ist. Das bedeutet im Klartext, die Website sollte auch bei einer Auflösung von 800 x 600 px vollständig benutzbar sein. Die Browser haben verschiedene Leisten und Menüs, deren Abmessungen von Browser zu Browser und sogar von Browserversion zu Browserversion unterschiedlich sein können. Je nachdem ob nur für einen oder zwei bestimmte Browser entwickelt wird, kann die Größe des tatsächlich im Browser dargestellten Bereichs variieren. Der Webdesign-Profi entwickelt aber sowieso nicht nur für seinen Lieblingsbrowser, sondern bemüht sich um eine korrekte Anzeige seiner Webseiten ab den 4.xx - Browsern aufwärts und auch in Opera. Immer richtig liegt man dann mit den Abmessungen 740 x 410. Das ist der kleinste gemeinsame Nenner für alle. Eine wertvolle Hilfe bei dem Testen der Seiten sind sogenannte Browsersizer, die im Kapitel "Tools" vorgestellt werden.

Angabe von Seitentiteln

Seiten sollten immer einen Seitentitel besitzen! Es zeugt von sehr schlechtem Stil, wenn eine in der Suchmaschine gefundene Seite den Titel „untitled document" trägt. Den Titel „untitled document" setzen HTML-Editoren wie Dreamweaver dann ein, wenn der Webdesigner keinen Titel angegeben hat. In Seitentiteln können z. b. kurze Zusatzinfos eingebaut werden. Viele Suchmaschinen legen Wert auf Seitentitel und stufen Webseiten mit Seitentiteln höher ein als solche ohne.

Was man beim Erstellen eines Kontaktformulars beachten sollte

Ein Kontaktformular sollte alle wichtigen Informationen liefern, aber möglichst kurz und übersichtlich gehalten sein. Wer will schon endlos Textfelder ausfüllen. Falls lange Formulare verwendet werden müssen, sollte der Zweck dem Anwender klargemacht und das Formular ansprechend in einzelne Abschnitte unterteilt werden. Formularüberprüfungen sind wichtig, dürfen aber nicht nerven und schon gar nicht das Ausfüllen des Formulars behindern.

Inhalte ohne Seitenränder einbauen

Man fügt in den body-Tag marginwidth="0" marginheight="0" leftmargin="0" und topmargin="0" ein. Das ist zwar nicht standardkonform, funktioniert aber und wird allgemein verwendet. Diese Attribute werden normalerweise bei der Verwendung von Frames eingesetzt.

Darstellung von Hintergrundbildern bei Frames

Hintergrundbilder werden bis zum Rand dargestellt, wenn in dem Frame "scrolling" auf "no" gesetzt wird.

Inhalte am unteren Bildrand positionieren

Für das Positionieren von Tabelleninhalten kann es wichtig sein, nicht nur die Breite sondern auch die Höhe anzugeben, z. B. für das Positionieren von Inhalten ganz unten am Seitenrand ist die Angabe von height="100%" notwendig.

Inhalt zentriert und mittig ausrichten

Wenn eine Tabelle (oder ein anderer Inhalt) zentriert und mittig auf einer Webseite ausgerichtet werden und sich an verschiedene Browserauflösungen anpassen soll, muß man diese Tabelle in die Zelle einer anderen Tabelle einfügen, die die zu positionierende Tabelle umgibt (Verschachtelung). Diese äußere Tabelle besteht nur aus einer Zeile mit einer Zelle. Die äußere Tabelle sollte die Breite und die Höhe von 100% haben. In der Tabellenzelle der äußeren Tabelle muß der Inhalt (hier: die innere Tabelle) zentriert und mittig ausrichtet werden - mit Hilfe der Attribute align="center" und valign="middle".

Tabellenzellen pixelgenau ausrichten

In einer Zelle mit einer Hintergrundfarbe oder einem Hintergrundbild kann man die Maße der Zelle genau festlegen, in dem man ein transparentes Gif einbaut. Dabei muss man daran denken, das in einer Zeile die Höhe durch die Zelle mit dem größten Inhalt bestimmt wird. Für eine Spalte gilt sinngemäß das Gleiche: die Breite einer Spalte wird durch die Zelle definiert, deren Inhalt die größte Breite hat.

Wenn man Zeilen oder Spalten definieren will, die weniger hoch oder breit als das Leerzeichen „ " sein sollen, muss das Leerzeichen aus den Zellen dieser Zeilen oder Spalten entfernt werden. Das Leerzeichen hat die Höhe und Breite eines Buchstabens der Standardschriftart (normalerweise Schriftart Times New Roman, Schriftgröße 3). Es zeugt jedoch von schlechtem Stil, die Tabellenzellen einfach leer zu lassen. Man sollte dann das „ " durch ein passendes transparentes Gif ersetzen oder die Tabellenzellen unter Verwendung der Attribute colspan oder rowspan verbinden. Näheres dazu findet man im HTML-Tutorial für Einsteiger im Kapitel Positionierung mit Tabellen.

Darstellung von Hintergrundfarben in Tabellen

Wenn eine Tabellenzelle leer ist (was sie nicht sein sollte!), wird die angegebene Hintergrundfarbe im Netscape nicht dargestellt. Für die korrekte Darstellung der Hintergrundfarben ist es erforderlich, in die Tabellenzelle irgend etwas einzufügen. Möglich sind: transparentes gif, Leerzeichen „ " bei Zellen, die größer als die Standardschriftart sein dürfen, Text usw. Für Tabellenzellen gilt übrigens, dass sowohl im Netscape als auch im Internet Explorer Hintergrundbilder Hintergrundfarben überdecken.

Hintergrundbilder in Tabellen - Besonderheiten beim Netscape

Wenn bei einer Tabelle ein Hintergrundbild angegeben worden ist, stellt der Netscape dieses Hintergrundbild für jede der Zellen der Tabelle dar als ob das Hintergrundbild für jede der Zellen einzeln eingefügt worden ist. Es entsteht gewissermaßen ein Flickenmuster. Wenn dieser Effekt unerwünscht ist, sollte das Hintergrundbild in den <body> - Tag als Seiteneigenschaft eingefügt werden.


	Einige Tipps für die Praxis Die richtige Auflösung Beim Webdesign ist der Einsatz von Browsersizern zu empfehlen. Man sollte auf jeden Fall berücksichtigen, dass es immer noch Leute gibt, die einen 15'' Bildschirm haben. Auch in Firmen sind diese Bildschirme durchaus noch verbreitet. Daher sollte man darauf achten, dass auch für diese Besucher die Funktionalität der Webseiten gewährleistet ist. Das bedeutet im Klartext, die Website sollte auch bei einer Auflösung von 800 x 600 px vollständig benutzbar sein. Die Browser haben verschiedene Leisten und Menüs, deren Abmessungen von Browser zu Browser und sogar von Browserversion zu Browserversion unterschiedlich sein können. Je nachdem ob nur für einen oder zwei bestimmte Browser entwickelt wird, kann die Größe des tatsächlich im Browser dargestellten Bereichs variieren. Der Webdesign-Profi entwickelt aber sowieso nicht nur für seinen Lieblingsbrowser, sondern bemüht sich um eine korrekte Anzeige seiner Webseiten ab den 4.xx - Browsern aufwärts und auch in Opera. Immer richtig liegt man dann mit den Abmessungen 740 x 410. Das ist der kleinste gemeinsame Nenner für alle. Eine wertvolle Hilfe bei dem Testen der Seiten sind sogenannte Browsersizer, die im Kapitel "Tools" vorgestellt werden. Angabe von Seitentiteln Seiten sollten immer einen Seitentitel besitzen! Es zeugt von sehr schlechtem Stil, wenn eine in der Suchmaschine gefundene Seite den Titel „untitled document" trägt. Den Titel „untitled document" setzen HTML-Editoren wie Dreamweaver dann ein, wenn der Webdesigner keinen Titel angegeben hat. In Seitentiteln können z. b. kurze Zusatzinfos eingebaut werden. Viele Suchmaschinen legen Wert auf Seitentitel und stufen Webseiten mit Seitentiteln höher ein als solche ohne. Was man beim Erstellen eines Kontaktformulars beachten sollte Ein Kontaktformular sollte alle wichtigen Informationen liefern, aber möglichst kurz und übersichtlich gehalten sein. Wer will schon endlos Textfelder ausfüllen. Falls lange Formulare verwendet werden müssen, sollte der Zweck dem Anwender klargemacht und das Formular ansprechend in einzelne Abschnitte unterteilt werden. Formularüberprüfungen sind wichtig, dürfen aber nicht nerven und schon gar nicht das Ausfüllen des Formulars behindern. Inhalte ohne Seitenränder einbauen Man fügt in den body-Tag marginwidth="0" marginheight="0" leftmargin="0" und topmargin="0" ein. Das ist zwar nicht standardkonform, funktioniert aber und wird allgemein verwendet. Diese Attribute werden normalerweise bei der Verwendung von Frames eingesetzt. Darstellung von Hintergrundbildern bei Frames Hintergrundbilder werden bis zum Rand dargestellt, wenn in dem Frame "scrolling" auf "no" gesetzt wird. Inhalte am unteren Bildrand positionieren Für das Positionieren von Tabelleninhalten kann es wichtig sein, nicht nur die Breite sondern auch die Höhe anzugeben, z. B. für das Positionieren von Inhalten ganz unten am Seitenrand ist die Angabe von height="100%" notwendig. Inhalt zentriert und mittig ausrichten Wenn eine Tabelle (oder ein anderer Inhalt) zentriert und mittig auf einer Webseite ausgerichtet werden und sich an verschiedene Browserauflösungen anpassen soll, muß man diese Tabelle in die Zelle einer anderen Tabelle einfügen, die die zu positionierende Tabelle umgibt (Verschachtelung). Diese äußere Tabelle besteht nur aus einer Zeile mit einer Zelle. Die äußere Tabelle sollte die Breite und die Höhe von 100% haben. In der Tabellenzelle der äußeren Tabelle muß der Inhalt (hier: die innere Tabelle) zentriert und mittig ausrichtet werden - mit Hilfe der Attribute align="center" und valign="middle". Tabellenzellen pixelgenau ausrichten In einer Zelle mit einer Hintergrundfarbe oder einem Hintergrundbild kann man die Maße der Zelle genau festlegen, in dem man ein transparentes Gif einbaut. Dabei muss man daran denken, das in einer Zeile die Höhe durch die Zelle mit dem größten Inhalt bestimmt wird. Für eine Spalte gilt sinngemäß das Gleiche: die Breite einer Spalte wird durch die Zelle definiert, deren Inhalt die größte Breite hat. Wenn man Zeilen oder Spalten definieren will, die weniger hoch oder breit als das Leerzeichen „ " sein sollen, muss das Leerzeichen aus den Zellen dieser Zeilen oder Spalten entfernt werden. Das Leerzeichen hat die Höhe und Breite eines Buchstabens der Standardschriftart (normalerweise Schriftart Times New Roman, Schriftgröße 3). Es zeugt jedoch von schlechtem Stil, die Tabellenzellen einfach leer zu lassen. Man sollte dann das „ " durch ein passendes transparentes Gif ersetzen oder die Tabellenzellen unter Verwendung der Attribute colspan oder rowspan verbinden. Näheres dazu findet man im HTML-Tutorial für Einsteiger im Kapitel Positionierung mit Tabellen. Darstellung von Hintergrundfarben in Tabellen Wenn eine Tabellenzelle leer ist (was sie nicht sein sollte!), wird die angegebene Hintergrundfarbe im Netscape nicht dargestellt. Für die korrekte Darstellung der Hintergrundfarben ist es erforderlich, in die Tabellenzelle irgend etwas einzufügen. Möglich sind: transparentes gif, Leerzeichen „ " bei Zellen, die größer als die Standardschriftart sein dürfen, Text usw. Für Tabellenzellen gilt übrigens, dass sowohl im Netscape als auch im Internet Explorer Hintergrundbilder Hintergrundfarben überdecken. Hintergrundbilder in Tabellen - Besonderheiten beim Netscape Wenn bei einer Tabelle ein Hintergrundbild angegeben worden ist, stellt der Netscape dieses Hintergrundbild für jede der Zellen der Tabelle dar als ob das Hintergrundbild für jede der Zellen einzeln eingefügt worden ist. Es entsteht gewissermaßen ein Flickenmuster. Wenn dieser Effekt unerwünscht ist, sollte das Hintergrundbild in den <body> - Tag als Seiteneigenschaft eingefügt werden.