Top im Web - Webpublishing mit Dreamweaver
Kurs der Volkshochschule und der Universität Bern

Achtung: Diese Seiten werden seit Jahren nicht mehr aktualisiert und enthalten teils Aussagen, die inzwischen völlig veraltet und überholt sind. Sie sind nur noch aus Archiv- und Nostalgiegründen hier abrufbar.

Allgemeines

• Dieses Programm ist dynamisch - das heisst: es kann sich jederzeit geringfügig ändern... je nach Fortschritt und vor allem den Wünschen der TeilnehmerInnen, die jederzeit willkommen sind.
• Direkt zu: Teil 1 / Teil 2 / Teil 3 / Teil 4 /
  Teil 5 / Teil 6 / Teil 7 / Teil 8 / Teil 9 / Teil 10 /
  Teil 11 / Teil 12
  

Teil 1: Basics, Teil 1

• Gegenseitiges Vorstellen & Kennenlernen
• Übersicht des Programms, Kursziele, was kann der Kurs bieten und was nicht
• Erster Besuch der Kursplattform
• Literatur zu den Kursthemen: Bibliographie, ausgewählte Bücher
• Was ist "gutes Webdesign"? Versuch einer Bestandesaufnahme in Gruppen und am Whiteboard
• Gute und schlechte Beispiele von Websites
• Gute weiterführende Pages: Webmonkey, Coolhomepages, W3schools, Planung einer Site
• Falls Zeit reicht: Programm einrichten, Grundfunktionen von Dreamweaver; "freies Üben" und Fragen / Antworten - dazu Übung 1
  

Teil 2: Basics, Teil 2

• Check: Sind Fragen bezüglich dem verteilten Material und dem 1. Teil?
• Programm einrichten, Grundfunktionen von Dreamweaver; "freies Üben" und Fragen / Antworten - dazu Übung 1
• Fragen & Antworten "on the go", 1. Teil Sites definieren, sinnvolle Dateiablage, erlaubte Dateinamen und weitere Konventionen (Merkblatt hier abrufbar)
• Sites definieren (warum, wie, Vorteile, Funktionen) - dazu Übung 2
• Dateien auf den und vom Server laden mit dem internen Site-Tool
• Textformatierungen, Seitentitel, Farben (was kann das "Eigenschaften"-Fenster)
• Einfügen von Bildern und Links (auch: Anker innerhalb der gleichen Seite) - dazu Übung 3
• Vorschau in Browser / welche Browser zum Testen?
• Selbständiges Üben mit Fragen / Antworten

Teil 3: Basics, Teil 3

• Tabellen-Einführung: Sinn und Zweck unsichtbarer Tabellen, Tabellen formatieren - dazu: Übung 4
• Arbeit an einer Beispiel-Website (Rohmaterial dazu hat es hier für den Sommer und hier für den Herbst und Winter) - oder benützen Sie Ihr eigenes Material.
• Eure konkrete Aufgabe: Die in den Übungen 1-4 besprochenen Sachverhalte in der Praxis probieren.
• Ziel: Übung mit Dreamweaver gewinnen, erste Handgriffe werden zur Routine.
• Tabellen "plus" (zuerst: von Hand zeichnen)
• Der Trick mit dem 1x1-Pixel (Shim; für Shim-Download den folgenden Bereich zwischen den Bindestrichen mit der rechten Maustaste anklicken und "Bild speichern unter" / "Save image as" wählen: -- --)
• Tabellen als Layouthilfsmittel: Übung 5
• Flash-Buttons

Teil 4: Basics konsolidieren / CSS 1

• Fragen und Antworten zu den Tabellen
• Theorie: Einen Domainnamen für sich reservieren, Serverplatz besorgen
• Abrufstatistik, unsichtbare Counter
• HTML-Code: Die wichtigsten Regeln und Tags (Gruppenarbeit)
• Stylesheets / CSS: Übung 5b
• Selbständiges Arbeiten
• Abspeichern einer Seite als Vorlage, einfache (Save As) und komplexe Version angetippt (Templates)
  
  

Teil 5: Grafik und Rollovers

