Lernziele

  • Die Studierenden kennen die Benutzeroberfläche von Macromedia Dreamweaver 8.
  • Sie beherrschen die Siteverwaltung und haben das Prinzip des Ein- und Auscheckens von Dateien verstanden.
  • HTML & CSS Dokumente können Sie selbständig erstellen.
  • Layoutentwürfe können Sie in HTML mittels CSS-Box-Model (DIV/Ebenentechnologie) umsetzen.
  • Den Aufbau von CSS-Style-Definitionen (Stile) haben sie verstanden und können eigene Stile weitgehend eigenständig festlegen.

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

+++ ACHTUNG: Bitte halten Sie für die nächsten beiden Praktika Ihre Konzepte bereit
(analog oder digital). Vor allem bringen Sie Ihre Funktionsskizze, Layoutentwürfe, Assets etc. zur weiteren Projektarbeit mit! +++

Als Grundlage für die letzten beiden Praktika und die Projektarbeit dienen das Online-Praktikum “HTML & CSS” aus dem WS 07/08[LINK], insb. Ihre Protopage-Informationen und die Vorlesung “Elektronische Dokumente” aus dem WS 07/08 [LINK]. Insbesondere haben Sie das CSS-Box-Modell verstanden!

Als Erweiterung Ihrer Medienkompetenz im Umgang mit verschiedenen Softwareprodukten beschäftigen Sie sich in diesem Praktikum mit Macromedia Dreamweaver 8. Das Produkt verwendet das Prinzip WYSIWYG: “”What You See Is What You Get” und erlaubt eine Websiteerstellung im Entwurfs-, Code- oder geteiltem Modus. Als Vorbereitung für den 1. Teil des Praktikums (Übungen), verschaffen Sie sich bitte einen Überblick der grundlegenden Funktionen des Programms.

  • Programmoberfläche und Site-Verwaltung (Remote-Sites anlegen) als PDF-Datei eines Vorbereitungsvortrages des SS06 [s. u. Downloads: Praktikumsvorbereitung].
  • Video “Remote-Sites anlegen” (8:27 min) auf video2brain.com [LINK]: “Die Remote-Site ist der Webserver, auf dem Ihre Website im Internet oder Intranet landet. Dreamweaver erlaubt die direkte Anbindung und integriert FTP-Zugang und andere Anbindungsformen. Diese Lektion ist ein Wegweiser durch die Vielzahl der Einstellungsmöglichkeiten.” (Tobias Hauser, Christian Wenz)
  • Video “Absolute CSS-Positionierung” (4:06 min) auf video2brain.com [LINK]: “Die absolute Positionierung erlaubt das exakte Platzieren von Elementen. Die entsprechenden Elemente sind direkt in Dreamweaver integriert. Der Film zeigt die Vor- und Nachteile dieser Methode.” (Tobias Hauser, Christian Wenz)
  • Programmoberfläche im Detail, Funktionen, etc. –> ein vollständiges Tutorial zu Dreamweaver 8 auf teacherclick.com [LINK] (als Themenüberblick und Online-Nachschlagewerk gedacht)

Praktikumsdurchführung

Im ersten Teil des Praktikums sollen Sie die Erkenntnisse aus der Praktikumsvorbereitung rekapitulieren und die Anwendbarkeit dieses Wissens vertiefen. Dazu werden Sie eine Übungssite einrichten und im Programm mit einer fertigen Website arbeiten.

1. Teil: Übungen (Einzelarbeit)

