 HP-Vorlage ohne Frames 04
Noch einmal eine Seite die aus 3 untereinander angeordneten Tabellen für Titel, Menü und Inhalt besteht. Anders in dieser Version ist der Aufbau des Titelbereich: Vor einer Hintergrundgrafik werden zwei unterschiedlich formatierte Texte mit CSS-Angaben positioniert. Das ermöglicht eine leichte Anpassung.
Ich empfehle genau diese HP-Vorlage herunter zu laden, wenn sie ihre erste Webseite herstellen möchten. Die ZIP-Datei enthält alle Dateien die sie benötigen.
Layout
Seite für 760 Pixel Breite innerhalb einer Tabelle. Dadurch ist gewährleistet, dass das Layout in allen Bildschirmauflösungen gleich aussieht. Die in der Breite festgelegte Tabelle wird zentriert angezeigt. Durch Abschalten der Ränder und farbicher Anpassung der Leerbereiche rechts und links, bieten sich weitere Gestaltungsmöglichkeiten.
 22.04.2007, nun mit externer CSS-Datei
Webseiten-Vorlage
Die Vorlage ist das modifizierte Beispiel aus dem HTML-Kurs im Dezember 2002. Interessant ist hier, dass sie für ihre Seite keine neue Grafik für den Titelblock entwickeln müssen. Verwenden sie einfach eine meiner mehr als 30 farbigen Vorlagen.
Schließlich sind die beiden Titeltexte nicht Bestandteil der Grafik, also reine HTML-Anweisungen die durch jeden anderen Text ersetzt werden können.
Bei der Vorlage 04 sind die 7 Seiten einheitlich mit blauer Titelgrafik. Die Seiten lassen sich einfach anpassen, da sie bis auf einen Fülltext leer sind. Den © Vermerk im Fuß der Seite ändern sie natürlich auch. Eine zusätzliche Seite mit Erklärungen ist im Download enthalten.
Bei der Demo-Version zeige ich auf, wie sie mit nur wenigen Änderungen, meiner Vorlage einen anderen 'Anstrich' verleihen können. 4 neue Farbangaben und eine Grafikreferenz reichen dazu aus.
Klicken Sie auf VORSCHAU oben unter dem Titelbalken, um einen ersten Eindruck zu erhalten. Natürlich können Sie alles modifizieren.
Entpacken sie die ZIP-Datei in einem neuen Verzeichnis, ändern die Inhalte mit einem Editor, schon ist ihre erste Präsenz fertig. Zum Download der ZIP-Datei klicken sie auf DOWNLOAD oben unter dem Titelbalken
Erklärungen
|
Aufteilung der Seite:
|
Diese Seite besteht aus 3 Elementen: Titelblock, Navigation und Inhalt. Für jedes Element wurde eine Tabelle von 760 Pixel definiert. Jede Tabelle hat einen farbigen Rand, der durch CSS-Anweisungen oder mittes verschachtelter Tabellen notiert wurde.
|
| Titelgrafik: |
Im Titelblock verwende ich eine Grafik die bis auf die Grafik 'Online' (rechts) einfarbig ist. Durch Austauschen der Grafik kann die Seite leicht angepasst werden. Die Titelgrafik gibts in unterschiedlichen Farbtönen.
|
| Text im Titelblock: |
Die beiden Texte sind mit CSS-Angaben formatierte HTML-Anweisungen. So kann die Seite leicht angepasst werden und man kann die gleiche Hintergrundgrafik für jedes Thema einsetzen. Schließlich sind die beiden Titeltexte nicht Brstandteil der Grafik.
Erklärungen der hier verwendeten CSS-Technik zur Positionierung und Textformatierung entnehmen sie bitte meiner Beispielseite
 Text positionieren mit CSS
|
| Die Farben: |
Die Farben: Ich verwende neben der Farbe Weiß 3 Farbtöne. Farbe 1 entspricht der Farbe der Titelgrafik. Die 2 abgestuften Farben werden daraus abgeleitet.
Für diese 4 Farben werden im CSS-Block eigene Klassen definiert. So stehen die 4 Farben jederzeit zur Verfügung und müssen innerhalb der Seite nicht als Farbwert sondern nur als CSS-Klasse eingetragen werden.
| 1 |
|
.bgcolor1 |
Grundfarbe
entnommen aus dem Titellogo |
| 2 |
|
.bgcolor2 |
1. Abstufung (mittlerer Farbton)
entnommen aus dem Titellogo (Online) |
| 3 |
|
.bgcolor3 |
2. Abstufung (helle Farbe)
abgestufter Farbton |
| 4 |
|
.bgcolor4 |
Weiß od. heller Grauton
für den Seitenhintergrund |
|
Die Farbe 1 verwende ich auch für Überschriften und Links
Die Farbe 2 verwende ich auch für den Titeltext im Kopftitel
|
| Anpassung |
Möchten sie die Seite in einem anderen Grundfarbton entwerfen, verwenden sie einfach eine andersfarbige Grafik für den Titel. Dann notieren sie im CSS-Bereich lediglich die 3 Farbtöne entsprechend und die Harmonie der Farben stimmt wieder.
Die Auswahl der Minipfeile vor den Links würde ich auch der Farbgebung der Seite anpassen (Pfeile gibts in meiner MINI-IMAGE-BOX).
|
| CSS-Anweisungen |
Sie können die CSS-Anweisungen in einer externen Datei notieren oder im Kopf der HTML-Seite schreiben. Hier wurde die 1. Technik (externe Datei) für die Seiten 1 bis 3 eingesetzt. Die Seiten 4 bis 7 haben lokal notierte Anweisungen im HEAD-Bereich.
(Alles im Download enthalten)
|
Grafiken und Farben
Es stehen verschiedene Images für die Titelgrafik zur Verfügung. Damit ist eine Anpassung leicht möglich. Man kann natürlich auch auf die Grafik verzichten und lediglich eine Hintergrundfarbe (Pastelltöne?) für die Tabelle festlegen.
Die Farben kann man mit einem kostenlosen Tool der Grafik entnehmen.
Color-Picker / TrayColor
In meiner MINI-IMAGE-Box stelle ich vorab schon einmal einige Titelgrafiken zur Verfügung. Vorschläge für weitere Grafiken können sie über das Kontaktformular abgeben.
 MINI-Image-Box - Grafiken zum Download (Menü Backgrounds)
Beispiele für Linkpfeile finden sie in meiner "Image-Box".
MINI-Image-Box - Grafiken zum Download (Menü Pfeile)
|
Home
Demo 
ZURÜCK