Im fünften Teil dieses Tutorials lernst du, wie du mit CSS in der Ansicht „Code“ und CSS Designer das Layout der Homepage anpassen, Abstände um Elemente einrichten und Bilder hinzufügen kannst, die automatisch in Abhängigkeit vom verwendeten Bildschirm skaliert werden.
Bunte, gemusterte Kacheln schweben in den Himmel.

Hinweis:

Über die Download-Buttons kannst du die Creative Cloud-Bibliothek und alle Projektdateien für dieses Tutorial herunterladen. Du kannst entweder mit der Datei weiterarbeiten, die du im ersten Teil des Tutorials angelegt hast, oder die Version im Ordner für diese Lektion verwenden.

Einführung.

Willkommen zu Teil 5 dieses Tutorials zur Erstellung einer einfachen, responsiven Website mit Dreamweaver. Im vorherigen Teil hast du bereits mit dem Layout der Homepage der Bayside Beat-Website begonnen – zunächst über die Ansicht „Code“, dann mit CSS Designer. Die Arbeit mit CSS Designer hat den Vorteil, dass Änderungen sofort in der Ansicht „Live“ sichtbar werden. In diesem Teil nimmt das Design langsam Gestalt an. Denn du wirst die Abstände um Elemente herum anpassen und Bilder hinzufügen, die je nach Bildschirmauflösung ihre Größe ändern.

Horizontale und vertikale Abstände mithilfe von Auffüllungen und Rändern steuern.

CSS bietet zwei Properties, über die du horizontale und vertikale Abstände für Elemente einrichten kannst: „padding“ und „margin“. Manchmal ist es egal, welche du verwendest. Beide Properties fügen einen Leerraum um ein Element hinzu. Aber es gibt wichtige Unterschiede zu beachten. Der „Margin“ (Rand) wird bei der Gesamtbreite und -höhe eines Elements nicht mitgezählt (siehe Abbildung 1). Diese Regel gilt immer – unabhängig davon, ob du das standardmäßige CSS Box Model verwendest oder es mit dem Code-Fragment von Teil 4 umgehst.

Der Rand eines Elements wird bei der Breite und Höhe nicht mitgezählt.
Abbildung 1: Der Rand eines Elements wird bei der Breite und Höhe nicht mitgezählt.

Die folgende Tabelle fasst die Unterschiede zwischen den Properties „padding“ und „margin“ in Bezug auf bestimmte Merkmale zusammen:

Merkmal Padding (Auffüllung) Margin (Rand)
Hintergrund Der Hintergrund des Elements erstreckt sich bis in die Auffüllung. Der Hintergrund des übergeordneten Elements bleibt sichtbar.
Rahmen Die Auffüllung liegt innerhalb eines Rahmens. Der Rand liegt außerhalb eines Rahmens.
Zusammenführen Auffüllungen werden nicht zusammengeführt. Angrenzende Ränder werden zusammengeführt.

Sowohl „padding“ als auch „margin“ vergrößern den Abstand um ein Element, doch „margin“ wirkt sich hierbei geringfügig anders aus.

Abbildung 2 zeigt zwei Elemente, die übereinander gestapelt sind. Das erste hat einen unteren Rand von 20px, das zweite einen oberen Rand von 30px.

Ein Diagramm zeigt das erwartete Bild bei der Zusammenführung von zwei angrenzenden Rändern. Die Randwerte werden addiert.
Abbildung 2: Zu erwartendes Bild bei zwei angrenzenden Rändern

Man würde erwarten, dass der vertikale Abstand zwischen beiden Elementen gleich der Summe beider Ränder ist, also 50px. Das ist aber nicht der Fall. Vertikal angrenzende Ränder werden ausgeblendet bzw. zusammengeführt. Daher entspricht der vertikale Abstand zwischen den Elementen dem größeren der beiden Randwerte, also 30px (siehe Abbildung 3).

Zwei angrenzende Ränder gehen ineinander über. Der vertikale Abstand entspricht dem größeren der beiden Randwerte.
Abbildung 3: Tatsächliches Bild bei zwei angrenzenden Rändern

Auffüllungen werden dagegen niemals zusammengeführt. Wenn man die unteren und oberen Ränder im obigen Beispiel durch Auffüllungen mit denselben Werten ersetzen würde, läge zwischen den beiden Elementen ein Abstand von 50px.

In den CSS-Anweisungen, die du im vierten Teil erstellt hast, haben sowohl das BODY- als auch das Wrapper-DIV-Element einen oberen Rand von 0. Warum also weist die Seite oben eine Lücke auf? Das kommt daher, dass Browser auf manche Elemente, z. B. Überschriften, einen Standardrand anwenden.

