Adobe Dreamweaver CC

HTML5- und CSS-Code schneller verfassen

(Artikel: 30 Min.)

HTML5- und CSS-Code schneller verfassen

30 Min.

Erstellen Sie eine Web-Seite mit Kachelstruktur mithilfe von Features zur Hervorhebung von Tags und Zeilennummern, Codehints für CSS-Selektoren und Code-Vervollständigung.

Was brauche ich?

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

PDF herunterladen Schnellreferenz zu Dreamweaver

Dreamweaver CC enthält Editing-Funktionen, die das Suchen, Auswählen, Verfassen und Aktualisieren von Code vereinfachen. Dank der neuen Funktion zur Hervorhebung zusammengehörender Tags sind einzelne Container und die Seitenstruktur während der Code-Bearbeitung leicht zu erkennen. Durch das Hervorheben und Ausblenden von Zeilen lassen sich Quell-Code und Stylesheets problemlos verwalten.

Die Codehints wurden den aktuellen Webstandards entsprechend angepasst. Die neue Funktion zur automatischen Vervollständigung von CSS-Code hilft, Seiten schneller zu erstellen und Fehler zu vermeiden. Zudem reagiert die verbesserte Code-Ansicht schneller auf Eingaben. Auch bei der Aktualisierung langer, komplexer Web-Seiten reagiert die Entwicklungsumgebung sofort auf jede Tastatureingabe.

Und wenn Sie Code- und Entwurfsansicht nebeneinander anzeigen, hilft die neue Elementschnellansicht bei der Bearbeitung Ihrer Website-Struktur. Wählen Sie Elemente in der Live-Ansicht, der Entwurfsansicht, der Elementschnellansicht oder mit dem Tag-Selektor aus, um zum entsprechenden Code in der Code-Ansicht zu gelangen. Ihre Änderungen werden in der Code-Ansicht in Echtzeit umgesetzt. Dank verbesserter visueller Hervorhebungen in der Code-Ansicht und Codehints, deren Farbe Sie individuell anpassen können, setzen Sie Ihre großartigsten Design-Ideen mühelos um.

In diesem Artikel lernen Sie Features der Code-Ansicht kennen, mit denen Sie deutlich schneller die Struktur einer neuen Seite definieren können. In Video 1 zeigt Ihnen Dan Carr anhand der zum Download bereitgestellten Projektdateien (ZIP, 700 KB), wie Sie mithilfe der neuen Funktionen der Code-Ansicht die Grundstruktur einer Web-Seite definieren. Testen Sie die Funktionen anschließend selbst, indem Sie der Anleitung in diesem Artikel folgen.

Video 1: Dan Carr führt vor, wie mit den neuesten Funktionen in der Code-Ansicht die Struktur einer Web-Seite erstellt wird.

 

Laden Sie zunächst die Beispieldateien herunter (ZIP, 2 MB). Entpacken Sie die ZIP-Datei, und speichern Sie die extrahierten Dateien auf dem Desktop. Laden Sie die neueste Version von Adobe Dreamweaver CC aus der Creative Cloud herunter, und installieren Sie sie.

Der Ordner mit den Beispieldateien zu diesem Projekt enthält die fertige Version der Datei mit dem Namen „index_final.html“. Verwenden Sie diese Datei in Dreamweaver als Referenz (siehe Abbildung 1).

Abbildung 1: Vorschau der fertigen Version des Beispielprojekts in Chrome
Abbildung 1: Vorschau der fertigen Version des Beispielprojekts in Chrome

Unser besonderer Dank gilt an dieser Stelle Dan Carr für die Entwicklung des Beispielprojekts für diesen Artikel. Nachdem Sie die Schritte in diesem Artikel abgeschlossen haben, können Sie mit dem Tutorial Web-Seiten in der Live-Ansicht designen, bearbeiten und überprüfen weitermachen und Ihre Beispielseite verwenden, um die neuen Funktionen der Live-Ansicht auszuprobieren.

Ein neues Projekt einrichten

