Öffne das Eigenschaftenbedienfeld (Fenster > Eigenschaften), falls es nicht bereits geöffnet ist, und wähle die CSS-Option in der linken Ecke des Bedienfelds aus.
Zuletzt aktualisiert am
20. Dezember 2021
Hier erfahren Sie, wie Sie mit dem Eigenschafteninspektor für Text HTML- und CSS-Formatierungen in Dreamweaver anwenden.
Du kannst den Eigenschafteninspektor für Text verwenden, um HTML-Formatierung oder Cascading Style Sheet (CSS)-Formatierung anzuwenden.Wenn du HTML-Formatierung anwendest, fügt Dreamweaver Eigenschaften zum HTML-Code im Hauptteil deiner Seite hinzu. Wenn du CSS-Formatierung anwendest, schreibt Dreamweaver Eigenschaften in den Kopf des Dokuments oder in ein separates Stylesheet.
Beim Erstellen von CSS-Inline-Stilen wird der Code für Stilattribute von Dreamweaver direkt in das Body-Tag der Seite eingefügt.
Über die Textformatierung (CSS versus HTML)
Die Textformatierung in Dreamweaver ist ähnlich wie die Verwendung einer standardmäßigen Textverarbeitung. Du kannst standardmäßige Formatierungsstile (Absatz, Überschrift 1, Überschrift 2 usw.) für einen Textblock festlegen, die Schrift, Schriftgröße, Farbe und Ausrichtung von ausgewähltem Text ändern oder Textstile wie Fett, Kursiv, Code (Monospace) und Unterstreichen anwenden.
Dreamweaver hat zwei Eigenschaftsinspektoren, die in einem integriert sind: den CSS-Eigenschaftsinspektor und den HTML-Eigenschaftsinspektor.Wenn du das CSS-Eigenschaftenbedienfeld verwendest, formatiert Dreamweaver Text mit Cascading Style Sheets (CSS). CSS gibt Webdesignern und Entwicklern mehr Kontrolle über das Webseiten-Design und bietet gleichzeitig verbesserte Funktionen für Barrierefreiheit und reduzierte Dateigröße. Das CSS-Eigenschaftenbedienfeld ermöglicht dir den Zugriff auf vorhandene Stile sowie das Erstellen neuer Stile.
CSS zu verwenden ist eine Möglichkeit, den Stil einer Webseite zu kontrollieren, ohne deren Struktur zu beeinträchtigen. Durch die Trennung visueller Designelemente (Schriften, Farben, Ränder usw.) von der strukturellen Logik einer Webseite gibt CSS Webdesignern visuelle und typografische Kontrolle, ohne die Integrität des Inhalts zu beeinträchtigen. Darüber hinaus ermöglicht die Definition von typografischem Design und Seitenlayout aus einem einzigen, eigenständigen Codeblock heraus – ohne auf Imagemaps, Font-Tags, Tabellen und Spacer-GIFs zurückgreifen zu müssen – schnellere Downloads, optimierte Seiten-Wartung und einen zentralen Punkt, von dem aus Designattribute über mehrere Webseiten hinweg kontrolliert werden können.
Du kannst mit CSS erstellte Stile direkt im Dokument speichern oder für mehr Leistung und Flexibilität Stile in einem externen Stylesheet speichern. Wenn du ein externes Stylesheet an mehrere Webseiten anhängst, spiegeln alle Seiten automatisch alle Änderungen wider, die du am Stylesheet vornimmst. Um auf alle CSS-Regeln für eine Seite zuzugreifen, verwende das CSS-Stile-Bedienfeld (Fenster > CSS-Stile). Um auf Regeln zuzugreifen, die für eine aktuelle Auswahl gelten, verwende das CSS-Stile-Bedienfeld (Aktueller Modus) oder das Popup-Menü Zielregel im CSS-Eigenschaftenbedienfeld.
Falls du es bevorzugst, kannst du HTML-Markup-Tags verwenden, um Text in deinen Webseiten zu formatieren. Um HTML-Tags anstelle von CSS zu verwenden, formatiere deinen Text mit dem HTML-Eigenschaftenbedienfeld.
Sie können CSS und HTML 3.2-Formatierungen auf einer Seite kombinieren. Die Formatierung wird in hierarchischer Folge zugewiesen: Die HTML 3.2-Formatierung setzt die Formatierung außer Kraft, die durch externe CSS-Stylesheets zugewiesen wurde. Die in ein Dokument eingebetteten CSS-Stile haben Vorrang vor externen CSS-Stilen.
CSS-Regeln im Eigenschafteninspektor bearbeiten
Führen Sie einen der folgenden Schritte aus:
- Platziere den Einfügepunkt innerhalb eines Textblocks, der durch eine Regel formatiert wurde, die du bearbeiten möchtest. Die Regel erscheint im Popup-Menü Zielregel.
- Wählen Sie im Popupmenü „Zielregel“ eine Regel aus.
- Klicke auf Regel bearbeiten.
Nimm Änderungen an der Regel vor, indem du die verschiedenen Optionen
im CSS-Eigenschafteninspektor verwendest.
Zielregel:
Die Regel, die Sie im CSS-Eigenschafteninspektor bearbeiten. Wenn bereits ein Stil auf Text angewendet ist, wird die Regel, die das Format des Textes beeinflusst, angezeigt, wenn du in den Text auf der Seite klickst. Du kannst auch das Popup-Menü Gezielte Regel verwenden, um neue CSS-Regeln oder neue Inline-Stile zu erstellen oder vorhandene Klassen auf ausgewählten Text anzuwenden. Wenn du eine neue Regel erstellst, musst du das Dialogfeld Neue CSS-Regel vervollständigen. Weitere Informationen findest du unter den Links am Ende dieses Themas.
Regel bearbeiten:
Öffnet das Dialogfeld CSS-Regeldefinition für die gezielte Regel. Wenn du Neue CSS-Regel aus dem Popup-Menü Gezielte Regel auswählst und auf den Button Regel bearbeiten klickst, öffnet Dreamweaver stattdessen das Dialogfeld Neue CSS-Regel definition.
CSS-Designer:
Öffnet das Bedienfeld CSS Designer und zeigt Eigenschaften für die gezielte Regel in der aktuellen Ansicht an.
Schrift:
Ändert die Schriftart der Zielregel.
Größe:
Legt die Schriftgröße der Zielregel fest.
Textfarbe:
Legt die ausgewählte Farbe als Schriftfarbe in der Zielregel fest. Wähle eine websichere Farbe aus, indem du auf das Farbfeld klickst, oder gib einen Hexadezimalwert (zum Beispiel #BB5153) in das angrenzende Textfeld ein.
Fett:
Fügt der Zielregel die bold-Eigenschaft hinzu.
Kursiv:
Fügt der Zielregel die italic-Eigenschaft hinzu.
Linksbündig, Zentrieren und Rechtsbündig:
Richtet die Zielregel linksbündig, zentriert oder rechtsbündig aus.
Bei den Eigenschaften „Schrift“, „Größe“, „Textfarbe“, „Fett“, „Kursiv“ und „Ausrichtung“ werden immer die Eigenschaften der Regel angezeigt, die für die aktuelle Auswahl im Dokumentfenster gilt. Wenn Sie Änderungen an diesen Eigenschaften vornehmen, wirkt sich dies auf die Zielregel aus.
Textfarbe mithilfe des Eigenschafteninspektors bearbeiten
Wenn Sie keine bestimmte Regel auf Ihren Text angewendet haben, können Sie die Farbe des Textes direkt im Eigenschafteninspektor bearbeiten. Beachten Sie im folgenden Beispiel die Textfarbe vor dem Bearbeiten. Das Feld neben dem Farbwähler zeigt Weiß an und gibt die Farbe des Texts an der Stelle an, wo du deinen Cursor platziert hast.
Um die Textfarbe zu bearbeiten, markieren Sie den Text, den Sie bearbeiten möchten. Klicken Sie auf den Farbwähler und wählen Sie eine Farbe aus. Siehe das folgende Bild, wo der Eigenschafteninspektor die neue Farbe anzeigt.
HTML-Formatierung im Eigenschafteninspektor festlegen
Öffne den Eigenschafteninspektor (Fenster >
Eigenschaften), falls er nicht bereits geöffnet ist, und klicke auf den HTML-Button.
Wähle den Text aus, den du formatieren möchtest.
Legen Sie die gewünschten Optionen für den ausgewählten Text fest:
Format:
Legt den Absatzstil des ausgewählten Textes fest. Absatz wendet das Standardformat für einen <p>-Tag an, Überschrift 1 fügt einen H1-Tag hinzu und so weiter.
ID:
Weist Ihrer Auswahl eine ID zu. Das ID-Popup-Menü (falls anwendbar) listet alle nicht verwendeten, deklarierten IDs des Dokuments auf.
Klasse:
Zeigt den Klassenstil an, der derzeit auf den ausgewählten Text angewendet wird. Wenn keine Stile auf die Auswahl angewendet wurden, zeigt das Popup-Menü Kein CSS-Stil an. Wenn mehrere Stile auf die Auswahl angewendet wurden, ist das Menü leer.
Verwende das Stilmenü für eine der folgenden Aktionen:
Wähle den Stil aus, den du auf die Auswahl anwenden möchtest.
Wählen Sie „Kein“, um den derzeit ausgewählten Stil zu entfernen.
Wählen Sie „Umbenennen“ aus, um den Stil umzubenennen.
Wähle Stylesheet anfügen aus, um ein Dialogfeld zu öffnen, mit dem du ein externes Stylesheet an die Seite anhängen kannst.
Fett:
Wendet je nach Stilvoreinstellung in der Kategorie Allgemein des Dialogfelds Voreinstellungen entweder <b> oder <strong> auf den ausgewählten Text an.
Kursiv:
Wendet je nach Stilvoreinstellung in der Kategorie Allgemein des Dialogfelds Voreinstellungen entweder <i> oder <em> auf den ausgewählten Text an.
Ungeordnete Liste:
Erstellt anhand des ausgewählten Textes eine Liste mit Aufzählungspunkten. Wenn kein Text ausgewählt ist, wird eine neue Liste mit Aufzählungszeichen gestartet.
Geordnete Liste:
Erstellt anhand des ausgewählten Textes eine nummerierte Liste. Wenn kein Text ausgewählt ist, wird eine neue nummerierte Liste gestartet.
„Blockzitat“ und „Blockzitat entfernen“:
Rücke den ausgewählten Text ein oder entferne den Einzug, indem du das blockquote-Tag anwendest oder entfernst.In einer Liste erstellt ein Einzug eine verschachtelte Liste und das Entfernen des Einzugs hebt die Verschachtelung der Liste auf.
Hyperlink:
Macht den ausgewählten Text zu einem Hyperlink. Klicke auf das Ordner-Symbol, um zu einer Datei in deinem Bereich zu durchsuchen; gib die URL ein; ziehe das Point-To-File-Symbol zu einer Datei im Dateien-Bedienfeld; oder ziehe eine Datei aus dem Dateien-Bedienfeld in das Feld.
Titel:
Gibt den QuickInfo-Text für einen Hypertext-Link an.
Ziel:
Gibt den Frame oder das Fenster an, in dem das verknüpfte Dokument geladen wird:
_blank lädt die verknüpfte Datei in ein neues, unbenanntes Browser-Fenster.
_parent lädt die verknüpfte Datei in das übergeordnete Frameset oder Fenster des Frames, der den Link enthält.Wenn der Frame mit dem Link nicht verschachtelt ist, wird die verknüpfte Datei im gesamten Browser-Fenster geladen.
_self lädt die verknüpfte Datei in denselben Frame oder das gleiche Fenster wie der Link.Dieses Ziel ist implizit, daher musst du es normalerweise nicht angeben.
_top lädt die verknüpfte Datei im gesamten Browser-Fenster und entfernt dabei alle Frames.
Klasse im HTML-Eigenschaftsinspektor umbenennen
Dreamweaver zeigt alle für deine Seite verfügbaren Klassen im Klassen-Menü des HTML-Eigenschaftsinspektors an.Du kannst Stile in dieser Liste umbenennen, indem du die Option Umbenennen am Ende der Liste der Klassenstile auswählst.
Wähle im Eigenschaftsinspektor-Bedienfeld die Dropdown-Liste Klasse aus.
Wähle aus der Liste, die sich öffnet, am Ende der Liste Umbenennen aus.
Wähle den Stil, den du umbenennen möchtest, aus dem Popup-Menü Stil umbenennen aus.
Gib einen neuen Namen in das Textfeld Neuer Name ein und klicke auf
OK.
Ähnliche Themen
Erstellen ansprechender Websites in Dreamweaver
Entwirf, code und verwalte dynamische Websites mit einem leistungsstarken All-in-one-Tool.
