Webseiten-Layout mit CSS: Der perfekte Einstieg in Cascading Style Sheets

Stichwortverzeichnis

Vorwort

Worum geht es in diesem Buch?

Dieses Buch will die Grundlagen des Webdesigns mit CSS vermitteln. Es ist jedoch kein klassisches Lehrbuch, von denen es bereits Dutzende gibt. Es will vielmehr ein »Mitmach-Buch« sein. Es zeigt zwar fertige Lösungen auf, bei denen es sich um in der Praxis oft benötigte (Teil)Layouts handelt. Rein theoretisch können sie direkt in Ihre Webprojekte übernommen werden. Aber eigentlich sind es Startpunkte, die Ihnen ein Gefühl für HTML und CSS geben sollen. Sie erklären den theoretischen Hintergrund und zeigen den Einsatz in der Praxis. Aber trotz allem werden sie erst durch kreative Weiterverwendung zum Leben erweckt.

Eine Warnung: Wer eine Aufzählung aller CSS-Eigenschaften und der zugrunde liegenden HTML-Technik mit allen möglichen Einstellungen und Varianten erwartet, wird enttäuscht sein. Ich schreibe hier über den praktischen Einsatz von HTML und CSS. Daher verwende ich auch nicht alle Tags oder CSS-Eigenschaften, sondern beschränke mich auf häufig benutzte Tags und Befehle.

Im Web treffen wir auf viele verschiedene Betriebssysteme und Browser in unterschiedlichen Versionen. Ideal wäre es, wenn alle diese Kombinationen unser Design identisch darstellen würden. Aber leider ist dies ganz und gar nicht so. Daher müssen wir versuchen, die einzelnen Browser so zu unterstützen (mit der Art unserer Codierung), dass sie eine (fast) gleiche Darstellung der Website erzeugen. Leider würde die Unterstützung der gesamten Palette verfügbarer Browser einen nicht zu vertretenden Aufwand im Design erzeugen. Daher beschränken wir uns auf eine Auswahl derjenigen Browser, die derzeit hauptsächlich verwendet werden.

Dazu wurden Erhebungen namhafter Webanalysten[1] zu Rate gezogen. Davon ausgehend beschränken wir uns auf die Browser mit mehr als 5 % Marktanteil und halten so den Aufwand für die Codierung in einem vertretbaren Rahmen. In diesem Buch konzentrieren wir uns auf die Versionen 7 und 8 des Internet Explorers, auf die Versionen 3.0 bis 3.6 von Firefox und auf den Safari 4.0. Die Versionen 6 und älter des Internet Explorer lassen wir außen vor. Da Websites zum Teil mit sehr hohem Aufwand an diese Browservarianten angepasst werden mussten, sollten wir nicht allzu traurig darüber sein, dass der IE 6 und älter bei den Anwendern langsam ausstirbt. Sofern es gravierende Abweichungen in der Darstellung zwischen den einzelnen Browsern gibt, werde ich darauf hinweisen und einen Trick[2] zur korrekten Darstellung anbieten.

Das Kapitel 1 bietet einen ersten Überblick. Wir lernen einige Grundregeln für Webdesign kennen und schließen damit einige häufig auftretenden Fehlerquellen im technischen Bereich des Designs aus.

Das Kapitel 2 beschäftigt sich mit den HTML-Elementen. Wir lernen die wichtigsten Tags und ihre Verwendung kennen. Diese werden wir in den folgenden Kapiteln einsetzen und formatieren. Dieses Kapitel können Sie als Nachschlagewerk für die späteren Formatierungen benutzen. Da es sich bei den Beispielen in diesem Kapitel noch nicht um schwierigere Probleme handelt, benötigen wir für die Arbeit nur einen einfachen Texteditor. Eine Entwicklungsumgebung brauchen wir erst später.

In Kapitel 3 installieren wir unsere Entwicklungsumgebung. Diese werden wir hier konfigurieren und im folgenden Abschnitt intensiv benutzen. Zusätzlich werden wir für den Firefox-Browser das eine oder andere Add-On installieren, damit wir uns bei der Arbeit leichter tun.

Das Kapitel 4 behandelt den großen Komplex des Designs mit Cascading Style Sheets. Hier werden wir eine Fülle von Formatierungsmöglichkeiten kennenlernen und in einzelnen Beispielen umsetzen.