Erstellen Sie das Beispielprojekt anhand folgender Schritte:

  1. Starten Sie Dreamweaver CC.

  2. Wählen Sie „Site“ > „Sites verwalten“, und klicken Sie auf „Neue Site“.

  3. Geben Sie im Dialogfeld „Site-Definition“ einen Namen für die Website ein: DW CC Code. Klicken Sie auf das Ordnersymbol neben dem Feld „Lokaler Site-Ordner“, und suchen Sie den Ordner „dw_cc_code“ auf Ihrem Desktop. Klicken Sie auf „Speichern“ (siehe Abbildung 2).

     

    Abbildung 2: Erstellen eines neuen Projekts im Dialogfeld „Site-Definition“
    Abbildung 2: Erstellen eines neuen Projekts im Dialogfeld „Site-Definition“
  4. Klicken Sie auf „Fertig“, um das Dialogfeld „Sites verwalten“ zu schließen.

  5. Wählen Sie „Fenster“ > „Dateien“, um das Bedienfeld „Dateien“ zu öffnen, und nehmen Sie sich etwas Zeit, um sich mit den Website-Dateien vertraut zu machen.

    Das Beispielprojekt enthält die HTML-Seite „index_final.html“, die CSS-Datei „dw_example.css“, einen Ordner mit Quelldateien für die Vorproduktion und den Ordner „images“ mit den Bilddateien für die Website.

  6. Klicken Sie mit der rechten Maustaste auf den Stammordner der Website, und wählen Sie im Kontextmenü „Neue Datei“ aus. Nennen Sie die neue Datei index.html (siehe Abbildung 3).

     

    Abbildung 3: Erstellen einer neuen Datei mit dem Namen „index.html“ auf der Stammebene des Website-Projekts
    Abbildung 3: Erstellen einer neuen Datei mit dem Namen „index.html“ auf der Stammebene des Website-Projekts
  7. Wählen Sie die Datei „index.html“ aus, und klicken Sie bei gedrückter Umschalttaste auf die Datei „index_final.html“. Mit einem Doppelklick öffnen Sie beide Dateien.

  8. Klicken Sie auf den Button „Code“, um die Seiten in der Code-Ansicht anzuzeigen. Wählen Sie die Registerkarte für die Seite „index.html“ aus.

  9. Sehen Sie sich die Standard-Seitenstruktur der neuen Seite an. In Zeile 1 wird an erster Stelle der Dokumenttyp aufgeführt: „HTML5“. Die HTML-Tags umschließen den Seiteninhalt. Das HTML-Tag enthält einige Metadaten und das TITLE-Tag. In diesem Bereich werden Sie die Verknüpfung zu der CSS-Datei hinzufügen. Darunter sehen Sie die BODY-Tags, die alle in einem Browser angezeigten Seitenelemente enthalten.

  10. Klicken Sie in das TITLE-Tag, um den Standardtitel „Unbenanntes Dokument“ zu ersetzen. Geben Sie zwischen dem öffnenden und dem schließenden TITLE-Tag Dreamweaver CC ein. Ihr TITLE-Tag sollte wie folgt aussehen:

    <title>Dreamweaver CC</title>

    Das Website-Projekt und die HTML-Startseite sind jetzt eingerichtet. Im nächsten Abschnitt wird die Seitenstruktur für das Layout erstellt.

grid- und tile-Container hinzufügen

Dieses Beispielprojekt enthält einen relativ positionierten DIV-Container namens „grid“. Innerhalb dieses Containers werden acht absolut positionierte DIV-Container an bestimmten Stellen auf der Seite angezeigt, um einen Kacheleffekt zu erzielen.

Bevor Sie die Rasterstruktur hinzufügen, folgen Sie den Schritten, um sich das Seiten-Layout als Diagramm anzusehen.

  1. Klicken Sie im Bedienfeld „Dateien“ auf den Ordner „_src“, um ihn zu öffnen. Doppelklicken Sie auf die Datei „tile_layout.jpg“, um sie in Photoshop oder der auf Ihrem Computer konfigurierten Applikation für JPEG-Dateien zu öffnen (siehe Abbildung 4).

     

    Abbildung 4: Das Layout als Diagramm
    Abbildung 4: Das Layout als Diagramm

    Hinweis: Es ist nicht wichtig, welches Programm geöffnet wird, da Sie sich die JPEG-Datei nur ansehen.

     

    Das Diagramm zeigt die Positionierung der Kacheln auf der Website in einem Raster. Für das Raster und alle DIV-tile-Container sind die jeweilige Breite, Höhe und die Positionskoordinaten angegeben. Beim Webdesign ist es sehr hilfreich, zunächst solch ein Wireframe zu erstellen und die Attribute jedes Containers vor dem Erstellen des Codes der CSS-Stile zu berechnen. Sie können die Werte auch auf einem Zettel notieren. Es ist jedoch sinnvoller, eine Entwurfsskizze für das Layout anzufertigen.

  2. Beachten Sie, dass der grid-Container ein Wrapper ist, der alle Kacheln umschließt. Mithilfe von CSS definieren Sie die relative Position des Rasters. So können Sie festlegen, dass das Raster in der Mitte des verwendeten Bildschirms angezeigt wird.

  3. Beachten Sie außerdem, dass das Wireframe die finale Seitenbreite enthält: 1140 Pixel. Dies ist eine Standardgröße für die Erstellung von Web-Inhalten für Desktop-Bildschirme.

  4. Wechseln Sie wieder zu Dreamweaver. Lassen Sie die JPEG-Datei geöffnet, um später darauf zurückgreifen.

  5. Klicken Sie unter das öffnende BODY-Tag, und geben Sie Folgendes ein:

    <div class="grid">
    </div>
    

    Wenn Sie die ersten beiden Zeichen des schließenden DIV-Tags eingeben, erleichtern Hinweise zur Vervollständigung des Codes die Eingabe.

  6. Klicken Sie zwischen das öffnende und das schließende DIV-Tag, und drücken Sie 9 oder 10 Mal die Eingabetaste, um Platz für die DIV-Kacheln zu schaffen, die Sie im nächsten Abschnitt erstellen.

  7. Klicken Sie in das öffnende DIV-Tag „grid“. Wie Sie sehen, wird auch das schließende DIV-Tag hervorgehoben (siehe Abbildung 5). Dank dieser hellgrauen Hervorhebung sind Container und die Seitenstruktur im Code leicht zu identifizieren.

     

    Abbildung 5 Weniger Eingabefehler dank Hervorhebung zusammengehörender Tags
    Abbildung 5: Weniger Eingabefehler dank Hervorhebung zusammengehörender Tags

    Sobald Sie in einem öffnenden oder schließenden Tag einen Bereich auswählen, werden die zusammengehörenden Tags hervorgehoben. Die Hervorhebung wird sowohl bei der Auswahl der Tags per Tastatur (Pfeile) oder per Mausklick sichtbar. Auch in der Live-Code-Ansicht und bei Verwendung des Code-Inspektors werden die Tags hervorgehoben.

  8. Klicken Sie unter das öffnende DIV-Tag für das Raster, und geben Sie Folgendes ein:

    <div class="tile">   
    </div>

    Allen acht DIV-tile-Containern ist dieselbe „.tile“-Klasse zugewiesen. So können Sie den soeben eingegebenen Code über die Zwischenablage einfügen, um Zeit zu sparen.

  9. Wählen Sie die öffnende und die schließende DIV-Klasse für die Kachel aus. Wie Sie sehen, werden bei Auswahl von zwei oder mehr Code-Zeilen die entsprechenden Zeilennummern hervorgehoben (siehe Abbildung 6).

     

    Abbildung 6: Blau hinterlegte Zeilennummern bei ausgewählten Elementen im Code-Block
    Abbildung 6: Blau hinterlegte Zeilennummern bei ausgewählten Elementen im Code-Block

    Die Hervorhebung von Zeilennummern ist eine neue Funktion im Release 2014 von Dreamweaver. Die Zeilennummern werden hervorgehoben, wenn Elemente in der Code-Ansicht, der Live-Ansicht, der Entwurfsansicht und im Code-Inspektor ausgewählt werden.

  10. Klicken Sie mit der rechten Maustaste auf den DIV-tile-Container, und wählen Sie im Kontextmenü „Kopieren“, oder verwenden Sie den Tastaturbefehl Strg/Befehl+C.

  11. Fügen Sie die kopierten Tags sieben Mal ein, um innerhalb des DIV-grid-Tags insgesamt acht verschachtelte DIV-tile-Container zu erstellen. Bei der Arbeit mit langen Seiten können Sie Code-Blöcke auswählen und diese ausblenden, indem Sie auf die Schaltfläche „Auswahl ausblenden“ klicken (siehe Abbildung 7).

     

    Abbildung 7: Leichtere Bearbeitung längerer Seiten durch Ausblenden von Code-Abschnitten
    Abbildung 7: Leichtere Bearbeitung längerer Seiten durch Ausblenden von Code-Abschnitten

    Klicken Sie auf die Schaltfläche „Alles einblenden“ unter der Schaltfläche „Auswahl ausblenden“, um wieder den gesamten Quell-Code anzuzeigen.

