Webauftritt erstellen und veröffentlichen

In diesem üK im ersten Lehrjahr baust du aus einem Gestaltungsentwurf eine funktionierende, mehrseitige Website. Du planst Inhalte und Navigation, strukturierst die Seiten mit HTML und übersetzt Farben, Schriften und Abstände aus dem Corporate Design in CSS. Bilder und Logos optimierst du so, dass die Seite auch über das Handynetz schnell lädt. Zum Schluss lädst du alles auf einen Webserver, verbindest die Domain, sorgst für HTTPS und ergänzt Impressum und Datenschutzerklärung.

Das sind die Fähigkeiten, die am Ende des Moduls sitzen sollten. Jedes Ziel mit einem Beispiel aus dem Lehrbetrieb.

1. 1

   Inhalte, Seitenstruktur und Navigation eines kleinen Webauftritts planen

   Kompetenz A

   Du klärst, wer die Website besucht und was diese Leute suchen. Daraus leitest du eine Sitemap mit wenigen, klar benannten Seiten ab und skizzierst für jede Seite ein einfaches Wireframe.

   Situation

   Ein Coiffeursalon in Aarau hat nur eine Facebook-Seite und möchte eine eigene Website. Die meisten Kundinnen suchen Preise, Öffnungszeiten und einen Termin.

   Deine Aufgabe

   Erstelle eine Sitemap und ein Wireframe für die Startseite.

   Gutes Ergebnis

   Fünf Seiten: Start, Angebot und Preise, Team, Kontakt, Impressum/Datenschutz. Auf der Startseite oben Öffnungszeiten und Button 'Termin buchen', darunter drei Angebotskarten und eine Karte mit Adresse.

   SitemapWireframeZielgruppeNavigationContent-Inventar
2. 2

   Seiten mit semantischem HTML aufbauen

   Kompetenz B

   Du schreibst HTML so, dass Inhalte sinnvoll ausgezeichnet sind: eine h1 pro Seite, logische Überschriften, Listen für Aufzählungen, Bilder mit Alt-Text und Bereiche wie header, nav, main und footer. Das hilft Suchmaschinen, Screenreadern und dir selbst beim Gestalten.

   Situation

   Du bekommst vom Salon einen Word-Text mit fett formatierten Zwischentiteln und einer Preisliste als Tabelle.

   Deine Aufgabe

   Übertrage den Inhalt der Angebotsseite in sauberes HTML.

   Gutes Ergebnis

   h1 'Angebot und Preise', h2 pro Kategorie (Damen, Herren, Kinder), Preise als Tabelle mit Spaltenüberschriften, Bilder mit Alt-Text wie 'Kundin mit frisch geschnittenem Bob'. Keine leeren Absätze für Abstände.

   semantische TagsÜberschriftenhierarchieAlt-Textrelative LinksW3C-Validierung
3. 3

   Den Gestaltungsentwurf und das Corporate Design mit CSS umsetzen

   Kompetenz C

   Du übersetzt Farben, Schriften und Abstände aus dem Entwurf in eine zentrale CSS-Datei. Du verstehst das Box Model, ordnest Elemente mit Flexbox an und bindest Webfonts lokal ein.

   Situation

   Das CD des Salons verlangt Hausfarbe #2E5E4E, die Schrift 'Lato' und viel Weissraum.

   Deine Aufgabe

   Setze Navigation, Angebotskarten und Footer im CD um.

   Gutes Ergebnis

   Farben und Schriften als CSS-Variablen am Anfang der Datei, Lato als WOFF2 lokal auf dem Server (nicht über Google-Server, damit keine Daten ins Ausland fliessen), Navigation und Karten mit Flexbox und gap: 24px.

   SelektorBox ModelFlexboxCSS-VariablenWebfont / WOFF2
4. 4

   Den Auftritt für Smartphone, Tablet und Desktop anpassen

   Kompetenz D

   Du baust die Seite zuerst für schmale Bildschirme und erweiterst das Layout mit Media Queries für grössere. Bilder passen sich an, Texte bleiben lesbar und Buttons sind gross genug für den Daumen.

   Situation

   Der Salon sagt, dass 75 % der Besuche über Smartphones kommen. Auf dem Handy liegen die drei Angebotskarten zu eng nebeneinander.

   Deine Aufgabe

   Mach das Layout responsiv.

   Gutes Ergebnis

   Viewport-Meta-Tag gesetzt, Karten untereinander bis 700 px, ab 700 px drei Spalten. Bilder mit max-width: 100%. Button 'Termin buchen' mindestens 44 px hoch.

   Mobile FirstViewport-Meta-TagMedia QueryBreakpointrelative Einheiten (rem, %)
