Adobe Dreamweaver CC

Web-Seiten in der neuen Live-Ansicht designen, bearbeiten und überprüfen

In der Live-Ansicht von Dreamweaver können Sie Web-Seiten jetzt direkt designen, bearbeiten und testen. (Projekt: 60 Min.)

Web-Seiten in der neuen Live-Ansicht designen, bearbeiten und überprüfen

60 Min.

Die Live-Ansicht wurde überarbeitet und erlaubt nun die visuelle Erstellung von Web-Inhalten. Holen Sie HTML-Elemente und andere Assets per Drag-and-Drop direkt in eine interaktive Design-Oberfläche. Ziehen Sie Elemente an andere Positionen. Die HTML-Informationen der Assets werden automatisch aktualisiert. Die Seitenstruktur lässt sich durch Ziehen der Elemente in der Elementschnellansicht bequem verwalten und ändern.

Was brauche ich?

Dateien herunterladen Beispieldateien zum Üben (ZIP, 2 MB)

PDF herunterladen Schnellreferenz zu Dreamweaver

Die Live-Ansicht ist eine interaktive Vorschau, die Web-Seiten in HTML5 präzise rendert und nach Änderungen in Echtzeit aktualisiert.

Dabei werden Sie von neuen Hilfslinien unterstützt, die Ihnen beim Einfügen von Elementen präzise Kontrolle geben. Bearbeiten Sie Web-Inhalte effizient über das neue Kontextmenü in der Live-Ansicht. Selektoren können Sie über verbesserte Funktionen der Elementanzeige hinzufügen, löschen und erstellen. Eine Auswahl wird auf der gesamten Benutzeroberfläche synchronisiert, sodass sich CSS-Stile bequem finden und aktualisieren lassen.

In diesem Artikel erfahren Sie anhand eines Beispielprojekts alles über die neuen Design-Funktionen der Live-Ansicht.

Zum Beispielprojekt gehört eine Web-Seite mit einem Raster aus DIV-Containern mit Bildern und Text. Es ist eine Werbung für eine fiktive Musikplattform namens „Play“ (siehe Abbildung 1).

Abbildung 1: Die Beispielseite in Google Chrome

HTML-Elemente in die Live-Ansicht ziehen

Entpacken Sie die ZIP-Datei, und speichern Sie die extrahierten Dateien auf dem Desktop. Der Beispielordner enthält die HTML-Seite und alle zugehörigen Dateien.

  1. Starten Sie Dreamweaver CC 2014.

  2. Klicken Sie im Begrüßungsbildschirm auf „Site-Definition“, um das Dialogfeld „Site-Definition“ zu öffnen. Geben Sie den Site-Namen ein: Live Design. Klicken Sie auf das Ordnersymbol, und navigieren Sie zum Ordner „live_design“ auf Ihrem Desktop (siehe Abbildung 2).

Abbildung 2: Legen Sie den Pfad zum Beispielordner als lokalen Stammordner fest.
  1. Klicken Sie auf „Speichern“.

  2. Doppelklicken Sie im Bedienfeld „Dateien“ auf die Datei „dw_example.html“. Die Datei wird geöffnet.

  3. Hinweis: Sie arbeiten nun mit einem vorhandenen Beispielprojekt, mit dessen Hilfe Sie die Schritte in diesem Tutorial nachvollziehen können. Sie können aber auch über „Datei“ > „Neu“ eine neue HTML5-Seite auf Basis einer der neuen Startvorlagen erstellen.

    Wie Sie in der Menüleiste des Dokuments sehen, ist die Live-Ansicht aktiviert. Der Arbeitsbereich „Extrahieren“ wird angezeigt.

  4. Wählen Sie im Menü des Bedienfelds „Extrahieren“ die Option „Registergruppe schließen“.
Abbildung 3: Schließen Sie das Bedienfeld „Extrahieren“.

Über das Bedienfeld „Extrahieren“ lassen sich PSD-Dateien aus Photoshop bequem als Web-Grafiken verwerten. Die Beispielelemente für dieses Projekt wurden jedoch bereits angelegt. Deshalb können Sie das Bedienfeld „Extrahieren“ schließen, um mehr Platz für die Arbeitsfläche zu haben. Wenn Sie zudem die obere Kante der Code-Ansicht etwas nach unten ziehen, haben Sie einen besseren Blick auf Ihr Design. Weitere Informationen zu den Extrahieren-Funktionen finden Sie im Tutorial „Die Extrahieren-Funktion in Dreamweaver“.

