freeQnet-Logo
freeQnet

Blogdesign für Laien Layout-Grundlagen

Wie vor einiger Zeit ja schon angekündigt, starte ich nun eine Serie von Tutorials zum Thema Blogdesign. Ziel der Serie ist es, Bloggern mit rudimentären HTML- und CSS-Kenntnissen das Wissen zu vermitteln, wie sie ein simples, schönes Layout basteln können, ohne ein ausgewachsener Designer mit guten Photoshop-Wissen zu sein. Denn auch mit simplen CSS-Tricks lässt sich ohne Einsatz aufwendiger Grafiken ein edles Layout basteln.

Die Serie wird nach und nach die Entstehung eines vorerst vereinfachten Blog-Layouts begleiten. Später gibt es vielleicht noch ein Folge-Tutorial über die Umsetzung in WordPress. Ich werde anhand von Beispiel-Dateien, die es am Ende jedes Beitrags zum Download gibt, erläutern, wie man sein Layout vom ersten HTML bis zu den späteren CSS-Feinheiten gestaltet bekommt und dabei auch hier und da auf Dinge wie Typografie, Abstände etc. eingehen.

Beginnen wir heute also erstmal mit den Grundlagen des Layouts. Wir werden als erstes das HTML-Grundgerüst erstellen und dann per CSS dafür sorgen, dass alles an seinen Platz kommt!

benötigtes Vorwissen

Theoretisch sollte jeder dieses Tutorial einigermaßen verfolgen können. Allerdings ist es zum besseren Verständnis und der Verinnerlichung der Tipps sehr sinnvoll, sich schon ein wenig mit HTML und CSS beschäftigt und die Grundlagen der Syntax verstanden zu haben. Ansonsten werden die ganzen Klammern und Begriffe eher verwirren als helfen. Wer das noch nicht getan hat, findet in den folgenden Links die richtigen Anlaufstellen:

  • SelfHTML – seit vielen Jahren die absolute Referenz als Nachschlagewerk für HTML und CSS.
  • HTML.net – wer einfach verständliche Tutorials zur Einführung in HTML und CSS sucht, wird hier fündig.

Das Layout skizzieren

So, wo wir jetzt entsprechend vorbereitet sind, können wir loslegen. Am Anfang eines jeden Layouts steht in der Regel eine grobe Skizze, wie man das Layout überhaupt aufziehen will. Dies ist wichtig, um sich im Klaren zu sein, wie die Seite später aufgebaut sein soll und um frühzeitig Fallstricke zu erkennen.

Für dieses Tutorial habe ich ein typisches Blog-Layout mit Titel, Navigation, Content-Bereich, Sidebar und Footer gewählt. Der Aufbau soll folgendem schnell in Paint erstelltem Beispiel entsprechen:

Layout-Gerüst

Das HTML-Gerüst

Wissen wir erstmal, was wir wollen, können wir uns daran machen, das Layout in HTML zu erstellen. Hier erstmal der Quellcode, den ich danach erläutern werde:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
< !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de">
<head>
	<title>Blogdesign f&uuml;r Laien - Beispiel 1</title>
</head>
<body>
	<div id="site">
 
		<div id="header">
			<p>Blogdesign f&uuml;r Laien - Beispiel 1</p>
		</div><!-- header -->
		<div id="nav">
			<ul>
				<li><a href="#" id="button-home" class="navbutton">[home]</a></li>
				<li><a href="#" id="button-archiv" class="navbutton">[Archiv]</a></li>
				<li><a href="#" id="button-impressum" class="navbutton">[Impressum]</a></li>
			</ul>
		</div><!-- nav -->
 
		<div id="content">
			<div class="entry">
				<h1 class="entry-title">Ein absolut interessanter Beitrag!</h1>
				<div class="entry-date">01.06.2009 14:00</div>
				<div class="entry-content">
					<p>Dies ist ein Testbeitrag. Der Inhalt tut nichts zur Sache sondern dient nur der Veranschaulichung.</p>
				</div>
			</div><!-- entry -->
 
			<div class="entry">
				<h1 class="entry-title">Und noch einer!</h1>
				<div class="entry-date">01.06.2009 13:00</div>
				<div class="entry-content">
					<p>Dies ist ein Testbeitrag. Der Inhalt tut nichts zur Sache sondern dient nur der Veranschaulichung.</p>
				</div>
			</div><!-- entry -->
		</div><!-- content -->
 
		<div id="sidebar">
			<h2>Sidebar</h2>
			<p>Der Inhalt der Sidebar ist derzeit noch nicht großartig von Interesse. Sie ist nur schonmal da, um die ersten Layoutgrundlagen zu veranschaulichen.</p>
		</div><!-- sidebar -->	
 
		<div id="footer">
			<h2>Footer</h2>
			<p>Der Inhalt des Footers ist derzeit noch nicht großartig von Interesse. Sie ist nur schonmal da, um die ersten Layoutgrundlagen zu veranschaulichen.</p>
		</div><!-- footer -->
	</div><!-- site -->
