Probiere diese Tutorials mit Dreamweaver aus
Moderne, responsive Web-Seiten gestalten
- PSD-Datei in den Arbeitsbereich „Extract“ laden.
- Voreinstellungen für Extract festlegen.
- Bilder extrahieren.
- Media Queries bestimmte Bilder zuweisen.
- Bildgrößen anhand von Prozentwerten definieren.
Bilder im Stapel extrahieren.
Erfahre, wie du Web-optimierte Bilder in unterschiedlichen Auflösungen – auch für HiDPI-Bildschirme – im Stapel aus einem Photoshop-Dokument extrahierst.
Mit Wirkung zum 1. Juli 2022 werden die Funktionen im Bedienfeld „Extract“ in Dreamweaver 21.2 und früheren Versionen eingestellt. Du kannst Adobe Photoshop verwenden, um Stilinformationen und Elemente aus PSD-Komponenten zu extrahieren und in Dreamweaver weiterzuverwenden.
Was du benötigst
Beispieldateien herunterladen
ZIP, 59,7 MB
Aus dem Dreamweaver-Arbeitsbereich Extract heraus kannst du produktionsreife Bilder stapelweise in mehreren Auflösungen aus einem Photoshop-Dokument extrahieren. Die Verwendung von Bildern in mehreren Auflösungen hat den Vorteil, dass deine Website später mit dem für das jeweilige Endgerät am besten geeigneten Bild angezeigt wird.
Lade die Datei batch-extract-assets.zip herunter. Extrahiere die enthaltenen Projektdateien. Öffne in Dreamweaver die Datei „index.html“, und wechsle zum Arbeitsbereich Extract.
Klicke auf PSD hochladen, und öffne die Projektdatei „vermilion-design.psd“.
Wähle das Titelbild aus. Klicke auf den Pfeil, um die Optionen zum Extrahieren anzuzeigen.
Stelle vor dem Extrahieren von Bildern sicher, dass der Ziel-Speicherort und die Dateibenennung zur Struktur deiner Website passen. Klicke dazu auf das Symbol Voreinstellungen bearbeiten (Stiftsymbol).
Dreamweaver extrahiert Bilder standardmäßig in drei Auflösungen: MDPI (mittlere Auflösung), XHDPI (extra-hohe Auflösung) und XXHDPI (extra-extra-hohe Auflösung). Im Dialogfeld „Voreinstellungen“ gehst du wie folgt vor:
Gib die zu extrahierenden Auflösungen an.
Lege fest, welche Suffixe an den Dateinamen anhängt werden sollen.
Gib den Ordner an, in dem du die Bilder speichern möchtest.
Füge in der Spalte „Ordner“ für jede der drei Auflösungen am Anfang des Dateipfads den Zusatz images/ ein. Klicke auf Anwenden und dann auf Schließen.
In den Optionen zum Extrahieren kannst du weitere Details festlegen, etwa den Namen und den Dateityp des Elements.
Klicke auf Mehrere speichern.
Öffne nach dem Extrahieren das Bedienfeld Dateien, um das Resultat der Stapelextraktion anzuzeigen. Entsprechend den Voreinstellungen extrahiert Dreamweaver das Titelbild in drei verschiedenen Auflösungen und legt sie in benutzerdefinierten Ordnern innerhalb der Verzeichnisstruktur der Website ab – alles mit nur einem Klick.
Öffne die Datei DeviceAware.css. Sie enthält drei Media Queries, die drei unterschiedliche Bildschirmauflösungen definieren (kleiner Bildschirm ohne Retina-Display, mittleres Retina-Display, großes Retina-Display). Zu jeder Media Query gehört eine CSS-Klasse. Passe für jede Klasse die Property background-image an, indem du das für die jeweilige Query am besten geeignete extrahierte Bild auswählst.
Das Beispiel rechts zeigt die Media Query für ein mittelgroßes Retina-Display sowie die entsprechende CSS-Klasse. Für diese Auflösung eignet sich am besten die XHDPI-Version des extrahierten Bilds.
Beim responsiven Design bestimmen Prozentwerte statt absoluter Pixelwerte die Breite, Höhe und sonstigen Positionseigenschaften eines Bilds.
Um im Arbeitsbereich „Extract“ die Maßeinheit in Prozent zu ändern, wählst du das Titelbild aus. Klicke dann auf das Prozentsymbol (%).
Die Properties „width“ und „height“ werden jetzt als Prozentsätze angezeigt. Wenn du zwei Bilder auswählst, wird der Abstand zwischen ihnen in Prozent angegeben. CSS-Code lässt sich wie auch sonst aus dem Extract-Arbeitsbereich kopieren und in den Code deiner Web-Seite einfügen.
