HTMLWorld - HTML, CSS, JavaScript, PHP, Java, Flash und vieles mehrHTMLWorld:   Home | Impressum |
 

 
 

Anzeige 
 
               Forum
 
 
HTMLWorld » Dreamweaver MX » Integration von Hyperlinks und Multimedia-Elementen

Dreamweaver MX: Integration von Hyperlinks und Multimedia-Elementen

von Oliver Schonschek

Der Erfolg des World Wide Web resultiert wesentlich von der Möglichkeit, Dokumente und Dateien im Web miteinander zu verknüpfen, und Multimedia-Elemente wie Bilder, Sounds, Videos und Flash-Animationen zu integrieren. Da steht es außer Frage, dass ein Profi-Webeditor wie Dreamweaver entsprechende Funktionen anbietet und den Anwender umfassend bei der Integration unterstützt.

Anzeige

Einfügen von Hyperlinks  nach oben

Eine Website steht und fällt mit der Verwendung von Hyperlinks. Nichts ist enttäuschender im Web als eine Webseite, die im Stil einer elektronischen Visitenkarte nur ein Logo und eine Adresse zeigt, aber keine weiterführenden Links anbietet. Informationen, auf die man im Netz der Netze verweisen kann, gibt es genug, und das Einrichten von Hyperlinks ist sehr einfach, erst recht mit Dreamweaver.

Betrachten wir nochmals das Eigenschaftsbedienfeld aus Kapitel 3. Dort findet man im rechten Bereich ein Eingabefeld für einen Hyperlink, ein Feld für ein (Sprung-)Ziel sowie ein Fadenkreuz- und ein Dateiordner-Symbol. Um einen Hyperlink zu erstellen, markiert man einfach den entsprechenden Text in der Entwurfsansicht des Dokumentenfensters und kann nun entweder den Link in dem Eingabefeld "Hyperlink" eintragen, oder man klickt auf das Dateiordner - Symbol und wählt darüber die entsprechende Datei zur Verlinkung aus. Zum Aufbau einer Website aus einzelnen Webseiten ist insbesondere das Fadenkreuz-Symbol und das Dateien - Bedienfeld aus Kapitel 2 nützlich.

Hat man in dem Dateien - Bedienfeld (Datei - Explorer innerhalb von Dreamweaver) die anderen Webseiten des Webprojekts (der geplanten Site) im Zugriff (in der Regel auf lokalen Laufwerken), so klickt man bei markiertem Link -Text auf das Fadenkreuz und zieht den Mauszeiger bei gedrückter linker Maustaste einfach auf die gewünschte Datei, zu der verlinkt werden soll, den Rest erledigt Dreamweaver von ganz allein. Unter "Ziel" können wie aus HTML bekannt die Optionen "_blank", "_parent", "_self" oder "_top" ausgewählt werden, um festzulegen, in welchem Browserfenster oder Frame das verlinkte Dokument angezeigt werden soll, wenn der Hyperlink ausgewählt wird.

Auch ein Anker lässt sich innerhalb eines Dokumentes in Dreamweaver sehr einfach definieren und ansprechen. Der Cursor wird dazu an die gewünschte Stelle gesetzt und die Funktion "Einfügen - Benannter Anker" ausgewählt. In dem sich öffnenden Fenster gibt man den Anker-Namen ein und bestätigt mit "OK". Wie gewohnt erstellt man den Hyperlink zu dem benannten Anker, indem man in das Eingabefeld "Hyperlink" bei markiertem Link-Text den Namen des Dokumentes versehen mit dem # Zeichen und dem Namen des Ankers einträgt.

Nicht nur http - Hyperlinks können in das Dokument eingefügt werden. Natürlich lassen sich auch Links erstellen, die einen E-Mail-Client ansprechen und die hinterlegte E-Mail-Adresse in einer neuen E-Mail-Nachricht voreingetragen. Dazu wählt man unter dem Menüpunkt "Einfügen" die Option "E-Mail-Verknüpfung" aus. Anders als bei den http - Links wird hier der Text nicht im Dokumentenfenster markiert, sondern in dem sich öffnenden Fenster "E-Mail-Verknüpfung" als Text eintragen, darunter kommt dann die E-Mail-Adresse.

Die vorgestellten Link-Funktionalitäten können auch aus der "Einfügen - Leiste" zwischen Menüleiste und Dokumentenfenster genutzt werden. Dort sind es die ersten drei Symbole: Kette (Hyperlink), Brief (E-Mail-Verknüpfung), Anker (erklärt sich von selbst).

Die Einfügen - Leiste
Darstellung: Die Einfügen - Leiste

Einfügen von Bildern  nach oben

Neben der Interaktivität von Webseiten durch das Angebot von Hyperlinks sind natürlich die Multimedia-Elemente von entscheidender Bedeutung für die User-Akzeptanz. Beginnen wir mit Grafik-Elementen, für die die Dateiformate GIF, JPEG und PNG zur Verfügung stehen, die von allen modernen Browsern unterstützt werden.

