Phase 2: Grundstufe

Webseitenprojekt · Phase 2 von 4 · Meilenstein M2 · passt zu IT 11.7 Webdesign

Ziel dieser Phase

Am Ende dieser Phase hast du eine Webseite aus mehreren Seiten mit HTML und eigenem CSS. Sie ist auf dem Handy und am breiten Bildschirm gut nutzbar und erfüllt die Checkliste Grundstufe. Das ist der Meilenstein M2.

So arbeitest du

• Kleine Schritte: Ändere wenig, speichere, schau im Browser nach. Dann der nächste Schritt. So weißt du immer, welche Änderung einen Fehler verursacht hat.
• Entwicklerwerkzeuge (Taste F12): Dort siehst du, welche CSS-Regel wirkt und welche durchgestrichen ist, und mit der Geräteansicht prüfst du die Handy-Breite.
• Arbeitstagebuch: Am Ende jeder Stunde eine Zeile im Projektplan (Abschnitt 6).
• Sichern: Am Ende jeder Stunde eine Kopie des Ordners.
• Plan ändern ist erlaubt. Merkst du, dass etwas nicht klappt, ändere den Plan und schreibe auf, warum. Das ist kein Fehler, sondern gehört zum Projekt.

Schritte

Schritt 1: Ordner und Grundgerüst leicht

1. Lade die Startdateien herunter, entpacke sie und öffne den Ordner in VSCodium.
2. Benenne die Seiten nach deinem Seitenplan um (zum Beispiel seite2.html → pflanzen.html) und lege weitere Seiten als Kopie an.
3. Passe in jeder Datei title, den Namen im Kopfbereich und das Menü an. Überprüfe, dass jeder Menülink funktioniert.

Schritt 2: Inhalte einfügen mittel

Fülle die Seiten mit deinen Inhalten. Wähle dabei für jeden Inhalt das passende Element: Überschriften in sinnvoller Reihenfolge, Absätze, Listen, Links mit aussagekräftigem Text, Bilder mit Alternativtext, eine Tabelle nur für echte Tabellendaten.

Trage jedes fremde Bild in quellen.html und im Projektplan ein.

Tipp 1

Schreibe die Inhalte zuerst ohne CSS. Eine gut gegliederte Seite ist auch ohne Gestaltung lesbar. Sieht sie ohne CSS wirr aus, stimmt meist die Gliederung nicht.

Tipp 2

Überschriften bilden ein Inhaltsverzeichnis: genau eine h1 pro Seite, darunter h2, darunter h3. Nimm eine Überschrift nie nur, weil die Schrift größer werden soll. Dafür ist CSS da.

Schritt 3: Gestalten mittel

Gestalte deine Seite in style.css nach deiner Skizze. Lege deine Farben am Anfang als Variablen fest (in der Startdatei schon vorbereitet) und überprüfe jede Text-Hintergrund-Kombination mit dem Kontrastprüfer.

Tipp 1

Weniger ist mehr: eine Schriftart, eine Akzentfarbe, gleiche Abstände. Die Designgrundsätze helfen beim Prüfen.

Tipp 2

Für Kacheln oder Spalten nebeneinander brauchst du display: flex am Behälter (siehe Flexbox).

Schritt 4: Für das Handy mittel

Sorge dafür, dass die Seite auf dem Handy gut funktioniert. Die Grundregeln gelten für das Handy, mit einer Media Query ergänzt du die Regeln für breite Bildschirme (Mobile First).

Überprüfe in der Geräteansicht der Entwicklerwerkzeuge bei 360 px Breite: Muss man seitlich scrollen? Sind Links und Knöpfe groß genug für den Finger?

Tipp 1

Seitliches Scrollen kommt fast immer von festen Breiten (width: 800px) oder von Bildern ohne max-width: 100%. Suche in den Entwicklerwerkzeugen das Element, das über den Rand ragt.

Tipp 2

