Montag

Das Handwerk erlernen I

..:: I ::.. Technische Themen + Probleme
rund um das Projekt: "Website":

1. Welche Kenntnisse und welche Software werden benötigt?
2. Providersuche und Domainsicherung

..:: II ::.. Organisation eines Internetauftritts

1. Zielgruppenanalyse
2. Materialsichtung - Materialsortierung: die Navigation entsteht
3. Einrichtung der Lern-Website auf dem Rechner
   1. Herstellen einer logischen Ordner-Struktur
   2. Regeln für die web-taugliche Benennung von Ordnern und Dateien

..:: III ::.. Dreamweaver

1. Die Oberfläche des Programms: Umgehen mit "Bedienfeldgruppen" und der "Code-" / "Entwurf"-Ansicht und so einigem anderen ...
2. Dreamweaver die Verwaltung unserer Homepage übertragen: die "Site"-Verwaltung" + ihre Bedeutung
3. Einlesen einer bereits bestehenden Homepage ('Beispiel-Website') in die Site-Verwaltung von Dreamweaver

..:: VI ::.. Eröffnung der Baustelle "Homepage 'Lernen'"...

1. Der Quellcode: kleiner Ausflug in die Eigenheiten des HTML
2. Text-Formatierung mit HTML: die "TAGs" für Überschriften, Listen, Fließtext und das Hyperlink werden zugewiesen

Dienstag

Das Handwerk erlernen II

