Schneller Einstieg

Aktuelle Version vom 10. August 2006, 16:29 Uhr

Dieses Tutorial soll dazu dienen, Ihnen einen schnellen Einstieg in die Erstellung eines eigenen Layouts zu geben. Es wird nur eine grundlegende Einführung gegeben.

Oliver Kaminik hat ein Layout für Papoo entworfen, an dem die ersten Schritte erklärt werden. Wie man Screenshot sehen kann, steht das Layout nur als Grafik zur Verfügung. Das Tutorial wird Schritt für Schritt erklären, wie man vorgehen muss.

Ziel

Ziel des Tutorials ist es die Grafik und den Hintergrund von Papoo anzupassen. Außerdem werden wir die Farben der Navigation anpassen. Das ganze Design zu erstellen würden den Rahmen des schnellen Einstiegs sprengen.

Vorbereitungen

• Es gibt verschiedene Tools für Screenshots, die einfacher zu bedienen sind als zum Beispiel Adobe Photoshop. Ich benutze Printkey, weil ich damit aus Grafiken bestimmte Bereiche "schneiden" kann.
• Ein Editor mit Syntax-Highlighting ist hilfreich.

Logo einbinden und Navigation nach unten verschieben

Logo für die neue Webseite

• Zuerst wird das Logo mit Printkey "ausgeschnitten".
• Das neue Logo (siehe Screenshot) unter "logo.gif" abspeichern.
• Das Logo auf den Webserver kopieren, zum Beispiel in dem Ordner "../css/papoo3/images".
• Die Datei "../css/papoo3/basemod.css" öffnen.
• Im HEAD-Bereich (ID: #head) die bestehende Datei "top.jpg" durch "logo.gif" ersetzen.

/* background-image: url(images/top.jpg); */
background-image: url(images/logo.gif);

Damit ist das Einbinden des Logos erfolgt, aber wie man sehen kann, wird ein Teil des Logos noch verdeckt. Deswegen muss man weitere Veränderungen am CSS vornehmen.

Überschriften anpassen

Generell werden Anpassungen an der "basedmod.css" (im CSS-Verzeichnis) gemacht. Überschriften sollte man jedoch in der Datei "schriften_und_farben.css", denn hier sind beim Standard-Layout (papoo3) drei Überschriften schon vordefiniert (H1, H2, H3).

Wir fügen den drei Überschriften

h1 {
  font-size: 140%; 
  color: #923A00; 
  font-weight: bold; 
  margin: 0.9em 0 0.9em 0px;
  padding: 0.2em; 
  border-bottom: 1px #ccc solid;
}
h2 {
  font-size: 130%; 
  color: #923A00; 
  font-weight: bold; 
  margin: 0.9em 0 0.9em 0px;
  padding: 0.1em;  
  border-bottom: 1px #ccc solid;
}
h3 { 
  font-size: 120%; 
  color: #923A00; 
  font-weight: bold; 
  margin: 0.9em 0 0.9em 0px;
  padding: 0.1em;  
  border-bottom: 1px #ccc solid;
}

noch noch die Vierte, den H4-Tag, hinzu:

h4 { 
  font-size: 110%; 
  color: #923A00; 
  font-weight: normal; 
  margin: 0.9em 0 0.9em 0px;
  padding: 0.1em; 
  border-bottom: 1px #ccc solid;
}

Wie man sehen kann, ist die Schrift jetzt kleiner und es wird kein Fettdruck mehr verwendet.