CSS-Datei erstellen und Stile hinzufügen

Als Nächstes erstellen Sie die externe CSS-Datei, die alle Stile enthalten wird, die Layout und Darstellung der Seite definieren.

  1. Wählen Sie „Datei“ > „Neu“. Wählen Sie im Dialogfeld „Neues Dokument“ den Seitentyp „CSS“ aus, und klicken Sie auf „Erstellen“.

    Die neue CSS-Datei wird im Dokumentfenster geöffnet.

  2. Wählen Sie „Datei“ > „Speichern“, um die Datei im Website-Ordner zusammen mit der Datei „index.html“ zu speichern. Nennen Sie die Datei „grid_styles.css“, und klicken Sie auf „Speichern“.

    Wie Sie sehen, wird die CSS-Datei jetzt im Bedienfeld „Dateien“ zusammen mit den anderen Website-Dateien angezeigt (siehe Abbildung 8).

     

    Abbildung 8: Bei der Site-Definition wird sichergestellt, dass alle zugehörigen Dateien im lokalen Stammordner gespeichert werden.
    Abbildung 8: Bei der Site-Definition wird sichergestellt, dass alle zugehörigen Dateien im lokalen Stammordner gespeichert werden.

    Das Bedienfeld „Dateien“ bietet zahlreiche Funktionen zur Verwaltung Ihrer Inhalte, sodass Sie die Dreamweaver-Arbeitsumgebung nicht verlassen müssen. Mithilfe dieses Bedienfeldes können Sie Dateien problemlos umbenennen oder den Speicherort einer Datei innerhalb des Website-Ordners aktualisieren. Dreamweaver sorgt dafür, dass die entsprechenden Verknüpfungen aktualisiert werden, und hilft, potenzielle Probleme bei der Dateiverwaltung zu vermeiden.

     

    Im nächsten Schritt fügen Sie einen Stil hinzu, um dem BODY-Tag Attribute zuzuordnen.

    1. Geben Sie im CSS-Stylesheet Folgendes ein:


      body { 
         font-family: "Helvetica Neue", Helvetica, Arial, sans- serif;   
         color: #ffffff; 
         background-color: #1a1a1a; 
      }
      

      Mit dieser Regel werden die Hintergrundfarbe des Textkörpers und die Standard-Schriftformate für den Textinhalt definiert.

    2. Sobald Sie den Doppelpunkt hinter der Eigenschaft „font-family“ eingeben, werden Codehints angezeigt, sodass Sie bequem eine Schriftenfamilie aus der Liste auswählen können (siehe Abbildung 9).

       

      Abbildung 9: Schnelleres und präziseres Coden dank CSS-Codehints
      Abbildung 9: Schnelleres und präziseres Coden dank CSS-Codehints
    3. Wählen Sie die Schriftenfamilie aus, die mit „Gotham“ beginnt. Für diese Website wird „Helvetica Neue“ als primäre Schrift für den BODY-Tag verwendet. Löschen Sie daher nach Auswahl der Schriftenfamilie das blaue Wort „Gotham“ und das darauffolgende Komma.

    4. Wenn Sie mit der Eingabe fortfahren, werden Sie sehen, dass Sie nach Eingabe des Kommas hinter der Eigenschaft „color“ auf das Farbpaletten-Symbol klicken können, um den Farbwähler zu öffnen. Geben Sie den Hexadezimalwert #FFFFFF ein, oder klicken Sie links oben auf den weißen Bereich des Farbspektrums (siehe Abbildung 10).

       

       Abbildung 10: Wählen Sie eine Farbe aus, wählen Sie ein Farbmuster auf der Seite, oder geben Sie den Farbwert aus drei verschiedenen Farbräumen ein.
      Abbildung 10: Wählen Sie eine Farbe aus, wählen Sie ein Farbmuster auf der Seite, oder geben Sie den Farbwert aus drei verschiedenen Farbräumen ein.
    5. Klicken Sie wieder in die Code-Ansicht, um den Farbwähler zu schließen, speichern Sie Ihre Auswahl, und fügen Sie der Regel den ausgewählten Farbwert hinzu.

      Der Farbwähler ist ein weiteres Beispiel dafür, wie sehr Ihnen die Code-Ansicht die Arbeit erleichtert. Die Codehints werden nur eingeblendet, wenn Sie sie brauchen, sodass Sie ungestört weiterarbeiten können.

    6. Wenn Sie die dritte Zeile der Regel eingeben, wird wieder der Farbwähler angezeigt, sodass Sie den Wert für die Eigenschaft „background-color“ schneller festlegen können.

      Nachdem Sie dem Stylesheet die erste Regel hinzugefügt haben, müssen Sie es mit der HTML-Seite verknüpfen.

      1. Wählen Sie die Registerkarte „index-html“ aus, um den Quell-Code in der Code-Ansicht zu bearbeiten.

      2. Klicken Sie direkt unter das TITLE-Tag im HEAD-Abschnitt der Seite, und drücken Sie einmal die Eingabetaste, um vor dem schließenden HEAD-Tag eine zusätzliche Zeile einzufügen.

      3. Wählen Sie im Bedienfeld „Dateien“ die Datei „grid_styles.css“ aus, und ziehen Sie sie auf die Seite. Es wird automatisch eine Verknüpfung zur CSS-Datei generiert (siehe Abbildung 11).

         

        Abbildung 11: Hinzufügen der Verknüpfung zum CSS-Stylesheet durch Ziehen aus dem Bedienfeld „Dateien“
        Abbildung 11: Hinzufügen der Verknüpfung zum CSS-Stylesheet durch Ziehen aus dem Bedienfeld „Dateien“
      4. Wählen Sie „Datei“ > „Alles speichern“, um die HTML-Datei und die CSS-Datei zu speichern.

