hpbk-top-designs-premium

Wie füge ich ein Design auf meiner Homepage ein?

Wenn Sie Sich auf Homepage-Baukasten.de angemeldet und eingeloggt haben,
klicken Sie links in der Navigationsleiste auf "Design einstellen".
Bei "Hier kannst du dir ein Design für deine Homepage auswählen:" können
Sie, wenn Sie auf das Feld unter dem oben genannten Text klicken, die Art ihres Design auswählen
bzw. ein vorgefertigtes wählen.
Wählen Sie "CSS-Design - Ausschließlich für Profis geeignet".
Wenn Sie nun weiter unten auf der Homepage auf "Erweiterte Einstellungen" klicken,
können Sie Ihr CSS-Design designen.
Es gibt nun vier Textfelder: "Text über dem Design", "Text unter dem Design",
"Hinweis unter dem Inhaltsbereich (z.B Copyright)" und "CSS-Code ohne Style-Tags".
Wenn Sie ein Design von uns ausgewählt haben,
müssen Sie einfach den Code in das beschriebene Textfeld einfügen.
Also fügen Sie z.B. den Text, der bei uns unter "Text über dem Design" steht,
bei Ihnen unter "Text über dem Design" ein.
Meistens wird in ein Feld nichts geschrieben, dieses bleibt dann leer.

Hinweis: Jedes von unseren Designs hat ein Bild zur Vorschau,
wenn in dem Bild nicht ausdrücklich eine "Rechte Box" erwähnt wird,
sollten Sie die Textfelder "Titel der 1. Extra-Box(rechts)" und "Inhalt der 1. Extra-Box"
frei lassen, ansonsten würden Sie das Design verunstalten.

Zurück nach oben


Wie verwende ich die Buttons im HPBK-CSS-Design?

Die Buttons sind nicht dazu gedacht, Sie mit unseren Designs
zu kombinieren. Sie sind dazu gedacht, Sie beim coden ihrer eigenen
Designs zu helfen.

Wenn Sie gerade ein CSS-Design für den HPBK schreiben,
funktioniert es wie folgt:

li.nav_element{
background-image:url('Hier URL des Buttons eintragen');
width: 120px;
height: 30px;
}

Den zweiten Button können Sie als Hover-Effekt verwenden,
also als Bild, welches angezeigt wird, wenn die Maus über den
ersten Button fährt.

li.nav_element:hover{
background-image:url('Hier URL des zweiten Buttons eintragen');
width: 120px;
height: 30px;
}

Den URL des Buttons kriegen finden Sie heraus,
indem Sie mir rechtsklick auf den gewünschten Button klicken
und dann(in Mozilla Firefox) "Grafikadresse anzeigen",
in Google Chrome "Bild in neuem Tab öffnen", in Internet Explorer "Bild anzeigen"
oder in Safari "Bild in neuem Tab öffnen" wählen.
Dort wo immer der URL der Homepage angezeigt wird(z.B http://www.hpbk-top-designs.de.tl)
ist nun der URL des Bildes zu sehen. Diesen kopieren Sie nun
an die richtige Stelle im CSS-Code(s.o.).

Zurück nach oben


Hover-Effekt nicht mit HPBK? Dann mit JavaScript

Sie machen keine Homepage mit HPBK, wollen unsere Buttons trotzdem verwenden?
Kein Problem, Sie machen einfach folgendes.

<a href="Zielseite"><img border="0" id="Benennen Sie ihren Button" alt="" onMouseOver="document.getElementById('Hier Name des Button').src='Hier URL des zweiten Button'" onMouseOut="document.getElementById('bsp').src='URL des ersten Button'" src="URL des ersten Button" /></a>

Kleines Beispiel:

<a href="http://hpbk-top-designs.de.tl/F1-_-Hilfe.htm"><img border="0" id="bsp" alt="" onMouseOver="document.getElementById('bsp').src='https://img.webme.com/pic/h/hpbk-top-designs/weihnachtsbutton-hover.png'" onMouseOut="document.getElementById('bsp').src='https://img.webme.com/pic/h/hpbk-top-designs/weihnachtsbutton.png'" src="https://img.webme.com/pic/h/hpbk-top-designs/weihnachtsbutton.png" /></a>

ergibt  


 
Zurück nach oben