</body>
</html>

Wer sich etwas mit HTML auskennt, wird sich schnell zurecht finden. Am Anfang steht die Deklaration des Dokumenttyps. Was das genau bedeutet, wird auf SelfHTML gut erklärt. Ich verwende hier den Typ XHTML 1.0 Transitional, weil ich durch XHTML etwas striktere und in meinen Augen sinnvollere Regeln in der Syntax habe, als bei reinem HTML (z.B. immer ein schließendes Tag, Kleinschreibung etc.) und Transitional grad bei WordPress einigen Plugins und eingebetteten Codes von Seiten wie Youtube etc entgegenkommt, da diese sich oft nicht ganz an die Strict-Regeln halten.

Im Head-Bereich wird einfach der Titel definiert. Auf weitere Head-Tags wie Meta-Angaben etc gehe ich vorerst nicht ein, um es simpel zu halten. Viel interessanter wird es aber schon im Body-Bereich.

Hier finden wir zu allererst ein DIV mit dem Namen “site”, das die gesamte Seite umschließt. Dieses dient später vor allem dazu, das Layout zu zentrieren. Darin befinden sich wiederum die DIVs “header”, “nav”, “content”, “sidebar” und “footer”. Im schließenden Tag jedes dieser DIVs habe ich übrigens einen Kommentar mit der ID eingefügt, um später bei viel Inhalt einfacher nachzuvollziehen, welcher DIV denn hier gerade geschlossen wird.

Gehen wir die DIVs nochmal kurz im Detail durch:

header

Ganz simpel der Kopfbereich des Blogs. Hier wird erstmal nur der Titel angezeigt. Ich habe absichtlich kein Überschriften-Tag (H1 o.ä.) verwendet, da diese für den eigentlichen Bloginhalt verwendet werden sollten.

nav

Die Navigation besteht aus einer einfachen ungeordneten Liste mit Links. Die sehen ohne CSS zwar erstmal nicht sehr nach einer Navigation aus, werden von uns aber in einer späteren Ausgabe noch schick gestylet!

content

Der eigentliche Inhalt der Seite. Jeder Blogeintrag wird hier nochmal von einem DIV der Klasse “entry” umschlossen. Wichtig ist hier, dass nur “class” und nicht “id” verwendet wird, da in der HTML-Syntax eine ID nur einmal vorkommen darf, es aber ja mehrere Beiträge pro Seite geben wird! Um den genauen Inhalt der Beiträge kümmern wir uns später!

sidebar

Die Sidebar wird in Blogs idR. für eine erweiterte Navigation zu den neuesten Kommentaren, dem Archiv oder auch weiterführende Inhalte etc verwendet. Hier im Beispiel bleibt sie erstmal bis auf dem Platzhalter-Text leer.

footer

Der Footer wird oft ähnlich wie die Sidebar verwendet, kann aber auch einfach nur Copyright-Hinweise enthalten. Damit setzen wir uns aber auch später auseinander!

Hässliches Entlein

Lädt man eine HTML-Datei mit diesem Inhalt (vgl. Datei beispiel-1a.html aus der zip-Datei) nun in den Webbrowser, sieht sie noch so rein gar nicht so aus, wie unsere Skizze. Das soll sie aber auch noch gar nicht, denn das Grundprinzip von HTML und CSS ist die Trennung von Inhalt (HTML) und Layout (CSS). Das Aussehen wird erst im CSS festgelegt und kann dort mit dem selben HTML-Inhalt auch jederzeit geändert werden, ohne am HTML etwas zu ändern.

