Einfügen von Bildern in Dreamweaver - Dummies

Mit den minimalistischen Bildbearbeitungswerkzeugen von Dreamweaver können Sie rudimentäre Bildbearbeitung wie Größenänderung und Beschneidung durchführen Diese Werkzeuge finden Sie im Eigenschafteninspektor

Sie erstellen keine Bilder in Dreamweaver Adobe bietet dafür Illustrator (für Grafiken, grafischen Text, Seitenhintergrundbilder, Symbole usw.) und Photoshop (zum Vorbereiten von Fotos für das Internet) sowie andere Werkzeuge. In der Regel bleiben Sie bei der Vorbereitung von Bildern für das Web in diesen Programmen.

Um Bilder einzufügen, vergewissern Sie sich, dass Sie in der Entwurfsansicht arbeiten (oder in der geteilten Ansicht mit dem Cursor auf der Designseite des Fensters.) Sie haben zwei grundlegende Pfade: Einfügen von Ihrem Computer oder Verwenden einer Kopie und - In beiden Fällen müssen Sie sich in der Entwurfsansicht befinden (wählen Sie Ansicht → Entwurf; oder bei geteilter Ansicht e Ansicht → Code und Design), um Bilder beim Einfügen oder Einbetten zu sehen.

Es ist wahrscheinlich, dass die HTML-Seite, in die Sie ein Bild einbetten, Text enthält. Der erste Schritt besteht also darin herauszufinden, wo das Bild erscheinen soll.

Im Gegensatz zum Druckdesign werden Bilder in Webseiten nicht an bestimmten Orten platziert. Das treibt Designer in den Wahnsinn.

So fügen Sie eine Bilddatei von Ihrem Computer in eine offene HTML-Webseite in Dreamweaver ein:

1. Klicken Sie im Dokumentfenster an der Stelle, an der das Bild eingefügt werden soll.

   In diesem Schritt suchen Sie, wo in Ihrem HTML-Code das Bild eingefügt wird. Wie und wo das Bild angezeigt wird, wird wiederum mit CSS definiert.

2. Wählen Sie Einfügen → Bild.

3. Navigieren Sie im Dialogfeld Bildquelle auswählen und navigieren Sie zu einer beliebigen Datei auf Ihrem Computer.

   Wenn sich das ausgewählte Bild außerhalb Ihres Site-Ordners befindet, wird ein hilfreiches Dialogfeld angezeigt, in dem Sie aufgefordert werden, eine Kopie des Images im Stammordner Ihrer Dreamweaver-Site zu speichern.

   

   1. Klicken Sie auf Ja.

   2. Klicken Sie im Dialogfeld Datei kopieren unter auf Speichern.

4. Definieren Sie Zugriffsattribute.

   Standardmäßig wird das Dialogfeld Dreamweaver Image Tag Accessibility-Attribute angezeigt, bevor ein Bild endgültig in eine Seite eingefügt wird.

   Das Feld "Alternativer Text" ist die wichtigste der beiden Optionen in diesem Dialogfeld. Es zeigt Text an, der in der Reader-Software für sehbehinderte Besucher vorgelesen wird und auch in Browsing-Umgebungen angezeigt wird, in denen die Bildanzeige deaktiviert ist. Alternativer Text kann und sollte Groß- und Kleinbuchstaben, Leerzeichen und Sonderzeichen enthalten.

   

   Wenn sehbehinderte Besucher oder Personen in Browsing-Umgebungen, die keine Bilder unterstützen, zu Ihrer Zielgruppe gehören, sollten Sie HTML-Dateien mit aussagekräftigeren Bildbeschreibungen erstellen.Solche Dateien sind mit dem Bild verknüpft, indem Sie im Dialogfeld "Image Tag Accessibility Attributes" im Feld "Long Description" einen Link definieren.

5. Klicken Sie auf OK, um das Bild einzufügen.

Zu ​​diesem Zeitpunkt haben Sie nur das Bild eingefügt. Das Seitendesign, einschließlich des Platzierens von Bildern und fließendem Text, wird mit CSS