Design: Orange juice

Tabellen-Div-Konstruktion

Das Grundgerüst dieser Homepagevorlage besteht aus einer zentrierten Tabelle (#content) sowie aus zwei Hauptabschnitten, die jeweils in einem Div (#logo und #fuss) definiert sind. Die vertikale Navigation (#spalte_li) und der Inhaltsbereich (#inhalt) befinden sich in der 760px breiten Tabelle (#content), wovon die Spalte für die vertikale Navigation eine Breite von 170px erhalten hat. Die rechte Inhaltsspalte nimmt automatisch den Rest ein, da keine Breite für diese Spalte definiert wurde.

Die Rest-Breite für die Inhaltsspalte lässt sich folgendermaßen errechnen:
760px (Gesamtbreite der Tabelle) - 170px (Navigationsspalte) - 25px (padding-left Inhaltsbereich) = 565px (Breite der Inhaltsspalte).

Befindet sich in der Inhaltsspalte Text, welcher sich etwas mehr als über eine Zeile erstreckt, ist eine Breitenangabe völlig überflüssig.

Des weiteren kommt diese Vorlage schon mit einer Monitorauflösung ab 800 x 600px zurecht.

Bearbeitung des Logos im PSD-Format (Photoshop Document)

Sie verfügen über ein entsprechendes Bildbearbeitungs-Programm wie z.B. Photoshop, dann kann das hier verwendete Beispiel-Logo (logo.jpg) in der Größe von 400 x 90px vollständig angepasst werden, da es der Homepagevorlage zusätzlich noch im PSD-Format (logo.psd) beiliegt. Daher ist auch der Zugriff auf die Textebene zur individuellen Gestaltung möglich. Wie Sie auf die Textebene Zugriff erhalten bzw. diese bearbeiten können, entnehmen Sie bitte auf nachfolgender Seite.
Selbstverständlich kann das Beispiel-Logo auch durch ein anderes oder durch normalen Text ersetzt werden. Bei Ersetzen durch Text ist dann jedoch in der CSS-Datei unter #logo eine entsprechende Schriftart, -größe, -farbe etc. zu hinterlegen.

Navigation und allgemeine Links

Fahren Sie doch bitte einmal mit Ihrer Maus über die Menüs ... der Mouseover-Effekt (Grafiktausch/Bildertausch) war mittels CSS (ohne Javascript) umsetzbar. Das in drei Rubriken unterteilte, vertikale CSS-Menü kann bei Bedarf durch Kopieren bzw. durch Löschen über den Html-Text unbegrenzt erweitert bzw. auch verringert werden. Die Verweise sind sowohl beim horizontalen als auch beim vertikalen Menü über den Html-Text anpassbar.
Hier noch ein allgemeiner Link im Text ohne Ziel!

Änderung bzw. Anpassung des vorhandenen Designs

Im Html-Text dieser Vorlage finden Sie keine Angaben zur Formatierung des Designs, um die Ladezeit möglichst gering zu halten. Die Formatierung wurde in einer extern ausgelagerten CSS-Datei bereits für Sie hinterlegt. Damit der Html-Text auch später nicht unnötig überladen wird, sollten alle Änderungen des Designs nur über die Datei "style.css" im Ordner "css" erfolgen.
Nach Anpassung des Logos, der Verweise sowie der Fußzeile sind weitere Seiten durch Kopieren der Datei "index.htm" anzulegen, die im Anschluss noch entsprechend umzubenennen sind!

Weitere Infos

Bitte beachten Sie: Die Nutzung dieser Homepagevorlage ist nur für private Inhalte kostenlos, sofern der Backlink am unteren Ende, der auf unsere Seite (http://www.homepage-vorlagen-webdesign.de/homepagevorlagen/) verweist, erhalten bleibt. 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 www.homepage-vorlagen-webdesign.de!