Im Anhang finden Sie weiterführende Informationen und auch den gesamten Quelltext aller im Buch vorgestellten Beispiele.

Herunterladen der Beispielcodes zum Buch

Wenn Sie die Franzis-Website unter der Adresse http://www.buch.cd besuchen und dort die letzten fünf Ziffern der ISBN dieses Buches samt Bindestrich eingeben, können Sie alle Beispielcodes und sonstigen Ressourcen zu diesem Buch herunterladen. Die verfügbaren Dateien werden nach der erfolgreichen Anmeldung angezeigt.

Berichtigungen und Feedback

Obwohl alle Beteiligten mit größter Sorgfalt vorgehen, um die Richtigkeit der Inhalte sicherzustellen, passieren mitunter Fehler. Wenn Sie einen Fehler in diesem Buch entdecken, ob im Text oder im Quellcode, bin ich für eine Mitteilung sehr dankbar. So können Sie anderen Lesern Ärger ersparen und mithelfen, die nachfolgende Version des Buches zu verbessern. Wenn Sie irgendeinen Druckfehler finden, teilen Sie ihn mir bitte per E-Mail an buch@guru-20.info mit. Aktualisierungen sowie Verbesserungen des Buches werde ich auf meinem Blog (http://www.guru-20.info) veröffentlichen.

Ich würde mich über Reaktionen und Anregungen sehr freuen. Darüber hinaus sind Lob und Kritik sehr willkommen. Sie erreichen mich unter folgender Adresse: gull@guru-20.info.

Herzlichen Dank vorab!

Ihr

Clemens Gull

[1]

Beispielsweise: http://www.webmasterpro.de/portal/webanalyse-aktuell.html

[2]

einen sogenannten Hack

1  Do’s & Dont’s im Webdesign

Im Webdesign gibt es einiges, was wir zwar tun könnten, aber möglichst vermeiden sollen. Wenn wir uns an diese ungeschriebenen Gesetze halten, ersparen wir uns einige Probleme bei unseren Websites. Beginnen wir mit einigen formalen Vorgaben:

Datei- und Verzeichnisnamen sollten:

keine Leerzeichen enthalten

nur aus Buchstaben (a – z und A – Z) und Ziffern bestehen

Unterstriche (_) sind erlaubt

Groß-/Kleinschreibung ist wichtig

Datei- und Verzeichnisnamen sollten »klingende« Namen verwenden.

Da wir das Betriebssystem eines Webservers nicht vorab kennen, sollten wir uns auf den kleinsten gemeinsamen Nenner bei den Namen einigen. Denn ein Unix-System speichert die Zeichen anders als ein Windows-System. So unterscheiden UNIX-Systeme bei der Groß-/Kleinschreibung und Windows-Systeme nicht. Allein dadurch können uns einige Probleme entstehen, wenn wir uns nicht an die Regeln halten.

Struktur

Dateien sollten immer logisch gruppiert werden:

Bilder in das Verzeichnis \images

Style Sheets in das Verzeichnis \css

JavaScript-Skripte in das Verzeichnis \js

Für jedes Website-Thema sollte ein Verzeichnis erstellt werden:

Beispiel-Fotos, Grafiken, Zeichnungen, Skulpturen

Die Verzeichnisstruktur sollte nicht mehr als drei Ebenen aufweisen.

In jedem Verzeichnis sollte eine Datei namens index.html stehen.

Verweise auf Dateien erfolgen immer mit einer relativen Pfadangabe (dazu gleich mehr).

Eine gute und logische Struktur erleichtert uns die Arbeit an einer Website immens. Wenn wir bei allen unseren Sites die gleichen Verzeichnisse anlegen und verwenden, fällt uns die Arbeit leichter.

Webserver sind nichts anderes als Computer, die auf eine Datenanforderung reagieren. Wenn ein Anwender eine Domäne verlangt, so ist das für den Webserver ein Verzeichnis auf seiner Festplatte. Findet der Server eine Datei mit dem Namen index.html, so schickt er diese an den anfordernden Browser. Fehlt diese Datei jedoch, zeigt der Webserver den Inhalt des Verzeichnisses als Liste an. Und gerade das wollen wir den Benutzern unserer Website nicht zeigen. Daher sollten wir in jedem Verzeichnis eine Datei namens index.html anlegen.

1.1  Referenzieren von Dateien

Webseiten bestehen ja im Grunde nur aus reinem Text, aber trotzdem sehen wir Bilder, hören Sound oder es wird ein Video abgespielt. Zusätzlich gibt es noch Hyperlinks, CSS-Dateien oder externe JavaScript-Dateien. Auf all diese Dateien oder Links müssen wir Referenzen einrichten. Über eine solche Referenz binden wir externe Medien in unsere textbasierten Webseiten ein. Referenzen entstehen zwar immer auf die gleiche Art, aber trotzdem müssen wir sie komplett verstanden haben, um sie zu beherrschen.

Wir müssen also Wege (auch Pfade genannt) in den verschiedensten Attributen (beispielsweise href=... beim a-Tag oder URL(...) in CSS) bei HTML und CSS angeben.

1.2  Auf fremde Quellen referenzieren

Die einfachste Methode ist die absolute Adressierung auf eine fremde Quelle. Damit ist gemeint, dass der exakte Ort der Zieldatei bekannt ist und auf diese verwiesen werden kann.

Beispiel

http://www.google.at

http://www.example.org/

http://www.example.org/index.html

http://www.example.org/index-html#impressum

http://www.example.org/kontakte.pdf

http://www.example.org/images/logo.gif

Diese Art der Referenzierung (Adressierung) nennen wir absolut.

In der eigenen Website verweisen

Innerhalb der eigenen Website können wir natürlich auch mit absoluten Referenzen arbeiten, aber es ist nicht üblich. Besser arbeiten wir mit relativen Referenzen.

Bei dieser Art werden einfach der Domänenname und das Protokoll weggelassen. Wir navigieren also mit der Pfadangabe durch die Verzeichnisstruktur der eigenen Website. Relativ wird dies genannt, da der Speicherort der aktuellen Datei als Ausgangspunkt verwendet wird und die Referenz relativ zu diesem Punkt erfolgt. Bei diesem Beispiel gehen wir immer vom Wurzelverzeichnis (root) aus. Damit ist die Datei gemeint, die die Referenz enthält. Nehmen wir an, diese Datei hat den Namen portfolio.html und steht im Hauptverzeichnis unserer Domäne.

Beispiel: Verweis auf Startseite

Sobald wir von der Datei auf die Startseite index.html verweisen wollen, z. B. mit einem Hyperlink, müssen wir diese Schreibweise verwenden:

/index.html

Beispiel: Verweis auf Bild in Unterverzeichnis

Wollen wir in der Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz so aufbauen:

/images/logo.gif

Bei dem folgenden Beispiel gehen wir davon aus, dass wir uns in der Datei info.html im Unterverzeichnis /standard befinden.

Beispiel: Verweis auf Datei in höherem Verzeichnis

Sobald wir von der Datei auf die Startseite verweisen wollen, z. B. mit einem Hyperlink, müssen wir die folgende Schreibweise verwenden. Wir können mit zwei aufeinanderfolgenden Punkten eine Verzeichnisebene höher wechseln. Wir müssen so vorgehen, da wir uns ja in einem Unterverzeichnis des Hauptverzeichnisses befinden.

../index.html

Beispiel: Verweis auf Bild in höherem Verzeichnis

Wollen wir in der HTML-Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz wie folgt aufbauen. Zuerst wechseln wir mit den zwei Punkten ein Verzeichnis höher (in das Hauptverzeichnis) und danach in das Verzeichnis images, das unterhalb des Hauptverzeichnisses angesiedelt ist.

../images/logo.gif

Bei den folgendenen Beispielen gehen wir davon aus, dass die Datei galerie.html im Verzeichnis /photos/paris gespeichert ist.

Beispiel: Verweis auf Startseite in höherem Verzeichnis

Sobald wir von der Datei auf die Startseite verweisen wollen, z. B. mit einem Hyperlink, müssen wir diese Schreibweise verwenden. Mit einem einfachen Schrägstrich am Anfang wechseln wir immer ins Hauptverzeichnis.

/index.html

Beispiel: Verweis auf Bild in entferntem Ordner

Wollen wir in der HTML-Datei ein Bild anzeigen, das im Unterverzeichnis /images abgelegt wurde, müssen wir die Referenz wie folgt aufbauen. Zuerst wechseln wir mit den zwei Punkten ein Verzeichnis höher, ins Verzeichnis /photos. Danach geht es wieder eine Stufe höher ins Hauptverzeichnis und in der Folge ins Verzeichnis images, das unterhalb des Hauptverzeichnisses angesiedelt ist.

../../images/logo.gif

Beispiel: Verweis auf Indexseite in höherem Verzeichnis

Mit dieser Referenz zeigen wir die Startseite des Verzeichnisses /photos an.

../index.html

AUTONUM Übung: Referenzieren

Folgende Verzeichnisstruktur ist gegeben:

|-index.html

|-+images

| | logo.gif

| | back.png

|-+css

| | main.css

|-+photos

| | album1.html

| |-+album1

| | | bild1.jpg

| | | bild2.jpg

| | | subalbum1.html

| |-+subalbum1

| | | bild5.jpg

| | | bild6.jpg

Wir wollen von den verschiedenen HTML-Dateien auf CSS-Dateien oder Bilder referenzieren. Dazu benötigen wir die Pfadangabe für die passende Datei. Ermitteln Sie den relativen Pfad für die Referenz auf

die Datei main.css in der Datei index.html

die Dateien bild1.jpg und bild2.jpg in der Datei album1.html

die Datei logo.gif in der Datei subalbum1.html

die Dateien bild5.jpg und bild6.jpg in der Datei subalbum1.html

Die Lösungen für diese Übung lauten:

css/main.css

album1/bild1.jpg und album1/bild2.jpg

../../images/logo.gif

../subalbum1/bild5.jpg und ../subalbum1/bild6.jpg

2  Die Grundlage: Hypertext Markup Language (HTML)

Tags sind Marker in HTML. Sie dienen als Formatierungskommandos einer HTML-Seite. In der Folge werden wir die Grundregeln für Tags kennenlernen. Bei den folgenden Beschreibungen wird nur auf die Besonderheiten eingegangen. Die hier aufgeführten Grundregeln gelten aber immer.

2.1  Grundregeln

Allgemeine Merkmale

Alle HTML-Tags werden von spitzen Klammern < und > umschlossen.

Ein Tag besteht immer aus seinem Namen und kann im öffnenden Tag Attribute enthalten.

Tags werden in HTML immer nach dem LIFO-Prinzip (Last-In, First-Out) gesetzt.

Beispiel einer gültigen Tag-Folge:

...

Beispiel einer ungültigen Tag-Folge:

2.2  HTML-Tags im praktischen Einsatz

Tags werden immer in Kleinbuchstaben geschrieben.

Der öffnende Tag lautet immer gleich wie der schließende.

...

Der schließende Tag beginnt immer mit einem Schrägstrich.

...

Hat der Tag keinen schließenden Partner, wird im öffnenden Tag der Schrägstrich vor der schließenden spitzen Klammer gesetzt.

Werte für Attribute in einem Tag werden immer in Anführungszeichen gesetzt.

...> ...

2.3  Arten von Tags

Inline-Elemente

Diese Tags werden vom Browser so eingesetzt, dass sie den Textfluss nicht unterbrechen, also keinen Umbruch einfügen.

Block-Elemente

Diese Tags erzeugen im Browser einen eigenen Block. Wir können uns das optisch als ein Rechteck auf der Seite vorstellen. Meistens wird unterhalb des Elements auch noch automatisch eine Leerzeile eingefügt.

2.4  Attribute bei den Tags

Allgemeines

Jeder Tag kann über zusätzliche Attribute verfügen. Manche sind zum Steuern der Anzeige da, andere werden für CSS oder JavaScript benötigt. Weitere sind einfach sinnvoll, um Menschen mit Einschränkungen das Benutzen der Website zu erleichtern.

Kernattribute

Diese Attribute können bei fast allen Tags verwendet werden. Falls in der Folge bei einem HTML-Tag nichts anderes vermerkt ist, können die folgenden Attribute verwendet werden.

id

Gibt dem Element eine eindeutige Kennung[1]. Mit dieser kann es mittels CSS oder JavaScript angesprochen werden.

class

Ordnet dem Element eine oder mehrere Klassen aus einem Style Sheet zu.

style

Wendet einen bestimmten CSS-Stil auf dieses Element an.

title

Gibt dem HTML-Element