Aurea Secula
 
 
 
 
02
 02


Tipps - Mögliche Anpassungen

  Breite der Gesamt-Konstruktion ...

Zu ändern in der Datei format.css bei:
/* breite der gesamtkonstruktion*/
#breite {width:960px}
Für eine Prozentkonstruktion (Breite der Seite in Prozent bezgl. der eingestellten Monitor-Breite) schreiben Sie dort anstelle der Pixelwerte (px) 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 Rahmen mit Schatten-Effekt passt sich immer Ihrer Änderung an und wandert mit.

- Falls Sie die Breite ändern, achten Sie evt. darauf, daß Ihr Foto breiter ist, als unser Beispiel-Foto (Blätter), welches 800 Pixel breit ist.


  Verbreitern der Menü-Spalte ...

Zu ändern in der Datei format.css bei:
/* breite der rechten spalte
 - hier beliebig andere px-werte */
#inboxbreite {width:260px;}

 Die Hauptgrafik bzw. Ihr Logo-Bild ...

Das obige Bild (hier das "Blätter-Foto" namens "logo.jpg") können Sie tauschen - wenn sie mögen. Müssen Sie aber nicht.

Zu ändern in der Datei format.css bei:
#logo {width:100%;height:290px;
background-color:#000;
background-image:url(images/logo.jpg);
background-repeat:no-repeat;
background-position: 100% 50%;
border:solid 1px #363636;
}

 Schriftgröße, Schriftfarbe, Abstände ...

Die wesentlichen Anpassungen bezgl. des Textes/Inhaltsfeldes, wie Schriftgrösse (font-size), Zeilenhöhe (line-height), Schriftart (font-family), Abstände zum Rand hin (padding), Buchstabenabstand (letter-spacing), Hintergrundfarbe (background-color) bwz. Hintergrundgrafik (background-image) sowie Höhe (height) des Feldes finden Sie in der Datei "format.css" bei
#inboxtext {
height:1000px;
background-color:#252525;
text-align:justify;
font-size: 17px;line-height: 24px;
font-family: arial,tahoma,verdana,helvetica, sans-serif;
color:#7D7D7D;
padding-top: 20px;
padding-bottom: 80px;
padding-left: 20px;
padding-right:20px;
letter-spacing:0px;
width:100%;
vertical-align:top;
background-image:url(images/fv04.jpg);
background-repeat:no-repeat;
background-position:  100% 50%;
}

 Die kleinen Kästchen haben es in sich ...

Ja sicher: Die kleinen Kästchen in der Kopf-und Fusszeile, welche Sie beim Homepagenamen und der Adresse sehen, haben es in sich. Denn diese sind so erstellt, daß diese Objekte wie reiner Text behandelt werden können. Das ermöglicht Ihnen z. B. die Farbe oder die Rahmenfarbe schnell und einfach ohne Grafikprogramm ändern zu können. Aber es kommt noch besser: DieGröße, d. h. Höhe und Breite verändern Sie ganz leicht indem Sie andere "width" und "height" - Werte setzen.

Der Trick: Auf ein transparentes 1Pixel-Gif (d. h. eine durchsichtige Mini-Grafik mit einer Breite von 1 Pixel und einer Höhe von 1 Pixel) werden bestimmte Werte gesetzt, in unserem Beispiel die Hintergrundfarbe (background-color) und die Rahmenfarbe bzw. Rahmendicke (border + Farbwert). Hier haben die Kästchen jeweils 8 Pixeln bekommen. Hinweis: Die Kästchen sehen sie im Kopf-und Fussbereich, Sie können diese aber auch natürlich an jeder anderen beliebigen Stelle einbauen.
<img src="images/pixelspace.gif"
width="8"  height="8"
border="0" alt=""
style="background-color:#000;border:solid 1px #fff">  

 Der Rahmen ist auch anpassbar ...

Die Farbe und Breite des Rahmens, welcher sich um die Seite legt, können Sie selbst bestimmen, und zwar in der CSS-Datei hier bei:
/* rahmen um die seite */
#haupt {
border:solid 15px #363636;
}
Probieren Sie mal ein wenig, ein Rahmen mit ca. 1px statt 15px schaut auch gut aus und gibt dem Ganzen eine andere Note.


  Die Menüs ...

Die Menüs passen Sie ggls. in der Datei menue.css an. Zum Beispiel die Ausgangsfarbe der Links oder die Mouseover-Farbe oder wenn Sie die Breite der Menü-Spalte ändern, müssten Sie dort auch die Menü-Breite der Links verstellen.


  Der Design-Trick ...

Wir möchten Ihnen einen kleinen Trick verraten, wenn Sie mögen: Der Kopfbereich wirkt grafisch, da dieser nach oben und unten abgerundet ist. Trotzdem ist dieser Bereich in Höhe verstellbar bzw. auch verkürzbar, so dass Sie hier ggflls. auch mehr oder weniger Inhalt einfügen könnten. Wie funktioniert das? Nun, es ist folgendermaßen: Der Bereich besteht aus drei Teilen: Ein sich hineinwölbender Teil, ein Mittelteil (hier mit dem Homepagenamen) und ein sich herauswölbender Teil. Dadurch ist der Mittelteil unabhängig und flexibel einzustellbar.

Übrigens haben wir das gleiche Prinzip auch unten in der Fusszeile (enthält im Mittelteil die Adresse) angewandt.


  Der Blocksatz ...

Der Text ist hier als Blocksatz gestaltet, d. h. gleiche Ausrichtung der Buchstaben an linker und rechter Kante des Textes. Wer das nicht mag, ersetzt in der Datei "format.css" bei #inboxtext den Wert text-align:justify durch text-align:left.





Sie befinden sich auf der Tipp-Seite (tipps.html). Hier geht es zurück zur Hauptseite:

  - Die Startseite index.html
 
 
Mike Mustername GmbH & Co. KG  •  Beispielstraße 55  •  55234 Sampletown