Zweispaltiges Layout

index.htm <!DOCTYPE html> <html> <head> <meta charset=“utf-8″> <title></title> <link rel=“stylesheet“ href=“css/style.css“> </head> <body> <div id=“page“> <header> <img id=“logo“ src=“img/logo.png“ alt=“Brand / Logo“> <nav id=“topnavigation“> <ul> <li>Listenelement 1</li> <li>Listenelement 2</li> </ul> </nav> </header> <div id=“content“> <div class=“teaserimage“> <div class=“imagedescription“>Teasertext</div> <img src=““> </div> <main> <article></article> </main> <aside></aside> </div> <footer>&copy;</footer> </div> </body> </html> style.css /* Stildefinitionen für ein…

Read More Stand der Dinge am Ende der Sitzung zu zweispaltigen Layouts

Die Homepage der „Zeit“ bietet ein schönes Beispiel für ein zweispaltiges Layout: Aufgabe 1 Schauen Sie sich bitte den Webauftritt der „Zeit“ an und erstellen Sie eine schematische Darstellung der Homepage auf einem Blatt Papier. Überlegen Sie, welche semantischen HTML5-Elemente dazu dienen könnten, die einzelnen Seitenbereiche vorzusehen bzw. auszuzeichnen. Tipp: http://www.w3schools.com/html/html5_semantic_elements.asp. Aufgabe 2 Erstellen Sie…

Read More Startaufgaben – Zweispaltige Layouts mit float