Sie werden bemerken, dass sich die Live-Ansicht geändert hat. In früheren Dreamweaver-Versionen ließ sich eine Web-Seite während der Bearbeitung nicht präzise in der Live-Ansicht anzeigen. Das hat sich mit Dreamweaver CC 2014 geändert. Sie erhalten eine exakte Vorschau auf gerenderte HTML5-Seiten, schon während Sie sie bearbeiten, denn in der Live-Ansicht werden alle Änderungen automatisch umgesetzt. Es wirkt so, als würden Sie Ihre Web-Seiten direkt im Browser bearbeiten.

HTML-Elemente aus dem Bedienfeld „Einfügen“ ziehen

  1. Wählen Sie im Bereich „Struktur“ des Bedienfelds „Einfügen“ das DIV-Element aus, und ziehen Sie es auf die Seite.

  2. Wenn Sie das DIV-Element auf der Seite hin- und herbewegen, wird seine aktuelle Einfügeposition mittels einer grünen Hilfslinie angezeigt. Wie Sie sehen, können Sie das HTML-Element an jede Stelle des Layouts bewegen.

    Hinweis: Wenn Sie Blockelemente einfügen, werden die Hilfslinien ober- und unterhalb des Blocks eingeblendet. Bei Inline-Elementen erscheinen die Hilfslinien links und rechts.

  3. Lassen Sie die Maustaste los, sobald die grüne Hilfslinie unterhalb des Haupttexts in der Mitte liegt (siehe Abbildung 4).
Abbildung 4: Fügen Sie zur DIV-ID „#tile3“ ein neues DIV-Element unterhalb des Haupttexts ein.

Sie können jedes beliebige HTML-Element aus dem Bedienfeld „Einfügen“ auf die Seite ziehen.

Neue Selektoren hinzufügen, vorhandene Selektoren anwenden und Stile bearbeiten

Aktualisieren Sie Web-Seiten bequem durch das Erstellen neuer Selektoren in der Elementanzeige der Live-Ansicht, und legen Sie die Stile der Elemente im CSS Designer fest. Geben Sie den Namen der neuen Klasse oder ID ein, um sie zur HTML-Seite hinzuzufügen. Wählen Sie dann das Quell-CSS aus, um die neue Regel zu speichern. CSS Designer hebt die ausgewählten Stile optisch hervor, damit Sie ihre Eigenschaften und Werte schnell ändern können, ohne erst nach den Selektornamen suchen zu müssen.

  1. Während das neue DIV-Element ausgewählt ist, klicken Sie auf das Pluszeichen (+) in der Elementanzeige. Geben Sie den Buchstaben A ein. Drücken Sie zweimal die Nach-unten-Taste und zuletzt die Eingabetaste, um die vorhandene Klasse „.action-title“ anzuwenden und den Text entsprechend zu formatieren (siehe Abbildung 5).
Abbildung 5: Die vorhandenen Klassen werden entsprechend der Eingabe im Menü angezeigt.
  1. Während die Klasse „.action-title“ noch ausgewählt ist, klicken Sie erneut auf das Pluszeichen (+), oder drücken Sie die Tabulatortaste, um dem neuen DIV-Element einen Namen zu geben. Geben Sie #contact als Namen für die DIV-ID ein, und drücken Sie die Eingabetaste.

  2. Da die ID für „#contact“ noch nicht im CSS-Code definiert ist, erscheint ein Dialogfeld, über das Sie das Quell-CSS auswählen können, um den neuen Selektor hinzuzufügen.

  3. Wählen Sie die verknüpfte Datei „dw_example.css“ aus (siehe Abbildung 6).
Abbildung 6: Wählen Sie im Menü „Quelle auswählen“ die Datei „dw_example.css“.

Sie könnten in diesem Dialogfeld auch den Stil in der aktuellen HTML-Seite festlegen, eine Medienabfrage auswählen sowie ein neues CSS oder eine neue Medienabfrage erstellen.

  1. Der neue „#contact“-Selektor wird im CSS Designer hervorgehoben. Geben Sie im Layout-Abschnitt als Wert für den linken Rand 40 Pixel ein. Das DIV-Element wird entsprechend verschoben (siehe Abbildung 7).

