Softwareentwicklung mit HTML5 - GUI-Konzepte

Während der Foundation-Kurs die Sprachebene von HTML5 und CSS in reinen Code-Editoren erschließt, setzt dieser GUI-Konzepte-Kurs auf das visuell-gestützte Werkzeug Adobe Dreamweaver als professionelle Entwicklungsumgebung. Der Schwerpunkt liegt auf Website-Verwaltung, CSS-Layouts und der Integration von Grafiken in eine zusammenhängende visuelle Gesamtgestaltung — Kompetenzen, die vor allem in Webdesign, Digital Publishing und Medienproduktion gefragt sind.

Das erste Modul stellt Adobe Dreamweaver als Arbeitsumgebung vor. Wer bisher nur mit einfachen Texteditoren gearbeitet hat, erlebt hier, wie eine integrierte Entwicklungsumgebung den Überblick über ein Webprojekt verändert: Site-Management, Live-Vorschau, Code Hinting und integrierter FTP-Client sind zentrale Themen.

• Dreamweaver-Workspace: Panels, Fensteranordnung, Design-View / Code-View / Split-View
• Site definieren: lokaler Stammordner, Remote-Server, Synchronisation
• Dateiverwaltung im Files-Panel: Ordnerstruktur, Umbenennen, Verschieben, Link-Aktualisierung
• Code-Unterstützung: Tag Inspector, Property Inspector, Code Hinting
• Live-Ansicht und Browser-Preview: Unterschiede, wann welche View nützlich ist
• FTP-Verbindung einrichten und Dateien hochladen/synchronisieren

Das zweite Modul widmet sich dem Herzstück des Kurses: CSS-Layouts und dem Dreamweaver-CSS-Designer. Hier wird Schritt für Schritt erklärt, wie CSS-Klassen und IDs mit dem grafischen Tool angelegt, bearbeitet und in Verbindung mit HTML-Elementen gebracht werden.

• CSS-Designer-Panel: Medienbedingungen, Selektoren, Eigenschaften
• CSS Box-Modell im visuellen Editor: Margin, Border, Padding interaktiv anpassen
• Positioning: normal flow, relative, absolute, fixed, sticky im Vergleich
• Float-basierte Layouts (historischer Kontext) vs. Flexbox-Grundlagen in Dreamweaver
• Mehrspaltiges Layout: Navigation + Hauptinhalt + Sidebar
• Responsive Grundlagen: Medienbedingungen im CSS-Designer anlegen

Im dritten Modul steht die Grafik-Integration im Mittelpunkt. Webbezogene Grafiken stellen besondere Anforderungen an Dateiformate, Komprimierung und Darstellungsgröße — gerade bei hochauflösenden Displays.

• Bildeigenschaften in Dreamweaver: src, alt, width, height im Property Inspector
• Dateiformate im Web: JPEG, PNG-8, PNG-24, GIF, SVG, WebP — wann welches
• Grafikoptimierung für schnelle Ladezeiten: Komprimierungstools, Export-Einstellungen
• Retina/HiDPI: srcset und sizes im Dreamweaver-Workflow
• Hintergrundbilder mit CSS: background-image, background-size, background-position
• Grafiken in Vorlagen integrieren: Platzhalterbilder in Dreamweaver-Templates

Der Praxisblock zieht alle Stränge zusammen: ein vollständiges Website-Projekt entsteht von der Planung bis zur Online-Stellung in Dreamweaver.

• Konzeptphase: Seitenstruktur planen (Sitemap, Wireframe-Skizze)
• Dreamweaver-Template erstellen: Kopf, Navigation, Contentbereich, Fußzeile als wiederverwendbare Vorlage
• Library Items anlegen und seitenübergreifend einspeisen
• CSS-Klassen für konsistentes Typography-System anlegen (Schriften, Größen, Farben)
• Menü-Navigation: horizontale Linkliste mit CSS-Hover-Effekt
• Formularseite: Kontaktformular mit Dreamweaver anlegen und stylen
• Grafikbereich: Bildergalerie mit CSS-Grid-ähnlichem Layout (Floats oder Flexbox)
• Responsive-Check: Seitenverhalten bei verschiedenen Viewport-Breiten testen
• Accessibility-Check: Alt-Texte, Farbkontrast, Tabulatorreihenfolge prüfen
• FTP-Upload und Live-Test im Browser
• Abschluss-Review: eigenes Projekt kommentieren und Verbesserungen benennen