Der standardmäßige obere Rand für die H1-Überschrift wird mit dem oberen Randwert 0 des Wrapper-DIV-Elements kombiniert, wodurch der Wrapper vom oberen Seitenrand weggerückt wird. Da der Hintergrund des übergeordneten Elements immer durch den Rand eines Elements hindurch sichtbar ist, siehst du hier den hellblauen Hintergrund des BODY-Elements. Auffüllungen werden dagegen niemals zusammengeführt. Der Hintergrund des Elements reicht sogar in die Auffüllung hinein. Problem gelöst. Falls dir diese Logik noch Rätsel aufgibt – du wirst es bald mit eigenen Augen sehen.

Die Lücke am oberen Seitenrand schließen und Überschriften formatieren.

Um das Problem mit der Lücke am oberen Seitenrand zu beheben, musst du den oberen Rand der Hauptüberschrift durch eine Auffüllung mit dem gleichen Wert ersetzen. Bei der Gelegenheit wirst du auch die anderen Überschriften formatieren.

  1. Wähle in der Ansicht „Live“ die H1-Überschrift aus. Vergewissere dich, dass im Bereich „Quellen“ von CSS Designer responsive.css markiert ist. Der nächste Selektor soll nach dem Selektor „#wrapper“ eingefügt werden. Wähle also diesen im Bereich „Selektoren“ aus. Klicke auf das Pluszeichen, um einen neuen Selektor zu erstellen.
  2. Da die Überschrift ausgewählt ist, schlägt Dreamweaver als Selektornamen „#wrapper header h1“ vor. Dieser sehr spezifische Selektornachfahre sucht nach H1-Elementen, die in HEADER-Elementen verschachtelt sind, die wiederum von einem Element mit der ID „wrapper“ umschlossen sind. Um den Detailgrad des Selektors zu senken, drücke die Nach-oben-Taste. Der Namensvorschlag ändert sich in „header h1“. Das ist immer noch zu spezifisch. Drücke die Nach-oben-Taste erneut, um den Namen in „h1“ zu ändern. Damit werden alle H1-Elemente auf der Seite formatiert. Um diese Anweisung auch auf H2-Elemente anzuwenden, klicke rechts neben „h1“ in das editierbare Feld, und gib ein Komma gefolgt von „h2“ ein. Der Selektor sollte nun so aussehen:

    h1, h2

    Du kannst den Detailgrad eines Selektors nur dann mit der Nach-oben-Taste senken, wenn Dreamweaver vorher einen Namen vorgeschlagen hat. Falls nötig, mache einen Doppelklick auf den Selektor, um das Eingabefeld zu aktivieren. Gib dann die Gruppe der Selektoren manuell ein.

  3. Klicke im Bereich „Eigenschaften“ oben auf das Symbol für Text . Lege folgende Text-Properties für den neuen Selektor fest:
color: #1E1E1E (click the dark gray swatch in the CC Libraries panel to copy the hexadecimal value to the clipboard) font-style: normal font-weight: 400

Die Überschriften sind nun in einem dunkleren Grau als der normale Text gesetzt und nicht mehr fett.

  1. Während die Hauptüberschrift und der Selektor „h1, h2“ noch ausgewählt sind, klicke auf das Pluszeichen im Bereich „Selektoren“. Drücke die Nach-oben-Taste zweimal, um einen H1-Selektor zu erstellen. Wechsle zum Layout-Abschnitt. Erstelle die folgenden Properties (siehe Abbildung 4):
margin-top: 0px margin-bottom: 0px padding-top: 20px padding-bottom: 20px
Der vertikale Abstand um die Hauptüberschrift wird durch eine Auffüllung ersetzt.
Abbildung 4: Ersetze den vertikalen Abstand um die Hauptüberschrift durch eine Auffüllung.

Der vertikale Abstand um die Überschrift bleibt erhalten. Aber statt des BODY-Elements ist der Hintergrund des Wrapper-DIV-Elements zu sehen. Der unerwünschte hellblaue Streifen verschwindet.

  1. Lege im Abschnitt „Text“ folgende Properties fest:
font-size: 2.5em text-align: center text-transform: uppercase

Die Properties „text-align“ und „text-transform“ werden mithilfe von Symbolen eingerichtet (siehe Abbildung 5). Wenn du mit dem Cursor darüber fährst, zeigen QuickInfos die Bedeutung der Symbole an.