Abbildung 7: Stellen Sie den Wert für den linken Rand auf 40 Pixel ein.

Falls Sie ein Element auswählen, dem in der Elementansicht mehrere Selektoren zugewiesen sind, können Sie mit der Tabulatortaste zu den einzelnen Werten springen. Mit Strg/Befehl+C wird das ausgewählte Element kopiert.

Tipp: Klicken Sie mit der rechten Maustaste auf den Selektor in der Elementanzeige, und wählen Sie „Gehe zu Code“, um den CSS-Stil in der Code-Ansicht anzuzeigen (siehe Abbildung 8).

Abbildung 8: Sehen Sie sich die Änderungen an, die Sie gerade im CSS Designer vorgenommen haben.

Bei der Bearbeitung von Web-Seiten in der Live-Ansicht können einzelne Selektoren isoliert und die Eigenschaften eines ausgewählten Elements schnell aktualisiert werden – auch bei Projekten von Dritten.

Neuen Text in der Live-Ansicht hinzufügen

Die Bearbeitung von Text, Formatierung von Textblöcken und Anwendung von Stilen war noch nie einfacher. Die Live-Ansicht rendert die Web-Seite in Echtzeit während der Bearbeitung, sodass Sie nicht immer wieder eine Vorschau im Webbrowser generieren müssen, um Textfluss und -darstellung zu überprüfen.

  1. Klicken Sie doppelt auf den Inhalt im DIV-Element „#contact“. Ein orangefarbener Rahmen wird eingeblendet.

  2. Dieser weist darauf hin, dass der Text bearbeitet werden kann.

    Tipp: Mit einem Doppelklick wählen Sie ein Wort aus, mit einem Dreifachklick einen ganzen Absatz. Drücken Sie die Eingabetaste, um einen neuen Absatz zu erstellen, oder gleichzeitig die Umschalt- und Eingabetaste, um einen Zeilenumbruch (<br>) einzufügen.

  3. Klicken Sie dreimal auf den Platzhalter, um den gesamten Text auszuwählen. Geben Sie diesen Text ein: To learn more, contact play@adobe.com.

  4. Wählen Sie die E-Mail-Adresse aus, und klicken Sie in der Elementanzeige auf die Link-Schaltfläche. Geben Sie im Eingabefeld für den Link mailto:play@adobe.com ein (siehe Abbildung 9).
Abbildung 9: Geben Sie einen Link an, oder klicken Sie auf das Ordnersymbol, um eine Site-Datei auszuwählen.
  1. Klicken Sie außerhalb des orangefarbenen Rahmens, oder drücken Sie gleichzeitig die Steuerungs- bzw. Befehltaste und die Eingabetaste, um die Änderungen zu bestätigen und die Auswahl des Texts aufzuheben.

  2. Tipp: Falls Sie die Änderungen doch nicht durchführen möchten, können Sie die Bearbeitung mit der Esc-Taste abbrechen.

  3. Klicken Sie auf die E-Mail-Adresse, und drücken Sie die Tabulatortaste. Geben Sie in der Elementanzeige den neuen Klassen-Namen .email ein, und wählen Sie „dw_example.css“ als Quelle für den neuen Selektor. Klicken Sie im Abschnitt „Text“ des CSS Designer auf die Eigenschaft „color“, und nehmen Sie mit der Pipette die lila Farbe aus dem Bild mit dem Keyboard auf (siehe Abbildung 10).
Abbildung 10: Legen Sie über einen neuen Stil Lila als Textfarbe für den Link fest.
  1. Klicken Sie auf den Text in der Mitte. Der Stil „.hero“ wird im CSS Designer hervorgehoben.

  2. Ändern Sie die Eigenschaft „margin-top“ auf den Wert 50 Pixel (siehe Abbildung 11).
Abbildung 11: Ändern Sie den oberen Rand der „.hero“-Klasse.