• Grafiken und Fotos scannen
• Grafiken fürs Web optimieren (v.a. Photoshop) - dazu Übung 6
• Unterschiedliche Bildformate; was ist wann OK?
• Selbst einfache Grafiken und Buttons herstellen (Photoshop) - Dazu Übung 7
  
• Grafiken in eigene Website einbinden
• Rollover-Effekte und Image Swaps mit Dreamweaver und Fireworks einfach gemacht
  
  
  
  
• Image Maps (Bilder mit klickbaren Bereichen, sog. "Hotspots")
  
  
  
  

Teil 6: Fireworks, Teil 1

• Kurzdemo anhand eines fertigen Beispiels
• Überblick: Was soll und kann Fireworks? Welche Werkzeuge stehen zur Verfügung? - Dazu Übung 8
• Image Maps zeichnen und als HTML samt Bildern in Dreamweaver exportieren - Dazu Übung 9
• Fragen und Antworten
• Weitere Eigenschaften an ein Objekt hängen (Statusleistentext, Pulldownmenu) - Dazu Übung 10

Teil 7: Fireworks, Teil 2

• Fragen und Antworten
• Ganze Websites in Fireworks zeichnen - Dazu Übung 11
• Navigationsleisten mit Rollover-Buttons- Dazu Übung 12
• Slices machen, sauber optimiert exportieren, Dateigrösse minimieren - Dazu Übung 13

Teil 8: Fireworks, Teil 3 / Templates

• Besuch eines Fireworks-Profis: Erweiterte Möglichkeiten
• Fortsetzung Export: Einzelne Elemente exportieren - Dazu Übung 14
• Dreamweaver-Vorlagen (Templates) optimal nutzen - Dazu Übung 15
• Fragen und Antworten

Teil 9: Promotion, Suchmaschinen, Feedback

• Theorie: Websites bekannt machen
  • Eintrag in Suchmaschinen: Manuell oder... z.B. hier! Übersicht von Yahoo
  • META-Tags: Versteckte Suchmaschinen-Köder Generator, Theorie und Anleitung, Einschränkungen
    
• Einbau von Interaktivität; Formulare,
• CGI-basierte Formulare, Gratis-CGI-Dienst
• Dazu Übung 16
• Formularcodes können hier geholt und kopiert werden: Code ohne und Code mit Prüfungsscript
  
• Trick 77: Layers in Tabellen umwandeln
• Beispiel einer Gratis-Suchmaschine
• Beispiel eines Gratis-Gästebuchs
  
• Kurzhinweis: PDFs erstellen
• Favicons online erstellen (die kleinen Bilder neben der Webadresse in der Browser-Adresszeile); mit Code link <rel="shortcut icon" href="http://www.deinserver.ch/images/favicon.ico" /> im <head> einbinden

Teil 10: htaccess / robots.txt / Allgemeine Fragen

• XHTML / CSS: Tabellenloses Design (Übung 23)
• Passwortschutz einer Website leicht gemacht
• Erweiterte Schutz- und sonstige Funktionen mit htaccess
• Passwortschutz und Fehlerabfangseiten: Übung 18
• robots.txt gegen Bösewichte - und mehr
• Mailadressen gegen Spammer schützen, z.B. durch Cloaking - ob dies aber was bringt, ist umstritten
• Allgemeine Fragen und Antworten, selbständiges Arbeiten

Teil 11: Dynamik / PHP / mySQL

• Weitere Möglichkeiten mit Javascript (via "Behaviors" im Dreamweaver)
• Javascript-Link-Tips (Eigenstudium nach dieser Lektion)
• Weitere nützliche Dreamweaver-Funktionen (Übung 19)
• Dynamische Websites 1: PHP (Übung 20)
• Dynamische Websites 2: Anwendungen mit PHP und mySQL ganz kurz angetippt (Übung 24)
• Einfache Datenbanken (Beispielseite)
• PHP-includes, Nachfolger der Frames (Übung 22)

Teil 12: Schlussrunde

• Wichtige offene Fragen beantworten
• Popup-Fenster machen (dazu Übung 21)
• Durchgehen der selbstgemachten Websites
• Kurzer Blick auf fortgeschrittene Animations-Möglichkeiten mit Flash
  
• Schlussbesprechung, Feedback, Fragebogen