Einige Properties wie „text-align“ und „text-transform“ werden mithilfe von Symbolen festgelegt.
Abbildung 5: Einige Properties werden mithilfe von Symbolen festgelegt.

Die Hauptüberschrift ist nun größer, zentriert und in Großbuchstaben gesetzt.

  1. Wähle eine der H2-Überschriften aus. Erstelle einen H2-Selektor. Drücke die Nach-oben-Taste zweimal, um ihn weniger spezifisch zu machen. Lege die folgenden Properties fest:
    • margin-top: 0,5em
    • font-size: 2,25em
margin-top: 0.5em font-size: 2.25em

Durch die Maßeinheit em werden die Schriftgröße und der obere Rand proportional zum Text im Hauptbereich der Seite geändert.

Einen horizontalen Abstand innerhalb des Wrappers hinzufügen.

Der Text innerhalb des Wrapper-DIV-Elements liegt direkt an den Seitenrändern. Um etwas mehr Platz zu schaffen, könnte man eine horizontale Auffüllung hinzufügen. Dann würde aber das Bild von der Golden Gate Bridge nicht die gesamte Breite des HERO-DIV-Elements ausfüllen, wenn du es später einfügst. Erstelle also stattdessen eine Gruppe von Selektoren für „main, aside“ mit folgenden Properties und Werten (siehe Abbildung 6):

margin-left: 4% margin-right: 4%
Eine Gruppe von Selektoren wird verwendet, um horizontale Ränder für die Elemente MAIN und ASIDE festzulegen.
Abbildung 6: Verwende eine Gruppe von Selektoren, um horizontale Ränder für die Elemente MAIN und ASIDE festzulegen.

Vergiss anschließend nicht, deine Arbeit über Datei > Alle zugehörigen Dateien speichern zu speichern.

Ein Bild aus einer Creative Cloud-Bibliothek inklusive Bildbeschriftung einfügen.

Jetzt bekommt die Seite ein paar Bilder. In diesem Abschnitt wirst du ein Bild aus der Creative Cloud-Bibliothek herunterladen und mit einer Beschriftung in die Datei „index.html“ einfügen. Dazu wirst du ein FIGURE-Element verwenden. Du wirst gleichzeitig ein Bildformat auswählen und die Bildgröße ändern.

  1. Öffne die geteilte Ansicht, sodass du die Änderungen im HTML-Code verfolgen kannst. Falls nötig, klicke auf der Leiste „Zugehörige Dateien“ auf Quellcode. Wähle in der Ansicht „Live“ den zweiten Absatz nach der Überschrift „Riding the Cable Cars“ aus. Er beginnt mit den Worten „The cable cars rely ...“.

  2. Öffne das Bedienfeld „Einfügen“. Klicke unter der Kategorie „HTML“ auf Figure.
Im Bedienfeld „Einfügen“ unter „HTML“ wird „Figure“ ausgewählt.
Abbildung 7: Klicke im Bedienfeld „Einfügen“ unter der Kategorie „HTML“ auf „Figure“.
  1. Wähle im Dialogfeld zur Positionierungshilfe die Option „Nach“ aus, um das FIGURE-Element nach dem ausgewählten Absatz einzufügen. Innerhalb des neuen Elements ist ein FIGCAPTION-Element verschachtelt. Beide Elemente enthalten Platzhaltertext (siehe Abbildung 8).
Das FIGURE-Element wird zwischen zwei Absätzen eingefügt.
Abbildung 8: Das FIGURE-Element wurde zwischen den Absätzen eingefügt.
  1. Während das FIGURE-Element noch ausgewählt ist, mache einen Rechtsklick bzw. einen Ctrl-Klick auf das Bild cable_car1 im Dialogfeld „CC Libraries“. Wähle im Kontextmenü die Option Nicht verknüpfte Elemente einfügen. Das Dialogfeld zur Positionierungshilfe fragt, wo du das Bild einfügen möchtest. Klicke auf Einbetten, um es innerhalb des FIGURE-Elements zu verschachteln.

  2. Du wirst über ein Dialogfeld aufgefordert, weitere Angaben zu Position, Format und Größe des Bildes zu machen. Das Feld „scr“ schlägt automatisch vor, das Bild im Ordner „images“ zu speichern, da du diesen im ersten Teil des Tutorials als Standardordner für Bilder festgelegt hast. Der vorgeschlagene Name des Bildes wird von seiner Bezeichnung in der Bibliothek abgeleitet. Beide Angaben sind in Ordnung. Aber wenn du das Bild im Format „PNG 32“ speicherst, entsteht eine sehr große Datei. Öffne das Dropdown-Menü rechts im Dialogfeld. Wähle das Format JPEG aus (siehe Abbildung 9).
