Inhaltsbereich

Das große Little Boxes-Buch — Was steht drin?

Bye bye: Das große Little Boxes-Buch

Das große Little Boxes-Buch 
Webseiten gestalten mit HTML & CSS.
Grundlagen, Navigation, Inhalte, YAML und mehr 

Markt + Technik · 800 Seiten (gebunden) · 34,95 €
erschienen am 30. Juni 2011

Der offizielle Nachfolger ist »Einstieg in CSS«

Anhand eines inhaltlichen Überblicks erfahren Sie auf dieser Seite, was in »Das große Little Boxes-Buch« alles drin steht und was sich gegenüber den bisherigen Teilen 1 und 2 alles geändert hat.

Teil I - Die Einführung

Die eigentliche Einführung in Kapitel 1 ist etwas überarbeitet worden. Da heutzutage kaum noch jemand Webseiten mit HTML-Tabellen gestaltet, ist das Thema etwas in den Hintergrund gerückt. Stattdessen wird betont, dass "Die Browser bestimmen was geht". Das war Mitte der 90er mit Netscape, <font> und <table> schon so, und das ist heute bei Themen wie HTML5 und cSS3 wieder (oder noch immer) so. 

Neu ist Kapitel 2 »HTML und CSS im Schnelldurchlauf«, in dem gleich zu Anfang auf wenigen Seiten das Grundprinzip der Zusammenarbeit von HTML und CSS gezeigt wird. Dabei kommen auch gleich wichtige Add-Ons wie die Web Developer Toolbar und Firebug in Aktion. 

Teil II - HTML-Crashkurs — Kästchen erstellen

In Kapitel 3 »Das HTML-Grundgerüst« wird von Anfang an auf HTML5 gebaut. Mit simplem DOCTYPE. Die im Buch benutzte Syntax orientiert sich an XHTML, lässt aber das Leerstelle-Schrägstrich am Ende von leeren Elementen weg.

In Kapitel 4 wird das Layout wie gewohnt mit ganz normalen div-Elemente mit IDs strukturiert. In HTML5 gibt es zwar neue strukturelle Elemente wie header, nav oder footer, die die momentan üblichen div-Elemente mit IDs irgendwann ersetzen werden.

Die Browserunterstützung für die neuen Elemente ist aber noch nicht so breit, dass es sich lohnen würde, sie immer und überallzu nutzen. Für den Zweck dieser Einführung ist es sinnvoller, aktuelle Methoden zu benutzen, die alle Browser problemlos verstehen.

Weiter werden in Kapitel 4 wichtige HTML-Elemente für Überschriften, Text und Listen vorgestellt.

Kapitel 5 komplettiert den HTML-Crashkurs und stellt unter anderem wichtige HTML-Elemente Links und Bilder vor. Am Ende des Kapitels wird die Startseite zur kleinen Site ausgebaut und das HTML validiert.

Teil III CSS-Grundlagen — Kästchen gestalten

Kapitel 6 bis 9 sind gegenüber »Little Boxes Teil 1« aus 2009 nur aktualisiert worden:

  • Kapitel 6 CSS kennenlernen: Schriften, Farben und Hyperlinks
  • Kapitel 7 Selektoren, Einheiten und Farben
  • Kapitel 8 Das Box‑Modell
  • Kapitel 9 Ordnung halten im Stylesheet

Die Erstellung einer horizontalen Navigation mit »display:inline« steht jetzt ebenso in einem Kapitel (K10) wie die der Einbau eines Kontaktformulars (Kapitel 11). In Kapitel 12 werden HTML-Tabellen und die Erstellung einer Druckversion vorgestellt.

Der Abschluss dieses Teils ist Kapitel 13 »Kaskade, Vererbung oder Standardwert«. In dem Kapitel wird beschrieben, wie ein Browser das CSS sieht und dann entscheidet, welche Deklaration zur Gestaltung genommen wird. Wer dieses Kapitel durchgearbeitet hat und die Übersichtsgrafik nachvollziehen kann, dürfte beim Verstehen von CSS einen großen Schritt weiter sein. 

Teil IV CSS-Positionierung — Kästchen verschieben

Auch Kapitel 14 bis 16 in Teil IV haben sich bewährt und sind im Wesentlichen nur aktualisiert worden. 

  • K14 Der Flow und »position«
  • K15 Kästchen verschieben mit »float«
  • K16 Containing Floats: Gefloatete Elemente umschließen

In Kapitel 16 wurden die Techniken zum Einschließen von Floats mit display:table um eine fünfte Variante erweitert

Teil V Mehrspaltige Layouts mit CSS