Ein Tipp zur Benennung der CSS-Klassen und IDs der HTML-Objekte sollte hier auch möglichst eingehalten werden: Verwendet möglichst Bezeichnungen, die den Inhalt und nicht das Aussehen beschreiben! Verwendet man z.B. eine Klasse namens “rot”, um Texte rot darzustellen und will später das Layout auf andere Farben ändern, ist es doch ziemlich blöd, wenn diese Klasse später eine blaue Farbe hat, aber noch “rot” heißt, oder? Deshalb sollte man möglichst beschreiben, was diese Signalfarbe bedeutet, also z.B. “wichtig” oder “achtung”. So benannte Klassen behalten ihre Gültigkeit, sofern man sie nicht missbraucht.

Das Stylesheet

Hauchen wir dem Layout nun mal etwas stilistisches Leben ein. Ich werde diesmal den Quellcode des Stylesheets in Einzelteilen posten und jeweils etwas dazu schreiben. Das komplette CSS-Script findet ihr unter dem Namen “style.css” in der zip-Datei im Anhang des Beitrags!

html, body

1
2
3
4
5
6
7
8
9
html, body {
	border: 0;
	margin: 0;
	padding: 0;
}
 
body {
	font: 11pt/150% "Palatino Linotype",Georgia,"Times New Roman",serif;
}

Ich verwendet hier die vereinfachte Syntax von CSS, um wertvollen Speicher zu sparen. So lege ich z.B. die für das HTML- und das BODY-Tag gleichen Styles zusammen und verwende auch für Abstände etc die einfache Variante, da alle Ränder die gleiche Größe haben sollen.

Erstmal werden hier ein paar Eigenheiten der verschiedenen Browser resettet, um die Anzeige in jedem Browser anzugleichen. Dazu setze ich erstmal pauschal alle Ränder, Innenabstände und Rahmen im HTML- und im BODY-Tag auf 0.

Für das BODY-Tag definiere ich zudem schonmal die Schrift, um alles gleich etwas schöner aussehen zu lassen. 11 Punkte bei einer Zeilenhöhe von 150% ist gut lesbar. Die Schriftart lege ich als “Palatino Linotype” fest, gebe aber auch kommagetrennt einige Ausweichschriften an, falls diese auf dem Rechner nicht installiert sein sollte. Die Schrift-Formatierung werde ich in einem späteren Beitrag auf alle Fälle nochmal genauer unter die Lupe nehmen und Typografie-Grundlagen nennen etc. Für’s erste soll dies hier reichen!

#site

11
12
13
14
#site {
	width: 940px;
	margin: 0 auto;
}

Wie vorhin schon kurz angedeutet, dient das DIV mit der ID “site” erstmal dazu, die Seite zu zentrieren. Da man beim gesamten Seiteninhalt anders als bei Texten oder Bildern nicht mit dem Attribut “text-align” arbeiten kann, nutzen wir den Trick, den Rand horizontal auf “auto” zu setzen[1]. In Verbindung mit einer festen Seitenbreite (hier 940px) passt der Browser den linken und rechten Rand so immer automatisch an und der Inhalt bleibt zentriert.

Die Breite 940 habe ich übrigens deshalb gewählt, weil heutzutage in gutem Webdesign davon ausgegangen wird, dass die Mindest-Bildschirmauflösung der Besucher bei 1024×768 liegt. Da man noch etwas Rand für die Scrollbar und den Rahmen des Browserfensters abrechnen muss und die Seite zudem auf dieser Mindestauflösung nicht zu gedrungen aussehen soll, ist 940 ein guter Wert!

#header

16
17
18
19
20
21
22
#header {
	width: 920px;
	height: 100px;
	display: block;
	overflow: hidden;
	padding: 10px;
}

Der Header wird ziemlich klassisch eingerichtet. Ich habe erstmal nur Höhe und Breite sowie die Innenabstände angegeben. Mit “display: block” wird sichergestellt, dass das DIV auch wirklich ein rechteckiger Block ist und “overflow: hidden” sorgt dafür, dass bei möglicherweise zu großen Inhalt für die angegebene Breite und Höhe das DIV nicht automatisch vergrößert wird. Der Inhalt wird so an den Grenzen einfach abgeschnitten. So sorgen wir dafür, dass das Layout nicht zerschießt.

