Lernziele

  • Die Studierenden können Text-CSS-Stile definieren und diese als Formatvorlagen Textabschnitten zuweisen.
  • Sie sind in der Lage, Bilder in HTML-Dokumente zu platzieren und mit CSS zu formatieren.
  • Die Ebenentechnik beherrschen Sie weitgehend und können somit ein individuelles CSS-Layout gestalten.
  • Grundlagen des barrierefreien Webdesigns und dessen Anwendung beherrschen Sie.
  • Sie können mit Online-Validierungs-Tools umgehen.

Bewertung

Generelle Hinweise zur Bewertung der Mitarbeit in dem Praktikum entnehmen Sie bitte dem Dokument „Allgemeine Hinweise zum Praktikum ‚Elektronische Dokumente’ im SS08“. Für den Gruppenbewertungsteil werden folgende Dokumente hinzugezogen:

  • das Übungsprotokoll mit den Antworten auf die im Abschnitt „Praktikumsdurchführung“ enthaltenen Fragen
  • alle Resultate der einzelnen Übungen

Zur Abgabe dieser Dateien beachten Sie bitte die Hinweise am Ende der Praktikumsdurchführung.

Praktikumsvorbereitung

Für die Videos des ADOBE CREATIVE SUITE 3 VIDEO WORKSHOP gelten folgende Hinweise: Wählen Sie zu erst das Produkt “Dreamweaver CS3″ aus. Anschließend können Sie im mittleren Fenster u.a. den Titel des entsprechenden Videos markieren. Zum Starten des Videos klicken Sie dann im unteren Bereich “Details” auf den rechten Button “VIDEO ABSPIELEN”. Die gezeigten Funktionen sind in der Version Dreamweaver 8 nahezu identisch.

Link zum VIDEO WORKSHOP von Adobe: [Link]

  • Video “Text mit dem Eigenschafteninspektor verändern” (07:05 min) im o.g. VIDEO WORKSHOP: “Dieses Video zeigt Ihnen, wie Sie Texte in eine Webseite einfügen und wie Sie diesen Text über das Bedienfeld “Eigenschaften” bearbeiten.” (Helge Maus)
  • Video “Text mit CSS formatieren” (03:06 min) im o.g. VIDEO WORKSHOP: “Dieses Video zeigt die Gestaltung eines Texts mit dem Bedienfeld “CSS” statt des Bedienfelds “Eigenschaften”. Des Weiteren lernen Sie, wie Sie die Browser-Kompatibilität gewährleisten, indem Sie Ergebnisse mit CSS Advisor analysieren und lösen.” (Helge Maus)
  • Video “Bilder hinzufügen” (08:10 min) im o.g. VIDEO WORKSHOP: “Dieses Video zeigt, wie Sie mithilfe der Bedienfelder “Dateien” und “Elemente” und der Einfügeleiste ein Bild in eine Webseite einfügen. Außerdem zeigt es, warum es wichtig sit, Bilder in lokalen Site-Verzeichnissen zu halten und ALT-Texte für die Barrierefreiheit bereitzustellen.” (Helge Maus)
  • Video “Probleme bei der Veröffentlichung lösen” (03:46 min) im o.g. VIDEO WORKSHOP: “Dieses Video zeigt häufige Fehler, welche Sie eventuelle dran hindern, Ihre Seite zu veröffentlichen oder zu aktualisieren. Diese Anleitung hilft Ihnen bei häufigen Problemen weiter, wenn Sie Ihre Webseite aktualisieren und im Browser betrachten wollen.” (Helge Maus)
  • Wiederholen Sie die Grundlagen des Barrierefreien Webdesigns aus der Vorlesung
  • Eine Kurzeinführung zum Thema “Sprungmarken” finden Sie z.B. unter folgenden Links: [Link1], [Link2] oder [Link3]

Praktikumsdurchführung

