Webdesign-Workshop I: Crash-Workshop HTML-CSS

• Woche 1: Aller Anfang ist ... - leicht!
  Das HTML-Grundgerüst Ihrer Website und Textformatierung mit HTML
  In der ersten Woche des Workshops machen Sie sich mit den Grundlagen von HTML vertraut, erstellen das HTML-Grundgerüst Ihrer Website und bringen Ihre Seiten per FTP ins Internet.

  Am Ende der ersten Woche

  • kennen Sie die HTML Regeln

  • und die Struktur einer HTML Datei,

  • Sie können Ihre Texte mit HTML formatieren

  • Bilder und Links auf Ihrer Website einfügen

  • und haben Ihre erste Beispiel-Website per FTP ins Internet übertragen.

• Woche 2: CSS-Grundlagen, CSS-Gestaltungsmittel & Navigation
  In der zweiten Woche lernen Sie die Grundlagen von CSS und diese CSS-Gestaltungsmöglichkeiten kennen:

  • Farben

  • Grafiken und

  • Schriftformatierung.

  Außerdem erfahren Sie, wie Sie HTML-Listen mit CSS formatieren und gestalten ein horizontales Navigationsmenü für Ihre (Beispiel-)Website.

• Woche 3: Die pflegeleichte Website: Trennung von Inhalt und Layout;
  Außerdem: Tabellen & Frames
  Der Vorteil von CSS ist, dass CSS erlaubt, den Inhalt einer Website von seiner Darstellung zu trennen. Wie die Gestaltung einer Website aussieht, kann dabei auch in einer externen CSS-Datei zentral festgelegt werden. Will man die Gestaltung der Website ändern, muss dann nur diese zentrale Datei - und nicht jede einzelne HTML-Seite - geändert werden. In dieser Woche erfahren Sie, wie das funktioniert und erstellen eine externe CSS-Datei für Ihre Beispiel-Website.

  Weitere Themen dieser Woche sind:

  • HTML Tabellen erstellen und mit CSS formatieren

  • Frames und IFrames

  • Plausibilitätsprüfung: Validieren von HTML und CSS Codes

  • Pseudoformate in CSS
    also die Formatierung eines Elements abhängig von seinem aktuellen Zustand. Gemeint ist damit etwa die unterschiedliche Formatierung eines Links, je nach dem ob er schon angeklickt wurde (besuchter Link) oder ob die Maus gerade auf diesen Link zeigt (Mouse-over Effekt)

• Woche 4: Feinschliff des Layouts mit CSS
  In der abschließenden Workshop-Woche widmen wir uns weiteren Möglichkeiten, eine Website mit CSS zu gestalten. Dazu zählen unter anderem:

  • die float-Eigenschaften
    um z.B. einen Text neben einem Bild oder ein Bild in der Textmitte zu platzieren

  • die Elemente 'div' und 'span'
    die uns mehr Gestaltungsfreiheit auf einer HTML-Seite verschaffen, um z.B. mehrere Elemente wie Text, Grafiken, Tabellen usw. in einen gemeinsamen Bereich einzuschließen und zu gruppieren oder um visuelle Besonderheiten an bestimmten Textstellen im Dokument, z.B. mitten im Satz, einzufügen

  • die display Eigenschaft
    mit der wir freier bestimmen können, wie HTML-Elemente auf der Seite angezeigt werden, so dass z.B. Aufzählungen nebeneinander, statt untereinander, erscheinen und

  • verschachtelte Selektoren
    mit denen wir innerhalb einer Formatierung zusätzliche Formatierung einfügen können, wenn z.B. Überschriften per CSS blau formatiert sind und wir möchten nun innerhalb dieser Überschrift ein oder mehrere Worte kursiv und rot setzen.

  Ein Ausblick auf fortgeschrittenes CSS schließt den ersten Workshop dieses Workshop-Paketes ab.

Webdesign-Workshop II: CSS für Fortgeschrittenen, Barrierefreiheit, Suchmaschinenoptimierung