Die Bearbeitung von Text, Formatierung von Textblöcken und Anwendung von Stilen war noch nie einfacher. Die Live-Ansicht rendert die Web-Seite in Echtzeit während der Bearbeitung, sodass Sie nicht immer wieder eine Vorschau im Webbrowser generieren müssen, um zu prüfen, wie Textfluss und -darstellung beim Einsatz von CSS-Stilen und Edge Web Fonts angezeigt werden.

HTML-Elemente im Bedienfeld „Einfügen“ durch Klicken hinzufügen

Sie können nicht nur jedes beliebige HTML-Element im Bedienfeld „Einfügen“ auf die Seite ziehen, sondern es auch durch einen Klick zur Seite hinzufügen. Wie das Element sich in die Seite einfügt, können Sie über eine Schaltfläche bestimmen. Die neue Benutzeroberfläche der Live-Ansicht bietet maximale Flexibilität bei der Bearbeitung von Web-Seiten.

  1. Klicken Sie auf den Text in der Mitte. Klicken Sie im Bereich „Struktur“ des Bedienfelds „Einfügen“ auf das Element „Kopfzeile“.

  2. Über ein Dialogfeld erhalten Sie vier mögliche Einfügepositionen, die jeweils relativ zur aktuellen Auswahl gesehen werden: „Vor“, „Nach“, „Umschließen“ und „Einbetten“.

  3. Wählen Sie „Vor“ (siehe Abbildung 12).
Abbildung 12: Wählen Sie die Einfügeoption „Vor“, um das neue Kopfzeilenelement vor dem Text einzufügen.
  1. Klicken Sie bei ausgewähltem Kopfzeilenelement auf das Pluszeichen (+), und geben Sie den Buchstaben H ein. Drücken Sie dann die Nach-unten-Taste, um die „.hero“-Klasse auszuwählen. Drücken Sie die Eingabetaste, um die Klasse anzuwenden.

  2. Der Platzhaltertext wird entsprechend dem „.hero“-Stil neu formatiert.

  3. Drücken Sie die Tabulatortaste, und erstellen Sie den neuen Stil „#header“. Geben Sie als Quelle die Datei „dw_example.css“ an.

  4. Klicken Sie im Abschnitt „Text“ des CSS Designer auf die Eigenschaft „color“, und nehmen Sie mit der Pipette die Farbe Türkis aus dem Bild mit den Kopfhörern auf.

  5. Doppelklicken Sie auf den Text, um ihn zu bearbeiten. Wenn Sie dreimal klicken, wird die gesamte Zeile ausgewählt. Geben Sie folgenden Text ein: Welcome to PLAY! (siehe Abbildung 13).
Abbildung 13: Geben Sie einen Text für die Kopfzeile ein.

Klicken Sie auf eine beliebige Stelle der Seite, um die Textänderungen abzuschließen.

Elemente über das neue Kontextmenü der Live-Ansicht duplizieren

Über das Kontextmenü der Live-Ansicht können Sie Änderungen am Inhalt vornehmen und Elemente auf der interaktiven Design-Oberfläche verschieben.

  1. Scrollen Sie nach unten, und wählen Sie das <p>-Element unter der Überschrift „Call to Action“ aus.

  2. Klicken Sie mit der rechten Maustaste auf den Absatz, um das Kontextmenü aufzurufen, und wählen Sie „Duplizieren“ (siehe Abbildung 14).
Abbildung 14: Duplizieren Sie das ausgewählte Element in der Live-Ansicht.
  1. Ziehen Sie den duplizierten Absatz nach oben, bis die grüne Hilfslinie über der Überschrift „Call to Action“ erscheint.

  2. Klicken Sie mit der rechten Maustaste auf den duplizierten Absatz, und wählen Sie „Löschen“, um ihn wieder zu entfernen (siehe Abbildung 15).
Abbildung 15: Löschen Sie Elemente über das Kontextmenü.

Das Kontextmenü erleichtert auch die Auswahl von über- oder untergeordneten Tags, die Überprüfung der Seite und den Aufruf des Code-Navigators. Projekte lassen sich in der Live-Ansicht intuitiv bearbeiten, indem Elemente einfach an die gewünschte Position gezogen werden.

Seitenstruktur über die Elementschnellansicht definieren

Die interaktive Baumhierarchie der Elementschnellansicht erleichtert die Navigation innerhalb Ihrer Layouts. HTML-Elemente können hier einfach angeklickt und gezogen werden oder lassen sich über das Kontextmenü auswählen, neu positionieren, löschen, kopieren, einfügen und duplizieren. Verändern Sie die Struktur der gesamten Seite ebenso einfach wie die Position einzelner Elemente.

