 HP-Vorlage ohne Frames 15 (Mustervorlage Cameleon)
Hier können sie das Beispiel 15 ansehen und als ZIP-Datei herunterladen. Für 9 weitere Farbvarianten habe ich HTML-, passende CSS-Dateien und Grafiken ebenfalls vorbereitet.
Eine Webseite für 80% Darstellungsbreite mit CSS-Formatierungen, ohne Frames. Die Präsentation wird im Browserfenster zentriert. Ich verwende eine externe CSS-Datei und 2 Grafiken. Eine für den Titel (Höhe 70 Pixel), eine weitere (Kachel) für den Seitenhintergrund. Eine externe JavaScript-Datei zur Darstellung des aktuellen Datums ist ebenfalls eingebunden.
Aus dieser Vorlage können sie mit nur wenigen Änderungen 20 unterschiedliche Designs herstellen. Dazu müssen sie lediglich 3 Farbwerte und eine Grafik- einbindung in den CSS-Angaben ändern! (Beispiele siehe Vorschau)
Die Vorschau öffnet im neuen Browserfenster:
Variante-03 
Variante-14
Um ein andersfarbiges Design herzustellen, binden sie eine andere Hintergrundgrafik für den im Titelbalken ein und legen neue 3 Farbwerte nach ihren Vorstellungen fest!
Die CSS-Anweisungen für die Farben und die beiden verwendeten Hintergrundgrafiken stehen in der externen CSS-Datei. Änderungen mussen dort eintragen werden.
Farben
Farbe 1 - 3 mal: Werte für Randfarbe und die Textfarben für h1 + h2
Farbe 2 - 1 mal: Wert für Textfarbe des Seitentitels (große Schrift)
Farbe 3 - 1 mal: Wert für Hintergrundfarbe der Navigationsleiste
CSS-Anweisungen (Rand und Überschriften): 3 identische Farbwerte (Farbe 1)
.rand
{
color: #FFFFFF;
font-family:Times;
background-color: #FFFFFF;
border:1px solid #5461BA;
padding:1px;
margin:1px;
}
h1 {
color: #5461BA;
font-family:"Trebuchet MS",Tahoma,Arial,Helvetica;
font-size: 16px;
}
h2 {
color: #5461BA;
font-family:"Trebuchet MS",Tahoma,Arial,Helvetica;
font-size: 14px;
}
CSS-Anweisungen (Titeltext): 1 Farbwert (Farbe 2)
#titel .text
{
color: #FFFFFF;
text-decoration:none;
font-family:Times;
font-size: 30px;
background:url(images/bg02.gif) #AF00FF;
background-position:0px 0px;
padding:0px;
}
CSS-Anweisungen (Hintergrundfarbe Navleiste): 1 Farbwert (Farbe 3)
.navleiste
{
color: #FFFFFF;
text-decoration:none;
font-family:Arial,sans;
background-color:#B7BCDF;
padding:0px;
}
Hintergrundgrafik für den Titel
CSS-Anweisungen (Hintergrundgrafik Titel): 1 Eintrag
#titel .text
{
color: #FFFFFF;
text-decoration:none;
font-family:Times;
font-size: 30px;
background:url(images/bg02.gif) #AF00FF;
background-position:0px 0px;
padding:0px;
}
Download
Variante 03 konnen sie hier aufrufen und downloaden:  Vorschau DOWNLOAD 
Die Einzeldateien (jeweils 6) weiterer Varianten:
Für einige Varianten habe ich bereits Beispiele erstellt. So erhalten sie rasch einen Eindruck des generell gleichen Aufbaus und den Variationen durch farbliche Anpassung. WeitereSeiten können sie nach meinen Angaben (oben) und den angebotenen Grafiken nun sicher selbst herstellen (Höhe 70 Pixel). Natürlich können sie auch eigene Hintergrundgrafiken entwerfen.
In meinen Beispielen verwende ich
für das Beispiel 1 die Grafik bg01.gif und die CSS-Datei 'styles01.css',
für das Beispiel 2 die Grafik bg02.gif und die CSS-Datei 'styles02.css', usw.
Sie benötigen 6 Elemente für jede Musterseite, die Grafiken sollen im Unterordner 'images' abgelegt werden. Rechtsklicken + 'Ziel speichern unter' wählen :
Ansicht aller (bisher 20) selbst hergestellten Grafiken in Originalgröße. Die Grafiken dürfen sie frei und kostenlos verwenden. Rechtsklicken + 'Grafik speichern unter' wählen
Die Grafiken haben Dateibezeichnungen von 'bg01.gif' bis 'bg20.gif'
         
         
Entpacken Sie die ZIP-Datei in einem neuen Verzeichnis, ändern die Inhalte mit einem HTML- oder Texteditor (WordPad) , schon ist ihre erste Präsenz fertig.
Zum Download der ZIP-Datei klicken Sie auf 'DOWNLOAD' oben unter dem Titelbalken
Klicken Sie auf 'VORSCHAU' oben unter dem Titelbalken, um einen ersten Eindruck zu erhalten.
Natürlich können Sie alles modifizieren.
|
ZURÜCK 
