|
 
|
Die Tipps
Allgemein: Diese Konstruktion ist flexibel veränderbar. Im Moment ist das Layout als Basis wie folgt angelegt:
Die Breite Gesamt-Konstruktion beträgt 880 Pixel. Ausgehend von diesem Wert erhält
die linke Spalte 240 Pixel und der Inhaltsbereiches bekommt 100 Prozent, also immer den Rest der Bildschirmbreite.
1. Höhe des Inhaltfeldes.
Bei allen Vorlagen legen wir die Höhe im Inhaltsbereich/Textbereich mit einem bestimmten Wert fest. Bei dieser Vorlage ist das z.B. 900 Pixel. Sollte Ihr Text oder Inhalt bezgl. der Höhe dann länger sein als im hier im Beispiel, so verlängert sich diese Höhe automatisch, das ist per HTML einfach und praktischerweise so vorgesehen.
Wenn Sie aus bestimmten Gründen diesen Höhenwert im Inhaltsbereich verändern möchten, so können Sie das leicht tun wie folgt:
Sie ersetzen in der CSS-Datei unter "textbox" die Angabe "height:900px" durch einen anderen Wert, z.B. "height:700px".
2. Breite der Gesamt-Konstruktion.
Wer die Breite des Designs ändern möchte, kann einen beliebigen Pixel-oder Prozentwert wählen.
Zu ändern in der Datei format.css:
Bei einer Pixel-Konstruktion überschreiben Sie den eingetragenen Wert mit einem beliebigen anderen Wert.
/* breite der gesamtkonstruktion*/
#breite {width:880px}
Für eine Prozentkonstruktion schreiben Sie dort alternativ auch beliebige Prozentwerte, z.B:
/*breite der gesamtkonstruktion*/
#breite {width:84%}
Somit erhalten Sie eine sehr flexible Vorlage - bitte nehmen Sie sich doch ein wenig Zeit dafür und setzen sich damit auseinander und testen aus, denn wenn Sie den Unterschied verstehen zwischen einem Pixel-Layout und einem Prozent-Layout dann haben Sie einen großen Schritt Richtung Webdesign gemacht.
Anmerkung:
Frage:
Warum soll ich überhaupt unterschiedliche Versionen testen und was soll der Quatsch mit dem Pixel-Layout und dem Prozent-Layout?
Antwort:
Nun....generell gilt (also nicht nur für unsere Vorlagen, sonden für alle Webseiten dieser Welt): Man kann nie wissen, mit welcher Monitor-Auflösung ein Besucher die eigene Homepage ansurft, denn es gibt ja
a.) unterschiedlich breite Monitore (von 800 Pixel bis 1600 Pixel und noch breitere)
und
b.) jeder Besucher kann - egal wie breit sein Monitor ist - eine bestimmte Breite nach Wunsch unter Windows (Monitor-Eigenschaften) selbst einstellen/bestimmen.
3. Rahmen der Seite anpassen.
Die Farbe und Breite des Rahmens (hier dunkelgrau und 20 Pixel breit), welcher sich um die Seite legt, können Sie selbst bestimmen, und zwar in der CSS-Datei hier bei:
.haupt {
border:solid 20px #363636;
}
4. 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.
5. Die Menüs.
Die Menüs passen Sie ggflls. in der Datei menue.css an.
6. Blocksatz.
Wie in vielen unserer Vorlagen ist der Text im Inhaltsbereich hier als Blocksatz gestaltet, d.h. gleiche Ausrichtung der Buchstaben an linker und rechter Textkante - weil es einfach schick aussieht und wir es mittlerweile auch aus den Print-Medien, wie Zeitungen oder Zeitschriften gewohnt sind. Nur bei sehr langen Wörtern oder bei aufeinanderfolgenden längeren Wörtern kann es evt. nicht so schön aussehen, das liegt in der Natur der Sache. Die Lösung ist simpel: Wählen Sie andere Wörter - meistens passt es dann auch schon. Und/oder machen Sie an bestimmten Stellen im Text einen Zeilenumbruch. Die Alternative: Sie ersetzen in der CSS-Datei unter "textbox" die Angabe "text-align:justify" durch "text-align:left", um eine linksbündige Ausrichtung des Textes, also eine Ausrichtung ohne Blocksatz zu gewährleisten.
7. Abstände im Inhaltsbereich.
In der CSS-Datei ändern Sie unter #textbox die Abstände des Textes/Inhalt zu den angrenzenden Bereichen. Hierfür ist der Befehl "padding" zuständig.
#textbox {
padding-top: 60px;
padding-bottom: 80px;
padding-left: 60px;
padding-right: 60px;
}
In diesem Fall hat der Text einen Abstand von 60 Pixel nach oben (padding-top) hin zum Foto sowie von 80 Pixel nach unten (padding-bottom) hin zum Fussbereich, hier die Adresse. Links und rechts (padding-left und padding-right) vom Text gibt es jeweils einen Abstand von 60 Pixel.
8. Breite der linken Menü-Spalte.
Zu ändern in der Datei "format.css" bei:
#nav_breite {width:240px;}
Sollten Sie hier die Breite der linken Spalte ändern, so müssten Sie auch die Breite der Menüs anpassen - und zwar in der Datei "menue.css".
9. Logo- und andere Grafiken: Wie tauschen?
Natürlich können Sie auch unsere Grafiken verwenden bzw. alles so belassen, hier der Hinweis für diejenigen, welche tauschen wollen:
In den meisten unserer Vorlagen bauen wir in der Regel die Logo-Grafiken sowie auch die anderen Grafiken des Designs 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 oder ä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 oder ä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:
9.1. background-image:url (images/beispielgrafik.jpg)
= Name der Grafik, ggflls. vorangestellt der Ordner-Name, hier bei uns "images".
9.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.
9.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.
9.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.
*** *** ***
Zurück zur Startseite » index.html
|