#content

24
25
26
27
28
29
#content {
	float: left;
	width: 600px;
	overflow: hidden;
	padding: 10px;
}

Der Inhalt bekommt nur eine Breite, da die Höhe ja variabel je nach Länge des Inhalts anders sein kann. Padding und Overflow kennen wir schon aus dem Header, neu ist hier die Angabe “float: left”. Diese sorgt wie die Bezeichnung schon andeutet, dafür, dass das Content-DIV links ausgerichtet ist und nachfolgende Inhalte rechts daran vorbeifließen können. Diesen Effekt kennt man z.B. von Bildern, die links oder rechts von Text umgeben sind.

#sidebar

31
32
33
34
35
36
#sidebar {
	float: right;
	width: 300px;
	overflow: hidden;
	padding: 10px;
}

Mit der Sidebar machen wir grob gesagt das selbe wie mit dem Content – nur wird diesmal “float: right” angegeben, eben um die Sidebar rechtsbündig zu halten.

Damit dieses Layout so auch funktioniert, muss sichergestellt sein, dass die Breiten inkl. der Innenabstände, Ränder und Rahmen nicht größer ist, als die Gesamtbreite des äußeren DIVs (hier das DIV mit der ID “site”). Ein Beispiel:

width + padding + margin + border darf bei beiden nebeneinander gedachten DIVs hier höchstens 940 ergeben! Hier wären das 600 + 20 (Padding links und rechts!) + 0 (Margin und Border ist keiner angegeben) + 300 + 20 + 0 = 940. Hätten wir hier auch nur einen Pixel zu viel, würde die Sidebar rechts unterhalb des Inhalts anfangen, da sie nicht mehr daneben passt!

#footer

38
39
40
41
42
43
#footer {
	width: 920px;
	overflow: hidden;
	padding: 10px;
	clear: both;
}

Der Footer wird wiederum ganz simpel gestaltet, da er ja einfach nur unten drunter angezeigt werden soll. Da er schon eine Breite hat, die ausschließt, dass er rechts oder links um Content oder Sidebar herumfließen kann, muss nicht explizit angegeben werden, dass der Footer das nicht tun soll. Um alle Eventualitäten aber auszuschließen und euch noch kurz das “clear”-Attribut zu zeigen, tun wir es dennoch. Mit “clear: both” wird nämlich sichergestellt, dass die Float-Eigenschaft der vorigen Elemente hier beendet wird und das betroffenen Element auf alle Fälle unterhalb der vorigen angezeigt wird.

Den Style sichtbar machen

Die reine Stylesheet-Datei nun mit dem oben geschilderten Inhalten erstellt zu haben, reicht noch nicht ganz aus, um sie auch auf die HTML-Datei anzuwenden. Dazu benötigen wir noch eine kleine Angabe im HEAD-Bereich der HTML-Datei, am besten direkt unter dem TITLE:

5
	<link rel="stylesheet" type="text/css" href="style.css"/>

Angenommen, die Datei style.css liegt im selben Verzeichnis wie die HTML-Datei, wird sie so zugeordnet und kann vom Browser verwendet werden. Das Ergebnis unserer Mühen sehen wir nun in der Datei “beispiel-1b.html” in der zip-Datei.

Zusammenfassung

Hiermit beenden wir den ersten Teil der Serie erstmal. Wir haben nun aus einer Skizze ein HTML-Gerüst entwickelt und es mit CSS schonmal grundlegend in Form gebracht. Aufmerksame Leser werden bemerkt haben, dass wir für das Navigations-DIV gar keinen Style festgelegt haben. Das kommt später und dient hier erstmal zur Demonstration, dass nicht unbedingt alles mit einem Style versehen sein muss.

Hier erstmal die schon im Text angesprochene zip-Datei mit den Beispielen. Einfach in einem beliebigen Ordner entpacken und auf die HTML-Dateien doppelklicken, um sie in eurem Browser zu öffnen. Beispieldateien Teil 1

