News

Hier können wichtige Nachrichten, Tipps, News, Infos, Werbung, das Wetter oder sonstige Inhalte eingesetzt werden!

Achtung

Die Nutzung dieser Homepagevorlage ist nur für private Inhalte kostenlos, sofern der Backlink, der auf unsere Seite verweist, nicht entfernt wird. Der Backlink darf nur gegen Bezahlung entfernt werden! Für eine gewerbliche bzw. kommerzielle Nutzung ist diese Homepagevorlage ebenfalls zu erwerben. Auf nachfolgenden Links gelangen Sie zu den Nutzungsbedingungen, bzw. zum Bestellformular von homepage-vorlagen- webdesign.de!

Info

Diese Info-Boxen liegen in der linken Tabellenzelle, welche die Klassifizierung "spalte-li" erhalten hat. Die Breite dieser Zelle beträgt derzeit 24% und die beiden rechten Spalten haben den Rest von 100%, also jeweils 38% erhalten!

Boxen

Eine Einheit einer einzelnen Box besteht jeweils aus einem h1- und einem p-Tag innerhalb dieser Tabellenzelle! Die "Dots" sind im h1-Tag als Hintergrundgrafik notiert.

Tipp

Es können auch weitere Boxen durch Kopieren hinzugefügt sowie auch welche durch Löschen entfernt werden. Die Boxen passen sich dem Inhalt entsprechend automatisch in der Höhe an.

Design: "Red dot"

Auch bei dieser Vorlage ist es im Prinzip wieder die Logo-Grafik, die es in sich hat ... die Farbkombination Schwarz-Rot auf cremefarbenem Hintergrund spricht für sich ...!

Tabellen- und Div-Konstruktion

Diese Homepagevorlage ist in fünf untereinanderliegende Abschnitte bzw. Div-Bereiche unterteilt, die nach links ausgerichtet sind. Die Gesamtbreite der jeweiligen Abschnitte liegt bei 720px. Im Inhaltsbereich wurde eine dreispaltige Tabelle eingesetzt, um dadurch die Seite übersichtlicher zu gestalten. Eine solche Gestaltung wird von Besuchern gerne gesehen, da diese zu einem entspannteren Lesen anregt.
Hier geht es weiter zu Version II. mit nur zwei Spalten!
Nach Anpassung des Homepagenamens, Logos, Verweise sowie der Fusszeile ist die "index.htm" so oft zu kopieren, wie Seiten benötigt werden. Im Anschluss sind die Html-Dokumente noch dementsprechend umzubenennen.

Navigation und allgemeine Links

Das vertikale Navigationsmenü im Logo-Bereich kann wegen der Optik höchstens noch um einen Link erweitert werden. Probieren Sie auch den Mouseover aus - einfach mit der Maus über die Links fahren! Weiter unten über der Fußzeile befindet sich eine weitere Navigation, die noch um einige Links erweitert werden kann. Wie immer sind auch hier alle Hover-Effekte ohne Javascript und können bei Bedarf über die ausgelagerte CSS-Datei verändert werden. Die Verweise selbst sind über den Html-Text anzupassen. Hier noch ein allgemeiner Link im Text ohne Ziel!

Logo-Grafik

Wie der Spiegel-Effekt der Schrift erreicht werden kann, entnehmen Sie bitte unter der Rubrik Homepage-Tipps. Dort finden Sie speziell zu diesem Thema eine ausführliche Anleitung. Bei der Grafik oben wurde zuvor noch ein anderer Effekt angewandt, der hier kurz beschrieben wird, damit dieser bei Bedarf nachgebaut werden kann. Zuerst erstellen Sie den gewünschten Schriftzug in Ihrem Bildbearbeitungs-Programm und wenden anschließend Nachfolgendes an:

Schrift: Lucida Console, 48pt, #990000
Ebenenstil: Schein nach außen
- Struktur: Füllmethode Sprenkeln, Deckkraft 75%, Störung 0%, Farbe RGB 204, 204, 204 bzw. #CCCCCC
- Elemente: Technik weicher, Überfüllen 16%, Größe 7px
- Qualität: Kontur Kegel, Bereich 50%, Zufallswert: 0%

Nun fahren Sie fort, wie unter Homepage-Tipps beschrieben, um das Werk zu vollenden.

Weitere Info

Diese Webvorlage ist W3C-konform (valides HTML und CSS)