Die interaktive Liste erleichtert die Auswahl von Elementen und gewährt einen Überblick über Ihre Web-Seite. Gehen Sie wie folgt vor, um Seitenelemente mithilfe der Elementschnellansicht zu strukturieren:

  1. Wählen Sie die Überschrift „Call to Action“ aus. Das ist ein H2-Element „.action-title“.

  2. Klicken Sie auf das </>-Symbol unten links im Dokumentfenster, um die Elementschnellansicht zu öffnen (siehe Abbildung 16).

  3. Tipp: Sie können die Elementschnellansicht auch über die Tastenkombination Strg/Befehl+/ aufrufen.

Abbildung 16: Wählen Sie ein Unterelement in der HTML-Struktur des Dokuments aus.

Sehen Sie sich im Arbeitsbereich um. Dasselbe Element wird in der Live-Ansicht, der Code-Ansicht, im Tag-Selektor und in der Elementschnellansicht angezeigt. Wenn Sie den CSS Designer öffnen, ist diese Klasse auch dort ausgewählt.

Egal welche Arbeitsweise Sie bevorzugen und wie Sie ein Element auswählen – die restlichen Ansichten in Dreamweaver werden automatisch mit der aktuellen Auswahl aktualisiert.

  1. Ziehen Sie das H2-Element an die gewünschte Stelle der Live-Ansicht, und halten Sie es dort, bis die </>-QuickInfo erscheint. Bewegen Sie den Cursor darauf.

  2. Die Elementschnellansicht öffnet sich mit einer Liste der Elemente auf der Site. Ziehen Sie das H2-Element nach unten, bis die grüne Hilfslinie unterhalb des <p>-Tags erscheint. Lassen Sie die Maustaste los (siehe Abbildung 17).

Abbildung 17: Die grüne Hilfslinie zeigt die Position des Elements in der Site-Hierarchie an.
  1. Klicken Sie in der Elementschnellansicht mit der rechten Maustaste auf den Elementnamen, und wählen Sie im Kontextmenü „Duplizieren“ (siehe Abbildung 18).
Abbildung 18: Duplizieren Sie das ausgewählte Element, um eine Kopie davon zu erstellen.
  1. Ziehen Sie das duplizierte H2-Element an die Stelle direkt oberhalb des <p>-Tags, und lassen Sie die Maustaste los.

  2. Klicken Sie doppelt auf den unteren H2-Text, und ändern Sie ihn in Sign Up Now! (siehe Abbildung 19).

     

Abbildung 19: Duplizieren und bearbeiten Sie ein Textelement, und fügen Sie CSS-Stile hinzu, oder bearbeiten Sie sie.
  1. Klicken Sie in der Elementschnellansicht erneut auf das DIV-Element „#tile7“, um diesen Abschnitt der Seitenstruktur zu minimieren.

  2. In der aktuellen Version von Dreamweaver CC 2014 wurde die Performance der Live-Ansicht verbessert. Das Positionieren von Elementen auf der interaktiven Design-Oberfläche geht nun flüssiger. Innerhalb der Elementschnellansicht können Sie Elemente auch per Drag-and-Drop in einen anderen Abschnitt der Seitenstruktur verschieben.

  3. Wählen Sie das Logo links oben im Raster aus. Bewegen Sie den Cursor über das </>-Symbol, um die Elementschnellansicht zu öffnen, und bewegen Sie hier den Cursor über das DIV-Element „#tile8“. Lassen Sie dann die Maustaste los. Das PLAY-Logo wird auf der Web-Seite von links oben nach rechts unten versetzt und verdeckt das vorhandene Hintergrundbild (siehe Abbildung 20).
Abbildung 20: Verschieben Sie Unterelemente in einen anderen Bereich der Web-Seite.

In früheren Versionen von Dreamweaver war es mitunter kompliziert, Code-Blöcke neu anzuordnen. Dies gehört der Vergangenheit an. Durch interaktive Hilfslinien, die Bearbeitung von HTML-Elementen per Drag-and-Drop und die Elementschnellansicht vergessen Sie kein schließendes Tag mehr oder machen keine Fehler beim Verschachteln von Inhalten mehr. Dank der Elementschnellansicht erfolgt die Neupositionierung von Elementen in der Site-Struktur intuitiv und präzise.