5. 5

   Bilder, Logos und Medien fürs Web optimieren

   Kompetenz D

   Du bringst Fotos auf die nötige Pixelgrösse, wählst ein passendes Format und komprimierst sie, bis Qualität und Ladezeit stimmen. Logos und Icons setzt du als SVG ein.

   Situation

   Die Fotografin liefert 18 Teamfotos mit je 6000 x 4000 px und 12 MB. Die Teamseite lädt über 4G fast 30 Sekunden.

   Deine Aufgabe

   Optimiere die Bilder für die Teamseite.

   Gutes Ergebnis

   Fotos auf 800 px Breite zugeschnitten, als WebP mit Qualität 75 exportiert, je ca. 80 KB statt 12 MB. Logo als SVG mit 4 KB. Die Seite lädt danach in unter 2 Sekunden.

   PixelmasseJPEG / PNG / WebP / SVGKompressionDateigrösseLadezeit
6. 6

   Den Webauftritt veröffentlichen, absichern und rechtlich vervollständigen

   Kompetenz E

   Du lädst die Dateien per SFTP auf ein Webhosting, verknüpfst die Domain, aktivierst ein SSL-Zertifikat und prüfst die Seite auf echten Geräten. Impressum und Datenschutzerklärung nach revDSG gehören dazu.

   Situation

   Der Salon hat bei einem Schweizer Hoster ein Webhosting und die Domain 'salon-beispiel.ch' gelöst.

   Deine Aufgabe

   Bring die Website online und prüfe sie.

   Gutes Ergebnis

   Upload mit FileZilla ins Verzeichnis 'public_html', Let's-Encrypt-Zertifikat aktiviert, Weiterleitung von http auf https. Impressum mit Firmenname, Adresse und Kontakt, Datenschutzerklärung mit Hinweis auf Hoster und Kartendienst. Lighthouse-Wert für Performance über 90.

   WebhostingDomain und DNSSFTPHTTPS / SSLImpressumDatenschutzerklärung (revDSG)

Die Kompetenzmatrix zerlegt das Modul in Themenstränge und drei Stufen. Für den Kompetenznachweis solltest du überall mindestens Stufe 2 erreichen. Dein Stand bleibt in diesem Browser gespeichert und färbt Lernweg und Übungen ein.

Zoe ist im 1. Lehrjahr als Mediamatikerin bei der Agentur Kantig GmbH in Schaffhausen, einer Kommunikationsagentur mit 12 Mitarbeitenden. Das Blumengeschäft Flora Rheinfall in Neuhausen hat eine veraltete Website, die auf dem Handy kaum lesbar ist. Zoe darf den neuen Webauftritt unter Anleitung ihres Berufsbildners von der Planung bis zur Livestellung umsetzen.

1. Kapitel 1

   Was soll auf die Seite?

   Im Kundengespräch erfährt Zoe, dass die Inhaberin vor allem Hochzeitsfloristik, Trauerfloristik und Blumenabos für Firmen bekannter machen will. Zoe zeichnet eine Sitemap mit fünf Seiten und erstellt Wireframes in Figma. Die Inhaberin möchte zunächst alles auf die Startseite packen. Zoe zeigt ihr am Handy-Wireframe, dass man dann sechsmal scrollen müsste, und die beiden einigen sich auf drei Teaser mit Links zu den Unterseiten.

   Ziel 1

2. Kapitel 2

   Das Grundgerüst

   Zoe legt die Ordnerstruktur mit index.html, css und img an und baut die fünf Seiten mit header, nav, main, section und footer auf. Weil sie die Navigation von Seite zu Seite kopiert, fehlt auf der Kontaktseite plötzlich der Link zu den Abos. Sie erstellt eine kurze Checkliste für Navigation, Seitentitel und Meta-Beschreibung und geht jede Seite damit durch. Danach meldet der W3C Validator auf keiner Seite mehr Fehler.

   Ziel 2

3. Kapitel 3

   Das Grün muss stimmen

   Laut CD-Manual ist die Hausfarbe ein dunkles Grün, und Titel stehen in einer Serifenschrift. Zoe bindet den Webfont zuerst direkt von einem externen Server ein, doch ihr Berufsbildner weist sie auf den Datenschutz hin, worauf sie die Schrift lokal einbindet. Beim Vergleich mit Figma sind die Abstände unter den Zwischentiteln zu gross. In den DevTools entdeckt sie die Standard-Margins der h2 und setzt eigene Werte aus einer Abstandsskala.

   Ziel 3

