Übung: Layout 2
Etwas komplexer ist das zweite Layout. Die Anleitung ist als Übung im Umgang mit Emmet gebaut worden. Eine CSS-Datei zum Testen ist bereitgestellt.
Skizze von Layout 2
Die wichtigen Layout-Elemente sind Rot dargestellt, die Grünen Inhalts-Elemente sind zur Verdeutlichung in der Skizze notiert.
Die Kurzbefehle und der daraus erzeugte HTML-Code
Vorbereitung
Erstelle ein neues Projekt in Brackets, indem du einen neuen Ordner auswählst. Erstelle eine neue Datei. Speichere sie als layout2.html
(Zur besseren Übersicht stelle ich jeweils den ganzen HTML-Code dar. Grau = bereits erstellte Code-Fragmente, Schwarz = zusätzlich erzeugte Code-Fragmente.)
1. Der Html-Rumpf
html>(head>title{Layout 2}+link)+body
Kopiere die Zeile in die neue Datei. Command+Alt+Enter erzeugt den HTML-Rumpf, beschreibt das title-Element und fügt das Link-Element für eine externe CSS-Datei dazu.
2. Das Body-Element
div.container>header+(main>article+section.boxes)+footer
Platziere den Cursor im body> füge den Kurzbefehl ein >Command+Alt+Enter erzeugt das Grundlayout:
<html>
<head>
<title>Layout 2</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="container">
<header></header>
<main>
<article></article>
<section class="boxes"></section>
</main>
<footer></footer>
</div>
</body>
</html>
3. Top-Navigation im Header
nav.top>ul>li*3>a{Inhalt $}
Platziere den Cursor im header> füge den Kurzbefehl ein > Command+Alt+Enter erzeugt die Top-Navigation:
<html>
<head>
<title>Layout 2</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="container">
<header>
<nav class="top">
<ul>
<li><a href="#">Inhalt 1</a></li>
<li><a href="#">Inhalt 2</a></li>
<li><a href="#">Inhalt 3</a></li>
</ul>
</nav>
</header>
<main>
<article></article>
<section class="boxes"></section>
</main>
<footer></footer>
</div>
</body>
</html>
4. Titel und Inhalt für 2 Spalten im article
h1{Seitentitel}+p.spalte2{Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.}dsgsdgds
Platziere den Cursor im article> füge den Kurzbefehl ein > Command+Alt+Enter erzeugt Titel und Text-Inhalt:
<html>
<head>
<title>Layout 2</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="container">
<header>
<nav class="top">
<ul>
<li><a href="#">Inhalt 1</a></li>
<li><a href="#">Inhalt 2</a></li>
<li><a href="#">Inhalt 3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Seitentitel</h1>
<p class="spalte2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</article>
<section class="boxes"></section>
</main>
<footer></footer>
</div>
</body>
</html>
5. Die drei Boxen
div.boxcontainer.box1+div.boxcontainer.box2+div.boxcontainer.box3
Platziere den Cursor im section.boxes> füge den Kurzbefehl ein > Command+Alt+Enter erzeugt die drei Box-Elemente:
<html>
<head>
<title>Layout 2</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="container">
<header>
<nav class="top">
<ul>
<li><a href="#">Inhalt 1</a></li>
<li><a href="#">Inhalt 2</a></li>
<li><a href="#">Inhalt 3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Seitentitel</h1>
<p class="spalte2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</article>
<section class="boxes">
<div class="boxcontainer box1"></div>
<div class="boxcontainer box2"></div>
<div class="boxcontainer box3"></div>
</section>
</main>
<footer></footer>
</div>
</body>
</html>
6. Inhalte in den Boxen
h3.box{Titel der Box}+p.box{lorem ipsum ...}
Platziere den Cursor jeweils in .box1 + .box2 + box3 > füge den Kurzbefehl ein > Command+Alt+Enter erzeugt die drei Box-Elemente:
<html>
<head>
<title>Layout 2</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="container">
<header>
<nav class="top">
<ul>
<li><a href="#">Inhalt 1</a></li>
<li><a href="#">Inhalt 2</a></li>
<li><a href="#">Inhalt 3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Seitentitel</h1>
<p class="spalte2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</article>
<section class="boxes">
<div class="boxcontainer box1">
<h3 class="box">Titel der Box</h3>
<p class="box">lorem ipsum ...</p>
</div>
<div class="boxcontainer box2">
<h3 class="box">Titel der Box</h3>
<p class="box">lorem ipsum ...</p>
</div>
<div class="boxcontainer box3">
<h3 class="box">Titel der Box</h3>
<p class="box">lorem ipsum ...</p>
</div>
</section>
</main>
<footer></footer>
</div>
</body>
</html>
7. Die 3 Spalten im Footer
div.spalte3*3
Platziere den Cursor im footer> füge den Kurzbefehl ein> Command+Alt+Enter erzeugt drei Spalten im Footer:
<html>
<head>
<title>Layout 2</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="container">
<header>
<nav class="top">
<ul>
<li><a href="#">Inhalt 1</a></li>
<li><a href="#">Inhalt 2</a></li>
<li><a href="#">Inhalt 3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Seitentitel</h1>
<p class="spalte2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</article>
<section class="boxes">
<div class="boxcontainer box1">
<h3 class="box">Titel der Box</h3>
<p class="box">lorem ipsum ...</p>
</div>
<div class="boxcontainer box2">
<h3 class="box">Titel der Box</h3>
<p class="box">lorem ipsum ...</p>
</div>
<div class="boxcontainer box3">
<h3 class="box">Titel der Box</h3>
<p class="box">lorem ipsum ...</p>
</div>
</section>
</main>
<footer>
<div class="spalte3"></div>
<div class="spalte3"></div>
<div class="spalte3"></div>
</footer>
</div>
</body>
</html>
8. Die Inhalte in den Footer-Spalten
p{Adresse ... }
ul>li*3>a{<img src="#" width="20" height="20" alt="">}sdgsdg
Platziere den Cursor im footer >füge den Kurzbrfehl ein >Command+Alt+Enter fügt die Inhalte jeweils in die drei Spalten im Footer: Leerschlag (Spalte 1) - Absatz mit Adresse (Spalte 2) - Social-Media-Links (Spalte 3):
<html>
<head>
<title>Layout 2</title>
<link rel="stylesheet" href="">
</head>
<body>
<div class="container">
<header>
<nav class="top">
<ul>
<li><a href="#">Inhalt 1</a></li>
<li><a href="#">Inhalt 2</a></li>
<li><a href="#">Inhalt 3</a></li>
</ul>
</nav>
</header>
<main>
<article>
<h1>Seitentitel</h1>
<p class="spalte2">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
</article>
<section class="boxes">
<div class="boxcontainer box1">
<h3 class="box">Titel der Box</h3>
<p class="box">lorem ipsum ...</p>
</div>
<div class="boxcontainer box2">
<h3 class="box">Titel der Box</h3>
<p class="box">lorem ipsum ...</p>
</div>
<div class="boxcontainer box3">
<h3 class="box">Titel der Box</h3>
<p class="box">lorem ipsum ...</p>
</div>
</section>
</main>
<footer>
<div class="spalte3">
</div>
<div class="spalte3">
<p>Adresse ... </p>
</div>
<div class="spalte3">
<ul>
<li><a href=""><img src="#" width="20" height="20" alt=""></a></li>
<li><a href=""><img src="#" width="20" height="20" alt=""></a></li>
<li><a href=""><img src="#" width="20" height="20" alt=""></a></li>
</ul>
</div>
</footer>
</div>
</body>
</html>
9. Die bereitgestellte Css-Datei verlinken
Das fertige Beispiel und die bereitgestellte CSS-Datei: layout2.html - layout2.css
Anmerkungen zur bereitgestellten CSS-Datei
<link rel="stylesheet" href="layout2.css">
Speichere beide Dateien und teste das Ergebnis im Browser.