Neue Assets aus dem Bedienfeld „Elemente“ auf die Seite ziehen

Neue Design-Komponenten lassen sich einfach aus dem Bedienfeld „Elemente“ in das Layout ziehen.

  1. Wählen Sie „Fenster“ > „Elemente“, um das Bedienfeld „Elemente“ zu öffnen.

  2. Wählen Sie die Datei „logo-new.jpg“ aus.

  3. Ziehen Sie in der Live-Ansicht entweder die Miniaturansicht oder den Namen der Datei „logo-new.jpg“ auf das DIV-Element „#tile1“ (siehe Abbildung 21). Die Elementschnellansicht zeigt, dass das Bild verschachtelt eingefügt wurde.
Abbildung 21: Ziehen Sie das neue Logo auf die Seite.

Denselben Workflow können Sie auch verwenden, um Medieninhalte aus dem Abschnitt „Medien“ des Elemente-Bedienfelds auf die Seite zu ziehen.

Hinweis: Um ein ausgewähltes Element einzufügen, können Sie auch unten im Elemente-Bedienfeld auf „Einfügen“ klicken. Wenn Sie diese Methode verwenden, können Sie wie schon oben beschrieben zwischen den Einfügeoptionen „Vor“, „Nach“, „Umschließen“ und „Einbetten“ wählen.

Abbildung 22: Klicken Sie im Elemente-Bedienfeld (oder dem Einfügen-Bedienfeld) auf die Schaltfläche „Einfügen“, und wählen Sie die gewünschte Einfügeoption.

Bildattribute aktualisieren

Attribute von eingefügten Bildern lassen sich direkt im Live-Eigenschafteninspektor bearbeiten. Sie müssen also weder den bisher gewohnten Eigenschafteninspektor aufrufen noch den Code in der Code-Ansicht anpassen. Ändern Sie die Bildquelle, fügen Sie Titel und Alternativtext hinzu, integrieren Sie Links, oder nehmen Sie Korrekturen zur Optimierung des SEO-Ranking vor.

  1. Klicken Sie auf das Logo in der Ecke links oben. Die Live-Attributanzeige zeigt an, dass eine Bilddatei ausgewählt ist.

  2. Klicken Sie auf das Symbol „HTML-Attribute bearbeiten“, um den Live-Eigenschafteninspektor aufzurufen (siehe Abbildung 23).
Abbildung 23: Greifen Sie mit einem Klick auf Bildattribute zu.

Tipp: Um die Bildquelle zu ändern, können Sie auf das Ordnersymbol neben dem „src“-Attribut klicken und zur gewünschten Datei navigieren. Oder Sie geben den Dateipfad ein.

  1. Geben Sie für die Attribute „title“ und „alt“ PLAY Logo ein (siehe Abbildung 24).

Abbildung 24: Aktualisieren Sie die Attribute des ausgewählten Bildelements.

Tipp: Um einen Link einzurichten, können Sie eine URL eingeben oder über das Ordnersymbol zu einer anderen Seite der Website navigieren. Verwenden Sie das Attribut „target“, um festzulegen, wo das verknüpfte Dokument geöffnet werden soll.

  1. Klicken Sie auf das geänderte Logo, um den Live-Eigenschafteninspektor zu schließen.

  2. Sie können im Live-Eigenschafteninspektor auch Breite und Höhe des Bilds ändern. Diese Funktion macht es im Zusammenspiel mit dem CSS Designer und dem Prüfmodus einfacher, die Abmessungen von Bildern zur Feinabstimmung anzupassen.

Farben über das Elemente-Bedienfeld kopieren und einfügen

  1. Klicken Sie im Elemente-Bedienfeld auf die Schaltfläche „Farben“, um eine Liste der auf der Website verwendeten Farben zu erhalten.

  2. Wählen Sie Weiß aus. Klicken Sie mit der rechten Maustaste, und wählen Sie „Farbwert kopieren“ (siehe Abbildung 25).