In einem Dialogfeld werden Speicherort, Format und Größe heruntergeladener Bilder festgelegt.
Abbildung 9: Dreamweaver fragt, wo und wie das heruntergeladene Bild gespeichert werden soll.

Im Feld scr ändert sich die Dateierweiterung in .jpg.

  1. Mit einer Breite von über 3.000 Pixel ist das Bild viel zu groß. Ändere den Wert im Feld „W“ in 400. Das Verknüpfungssymbol zwischen „W“ („width“ = Breite) und „H“ („height“ = Höhe) ist standardmäßig aktiviert. Daher wird der Wert im Feld „H“ automatisch in 266 geändert.

    Prüfe, ob die Werte im Dialogfeld mit den Werten in Abbildung 10 übereinstimmen. Klicke auf OK.
Ein heruntergeladenes JPEG-Bild ist 400 x 266 Pixel groß.
Abbildung 10: Das Bild wird als JPEG mit einer Größe von 400 x 266 Pixel heruntergeladen.
  1. Das Bild wird innerhalb des FIGURE-Elements eingefügt. Dreamweaver richtet automatisch im HTML-Code die entsprechenden Werte für „width“ und „height“ ein. Da dein Layout responsiv sein soll, musst du diese Werte entfernen.

    Während das Bild noch ausgewählt ist, klicke auf das Hamburgersymbol in der Elementanzeige, um den Direkt-Eigenschafteninspektor einzublenden (siehe Abbildung 11). Lösche die Werte in den Feldern „width“ und „height“. Klicke danach außerhalb des Eigenschafteninspektors, um ihn zu schließen.
Mit dem Direkt-Eigenschafteninspektor werden die HTML-Attribute eines Bildes geprüft.
Abbildung 11: Prüfe die HTML-Attribute des Bildes mit dem Direkt-Eigenschafteninspektor.
  1. Machen Sie einen Doppelklick auf den Platzhaltertext im FIGURE-Element, um in den Bearbeitungsmodus zu wechseln. Markieren Sie den Text, und drücken Sie die Löschtaste. Es bleiben nur noch das Bild und der Platzhalter für die Beschriftung übrig.

    Dreamweaver entfernt möglicherweise auch das alt=""-Attribut aus dem IMG-Tag im HTML-Code. Falls das passiert, zeigt das Bedienfeld „Ausgabe“ einen Hinweis an, dass das ALT-Attribut einen Wert haben muss. Dieses ALT-Attribut stellt Alternativtext für nicht visuelle Browser bereit, z. B. für Bildschirm-Leseprogramme für Sehbehinderte. Wenn das Bild eine Beschriftung hat oder rein dekorative Zwecke erfüllt, ist das ALT-Attribut nicht erforderlich. Sie können diesen Hinweis also ignorieren.

  2. Machen Sie einen Doppelklick auf den Platzhaltertext, und ersetzen Sie ihn durch The cable car terminus near Union Square (Cable Car-Haltestelle beim Union Square).

  3. Speichern Sie die Datei „index.html“.

Das Kontextmenü im Bedienfeld „CC Libraries“ bietet Optionen für das Herunterladen und Einfügen von verknüpften und nicht verknüpften Elementen. Bei nicht verknüpften Elementen wird einfach eine lokale Version des Bildes in Ihrer Website erzeugt. Bei beiden Optionen für verknüpfte Elemente wird die lokale Version automatisch aktualisiert, wenn das Bild in der Creative Cloud-Bibliothek verändert wird. Weitere Informationen zu diesem Thema finden Sie in der Dreamweaver-Hilfe unter Durchsuchen, Synchronisieren und Verwalten von Elementen.

Ein Bild per Drag-and-Drop aus einer Creative Cloud-Bibliothek einfügen.

Das andere Bild in der Datei „index.html“ muss im DIV-Element mit der ID „hero“ verschachtelt werden. In diesem Abschnitt lernst du, wie du es per Drag-and-Drop direkt aus dem Bedienfeld „CC Libraries“ auf der Seite einfügst. Diese Technik kann beim ersten Mal etwas schwierig sein. Lies daher zuerst die folgenden Anweisungen durch, bevor du sie ausführst.

  1. Schließe die Ansicht „Teilen“, indem du im Dokumentfenster links oben auf Live klickst. Vergewissere dich, dass der Absatz „Bayside Beat keeps ...“ direkt nach der Aufzählung ausgewählt ist.

  2. Blende im Bedienfeld „DOM“ die meisten Elemente mit verschachtelten untergeordneten Elementen aus. Lasse aber das DIV-HERO-Element eingeblendet (siehe Abbildung 12). So kannst du das Bild präziser positionieren.