Teil V widmet sich exklusiv dem Thema »Mehrspaltige CSS-Layouts« und besteht aus vier Kapiteln: 

  • K17 Mehrspaltige Layouts mit »position: absolute« 
  • K18 Floatbasierte mehrspaltige Layouts mit fester Breite
  • K19 Floatbasierte mehrspaltige Layouts mit flexibler Breite
  • K20 Patchwork: Flicken im CSS

Mit diesem Kapitel ist der Grundkurs HTML und CSS abgeschlossen. 

Teil VI HTML und CSS – Vertiefung

Teil VI beginnt mit K21 »Das HTML der Beispielseiten optimieren«. Darin werden Skip-Links, strukturelle Überschriften und die ARIA-Landmarks vorgestellt, die in HTML5 quasi zum Lieferumfang gehören. Abgeschlossen wird das Kapitel mit dem Einfügen eines FavIcon. 

Kapitel 22 heißt »CSS: Zentralisierung und Fundament« und widmet sich der Aufteilung von Styles auf mehrere Stylesheets, die dann mit einem zentralen Stylesheet eingebunden werden. 

In Kapitel 23 geht es um »Das Box-Modell für Fortgeschrittene«, in dem das in Kapitel 8 vorgestellte klassische Box-Modell um einige Aspekte, insbesondere für Inline-Elemente, erweitert wird. 

Zum Abschluss der Vertiefung bietet Kapitel 24 einen Ausblick auf »CSS3 und Selektoren für Fortgeschrittene«. 

Teil VII Navigation gestalten

Teil VII kümmert sich ausführlich um die Gestaltung von Navigationen: 

In Kapitel 25 »Floatbasierte Navigation mit Tabs« wird die in Kapitel 10 erstellte Inline-Navigation in eine floatbasierte Navigation umgewandelt. Der Lerneffekt ist dabei enorm, auch wenn die Navigation genauso aussieht wie vorher. Kapitel 26 erweitert die floatbasierte Tab-Navigation um eine zweite Ebene. 

In Kapitel 27 erstellen Sie eine ganz normale horizontale Navigation (ohne Tabs) mit einem Suchfeld, so ähnlich wie sie hier auf little-boxes.de zu sehen ist. Kapitel 28 nimmt diese horizontale Navigation und baut sie um in eine Dropdown-Navigation. Dabei wird en route die Methode zum Einschließen von Floats geändert und auch Usability-Aspekte kommen nicht zu kurz. 

Last but not least wird in Kapitel 29 eine vertikale Navigation mit zwei Ebenen erstellt. 

Teil VIII Inhalte gestalten

Teil VIII kümmert sich um die Gestaltung von Inhalten. 

Zunächst geht es in Kapitel 30 um den Fließtext. Dabei werden Webfonts erwähnt, Googles Variante gezeigt und bei der Bildbeschriftung gegen Ende des Kapitels auch die HTML5-Elemente figure und figcaption vorgestellt. 

In Kapitel 31 und 32 geht es wie gehabt um runde Ecken per Grafik und die kreative Gestaltung von Listen, bevor der Teil mit Kapitel 33 »Formulare für Fortgeschrittene« zu Ende geht. Darin wird ein etwas aufwendigeres Bestellformular erstellt, mit vorbildlichem HTML und geschicktem CSS-Einsatz. 

Teil IX Das CSS-Framework »YAML«

Der Teil IX zu »YAML« ist völlig neu geschrieben worden. Nach einer allgemeinen Einführung zu »CSS: Spaltenlayouts und Frameworks« in Kapitel 34, gibt es in Kapitel 35 »Das CSS-Framework YAML im Überblick«. Sowohl die HTML- und CSS-Struktur werden hier erläutert. 

In Kapitel 36 werden »Die CSS-Bausteine von YAML« vorgestellt, inklusive der phantastischen und chronisch unterschätzten Subtemplates, und in Kapitel 37 erstellen Sie ein Layoutgerüst mit Hilfe des »YAML Builder«. Endlich hatte ich die Gelegenheit eine Einführung zum »YAML Builder« zu schreiben. Im Sommer 2007, als der zweite Teil von Little Boxes geschrieben wurde, war der Builder nämlich noch nicht fertig. 

Zum Abschluss werden noch ein paar interessante Layoutbeispiele vorgestellt. 

Teil X Die Werkzeugkiste

Im letzten Teil werden in Kapitel 38 »Nützliche Programme« und in Kapitel 39 »Nützliche Websites« vorgestellt. Die Links aus diesen Kapiteln finden Sie auch in der Linksammlung zum Buch bei delicious.com/littleboxes:

Abgeschlossen wird das Buch von einem ausführlichen Stichwortverzeichnis. Und schon sind 800 Seiten voll...