chri-s.de
 

Herzlich willkommen bei Christian und Michaela.

     

Noch ´ne langweilige, überflüssige, private Homepage ? Wir geben uns Mühe, dass diese
BESSER ist ;.).



Auch wenn es auf den ersten Blick nicht so aussieht. Dieses Layout haben wir für Sie so gestaltet, dass Sie alles anpassen können. Sei es die Hintergrund-Grafik (gestreift), die Hauptgrafik (Revolver), die 10-Pixel-breiten-grauen Linien, die 1-Pixel-breiten-schwarzen Linien, die Farben des Inhalts-und Fussbereiches.

Ein Tipp: Wenn Sie statt der Revolver-Grafik Ihre eigene Grafik einfügen, so legt sich der untere Teil Ihrer Grafik so wie hier im Beispiel auch automatisch hinter das Menü. Somit ist die Grafik optisch geteilt durch den grauen Balken, welches doch ein schöner Effekt ist. Löschen Sie dann bitte noch die Grafik "fuss.jpg" ( diese Grafik ist am Ende des Inhaltsbereiches an der Revolver-Schraube zu erkennen).

Technik.

Seite ohne Frames.

Sie können bei diesem Design auch den Hintergrund tauschen. Wir haben für Sie schon einige Beispiele anbei:

Ersetzen Sie dazu einfach die Hintergrund-Grafik (line.jpg) in der Datei format.css durch einen anderen Grafiknamen:
  • body
    {margin: 0px;padding:0px;
    background-color: #888A90;
    background-image:url(images/line.jpg);}
Wie üblich mit ausgelagerter CSS-Datei. Platz für Fusszeile unten sowie oben der Homepagename als einfacher Text einzutragen. Anlegen von Links bzw. HTML-Seiten wie folgt: Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.


Navigation.

Textlinks.
Die Beispiel-Textlinks sind durch Ihre Links zu ersetzen.
Das Haupt-Menü oben ist angepasst an die Grafik mit der Breite von 700 Pixel. Für das Menü heisst das: 700 Pixel = 100 %.
Innerhalb dieser Breitenangabe ist das Menü aber flexibel für Sie angelegt. Im Moment sehen Sie also 7 Links mit der selben Breite je Link. Ein Link hat hier 14% (denn 7 x 14 = fast 100%).
Somit können Sie auch für 6 Buttons einen Prozentwert von 16% oder für 5 Buttons eine Prozentwert von 20% wählen. (Sie teilen also immer 100 durch die Anzahl der Buttons und runden nach unten ab).
Sehen Sie hier das Beispiel (index2.html) anbei mit 5 Buttons.

Die allgemeinen Links (Links im Text) sehen zur Zeit aus wie nachstehend: Um den Mouseover-Effekt anzuschauen, fahren Sie mit der Maus über den Link: Beispiel-Link


Christian und Michaela
Düsseldorf