Webdesign-Beispiel

Diese Seite ist nicht angebunden, d.h. die Links und die Suche (oberer Bildschrirmrand) funktionieren nicht. Sie können dennoch, neben der optischen Begutachtung, einige funktionale Tests durchführen:

Zurück zu Bytes For All > Preise > Portfolio

Schrift vergrößern / verkleinern

Am oberen Bildschirmrand sind drei Buttons, mit denen Sie die Schrift vergrößern können. Die seitlichen Spalten wachsen im gleichen Verhältnis mit. Die mittlere Spalte gleicht aus und bricht den Text neu um.

Text um Bild fließen lassen

Sie fügen im Redaktionssystem ein Bild an der gewünschten Stelle im Text ein. Dann klicken Sie auf das eingefügte Bild, um es zu markieren. Anschließend wählen Sie aus einem Aufklappmenü "Bild-rechts" oder "Bild-links" oder "Bild-rechts-grauer-Rahmen" und das Bild wird entsprechend links- oder rechtsbündig eingebunden und ggf. mit Rahmen versehen, und der Text fließt um das Bild herum, alles mit einem Klick. Diese Funktion wird inkl. Rahmenstärken- und Farben - wie auch die Text-Hervorhebung (siehe weiter unten) und weitere Textformatierungen - individuell für Sie eingestellt. Noch etwas Fülltext um das Herumfließen zu illustrieren: Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Etiam a pede. Vestibulum iaculis quam a augue. Mauris congue placerat est. Sed tincidunt, magna id consequat varius, mauris lorem nonummy mauris, eget convallis orci lorem sit amet nulla. Sed id mi in augue molestie pharetra. Etiam ligula. Vivamus iaculis blandit arcu. Nulla facilisi. Duis dui augue, tristique et, vestibulum non, pulvinar et, massa. Mauris eget neque ac tortor blandit varius. Donec eget ligula ac tellus molestie sollicitudin. Cras a nisi. Nunc sit amet arcu. Nulla facilisi. Phasellus nisl mi, varius placerat, ornare in, consectetuer in, sapien. Nullam massa. Curabitur sollicitudin. Proin porttitor.

Sehr kompatibel

Dieses Design ist hochgradig kompatibel: Es funktioniert auf dem Internet Explorer 5 von 1999 genauso wie auf aktuellen Browsern.

Source Ordered für Suchmaschinen

In diesem "Source-Ordered"-Design wird der Quellcode umgekehrt geordnet: Der Hauptinhalt der mittleren Spalte erscheint im Quellcode vor dem Inhalt der linken Navigationsspalte, hat also aus dem Blickwinkel von Suchmaschinen (die immer nur Quellcode lesen) Priorität vor der rein funktionalen Navigation.

Design auch für Formulare

Das Suchformular (ganz oben rechts) ist optisch angepasst statt einfach per HTML eingebaut. Daher kein typischer grauer Button. (Die Suche ist nicht angeschlossen und funktioniert in diesem Beispiel-Layout nicht.) Ähnliches können wir auch mit anderen Formularen, etwa einem Kontaktformular machen.

Floating CSS / XHTML-Design mit 100% Breite

Dies ist ein flexibles, sogenanntes "Floating" oder "Liquid" Design, das den Bildschirm zu 100% ausfüllt. Bei Verkleinerung des Bildschirms passt sich die Seite an.

Text automatisch hervorheben

Hier ist ein Stück hervorgehobener Text. Die Art und Weise der Hervorhebung stellen wir individuell für Sie ein. Farben, Rahmendicke - und Art, Innen- und Außenabstand. Wenn Sie eine Textpassage hervorheben wollen, müssen Sie nur den entsprechenden Text mit der Maus markieren und aus einem Aufklappmenü unter "CSS-Stile" den Stil "Hervorhebung" wählen. Der markierte Text wird dann in der Art optisch hervorgehoben, wie für Sie eingestellt.

Dies ist ein anderes Beispiel für einen hervorgehobenen Text. Wir können Ihnen auch 2 oder 3 verschiedene Arten der Text-Hervorhebung einstellen. Sie wählen dann in Ihrem Editor im Redaktionssystem entsprechend "Hervorhebung 1" oder "Hervorhebung 2", bzw. benennen wir die CSS-Stile nach Ihren Angaben, z.B. mit "Grüner Kasten" und "Blauer Kasten" o.ä...

Noch ein Beispiel, etwas eingerückt, mit rotem Rand links, und mit vergrößerter Schrift. Auch die Schriftgröße ist pro Hervorhebungs-Stil automatisch eingestellt. Sie markieren nur die gewünschte Textpassage mit Ihrer Maus und wählen "Roter Kasten" - fertig!

1, 2 oder 3 Spalten möglich

Die rechte Spalte eignet sich für "News" oder ähnliches. Ein Newsmodul ist in unserem Redaktionssystem vorhanden. Falls die rechts Spalte nicht benötigt wird, kann Sie auch entfernt werden. Dann ist mehr Platz, z.B. für größere Fotos in der mittleren (dann rechten) Spalte.