Wie Sie schon bemerkt haben, befinden sich im Downloadbereich keine Praktikumsmaterialien. Alle Materialien, die Sie benötigen, haben Sie schon erstellt. Sie werden an Ihren persönlichen Profilen aus dem zweiten Online-Praktikum des vorangegangenen Semesters weiterarbeiten.

  1. Persönliches Webgruppen-Profil zur Bearbeitung vorbereiten
    1. Laden Sie das Archiv mit Ihrem Webgruppen-Profil aus dem Seminarspeicher herunter.
    2. Transferieren Sie das Archiv mittels SFTP in das “public_html”-Verzeichnis Ihres Linux-Gruppenaccounts (oder eines seiner Unterverzeichnisse)
    3. Entpacken Sie das Archiv, z.B. mittels “gunzip”. Welche URL hat dann die Startseite Ihres Web-Gruppenprofils?
  2. Übungs-Site in Dreamweaver einrichten
    1. Starten Sie Dreamweaver 8 und erstellen Sie eine neue Site mit geeignetem Namen.
    2. Geben Sie die URL an, die direkt auf Ihre persönliche Profilseite verweist.
    3. Als Lokalen Stammordner wählen Sie für diese Übung einen neuen Ordner auf Ihrem persönlichen Laufwerk “G:”.
    4. Geben Sie für Remote-Server (FTP) die Zugangsdaten für Ihren Unix-Account (eldokXX) an. Achten Sie bei der Einrichtung auf die Aktivierung von SFTP. Geben Sie auch den genauen Ordner auf dem Server an, den Sie als Einstiegspunkt für die Remote-Verbindung verwenden wollen.
    5. Aktivieren Sie das Ein- und Ausschecken für die Dateifreigabe.
    6. Prüfen Sie die Einstellungen mit einer Testverbindung.
  3. Änderungen vornehmen
    1. Stellen Sie eine Verbindung mit dem Remote-Server her und checken Sie alle relevanten Dateien Ihres persönlichen Profils aus. Achten Sie darauf, dass Sie nur Ihre Profildateien auschecken und nicht Dateien Ihrer Teammitglieder.
    2. Was stellen Sie bzgl. der Kennzeichnung aller lokaler und via Remote verfügbarer Dateien fest? Wie sind die einzelnen Dateinen Ihres persönlichen Profils vs. Dateien Ihrer Teammitglieder gekennzeichnet und zugänglich für Sie?
      (Gegebenenfalls müssen Sie zum Betrachten von Dateien, die nicht nur Ihr eigenes Profil betreffen, den Ordner auf dem Remote-Server wechseln.)
    3. Zwischenziel: Sie können Ihre persönlichen Dateien lokal ändern und kennzeichnen diese Dateien auf dem Romet-Server entsprechend, dass Sie daran arbeiten.
    4. Öffnen Sie aus der Lokalen Ansicht Ihr Profil und machen Sie sich mit der Arbeitsumgebung von Dreamweaver 8 durch die vorhanden HTML- und CSS-Materialien vertraut.
    5. Betrachten Sie sich die HTML-Seite in der Code/ Teilen/ Entwurfsansicht.
    6. Welche Möglichkeiten haben Sie CSS-Style-Informationen anzupassen, und wie können Sie den Code der CSS-Datei aufrufen?(Bitte im Übungsprotokoll notieren.)
    7. Ändern Sie ein paar CSS-Style-Informationen nach Belieben ab oder ergänzen/ reduzieren Sie CSS-Stile. (Notieren Sie die Veränderungen im Übungsprotokoll,)
    8. Sie können ohne Bedenken die alte Version überschreiben bzw. erweitern. Sie müssen dazu keine neue Kopie oder ähnliches erstellen. Arbeiten Sie einfach an der aktuellen Version weiter.
    9. Durch einen “Upload” oder das “Einchecken” der bearbeiteten Datei können Sie das Ergebnis sofort online im Webbrowser betrachten.
    10. Einige Profile verwenden in der Gruppe die selbe Style-Datei. Was stellen Sie im Umgang mit der Dateiverwaltung (Ein- und Auschecken) und der Möglichkeit Dateien zu bearbeiten fest? Wie finden Sie den Umgang mit Dreamweaver von der Erstellung einer HTML-Site (bzw. CSS-Stil als Änderung der HTML-Seite) bis zur Veröffentlichung auf dem Remote-Server im Vergleich zur Arbeit mit einem Text-Editor (und ggf. externem SFTP-Programm) aus dem Online-Praktikum “HTML & CSS”? Schildern Sie Ihre Erfahrungen im Übungsprotokoll anhand einer kurzen Pro- und Contra-Liste.
    11. Geben Sie im Übungsprotokoll zur schnellen Erreichbarkeit die Internetlinks zu Ihren persönlichen Profilen mit an.
  4. Übung abschließen
    • Verschieben Sie das Übungsprotokoll in einen Unterordner Ihres “public_html” Ordners auf dem Server “freud.rz.tu-ilmenau.de”.

