Mit Überschriften arbeiten
In weblica ist die Verwendung von Überschriften zur Strukturierung von Inhalten denkbar einfach: Es stehen die aus HTML bekannten sechs Überschriften (H1 - H6) zur Verfügung.
Inhalte mit Absätzen und Überschriften strukturieren
Die Überschrift 1 wird in der Regel auf jeder Seite nur einmal für den Seitentitel verwendet; weblica verwendet daher für den Seitentitel automatisch die Überschrift 1. Für die Absätze auf einer Seite können Sie je eine eigene Überschrift und deren Grösse festlegen. Hierbei nutzen Sie Die Überschrift 2 in der Regel für alle Absätze der ersten Ebene auf der Seite, weiter verschachtelte Absätze erhalten entsprechend höhere Überschriften (3 - 6).
So bieten Sie Ihre Inhalte gut strukturiert und lesbar an; das freut die Besucher Ihrer Website und trägt auch zur Besserung Verarbeitung Ihrer Seiten durch Suchmaschinen bei.
Die hierarchische Gliederung und ihre visuelle Entsprechung
Die in weblica mitgelieferten Designs definieren die Schriftgrössen für die Überschriften einheitlich relativ zur gewählten Basis-Schriftgrösse gemäss folgender Tabelle:
Überschrift
|
HTML-Element
|
Grösse
|
Hervorhebung |
Überschrift 1
|
H1
|
180%
|
|
Überschrift 2
|
H2
|
160%
|
|
| Überschrift 3 |
H3 |
140% |
|
| Überschrift 4 |
H4 |
120% |
|
| Überschrift 5 |
H5 |
100% |
Fett |
| Überschrift 6 |
H6 |
100% |
Kursiv |
Die hierarchische Gliederung der Überschriften erhält so eine intuitive visuelle Entsprechung mittels Abstufung der Schriftgrösse.
Visuelle Aspekte - schön ist, was gefällt
Manchmal scheint die in weblica gewählte Grösse für die Überschriften H1 bis H3 zu gross, die Überschriften wirken je nach Inhalt und Design zu wuchtig. Das ändern Sie mit etwas CSS-Code rasch und einfach, indem Sie die Schriftgrösse der Überschriften entsprechend reduzieren; allerdings verlieren Sie so die visuelle Hierarchie.
Nachstehend finden Sie ein paar Ideen zur alternativen visuellen Gestaltung von Überschriften. Die entsprechenden CSS-Regeln können Sie dabei direkt in Ihr Projekt als globalen CSS-Code übernehmen, siehe hierzu den Artikel
Eigenen CSS-Code für ein Projekt hinterlegen.
Farben
Die Farben für die Überschriften ändern Sie direkt in Ihrem Projekt im Dialog für die Design-Einstellungen. Wir lassen die Farben in den Beispielen unberührt.
Schriftart und Grösse variieren: Times & Gill Sans
Diese Stil-Variante arbeitet mit den beiden Schrift-Familien Times und Gil Sans; die beiden Schriften wechseln sich ab, beginnend mit Times für die Überschrift 1. Zudem werden für die Überschriften 2,4 und 6 die Zeichen in Grossbuchstaben (Text-Transform: uppercase) dargestellt; weiter wird der Zeichen-Abstand (Letter-Spacing) variiert.
Überschrift 1
Überschrift 2
Überschrift 3
Überschrift 4
Überschrift 5
Überschrift 6
CCS-Code
h1 {
font-size: 200%;
font-family: times, Times New Roman, times-roman, georgia, serif;
letter-spacing: -1px;
font-weight: bold;
border: 0;
}
h2 {
font-family: Gill Sans, Verdana;
font-size: 130%;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
border: 0;
}
h3 {
font-family: times, Times New Roman, times-roman, georgia, serif;
letter-spacing: -1px;
border: 0;
font-weight: bold;
}
h4 {
font-family: Gill Sans, Verdana;
font-size: 100%;
text-transform: uppercase;
letter-spacing: 2px;
font-weight: bold;
}
h5 {
font-family: times, Times New Roman, times-roman, georgia, serif;
font-size: 120%;
letter-spacing: 2px;
}
h6 {
font-family: Gill Sans, Verdana;
font-size: 85%;
text-transform: uppercase;
letter-spacing: 2px;
}
Rahmenwerk
Auch mit Rahmen können Sie Ihre Überschriften visuell gestalten, hier ein paar Beispiele:
Überschrift 2 mit verschiedenen Rahmen
|
CSS
|
Linie unten
|
border-bottom: 1px solid;
|
Gepunktete Linie unten
|
border-bottom: 1px dotted; |
Linie oben und unten
|
border-top: 1px solid;
border-bottom: 1px solid; |
Oben und unten gepunktet
|
border-top: 1px dotted;
border-bottom: 1px dotted; |
Etwas Schatten gefällig
Aktuelle Browser unterstützen die CSS3-Eigeschaft für Text-Schatten. Das heisst, alle Browser ausser dem Internet-Explorer zeigen auf Wunsch einen Text-Schatten.
Im Beispiel verwenden wir einen Text-Schatten von 2 Pixel nach unten rechts und einer Unschärfe von 1 Pixel. Die Schattenfarbe setzen wir auf Schwarz mit einer Deckkraft von 30%.
Überschrift 1
Überschrift 2
Überschrift 3
Überschrift 4
Überschrift 5
Überschrift 6
CCS-Code
h1, h2, h3, h4, h5, h6 {
text-shadow: 2px 2px 1px rgba(0,0,0,0.3);
}