CSS-Stile für die Darstellung der Kacheln erstellen

Als Nächstes fügen Sie die CSS-Stile hinzu und aktualisieren die DIV-tile-Selektoren auf der HTML-Seite.

  1. Klicken Sie auf die Registerkarte „grid_styles.css“, um zum Stylesheet zurückzukehren.

  2. Fügen Sie den folgenden Stil hinzu, um das Format für den DIV-grid-Wrapper festzulegen, der den DIV-tile-Container umgibt:

    .grid { 
       width: 1140px; 
       height: 890px; 
       margin-left: auto; 
       margin-right: auto; 
       padding-left: 40px; 
       position: relative; 
       border-radius: 10px; 
       background-color: #3a3a3a; 
    }

    Mit dieser Regel werden die Werte für Größe, Ränder, Auffüllungen und Positionierung des Rasters definiert. Zudem wird eine vom Textkörper abweichende Hintergrundfarbe festgelegt sowie abgerundete Ecken für einen weicheren Rand hinzugefügt.

  3. Fügen Sie unter der grid-Klasse den Stil hinzu, der die Darstellung des DIV-tile-Containers festlegt:

    .tile { 
       background-color: #2a2a2a; 
       position: absolute;   
       width: 270px; 
    }

    Die tile-Klasse enthält die gemeinsamen Attribute aller DIV-Kacheln.

  4. Nun fügen Sie acht Regeln für die speziellen Attribute hinzu, die sich auf die einzelnen DIV-tile-Container auswirken. Diese Regeln legen die Positionskoordinaten, die Größe und den Quellinhalt für die Kacheln fest.

    Sie können den folgenden Code über die Zwischenablage in das Stylesheet einfügen oder die acht Regeln aus der fertigen Datei „index_final.html“ kopieren:

    #tile1 { 
       top: 20px; 
       left: 20px; 
       width: 270px; 
       height: 270px; 
    } 
    
    #tile2 { 
       top: 310px; 
       left: 20px; 
       width: 270px; 
       height: 270px; 
       background-image: url(images/tile2.jpg); 
    } 
    
    #tile3 { 
       top: 20px; 
       left: 310px; 
       width: 560px; 
       height: 560px; 
    } 
    
    #tile4 { 
       top: 20px; 
       left: 890px; 
       width: 270px; 
       height: 270px; 
       background-image: url(images/tile4.jpg); 
    } 
    
    #tile5 { 
       top: 310px; 
       left: 890px; 
       width: 270px; 
       height: 270px; 
       background-image: url(images/tile5.jpg); 
    } 
    
    #tile6 { 
       top: 600px; 
       left: 20px; 
       width: 560px; 
       height: 270px; 
       background-image: url(images/tile6.jpg); 
    } 
    
    #tile7 { 
       top: 600px; 
       left: 600px; 
       width: 270px; 
       height: 270px; 
    } 
    
    #tile8 { 
       top: 600px; 
       left: 890px; 
       width: 270px; 
       height: 270px; 
       background-image: url(images/tile8.jpg); 
    } 
  5. Klicken Sie auf die Registerkarte „index.html“, um zur HTML-Seite zurückzukehren.

  6. Fügen Sie dem ersten DIV-tile-Tag einen neuen ID-Selektor hinzu, indem Sie den folgenden Text eingeben: id="title1"

    <div class="tile" id="tile1" >
  7. Nutzen Sie die Codehints in der Code-Ansicht, um die ID-Selektoren für die übrigen sieben DIV-Kacheln einzugeben. ID-Selektoren müssen einen eindeutigen Namen haben, und sie dürfen nur einmal pro Seite vorkommen. Geben Sie daher den IDs für jeden Selektor die jeweils nächsthöhere Zahl, damit sie den acht ID-Namen entsprechen, die Sie dem Stylesheet hinzugefügt haben (siehe Abbildung 12).

     

    Abbildung 12: Codehints zeigen eine Auswahl an Selektoren zur Gestaltung der DIV-Tags an. Nach dem Hinzufügen der Stile für das Layout ist das Design fast fertig.
    Abbildung 12: Codehints zeigen eine Auswahl an Selektoren zur Gestaltung der DIV-Tags an. Nach dem Hinzufügen der Stile für das Layout ist das Design fast fertig.
    1. Wählen Sie „Datei“ > „Alles speichern“, um alle Website-Dateien zu speichern.

    2. Klicken Sie auf die Schaltflächen „Teilen“ und „Live-Ansicht“, und überprüfen Sie die Seite.

      Die Live-Ansicht verwendet eine neue, auf Chromium basierende Rendering-Engine, die Ihre Inhalte in Dreamweaver exakt so wie in Ihren bevorzugten Webbrowsern darstellt (siehe Abbildung 13).

       

      Abbildung 13: Vorschau in der Ansicht „Teilen“ bei aktivierter Live-Ansicht
      Abbildung 13: Vorschau in der Ansicht „Teilen“ bei aktivierter Live-Ansicht
    3. Klicken Sie wieder auf „Code“, um zur Code-Ansicht zurückzukehren. Die Live-Ansicht müssen Sie nicht deaktivieren. Seiten sind jetzt auch bei aktivierter Live-Ansicht editierbar.

