Tabellenfreies Layout in HTML

Größe: px

Ab Seite anzeigen:

Download "Tabellenfreies Layout in HTML"

Sabine Giese
vor 6 Jahren
Abrufe

1 Tabellenfreies Layout in HTML

2 0. Inhaltsverzeichnis Philipp Wahle von 40 Seiten

3 3 von 40 Seiten 0. Inhaltsverzeichnis 1. Sematischer Code 2. Box Modell 3. Classes & IDs 4. Statischer Seitenaufbau 5. Positionierung 6. Aussichten

4 1. Semantischer Code Philipp Wahle von 40 Seiten

5 5 von 40 Seiten 1.1 Definition & Methode - I Semantik Lehre der Bedeutung Methode HTML Code schreiben als Inhalte gliedern Strukturen Schaffen Logische Beziehungen Herstellen Bedeutung markieren

6 6 von 40 Seiten 1.1 Definition & Methode - I Semantik Lehre der Bedeutung Methode HTML Code schreiben als Inhalte gliedern Strukturen Schaffen Logische Beziehungen Herstellen Bedeutung markieren

7 7 von 40 Seiten 1.1 Definition & Methode - II Zusammenfassung Die HTML-Elemente übermitteln bei semantischem Code nicht wie die Inhalte aussehen sollen, sondern welche Bedeutung oder Funktion sie haben. Quelle:

8 8 von 40 Seiten 1.2 Auszeichnen von Dokumenten (Bsp.) Elemente im Schematischen Sinne Navigation Liste <ul><li><a href="#">...</a></li></ul> Alt-Atribute Bildern <img src="tanzmaus.png" alt="tanzmaus" title="tanzmaus"> Title Links <a href="#" title="meinlink">...</a> Quelle:

9 9 von 40 Seiten 1.3 Wozu das Ganze? Trennung von Inhalt und Layout Voraussetzung für Barrierefreis Internet z.b.: Benutzung von Screenreadern Mehr Informationen:

10 2. Box-Modell Philipp Wahle von 40 Seiten

11 11 von 40 Seiten 2.1 Übersicht über das Box-Modell Alle Boxen sind gleich

12 12 von 40 Seiten 2.2 Die Elemente des Box-Modells Fast alle HTML-Elemente haben die Eigenschaften Englisch content width padding border margin Deutsch Inhalt, Inhaltsbereich Breite, Inhaltsbreite Innenabstand, Polsterung, Auffüllung, Füllung Rahmen, Rahmenlinie Außenabstand, Rand Weiterführendes:Little Boxes - Das Box Modell

13 13 von 40 Seiten 2.3 Inline und Block Elemente Inline Elemente Kein Zeilenumbruch nach dem Element Besitzen weder height noch width Ich bin ein <em>inliner</em>. Block Elemente Besitzen einen automatischen Zeilenumbruch <h1> Willkommen... </h1>

14 3. Classes & IDs Philipp Wahle von 40 Seiten

15 15 von 40 Seiten 3.1 Einen Namen vergeben Idee: Eine HTML Element mit CSS ansprechen Den HTML Element einen Namen (Selektor) geben Universaltribute in HTML id class

