Designs, Entwürfe und Vorlagen
Auf dieser Seite stelle ich einige meiner Designs und Vorlagen von Webseiten vor, welche auch schon in verschiedenen Projekten zur Anwendung gekommen sind.
Design 01-01
Eine neue Vorlage mit den selben Vorraussetzungen des Designs 03-01, nur diesmal ausgeführt mit einer variablen Breite und ohne Grafiken.
Die Farben sind leicht zu ändern und die größe der einzelnen Bereiche sind ebenfalls leicht anzupassen.
Auch die Kopf- und Fußbereiche sind wieder festehend und bieten genug Platz für eine Hauptnavigation im oberen
Bereich und einer zweiten Navigationsebene im Fußbereich.
Einzelne Bereiche lassen sich auch leicht entfernen (zweites Bild ohne obere Navgation) bzw. einfügen um die Seite entsprechend den Bedürfnissen anzupassen.
Der Inhaltsbereich scrollt automatisch bei übergroßen Inhalt und passt sich der Bildschirmhöhe nun auch horizontal automatisch an. Die Lage des Designs ist horizontal mittig zentriert. Für das Design werden keine Grafiken benutzt, es besteht nur aus Farben und Linien die sich natürlich entsprechend anpassen lassen. Genauso leicht lassen sich auch Grafiken wie zB im Banner Bereich einbinden.
Die Screenshots zeigen das Design mit einen Schatteneffekt und Rundungen im unteren Fußbereich, welche durch CSS3 möglich sind. Browser die noch kein CSS in Version 3 unterstützen, stellen die Vorlage voll funktionsfähig nur entsprechend ohne diese Effekte dar.
Technik: XHTML 1.0 Strict mit CSS 3.0 (CSS 2.1 ohne Schatten und Rundungen)
Design 03-01
Diese Version diente nicht nur als Grundlage für einige weitere Entwicklungsschritte, sondern auch als Basis für meine eigene Webseite in der Version 9.
Grafiken und Farben sind leicht austauschbar und die größe der einzelnen Bereiche leicht anzupassen.
Kopf- und Fußbereich sind festehend mit einer Hauptnavigation im oberen Bereich und einer zweiten Navigationsebene
im Fußbereich.
Der Inhaltsbereich scrollt automatisch bei übergroßen Inhalt und passt sich ebenfalls der Bildschirmhöhe automatisch an. Die Breite des Designs ist fest definiert und die horizontale Lage mittig zentriert. Da die Vorlage aus einen Design mit Grafiken besteht, kann die feste Breite des Designs durch entsprechenden Austausch der Grafiken und Nachbearbeitung der CSS Datei selbstverständlich geändert, aber nicht variabel gemacht werden.
Technik: XHTML 1.0 Strict mit CSS 2.1
Design 04-01
Dieses Design ist eine einfache Visitenkarte die für eine gerade freigeschaltene Domain verwendet werden kann.
Die Größe der Visitenkarte ist leicht anzupassen, genauso wie die Hintergrundgrafik und das Logo.
Das Design ist horizontal und vertikal mittig im Bildschirm ausgerichtet.
Das zweite Bild zeigt eine noch minimalistischere Abwandlung der Visitenkarte, ohne Hintergrundgrafiken und Linien. Diese ist als schnell ladende Fehler/Infoseite oder ebenfalls als Visitenkarte verwendbar.
Technik: XHTML 1.0 Strict mit CSS 2.1
Auf dieser Seite stelle ich einige meiner Designs und Vorlagen von Webseiten vor, welche auch schon in verschiedenen Projekten zur Anwendung gekommen sind.
Design 01-01
Eine neue Vorlage mit den selben Vorraussetzungen des Designs 03-01, nur diesmal ausgeführt mit einer variablen Breite und ohne Grafiken.
Einzelne Bereiche lassen sich auch leicht entfernen (zweites Bild ohne obere Navgation) bzw. einfügen um die Seite entsprechend den Bedürfnissen anzupassen.
Der Inhaltsbereich scrollt automatisch bei übergroßen Inhalt und passt sich der Bildschirmhöhe nun auch horizontal automatisch an. Die Lage des Designs ist horizontal mittig zentriert. Für das Design werden keine Grafiken benutzt, es besteht nur aus Farben und Linien die sich natürlich entsprechend anpassen lassen. Genauso leicht lassen sich auch Grafiken wie zB im Banner Bereich einbinden.
Die Screenshots zeigen das Design mit einen Schatteneffekt und Rundungen im unteren Fußbereich, welche durch CSS3 möglich sind. Browser die noch kein CSS in Version 3 unterstützen, stellen die Vorlage voll funktionsfähig nur entsprechend ohne diese Effekte dar.
Technik: XHTML 1.0 Strict mit CSS 3.0 (CSS 2.1 ohne Schatten und Rundungen)
Design 03-01
Diese Version diente nicht nur als Grundlage für einige weitere Entwicklungsschritte, sondern auch als Basis für meine eigene Webseite in der Version 9.
Grafiken und Farben sind leicht austauschbar und die größe der einzelnen Bereiche leicht anzupassen.
Kopf- und Fußbereich sind festehend mit einer Hauptnavigation im oberen Bereich und einer zweiten Navigationsebene
im Fußbereich.Der Inhaltsbereich scrollt automatisch bei übergroßen Inhalt und passt sich ebenfalls der Bildschirmhöhe automatisch an. Die Breite des Designs ist fest definiert und die horizontale Lage mittig zentriert. Da die Vorlage aus einen Design mit Grafiken besteht, kann die feste Breite des Designs durch entsprechenden Austausch der Grafiken und Nachbearbeitung der CSS Datei selbstverständlich geändert, aber nicht variabel gemacht werden.
Technik: XHTML 1.0 Strict mit CSS 2.1
Design 04-01
Die Größe der Visitenkarte ist leicht anzupassen, genauso wie die Hintergrundgrafik und das Logo.
Das Design ist horizontal und vertikal mittig im Bildschirm ausgerichtet.
Das zweite Bild zeigt eine noch minimalistischere Abwandlung der Visitenkarte, ohne Hintergrundgrafiken und Linien. Diese ist als schnell ladende Fehler/Infoseite oder ebenfalls als Visitenkarte verwendbar.
Technik: XHTML 1.0 Strict mit CSS 2.1