Den eigenen Arbeitsbereich personalisieren

Der Release 2014 von Dreamweaver bietet eine weitere neue Funktion, die die Arbeit an Projekten erleichtert. Die Farben für die Hervorhebung des Codes lassen sich jetzt individuell festlegen.

  1. Wählen Sie in den Dreamweaver-Voreinstellungen die Kategorie „Farbe für Code“ aus. Wählen Sie in der Liste „Dokumenttyp“ den Wert „HTML“ oder „CSS“ aus (siehe Abbildung 14).

     

     Abbildung 14: Farbauswahl im Farbspektrum oder per Eingabe von Farbwerten
    Abbildung 14: Farbauswahl im Farbspektrum oder per Eingabe von Farbwerten

    Beachten Sie, dass Sie hier auch die Hervorhebungsfarbe für den Live-Code-Hintergrund und für die Live-Code-Änderungen festlegen können. Wenn Sie neue CSS-Stile erstellen, sorgen die benutzerdefinierten Farben dafür, dass Sie Ihre Code-Änderungen leicht erkennen.

  2. Wählen Sie in der Dokumenttyp-Liste den Wert „HTML“ aus. Im Abschnitt „Aktuelle Tag-Markierung“ sehen Sie, dass „Tag-Markierung aktivieren“ ausgewählt ist. Klicken Sie neben „Hervorhebungsfarbe“ auf das graue Kästchen, um die standardmäßig eingestellte graue Farbe durch eine beliebige andere Farbe zu ersetzen. In diesem Beispiel wird hier als Farbe ein leuchtendes Grün gewählt (siehe Abbildung 15).

     

    Abbildung 15: Festlegen einer eigenen Farbe für die Hervorhebung von HTML- oder CSS-Tags in der Code-Ansicht
    Abbildung 15: Festlegen einer eigenen Farbe für die Hervorhebung von HTML- oder CSS-Tags in der Code-Ansicht
  3. Klicken Sie auf „Anwenden“, um Ihre Änderungen zu speichern.

  4. Klicken Sie im Quell-Code auf das öffnende DIV-tile1-Tag. Das öffnende und das schließende Tag werden jetzt leuchtend grün hervorgehoben (siehe Abbildung 16).

     

    Abbildung 16: Dank der Hervorhebung der Tags ist der ganze Container leicht zu identifizieren.
    Abbildung 16: Dank der Hervorhebung der Tags ist der ganze Container leicht zu identifizieren.
  5. Klicken Sie zwischen das öffnende und das schließende DIV-tile1-Tag, und drücken Sie einmal die Eingabetaste, um Platz für weitere Inhalte hinzuzufügen. Diesmal fügen Sie ein Bild ein. Geben Sie <img ein.

     

    Wenn Sie ein Leerzeichen einfügen, wird ein Codehint angezeigt. Geben Sie den Buchstaben „s“ ein, und drücken Sie zweimal die Nach-unten-Taste. Drücken Sie die Eingabetaste, um das Attribut „src“ aus der Liste auszuwählen.

     

    Nach Auswahl von „src“ wird ein neuer Codehint angezeigt. Klicken Sie auf „Durchsuchen“, und wählen Sie im Ordner „images“ die Datei „logo.jpg“ aus. Klicken Sie auf „Öffnen“ (siehe Abbildung 17).

     

    Abbildung 17: Suche und Auswahl der Bilddatei im Ordner „images“
    Abbildung 17: Suche und Auswahl der Bilddatei im Ordner „images“

    Das Dialogfeld „Datei auswählen“ wird geschlossen, und der Code wird mit dem Pfad zum Bild aktualisiert.

  6. Geben Sie ein weiteres Leerzeichen und den Buchstaben „w“ ein. Drücken Sie die Eingabetaste, um das Attribut „width“ auszuwählen. Geben Sie zwischen den Anführungszeichen den Wert „270“ für die Bildbreite ein.

  7. Geben Sie ein weiteres Leerzeichen und den Buchstaben „h“ ein. Drücken Sie die Eingabetaste, um das Attribut „height“ auszuwählen. Diesmal können Sie über den Codehint den Wert „270“ direkt auswählen. Drücken Sie die Eingabetaste, um den Wert zwischen den Anführungszeichen einzufügen. Geben Sie /> (einen Schrägstrich „/“ und ein Größer-als-Zeichen „>“) ein, um das IMG-Tag zu schließen.

     

    Das vollständige Bild-Tag sieht wie folgt aus:

    <img src="images/logo.jpg" width="270" height="270"/>
  8. Klicken Sie auf die Schaltfläche „Teilen“, um den aktualisierten Entwurf in der Live-Ansicht zu sehen. Im DIV-tile1-Bereich wird jetzt das eingefügte Bild des PLAY-Logos angezeigt.

  9. Klicken Sie auf die Schaltfläche „Code“, um zur Code-Ansicht zurückzukehren.