Im Bedienfeld „DOM“ wird das DIV-Element eingeblendet, in das das Bild verschachtelt werden soll.
Abbildung 12: Blende im Bedienfeld „DOM“ das DIV-Element ein, in das das Bild verschachtelt werden soll.
  1. Wähle im Bedienfeld „CC Libraries“ das Bild golden_gate aus. Ziehe es in die Ansicht „Live“. Während du das tust, sollte eine horizontale grüne Linie eingeblendet werden, die anzeigt, an welcher Stelle das Bild eingefügt würde.
    Ziehe das Bild solange, bis die grüne Linie zwischen der Aufzählung und dem Absatz liegt, aber lasse die Maustaste nicht los. Nach ein paar Sekunden sollte ein kleines </>-Symbol rechts unten am Cursor erscheinen (siehe Abbildung 13).
Das Symbol am Cursor erleichtert die Positionierung von Elementen per Drag-and-Drop.
Abbildung 13: Das Symbol am Cursor erleichtert die Positionierung von Elementen per Drag-and-Drop.
  1. Bewege den Cursor bei gedrückter Maustaste über das Symbol, um eine schwebende Version des Bedienfelds „DOM“ einzublenden. Ziehe den Cursor weiter über das schwebende Bedienfeld, bis die grüne Linie zwischen dem DIV-HERO-Element und dem darauffolgenden P-Absatz liegt (siehe Abbildung 14). Wenn die Position stimmt, lasse die Maustaste los.
Ein Bild wird bis zur gewünschten Stelle im schwebenden Bedienfeld „DOM“ gezogen.
Abbildung 14: Ziehe das Bild bis zur gewünschten Stelle im schwebenden Bedienfeld „DOM“.
  1. Du wirst über ein Dialogfeld aufgefordert, Speicherort und Format des Bildes für die lokale Website einzugeben (siehe Abbildungen 9 und 10 im vorherigen Abschnitt).

    Ändere das Format in JPEG. Setze die Breite (W) bzw. Höhe (H) auf 1000 bzw. 547. Klicke dann auf „OK“.

  2. Das Bild der Golden Gate Bridge sollte nun zwischen der Aufzählung und dem Absatz platziert sein. Falls es sich an einer falschen Stelle befindet, keine Sorge. Du kannst das gleich korrigieren.

    Während das Bild noch ausgewählt ist, klicke auf das Hamburgersymbol, um den Direkt-Eigenschafteninspektor einzublenden.

  3. Gib Golden Gate Bridge im Feld alt ein. Lösche die Werte in den Feldern „width“ und „height“. Dieses Bild wird keine Beschriftung erhalten, daher ist das ALT-Attribut für nicht visuelle Browser erforderlich. Das Bild wird seine Größe in Abhängigkeit von der Bildschirmauflösung automatisch ändern, also müssen keine Maße eingegeben werden.

  4. Überprüfe im Bedienfeld „DOM“, ob das IMG-Element zwischen „div #hero“ und p liegt und auf dieselbe Ebene wie das P-Element eingerückt wurde (siehe Abbildung 15).
Im Bedienfeld „DOM“ wurde das Bild korrekt verschachtelt.
Abbildung 15: Das Bild wurde korrekt im HERO-DIV-Element über dem Absatz verschachtelt.
  1. Falls das Bild an der falschen Stelle eingefügt wurde, ziehe es im Bedienfeld „DOM“ solange, bis eine horizontale grüne Linie zwischen den Elementen „div #hero“ und dem darauffolgenden „p“ erscheint. Lasse dann die Maustaste los.

  2. Speichere die Datei index.html.

Mittels Drag-and-Drop in der Ansicht „Live“ und dem Bedienfeld „DOM“ lassen sich HTML-Elemente und Kreativinhalte auf einer Web-Seite neu anordnen. Du solltest diese Technik also üben, bis sie dir leicht von der Hand geht.

Falls du lieber nicht mit der Maus arbeitest, kannst du das Bild von der Golden Gate Bridge auch auf die im vorherigen Abschnitt beschriebene Weise einfügen. Wähle zuerst das HERO-DIV-Element aus und dann im Kontextmenü Nicht verknüpfte Elemente einfügen. Wähle im Dialogfeld zur Positionierungshilfe die Option Einbetten.

Bilder responsiv machen.

