Webdesign - Webseiten planen, gestalten - Free-Hack Library
Webdesign - Webseiten planen, gestalten - Free-Hack Library
Webdesign - Webseiten planen, gestalten - Free-Hack Library
Erfolgreiche ePaper selbst erstellen
Machen Sie aus Ihren PDF Publikationen ein blätterbares Flipbook mit unserer einzigartigen Google optimierten e-Paper Software.
Abb. 7.4a, b: Auszüge aus dem Styleguide des<br />
Neuentwurfs der FH-Gelsenkirchen Website<br />
(Beispiel: Märdian)<br />
4. Typografie<br />
4.1. Allgemein<br />
font-family: Verdana, Helvetica, Arial, sans-serif;<br />
font-size: 12px;<br />
font-weight: normal;<br />
Farbe<br />
Anthrazit<br />
4.2. Fließtext<br />
#inhalt p {<br />
line-height: 1.5em;<br />
margin-top: 10px; // Abstand vor<br />
margin-bottom: 10px; // Abstand nach<br />
}<br />
Farbe<br />
Anthrazit<br />
4.3.1. Hervorhebungen<br />
4.3.1.a strong<br />
252<br />
font-weight: bold;<br />
4.3.1.b em<br />
font-style: italic;<br />
Styleguide<br />
technische Umsetzung von einer anderen Person als dem <strong>Webdesign</strong>er<br />
ausgeführt wird, und dient als Grundlage für den Aufbau<br />
des HTML-Prototyps.<br />
Ein erweiterter Prototyp-Styleguide, wie er hier vorgestellt wird,<br />
entsteht erst nach Fertigstellung des Prototyps und enthält dann<br />
die endgültigen Definitionen für Typografie, Stand, Farbe etc., so<br />
wie sie im Stylesheet abgelegt sind. Diese Form ist dann üblich,<br />
wenn <strong>Webdesign</strong>er und Webentwickler die gleiche Person sind.<br />
Natürlich werden dem Auftraggeber am Projektende alle Originaldaten<br />
mit allen eingesetzten Farben, Schriften und Hilfslinien mit<br />
übergeben. Es erleichtert die weitere Bearbeitung jedoch, wenn alle<br />
Angaben in einem Styleguide numerisch und textlich dokumentiert<br />
sind. Dies betrifft die Formatgröße, die standortbestimmenden<br />
Abstände der Hilfslinien für Navigationsbereich, Textanfänge,<br />
Bildpositionen etc., die in Pixelangaben oder in prozentualen<br />
Relationen anzugeben sind.<br />
Werden zur Strukturierung sichtbare oder unsichtbare Tabellen<br />
eingesetzt (gemeint sind hier Tabellendarstellungen nicht der<br />
Einsatz von Layouttabellen), sind auch diese mit Zeilen- und<br />
Spaltenmaßen bzw. Rahmenstärke, Farbe und Text-Randabstand<br />
zu bestimmen. Die eingesetzten Farben werden mit ihren Hexadezimal-<br />
oder RGB-Werten beschrieben; die Typografie wird mit<br />
Schriftart, Schriftgröße, Schriftlage, Schriftschnitt, Zeilenabstand,<br />
Absatzabstand und Farbe bestimmt.<br />
Bei zwei aufeinanderfolgenden<br />
Absätzen verschmelzen margintop<br />
und margin-bottom , sie<br />
werden nicht addiert. D.h. die<br />
Absätze haben einen Abstand<br />
von 10px , nicht 20px .<br />
5.2. Navigation<br />
5.2.1. Hauptnavigation<br />
font-size: 13px;<br />
font-weight: bold;<br />
text-transform: uppercase;<br />
Die Hauptnavigation enthält die oberste Ebene der Navigationsstruktur.<br />
Farben<br />
Hochschulseite: FH-Cyan dunkel<br />
Fachbereichsseiten: # jeweilige Fachbereichsfarbe, ggf. Tonwertabstufung<br />
5.2.2. Unternavigation<br />
5.2.2.a Ebene 1<br />
<br />
<br />
<br />
Portrait <br />
Hochschulleitung<br />
<br />
<br />
Ein aktiver Navigationspunkt der ersten Ebene der Unternavigation<br />
und auch der Rollover werden durch eine farbige Hinterlegung der<br />
Fläche hervorgehoben.<br />
font-size: 13px;<br />
font-weight: bold;<br />
<br />
<br />
<br />
Portrait <br />
Hochschulleitung<br />
<br />
<br />
<br />
Portrait <br />
<br />
Hochschulleitung<br />
<br />
Präsidium <br />
Hochschulrat <br />
<br />
<br />
<br />
<br />
Senat
Change language