Informieren

Um die Website des YouZe auf den aktuellen Stand der Technik zu bekommen, müssen Sie sich Wissen in den Bereichen HTML5, CSS (Cascading Style Sheets) und dem Grid-Layout aneignen.

Die nachfolgenden Informationen und Dokumente bekommen Sie durch Ihren Abteilungsleiter bei der SolSys zur Verfügung gestellt, nutzen Sie diese sowie weiteren Quellen im Internet, wie z.B. SELFhtml.org

(16) Cascading Style Sheets

Sie erhalten den Auftrag, sich in das Thema CSS (Cascading Style Sheets) einzuarbeiten. Damit Ihr Abteilungsleiter hinterher Ihr Wissen überprüfen kann, sollen Sie eine Präsentation zu diesem Thema erstellen. Die folgenden Inhalte sollten erhalten sein:

Was ist CSS
Wozu dienen die Tags <div>, <id> und <class>
Syntax von CSS
Einbindungsmöglichkeiten in HTML (3. Stück)
Vorteile und eventuell auch Nachteile
Wie ist das CSS-Grid-Layout aufgebaut

Informationsquellen:

Dokument im Anhang
CSS Grundlagen
SELFhtml
CSS Grid

Laden Sie anschließend Ihre Präsentation hier hoch.

(16) Erste CSS-Datei

Nachdem Sie nun die theoretischen Grundlagen von CSS kennengelernt haben, sollen Sie ein erstes HTML-Dokument mit einer externen CSS erstellen.

Erstellen Sie die beiden nachfolgenden Datei und speichern Sie diese in einem gemeinsamen Ordner "CSS"

default.html

<html>
  <head>
   <title>Mein Dokument</title>
   <link rel="stylesheet" type="text/css" href="style.css" />
  </head>
<body>
   <h1>Mein erstes Stylesheet</h1>
  </body>
</html>

style.css

body {
  background-color: #FF0000;
}

Nun speichern Sie beide Dateien in denselben Ordner. Denken Sie daran, die Dateien mit Ihren richtigen Endungen (“.css” bzw. “.htm”) zu speichern.

Öffnen Sie die default.htm in Ihrem Browser und Sie sehen, dass die Seite einen roten Hintergrund hat. Herzlichen Glückwunsch! Sie haben soeben Ihr erstes Stylesheet erstellt.

(18) CSS-Formatierungen

Nutzen Sie die angehängten Informationen um die folgenden Aufgaben zu lösen. Alle Aufgaben beziehen sich auf die Datei aktivitaeten.html

Aufgabe 1

Laden Sie die Datei aktivitaeten.html herunter.
Erstellen Sie eine CSS-Datei mit dem Namen style1.css
Binden Sie die CSS-Datei in die aktivitaeten.html ein.
Informieren Sie sich in diesem Dokument (LINK) über die Gestaltung von Farben und Hintergründen.
Definieren Sie in der style1.css die folgenden Angaben:
- Body Hintergrundfarbe #FFCC66
- Body Hintergrundbild soll das YouZe Logo sein; Position oben rechts
- H1 Text-Farbe #990000

Aufgabe 2

Informieren Sie sich in diesem Dokument (KLICK) über die Formatierungen der Schriftarten. Bearbeiten Sie weiterhin die aktivitaeten.html und style1.css Die Schrift für den Absatz soll font-family: arial, verdana, sans-serif sein Die Schrift für den Absatz soll kursiv sein

Aufgabe 3 Informieren Sie sich in diesem Dokument (KLICK) über die Gruppierungen durch class und id. Gruppieren Sie die Liste Aktivitäten und definieren Sie die Textfarbe der Liste mit #FFBB00 Gruppieren Sie die Liste Sonstiges und definieren Sie die Textfarbe der Liste mit #800000

Aufgabe 4 Laden Sie Ihre beiden Dateien aktivtaeten.html und style1.css hier hoch.

(19) Grid-Layout

Wofür braucht man das CSS-Grid-Layout? Das mobile Internet stellt Webdesigner vor eine große Herausforderung: Denn diese können aufgrund der Vielzahl unterschiedlich gestalteter Mobilgeräte nicht wissen, welches Format das Display hat, auf dem die Website angezeigt werden soll. Aus diesem Grund ist es wichtig, dass die einzelnen Objekte (Textboxen, Grafiken, interaktive Elemente) selbstständig und gleichzeitig übersichtlich verteilt werden – und zwar unter besonderer Berücksichtigung der jeweiligen Platzverhältnisse, die durch das Display vorgegeben sind.

Ein CSS Grid Layout bietet dem Webdesigner zwei Dimensionen zur Platzierung der Objekte. Statt nur auf einer Achse kann man mit CSS Grid ein Raster mit Zeilen und Spalten verwenden.

Mit den Eigenschaften

grid-column-start

sowie

grid-column-end

können für eine Webseite Anfangs- und End-Rasterlinien festgelegt werden, die damit die Größe und Position innerhalb der grid row bestimmen.

Mögliche Angaben sind:

grid-column: 1 / 6; Das Rasterelement erstreckt sich von der ersten bis zur 6. Rasterlinie.

grid-column: 1 / -1; Es sind auch negative Werte möglich. Das Rasterelement erstreckt sich von der ersten bis zur letzten Rasterlinie.

grid-column: 1 / span 5; Das Rasterelement erstreckt sich von der ersten Rasterlinie über 5 Zellen hinweg.

grid-column: span 5; Das Rasterelement erstreckt sich über 5 Zellen hinweg. Ein fester Anfang ist nicht vorgegeben.

Beispiel

Das folgende Beispiel zeigt ein dreispaltiges Raster mit neuen Zeilen, die mit mindestens 100 Pixeln und einem Maximum von auto erstellt wurden. Die Elemente wurden mithilfe von zeilenbasierten Platzierungen im Raster positioniert.

HTML

<div class="wrapper">
  <div class="one">One</div>
  <div class="two">Two</div>
  <div class="three">Three</div>
  <div class="four">Four</div>
  <div class="five">Five</div>
  <div class="six">Six</div>
</div>

CSS

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-gap: 10px;
  grid-auto-rows: minmax(100px, auto);
}
.one {
  grid-column: 1 / 3;
  grid-row: 1;
}
.two {
  grid-column: 2 / 4;
  grid-row: 1 / 3;
}
.three {
  grid-column: 1;
  grid-row: 2 / 5;
}
.four {
  grid-column: 3;
  grid-row: 3;
}
.five {
  grid-column: 2;
  grid-row: 4;
}
.six {
  grid-column: 3;
  grid-row: 4;
}

Anzeige im Browser

Aufgaben 1. Betrachten Sie die HTML und CSS Befehle aus dem Beispiel 2. Notieren Sie sich für jede Zeile, was die einzelnen Tags bewirken. 3. Lesen Sie diese weiteren Informationen 4. Erstellen Sie einen Ordner CSS-Grid mit einer index.html und einer style.css. 5. Modellieren Sie die index.html mit der Grundstruktur von HTML5 und geben Sie in jedem Bereich beispielhafte Daten ein. 6. Füllen Sie in die index.html und die style.css mit den Daten aus dem Beispiel. 7. Betrachten Sie das Ergebnis, stimmt es mit dem Beispiel überein?