Das Bild der Golden Gate Bridge ist 1.000 Pixel breit. Die anderen Bilder auf der Seite sind nur 400 Pixel breit. Auch wenn du die Attribute width und height aus dem HTML-Code entfernst, zeigen Browser Bilder in ihrer ursprünglichen Größe an. Es sei denn, du wendest einen kleinen CSS-Trick an, der die Bildgröße dynamisch an den verfügbaren Platz auf dem Bildschirm anpasst.

  1. Verkleinere die Ansicht „Live“, indem du den Scrubber nach links ziehst (siehe Abbildung 16). Sobald die Ansicht „Live“ schmaler als 1.000 Pixel ist, erscheint eine horizontale Bildlaufleiste. Die rechte Seite des Bildes mit der Golden Gate Bridge wird verdeckt.
In der Ansicht „Live“ der Bayside Beat-Website wird der Scrubber hervorgehoben.
  1. Wähle das Bild der Golden Gate Bridge in der Ansicht „Live“ aus. Erstelle mit CSS Designer einen neuen Selektor. Drücke die Nach-oben-Taste einmal, um den vorgeschlagenen Selektornamen in „#hero img“ zu ändern. Bestätige die Änderung mit der Eingabetaste.

    Es wird ein Selektornachfahre erstellt, der aus zwei oder mehr Selektoren besteht, die durch Leerzeichen getrennt sind. Er regelt die Darstellung von Bildern innerhalb von Elementen mit der ID „hero“.

  2. Lege die folgenden Properties und Werte fest (beide im Abschnitt „Layout“):
max-width: 100% display: block

Mit einer Property „max-width“ von 100% wird das Bild niemals breiter als sein übergeordnetes Element, in diesem Fall das HERO-DIV-Element.

  1. Ziehe den Scrubber der Ansicht „Live“ hin und her. Das Bild der Golden Gate Bridge wird automatisch entsprechend der verfügbaren Breite skaliert (siehe Abbildung 17).
Der Scrubber der Ansicht „Live“ wird justiert, um das Bild der Golden Gate Bridge automatisch horizontal zu skalieren.
Abbildung 17: Das Bild wird nun automatisch skaliert.
  1. Wähle das Bild mit dem Cable Car in der Ansicht „Live“ aus. Drücke die Nach-oben-Taste einmal. Damit wird die Auswahl in der HTML-Hierarchie um eine Ebene nach oben auf das übergeordnete FIGURE-Element gelegt.

  2. Erstelle einen Selektor für „figure“. Lege folgende Properties fest:
width: 400px max-width: 92% display: block margin-left: auto margin-right: auto padding-top: 20px padding-bottom: 20px
  1. Falls nötig, verkleinere die Ansicht „Live“ auf unter 400 Pixel. Der Rahmen des FIGURE-Elements zeigt an, dass die Property „max-width“ von 92% die Breite des Elements überschreibt. Das Bild ist zwar horizontal zentriert ausgerichtet, ragt aber rechts über den Rahmen hinaus (siehe Abbildung 18).
Ein Bild ragt über den Container des übergeordneten Elements hinaus.
Abbildung 18: Das Bild ragt über den Container des übergeordneten Elements hinaus.
  1. Um Bilder formatieren zu können, die innerhalb des FIGURE-Elements verschachtelt sind, musst du einen weiteren Selektornachfahren erstellen – „figure img“. Setze die Property „max-width“ auf den Wert 100%.

    Dadurch verhinderst du, dass das Bild über den Container-Rand des übergeordneten Elements hinausragt. Wenn die Ansicht „Live“ breiter ist als 435px, wird das Bild in seiner ursprünglichen Größe von 400px und horizontal zentriert angezeigt.

  2. Lasse das FIGURE-Element noch ausgewählt. Erstelle einen Selektor „figcaption“ mit folgenden Properties und Werten:
display: block margin-top: 0.5em font-size: 0.75em text-transform: uppercase

Einen CSS-Filter zum Formatieren von Bildern verwenden.