Abbildung 25: Kopieren Sie einen Farbwert aus dem Elemente-Bedienfeld.
  1. Wählen Sie im Tag-Selektor die Klasse „.grid“ aus.

  2. Klicken Sie im Abschnitt „Hintergrund“ des CSS Designer mit der rechten Maustaste auf den Farbwert „background-color“, wählen Sie „Einfügen“, und drücken Sie die Eingabetaste, um die Änderungen zu übernehmen (siehe Abbildung 26).
Abbildung 26: Fügen Sie für die Hintergrundfarbe die Farbwerte für Weiß ein.

In der Live-Ansicht wird die „.grid“-Klasse nun mit weißer Hintergrundfarbe dargestellt (siehe Abbildung 27).

Abbildung 27: Kopieren Sie Farbwerte, um die Hintergrundfarbe anzupassen.
  1. Schließen Sie das Elemente-Bedienfeld, und wählen Sie „Datei“ > „Alles speichern“.

Seiteninhalte über die Elementanzeige bearbeiten

Wenn Sie in der Live-Ansicht auf Seitenelemente klicken, werden die darauf angewendeten Klassen und IDs am oberen Rand der Elementanzeige angezeigt. Die Elementanzeige bietet weitere Möglichkeiten zur visuellen Überarbeitung des Layouts.

  1. Klicken Sie auf das Bild mit den Kopfhörern in der Ecke rechts oben. Die Live-Elementanzeige zeigt an, dass dem DIV-Tag die Klasse „.tile“ und die ID „#tile4“ zugeordnet sind.

  2. Drücken Sie einmal auf die Nach-unten-Taste, um die Kachel mit dem Keyboard (unterhalb der Kopfhörer) auszuwählen. Wie Sie sehen, ist allen Kacheln die Klasse „.tile“ zugewiesen.

  3. Bewegen Sie den Cursor über die ID „#tile5“. Klicken Sie auf „Klasse/ID entfernen“, um die ID zu entfernen (siehe Abbildung 28).
Abbildung 28: Bewegen Sie den Cursor über einen Selektor, und klicken Sie auf das X-Symbol für „Klasse/ID entfernen“.

Die ID wird entfernt, und das Bild mit dem Keyboard verschwindet aus dem Layout.

Tipp: Sie können auch mit der rechten Maustaste auf das Element klicken, um das Kontextmenü der Live-Ansicht aufzurufen, und dort die Option „Ausschneiden“ wählen (siehe Abbildung 29).

Abbildung 29: Entfernen Sie das DIV-Element über die Option „Ausschneiden“.
  1. Klicken Sie an einer beliebigen Stelle der Seite mit der rechten Maustaste, und wählen Sie im Kontextmenü die Option „Überprüfen“. Bewegen Sie den Cursor über das Bild mit den Kopfhörern, um eine QuickInfo mit den Abmessungen des DIV-Tags „#tile4“ aufzurufen: 270 Px mal 270 Px. Verlassen Sie den Prüfmodus, indem Sie auf das Bild mit den Kopfhörern klicken.

  2. Ändern Sie im Bereich „Layout“ des CSS Designer den Wert für „height“ in 560 Pixel, um die Höhe des Elements zu verdoppeln, und fügen Sie 20 Pixel für die Auffüllung hinzu (siehe Abbildung 30).
Abbildung 30: Die ID „#tile4“ erhält eine neue Höhe; das Hintergrundbild wird gekachelt.
  1. Wählen Sie im Abschnitt „Hintergrund“ des CSS Designer die URL aus, und klicken Sie dann auf das Ordnersymbol rechts daneben. Navigieren Sie im Ordner mit den Beispieldateien zur Datei „tile4-new.jpg“, oder geben Sie den Dateinamen im Eingabefeld ein (siehe Abbildung 31).
Abbildung 31: Die Hintergrundbild-URL wird aktualisiert, um ein neues Bild zu verknüpfen.

Code in der Live-Ansicht mithilfe des Quick Tag Editor bearbeiten

Über den Quick Tag Editor können Sie direkt auf den Quell-Code zugreifen, ohne die Live-Ansicht verlassen zu müssen. Der Editor bietet drei verschiedene Bearbeitungsmethoden für HTML-Tags.

  1. Klicken Sie rechts unten auf der Seite auf das Logobild „#tile8“.

  2. Drücken Sie Strg/Befehl+T, um den Quick Tag Editor im Modus „Tag bearbeiten“ aufzurufen. Markieren Sie im „img src“-Tag den Grafiknamen „logo.jpg“, und ändern Sie ihn in tile8.jpg. Drücken Sie anschließend die Eingabetaste. Das neue Bild wird angezeigt (siehe Abbildung 32).