16 16 von 40 Seiten 3.2 Es kann nur einen geben : ID - Selektor ID steht für Identität Dieselbe ID kann nur einmal pro Webseite vorkommen <div id="header">... </div> Gestalten das Element in CSS: Rautezeichen (#) gefolgt von ID als Selektor #header {... }

17 17 von 40 Seiten 3.3 Gruppenbildung: Class Klassen werden zu Untermalung mehrerer gleicher Elemente benutzt. (Bsp: Infobox) <p class="infobox">dieser Text ist eine Infobox.</p> Im CSS werden alle Absätze mit dem gleichen Selektor ausgewählt p.infobox {color : black;background-color: #8c8c8c; border: 3px solid #ecf7dd;} Verwendung von mehreren Slektoren <p class="galerie infobox">... </p>

18 18 von 40 Seiten 3.4 ID oder Klasse - wann nimmt man was? Es besteht die Möglichkeit einen Namenszusatz für HTML-Elemente zu Vergeben ID sind einmalig und dürfen einmal pro Webseite vorkommen Classes dürfen auf Seiten mehrfach vorkommen

19 4. Statischer Seitenaufbau Philipp Wahle von 40 Seiten

20 20 von 40 Seiten 4.1 Layout Entwurf 2-Spalten-Desigin I header left main Statisches 2 Spalten Layout footer Ohne Wrapper und Container Div

21 21 von 40 Seiten 4.2 Layout Entwurf 2-Spalten-Desigin II header left main Wrapper, als ummaltelung der gesammten seite Container, als Umrandung der Inhaltselemente footer Darstellung mit Wrapper und Container Div

22 22 von 40 Seiten 4.3 HTML Quelltext Ausgangs HTML <!DOCTYPE html> <html> <head> <title></title> </head> <body> {...} </body> </html>

23 23 von 40 Seiten 4.4 HTML Quelltext Body Inhalt <div id="wrapper"> <header id="header">  </header> <div id="container"> {...}  </div> <footer id="footer">  </footer>  </div>

24 24 von 40 Seiten 4.5 HTML Quelltext Container <aside id="left">  <ul> </ul>  </aside> <div id="main">  </div>

25 5. Positionierung Philipp Wahle von 40 Seiten

26 26 von 40 Seiten 5.1 Der Dokumenten Fluss HTML Elemente folgen 3 Regeln 1. Positionierung Links und Oben von einem einzigen Element. 2. Ein Zweites Element wird Rechts davon positioniert, bis kein Platz mehr vorhanden ist. (ACHTUNG!!! Siehe: Box Modell) 3. Ist Rechts davon kein Platz mehr, rutsch es eine Zeile tiefer, beginnt wieder ganz links.

27 27 von 40 Seiten 5.2 Der Boxen Fluss - I HTML <body> <div>box 1</div> <div>box 2</div> <div>box 3</div> </body> CSS body { color: black; background-color: gray; padding: 0; margin:0; } div { background-color: white; padding: 10px; border: 1px solid black; margin: 5px; }

28 28 von 40 Seiten 5.2 Der Boxen Fluss - II HTML <body> <div>box 1</div> <div>box 2</div> <div>box 3</div> </body> CSS body {... } div { width: 20%; background-color: white; padding: 10px; border: 1px solid black; margin: 5px; } postion: static als default

29 29 von 40 Seiten 5.3. position: relative Verschiebung der Box von ihrer normalen Postion im Fluss Der ursprüngliche Platz der Box wird geschützt. HTML <body> <div id="anders"> Box 1 </div> <div>box 2</div> <div>box 3</div> </body> CSS body {...} div {...} #anders { position: relative; top: 25px; right: 25px; background-color: #f3c600; }

30 30 von 40 Seiten 5.4 position: absolute Der Text wird komplett aus dem Fluss herausgenommen Für alle anderen HTML-Elemente ist das absolut positionierte Element nicht vorhanden HTML <body> <div id="anders"> Box 1 </div> <div>box 2</div> <div>box 3</div> </body> CSS body {...} div {...} #anders { position: absolute; top: 25px; right: 25px; background-color: #f3c600; }

31 31 von 40 Seiten 5.5 postion: fixed Verhält sich wie postion:absolute jedoch: Ein fixes Element Scrollt nicht mit Absolute Elemente sind relativ zu ihrem Bezugspunkt Bei Fixierten Elementen: Browserfenster HTML <body>... </body> CSS body {...} div {...} #anders { position: fixed;... }

32 32 von 40 Seiten 5.5 Positionierung mit float»to float«heißt»schweben«, und eine schwebende Box macht drei Bewegungen: Sie erhebt sich aus dem normalen Fluss, schwebt wie ein losgelassener Heliumluftballon in der umgebenden Kiste auf der einen Seite nach oben und driftet dann je nach Windrichtung so weit es geht auf die andere Seite. Peter Müller Little Boxes

33 33 von 40 Seiten 5.6 Das Beilspiel: Ohne Floats - I Beispiel: 3 Boxen HTML <body> <div id="eins"> Box 1</div> <div id="zwei"> Box 2</div> <div id="drei"> Box 3</div> </body> CSS Body { } div { font-weight: bold; width:200px; height:50px; padding:10px; border:1px solid black; margin:5px;} #eins { background-color: #fff;} #zwei { background-color: #ddd;} #drei { background-color: #aaa;}

34 34 von 40 Seiten 5.6 Beim Layouten float fast immer mit width - II Gefloatete Elemente sind Block-Elemente, schrumpfen ohne Angabe von width auf die breite des Inhalts. >> Shrink to fit << In bestimmten Situationen beabsichtigt: Bsp: Navigationsleiten Bei Grafiken ist width nicht nötig.

35 35 von 40 Seiten 5.7 Drei nach links floaten Verhalten : Erstes DIV schwebt an rechter Seite der umliegenden Box nach oben und nach links. HTML <body> <div id="eins"> Box 1</div> <div id="zwei"> Box 2</div> <div id="drei"> Box 3</div> </body> CSS Body {... } div {float: left;} #eins {...} #zwei {...} #drei {...}

36 36 von 40 Seiten 5.7 Drei nach rechts floatet Verhalten : Erstes DIV schwebt an linken Seite der umliegenden Box nach oben und nach rechts. HTML <body> <div id="eins"> Box 1</div> <div id="zwei"> Box 2</div> <div id="drei"> Box 3</div> </body> CSS Body {... } div {float: right;} #eins {...} #zwei {...} #drei {...}

37 37 von 40 Seiten 5.7 Beenden von Floats Verhalten: Es zwingt ein folgendes Element, unterhalb eines gefloatenen Elements zu beginnen, und nicht daneben. Clear kann die Werte left, right oder both HTML <body> <div id="eins"> Box 1</div> <div id="zwei"> Box 2</div> <div id="drei"> Box 3</div> </body> CSS Body {... } div {...} #eins {...} #zwei {...} #drei {clear: both;}

38 6. Aussichten Philipp Wahle von 40 Seiten

39 39 von 40 Seiten 7.1 Was nun? Dynamischer Seitenaufbau Frameworks 960 GS YAML CSS 3 & HTML 5 CSSDOC CMS Contao; Joomla!; Typo3; WordPress;... SEO

40 40 von 40 Seiten Vielen Dank für Ihre Aufmerksamkeit!

Ähnliche Dokumente

Aufbau einer HTML Seite:

1 Aufbau einer HTML Seite: Grundstruktur: Head Bereich: "nicht sichtbar" Er enthält grundlegende Informationen wie: Title, Charset, Ansichtsgröße,