Webdesign II (CSS3 und Frameworks)

Dieses Mal wurden Design- und Layouttechniken innerhalb der Webprogrammierung besprochen. Dazu wurde die Auszeichnungssprache CSS (Cascading Sytle Sheets) vorgestellt und näher unter die Lupe genommen. In diesem Zusammenhang wurde der Unterschied zwischen HTML und CSS geklärt, das Standard Website Layout sowie das CSS3 Box Model vorgestellt und diverse CSS-Selectors sowie Frameworks (z.B. Bootstrap) besprochen. Im weiteren Verlauf wurde eine neue CSS-Datei im Erste-Website-Projekt angelegt und in jedem Belangen neu umgestyled. Dazu wurde ein Bildbanner in Form einer Kopfzeile, eine Navigationsleiste mit Buttons inkl. Hover-Effekt sowie eine Fußzeile und sonstigen Gestaltungselementen erstellt, um die Seite von Grund auf neu zu gestalten. Schlussendlich wurden auch noch CSS3-spezifische Stylingbefehle besprochen (z.B. border-radius), welche mittels der Internetseite W3Schools gesucht und anschließend angewendet wurden.


Kompetenzen

  1. Ich kenne den Unterschied zwischen HTML und CSS und kann beide Dateitypen miteinander verbinden.
  2. Ich weiß wie ein Standard Website Layout konzipiert ist und verstehe wie das CSS3 Box Model funktioniert.
  3. Ich kenne den Begriff „Framework“ und weiß für was solche Baukästen vorteilhaft eingesetzt werden.
  4. Ich kenne diverse CSS-Befehle und kann diese mit unterschiedlichen Selectors innerhalb einer Datei anwenden.
  5. Ich verstehe wie ich neue Klassenelemente bzw. ID-Elemente erzeugen kann und wie diese in CSS aufzurufen sind.
  6. Ich kann Bilder in einem CSS-Dokument einbinden und weiß welche Bilder ich im Internet herunterladen darf.
  7. Ich weiß wofür Visual Studio Code verwendet wird und wie man mit den beiden Entwicklungsumgebungen umgeht.


Vertiefung

styled.html
<!DOCTYPE html>
<html>
  <head>
    <title>Seitentitel</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="layout.css">
  </head>	
 
  <body>
    <h1>Überschrift 1</h1>
    <p>Ein Beispieltext</p>		
  </body>
</html>
layout.css
html {
    height: 100%;
    width: 100%;
}
 
body {
    background-color: #CCFF99;
    font-family: Arial;
    padding: 0;
    margin: 0;
}
 
h1 { 
    font-size: 38pt;
}



Unterrichtsmaterialien


, , , , , , , , , , , , ,