2. Teil: Arbeit am Projekt

Im zweiten Teil des Praktikums sollen Sie sich weiter mit dem Programm beschäftigen und intensiv an Ihrem Projekt arbeiten.

  1. Einrichtung der Projektumgebung (Einzelarbeit):
    1. Erstellen Sie sich jeder eine neue Site in Dreamweaver, die auf Ihr gemeinsames Projekt verweist.
    2. Als lokalen Stammordner verwenden Sie einen Unterordner Ihres Projektverzeichnisses auf Laufwerk “G:”
    3. Die Einstellungen entsprechen weitestgehend den schon im Übungsteil verwendeten Daten. Verwenden Sie auch für diese Site
      das Prinzip des Ein- und Auscheckens und benutzen dazu eine entsprechende individuelle Namenskennzeichnung.
    4. Cloaking kann ggf. günstig für Sie sein, wenn Sie bestimmte Dateien Ihres lokalen Ordnern nicht auf den Server übertragen wollen.
  2. Umsetzung der Struktur als HTML-CSS-Box-Layout (Gruppenarbeit):
      Sie haben Ihre Funktionsskizze/ Layoutentwürfe/ Skribbles vorliegen. Nehmen Sie diese als Grundlage für die Entwicklung eines HTML-CSS-Rahmenlayouts, das das Prinzip des CSS-Box-Modell berücksichtigt.

    1. Erstellen Sie gemeinsam ein CSS-Box-Layout für Ihr Websiteprojekt unter Verwendung von DIV-Tags.
    2. Kennzeichnen Sie ggf. die DIV-Elemente mit einem internen Namen, um in der CSS-Style-Definitionen eindeutige Formatierungen für entsprechende Bereiche vornehmen zu können.
    3. Als visuelle Unterstützung können Sie für diesen Projektstatus z.B. eine individuelle Hintergrundfarbe/ Dummy-Texte für das entsprechende DIV-Element oder andere Platzhalter für Ihre Inhalte, Bilder, Navigationselemente usw. verwenden.
  3. Erstellung der Website-Navigation (Gruppenarbeit) :
    1. Hierzu müssen nicht zwangsläufig ggf. verwendete Grafiken fertig gestellt sein. Wenn dies der Fall ist, können Sie Grafiken schon mit einbinden. Falls dem nicht so ist, verwenden Sie Platzhalter wie oben beschrieben. Die finalen Grafiken, falls verwendet, können später mittels CSS-Style-Definition neu referenziert werden.
    2. Wichtig ist die ausschließliche Arbeit im Rahmen der CSS-Möglichkeiten. Die Navigation muss auch bei abgeschalteten Bildern, deaktiviertem Javascipt usw. funktionieren.
  4. Ziel des Praktikums ist ein Grundlayout mit (einer) zentralen CSS-Style-Datei(en) Ihres Webprojektes mit funktionierender Navigationstechnik, das Ihre Funktionsskizze widerspiegelt. Ein solches Zwischenergebnis kopieren Sie bitte in den Ordner mit dem Übungsprotokoll und erstellen im Anschluss aus dem gesamten Ordner ein TGZ-Archiv. Schicken Sie an den Praktikumsbetreuer eine E-Mail,
    die einen Internet-Link auf das TGZ-Archiv enthält.

Archivhinweis

Im Praktikum besteht für Sie die Möglichkeit Websites der vergangenen Semester, auf einem separaten Notebook, zu betrachten.

Downloads

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

  • Praktikumsvorbereitung: » Präsentation aus dem SS06: Dreamweaver-Oberfläche, Site-Verwaltung (PDF) [LINK]

Vertiefende Materialien

Programmbeschaffung:

  • Dreamweaver 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 zu “HTML & CSS”, Dreamweaver & co:

  • Online-Nachschlagewerk SELFHTML []
  • 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]
  • Adobe hat für die neue Produktfamilie “CS3″ viele öffentlich zugängliche Videotutorials für die Design-Suite zur Verfügung gestellt, unter anderem auch sehr gute Einführungen für Dreamweaver CS3. Die meisten Funktionen sollten aber auch schon in Dreamweaver 8 funktionieren. [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]