CSS Webdesign Workshop - Container mit DIV

Home CSS Workshop  weiter CSS Container online erstellen

Wer das fertige Design für Webseiten, welche mit CSS erstellt wurden sehen will, kann oben bei CSS Workshop schauen:

In diesem Workshop geht es um Webdesign und die Gestaltung von modernen barrierefreien Webseiten mit einfachen Layouts mit ein oder zwei Spalten, wo jeweils vier Blöcke oder Container angelegt werden, wobei jeder dieser Bereiche mit div bezeichnet und einer eindeutigen ID benannt wird. Es gibt auch eine Kurzschreibweise statt div id kann man auch so schreiben: #kopfbereich

• Kopf - Der Bereich wo u.a. das Logo hineinkommt
  <div id="kopfbereich"> </div>
• Navigation - Der Bereich der zu den weiterführenden Seiten verlinkt
  <div id="navibereich"> </div>
• Text - Der Inhalt vom Body, der sichtbare Content mit Text mit Fotos, etc.
  <div id="textbereich"> </div>
• Fußzeile - Der Bereich für weitere Informationen und ggf. Links
  <div id="fussbereich"> </div>

Umfasst werden diese vier Container oder Bereich zumeist mit einer Art Gesamtcontainer in der Regel wrapper genannt.
<div id="wrapper"> </div> oder die Kurzform #wrapper

Die Anleitung orientiert sich an dem Buch little boxes Webseiten gestalten mit CSS Grundlagen.
Von dem Autor sind die nachfolgenden Titel verfügbar:

Little Boxes, Teil 1. Webseiten gestalten mit CSS.	Little Boxes, Teil 2. Webseiten gestalten mit CSS.	Die Little Boxes-Box, 2 Bde inkl. CD-ROM