Lektion 19 - Wegbeschreibung

Admin
Administrator
Beiträge: 83
Registriert: Di 19. Aug 2014, 10:47

Lektion 19 - Wegbeschreibung

Beitrag von Admin » Di 19. Aug 2014, 11:16

Eine Wegbeschreibung erstellen

Eine weitere Möglichkeit für einen Leser, Kontakt aufzunehmen, ist: Einfach mal vorbei zu schauen.

Das ist Sinn und Zweck einer Webseite, auf der sich ein Verein oder ein Geschäft darstellt. Ein Messeveranstalter z.B. wird nicht nur eine Anfahrtsskizze, sondern auch einen Überblick über die räumliche Aufteilung des Gebäudes bereitstellen. Für eine Anfahrt kann man einen Routenplaner einbinden. Im Internet gibt es verschiedene Routenplaner, die man kostenlos verwenden darf. Lese bitte die Nutzungsbedingungen (Lizenz) - bevor du eine Karte oder einen Routenplaner einbindest.

Grundsätzlich unterliegen Stadtpläne dem Urheberrecht. Verlage verstehen da keinen Spaß. Du solltest also einen Straßenplan nur als Grundlage für einen eigenen Plan verwenden. Also maximal die Richtungen der Straßen nachzeichnen, aber den Rest der Karte solltest du selber gestalten.

Auf einer Grafik kannst du Bereiche anklickbar gestalten. Diese Funktion nennt man ­Imagemap. Im HTML-Text werden über die Koordinaten auf dem Bild die Flächen markiert, die einen anklickbaren Bereich bilden. Dieser Bereich wird dann mit einem Link hinterlegt, der z.B. auf eine Webseite führt.

Die Schwierigkeit beim Erstellen einer Imagemap ist die genaue Angabe der Koordinaten.

So sieht es im Quelltext aus:

Code: Alles auswählen

<img src="landkarte.png" width="435" height="360" border="0" alt="Landkarte" usemap="#map">
<map name="Landkarte">
<area <area shape="circle" coords="198,87,8"
href="grunes-eck.html" alt="Grünes Eck" title="gruenes-eck">
</map>
Zuerst fügst du die Grafik, also die Karte ein.

Code: Alles auswählen

<img src="landkarte.png" width="435" height="360" border="0" alt="Landkarte" usemap="#map">
Der Pfad zur Karte wird mit Höhe und Breite in Pixeln angegeben. Wie auch bei anderen Grafiken musst du einen Alternativ-Text angeben, falls die Grafik nicht angezeigt werden kann.

Mit der Angabe usemap="#map" legst du fest, dass die Karte mit dem Namen "map" als Imagemap verwendet werden soll. Der Name muss als Anker definiert sein. Füge also eine Raute vor dem Namen ein.

Der Name selber darf nur aus alphanumerischen Zeichen bestehen, also keine Leerzeichen. Als Sonderzeichen dürfen nur Minus "-", Unterstrich "_", Punkt "." oder Doppelpunkt ":" verwendet werden.

Code: Alles auswählen

<map name="Landkarte">
Mit <map name="Landkarte"> beginnt die Imagemap. Der Name der Map - in unserem Fall "Landkarte" - sollte immer angegeben werden.

Mit </map> beendest du die Imagemap.

Code: Alles auswählen

<area shape="circle" coords="198,87,8"
Mit <area ... definierst du einen Bereich, den du als Schaltfläche verwenden möchtest.

... shape="circle"... umschreibt die Form des Bereiches. Es können Rechtecke (rect), Kreise (circle) und unregelmäßige (poly) Formen verwendet werden.

... coords=""... beschreibt die Koordinaten der Fläche.

Die Koordinaten werden unterschiedlich definiert. Bei einem Rechteck besteht die Angabe aus 4 Zahlen:
  • Ein Rechteck(shape="rect") definierst du mit den Koordinaten für x1,y1,x2,y2
    wobei bedeuten:
    x1 = linke obere Ecke, Pixel von links
    y1 = linke obere Ecke, Pixel von oben
    x2 = rechte untere Ecke, Pixel von links
    y2 = rechte untere Ecke, Pixel von oben
  • Einen Kreis (shape="circle") definierst du mit den Koordinaten für x,y,r
    wobei bedeuten:
    x = Mittelpunkt, Pixel von links
    y = Mittelpunkt, Pixel von oben
    r = Radius in Pixel
  • Ein Polygon (shape="poly") definierst du mit den Koordinaten x1,y1,x2,y2 ... x,y
    wobei bedeuten:
    x = Pixel einer Ecke von links
    y = Pixel einer Ecke von oben
    Du kannst so viele Ecken definieren, wie du möchtest. Von der letzten definierten Ecke musst du dir eine Linie zur ersten definierten Ecke hinzudenken, die das Polygon wieder schließt.