Fehlt die Zeile <meta name="viewport" …> im head, sieht die Seite auf einem echten Handy winzig aus, auch wenn sie in der Geräteansicht stimmt. Siehe Der viewport.

Schritt 5: Rückmeldung einholen leicht

Tausche mit einer Mitschülerin oder einem Mitschüler die Rolle: Eine Person bedient die Seite der anderen, ohne dass erklärt wird.

1. Die Testperson löst eine Aufgabe auf der Seite, die du ihr stellst (zum Beispiel „Finde heraus, wann der nächste Termin ist“). Du schaust nur zu und notierst, wo sie zögert.
2. Danach gibt sie dir Rückmeldung nach der Methode „zwei Sterne und ein Wunsch“: zwei Dinge, die gut gelungen sind, und ein Wunsch für eine Verbesserung.
3. Entscheide, was du änderst, und notiere es im Arbeitstagebuch.

Checkliste Grundstufe

Diese Anforderungen gelten für alle Projekte. Rechts steht, wo du nachschlagen kannst.

Anforderung	Nachschlagen
mindestens drei Seiten (Startseite, zwei Unterseiten) plus quellen.html, über ein gemeinsames Menü verbunden	IT 11.7, Einheit 2: Links
vollständiges Grundgerüst mit lang="de", charset, viewport und passendem title auf jeder Seite	Einheit 1: Grundgerüst
Gliederung mit header, nav, main, footer; Überschriften in richtiger Reihenfolge	Einheit 2: Die Seite gliedern
mindestens ein Bild mit passendem Alternativtext, mindestens eine Liste	Einheit 2: Bilder
eigenes CSS in einer eigenen Datei, ohne Framework, Farben als Variablen	Einheit 4: CSS einbinden
ein Layout mit Abständen und mindestens einem Bereich mit Flexbox	Einheit 5: Box-Modell
Kontrast aller Texte mindestens 4,5 : 1	Einheit 6: Kontrast prüfen
mit der Tastatur bedienbar, Fokus sichtbar	Einheit 6: Barrierefreiheit
Handy-Ansicht ohne seitliches Scrollen, mindestens eine Media Query	Einheit 7: Media Queries
alle Quellen angegeben, keine echten persönlichen Daten	Regeln für alle Projekte

In diesem Projekt verwendest du kein Framework wie Pico CSS (Einheit 8). Die ganze Gestaltung stammt aus deinem eigenen CSS. So zeigst du, was du selbst kannst.

Typische Probleme

Typischer Fehler: Das Bild wird nicht angezeigt

Meist stimmt der Pfad nicht. Liegt das Bild im Ordner bilder, heißt es src="bilder/beet.jpg", nicht src="beet.jpg". Achte auch auf Groß- und Kleinschreibung: Beet.JPG und beet.jpg sind auf vielen Webservern verschiedene Dateien. Am sichersten: Dateinamen nur in Kleinbuchstaben, ohne Leerzeichen und Umlaute.

Typischer Fehler: Das CSS wirkt nicht

Prüfe nacheinander: Steht <link rel="stylesheet" href="style.css"> im head? Stimmt der Dateiname? Ist die Regel in den Entwicklerwerkzeugen durchgestrichen, gewinnt eine andere Regel (siehe Welche Regel gewinnt?). Steht sie gar nicht da, hat der Browser die Datei nicht gefunden oder der Selektor passt nicht.

Typischer Fehler: Umlaute werden falsch angezeigt

Steht statt „ü“ ein seltsames Zeichen, fehlt <meta charset="UTF-8"> im head, oder die Datei ist nicht als UTF-8 gespeichert. In VSCodium steht die Kodierung unten rechts in der Statusleiste.

Checkliste für M2

• alle Punkte der Checkliste Grundstufe erfüllt
• die eigenen Muss-Anforderungen aus dem Plan, die nur HTML und CSS betreffen, erfüllt
• Rückmeldung eingeholt und ausgewertet
• Arbeitstagebuch und Quellen aktuell
• Sicherungskopie angelegt

Weiter geht es mit Phase 3: Erweiterung.