Am Ende steht eine live publizierte Website mit Template-Struktur, konsistenter CSS-Gestaltung und optimierten Grafiken — ein Ergebnis, das in einem Portfolio vorzeigbar ist.

Dieser Kurs richtet sich an Personen aus dem Medien- und Gestaltungsbereich, die professionelle Web-Werkzeuge produktiv einsetzen und ihre gestalterische Kompetenz auf die Web-Umsetzung ausdehnen wollen.

• Grafik- und Mediendesigner, die von Print in digitale Web-Gestaltung wechseln
• Webdesigner ohne systematische CSS-Layout-Ausbildung
• Mediengestalter Digital und Print, die Adobe-Workflows auf das Web erweitern wollen
• Online-Redakteure, die Webseiten selbst layouten und pflegen möchten
• Personen mit HTML5-Foundation-Kenntnissen, die den nächsten Schritt in professionelles Web-Design gehen

Dreamweaver verbindet Code und visuelle Gestaltung — und so funktioniert auch dieser Kurs: kurze Erklärungen im Code-View werden unmittelbar in der Design-Ansicht gespiegelt. Teilnehmende bauen ihr Webprojekt kontinuierlich weiter; jede neue CSS-Regel oder Dreamweaver-Funktion findet sofort einen konkreten Einsatzort im wachsenden Projekt. Eigenständige Übungsphasen und tutoriell begleitete Vertiefungszeit wechseln sich mit Plenum-Demonstrations-Phasen ab.

Die genaue Kursdauer variiert je nach gewähltem Anbieter. Derzeit bieten 2 Anbieter 36 Termine an. Detailangaben sind beim jeweiligen Anbieter erhältlich.

Nach Kursabschluss und Präsentation des Abschlussprojekts erhalten Teilnehmende ein trägerinternes Zertifikat bzw. eine qualifizierte Teilnahmebescheinigung. Das Dokument bestätigt die Beherrschung von Adobe Dreamweaver für professionelles Webdesign und CSS-Layouts.

Die Kombination aus HTML5/CSS-Kompetenz und einem professionellen Werkzeug wie Dreamweaver macht den Unterschied im Berufsalltag: Site-Management, Template-Verwaltung und FTP-Workflow sind Fähigkeiten, die täglich in Agenturen, Redaktionen und Unternehmens-Webbereichen gebraucht werden. Wer außerdem Grafiken eigenständig aufbereitet und optimiert einbinden kann, deckt einen vollständigen Produktions-Workflow ab — ohne externe Zulieferung. CSS-Layouts verstehen, nicht nur ausprobieren — das ist der langfristige Wert dieses Kurses. Positioning-Regeln, Kaskadenlogik und das Box-Modell in einem visuellen Tool zu begreifen schafft eine Brücke, die viele Designer vermissen: von der intuitiven Gestaltungsidee zur soliden, browsertauglichen Umsetzung. Das Abschlussprojekt ist ein Portfoliostück. Eine live publizierte, technisch saubere Website mit Template-Struktur zeigt potenziellen Arbeitgebenden oder Auftraggebenden konkret, wozu man fähig ist — das übertrifft jeden Zertifikatseintrag allein. Wer diesen Kurs abschließt, ist bereit für professionelle Webdesign-Tätigkeiten oder den nächsten Schritt in Richtung JavaScript und interaktive Web-Anwendungen. Darüber hinaus legt der Kurs eine Grundlage für produktiveres Arbeiten in der alltäglichen Web-Kommunikation. Wer versteht, wie Dreamweaver seine Website-Definition aufbaut, kann Projekte leichter übergeben, gemeinsam mit Kolleginnen und Kollegen weiterentwickeln und systematisch dokumentieren. Template-Strukturen erzwingen ein Denken in Seitentypen und Wiederverwendung, das in Agenturen und Kommunikationsabteilungen täglich gebraucht wird. Dieser methodische Gewinn geht über das reine Werkzeugwissen hinaus und bleibt auch dann nützlich, wenn später andere Editoren oder CMS-Systeme zum Einsatz kommen. Für viele Absolventinnen und Absolventen ist dieser Kurs deshalb nicht der Endpunkt, sondern der Beginn einer breiteren Medien-Kompetenz, die sich schrittweise in Richtung interaktiver Webtechnologien oder UI-Design-Systeme ausbauen lässt.