Die Tipps
1. Breite der Gesamt-Konstruktion.
Zu ändern in der Datei format.css bei:
/* breite der gesamtkonstruktion*/
#breite {width:970px}
Für eine Prozentkonstruktion schreiben Sie dort alternativ auch beliebige Prozentwerte, z.B:
/*breite der gesamtkonstruktion*/
#breite {width:84%}
- Egal ob Sie die Breite in Pixel oder Prozent ändern, das Layout ist flexibel angelegt, d.h. der abgerundete Rahmen mit Schatten-Effekt passt sich immer Ihrer Änderung an und wandert mit.
- Falls Sie die Breite ändern, achten Sie darauf, daß Ihr Foto breiter ist, als unser Beispiel-Foto (Schilf), welches nur 600 Pixel breit ist.
2. Die rechte Hauptspalte (mit dem Menü und den Boxen) verbreitern oder verschmälern.
Zu ändern in der Datei format.css bei:
/*breite der rechten spalte in pixel*/
.breite_hauptspalte_re
{width:280px;
margin:0px;padding:0px}
Besonders interessant ist, daß Sie mit dieser Breiten-Änderung auch die Breite der Fusszeile - hier das rechte Objekt (Tel/Fax/Mail) gleichzeitig mit ändern. Denn wir haben die entsprechende CSS-Klasse (.breite_hauptspalte_re) auch dort angelegt, so daß die Änderung auch dort aktiv wird.
3. Die Menüs.
Die Menüs passen Sie ggls. in der Datei menue.css an.
4. Die Mini-Buttons.
Die immer beliebter werdenden Mini-Buttons unter "Favourite Links", welche besonders in vielen Blog-Seiten auftauchen dienen als Beispiel und Sie können diese gerne löschen, auch unsere Buttons. Oder Sie fügen weitere Buttons hinzu.
Zu Ihrer Information: Unsere 4 Buttons (Templates / On-Mouseover / SISPapenburg) sowie der Wikipedia-Button sind offizielle Buttons. Die restlichen Buttons sind Fantasie-Buttons.
5. Verlinken der Seiten.
Seite ohne Frames. Anlegen von Links bzw. HTML-Seiten wie folgt: Die Datei Startdatei "index.html" ist zu kopieren und jeweils unter einem neuen Namen abzuspeichern.
6. Die Grafiken - Hinweis für fortgeschrittene Anwender.
In den meisten unserer Vorlagen bauen wir die Grafiken als Hintergrund-Grafiken (background-image) ein. Das hat den großen Vorteil, daß man über diese Hintergrund-Grafik dann nicht nur Text legen kann, wie z.B. den Homepagenamen oder die Adresse sondern ggflls. noch weitere Grafiken.
Das kann z.B. so ähnlich aussehen, hier als "id-Befehl" mit dem Zeichen # im CSS-Bereich und der Angabe "id="beispielname" im HTML-Bereich.
#beispielname {
background-color:#fff;
background-image:url(images/beispielgrafik.jpg);
background-repeat:no-repeat;
background-position:100% 0%;
}
oder aber so ähnlich, nämlich
als "class-Befehl" mit dem Punkt-Zeichen im CSS-Bereich und dem Befehl "class="beispielname" im HTML-Bereich.
.beispielname {
background-color:#fff;
background-image:url(images/beispielgrafik.jpg);
background-repeat:no-repeat;
background-position:100% 0%;
}
Die "class-Angabe" lässt sich gleichzeitig für mehrere Objekte verwenden, die "id-Angabe" nur für ein bestimmtes Objekt innerhalb der Webseite. Das ist eigentlich der wesentliche Unterschied. Ansonsten ist der Quelltext ja nahezu identisch.
Wichtiger für Sie zum Verständnis sind vielmehr die folgenden Parameter:
1. background-image:url (images/beispielgrafik.jpg)
= Name der Grafik, ggflls. vorangestellt der Ordner-Name, hier bei uns "images".
2. background-position:100% 0%
= Ausrichtung der Hintergrund-Grafik in horizontaler Richtung (von links nach rechts) sowie in vertikaler Richtung (von oben nach unten).
Die erste Angabe steht für horizontal, die zweite Angabe für vertikal. Je nachdem an welcher Stelle der Wert steht, gilt: Die Angabe 0% bedeutet links oder oben. Die Angabe 100% bedeutet rechts oder unten. Die Angabe 50% 50% zentriert genau mittig in beiden Richtungen.
In unserem Beispiel (100% 0%) ist die Grafik rechts (horizontal) und oben (vertikal) ausgerichtet.
3. background-repeat:no-repeat
Dies ist der Befehl für die Wiederholung (Kachelung) der Grafik. "no-repeat" = keine Wiederholung der Grafik.
"repeat-x" = Wiederholung der Grafik auf der horizontalen Ebene.
"repeat-y" = Wiederholung der Grafik auf der vertikalen Ebene.
4. background-color:#fff
Generell fügen wir eine Angabe der Hintergrund-Farbe (background-color) immer hinzu, obwohl in vielen Fällen die Angabe der Hintergrund-Grafik (background-image) ausreicht.
Denn immer dann, wenn der Inhalt eines Objektes (z.B. einer Tabellenzelle oder eines div-Bereiches) grösser ist als die Grafik, greift die Hintergrundfarbe zusätzlich.
|
Tipps.