..:: I ::.. CSS (Cascading Style Sheets

Erste Formatierarbeiten mit CSS:
Vorarbeit: die HTML-TAGs <p>, <h1>, <h2>... <ul><li>, <ol><li> und das <a href...> werden Beispieltexten zugewiesen

• "Harte Formatierung" via CSS: <TAG>-Formatierung
• "Weiche Formaierung" via CSS: Formatierung mit "Klassen"

..:: II ::.. Hyperlinks:

• Externe "http://www.google.de"
• und interne (relative) Hyperlinks "../ordner/datei.htm"
• Anlegen von Ankern (z.B. für eine Top-Down-Navigation)
• Download-Links: Fremdformat-Verlinkung wie 'pdf', 'bmp' oder 'doc'
• Das E-mail Link

CSS-Formatierung von Hyperlinks und ihren verschiedenen Zuständen:

• a:active, a:hover
• a:visited

..:: III ::.. Tabellen:

• Definition von Tabellen
• Eigenschaften von Tabellen und Tabellenzellen
• Verschachtelte Tabellen
• Layout-Tabellen + Content-Tabellen
• Grafik - Text - Tabelle:
  Kniffs und Tricks rund um die sich recht eigensinnig verhaltenden HTML-Tabellen ... und einige sich noch verquerer verhaltenden Browser ...

Mittwoch

Einüben des Gelernten:
Nachbau einer Homepage

Kaum zu glauben, aber eine wenig attraktive 4-spaltige / 4-zeilige Layout-Tabelle ist die Grundlage für ein passables Erscheinungsbild der Gärtnerei «Hacke & Spaten». [Abb. 1]

Die Beispiel-Website enthält einige "Schlaglöcher": Problemstellungen, mit denen sich jeder Webentwickler immer wieder konfrontiert sieht.
Z.B. die Handhabung der Layout-Tabelle:
mediengerecht (für die Ausgabe auf dem Monitor) wäre eine 100%-ig flexible Tabelle, die sich immer an die Breite des Browserfensters anpaßt. [Abb. 2]

Selten jedoch kommt ein Screen-/Web-Layout ohne fixierte Bereiche aus.

Eine Mischung aus flexiblen und fixierten Bereichen des Layouts ist dann der "ideale Kompromiß".

Lernziel ist heute: Sie sollen flott werden im Bau von mediengerechten Layouts und die Methodik der sicheren Kompromisse kennenlernen.

Donnerstag

Ergänzungen + Ihr eigenes Projekt

..:: I ::.. Stoff aus Teilnehmerwünschen

• Ihr Thema!
• Wiederholungen ?
• Vertiefungen ?

Bei Bedarf und Interesse der TeilnehmerInnen:

• Einstieg in das Thema "CSS-basiertes Layout"
• Nutzen und Anpassen fertiger Layouts, die Dreamweaver anbietet

• Kontakt-Formular erstellen, mit CSS formatieren und mit Javascript auf seine Plausibilität prüfen
• Einbau einer Grafik-Animation mit einem Dreamweaver- eigenen Roll-Over Javascript
• Web-Fotoalbum

..:: II ::.. Arbeit an Ihrem eigenen Projekt

Falls Sie keine eigene Idee haben, wird Ihnen Material (Texte und Bilder) zum Bau einer Homepage zur Verfügung gestellt

Freitag

Abschluß + Arbeit an Ihrem eigenen Projekt

..:: I ::.. Letzte Checks vor dem Upload

• Fehler-Suche
• Meta-TAGs
• Tips zur Suchmaschinen-freundlichen Gestaltung des Internetauftritts
• Suchmaschinen-Optimierung
• Der Upload via FTP

..:: II ::.. - - Unverplante Zeit ! - -

• Individuelle Betreuung Ihrer Arbeit an Ihrer Homepage

Montag

Übungen zur Wiederholung / Auffrischung der grundlagen

..:: I ::..

Dreamweaver: Lernen-Site einrichten

..:: II ::.. CSS-Basics:

• CSS-Einbindung: Lokal, in den jeweiligen <TAG>
• CSS-Einbindung: Lokal, gesammelt in einem "Style"-Block
  im <HEAD>-TAG der HTML-Datei
• CSS-Einbindung: Zentral in einer externen CSS-Steuer-Datei

1. HTML-<TAG>-Zuweisung
2. <TAG>-Formatierung via CSS ["harte" Formatierung]
3. CSS-Klassen ["weiche" Formatierung]

..:: III ::.. CSS - Aufbau

1. CSS-IDs
2. Erweiterte CSS-Notationsmöglichkeiten:
   • Komma-Verknüpfung
   • Leerschritt-Verknüpfung
3. CSS-Datei optimieren

Dienstag

CSS-Handwerk

..:: I ::..

• Elementfluss / Positionierungen mit den Befehlen "position", "float" und ihrer Werte
• Sichtbarkeit: "visibility" und "display"

..:: II ::.. Problemzone "Box"

• Der Browserkrieg um die "Box" und die Beteiligten:
  margin, padding, width / height und border und die Browser

..:: III ::.. Start des Nachbaus der Gärtnerei-Website [siehe Mittwoch]

Mittwoch

Einüben des Gelernten:
Nachbau einer Homepage

Aus einer Layout-Musterdatei von Dreamweaver wird in vielen kleinen Schritten (die wir dokumentieren) die "Gärtnerei-Homepage".

Da es sich um ein CSS-basiertes Layout handelt, ist das schrittweise Kennenlernen einer uns fremden CSS-Datei besonders wichtig. [Abb. 2].
Das gehört zum täglichen Handwerk der Web-Designer und Web-Entwickler, denn selten wird ein CSS-basiertes Layout komplett selbst entwickelt: das Rad muß nicht neu erfunden werden.

Es müssen uns einige wichtige CSS-Notationsregeln und Browser-'Gewohnheiten' bekannt sein, damit wir das Layout nach unseren Vorstellungen umgestalten können.

Nach der Arbeit am Layout nähern sich eher vergnügliche Aufgaben: die Ausgestaltung des Internetauftritts mit interessanten und nützlichen Erweiterungen, z.B. einem animierten Menü [Abb. 3], einer Bildergalerie (Lightbox), einer Tooltip-Funktion wie der, die ich hier auf die Miniaturbilder angewendet habe.

Viele dieser sog. Gimicks verwenden Javascript. Auch ohne diese Programmiersprache zu beherrschen, werden wir mit ihr umgehen und die Skripts anpassen.

Das Suchen und vor allem das Testen solcher Scripts ist außerordentlich wichtig, wenn wir uns nicht selbst frustrieren wollen.

Donnerstag

..:: I ::.. Stoff aus Teilnehmerwünschen

• Ihr Thema!
• Wiederholungen ?
• Vertiefungen ?

Wir üben uns im Umgang mit Javascript - auch wenn wir die Programmiersprache 'Javascript' nicht beherrschen. Dreamweaver hält sog. "Spry-Widgets" bereit. Es sind vor allem animierte Menüs, die für uns interessant sind.

Im Web schauen wir uns z.B. nach Galerie-Scripts um oder anderen Features, die Ihnen für Ihr eigenes Projekt wichtig sind.

..:: II ::.. Arbeit an Ihrem eigenen Projekt

Falls Sie keine eigene Idee haben, wird Ihnen Material (Texte und Bilder) zum Bau einer Homepage zur Verfügung gestellt.

Freitag

..:: I ::.. Stoff aus Teilnehmerwünschen

..:: II ::.. - - Unverplante Zeit ! - -

• Individuelle Betreuung Ihrer Arbeit an Ihrer Homepage