Zum Bereich gehört natürlich auch der Pfad, zu dem der Bereich verlinkt.

Es ist recht schwierig, diese Koordinaten genau einzustellen. Einfacher geht so etwas mit einem Grafikprogramm, wie z.B. Gimp.

Übung

[col]Öffne die wegbeschreibung.html mit KompoZer und füge eine Überschrift ein. Ändere auch den Titel über Format - Seitentitel und -einstellungen. Speichere und schließe die Seite mit KompoZer.

Als Imagemap kann eine Landkarte, ein Lageplan oder eine andere Grafik verwendet werden. Verschiebe sie in den Ordner "bilder".|#
Klicke auf das Bild für die Darstellung in Originalgröße
[/col]
Anschließend öffnest du sie mit Gimp. Wähle im Menü [b]Filter - Web - ImageMap[/b]. Der ImageMap-Assistent öffnet sich. An der linken Seite des Assistenten findest du die Formen, mit denen du eine klickbare Fläche erzeugen kannst. Klicke darauf, um die jeweilige Form zu aktivieren. Markiere den Bereich im Bild und doppelklicke hinein, um die Markierung festzulegen.[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion19-2.png[/popup]
Ein weiterer Assistent öffnet sich. Hier definierst du die Datei oder die Seite, die über die Schaltfläche geöffnet werden soll. Möchtest du eine Internetadresse einfügen, stellst du ein http:// vor die Zieladresse.

Möchtest du eine E-Mail schreiben, wird das mailto: vorangestellt. Bei einer HTML-Seite, die innerhalb deines Webs hinterlegt ist, wählst du die Datei über den Dateimanager (kleiner Ordner) aus.

Zu jeder Option kannst du einen Verknüpfungstypen anklicken. Gimp trägt die notwendigen Zeichen automatisch ein. Der ALT-Text muss in jedem Fall mit ausgefüllt werden. Wähle einen kurzen Begriff für das Ziel. Die Koordinaten werden automatisch im Register der Form eingetragen:
[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion19-3.png[/popup][popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion19-4.png[/popup]
Hast du deine Bereiche festgelegt und die Pfade eingetragen, zu denen die Fläche beim Anklicken navigieren soll, speicherst du die Map als beispiel.map in das gleiche Verzeichnis wie das Bild.[popup]http://kompozer-8.kreativ-workshops.net/einst/screens/lektion19-5.png[/popup]
Hier habe ich als Beispiel Kompozergarten und Gimpelhausen als anklickbare Bereiche definiert. Öffne die beispiel.map mit einem Texteditor. Markiere und kopiere den gesamten Inhalt:

<img src="beispiel.png" width="500" height="400" border="0" usemap="#map" />

Code: Alles auswählen

<map name="map">
<!-- #$-:Image map file created by GIMP Image Map plug-in -->
<!-- #$-:GIMP Image Map plug-in by Maurits Rijk -->
<!-- #$-:Please do not edit lines starting with "#$" -->
<!-- #$VERSION:2.3 -->
<!-- #$AUTHOR:Anke Lange -->
<area shape="poly" coords="44,214,41,259,75,297,96,301,111,273,122,267,119,237,160,
223,120,186" alt="www.kompozer-web.de" href="http://www.kompozer-web.de" />
<area shape="circle" coords="370,307,61" alt="Wilber" href="images/gimp.png" />
</map>
Als Zusatz hat das Grafikprogramm noch Informationen zum Programm und Autor in die Map eingefügt. Diese sind nicht notwendig, sie informieren lediglich darüber, von welchem Programm und Autor die Map erstellt wurde.

Öffne die wegbeschreibung.html mit einem Texteditor. Setze den Cursor hinter <div id="inhalt">.

Füge den Inhalt aus der Zwischenablage hier ein. Speichere und schließe die HTML-Datei. Prüfe noch einmal, ob die Links alle richtig sind. Bei einem relativen Link, der auf eine Datei innerhalb des gleichen Webs verweist, darf kein http:// voranstehen.

Dein Ergebnis könnte so aussehen: die Imagemap

Für Hobbys, die an keinen geografischen Ort gebunden sind, kann man z.B. einen Screenshot mit anklickbaren Bereichen erstellen. Die Bereiche können dann zu weiteren Informationen führen.

Fertig ist dein Lageplan...

Benutzeravatar
kp2709
Beiträge: 52
Registriert: Mi 20. Aug 2014, 11:56
Wohnort: Bayern
Kontaktdaten:

Re: Lektion 19 - Wegbeschreibung

Beitrag von kp2709 » Mo 1. Sep 2014, 16:25

gutn tach(guten tag),

hier mein arbeit http://reikuma27.reikuma.bplaced.de/web/weg.html :) , mal schauen was kommt, ich freu mich :D :D :D :D :D :D :D

grüße
kurt
Das Leben ist ein Spiel, ich spiele für mein Leben gern!!!

anke
Beiträge: 207
Registriert: Di 19. Aug 2014, 15:24
Kontaktdaten:

Re: Lektion 19 - Wegbeschreibung

Beitrag von anke » Mo 1. Sep 2014, 16:29

Hallo Kurt

lustige Idee :)

Weiter gehts ;)

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 19 - Wegbeschreibung

Beitrag von eibauoma » Do 25. Sep 2014, 14:06

Ist es falsch oder zumindest nicht ganz richtig, einen Link als neuen Tab aufzurufen? (target="_blank" )
Ich empfinde es als angenehmer, wenn man nicht erst über Rücktaste zur besuchten Seite wechseln muss.

Mein Image-Map ist in Aktion.
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 19 - Wegbeschreibung

Beitrag von camouflage1984 » Do 25. Sep 2014, 15:03

Hallo eibauoma

Das sieht sehr gut aus. Du solltest Bildern immer eine Beschreibung geben ;)

