Layout-Test | Ruf-Dienst

Du möchtest eine Seite vomRuf-Dienst machen lassen? Sehr schön!

Um Kosten zu sparen kannst Du über diese Seite die Farbcodierung für Deine neue Seite erstellen oder auch ändern. Einfach malasuprobieren!

Die Farben werde in hexadezimalen Farbcodes angegeben. Die Farbein können quasi frei definiert werden. Man sollte aber beachten, dass die Farbein auf der einen Seite harmonisch zueinander sind, auf der anderen Seiten zu gunsten der Lesbarkeit einen guten Kontarast haben.

Für die Kontrolle und Definition der Arbeiten empfehlen wir folgende Seiten:

Für diese Seite gibt es zwei Modi.

Im einfachen Modus werden nur die wichtigesten Farbein abgefragt. Die anderen werden dann aus diesen Farben übernommen.

Im erweiterten Modus kann man deutlich mehr Einstellungen vornehmen. Dies ist mehr Arbeit, kann die Seite aber noch mal „aufhübschen“

Wir empfehlen den einfachen Moduas zu verwenden und zu testen. Das erstellte Layout dann speichern und dann in den erweiterten Modus zu weschseln und zu prüfen, ob man noch Lust hat.....

Einfacher Modus
Erweiterter Modus

Optionen

Weitere Optionen, welche das Layout verändern. Einfach ausprobieren!

Navigation auf der linken Seite
Navigation oben, unter dem Logo
Navigation oben, rechts vom Logo

Die Navigationsschaltflächen dreidimensional darstellen

Ecken abrunden

„ Drucker Seite drucken“ in der Fußzeile einblenden

Buttons zum Teilen der Seite auf sozialen Netzwerken einbldenen

Allgemeine Farben

Farbe des Textes

Farbe der Überschriften

Hintergrund vom Textbereich

Hintergrundfarbe des Bereichs zwischen Navigation und Text

Hintergrundfarbe von Bildbereichen

Navigationsbereich

Links in der Navigation

Hintergrundfarbe der Navigationsschaltflächen

Rahmenfarbe von Navigationsschaltflächen

Linkfarbe der fokusierten Schaltfläche

Hintergrundfarbe der fokusierten Schaltfläche

Rahmenfarbe der fokusierten Schaltfläche

Linkfarbe der Navigationsschaltfläche der aktuellen Seite

Hintergrundfarbe der Navigationsschaltfläche der aktuellen Seite

Rahmenfarbe der Navigationsschaltfläche der aktuellen Seite

Hintergrund der Navigation

Links

Farbe eines Links

Farbe eines besuchten Links

Farbe eins Links, wenn er mit der Maus berührt wird

Hintergrundfarbe eines Links, wenn er mit der Maus berührt wird

Farbe eines Links beim Anklicken

Rahmen des aktuell ausgewählten Links (wichtig beiTastaturbedienung)

Farbe des aktiven Links

Positionsangabe

Farbe der Positionsangabe („Du befindest dich hier“)

Farbe des Links der Positionsangabe

Farbe des Links der Positionsangabe bei Mauskontakt

Hintergrundfarbe des Links der Positionsangabe bei Mauskontakt

Sub- und Textbox

Hintergrund der Subbox

Rahmen der Subbox

Rahmensärke der Subbox in Pixel

Hintergrund der Textbox

Rahmen der Textbox

Rahmensärke der Textbox in Pixel

Suchformular

Farbe des Textes im Suchformular

Hintergrundfarbe des Suchformulars

Linkfarbe im Suchformular

Linkfarbe im Suchformular bei Mauskontakt

Hintergrundfarbe von Links im Suchformular bei Mauskontakt

Footer-Bereich

Textfarbe des Footers

Link-Farbe des Footers

Linkfarbe des Footers bei Mauskontakt

Hintergrundfarbe bei Mauskontakt mit einem Link im Footer

Hintergrund vom Footer

Layout-Größen

Alle Größenangaben bitte als Dezimalzehl (als Dezimalzeichen .) verewenden. Bitte auch die Einhait px (für Pixel), em oder % (für Verhältnis) angeben,.

Breite des Seitenrandes bei Darstellung am Desktop

Breite des Seitenrandes bei Darstellung auf Mobilgeräten

Breite des Logos auf dem Desktop

Breite des Logosauf Mobilgeräten

Mindestbreite einer Subbox

Mindestbreite einer Bildbox

Mindestbreite einer Textbox

Breite der Navigationsschaltflächen

Breite der Navigationsschaltflächen von Untermenüs

Höhe des Navigationsbereiches

Schriftgrößen

Alle Größenangaben bitte als Dezimalzehl (als Dezimalzeichen .) verewenden. Bitte auch die Einhait px (für Pixel), em oder % (für Verhältnis) angeben,.

Schriftgröße für Überschriftsebene 1

Schriftgröße für Überschriftsebene 2

Schriftgröße für Überschriftsebene 3

Schriftgröße für Überschriftsebene 4

Schriftgröße für Überschriftsebene 5

Schriftgröße für Überschriftsebene 6

Schriftgröße für normalen Text

Seitenhintergrund

Hintergrundfarbe

Wird ein Hintergrundbild verwendet?
Ja, ein Hintergrundbild wird verwendet.
Nein, der Hintergrund erhält die Hintergrundfarbe.

Darstellung vom Hintergrundbild

Das Test-Hintergrundbild ist hier ein Farbverlauf, damit die Auswirkung der „Darstellung vom Hintergrundbild“ besser erkannt wird. Es kann dafür eine beliebige Grafik oder ein Foto im JPG-Format verwendet werden.