Ich hoffe, ich hab euch hiermit schon mal weiter geholfen und freue mich auf eure Kommentare. Vor allem ist mir konstruktive Kritik sehr wichtig, da dies mein erstes Tutorial in der Art ist und ich sicher noch einiges verbessern kann. War meine Schreibe hilfreich? Habe ich euch mit bestimmten Begriffen oder Umschreibungen verwirrt? Sind die Code-Beispiele nachvollziehbar? Fehlt an der einen oder anderen Stelle eine Erläuterung, die ihr euch noch gewünscht hättet? Sagt es mir! Ich werde dann in den folgenden Beiträgen drauf achten und diesen hier auch entsprechend umschreiben.

Ausblick

In den kommenden Beiträgen gehen wir mehr ins CSS-Eingemachte und werden erstmal Header und Navigation herausputzen. Nach und nach bekommen aber alle Elemente ihr Makeover und sollen am Ende ohne viel Einsatz von Grafiken nur durch einige CSS-Tricks edel und komfortabel sein. Seid gespannt, was noch kommt, aber rechnet nicht in wenigen Tagen schon mit einem zweiten Beitrag. Ein paar (hoffentlich wenige) Wochen wird’s sicher dauern, denn so ein aufwendiger Beitrag ist nicht mal eben geschrieben 😉

  1. die 0 davor steht für den vertikalen Rand. Anders als beim Formatieren des HTML-Tags vorhin sind hier vertikal und horizontal getrennt angegeben, da diese sich von einander unterscheiden []

Kommentare

1

Wahnsinn! Da hast du dir ein wirklich umfangreiches Thema zur Brust genommen. Und wie du schon in deinem abschließenden Absatz andeutest, wird es sicherlich eine Weile dauern, bis die folgenden Artikel kommen werden.

Sollten diese jedoch genauso umfangreich und -meiner Meinung nach auch für Laien- leicht verständlich sein, dann lohnt sich das Warten für Interessierte auf jeden Fall!

Ich wünsche dir jedenfalls viel Erfolg mit dieser sicherlich umfangreich werdenden Serie und werde die kommenden Artikel hierzu gewiss im Auge behalten 😉 Der Start ist dir jedenfalls schon einmal sehr gut gelungen.

geschrieben von Sascha
antworten  •  Link
2

Danke! Dann scheint’s ja schon mal verständlich geschrieben zu sein :)

geschrieben von beetFreeQ
antworten  •  Link
3

Wow, sehr ausführlicher und verständlicher Artikel. Klasse!
Ich bin jetzt wohl nicht der adressierte Laie, trotzdem toll :-) Bin auf die weiteren gespannt. (Besonders wenn es dann daran geht, das fertige Design dazu zu bringen, dass es im IE7 zum Beispiel genau so aussieht 😉 )

geschrieben von David
antworten  •  Link
4

@David: Danke, wenn du das als Profi so siehst, dann freue ich mich umso mehr. Der IE7 wird sicher spannend – vor allem, wenn ich erstmal selbst versuche, das Layout für alle drei wichtigen Browser-Engines zu optimieren. Aber zumindest auf den IE6 werde ich komplett verzichten – der soll endlich mal aussterben 😉

geschrieben von beetFreeQ
antworten  •  Link
5

Ich freue mich auch schon auf den nächsten Teil der Serie. Ich würde mich auch noch als Laien bezeichnen und fande deine Ausführungen aber sehr verständlich und gut geschrieben. Vielen Dank dafür an dieser Stelle an dich! Weiter so, sehr gute Arbeit!

geschrieben von Last Minute
antworten  •  Link
6

Vielen Dank!

geschrieben von beetFreeQ
antworten  •  Link

Trackbacks/Pingbacks

1

[…] her. Der eine oder andere wird sich noch erinnern, dass ich im Sommer 2009 mal mit einer Beitragsserie begann, die sich um Webdesign drehen und vor allem Bloggern ohne viele Vorkenntnisse ein wenig […]

gesendet von Blogdesign für Laien – Update und Ausblick – freeQnet
I smell sex and candy

Marcy Playground

Blogverzeichnis - Blog Verzeichnis bloggerei.de blogoscoop Bloggeramt.de