Abbildung 32: Ändern Sie die Attribute von HTML-Tags direkt in der Live-Ansicht.

Ein neues Tag um ein vorhandenes HTML-Element legen

  1. Wählen Sie links oben das Logobild „#tile1“ aus.

  2. Drücken Sie Strg/Befehl+T, um den Quick Tag Editor zu öffnen. Drücken Sie Strg/Befehl+T erneut, um den Quick Tag Editor in den Modus „Tag um Objekt legen“ zu setzen.

  3. Tipp: Sie können mit der Tastenkombination Strg/Befehl+T durch alle drei Bearbeitungsmodi schalten.

  4. Geben Sie „a hr“ ein, und drücken Sie die Eingabetaste, um die angebotene Option „a href“ zu übernehmen. Der Code wird automatisch zum <a href="">-Tag ergänzt (siehe Abbildung 33).
Abbildung 33: Verwenden Sie den Quick Tag Editor, um HTML-Code hinzuzufügen und zu bearbeiten.
  1. Geben Sie zwischen den Anführungszeichen den Text http://www.adobe.com ein, um das Ziel für den Link hinzuzufügen. Drücken Sie dann die Eingabetaste.

  2. Klicken Sie an einer beliebigen Stelle auf der Seite, und wählen Sie „Datei“ > „Alles speichern“.

  3. Der Quick Tag Editor mit seinen drei Bearbeitungsmodi „Tag bearbeiten“, „Tag um Objekt legen“ und „HTML einfügen“ bietet eine praktische Möglichkeit zur schnellen Bearbeitung von HTML-Code, ohne zur Code-Ansicht wechseln zu müssen.

  4. Überprüfen Sie die fertige Seite in der Live-Ansicht (siehe Abbildung 34).
Abbildung 34: Prüfen Sie die fertige Beispielseite in Dreamweaver.

Vergleichen Sie die Live-Ansicht mit dem Rendering in Google Chrome. Die Layouts sind nahezu identisch (siehe Abbildung 35).

Abbildung 35: Zeigen Sie eine Vorschau des fertigen Layouts im Webbrowser an.

Wechseln Sie in Dreamweaver zur Code-Ansicht. Wie Sie sehen, generiert Dreamweaver sauberen HTML-Code und CSS-Stile nach neuesten Webstandards.

Nächste Schritte

Entdecken Sie weitere zeitsparende Funktionen des neuen Workflows mit der Live-Ansicht. Ziehen Sie Elemente und Assets auf die Seite, und experimentieren Sie mit der Neustrukturierung von Seitenelementen in der Elementschnellansicht. Fügen Sie neue Selektoren mithilfe der Live-Elementanzeige hinzu. Und legen Sie neue Stile im CSS Designer fest.

Wenn es Sie interessiert, wie dieses Beispielprojekt entwickelt wurde, lesen Sie das Tutorial HTML5- und CSS-Code schneller verfassen.

Weitere Neuerungen des CSS Designer und der Live-Ansicht sind im Artikel Mit dem CSS Designer in Adobe Dreamweaver Web-Seiten gestalten beschrieben.

Sehen Sie sich auch die Lernressourcen für Dreamweaver an. Die umfassende Auswahl an Artikeln, Lernvideos und Beispielprojekten hilft Ihnen dabei, sich mit den neuen Funktionen von Dreamweaver CC vertraut zu machen.

Ihre Meinung ist gefragt

Das war schon alles! Damit ist dieses Training abgeschlossen. Teilen Sie uns Ihre Meinung zu diesem Tutorial mit.


tommi-west_83x83

Tommi West

Tommi West ist freiberufliche Web-Designerin und Creative Director bei tommiland.com. Bevor sie 2004 ihr eigenes Unternehmen gründete, war sie sechs Jahre lang bei Macromedia als technische Redakteurin und Web Producer tätig. West ist aktive Teilnehmerin des Adobe Community Professional-Programms.