• Woche 1:
  Barrierefreie Navigation mit CSS
  Suchmaschinenoptimierung für Webdesigner, Teil I

  Im ersten Schwerpunkt dieser Workshop-Woche geht es um die Gestaltung der Navigationselemente Ihrer Website. Um ein harmonisches Design zu erreichen, erweitern Sie die Gestaltung Ihrer horizontalen Hauptnavigation per CSS display- und float-Eigenschaften. Dabei lernen Sie auch weitere Möglichkeiten der CSS-Listen- und Verweisformatierung kennen. Zudem erfahren Sie, wie Sie Ihre Menü- und Seitensteuerung barrierefrei gestalten.

  Im zweiten Wochen-Schwerpunkt geht es um die suchmaschinengerechte Organisation des Backends Ihrer Website. Sie reorganisieren die vorhandenen Dateien und Ordner Ihrer Website optimal für die Suchmaschinen und benennen sie suchmaschinengerecht um.

  Im dritten Schwerpunkt geht es nochmal um die Optimierung Ihrer Website für ein gutes Ranking in den Suchmaschinen: diesmal durch die Erweiterung der Metatags und sinnvolle Ergänzungen im head-Bereich. Außerdem erfahren Sie, warum Domainnamen so wichtig sind und lernen Methoden zur Popularitätssteigerung Ihrer Website kennen.

• Woche 2
  CSS: Flexible Schrift- und Layoutgröße & vertikale Menüboxen
  Suchmaschinenfreundliche und barrierefreie Organisation der Inhalte

  Im CSS-Schwerpunkt dieser Woche erfahren Sie, welche Möglichkeiten Sie haben, ein "elastisches" Layout und Schriftbild zu erzeugen. Und damit Ihre Website übersichtlich bleibt, erweitern wir das Seitenmenü um eine vertikale Menübox. Dabei vertiefen und festigen Sie nochmal die wichtige float-Eigenschaft von CSS.

  Außerdem beschäftigen wir uns in der zweiten Woche mit der suchmaschinenfreundlichen Organisation der Inhalte Ihrer Website. Dabei erfahren Sie mehr über die Relevanz der Überschriften, Textinhalte und Grafikbeschriftungen für "Mensch und Maschine" (Suchmaschinen und Lesegeräte). Und auch die sogenannten "logischen Auszeichnungen" der Inhalte für Lesegeräte werden erläutert.

• Woche 3
  CSS: Bildergalerie & Zoom-Effekt
  Checkliste Barrierefreiheit & Sitemap-Erstellung

  Die meisten Bildergalerien werden mit einer Skriptsprache erstellt (JavaScript, Ajax usw.). Doch was, wenn der Nutzer die Skriptanwendung abschaltet, was gar nicht mal so selten ist? CSS wird von jedem Browser interpretiert, so erstellen wir eine Bildergalerie mit reinen Cascading Stylesheets.

  Im zweiten CSS-Schwerpunkt dieser Woche erfahren Sie, wie Sie Grafiken mit reinem CSS vergößern. Für einen solchen "Zoom-Effekt" greifen wir auch diesmal nicht in die Skript-Kiste, sondern bedienen uns einer Methode aus der CSS-"Schatzkiste". So ist gewährleistet, dass die Ergebnisse für jeden Nutzer, unabhängig von dem System und Browser, sichtbar sind.

  Ist Ihre Website barrierefrei und somit suchmaschinenfreundlich? Wir überprüfen die HTML-Struktur und CSS-Dateien Ihrer Website mithilfe einer Checkliste für Barrierefreiheit.

  Nicht nur Besucher freuen sich, wenn sie eine Sitemap vorfinden, auch Suchmaschinen werden es Ihnen danken. Sie erfahren, was eine Sitemap ist und wie Sie sie erstellen.

  Außerdem erhalten Sie Informationen, wie Sie Ihre Website sinnvoll in den relevanten Suchmaschinen und Verzeichnissen anmelden.

Wieviel Zeit sollte ich für den Workshop einplanen?
Für diesen Workshop sollten Sie ca. 10 - 15 Stunden pro Workshopwoche für das Lesen der Unterlagen und die Lösung der praktischen Übungen und Aufgaben einplanen. Je nach Vorkenntnissen und Umfang Ihres Projektes kann Ihr Zeitbedarf auch nach oben oder unten abweichen.