1. Teil: Übungen

  1. Text mit CSS formatieren
    1. Öffnen Sie aus den Praktikumsmaterialien die Dateien “page1.html” in Dreamweaver.
    2. Fügen Sie in den Textbereich die beiden vollständigen Absätze “Herkunft” und “Heliotropismus” inkl. aller Links, Überschriften etc. der Wikipediaseite [Link] ein.
    3. Vergessen Sie nicht am Ende der Texte einen Quellennachweis anzufügen und diesem eine neue Klasse zuzuweisen, über die Sie alle Zitationen Ihrer Seiten zentral formatieren können.
    4. Ergänzen Sie im Kopfbereich eine Überschrift.
    5. Wiederholen Sie den Vorgang für die Dateien “page2.html” sowie “page3.html”.
    6. In den Textbereichen befinden sich verschiedene Selektoren, die Sie über die zentrale CSS-Datei “screen.css” formatieren sollen. Formatieren und ergänzen Sie die CSS-Text-Stile so, dass Sie nur mit relativen Größenangaben arbeiten. Verwenden Sie dabei mind. 3 verschiedene Größenarten in der gesamten CSS-Definition.
    7. Welche relativen Größen haben Sie verwendet und welche würden Sie davon für eine Textgestaltung empfehlen? Begründen Sie kurz Ihre Antwort.
  2. Bilder einfügen
    1. In der Datei “page2.html” wird das Logo der Seite nicht angezeigt. Woran könnte dies liegen? Diskutieren Sie im Übungsprotokoll kurz die Problematik zwischen den zwei generellen Verlinkungsarten.
    2. Korrigieren Sie auch den Fehler.
    3. Fügen Sie in alle drei Dateien in die Textbereiche das Bild “blumen.gif” inkl. einer kleinen Abbildungsunterschrift ein. Auf der ersten Seite sollen beide Elemente über dem Text, auf der zweiten Seite links und auf der dritten Seite rechts vom Text erscheinen.
    4. Achten Sie bei der Eingabe auch auf einen vernünftigen Alternativtext für die Bilder.
  3. Barrierefreiheit
    1. Fügen Sie in den Kopfbereich “Sprungmarken” zur Navigation, den Inhaltsabschnitt “Herkunft” und “Heliotropismus” ein.
    2. Welchen Vor- oder Nachteil bieten Sprungmarken in Bezug auf barrierefreies Webdesign?
    3. Im Verzeichnis der Praktikumsmaterialien befindet sich auch die Style-Datei “print.css”. Implementieren Sie diese so in alle drei Seiten, dass die Style-Definitionen aus ihr nur abgerufen und angewendet werden, wenn eine der drei Seiten über den Browser ausgedruckt werden soll.
    4. Welche wesentlichen Änderungen sind in der “print.css” definiert und welchen Zweck erfüllen diese?
  4. Site testen und validieren
    1. Erstellen Sie sich eine Übungssite, mit der Sie die Seiten auf einem temporären Verzeichnis Ihres Unix-Accounts testen können.
    2. Probieren Sie die unten angegebenen Validatoren an einer der drei Seiten aus und korrigieren Sie ggf. auftretende Fehler.
  5. Übung abschließen
    Verschieben Sie das Verzeichnis mit Ihrer erstellten Website in einen Unterordner Ihres “public_html” Ordners auf dem Server “freud.rz.tu-ilmenau.de”. Das Praktikumsprotokoll stellen Sie wie gehabt auf Ihrem Blog zur Verfügung.

2. Teil: Arbeit am Projekt

Setzen Sie die Arbeit an Ihrem Website-Projekt fort. Das Grundgerüst Ihrer Website sowie die Navigation sollten inzwischen erstellt sein. Verteilen Sie die Aufgaben nach Ihrem Storyboard und implementieren Sie Bilder, Texte und weitere Assets.

Achten Sie bei der Erstellung auf die 10 Gebote sowie barrierefreies Webdesign.

Ihr Projekt sollte die Validierungstests bestehen.

Bonuspunkte erhalten Sie für zusätzliche barrierefreie Funktionen, wie z.B. Bildschirm- und Druckversion des CSS-Layouts oder Sprungmarken usw., soweit dies für Ihr Projekt Sinn macht.

Downloads

Die nachfolgenden Downloads haben den Stand vom sommersemester 2007. Bitte verwenden Sie zum Öffnen der Dokumente deshalb das Ihnen bekannte Passwort aus dem Jahr 2007.

Praktikumsdurchführung:

  • Praktikumsmaterialien (ZIP) [Download]

Onlinetools zur Validierung

  • W3C Markup Validation Service [Link]
  • W3C CSS Validation Service [Link]
  • WEBXACT: online service for testing quality, accessibility and privacy [Link]

Vertiefende Materialien

Programmbeschaffung:

  • Dreamweaver 8 Testversionen für zu Hause:
    • Viele Dreamweaver Bücher in der Bibliothek haben eine 30 Tage Testversion als DVD beiliegen.
    • Auf der Website von Adobe ist die aktuellste Version DW CS3 als Testversion erhältlich [Link] .

Referenzkarte:

  • CSS Browser-Referenzkarte [Link]

Weiterführende Links: HTML & CSS, Dreamweaver & co

  • Online-Nachschlagewerk SELFHTML [Link]
  • CSS 4 you: “die deutsche Seite für Cascading Stylesheets (CSS)” [Link]
  • HilfDirSelbst.ch –> Adobe Dreamweaver Forum [Link]
  • CSS-Blog.com –> CSS-Hilfe, CSS-Links, CSS-Standards uvm. [Link]
  • TUTORIALS zu HTML & CSS
    • richinstyle.com [Link]
    • Workshop CSS: Allgemeine von css4you.de [Link]

Weiterführende Links: Barrierefreies Webdesign & Usability

  • WAI: Web Accessibility Initiative [Link]
  • BITV: Barrierefreie Informationstechnik-Verordnung [Link]
  • EinfachfürAlle: Aktion Mensch-Initiative für barrierefreies Webdesign [Link]
  • useit.com: usable information technology [Link]
  • TUTORIALS zu Barrierefreiheit
    • macximal-Blog: Maximale Informationen zu Webstandards und Barrierefreiheit [Link]
    • Barrierefreies-Webdesign.de [Link]