Serversprachen-Tag mit dem Eigenschafteninspektor bearbeiten
Codeblöcke einrücken
Zugehörigen Code anzeigen
Zu JavaScript- oder VBScript-Funktionen navigieren
JavaScript extrahieren
Mit Codefragmenten arbeiten
Nach Tags, Attributen oder Text im Code suchen
Suchmuster speichern und aufrufen
Referenzmaterial zu Sprachen verwenden
Code drucken
Codehinweise
Codehinweise helfen Ihnen dabei, Code-Elemente schnell und fehlerfrei einzufügen und zu bearbeiten. Bei der Eingabe von Zeichen in der
Codeansicht wird eine Liste mit Optionen angezeigt, mit denen Ihre Eingabe automatisch vervollständigt werden kann. Wenn Sie beispielsweise
die ersten Zeichen eines Tags, Attributs oder CSS-Eigenschaftsnamens eingeben, wird eine Liste mit Optionen angezeigt, die mit diesen Zeichen
beginnen. Diese Funktion erleichtert das Eingeben und Bearbeiten von Code. Mit dieser Funktion können Sie zudem anzeigen, welche Attribute
für bestimmte Tags, welche Parameter für bestimmte Funktionen oder welche Methoden für bestimmte Objekte verfügbar sind.
Codehinweise stehen für verschiedene Arten von Code zur Verfügung. Beim Eingeben der ersten Zeichen eines bestimmten Codetyps wird eine
Liste der entsprechenden Optionen angezeigt. Wenn Sie beispielsweise eine Liste der Codehinweise für HTML-Tags anzeigen möchten, geben
Sie eine öffnende spitze Klammer (<) ein. Zum Anzeigen von JavaScript-Codehinweisen geben Sie nach einem Objekt einen Punkt (Punkt-
Operator) ein.
Die besten Ergebnisse – insbesondere bei Codehinweisen für Funktionen und Objekte – erzielen Sie, wenn Sie im Dialogfeld mit den
Voreinstellungen für Codehinweise die Option „Verzögerung“ auf 0 Sekunden setzen.
Die Funktion für Codehinweise erkennt zudem benutzerdefinierte, nicht integrierte JavaScript-Klassen. Sie können diese benutzerdefinierten
Klassen erstellen oder über Bibliotheken von Drittanbietern, z. B. Prototype, hinzufügen.
Die Liste der Codehinweise wird ausgeblendet, wenn Sie die Rücktaste (Windows) bzw. die Rückschritttaste (Macintosh) drücken.
Ein Video-Tutorial zu Codehinweisen finden Sie unter www.adobe.com/go/lrvid4048_dw_de.
Ein Video des Dreamweaver-Entwicklungsteams mit einem Überblick über die JavaScript-Unterstützung in Dreamweaver finden Sie unter
www.adobe.com/go/dw10javascript_de.
Unterstützte Sprachen und Technologien
Dreamweaver unterstützt Codehinweise für die folgenden Sprachen und Technologien:
Adobe ColdFusion
Ajax
ASP JavaScript
ASP.NET C#
ASP.NET VB
ASP VBScript
CSS2 und CSS3
DOM (Document Object Model)
464
HTML4 und HTML5
jQuery (ab CS5.5)
JavaScript (einschließlich Codehinweise für benutzerdefinierte Klassen)
JSP
PHP MySQL
Spry
Menü mit Codehinweisen anzeigen
Das Menü mit Codehinweisen wird bei der Eingabe in der Codeansicht automatisch angezeigt. Sie können das Menü jedoch auch anzeigen, wenn
Sie keine Eingabe vornehmen.
1. Setzen Sie die Einfügemarke in der Codeansicht („Fenster“ > „Code“) in ein Tag.
2. Drücken Sie Strg+Leertaste.
Code mithilfe von Codehinweisen in der Codeansicht einfügen
1. Geben Sie den Anfang eines Codeabschnitts ein. Wenn Sie beispielsweise ein Tag einfügen möchten, geben Sie eine öffnende spitze
Klammer (<) ein. Setzen Sie zum Einfügen eines Attributs die Einfügemarke direkt hinter einen Tag-Namen und drücken Sie die Leertaste.
Eine Liste mit Elementen (z. B. Tag-Namen oder Attributnamen) wird angezeigt.
Sie können die Liste jederzeit schließen, indem Sie die Esc-Taste drücken.
2. Durchlaufen Sie die Liste mit dem Rollbalken oder mit der Nach-oben- bzw. Nach-unten-Taste.
3. Wenn Sie ein Element aus der Liste einfügen möchten, doppelklicken Sie auf das Element oder wählen Sie es aus und drücken Sie dann
die Eingabetaste (Windows) bzw. Return (Macintosh).
Falls ein kürzlich erstellter CSS-Stil nicht in einer Codehinweisliste mit CSS-Stilen erscheint, wählen Sie aus der Liste der Codehinweise
die Option „Stil-Liste aktualisieren“. In der Entwurfsansicht wird nach dem Auswählen von „Stil-Liste aktualisieren“ manchmal ungültiger
Code angezeigt. Diesen ungültigen Code können Sie aus der Entwurfsansicht entfernen, indem Sie nach dem Eingeben des Stils die
Taste F5 zum Aktualisieren drücken.
4. Zum Einfügen eines schließenden Tags geben Sie </ (Schrägstrich) ein.
Hinweis: Dreamweaver ermittelt standardmäßig, an welcher Stelle ein schließendes Tag erforderlich ist und fügt dieses Tag automatisch
ein. Sie können dieses Standardverhalten ändern, sodass Dreamweaver ein schließendes Tag einfügt, nachdem Sie die schließende spitze
Klammer (>) des öffnenden Tags eingegeben haben. Darüber hinaus können Sie das Standardverhalten auch so festlegen, dass überhaupt
kein schließendes Tag eingefügt wird. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ > „Codehinweise“ und anschließend eine der Optionen
unter „Schließende Tags“ aus.
Tags mithilfe von Codehinweisen bearbeiten
Wenn Sie ein Attribut durch ein anderes Attribut ersetzen möchten, löschen Sie das entsprechende Attribut und den zugehörigen Wert.
Fügen Sie dann entsprechend den zuvor beschriebenen Schritten ein neues Attribut mit dem zugehörigen Wert ein.
Wenn Sie einen Wert ändern möchten, löschen Sie den Wert und fügen Sie dann entsprechend der Beschreibung im vorherigen Abschnitt
einen Wert ein.
JavaScript-Codehinweise aktualisieren
Beim Bearbeiten von JavaScript-Dateien wird die Liste der verfügbaren Codehinweise in Dreamweaver automatisch aktualisiert. Beispiel: Sie
bearbeiten eine HTML-Datei und wechseln zu einer JavaScript-Datei, um eine Änderung vorzunehmen. Diese Änderung ist in der Liste der
Codehinweise aufgeführt, wenn Sie wieder zur HTML-Datei wechseln. Die automatische Aktualisierung wird jedoch nur durchgeführt, wenn Sie die
JavaScript-Dateien in Dreamweaver bearbeiten.
Wenn Sie die JavaScript-Dateien außerhalb von Dreamweaver bearbeiten, drücken Sie Strg+Punkt (.), um die JavaScript-Codehinweise zu
aktualisieren.
Codehinweise und Syntaxfehler
Die Funktion für Codehinweise wird möglicherweise nicht ordnungsgemäß ausgeführt, wenn Dreamweaver Syntaxfehler im Code erkennt.
Informationen zu Syntaxfehlern werden auf einer Statusleiste im oberen Bereich der Seite angezeigt. Auf der Statusleiste für Syntaxfehler wird die
erste Zeile des fehlerhaften Codes angezeigt. Nach der Korrektur des Syntaxfehlers werden alle weiteren Fehler angezeigt, die an späterer Stelle
im Code auftreten.
Die Nummern der Zeilen mit Syntaxfehlern sind zur besseren Erkennung zudem rot hervorgehoben. Die rote Markierung wird in der Codeansicht
der fehlerhaften Datei angezeigt.
In Dreamweaver werden neben den Syntaxfehlern der aktuellen Seite auch die Fehler auf den zugehörigen Seiten angezeigt. Beispiel: Sie
bearbeiten eine HTML-Seite mit einer integrierten JavaScript-Datei. Wenn die integrierte JavaScript-Datei einen Fehler enthält, wird auch für diese
Datei eine Fehlermeldung angezeigt. Sie können die zugehörige fehlerhafte Datei öffnen, indem Sie oben im Dokument auf den Namen der Datei
465
Nach oben
klicken.
Sie können die Statusleiste für Syntaxfehler deaktivieren, indem Sie auf der Code-Symbolleiste auf die Schaltfläche für Syntaxfehlermeldungen
klicken.
Einstellungen für Codehinweise festlegen
Sie können die Standardvoreinstellungen für Codehinweise ändern. Wenn beispielsweise keine Codehinweise für CSS-Eigenschaftennamen oder
Spry angezeigt werden sollen, können Sie sie in den Voreinstellungen für Codehinweise deaktivieren. Sie können darüber hinaus Voreinstellungen
für Verzögerungszeiten und schließende Tags festlegen.
Selbst wenn die Codehinweise deaktiviert sind, können Sie in der Codeansicht ein Popupmenü mit Codehinweisen einblenden, indem Sie
Strg+Leertaste drücken.
1. Wählen Sie „Bearbeiten“ > „Voreinstellungen“ aus.
2. Wählen Sie links in der Kategorieliste die Option „Codehinweise“.
3. Wählen Sie eine der folgenden Optionen:
Schließende Tagsermöglicht die Angabe, wie Dreamweaver schließende Tags einfügen soll. Standardmäßig fügt Dreamweaver das
schließende Tag automatisch ein, nachdem Sie die folgenden Zeichen eingegeben haben: </. Sie können dieses Standardverhalten ändern,
damit das schließende Tag nach der Eingabe der abschließenden spitzen Klammer (>) des öffnenden Tags oder überhaupt kein
schließendes Tag eingefügt wird.
Codehinweise aktivierenzeigt beim Eingeben von Code in der Codeansicht Codehinweise an. Stellen Sie mit dem Schieberegler
„Verzögerung“ die Wartezeit (in Sekunden) ein, nach der die entsprechenden Hinweise angezeigt werden sollen.
Beschreibungs-QuickInfos aktivierenzeigt eine ausführliche Beschreibung (sofern verfügbar) für den ausgewählten Codehinweis an.
Menüsermöglicht die Angabe, welche Art von Codehinweisen beim Eingeben von Code angezeigt werden sollen. Wählen Sie alle oder nur
einige der Menüs aus.
Site-specific code hints
Dreamweaver CS5 lets developers working with Joomla, Drupal, Wordpress or other frameworks, to view PHP code hints as they write in Code
view. To display these code hints, you first need to create a configuration file using the Site-Specific Code Hints dialog box. The configuration tells
Dreamweaver where to look for code hints that are specific to your site.
For a video tutorial on working with Site-specific code hints, see www.adobe.com/go/learn_dw_comm13_de.
Create the configuration file
Use the Site-Specific Code Hints dialog box to create the configuration file needed to display code hints in Dreamweaver.
By default, Dreamweaver stores the configuration file in the Adobe Dreamweaver CS5\configuration\Shared\Dinamico\Presets directory.
Hinweis: The code hints you create are specifically for the site selected in the Dreamweaver Files panel. In order for the code hints to display,
the page you are working on must reside in the currently selected site.
1. Select Site > Site-Specific Code Hints.
By default, the Site-Specific Code Hints feature scans your site to determine which Content Management System (CMS) framework you’re
using. Dreamweaver supports three frameworks by default: Drupal, Joomla, and Wordpress.
The four buttons to the right of the Structure pop-up menu let you import, save, rename, or delete framework structures.
Hinweis: You cannot delete or rename the existing default framework structures.
2. In the sub-root text box, specify the sub-root folder where you store your framework’s files. You can click the folder icon next to the text box
to browse to the framework files’ location.
Dreamweaver displays a file tree structure of folders that contain your framework files. If the folders and/or files you want to scan are all
displayed, click OK to run the scan. If you want to customize the scan, go on to the next steps.
3. Click the plus (+) button above the Files window to select a file or folder that you want to add to the scan. In the Add Files/Folders dialog
box, you can specify particular file extensions that you want to include.
Hinweis: Specifying particular file extensions speeds up the scanning process.
4. To remove files from the scan, select the files you don’t want scanned, and then click the minus (-) button above the Files window.
Hinweis: If Drupal or Joomla is the selected framework, the Site-Specific Code Hints dialog box displays an additional path to a file within
your Dreamweaver configuration folder. Don’t delete this—it’s required when using these frameworks.
5. To customize how the Site-Specific Code Hints feature treats a particular file or folder, select it from the list and do one of the following:
Select Scan This Folder to include the selected folder in the scan.
Select Recursive to include all files and folders within a selected directory.
466
Nach oben
Click the Extensions button to open the Find Extensions dialog box, where you can specify the file extensions you want included in your
scan for a particular file or folder.
Save site structure
You can save the customized site structure you’ve created in the Site-Specific Code Hints dialog box.
1. Create the structure of files and folders as you want it, adding and deleting files and folders as necessary.
2. Click the Save Structure button in the upper right-hand corner of the dialog box.
3. Specify a name for your site structure and click Save.
Hinweis: If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite
the structure with the same name. You cannot overwrite any of the default framework structures.
Rename site structures
When renaming your site structure, keep in mind that you cannot use the names of any of the three default site framework structures, or the word
“custom”.
1. Display the structure that you want to rename.
2. Click the Rename Structure icon button in the upper right-hand corner of the dialog box.
3. Specify a new name for the structure and click Rename.
Hinweis: If the name you specify is already in use, Dreamweaver prompts you to enter a different name, or to confirm that you want to overwrite
the structure with the same name. You cannot overwrite any of the default framework structures.
Add files or folders to a site structure
You can add any files or folders that are associated with your framework. After that, you can specify the file extensions of the files you want to
scan. (See the next section.)
1. Click the plus (+) button above the Files window to open the Add File/Folder dialog box.
2. In the Add File/Folder text box, enter the path to the file or folder you want to add. You can also click the folder icon next to the text box to
browse to a file or folder.
3. Click the plus (+) button above the Extensions window to specify the file extensions of files you want to scan.
Hinweis: Specifying particular file extensions speeds up the scanning process.
4. Click Add.
Scan a site for file extensions
Use the Find Extensions dialog box to view and edit file extensions that are included in the site structure.
1. In the Site-Specific Code Hints dialog box, click the Extensions button.
The Find Extensions dialog box lists the current scannable extensions.
2. To add another extension to the list, click the plus (+) button above the Extensions window.
3. To delete an extension from the list, click the minus (-) button.
Code mit der Code-Symbolleiste einfügen
1. Vergewissern Sie sich, dass die Codeansicht aktiviert ist („Ansicht“ > „Code“).
2. Platzieren Sie die Einfügemarke im Code oder wählen Sie einen Codeblock aus.
3. Klicken Sie in der Symbolleiste „Code“ auf eine Schaltfläche oder wählen Sie ein Element in einem Popupmenü der Symbolleiste aus.
Um die Funktion der verschiedenen Schaltflächen zu ermitteln, platzieren Sie den Mauszeiger auf einer Schaltfläche, bis die zugehörige
QuickInfo angezeigt wird. In der Standardeinstellung werden die folgenden Schaltflächen in der Symbolleiste „Code“ angezeigt:
Geöffnete Dokumentelistet die geöffneten Dokumente auf. Wenn Sie hier ein Dokument auswählen, wird es im Dokumentfenster
angezeigt.
Code-Navigator anzeigenzeigt den Code-Navigator an. Weitere Informationen finden Sie unter Zugehörigen Code anzeigen.
Vollständiges Tag ausblendenblendet den Inhalt zwischen einem öffnenden und dem zugehörigen schließenden Tag aus (z. B. den Inhalt
zwischen <table> und </table>). Sie müssen die Einfügemarke in das öffnende oder schließende Tag setzen und dann auf die Schaltfläche
„Vollständiges Tag ausblenden“ klicken, um den Inhalt auszublenden.
Sie können den Code außerhalb eines vollständigen Tags auch ausblenden, indem Sie eine Einfügemarke in ein öffnendes oder
schließendes Tag setzen und bei gedrückter Alt-Taste (Windows) bzw. der Wahltaste (Macintosh) auf die Schaltfläche „Vollständiges
Tag ausblenden“ klicken. Darüber hinaus können Sie das „intelligente Ausblenden“ aktivieren, damit Dreamweaver den außerhalb
467
Nach oben
vollständiger Tags ausgeblendeten Inhalt nicht anpasst. Dazu klicken Sie bei gedrückter Strg-Taste bzw. Ctrl auf diese Schaltfläche.
Weitere Informationen über die Codeansicht finden Sie im Abschnitt Informationen zum Ausblenden von Code.
Auswahl ausblendenblendet den ausgewählten Code aus.
Sie können den Code außerhalb einer Auswahl auch ausblenden, indem Sie bei gedrückter Alt-Taste (Windows) bzw. Wahltaste
(Macintosh) auf die Schaltfläche „Auswahl ausblenden“ klicken. Wenn Sie bei gedrückter Strg-Taste bzw. Ctrl-Taste auf diese
Schaltfläche klicken, können Sie ferner das „intelligente Ausblenden“ deaktivieren, sodass Sie genau die Auswahl ausblenden, ohne dass
diese von Dreamweaver manipuliert wird. Weitere Informationen über die Codeansicht finden Sie im Abschnitt Informationen zum
Ausblenden von Code.
Alles einblendenstellt den ausgeblendeten Code wieder her.
Übergeordnetes Tag auswählenwählt den Inhalt sowie die umgebenden öffnenden und schließenden Tags der Zeile aus, in der sich die
Einfügemarke befindet. Wenn Sie mehrmals auf diese Schaltfläche klicken und Ihre Tags paarweise vorhanden sind, wählt Dreamweaver
schließlich das äußerste Tag-Paar aus, also html und /html.
Klammern ausgleichenwählt den Inhalt sowie die umgebenden Klammern der Zeile aus, in der sich die Einfügmarke befindet. Wenn Sie
mehrmals auf diese Schaltfläche klicken und die umgebenden Symbole paarweise vorhanden sind, wählt Dreamweaver schließlich das
äußerste Klammerpaar im Dokument aus.
Zeilennummernermöglicht das Ausblenden oder Anzeigen von Zeilennummern am Anfang jeder Codezeile.
http://en.wikipedia.org/wiki/Content_delivery_network (auf Englisch) und http://de.wikipedia.org/wiki/Content_Delivery_Network (auf Deutsch, aber nicht so
Es gibt viele verschiedene Arten von Grafikdateiformaten. Auf Webseiten werden jedoch im Allgemeinen nur drei Grafikdateiformate verwendet: GIF, JPEG und PNG. Die
Formate GIF und JPEG werden am umfassendsten unterstützt und können von den meisten Browsern dargestellt werden.
GIF-Dateien umfassen maximal 256 Farben und eignen sich besonders für die Anzeige von Bildern,
die keine ineinander verlaufenden Farbtöne oder großen Bereiche mit einander sehr ähnlichen Farben enthalten (z. B. Navigationsleisten,
Schaltflächen, Symbole, Logos oder andere Bilder mit einheitlichen Farben und Farbtönen).
Das JPEG-Dateiformat eignet sich insbesondere für Fotos und Bilder mit kontinuierlichen Farbtönen,
da JPEG-Dateien Millionen von Farben enthalten können. Je höher die Qualität des JPEG-Bildes ist, desto größer wird die Datei und desto länger
dauert die Übertragung. Oft kann durch Komprimieren der JPEG-Datei ein guter Ausgleich zwischen Bildqualität und Dateigröße erzielt werden.
Das PNG-Dateiformat ist eine patentfreie Alternative zu GIF-Dateien. Es unterstützt Bilder mit
indizierten Farben, Graustufen und Echtfarben sowie einen Alphakanal zur Transparenzdarstellung. PNG ist das programmeigene Dateiformat von
Adobe® Fireworks®. In PNG-Dateien bleiben alle ursprünglichen Daten für Ebenen, Vektoren, Farben und Effekte (wie z. B. Schlagschatten)
erhalten und alle Elemente sind stets voll bearbeitbar. Die Dateien müssen die Erweiterung .png haben, damit Dreamweaver sie als PNG-Dateien
erkennt.
Bilder einfügen
Wenn Sie ein Bild in ein Dreamweaver-Dokument einfügen, wird im HTML-Quellcode ein Verweis auf die Datei erstellt. Damit dieser Verweis
problemlos funktioniert, muss sich die Bilddatei in der aktuellen Site befinden. Falls sich die Datei nicht in der aktuellen Site befindet, werden Sie
von Dreamweaver gefragt, ob Sie die Datei in die Site kopieren möchten.
Sie können Bilder auch dynamisch einfügen. Dynamische Bilder ändern sich häufig. So müssen zum Beispiel Rotationssysteme für Werbebanner
einzelne Banner nach dem Zufallsprinzip aus einer Liste potentieller Banner auswählen und das ausgewählte Banner dynamisch anzeigen, wenn
eine Seite angefordert wird.
Nachdem Sie ein Bild eingefügt haben, können Sie für das Bild-Tag Eingabehilfen-Attribute festlegen, die von Bildschirmlesegeräten für
sehbehinderte Benutzer gelesen werden können. Diese Attribute können im HTML-Code bearbeitet werden.
Ein Tutorial zum Einfügen von Bildern finden Sie unter Adding images.
1. Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der das Bild erscheinen soll. Führen Sie anschließend einen der
folgenden Schritte aus:
Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf das Symbol „Bilder“ .
Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Bilder“ und wählen Sie das Symbol „Bild“ aus.
Wenn das Symbol „Bild“ im Bedienfeld „Einfügen“ angezeigt wird, können Sie das Symbol in das Dokumentfenster ziehen (bzw. in die
Codeansicht, wenn Sie den Code bearbeiten).
Wählen Sie „Einfügen“ > „Bild“.
Ziehen Sie ein Bild aus dem Bedienfeld „Elemente“ („Fenster“ > „Elemente“) an die gewünschte Stelle im Dokumentfenster. Fahren Sie
dann mit Schritt 3 fort.
Ziehen Sie ein Bild aus dem Bedienfeld „Dateien“ an die gewünschte Stelle im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort.
Ziehen Sie ein Bild vom Desktop an die gewünschte Stelle im Dokumentfenster. Fahren Sie dann mit Schritt 3 fort.
690
Hinweis:
Hinweis:
Hinweis:
B / H
Hinweis:
Quelle
Hyperlink
2. Führen Sie im daraufhin erscheinenden Dialogfeld einen der folgenden Schritte aus:
Wählen Sie „Dateisystem“, um eine Bilddatei auszuwählen.
Wählen Sie „Datenquellen“, um eine dynamische Bildquelle auszuwählen.
Klicken Sie auf die Schaltfläche „Sites und Server“, um in einem Remote-Ordner einer Ihrer Dreamweaver-Sites eine Bilddatei
auszuwählen.
3. Wählen Sie in der Verzeichnisstruktur das Bild oder die Bildquelle aus, das bzw. die Sie einfügen möchten.
Wenn Sie in einem nicht gespeicherten Dokument arbeiten, erstellt Dreamweaver den Verweis file:// auf die Bilddatei. Wenn Sie das
Dokument in einem beliebigen Ordner in der Site speichern, wandelt Dreamweaver diesen Verweis in einen dokumentrelativen Pfad um.
Beim Einfügen von Bildern können Sie auch absolute Pfade zu Bildern auf Remote-Servern verwenden (d. h. zu Bildern, die sich
nicht auf der lokalen Festplatte befinden). Wenn Sie bei der Arbeit jedoch Leistungsprobleme feststellen, empfiehlt es sich unter Umständen,
die Anzeige der Bilder in der Entwurfsansicht zu deaktivieren, indem Sie die Auswahl von „Befehle“ > „Externe Dateien anzeigen“ aufheben.
4. Klicken Sie auf „OK“. Das Dialogfeld „Eingabehilfen-Attribute für Image-Tag“wird eingeblendet, sofern Sie das Dialogfeld in den
Voreinstellungen aktiviert haben („Bearbeiten“ > „Voreinstellungen“).
5. Geben Sie Werte in die Textfelder „Alternativtext“ und „Lange Beschreibung“ ein und klicken Sie anschließend auf „OK“.
Geben Sie im Textfeld „Alternativer Text“ einen Namen oder eine kurze Beschreibung für das Bild ein. Die Informationen, die Sie hier
eingeben, werden später vom Bildschirmlesegerät vorgelesen. Diese Informationen sollten nicht länger als etwa 50 Zeichen sein. Für
längere Beschreibungen können Sie im Textfeld „Lange Beschreibung“ einen Hyperlink auf eine Datei angeben, die nähere
Informationen über das Bild enthält.
Geben Sie im Feld „Lange Beschreibung“ den Speicherort einer Datei ein, die angezeigt werden soll, wenn der Benutzer auf das Bild
klickt. Sie können auch auf das Ordnersymbol klicken und die Datei aus der Verzeichnisstruktur auswählen. Dieses Feld enthält einen
Hyperlink auf eine Datei, die sich auf das Bild bezieht oder nähere Informationen darüber bietet.
Je nach Bedarf können Sie in nur einem der Textfelder Text eingeben oder in beiden Textfeldern. Das Bildschirmlesegerät liest
dann das „alt“-Attribut des Bildes.
Wenn Sie auf „Abbrechen“ klicken, wird das Bild in das Dokument eingefügt, ohne jedoch von Dreamweaver mit Eingabehilfen-
Tags oder -Attributen versehen zu werden.
6. Legen Sie im Eigenschafteninspektor („Fenster“ > „Eigenschaften“) die gewünschten Eigenschaften des Bildes fest.
Festlegen von Bildeigenschaften
Mit dem Eigenschafteninspektor für Bilder können Sie die Eigenschaften eines Bildes festlegen. Wenn nicht alle Bildeigenschaften angezeigt
werden, klicken Sie unten rechts auf den Erweiterungspfeil.
1. Wählen Sie „Fenster“ > „Eigenschaften“, um den Eigenschafteninspektor für ein ausgewähltes Bild anzuzeigen.
2. Geben Sie in das Textfeld unterhalb des Piktogramms einen Namen ein, damit Sie sich auf das Bild beziehen können, wenn Sie ein
Dreamweaver-Verhalten (beispielsweise „Bild vertauschen“) oder eine Skriptsprache wie JavaScript oder VBScript verwenden.
3. Stellen Sie die gewünschten Bildoptionen ein.
Legen die Breite und Höhe des Bildes in Pixel fest. Dreamweaver aktualisiert diese Felder automatisch und gibt darin die
ursprünglichen Maße an, wenn Sie ein Bild in eine Seite einfügen.
Wenn Sie für „B“ und „H“ Werte festlegen, die nicht der tatsächlichen Breite und Höhe des Bildes entsprechen, wird das Bild unter
Umständen nicht korrekt im Browser angezeigt. (Um die ursprünglichen Werte wiederherzustellen, klicken Sie auf die Feldbeschriftungen „B“
und „H“ oder rechts neben den Textfeldern „B“ und „H“ auf die Schaltfläche „Größe zurücksetzen“.)
Sie können die Breite und Höhe ändern, um die Größe des jeweiligen Bildes zu skalieren. Dies hat jedoch keine Auswirkungen
auf die Downloadzeit, da der Browser zunächst alle Bilddaten herunterlädt und erst dann das Bild skaliert. Wenn Sie die Downloadzeit
verkürzen und sicherstellen möchten, dass alle Instanzen eines Bildes dieselbe Größe haben, skalieren Sie die Bilder mit einem
Bildbearbeitungsprogramm.
Gibt die Quelldatei des Bildes an. Klicken Sie auf das Ordnersymbol, um die Quelldatei auszuwählen, oder geben Sie den Pfad ein.
Gibt einen Hyperlink für das Bild an. Ziehen Sie das Dateizeigersymbol auf eine Datei im Bedienfeld „Dateien“, klicken Sie auf
das Ordnersymbol, um ein Dokument in der Site zu suchen, oder geben Sie den URL-Pfad manuell ein.
691
Alt
„Map“ und Hotspot-Tools
Ziel
Bearbeiten
Von Original aktualisieren
Bildeinstellungen bearbeiten
Zuschneiden
Neu auflösen
Helligkeit und Kontrast
Scharf stellen
Nach oben
Gibt alternativen Text an, der anstelle des Bildes geladen wird, wenn ein reiner Textbrowser verwendet wird bzw. wenn im Browser
festgelegt wurde, dass Bilder manuell heruntergeladen werden sollen. Für Benutzer mit Sehschwierigkeiten, die reine Textbrowser
zusammen mit Sprach-Synthesizern verwenden, wird der Text laut vorgelesen. Bei einigen Browsern wird dieser Text auch angezeigt, wenn
der Zeiger sich über dem Bild befindet.
Damit können Sie eine clientseitige Imagemap beschriften und erstellen.
Gibt den Frame oder das Fenster an, in dem die verknüpfte Seite geladen werden soll. (Diese Option ist nur verfügbar, wenn das Bild
mit einer anderen Datei verknüpft ist.) Alle Frames im aktuellen Dokument werden namentlich in der Liste „Ziel“ aufgeführt. Sie können auch
einen der folgenden reservierten Zielnamen auswählen:
_blank lädt die verknüpfte Datei in ein neues, unbenanntes Browserfenster.
_parent lädt die verknüpfte Datei in das übergeordnete Frameset oder Fenster des Frames, in dem der Hyperlink enthalten ist. Wenn
der Frame, der den Hyperlink enthält, nicht verschachtelt ist, wird die verknüpfte Datei in das ganze Browserfenster geladen.
_self lädt die verknüpfte Datei in denselben Frame oder dasselbe Fenster wie den Hyperlink. Dies ist das Standardziel, sodass Sie es
normalerweise nicht ausdrücklich angeben müssen.
_top lädt die verknüpfte Datei in das ganze Browserfenster, wodurch alle Frames entfernt werden.
Startet den Bildeditor, den Sie in den Voreinstellungen für externe Editoren gewählt haben, und öffnet das ausgewählte Bild.
Wenn das Webbild (also das Bild auf der Dreamweaver-Seite) nicht mit der Photoshop-Originaldatei
übereinstimmt, erkennt Dreamweaver, dass die Originaldatei aktualisiert wurde, und zeigt einen der Smart-Objekt-Symbolpfeile in Rot an.
Wenn Sie in der Entwurfsansicht das Webbild auswählen und im Eigenschafteninspektor auf die Schaltfläche „Von Original aktualisieren“
klicken, wird das Bild automatisch aktualisiert, um die von Ihnen an der Photoshop-Originaldatei vorgenommenen Änderungen zu
reflektieren.
Öffnet das Dialogfeld „Bildvorschau“ und ermöglicht das Optimieren des Bildes.
Dient zum Zuschneiden der Bildgröße, wobei unerwünschte Bereiche aus dem ausgewählten Bild entfernt werden.
Ermöglicht es Ihnen, ein in der Größe geändertes Bild neu aufzulösen, wobei dessen Qualität in der neuen Größe und
Form verbessert wird.
Ändert die Helligkeits- und Kontrasteinstellungen eines Bildes.
Ändert die Bildschärfe.
Eingabehilfen-Attribute für Bilder im Code bearbeiten
Wenn Sie Eingabehilfen-Attribute für ein Bild eingefügt haben, können Sie diese Werte im HTML-Code bearbeiten.
1. Wählen Sie im Dokumentfenster ein Bild aus.
2. Führen Sie einen der folgenden Schritte aus:
Bearbeiten Sie die jeweiligen Bildattribute in der Codeansicht.
Klicken Sie mit der rechten Maustaste (Windows) bzw. drücken Sie die Ctrl-Taste (Macintosh) und wählen Sie dann „Tag bearbeiten“.
Bearbeiten Sie den Wert des Feldes „Alt“ im Eigenschafteninspektor.
Bildgröße visuell ändern
Sie können Elemente wie Bilder, Plug-Ins, Shockwave- oder SWF-Dateien, Applets und ActiveX-Steuerelemente in Dreamweaver visuell
vergrößern oder verkleinern.
Durch visuelles Vergrößern bzw. Verkleinern eines Bildes können Sie sich ansehen, wie sich das Bild bei verschiedenen Größeneinstellungen auf
das Layout auswirkt. Die Bilddatei wird dabei allerdings nicht auf die von Ihnen angegebenen Proportionen skaliert. Wenn Sie ein Bild in
Dreamweaver visuell vergrößern oder verkleinern, die Bilddatei jedoch nicht mithilfe einer Bildbearbeitungssoftware (z. B. Adobe Fireworks) auf die
gewünschte Größe skalieren, wird das Bild beim Laden der Seite im Browser des Benutzers skaliert. Dadurch wird die Seite möglicherweise
verzögert heruntergeladen und das Bild im Browser des Benutzers falsch angezeigt. Wenn Sie die Downloadzeit verkürzen und sicherstellen
möchten, dass alle Instanzen eines Bildes dieselbe Größe haben, skalieren Sie die Bilder mit einem Bildbearbeitungsprogramm.
Wenn Sie die Größe eines Bildes in Dreamweaver ändern, können Sie es neu auflösen, um den neuen Maßen Rechnung zu tragen. Bei der
Neuauflösung werden einer vergrößerten oder verkleinerten JPEG- oder GIF-Bilddatei Pixel hinzugefügt bzw. daraus entfernt, um das
Erscheinungsbild des Originals weitgehend zu reproduzieren. Die Neuauflösung eines Bildes führt zu einer kleineren Dateigröße und einer
kürzeren Downloadzeit.
692
Hinweis:
Nach oben
Hinweis:
Nach oben
Größe von Elementen visuell ändern
1. Wählen Sie das Element (beispielsweise ein Bild oder eine SWF-Datei) im Dokumentfenster aus.
An der unteren und der rechten Seite sowie in der unteren rechten Ecke des Elements werden Ziehgriffe angezeigt, mit denen Sie die Größe
des Elements ändern können. Werden keine Größenänderungsgriffe angezeigt, klicken Sie neben das Element, dessen Größe Sie ändern
möchten, und wählen Sie es dann erneut aus. Alternativ dazu können Sie im Tag-Selektor auf das entsprechende Tag klicken, um das
Element auszuwählen.
2. Ändern Sie die Größe des Elements mit einer der folgenden Methoden:
Ziehen Sie den Griff an der rechten Seite, um die Breite des Elements zu ändern.
Ziehen Sie den Griff an der unteren Seite, um die Höhe des Elements zu ändern.
Ziehen Sie den Griff an der Ecke, um Höhe und Breite des Elements gleichzeitig zu ändern.
Halten Sie die Umschalttaste gedrückt und ziehen Sie den Griff an der Ecke, um das Verhältnis zwischen Breite und Höhe
beizubehalten, während Sie die Größe des Elements ändern.
Möchten Sie die Breite und Höhe auf eine bestimmte Größe einstellen (z. B. 1 x 1 Pixel), geben Sie dazu im Eigenschafteninspektor
einen numerischen Wert ein. Elemente können visuell auf eine Mindestgröße von 8 x 8 Pixel verkleinert werden.
3. Wenn Sie die Originalmaße eines in der Größe geänderten Elements wiederherstellen möchten, löschen Sie im Eigenschafteninspektor die
Werte in den Feldern „B“ und „H“ oder klicken Sie auf die Schaltfläche „Größe zurücksetzen“.
Ursprüngliche Größe eines Bildes wiederherstellen
Klicken Sie im Eigenschafteninspektor für Bilder auf die Schaltfläche „Größe zurücksetzen“ .
Neu auflösen der Bilder nach einer Größenänderung
1. Ändern Sie die Größe des Bildes, wie zuvor beschrieben.
2. Klicken Sie im Eigenschafteninspektor für Bilder auf die Schaltfläche „Neu auflösen“ .
Bildplatzhalter und andere Elemente mit Ausnahme von Bitmapbildern können nicht neu aufgelöst werden.
Bild-Platzhalter einfügen
Ein Bild-Platzhalter ist eine Grafik, die Sie vorübergehend einsetzen, bis die endgültigen Grafiken für die Webseite bereitstehen. Sie können Größe
und Farbe des Platzhalters bestimmen und ihn mit einer Beschriftung versehen.
1. Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie eine Platzhaltergrafik einfügen möchten.
2. Wählen Sie „Einfügen“ > „Grafikobjekte“ > „Bild-Platzhalter“.
3. Optional: Geben Sie unter „Name“ den Text ein, der als Beschriftung des Bild-Platzhalters dienen soll. Wenn Sie keine Beschriftung
wünschen, lassen Sie das Feld einfach leer. Der Name muss mit einem Buchstaben beginnen und darf nur Buchstaben und Ziffern
enthalten. Leerzeichen und ASCII-Sonderzeichen sind nicht zulässig.
4. Erforderlich: Geben Sie in die Felder „Breite“ und „Höhe“ Maßangaben für das Bild in Pixel ein.
5. Optional: Führen Sie unter „Farbe“ einen der folgenden Schritte aus, um eine Farbe anzuwenden:
Wählen Sie im Farbwähler eine Farbe aus.
Geben Sie den Hexadezimalwert für die gewünschte Farbe ein (z. B. #FF0000).
Geben Sie einen websicheren Farbnamen ein (z. B. „red“).
6. Optional: Geben Sie unter „Alternativtext“ eine Beschreibung des Bildes für Benutzer an, die einen reinen Textbrowser verwenden.
Im HTML-Code wird dabei automatisch ein Bild-Tag mit dem undefinierten Attribut src eingefügt.
7. Klicken Sie auf „OK“.
Die Farbe, die Größenattribute und die Beschriftung eines Platzhalters werden folgendermaßen angezeigt:
In einem Browserfenster sind die Beschriftung und die Größenangaben nicht sichtbar.
Bild-Platzhalter ersetzen
693
Nach oben
B / H
Quelle
Hyperlink
Alt
Erstellen
Von Original aktualisieren
Color
Nach oben
Ein Bild-Platzhalter ist kein Bild, das in einem Browser angezeigt wird. Bevor Sie eine Site veröffentlichen, sollten Sie alle verwendeten Bild-
Platzhalter durch browserkompatible Bilddateien wie GIF- oder JPEG-Bilder ersetzen.
Wenn Sie über Fireworks verfügen, können Sie direkt aus dem Dreamweaver-Bild-Platzhalter heraus eine neue Grafik erstellen. Das neue Bild
erhält dabei dieselben Maße wie der Platzhalter. Sie können das Bild in einem Bildeditor bearbeiten und dann wieder in Dreamweaver einfügen.
1. Führen Sie im Dokumentfenster einen der folgenden Schritte aus:
Doppelklicken Sie auf den Bild-Platzhalter.
Klicken Sie auf den Bild-Platzhalter, um ihn auszuwählen, und klicken Sie dann im Eigenschafteninspektor („Fenster“ > „Eigenschaften“)
auf das Ordnersymbol neben dem Textfeld „Quelle“.
2. Wählen Sie im Dialogfeld „Bildquelle“ das Bild aus, durch das Sie den Bild-Platzhalter ersetzen möchten, und klicken Sie dann auf „OK“.
Eigenschaften für Bild-Platzhalter festlegen
Zum Festlegen der Eigenschaften eines Bild-Platzhalters wählen Sie den Platzhalter im Dokumentfenster aus. Klicken Sie anschließend auf
„Fenster“ > „Eigenschaften“, um den Eigenschafteninspektor anzuzeigen. Um alle Attribute einzublenden, klicken Sie auf den Erweiterungspfeil in
der Ecke rechts unten.
Legen Sie im Eigenschafteninspektor die gewünschten Angaben für Name, Breite, Höhe, Bildquelle, Alternativtext, Ausrichtung und Farbe des
Bild-Platzhalters fest.
Im Eigenschafteninspektor für Platzhalter sind das graue Textfeld und das Textfeld „Ausrichten“ deaktiviert. Sie können diese Eigenschaften im
Eigenschafteninspektor für Bilder festlegen, wenn Sie den Platzhalter durch ein Bild ersetzen.
Wählen Sie eine der folgenden Optionen:
Legen die Breite und Höhe des Bild-Platzhalters in Pixel fest.
Gibt die Quelldatei des Bildes an. Bei Bild-Platzhaltern ist dieses Feld leer. Klicken Sie auf „Durchsuchen“, um ein Ersatzbild für die
Platzhaltergrafik auszuwählen.
Gibt einen Hyperlink für den Bild-Platzhalter an. Ziehen Sie das Dateizeigersymbol auf eine Datei im Bedienfeld „Dateien“, klicken
Sie auf das Ordnersymbol, um ein Dokument in der Site zu suchen, oder geben Sie den URL-Pfad manuell ein.
Gibt alternativen Text an, der anstelle des Bildes geladen wird, wenn ein reiner Textbrowser verwendet wird bzw. wenn im Browser
festgelegt wurde, dass Bilder manuell heruntergeladen werden sollen. Für Benutzer mit Sehschwierigkeiten, die reine Textbrowser
zusammen mit Sprach-Synthesizern verwenden, wird der Text laut vorgelesen. Bei einigen Browsern wird dieser Text auch angezeigt, wenn
der Zeiger sich über dem Bild befindet.
Dient zum Starten von Fireworks, um ein Ersatzbild zu erstellen. Die Schaltfläche „ „Erstellen“ ist nur dann aktiviert, wenn auch
Fireworks auf dem Computer installiert ist.
Wenn das Webbild (also das Bild auf der Dreamweaver-Seite) nicht mit der Photoshop-Originaldatei
übereinstimmt, erkennt Dreamweaver, dass die Originaldatei aktualisiert wurde, und zeigt einen der Smart-Objekt-Symbolpfeile in Rot an.
Wenn Sie in der Entwurfsansicht das Webbild auswählen und im Eigenschafteninspektor auf die Schaltfläche „Von Original aktualisieren“
klicken, wird das Bild automatisch aktualisiert, um die von Ihnen an der Photoshop-Originaldatei vorgenommenen Änderungen zu
reflektieren.
Legt eine Farbe für den Bild-Platzhalter fest.
Bilder in Dreamweaver bearbeiten
Sie können Bilder in Dreamweaver neu auflösen, zuschneiden, optimieren und scharf stellen. Darüber hinaus können Sie die Helligkeit und den
Kontrast von Bildern ändern.
Bildbearbeitungsfunktionen
Dreamweaver enthält allgemeine Bildbearbeitungsfunktionen, mit denen Sie Bilder ändern können, ohne eine externe Bildbearbeitungsanwendung
wie Fireworks oder Photoshop verwenden zu müssen. Die Bildbearbeitungsfunktionen von Dreamweaver sind so ausgelegt, dass Sie ohne
Probleme mit Inhaltsdesignern zusammenarbeiten können, um Bilddateien für Websites zu erstellen.
Hinweis:
Neu auflösen
Zuschneiden
Helligkeit und Kontrast
Scharf stellen
Hinweis:
Hinweis:
Hinweis:
Sie können die Bildbearbeitungsfunktionen von Dreamweaver auch verwenden, wenn Fireworks oder andere
Bildbearbeitungsanwendungen nicht auf Ihrem Computer installiert sind.
Wählen Sie „Modifizieren“ > „Bild“. Sie können beliebige dieser Dreamweaver-Bildbearbeitungsfunktionen auswählen:
Fügt einer in der Größe geänderten JPEG- oder GIF-Bilddatei Pixel hinzu bzw. entfernt Pixel, um das Erscheinungsbild des
Originals weitgehend zu reproduzieren. Die Neuauflösung eines Bildes führt zu einer kleineren Dateigröße und einer kürzeren Downloadzeit.
Wenn Sie die Größe eines Bildes in Dreamweaver ändern, können Sie es neu auflösen, um den neuen Maßen Rechnung zu tragen. Wenn
ein Bitmapobjekt neu aufgelöst wird, werden Pixel dem Bild hinzugefügt oder daraus entfernt, um es größer oder kleiner zu machen. Die
Neuauflösung eines Bildes in eine höhere Auflösung geht im Allgemeinen mit geringen Qualitätsverlusten einher. Bei einer Neuberechnung in
eine niedrigere Auflösung gehen jedoch immer Daten verloren und dies führt in der Regel zu Qualitätseinbußen.
Ermöglicht Ihnen das Bearbeiten des Bildes durch Reduzieren des Bildbereichs. Im Allgemeinen wird ein Bild zugeschnitten,
um das Motiv mehr in den Mittelpunkt zu stellen und unerwünschte Bereiche zu entfernen, von denen das zentrale Motiv im Bild umgeben ist.
Ändert den Kontrast oder die Helligkeit der Pixel eines Bildes. Dies wirkt sich auf die Lichter, Tiefen und Mitteltöne
eines Bildes aus. Normalerweise wird die Option „Helligkeit/Kontrast“ zur Korrektur von zu dunklen oder zu hellen Bildern verwendet.
Stellt den Fokus eines Bildes ein, indem der Kontrast der im Bild gefundenen Kanten erhöht wird. Wenn Sie ein Bild scannen
oder eine Aufnahme mit einer Digitalkamera machen, werden die Objektkanten im Bild von den meisten Bilderfassungsprogrammen
standardmäßig weichgezeichnet. Auf diese Weise wird verhindert, dass extrem feine Details in den Pixeln verloren gehen, aus denen
Digitalbilder bestehen. Um jedoch die Details in einem Digitalbild herauszuarbeiten, ist es oftmals erforderlich, das Bild scharf zu zeichnen.
Dabei wird der Kantenkontrast erhöht und das Bild wirkt schärfer.
Die Bildbearbeitungsfunktionen von Dreamweaver können nur auf Bilder im JPEG-, GIF- oder PNG-Dateiformat angewandt
werden. Andere Bitmap-Bilddateiformate können mit diesen Bildbearbeitungsfunktionen nicht bearbeitet werden.
Bilder zuschneiden
In Dreamweaver können Sie Bitmapdateibilder zuschneiden.
Beim Zuschneiden eines Bildes wird die Quellbilddatei auf der Festplatte geändert. Aus diesem Grund sollten Sie eine Sicherungskopie
der Bilddatei für den Fall anlegen, dass Sie das Originalbild wiederherstellen müssen.
1. Öffnen Sie die Seite, die das zuzuschneidende Bild enthält, wählen Sie es aus und führen Sie einen der folgenden Schritte aus:
Klicken Sie im Eigenschafteninspektor für Bilder auf das Symbol für das Zuschneidewerkzeug .
Wählen Sie „Modifizieren“ > „Bild“ > „Zuschneiden“.
Um das ausgewählte Bild herum werden Zuschneidegriffe angezeigt.
2. Bewegen Sie die Zuschneidegriffe, bis der Begrenzungsrahmen den Bereich des Bildes umrahmt, den Sie beibehalten möchten.
3. Doppelklicken Sie in den Begrenzungsrahmen oder drücken Sie die Eingabetaste, um die Auswahl zuzuschneiden.
4. Ein Dialogfeld informiert Sie darüber, dass die zuzuschneidende Bilddatei auf der Festplatte geändert wird. Klicken Sie auf „OK“. Sämtliche
Pixel des ausgewählten Bitmaps, die außerhalb des Begrenzungsrahmens liegen, werden entfernt, aber die anderen Objekte im Bild bleiben
erhalten.
5. Überprüfen Sie in der Vorschau, ob das Bild Ihren Erwartungen entspricht. Andernfalls wählen Sie „Bearbeiten“ > „Rückgängig
Zuschneiden“, um das Originalbild wiederherzustellen.
Sie können die Auswirkungen des Befehls „Zuschneiden“ so lange rückgängig machen (und die Originalbilddatei
wiederherstellen), bis Sie Dreamweaver beenden oder die Datei in einem externen Bildbearbeitungsprogramm bearbeiten.
Bilder optimieren
Sie können Bilder in Ihren Webseiten in Dreamweaver optimieren.
1. Öffnen Sie die Seite, die das zu optimierende Bild enthält, wählen Sie es aus und führen Sie einen der folgenden Schritte aus:
Klicken Sie im Eigenschafteninspektor des Bildes auf die Schaltfläche „Bildeinstellungen bearbeiten“.
Wählen Sie „Modifizieren“ > „Bild“ > „Optimieren“.
2. Nehmen Sie im Dialogfeld „Bildoptimierung“ die gewünschten Änderungen vor und klicken Sie auf „OK“.
Bilder scharf stellen
Der Befehl „Scharf stellen“ vergrößert den Kontrast der Pixel am Objektrand, um die Definition oder Schärfe eines Bildes zu verbessern.
1. Öffnen Sie die Seite, die das scharf zu stellende Bild enthält, wählen Sie es aus und führen Sie einen der folgenden Schritte aus:
Klicken Sie im Eigenschafteninspektor des Bildes auf die Schaltfläche „Scharf stellen“.
Hinweis:
Nach oben
Bildname
Originalbild
Rollover-Bild
Rollover-Bild vorausladen
Alternativtext
Wenn angeklickt, gehe zu URL
Hinweis:
Wählen Sie „Modifizieren“ > „Bild“ > „Scharf stellen“.
2. Sie können den Schärfegrad bestimmen, den Dreamweaver auf das Bild anwendet. Betätigen Sie hierzu den Schieberegler oder geben Sie
im Textfeld einen Wert zwischen 0 und 10 ein. Während Sie die Schärfe des Bildes im Dialogfeld „Scharf stellen“ einstellen, können Sie die
Änderungen am Bild in einer Vorschau betrachten.
3. Klicken Sie auf „OK“, wenn Sie mit dem Ergebnis zufrieden sind.
4. Speichern Sie die Änderungen mit „Datei“ > „Speichern“ oder stellen Sie das Originalbild wieder her, indem Sie „Bearbeiten“ > „Rückgängig
Scharf stellen“ wählen.
Nach dem Speichern der Seite mit dem Bild können Sie die Auswirkungen des Befehls „Scharf stellen“ nicht mehr rückgängig
machen (und das Originalbild wiederherstellen). Wenn Sie die Seite speichern, werden die am Bild vorgenommenen Änderungen
unwiderruflich gespeichert.
Helligkeit und Kontrast von Bildern anpassen
„Helligkeit/Kontrast“ ändert den Kontrast oder die Helligkeit der Pixel eines Bildes. Dies wirkt sich auf die Lichter, Tiefen und Mitteltöne eines
Bildes aus. Normalerweise wird die Option „Helligkeit/Kontrast“ zur Korrektur von zu dunklen oder zu hellen Bildern verwendet.
1. Öffnen Sie die Seite, die das einzustellende Bild enthält, wählen Sie es aus und führen Sie einen der folgenden Schritte aus:
Klicken Sie im Eigenschafteninspektor des Bildes auf die Schaltfläche „Helligkeit/Kontrast“ .
Wählen Sie „Modifizieren“ > „Bild“ > „Helligkeit/Kontrast“.
2. Ziehen Sie an den Schiebereglern für „Helligkeit“ und „Kontrast“, um die Einstellungen anzupassen. Die gültigen Werte liegen im Bereich
von -100 bis 100.
3. Klicken Sie auf „OK“.
Rollover-Bilder erstellen
Sie können Rollover-Bilder in eine Seite einfügen. Ein Rollover ist ein Bild, das sich im Browser ändert, wenn Sie den Mauszeiger darüber
bewegen.
Sie benötigen zwei Bilder, um ein Rollover zu erstellen: das primäre Bild (wird angezeigt, wenn die Seite geladen wird) und das sekundäre Bild
(wird angezeigt, wenn der Mauszeiger über das primäre Bild bewegt wird). Die beiden Bilder eines Rollovers müssen dieselbe Größe haben. Ist
dies nicht der Fall, passt Dreamweaver die Größe des zweiten Bildes an die Größe des ersten Bildes an.
Rollover-Bilder werden automatisch so eingerichtet, dass sie auf das onMouseOver-Ereignis reagieren. Sie können ein Bild auch so konfigurieren,
dass es auf andere Ereignisse (beispielsweise einen Mausklick) reagiert, sowie ein Rollover-Bild austauschen.
1. Setzen Sie die Einfügemarke im Dokumentfenster an die Stelle, an der Sie das Rollover einfügen möchten.
2. Fügen Sie das Rollover mit einer der folgenden Methoden ein:
Klicken Sie in der Kategorie „Allgemein“ des Bedienfelds „Einfügen“ auf die Schaltfläche „Bilder“ und wählen Sie das Symbol „Rollover-
Bild“ aus. Wenn das Symbol „Rollover-Bild“ im Bedienfeld „Einfügen“ angezeigt wird, können Sie es direkt in das Dokumentfenster
ziehen.
Wählen Sie „Einfügen“ > „Grafikobjekte“ > „Rollover-Bild“.
3. Legen Sie die Optionen fest und klicken Sie auf „OK“.
Der Name des Rollover-Bildes.
Das Bild, das beim Laden der Seite angezeigt werden soll. Geben Sie den Pfad in das Textfeld ein oder klicken Sie auf
„Durchsuchen“ und wählen Sie das Bild aus.
Das Bild, das angezeigt werden soll, wenn der Zeiger über das Originalbild bewegt wird. Geben Sie den Pfad ein oder
klicken Sie auf „Durchsuchen“, um das Bild auszuwählen.
Lädt die Bilder vorab in den Cache des Browsers, sodass es nicht zu Verzögerungen kommt, wenn der Zeiger
über das Bild bewegt wird.
Optional: Eine Beschreibung des Bildes für Benutzer, die einen reinen Textbrowser verwenden.
Die Datei, die geöffnet werden soll, wenn ein Benutzer auf das Rollover-Bild klickt. Geben Sie den Pfad
ein oder klicken Sie auf „Durchsuchen“ und wählen Sie die Datei aus.
Wenn Sie keinen Hyperlink für das Bild festlegen, fügt Dreamweaver einen Null-Hyperlink (#) in den HTML-Quellcode ein, mit
dem das Rollover-Verhalten verknüpft wird. Wenn Sie den Null-Hyperlink entfernen, funktioniert das Rollover-Bild nicht mehr.
4. Wählen Sie „Datei“ > „Vorschau in Browser“ oder drücken Sie F12.
5. Bewegen Sie den Zeiger im Browser über das Originalbild, um das Rollover-Bild anzuzeigen.
Hinweis:
Nach oben
Hinweis:
Die Wirkung eines Rollover-Bildes ist in der Entwurfsansicht nicht sichtbar.
Mit externen Bildeditoren arbeiten
Während Sie in Dreamweaver arbeiten, können Sie ein ausgewähltes Bild in einem externen Bildeditor öffnen. Wenn Sie nach dem Speichern des
Bildes zu Dreamweaver zurückkehren, sind alle vorgenommenen Änderungen im Dokumentfenster zu sehen.
Sie können Fireworks als Ihren primären externen Bildeditor einrichten. Sie können auch bestimmen, welche Dateitypen ein Editor öffnen soll, und
Sie können mehrere Bildeditoren auswählen. Beispielsweise können Sie in den Voreinstellungen angeben, dass Fireworks zum Bearbeiten von
GIF-Dateien gestartet werden soll und ein anderer Bildeditor zum Bearbeiten von JPEG-Dateien.
Externen Bildeditor starten
Führen Sie einen der folgenden Schritte aus:
Doppelklicken Sie auf das Bild, das Sie bearbeiten möchten.
Klicken Sie mit der rechten Maustaste (Windows) bzw. bei gedrückter Ctrl-Taste (Macintosh) auf das zu bearbeitende Bild. Wählen Sie
dann „Bearbeiten mit“ > „Durchsuchen“ und wählen Sie einen Editor aus.
Wählen Sie das zu bearbeitende Bild aus und klicken Sie im Eigenschafteninspektor auf „Bearbeiten“.
Doppelklicken Sie im Bedienfeld „Dateien“ auf die Bilddatei, um den primären Bildeditor zu starten. Wenn Sie keinen Bildeditor
angegeben haben, startet Dreamweaver den Standardeditor für den Dateityp.
Wenn Sie ein Bild vom Bedienfeld „Dateien“ aus öffnen, sind die oben beschriebenen Fireworks-Integrationsfunktionen nicht aktiv.
Fireworks öffnet nicht die ursprüngliche PNG-Datei. Um die Fireworks-Integrationsfunktionen zu nutzen, müssen Sie Bilder vom
Dokumentfenster aus öffnen.
Wenn das aktualisierte Bild nach der Rückkehr zum Dreamweaver-Fenster nicht angezeigt wird, wählen Sie das Bild aus und klicken im
Eigenschafteninspektor auf die Schaltfläche „Aktualisieren“.
Externen Bildeditor für einen vorhandenen Dateityp festlegen
Sie können einen Bildeditor zum Öffnen und Bearbeiten von Grafikdateien auswählen.
1. Führen Sie einen der folgenden Schritte aus, um die Kategorie „Dateitypen/Editoren“ im Dialogfeld „Voreinstellungen“ zu öffnen:
Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und klicken Sie links auf
die Kategorie „Dateitypen/Editoren“.
Wählen Sie „Bearbeiten“ > „Bearbeiten mit externem Editor“ und aktivieren Sie „Dateitypen/Editoren“.
2. Wählen Sie in der Liste „Erweiterungen“ die Dateierweiterung aus, für die Sie einen externen Editor festlegen möchten.
3. Klicken Sie auf die Schaltfläche „Hinzufügen“ (+) über der Liste „Editoren“.
4. Navigieren Sie im Dialogfeld „Externen Editor auswählen“ zu der Anwendung, die Sie als Editor für diesen Dateityp starten möchten.
5. Klicken Sie im Dialogfeld „Voreinstellungen“ auf „Zu primärem Editor machen“, wenn dieser Editor der primäre Editor für diesen Dateityp
werden soll.
6. Wenn Sie weitere Editoren für diesen Dateityp festlegen möchten, wiederholen Sie Schritt 3 und 4.
Dreamweaver verwendet automatisch den primären Editor, wenn Sie diesen Bildtyp bearbeiten. Die anderen aufgeführten Editoren können
Sie im Kontextmenü für das Bild im Dokumentfenster wählen.
Neuen Dateityp zur Liste „Erweiterungen“ hinzufügen
1. Führen Sie einen der folgenden Schritte aus, um die Kategorie „Dateitypen/Editoren“ im Dialogfeld „Voreinstellungen“ zu öffnen:
Wählen Sie „Bearbeiten“ > „Voreinstellungen“ (Windows) bzw. „Dreamweaver“ > „Voreinstellungen“ (Macintosh) und klicken Sie links auf
die Kategorie „Dateitypen/Editoren“.
Wählen Sie „Bearbeiten“ > „Bearbeiten mit externem Editor“ und aktivieren Sie „Dateitypen/Editoren“.
2. Klicken Sie im Dialogfeld „Voreinstellungen“ in der Kategorie „Dateitypen/Editoren“ auf die Schaltfläche „Hinzufügen“ (+) oberhalb der Liste
„Erweiterungen“.
In der Liste „Erweiterungen“ wird ein Textfeld angezeigt.
3. Geben Sie die Dateinamenerweiterung für den Dateityp ein, bei dem ein Editor gestartet werden soll.
4. Um einen externen Editor für den Dateityp anzugeben, klicken Sie auf die Schaltfläche „Hinzufügen (+)“ oberhalb der Liste „Editoren“.
5. Ein Dialogfeld wird eingeblendet, in dem Sie die Anwendung auswählen können, mit der dieser Bildtyp bearbeitet werden soll.
Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.
Libble takes abuse of its services very seriously. We're committed to dealing with such abuse according to the laws in your country of residence. When you submit a report, we'll investigate it and take the appropriate action. We'll get back to you only if we require additional details or have more information to share.
Product:
Forumrules
To achieve meaningful questions, we apply the following rules:
First, read the manual;
Check if your question has been asked previously;
Try to ask your question as clearly as possible;
Did you already try to solve the problem? Please mention this;
Is your problem solved by a visitor then let him/her know in this forum;
To give a response to a question or answer, do not use this form but click on the button 'reply to this question';
Your question will be posted here and emailed to our subscribers. Therefore, avoid filling in personal details.
Register
Register getting emails for Adobe Dreamweaver CC - 2014 at:
new questions and answers
new manuals
You will receive an email to register for one or both of the options.
Get your user manual by e-mail
Enter your email address to receive the manual of Adobe Dreamweaver CC - 2014 in the language / languages: German as an attachment in your email.
The manual is 10,87 mb in size.
You will receive the manual in your email within minutes. If you have not received an email, then probably have entered the wrong email address or your mailbox is too full. In addition, it may be that your ISP may have a maximum size for emails to receive.
If you have not received an email with the manual within fifteen minutes, it may be that you have a entered a wrong email address or that your ISP has set a maximum size to receive email that is smaller than the size of the manual.
The email address you have provided is not correct.
Please check the email address and correct it.
Your question is posted on this page
Would you like to receive an email when new answers and questions are posted? Please enter your email address.