CSS einfach erklärt

Plant man ein neues Webprojekt, ist es sinnvoll, als ersten Schritt das Layout grob zu skizzieren. Hierbei legt man fest, welche Elemente die Seite beinhalten soll (Navigation, Logo, Suche, Content, Footer usw.) und wo diese grundsätzlich angeordnet werden sollen (z. B. die Navigation oben links). Webdesigner bezeichnen solch einen frühen Prototypen als Wireframe oder Mock-Up. Da es in diesem ersten Schritt lediglich um eine Festlegung des konzeptionellen Layouts geht, sollten konkrete Designfragen zunächst vollkommen außen vorbleiben. Umsetzen lassen sich solche Skizzen entweder mit Papier und Stift oder computerbasiert mit zahlreichen Werkzeugen.

Mehr lesen … »

Jeder Browser verfügt zunächst einmal über ein eigenes Standard-Browser-Stylesheet. Darin stehen bestimmte Regeln, die sich zum größten Teil an den Initialwerten der CSS-Empfehlung anlehnen. Das W3C macht hierfür einen Vorschlag, der allerdings nicht normativ ist. Beim Firefox kann man sich diese Datei auch anschauen. Sie heißt html.css und liegt im Programmordner von Firefox im Unterordner “/res” (also z. B. “C:\Programme\Mozilla Firefox\res”). Alternativ kann man in der Adressleiste von Firefox auch “resource:///res/html.css”eintippen. Im Buch bin ich Seite 126 ausführlich auf diese Standard-Stylesheets eingegangen, da sie ein wichtiger Baustein der CSS Kaskade sind. Nur wenn man die Interpretation innerhalb der CSS Kaskade verstanden hat, kann man sich im nächsten Schritt daran wagen, das Zusammenspiel zwischen Kaskade, Vererbung und Initialwerten zu verstehen. Das Verständnis dieser Zusammenhänge ist das Fundament jedes CSS-Designers. Ansonsten wird man immer wieder vor scheinbar unlösbaren Problemen bei der Darstellung stehen.

Mehr lesen … »

Während der Entwicklungsphase einer Homepage konzentriert sich der Entwickler im Regelfall ausschließlich auf die Umsetzung des Layouts. Erst wenn dieser Prozess abgeschlossen ist, erfolgt das Einpflegen von Texten und Bildern, die nicht zum Grundlayout gehören. Da die Fläche aber trotzdem reserviert werden soll, arbeitet man temporär mit Platzhaltern. Im Textbereich greift man hierzu auf sogenannte Blindtexte zurück, für die ich sinnvolle Generatoren bereits in einem früheren Artikel vorgestellt hatte.

Mehr lesen … »

Apple hat für das iPad ein Dokument veröffentlicht, in dem Besonderheiten des iPads für Webdesigner diskutiert werden. Ausgangspunkt der Überlegungen sind zwei Besonderheiten:

Mehr lesen … »

Das Layout von HTML Fließtext ist auf den meisten Websites eine recht langweilige Angelegenheit. Gerne würde mancher Webdesigner auf die aus dem Printbereich bekanten Layoutmöglichkeiten zurückgreifen. So ist es beim Desktop-Publishing kein Problem, etwa runden Text um ein rundes Bild herumfließen zu lassen. Bei Verwendung der CSS-Eigenschaft float fließt der Text zwar um das Bild herum, allerdings wieder in eckiger Form. Das verwundert nicht, denn Websites bestehen nun mal aus viereckigen Kästen, die übereinander, nebeneinander oder ineinander gestapelt werden.

Mehr lesen … »