In diesem Projekt sind die meisten Bilder in den CSS-Stilen, die die einzelnen DIV-Kacheln in der Datei „grid_styles.css“ definieren, als Hintergrundbilder festgelegt. Je nach Layout und Design der Seite können Sie Bildinhalte auf beliebige Weise hinzufügen. Wenn für DIV-Tags Hintergrundbilder als Stile definiert sind, können Sie im selben DIV-Tag weitere Inhalte hinzufügen, wie z. B. halbtransparente Bilder oder Text, die vor dem Hintergrundbild angezeigt werden.

Textinhalte hinzufügen und formatieren

Die meisten DIV-Kacheln enthalten Hintergrundbilder oder eingefügte Bilder, „div tile3“ und „div tile7“ sind jedoch noch leer. Diesen Dateien fügen Sie Platzhaltertext hinzu und formatieren diesen, indem Sie mithilfe von CSS eine Schrift aus Edge Web Fonts anwenden.

  1. Klicken Sie auf der HTML-Seite zwischen das öffnende und das schließende Tag für „div tile3“. Geben Sie das Tag ein. Während der Eingabe von „</“ wird das schließende H1-Tag vervollständigt.

  2. Klicken Sie zwischen die beiden soeben hinzugefügten H1-Tags. Geben Sie Folgendes ein: Add your hero text here along with whatever else you want to call attention to.

  3. Klicken Sie vor die Wörter „hero text“ und geben Sie das Tag

    <span>

    ein. Fügen Sie das schließende Tag

    </span>

    hinter dem Wort „text“ ein.

  4. Wiederholen Sie Schritt 3, um vor und hinter den Wörtern „attention to“ SPAN-Tags hinzuzufügen. Das schließende Tag soll vor dem Punkt stehen. Das DIV-tile3-Tag sollte am Ende wie folgt aussehen:

    <div class="tile" id="tile3">1
    <h1>Add your <span>hero text</span> here along with whatever else you want to call <span> attention to</span>.</h1>1
    </div>
  5. Wählen Sie „Modifizieren“ > Schriften verwalten“. Geben Sie im Dialogfeld „Schriften verwalten“ im Suchfeld die Ziffer 1 ein. In der Liste werden jetzt nur Schriften mit der Ziffer 1 im Namen angezeigt.

  6. Wählen Sie die Schrift mit dem Namen „M+ 1c“ aus. Ein blaues Häkchen erscheint über dem Namen der Schrift, die hinzugefügt werden soll. Klicken Sie auf „Fertig“ (siehe Abbildung 18).

     

     Abbildung 18: Auswahl der gewünschten Web-Schrift
    Abbildung 18: Auswahl der gewünschten Web-Schrift

    Die neue Web-Schrift wird der Schriftenliste der Website hinzugefügt, sodass sie in Dreamweaver auswählbar ist.

    Als Nächstes fügen Sie einen Stil für die Darstellung des Textes hinzu.

  7. Klicken Sie auf die Registerkarte „grid_styles.css“, um das CSS-Stylesheet in der Code-Ansicht anzuzeigen.

    Die Möglichkeit, zwischen dem Quell-Code und den verknüpften Stylesheets zu wechseln, ist äußerst hilfreich bei der Arbeit an Projekten mit zahlreichen zusammengehörenden Dateien.

  8. Geben Sie unterhalb der vorhandenen Stile eine neue Klasse namens „.hero“ ein, und fügen Sie geschweifte Klammern hinzu:

    .hero {
    
    }
    
  9. Geben Sie in der nächsten Zeile zwischen den geschweiften Klammern die folgende Eigenschaft ein:

     

    font-family:

  10. Sobald Sie den Doppelpunkt hinter „font-family“ eingeben, erscheint ein Codehint. Geben Sie den ersten Buchstaben des Schriftnamens ein, den Sie hinzufügen möchten (in diesem Fall „m“), um zum entsprechenden Schriftnamen in der Liste zu springen (siehe Abbildung 19).

     

    Abbildung 19: Für die Schriftfamilie wird der Name „m-1c“ festgelegt, der Web-Schrift, die Sie zuvor hinzugefügt haben.
    Abbildung 19: Für die Schriftfamilie wird der Name „m-1c“ festgelegt, der Web-Schrift, die Sie zuvor hinzugefügt haben.
  11. Drücken Sie die Eingabetaste, um die Schrift aus der Liste auszuwählen. Geben Sie danach das schließende Semikolon ein.

  12. Drücken Sie die Eingabetaste, um eine weitere Zeile hinzuzufügen, und geben Sie dann die übrigen Eigenschaften und Werte für den Stil für „hero“ ein:

     

    font-size: 3.25em; 
    font-weight: 300; 
    font-style: normal; 
    margin-top: 110px; 
    margin-left: 40px; 
    margin-right: 40px; 
    color: gray;
  13. Stellen Sie sicher, dass die gesamte „hero“-Klasse wie folgt aussieht:

    hero { 
       font-family: "m-1c"; 
       font-size: 3.25em; 
       font-weight: 300; 
       font-style: normal; 
       margin-top: 110px; 
       margin-left: 40px; 
       margin-right: 40px; 
       color: gray; 
    } 
  14. Klicken Sie auf die Registerkarte „index.html“, um den HTML-Quell-Code in der Code-Ansicht anzuzeigen.

    Wie Sie sehen, wird nach dem Hinzufügen einer Web-Schrift zu einem Stil vor dem schließenden HEAD-Tag automatisch das Skript mit dem entsprechenden Link zu den Edge Web Fonts hinzugefügt. Der neue Code sieht wie folgt aus:

    <!--The following script tag downloads a font from the Adobe Edge Web Fonts server for use within the web page. We recommend that you do not modify it.--> 
    <script>var
       adobewebfontsappname ="dreamweaver"</script> <script src="http://use.edgefonts.net/m-1c:n3:default.js" type="text/javascript"></script> 
    </head>

    Hinweis: Falls das Skript-Tag im HEAD-Abschnitt nicht hinzugefügt wurde, wählen Sie „Befehle“ > „script-Tag für Web-Schriften bereinigen (Aktuelle Seite)“.

  15. Scrollen Sie nach unten zu „div tile3“. Fügen Sie dem öffnenden H1-Tag eine Klasse hinzu.

    Nach Eingabe der Anführungszeichen nach dem Gleichheitszeichen wird ein Codehint mit den Namen der verfügbaren Klassen angezeigt. Drücken Sie die Nach-unten-Taste, um die Klasse „hero“ auszuwählen, und drücken Sie dann die Eingabetaste (siehe Abbildung 20).

     

      Abbildung 20: Auswahl der Klasse „hero“ aus der angezeigten Codehint-Liste
    Abbildung 20: Auswahl der Klasse „hero“ aus der angezeigten Codehint-Liste
  16. Klicken Sie auf die Registerkarte „grid_styles.css“, um die CSS-Dateien in der Code-Ansicht anzuzeigen. Kopien Sie die Stile unten (oder kopieren Sie sie aus der Datei „dw_example.css“):

    .hero-bright { 
       color: white; 
    }  
    
    .action-title {	/*Use default... Helvetica, Arial, sans-serif*/ 
       font-size:1.5em; 
       margin-top:28px; 
       margin-left:20px; 
       margin-right:20px; 
    }  
    
    .action { 
       font-family: "m-1c"; 
       font-size: 1.25em; 
       font-weight: 400; 
       color: lightgray; 
       margin-left: 20px; 
       margin-right: 20px; 
    } 
  17. Klicken Sie auf die Registerkarte „index.html“, um zum HTML-Quell-Code zurückzukehren, und fahren Sie mit der Bearbeitung fort.

  18. Fügen Sie im DIV-tile3-Tag in beiden SPAN-Tags Klassenattribute hinzu.

    Nach Eingabe der Anführungszeichen hinter „class="“ wird wieder ein Codehint angezeigt. Jetzt enthält die Liste auch die Klasse „hero-bright“. Wählen Sie diese Klasse aus, um innerhalb des H1-Tags den Stil der Wörter „hero text“ und „attention to“ zu ändern. Wechseln Sie zur Entwurfsansicht bei aktiver Live-Ansicht, um Ihre bisherige Arbeit in der Vorschau anzuzeigen (siehe Abbildung 21).

     

      Abbildung 21: Überprüfen des Designs ist in der Entwurfsansicht mit aktiver Live-Ansicht möglich.
    Abbildung 21: Überprüfen des Designs ist in der Entwurfsansicht mit aktiver Live-Ansicht möglich.

