Name der Homepage

Layout.

Dieses Design heisst "Kamera". Hier mal mit einem Doppel-Menü, beide obigen Menureihen sind aufklappbar. Vielleicht haben Sie es auch schon festgestellt: Für einen Webdesigner sind dunke Layouts komplizierter als helle Layouts. Viele scheitern daran, weil sie ein rein schwarzes Design fertigen, um dann festzustellen dass es in Verbindung mit Schrift sehr grell wirkt und auch eine Spannungsarmut aufweist. Besser ist es mit verschiedenen ähnlich dunklen Farben oder Farbverläufen zu arbeiten. Denn das menschliche Auge ist dankbar für Kontraste, Farbabstufungen und Schatten, um sich eine 3D-Welt aufzubauen.

Dieser hier gewählte mittlere Grauton bezgl. der Schrift und Überschrift ist auf dem sehr dunklen Gund relativ angenehm zu lesen. Gerne können Sie aber auch Weiss oder ein helles Grau oder auch eine andere Farbe wählen. Ändern Sie den "color-Wert" wenn Sie mögen in der Datei "format.css" bei "h2" (Überschrift) und "#sp2" (Schrift).


Technik.

Die Seite kommt ohne Frames und ohne Tabellen aus und ist ein rein CSS-basiertes Layout.

Tauschen Sie das Beispiel-Logo durch Ihres aus. Falls Sie die selbe Logo-Hintergrundfarbe wie im Beispiel-Logo verwenden möchten:
RGB-Wert:14/14/14 bzw. Hex-Wert: #0e0e0e

Die Schrift ist im Blocksatz, d.h. gleiche Ausrichtung der Schrift an linker und rechter Kante. Das sieht schön aus, jedoch kann es mitunter bei sehr langen Wörtern den Text auseinanderziehen. Die Abhilfe ist einfach, entscheiden Sie je nach Bedarf oder Ihrem Geschmack: Ersetzen Sie "text-align:justify" durch "text-align:left". Und zwar ganz oben in der Datei format.css bei:
td { text-align:justify;font-family: arial, helvetica, tahoma ,verdana, sans-serif; }

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 Menü links ist beliebig erweiterbar bzw. natürlich auch verkürzbar durch Löschen einiger Links. 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

Validierung.

Valid HTML 4.01 Transitional Valid CSS!
www.ihre-webseiten-url.de