Die meisten modernen Browser unterstützen CSS-Filter, auch wenn diese nicht zum offiziellen CSS-Standard gehören. Du wirst jetzt einige einfache CSS-Stile erstellen, um ein Bild in ein Schwarz-Weiß-Foto umzuwandeln, das beim Mouseover wieder in Farbe dargestellt wird.

  1. Wähle in der Ansicht „Live“ das Bild mit dem Cable Car aus. Klicke in der Elementanzeige des IMG-Elements auf das Pluszeichen. Gib „.grayscale“ (mit einem Punkt am Anfang) in das editierbare Feld ein. Drücke die Tabulator- oder Eingabetaste, um dem Bild die Klasse zuzuweisen.

    Vergewissere dich, dass im eingeblendeten Popup responsive.css ausgewählt ist. Klicke außerhalb des Popups, um es auszublenden.

  2. Wähle den Selektor „.grayscale“ aus, den Dreamweaver im Bereich „Selektoren“ von CSS Designer erstellt hat. Aktiviere im Bereich „Eigenschaften“ oben das Kontrollkästchen Nur verwendete.

  3. Gib im Abschnitt „Weitere“ in die Felder Eigenschaft hinzufügen und Wert hinzufügen folgende Properties und Werte ein:
-webkit-filter: grayscale(100%) filter: grayscale(100%)

Das Bild sieht jetzt wie ein Schwarz-Weiß-Foto aus (siehe Abbildung 19).

Ein Bild wurde mithilfe eines CSS-Filters in ein Schwarz-Weiß-Foto umgewandelt.
Abbildung 19: Das Bild wurde mithilfe eines CSS-Filters in ein Schwarz-Weiß-Foto umgewandelt.
  1. Mache im Bereich „Selektoren“ einen Rechtsklick bzw. Ctrl-Klick auf den Selektor „.grayscale“. Wähle im Kontextmenü die Option „Duplizieren“. Dreamweaver erstellt eine Kopie der CSS-Anweisung, lässt aber den Namen des neuen Selektors zur Bearbeitung noch offen. Ergänze den Selektornamen um die Pseudoklasse „:hover“ wie folgt:

    .grayscale:hover

    Im sechsten Teil dieses Tutorials erfährst du mehr über Pseudoklassen.

  2. Mache im Bereich „Eigenschaften“ einen Doppelklick auf jede Property. Setze die Werte auf „grayscale(0%)“.

  3. Fahre in der Ansicht „Live“ mit dem Cursor über das Bild. Das Bild wird nun farbig dargestellt.

  4. Speichere deine Arbeit über den Menüpfad Datei > Alle zugehörigen Dateien speichern.

Um die Browser-übergreifende Kompatibilität deines Designs sicherzustellen, musst du die beiden Properties „-webkit-filter“ und „filter“ einrichten. Alte Browser, die keine der beiden Properties interpretieren können, ignorieren diese CSS-Anweisung und stellen das Bild farbig dar.

Absätze unabhängig von anderen formatieren.

Im vorherigen Abschnitt hast du mithilfe einer Klasse das Bild vom Cable Car anders formatiert als das Hauptbild. Es ist allerdings nicht immer nötig, eine Klasse zu definieren, um Elemente unterschiedlich zu formatieren. Der Absatz zwischen dem Bild mit der Golden Gate Bridge und der ersten H2-Überschrift ist im HERO-DIV-Element verschachtelt, sodass er mittels eines Selektornachfahren für den Selektor „#hero p“ anders formatiert werden kann als die restlichen Absätze.

  1. Wähle in der Ansicht „Live“ den Absatz aus, der unmittelbar nach dem Bild mit der Golden Gate Bridge folgt.

  2. Verwandte CSS-Anweisungen sollten immer nahe beieinander stehen. Markiere daher im Bereich „Selektoren“ von CSS Designer den Selektor „#hero img“, und klicke auf das Pluszeichen. Dreamweaver schlägt als Selektornamen „#wrapper #hero p“ vor. Drücke die Nach-oben-Taste einmal, um den Namen in „#hero p“ zu ändern.

  3. Deaktiviere im Bereich „Eigenschaften“ rechts oben das Kontrollkästchen Nur verwendete. Klicke auf das Symbol für Text , um zum Abschnitt „Text“ zu gelangen.

  4. Klicke im Bedienfeld „CC Libraries“ auf das rosa Farbfeld, um den Hex-Code #F68979 in die Zwischenablage zu kopieren. Füge diesen Wert für die Property color ein. Nun wird nur der Absatz im HERO-DIV-Element rosa gesetzt. Alle anderen bleiben dunkelgrau.

  5. Setze die Property „font-weight“ auf den Wert 600.

  6. Klicke einmal rechts neben die Property „font-size“, und wähle em als Maßeinheit aus. Wie du schon im vierten Teil gesehen hast, setzt Dreamweaver den Wert zunächst auf 0, sodass der Text verschwindet.

    „value“ muss in 1,5em geändert werden. Dazu gibt es zwei Möglichkeiten:

    • Gib den Wert 1,5 direkt in das editierbare Feld ein. Bestätige die Änderung mit der Eingabetaste.
    • Oder positioniere deinen Cursor knapp unterhalb des Wertefeldes, bis er sich in einen Doppelpfeil verwandelt. Halte gleichzeitig mit der Maustaste die Strg-Taste (Windows) bzw. die Befehlstaste (macOS) gedrückt, und bewege die Maus nach rechts (wie beim „Scrubbing“ in einem Audioschnitt-Programm). Dabei wird der Wert in Schritten von 0,1 erhöht (siehe Abbildung 20). Die Auswirkungen siehst du direkt in der Ansicht „Live“. Falls du zu weit gezogen hast, ziehe die Maus einfach wieder nach links. Klicke außerhalb des Feldes, um die Änderung zu bestätigen. Diese Scrubbing-Methode ist besonders praktisch, weil du das Ergebnis sofort visuell in der Ansicht „Live“ überprüfen kannst.

 