Die Elementschnellansicht in der Code-Ansicht

Mithilfe der neuen Elementschnellansicht im Release 2014 von Dreamweaver können Sie DOM-Seitenelemente schnell identifizieren und in einer hierarchischen Baumstruktur auswählen. Wenn Sie ein Seitenelement in der Elementschnellansicht auswählen, werden die Code-Ansicht sowie alle übrigen Komponenten des Arbeitsbereichs entsprechend aktualisiert, sodass es ganz einfach ist, zu einem bestimmten Code-Abschnitt zu gelangen.

  1. Klicken Sie auf „Teilen“, um die Code- und die Live-Ansicht nebeneinander anzuzeigen (aktivieren Sie ggf. die Live-Ansicht).

  2. Klicken Sie unten im Dokumentfenster links neben dem Tag-Selektor auf „</>“. Die Elementschnellansicht wird angezeigt.

  3. Sehen Sie sich die Seitenelemente an, nachdem Sie auf die Namen der Elemente in der Liste klicken, um sie einzublenden. Wenn Sie auf ein Element in der Elementschnellansicht klicken, wird die Auswahl mit der Code-Ansicht, der Live-Ansicht, dem Tag-Selektor und allen anderen Komponenten der Oberfläche synchronisiert.

  4. Blenden Sie das Element „grid div“ ein, um die Liste der acht nummerierten DIV-Kacheln anzuzeigen. Klicken Sie auf „div tile7“. Die Auswahl für „div tile7“ wird in der Code-Ansicht hervorgehoben (siehe Abbildung 22). Diese Synchronisierung funktioniert in beide Richtungen. Sie können auch auf ein Element in der Live-Ansicht klicken, um es in allen Komponenten des Arbeitsbereichs auszuwählen (siehe Abbildung 22).

     

     Abbildung 22: Mit der Elementschnellansicht funktioniert die Navigation durch die Seitenstruktur und Auswahl von Elementen besonders schnell.
    Abbildung 22: Mit der Elementschnellansicht funktioniert die Navigation durch die Seitenstruktur und Auswahl von Elementen besonders schnell.
  5. Klicken Sie in der Code-Ansicht zwischen das öffnende und das schließende DIV-tile7-Tag. Geben Sie den folgenden Code ein, um Text hinzuzufügen:

    <h2 class="action-title">Call to Action!</h2> 
    <p class="action">Add action statement, and click through to deeper levels of content.</p>

    Bei der Eingabe der Klassen erleichtern Codehints die Auswahl der Stile. Danach werden die Codehints wieder ausgeblendet, damit Sie sofort weitertippen können. Auch die Funktion zur automatischen Code-Vervollständigung sorgt für mehr Effizienz beim Webdesign: Bei Eingabe der ersten Zeichen wird der vollständige Name des entsprechenden Tags angezeigt. Drücken Sie die Eingabetaste, um den Vorschlag zu bestätigen.

  6. Wählen Sie „Datei“ > „Vorschau in Browser“, um die fertige Seite anzuzeigen.

