www.gemeinde-michendorf.de - Die private Webseite für die Ortsteilen Michendorf, Wildenbruch, Langerwisch, Wilhelmshorst, Fresdorf und Stücken
Webkartographie
Klicken Sie auf einen Teil der Karte um die Vergrößerung zu öffnen
 |
 |
 |
 |
 |
 |
 |
 |
 |
Erläuterung
Prinzip
So wird's gemacht
Probleme
nach unten
Info: Die Bildanzeige der Erläuterung arbeiten mit JavaScript! Sollten Sie JavaScript deaktiviert haben, weshalb auch immer, können die Funktionen in ihrem Browser nicht angezeigt werden!
Prinzip:
Sie lassen sich mit DreamWeaver 4 ein Bilderalbum erstellen, wandeln die Dateien etwas ab und erhalten eine Schaltung die es ermöglicht, sie als Kartenvergrößerung in der Webkartographie zu nutzen.DreamWeaver schreibt alle HTML-Dateien innerhalb weniger Sekunden, Fireworks erstellt alle Miniaturbilder automatisch, vergibt Dateinamen und legt für die Schaltung innerhalb des Projektes die Ordner an.
So wird's gemacht ab Macromedia/Adobe DreamWeaver und FireWorks 4 / MX
- Legen Sie sich einen Ordner innerhalb ihrs Projektes an. In diesen Ordner legen Sie alle Bilder (Karten) die Sie anzeigen möchten. Wichtig ist, dass wirklich nur die Bilder in den Ordner sind die sie benötigen. Dreamweaver und Fireworks wandeln alle Bilder um die sic in diesen Ordner befinden!
- Öffnen Sie Dreamweaver.
- Gehen Sie auf "Befehle/Webfotoalbum erstellen...."
- Es öffnet sich ein Eingabefenster in dem Sie die Überschrift und Ünterüberschrift vergeben können, die Größe der Miniaturbilder die Fireworks herstellt könen Sie festlegen, das Ziel des Projektes und des zu erstellenden Bilderordners müssen Sie angeben, die JPG-Qualität ist wählbar und das Häkchen in "Dateinamen zeigen" sollten Sie entfernen. Außerdem besteht die Möglichkeit die Anzahl der Spalten für die Tabelle festzulegen. In unserem Beispiel haben wir eine Karte in 9 (3x3) gleiche Teile in Photoshop zerlegt, unsere Tabelle sollte also 3 Spalten groß sein.
- Nur noch auf OK Klicken und Dreamweaver und Fireworks arbeiten für uns.
- Das Ergebnis nach nur wenigen Sekunden sieht so aus! Fireworks hat 9 Miniaturbilder von unseren Bildern hergestellt, diese Bilder in einer von ihm erstellten Ordner "Piktograme" abgelegt. Dreameweaver hat weiter die HTML-Datei index.htm erstellt. Das ist die Seite mit den Tabellen der Miniaturbilder. Weiterhin hat er den Ordner "Seiten" erstellt in dem er alle HTML-Dateien der einzelnen Originalbilder abgelegt hat.
- jetzt müssen wir an die von Dreamweaver erstellte Seite "index.htm" Hand anlegen. Öffnen Sie dazu die "index.htm"Seite, wählen Sie die Tabelle mit den Bildern aus und tragen Sie in der Eigenschaftspalette für Zellauffüllung, Rahmen und Zellraum jeweils eine "0" ein. Jetzt Das Ergebnis müßte jetzt so aussehen! Nach dem Sortieren der Tags in der Codeansicht sollte die Tabelle in Ordnung sein. Die abschließende graphischr Gestaltung der Überschrift und der gesamten Seite ist natürlich individuell zu lösen, je nach den Layout der Homepage. Endergebnis!
- Das Aussehen der sich öffnenden Seiten kann nun auch individuell gestaltet werden. "Zurück | Anfang | Vor" kann mittig pltziert werden, die Überschrift, von Dreamweaver automatisch erstellt, ist sicherlich Veränderungsbedürftig. Das mögliches Endergebnis könnte so aussehen!
- Um ein schnelles Laden der Bilder zu gewähleisten ist es wieder von Vorteil die Bilder im Hintergrund vorzuladen. Dazu gehen Sie in den BODY-Tag und öffnen die VerhaltensPalette, klicken Sie auf das + Zeichen in der VerhaltensPalette und wählen Sie "Bilder vorausladen". In dem sich öffnenden Menü wählen Sie die entsprechenden Bilder aus, mit dem + Button in der VerhaltensPalette werden Bilder zugefügt, mit OK bestätigen. Die entsprechenden JavaScripte werden automatisch von DreamWeaver in den Quelltext eingefügt!
- Jetzt sollten Sie ihre Seiten mit den einzelnen Browsern überprüfen! Viel Glück!!
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
){kind=link}
Probleme:
Das ganze funktioniert bis HTML 4.01 und XHTML 1.0-Transitional, ab Variante XHTML 1.0-Strict und XHTML 1.1 werden Tabellenzeilen nicht mehr nahtlos aneinandergefügt!!! In der Waagerechten entstehen also Leerräume. Als Lösung bleibt nur die absolute Positionierung mit CSS über das DIV-Element! - Betroffen: Netscape und Mozilla Browser.