Erstellen eines Layouts

Kurzschreibweise

Die Methode der Schreibweise ist einfach und übersichtlich. Die damit entstandene Zeile wird jeweils mit Command+Alt+Enter abgeschlossen, die Html-Syntax wird von Emmet erstellt.

• Die gewünschte Reihenfolge der Html-Elemente: html head title body div.container ...
• Die Elmente werden ineinander verschachtelt oder untereinander angeordnet,
  die verwendeten Zeichen:
  > (ineinander)
  + (untereinander) verwendet
  ( ) (um die Elemente zu gruppieren)
  Beispiel: html>(head>title)>body erzeugt einen üblichen Html-Container
• { } Die geschweiften Klammern werden benutzt um Inhalte einzufügen
  Beispiel: h1{Titel der Website}
• *3 Werden mehrere Zeilen benötigt, kann mit *X ein Zähler erstellt werden
  Beispiel: nav>ul>li*3 erzeugt ein Nav-Element und eine Liste mit drei Listenelementen
• $ Mit den Dollar-Zeichen kann im Zusammenspiel mit einem Zähler eine Aufzählung erstellt werden
  Beispiel: nav>ul>li*3>a{Seite $} erzeugt eine verlinkte, angeschriebene Navigation
• ... Emmet bietet noch viele weitere Möglichkeiten, für unser Beispiel-Layout sind wir aber mit den oben aufgelisteten Abkürzungen bestens ausgestattet.

Skizze des Layouts

Die schnelle und konsequente Schreibweise mit "Emmet" erfordert eine gute Übersicht. Eine Skizze des gewünschten Layouts kann die gewünschte Kurzschreibweise verdeutlichen.

Diese Skizze zeigt uns die gewünsche Anordnung und Verschachtelung der Html-Elemente

Weiter um den Html-Code mit Hilfe von Emmet zu erzeugen