Code: Alles auswählen

alt=""
eibauoma hat geschrieben:Ist es falsch oder zumindest nicht ganz richtig, einen Link als neuen Tab aufzurufen? (target="_blank" )
Falsch ist es nicht, nur wollen die meisten Leute selbst entscheiden ob sie die neue Seite in einem neuen Tab aufmachen wollen oder nicht ;) .

Weiter gehts.....

Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 19 - Wegbeschreibung

Beitrag von eibauoma » Do 25. Sep 2014, 15:18

danke, Camouflage - also lass ich das Öffnen im neuen Tab in Zukunft bleiben, aber wo fehlt der Alternativ-Text?

Ich meine jetzt diese Lektion
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 19 - Wegbeschreibung

Beitrag von camouflage1984 » Do 25. Sep 2014, 15:37

Hallo eibauoma

In deiner image map ;)

Code: Alles auswählen

<img src="images/landkarte.png" usemap="#map" border="0" height="450" width="600">
Gruß
camouflage1984
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Benutzeravatar
eibauoma
Beiträge: 45
Registriert: Mi 20. Aug 2014, 08:24

Re: Lektion 19 - Wegbeschreibung

Beitrag von eibauoma » Do 25. Sep 2014, 15:47

habs ergänzt, danke
[img]http://www.gimp-werkstatt.de/galerie/eibauoma/upload/Ausweise/unterschrift_eibauoma.png[/img][url=http://gimpfreak.bplaced.net/]meine Übungen mit dem Programm Kompozer[/url]

Hellriders
Beiträge: 40
Registriert: Di 18. Aug 2015, 23:02

Re: Lektion 19 - Wegbeschreibung

Beitrag von Hellriders » Do 1. Okt 2015, 19:26

Hallo,
mit meiner Wegbeschreibung hab ich es mir etwas einfach gemacht, aber googles Karten einzubinden ist doch erlaubt oder ? :)

wegbeschreibung.html

und um dann gleich den nächsten Schritt mitzunehmen, wie sieht es mit meinem Impressum aus? Ist das so ok?

Danke

gruß micha

camouflage1984
Beiträge: 244
Registriert: Di 19. Aug 2014, 14:34

Re: Lektion 19 - Wegbeschreibung

Beitrag von camouflage1984 » Do 1. Okt 2015, 20:17

Hallo

Faulheit siegt, würde ich mal sagen. Geht aber auch so...

Zu deinem Impressum kann ich dich nur auf diese Seite verweisen: http://www.gesetze-im-internet.de/tmg/__5.html

Ich empfehle diesen Generator, Du musst natürlich nicht Deine richtigen Daten dort angeben, sondern kannst auch fiktive nehmen.
Wenn Du das Impressum heruntergeladen hast, kannst Du es mit den richtigen Daten versehen!
Lachen ist gesund :-)
camouflage1984.de Webseite / wzp-galipix Das Galerie Script / wzp-cms Das einfache CMS / wzp-webdesign

Antworten

Wer ist online?

Mitglieder in diesem Forum: 0 Mitglieder und 1 Gast