4. Kapitel 4

   Die Fotos der Hochzeitssträusse

   Die Fotografin liefert 22 Bilder mit je 8 MB, und die Galerieseite wiegt so 41 MB. Zoe skaliert jedes Bild auf 1600 und 800 Pixel, speichert es als WebP und liefert es mit srcset aus, das Logo ersetzt sie durch ein SVG. Die Galerie wiegt danach noch 780 KB. Mit Media Queries bei 600 und 1000 Pixel wächst sie von einer Spalte auf dem Handy auf drei Spalten am Desktop.

   Ziel 5Ziel 4

5. Kapitel 5

   Online vor dem Muttertag

   Zoe lädt die Website per FileZilla auf den Webserver, doch online fehlen auf der Galerieseite vier Bilder. Der Grund: Die Dateien heissen Strauss.JPG, im HTML steht aber strauss.jpg, und der Linux-Server unterscheidet Gross- und Kleinschreibung. Nach der Korrektur aktiviert sie HTTPS, prüft die Weiterleitungen von http und www und ergänzt Impressum und Datenschutzerklärung. Mit der Inhaberin geht sie die Abnahme-Checkliste durch, und die Seite geht zehn Tage vor dem Muttertag live.

   Ziel 6

1. 1

   Planen vor dem Programmieren

   ca. 2 Std.

   Du sammelst Inhalte, legst die Seitenstruktur fest und skizzierst die wichtigsten Seiten.

   • Drei Websites von lokalen KMU analysieren: Was findest du schnell, was nicht?
   • Sitemap für den Kundenauftrag zeichnen
   • Wireframes für Startseite und eine Unterseite in Figma oder auf Papier erstellen

   Trainiert Kompetenz A1A2

   Lernziel1

2. 2

   HTML-Grundgerüst

   ca. 3 Std.

   Du baust alle Seiten zuerst nur mit HTML, ohne Gestaltung. So siehst du, ob die Struktur trägt.

   • Ordnerstruktur anlegen (index.html, css/, img/) und Seiten verlinken
   • Inhalte mit semantischen Tags auszeichnen
   • Jede Seite im W3C Validator prüfen und Fehler beheben

   Trainiert Kompetenz B1B2

   Lernziel2

3. 3

   Gestalten mit CSS

   ca. 5 Std.

   Du überträgst den Entwurf Schritt für Schritt in CSS und lernst dabei die wichtigsten Eigenschaften kennen.

   • Farben und Schriften als Variablen definieren und Webfont lokal einbinden
   • Navigation und Kartenlayout mit Flexbox umsetzen
   • Mit den DevTools Abstände und Box Model untersuchen

   Trainiert Kompetenz C1C2

   Lernziel3

4. 4

   Responsive und schnell

   ca. 4 Std.

   Die Seite wird handytauglich und leicht.

   • Layout mit Media Queries für drei Breiten anpassen und im Gerätemodus der DevTools testen
   • Alle Bilder in Pixelgrösse und Format optimieren und die Dateigrössen vorher/nachher vergleichen
   • Lighthouse ausführen und die zwei wichtigsten Hinweise umsetzen

   Trainiert Kompetenz D1D2

   Lernziel45

5. 5

   Online stellen

   ca. 3 Std.

   Du veröffentlichst die Website und schliesst den Auftrag sauber ab.

   • Dateien per SFTP hochladen und auf dem Smartphone testen
   • HTTPS aktivieren und Weiterleitung prüfen
   • Impressum und Datenschutzerklärung erstellen und verlinken

   Trainiert Kompetenz E1E2

   Lernziel6

6. 6

   Abnahme und Präsentation

   ca. 2 Std.

   Du prüfst den Auftritt wie der Kunde und präsentierst ihn im üK.

   • Checkliste durchgehen: Links, Bilder, Alt-Texte, Mobile, HTTPS, Impressum
   • Die Website in 5 Minuten präsentieren und Gestaltungsentscheide begründen

   Trainiert Kompetenz A3C3E3

   Lernziel136

Sitemap

Übersicht über alle Seiten einer Website und wie sie zusammenhängen.

Wireframe

Einfache Skizze, die zeigt, wo welche Inhalte auf einer Seite stehen, ohne Farben und Bilder.

Semantisches HTML

HTML-Elemente, die die Bedeutung eines Inhalts beschreiben, z.B. nav für Navigation oder footer für die Fusszeile.

Box Model

Modell, nach dem jedes Element aus Inhalt, Innenabstand (padding), Rahmen (border) und Aussenabstand (margin) besteht.

Media Query

CSS-Regel, die nur ab oder bis zu einer bestimmten Bildschirmbreite gilt.

SFTP

Verschlüsseltes Protokoll, um Dateien auf einen Server zu übertragen.

DNS

System, das eine Domain wie beispiel.ch in die IP-Adresse des Servers übersetzt.

SSL-Zertifikat

Zertifikat, das eine verschlüsselte HTTPS-Verbindung ermöglicht und die Domain bestätigt.

Passende Module