Mithilfe einer Metataste lassen sich Werte für „font-size“ durch Ziehen der Maus in 0,1er-Schritten wählen.
Abbildung 20: Mithilfe einer Metataste kannst du Werte durch Ziehen der Maus in 0,1er-Schritten wählen.

Wenn du die Umschalttaste beim Scrubbing gedrückt hältst, ändert sich der Wert in 10er-Schritten. Ohne Verwendung einer Metataste wird der Wert in 1er-Schritten verändert.

  1. Wandle den Text in Großbuchstaben um, indem du auf das Symbol für Großbuchstaben neben der Property „text-transform“ klickst (siehe Abbildung 21).
Manche Properties werden mithilfe von Symbolen festgelegt.
Abbildung 21: Manche Properties werden mithilfe von Symbolen festgelegt.
  1. Klicke auf das Symbol für Rahmen oben im Bereich Eigenschaften, um zum Abschnitt „Rahmen“ zu springen. Die „border“-Properties sind als Bedienfeld mit Registerkarten gruppiert (siehe Abbildung 22). Werte, die du auf der ersten Registerkarte festlegst, werden auf alle Seiten des Elements angewendet. Über die anderen Registerkarten kannst du individuelle Rahmen für „top“ (oben), „right“ (rechts), „bottom“ (unten) und „left“ (links) definieren.
Für Rahmen stehen Registerkarten für alle oder einzelne Seiten zur Verfügung.
Abbildung 22: Für Rahmen stehen Registerkarten für alle oder einzelne Seiten zur Verfügung.
  1. Wähle die Registerkarte für den unteren Rahmen aus. Lege für die Rahmenbreite „width“ 3px und für den Stil „style“ solid (durchgezogen) fest. Eine Farbe musst du nicht festlegen, denn diese wird vom Text des aktuellen Elements übernommen.

  2. Um die Formatierung dieses Absatzes abzuschließen, klicke auf das Symbol für Layout oben im Bereich Eigenschaften. Navigiere zum visuellen Tool für die Auffüllung. Gib als Wert für Links und Rechts 4% und für Unten 20px ein.
An drei Seiten wird eine Auffüllung festgelegt.
Abbildung 23: An drei Seiten wird eine Auffüllung festgelegt.
  1. Zwischen dem Text und dem darüberliegenden Bild der Golden Gate Bridge ist der Abstand noch zu groß. Verwende das visuelle Tool für „margin“. Richte einen oberen Rand von 10px ein.

Der Absatz ist nun völlig anders als die anderen formatiert (siehe Abbildung 24).

Ein Intro-Absatz wurde mithilfe eines Selektornachfahren anders formatiert.
Abbildung 24: Der Intro-Absatz wurde mithilfe eines Selektornachfahren anders formatiert.

Du solltest inzwischen genug Erfahrung mit der Erstellung von Selektoren und CSS-Anweisungen haben, um den Footer formatieren zu können. Gib die CSS-Anweisungen direkt in der Ansicht „Code“ am Ende des Stylesheets ein. Der Code sieht wie folgt aus:

footer { padding-top: 20px; padding-bottom: 20px; background-color: #1E1E1E; color: white; font-size: 0.8em; text-align: center; }

Vergiss nicht, deine Arbeit zu speichern, wenn du fertig bist. Deine Seite sollte im Browser nun wie in Abbildung 25 aussehen. Das Design kommt gut voran.

Die fertige Bayside Beat-Website im einspaltigen Layout
Abbildung 25: Das einspaltige Layout ist beinahe fertig.

Das Layout für die Bayside Beat-Website ist zur Hälfte fertig.

10/19/2021

Beitrag von: David Powers, Tom Alex Buch

War diese Seite hilfreich?