Ziehen Sie eine Linie aus dem entsprechenden Lineal.
Zuletzt aktualisiert am
27. April 2021
Für das Layout können Sie in Dreamweaver visuelle Hilfsmittel wie einstellbare Lineale oder Layouthilfslinien, Hilfslinien für Vorlagen, Layoutraster oder Tracing-Bilder einsetzen.
Lineale einrichten
Lineale helfen dir beim Messen, Organisieren und Planen deines Layouts. Sie können am linken und oberen Rahmen der Seite angezeigt werden, markiert in Pixel, Zoll oder Zentimetern.
- Um Lineale ein- und auszublenden, wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Lineale“ > „Ein-/Ausblenden“.
- Wenn Sie den Ursprung ändern möchten, ziehen Sie das Linealursprungssymbol
(in der Entwurfsansicht in der linken oberen Ecke des Dokumentfensters) auf eine beliebige Stelle der Seite. - Zu den Ursprung auf seine Standardposition zurückzusetzen, wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Lineale“ > „Ursprung zurücksetzen“.
- Um die Maßeinheit zu ändern, wählen Sie „ Ansicht“ > „Lineale“ und wählen dann Pixel, Zoll oder Zentimeter aus.
Layouthilfslinien einrichten
Guides sind Linien, die du von den Linealen auf das Dokument ziehst.Sie helfen dir dabei, Objekte präziser zu platzieren und auszurichten. Du kannst auch Hilfslinien verwenden, um die Größe von Seitenelementen zu messen oder die Falzlinien (sichtbare Bereiche) von Web-Browsern zu emulieren.
Um dir beim Ausrichten von Elementen zu helfen, kannst du Elemente an Hilfslinien einrasten lassen und Hilfslinien an Elementen einrasten lassen. (Elemente müssen absolut positioniert sein, damit die Einrast-Funktion funktioniert.) Du kannst auch Guides sperren, um zu verhindern, dass sie versehentlich von einem anderen Anwender verschoben werden.
Erstelle eine horizontale oder vertikale Hilfslinie
Positioniere die Hilfslinie im Dokumentfenster und lasse
die Maustaste los (positioniere die Hilfslinie neu, indem du sie erneut ziehst).
Anmerkung
Standardmäßig werden Guides als absolute Pixelmessungen vom oberen oder linken Rand des Dokuments aufgezeichnet und relativ zum Ursprung des Lineals angezeigt.Um die Hilfslinie als Prozentsatz aufzuzeichnen, drücke die Umschalttaste, während du die Hilfslinie erstellst oder bewegst.
Hilfslinien ein- und ausblenden
Wähle Ansicht > Guides > Guides anzeigen.
Elemente an Hilfslinien ausrichten
- Um Elemente an Hilfslinien auszurichten, wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Hilfslinien“ > „An Hilfslinien ausrichten“.
- Um Elemente an Hilfslinien auszurichten, wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Hilfslinien“ > „Hilfslinien an Elementen ausrichten“.
Anmerkung
Wenn Sie die Größe von Elementen ändern, z. B. absolut positionierte Element (AP-Elemente), Tabellen oder Bilder, werden die geänderten Elemente an Hilfslinien ausgerichtet.
Alle Hilfslinien sperren oder entsperren
Wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Hilfslinien“ > „Hilfslinien sperren“.
Hilfslinie anzeigen und zu einer bestimmten Position bewegen
Halte den Mauszeiger über die Hilfslinie,
um ihre Position anzuzeigen.
Doppelklicken Sie auf die Hilfslinie.
Gib die neue Position im Dialogfeld Hilfslinie verschieben ein und
klicke auf OK.
Abstand zwischen Hilfslinien anzeigen
Drücke Strg (Windows) oder Befehl (Macintosh)
und halte den Mauszeiger irgendwo zwischen den beiden Hilfslinien.
Anmerkung
Die Maßeinheit entspricht der Maßeinheit, die für die Lineale verwendet wird.
Emuliere die Falzlinie (sichtbaren Bereich) eines Web-Browsers
Wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Hilfslinien“ und wählen Sie dann aus dem Menü eine voreingestellte Browsergröße aus.
Hilfslinien entfernen
Ziehen Sie die Hilfslinie vom Dokument herunter.
Einstellungen für Hilfslinien ändern
Wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Hilfslinien“ > „Hilfslinien bearbeiten“ und klicken Sie auf „OK“.
Hilfslinienfarbe
Legt die Farbe der Hilfslinien fest. Klicke auf das Farbfeld und wähle eine Farbe aus dem Farbwähler oder gib eine hexadezimale Zahl in das Textfeld ein.
Abstandsfarbe
Legt die Farbe der Linien fest, die als Abstandsindikatoren erscheinen, wenn du den Mauszeiger zwischen Hilfslinien hältst. Klicke auf das Farbfeld und wähle eine Farbe aus dem Farbwähler oder gib eine hexadezimale Zahl in das Textfeld ein.
Hilfslinien anzeigen
Blendet Hilfslinien in der Entwurfsansicht ein.
An Hilfslinien ausrichten
Lässt Seitenelemente an Guides einrasten, während du Elemente auf der Seite bewegst.
Hilfslinien sperren
Fixiert Hilfslinien an der jeweiligen Position.
Hilfslinien an Elementen ausrichten
Richtet beim Ziehen von Hilfslinien die Hilfslinien an den Elementen auf der Seite aus.
Alles löschen
Entfernt alle Hilfslinien auf der Seite.
Hilfslinien mit Vorlagen verwenden
Wenn Hilfslinien zu einer Dreamweaver-Vorlage hinzugefügt werden, erben alle Instanzen der Vorlage die Hilfslinien. Guides in Muster- Instanzen werden jedoch als bearbeitbare Regionen behandelt, sodass Anwender sie ändern können. Geänderte Guides in Muster-Instanzen werden auf ihren ursprünglichen Platz zurückgesetzt, wenn die Instanz mit der Master-Vorlage aktualisiert wird.
Sie können in die Instanzen einer Vorlage auch Ihre eigenen Hilfslinien einfügen. Guides, die auf diese Weise hinzugefügt wurden, werden nicht überschrieben, wenn die Muster- Instanz mit der Master-Vorlage aktualisiert wird.
Layoutraster verwenden
Das Raster zeigt ein System aus horizontalen und vertikalen Linien im Dokumentfenster an. Es ist hilfreich, um Objekte präzise zu platzieren. Du kannst absolut positionierte Seitenelemente automatisch am Raster einrasten lassen, wenn du sie bewegst, und das Raster ändern oder das Einrast-Verhalten steuern, indem du Raster-Einstellungen angibst. Das Einrasten funktioniert, egal ob das Raster sichtbar ist oder nicht.
Raster ein- und ausblenden
Wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Raster“ > „Raster anzeigen“.
Automatischen Ausrichtungsfunktion aktivieren oder deaktivieren
Wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Raster“ > „Am Raster ausrichten“.
Einstellungen für Raster ändern
Wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Raster“ > „Rastereinstellungen“.
Legen Sie die Optionen fest und klicken Sie auf „OK“, um die Änderungen zu anzuwenden.
Farbe
Legt die Farbe der Rasterlinien fest. Klicke auf das Farbfeld und wähle eine Farbe im Farbwähler aus oder gib eine Hexadezimalzahl in das Textfeld ein.
Raster anzeigen
Blendet in der Entwurfsansicht das Raster ein.
Am Raster ausrichten
Richtet die Seitenelemente an den Rasterlinien aus.
Abstand
Steuert den Abstand zwischen den Rasterlinien. Gib eine Zahl ein und wähle Pixel, Zoll oder Zentimeter aus dem Menü.
Anzeige
Gibt an, ob die Rasterlinien als durchgehende Linien oder als Punktlinien angezeigt werden.
Anmerkung
Wenn Raster anzeigen nicht ausgewählt ist, erscheint das Raster nicht im Dokument und es sind keine Änderungen sichtbar.
Tracing-Bilder verwenden
Du kannst ein Tracingbild als Handbuch verwenden, um ein Seitendesign nachzubauen, das in einer Grafikapplikation wie Adobe Freehand oder Fireworks erstellt wurde.
Ein Tracingbild ist ein JPEG-, GIF- oder PNG-Bild, das im Hintergrund des Dokumentfensters platziert wird. Du kannst das Bild ausblenden, seine Deckkraft einstellen und seine Position ändern.
Das Tracingbild ist nur in Dreamweaver sichtbar; es ist nicht sichtbar, wenn du die Seite in einem Browser anzeigst. Wenn das Tracingbild sichtbar ist, sind das tatsächliche Hintergrundbild und die Farbe der Seite im Dokumentfenster nicht sichtbar; das Hintergrundbild und die Farbe sind jedoch sichtbar, wenn die Seite in einem Browser angezeigt wird.
Platziere ein Tracingbild im Dokumentfenster
Führen Sie einen der folgenden Schritte aus:
Wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Tracing-Bild“ > „Laden“.
Wählen Sie „Datei“ > „Seiteneigenschaften“ und klicken Sie dann in der Kategorie „Tracing-Bild“ auf „Durchsuchen“ (neben dem Textfeld „Tracing-Bild“).
Navigieren Sie zu Ihrer Bilddatei und klicken Sie auf „OK“.
Gib im Dialogfeld Seiteneigenschaften die Transparenz
für das Bild an, indem du den Bild-Transparenz-Regler ziehst, und klicke dann auf
OK.
Um zu einem anderen Tracing-Bild zu wechseln oder die Transparenz des aktuellen Tracing-Bilds zu ändern, können Sie jederzeit „Datei“ > „Seiteneigenschaften“ wählen.
Tracing-Bilder ein- und ausblenden
Wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Tracing-Bild“ > „Anzeigen“.
Ändere die Position eines Tracingbilds
Wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Tracing-Bild“ > „Position einstellen“.
Um die Position des Tracingbilds präzise anzugeben, gib Koordinatenwerte in die X- und Y-Textfelder ein.
Um das Bild um 1 Pixel zu bewegen, verwende die Pfeiltasten.
Um das Bild um 5 Pixel zu bewegen, drücke die Umschalttaste und eine Pfeiltaste.
Position des Tracingbilds zurücksetzen
Wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Tracing-Bild“ > „Position zurücksetzen“.
Das Tracingbild kehrt in die obere linke Ecke des Dokumentfensters zurück (0,0).
Richte das Tracingbild an einem ausgewählten Element aus
Wähle
ein Element im Dokumentfenster aus.
Wählen Sie „Ansicht“ > „Optionen in der Entwurfsansicht“ > „Tracing-Bild“ > „An Auswahl ausrichten“.
Die obere linke Ecke des Tracingbilds wird an der oberen linken Ecke des ausgewählten Elements ausgerichtet.
Tracingbild-Eigenschaften festlegen
Lege Eigenschaften für ein Tracingbild fest (eine Grafikdatei, die als Hilfsmittel beim Entwerfen deiner Seite verwendet wird).
Führen Sie einen der folgenden Schritte aus:
- Wählen Sie „Datei“ > „Eigenschaften“
- Wählen Sie „Fenster“ > „Eigenschaften“ und klicken Sie im Eigenschafteninspektor für Text auf „Seiteneigenschaften“.
Wählen Sie im Dialogfeld „Seiteneigenschaften“ die Option „Tracing-Bild“ aus. Sie können die folgenden Optionen in diesem Bedienfeld konfigurieren:
- Tracingbild: Gibt ein Bild an, das als Vorlage zum Kopieren eines Designs verwendet wird.Dieses Bild dient nur der Referenz und ist nicht zu sehen, wenn das Dokument in einem Browser angezeigt wird.
- Transparenz: Bestimmt die Deckkraft des Tracingbilds, von vollständig transparent bis vollständig undurchsichtig.
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