Nächste Schritte

Machen Sie sich mit den neuen zeitsparenden Funktionen der Code-Ansicht vertraut, mit denen Sie schneller coden und Web-Projekte aktualisieren können. Änderungen im Quell-Code und an CSS-Stilen sind in der Live-Ansicht sofort sichtbar, sodass Sie Ihre Arbeit jederzeit überprüfen können, ohne den Arbeitsbereich zu verlassen. Und die neue Elementschnellansicht ermöglicht eine rasche Auswahl von Seitenelementen und eine übersichtliche Anzeige der Seitenstruktur.

Die Code-Ansicht in Dreamweaver CC wurde deutlich optimiert. Auch bei umfangreichen HTML-Seiten reagiert das Programm schnell auf Ihre Eingaben. Die Codehints unterstützen moderne Web-Sprachen wie PHP 5.4. Syntaxfehler werden hervorgehoben, sodass Sie sie sofort korrigieren können.

Lesen Sie die folgenden Artikel zu Dreamweaver CC, um mehr über die visuellen Tools der Live-Ansicht und der Elementschnellansicht zu erfahren.

Sehen Sie sich auch den Überblick über die Neuerungen in Dreamweaver an, damit Sie sich so schnell wie möglich mit den neuen Funktionen des Release 2014 von Dreamweaver vertraut machen können.

 

Ihre Meinung ist gefragt.

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

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.

 


dan-carr_83x83

Dan Carr hat sich als engagierter Experte für Interaktions-Design, Software-Entwicklung, technische Redaktion und Training einen Namen gemacht. Er blickt auf 15 Jahre Erfahrung in der Zusammenarbeit mit Adobe und anderen Branchenführern zurück und entwickelte Features und Schulungsunterlagen, die u. a. für Flash und Flex verfügbar sind. Seine Freizeit widmet Carr seinen Hunden und der Gitarrenmusik.