Wir nutzen zur Einbindung einer Grafik die oben stehende "Einfügen - Leiste". Selbstverständlich kann auch der Menüpunkt "Einfügen - Bild" verwendet werden. In der "Einfügen - Leiste" bewirkt dies das Symbol mit dem "Bäumchen". Es öffnet sich darauf hin der Dialog "Bildquelle auswählen", mit der man Bilder aus lokalen Dateisystemen genauso suchen und auswählen kann wie auf Servern, zu denen eine Verbindung besteht. Nützlich erweist sich die aktivierte Bildvorschau, falls die Dateinamen nicht sprechend gewählt sein sollten. Nach Bestätigen der Auswahl schließt sich das Fenster, und das Bild ist in der Entwurfsansicht zu sehen. Man sieht also keinen Link zu dem Bild, sondern das Bild selbst. Der entsprechende HTML-Code ist in der Code-Ansicht markiert, wenn man das eingefügte Bild anklickt.

Das Eigenschaftsbedienfeld für Grafiken
Darstellung: Das Eigenschaftsbedienfeld für Grafiken

Betrachten wir nun den Eigenschaftsinspektor für Bilder. Hier sieht man eine kleine Darstellung des ausgewählten Bildes, die Dateigröße, die (B)reite und (H)öhe in Pixel und die Datei-Quelle. Man kann in die entsprechenden Eingabefelder einen Hyperlink zu der Grafik definieren mit vorgesehenem Ziel sowie dem Alternativen Text, der angezeigt werden soll, wenn sich der Mauszeiger über dem im Browser dargestellten Bild befindet.

Hinter der Bezeichnung "Bearbeiten" im Eigenschaftsinspektor liegt zum Beispiel eine Verknüpfung zu Fireworks MX, das sich daraufhin öffnet, wenn dieses Programm ebenfalls auf dem Rechner installiert ist. Zuschnitt, Kontrast, Helligkeit und Schärfe lassen sich auch ohne zusätzliche Bildbearbeitungssoftware in Dreamweaver optimieren.

Die Ausrichtung des Bildes kann über die Symbole für rechtsbündig, zentriert oder linksbündig gesteuert werden. Wichtig ist auch die Ausrichtung von Text und Bild untereinander. Das Popup-Menü "Ausrichten" bietet hierzu verschiedene Möglichkeiten wie Textoberkante oder Absolute Mitte. Hier lohnt es sich auch, etwas zu experimentieren. Sollte der Text zu dem Bild beinahe an dem Bild kleben, kann man Freiräume um das Bild herum schaffen, indem man die gewünschte Pixelanzahl unter V-Abstand (Vertikal) und H-Abstand (Horizontal) einträgt.

Einfügen von Imagemaps  nach oben

Imagemaps sind bekanntlich Grafiken, in denen sensitive Bereiche (Hotspots) definiert sind, die als Hyperlinks fungieren. So kann man in Dreamweaver zum Beispiel eine Landkarte als Grafik einbinden und dann bestimmte Bereiche auf der Grafik als Rechtecke, Ovale oder Polygone definieren und mit einem Link versehen. Das geht ganz einfach in dem Eigenschaftsinspektor für Bilder, indem man in dem "Map" Bereich zum Beispiel das Rechteck anklickt und auf der Grafik in der Entwurfsansicht im Dokumentenfenster einen Bereich einzeichnet. Der Eigenschaftsinspektor ändert sich und erwartet nun Eingaben zu dem Hyperlinks, zum Ziel und zum Alternativen Text, und schon hat man eine Imagemap erstellt.

Die Erstellung einer Imagemap
Darstellung: Die Erstellung einer Imagemap

Einfügen von Sounds, Videos und Flash- Animationen  nach oben

Auch andere Medientypen wie Videos, Sounds und Flash-Dateien lassen sich über Dreamweaver sehr einfach in Webseiten einbinden. Eine geschwisterliche Beziehung hat Dreamweaver natürlich zu Flash MX. Die Integration einer Flash-Datei geschieht über die Auswahl "Einfügen - Medien - Flash". In dem entsprechenden Eigenschaftsbedienfeld stehen unter anderem eine Vorschaufunktion (Flash - Player), eine Schleifen- und Auto-Wiederholungsfunktion zur Verfügung, um die Flash-Datei nach Wunsch in die Webseite einzufügen. Ist Flash MX ebenfalls auf dem Rechner installiert, kann dieses Programm zur weiteren Bearbeitung der Flash-Datei mit einem Knopfdruck aus Dreamweaver heraus gestartet werden.



« zurück weiter »
Bewerten

 

Dreamweaver MX

.Autor:Jan Winkler.
. Bewertung:
Dreamweaver MX: Integration von Hyperlinks und Multimedia-Elementen HTMLWorld
(5/5 bei 1 Votes)
.
. Community: 18 Beiträge im Dreamweaver MX Forum .

Navigation


 
     
 

Anzeige