Im fünften Teil dieses Tutorials lernen Sie, wie Sie mit CSS in der Code-Ansicht und CSS Designer das Layout der Homepage anpassen, Abstände um Elemente einrichten und Bilder hinzufügen, die automatisch in Abhängigkeit vom verwendeten Bildschirm skaliert werden.
5496-create-first-website_1408x792

Hinweis:

Über die Download-Buttons können Sie die Creative Cloud-Bibliothek und alle Projektdateien für dieses Tutorial herunterladen. Sie können entweder mit der Datei weiterarbeiten, die Sie im ersten Teil des Tutorials angelegt haben, 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 CC. Im vorherigen Teil haben Sie bereits mit dem Layout der Homepage der Bayside Beat-Website begonnen – zunächst über die Code-Ansicht, dann mit CSS Designer. Die Arbeit mit CSS Designer hat den Vorteil, dass Änderungen sofort in der Live-Ansicht sichtbar werden. In diesem Teil nimmt das Design langsam Gestalt an, denn Sie werden 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 Sie horizontale und vertikale Abstände für Elemente einrichten können: „padding“ und „margin“. Manchmal ist es egal, welche Sie verwenden. 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 Sie das standardmäßige CSS Box Model verwenden oder es mit dem Code-Fragment von Teil 4 umgehen.

fig01
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.

fig02
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).

fig03
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 Sie im vierten Teil erstellt haben, 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, sehen Sie 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 Ihnen diese Logik noch Rätsel aufgibt – Sie werden es bald mit eigenen Augen sehen.

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

Um das Problem mit der Lücke am oberen Seitenrand zu beheben, müssen Sie den oberen Rand der Hauptüberschrift durch eine Auffüllung mit dem gleichen Wert ersetzen. Sie werden bei der Gelegenheit auch die anderen Überschriften formatieren.

  1. Wählen Sie in der Live-Ansicht die H1-Überschrift aus, und vergewissern Sie sich, dass im Bereich „Quellen“ von CSS Designer responsive.css markiert ist. Der nächste Selektor soll nach dem Selektor „#wrapper“ eingefügt werden, also wählen Sie diesen im Bereich „Selektoren“ aus. Klicken Sie 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ücken Sie die Nach-oben-Taste. Der Namensvorschlag ändert sich in „header h1“. Das ist immer noch zu spezifisch, also drücken Sie 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, klicken Sie rechts neben „h1“ in das editierbare Feld, und geben Sie ein Komma gefolgt von „h2“ ein. Der Selektor sollte nun so aussehen:

    h1, h2

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

  3. Klicken Sie im Bereich „Eigenschaften“ oben auf das Symbol für Text , und legen Sie 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, klicken Sie auf das Pluszeichen im Bereich „Selektoren“. Drücken Sie die Nach-oben-Taste zweimal, um einen H1-Selektor zu erstellen. Wechseln Sie zum Layout-Abschnitt, und erstellen Sie die folgenden Properties (siehe Abbildung 4):
margin-top: 0px
margin-bottom: 0px
padding-top: 20px
padding-bottom: 20px
fig04
Abbildung 4: Ersetzen Sie 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. Legen Sie 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 Sie mit dem Cursor darüber fahren, zeigen QuickInfos die Bedeutung der Symbole an.

fig05
Abbildung 5: Einige Properties werden mithilfe von Symbolen festgelegt.

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

  1. Wählen Sie eine der H2-Überschriften aus, und erstellen Sie einen H2-Selektor. Drücken Sie die Nach-oben-Taste zweimal, um ihn weniger spezifisch zu machen. Legen Sie 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.

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 Sie es später einfügen. Erstellen Sie also stattdessen eine Gruppe von Selektoren für „main, aside“ mit folgenden Properties und Werten (siehe Abbildung 6):

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

Vergessen Sie anschließend nicht, Ihre Arbeit über Datei > Alle zugehörigen Dateien speichern zu speichern.

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

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

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

  2. Öffnen Sie das Bedienfeld „Einfügen“, und klicken Sie unter der Kategorie „HTML“ auf Figure.
fig07
Abbildung 7: Klicken Sie im Bedienfeld „Einfügen“ unter der Kategorie „HTML“ auf „Figure“.
  1. Wählen Sie 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).
fig08
Abbildung 8: Das FIGURE-Element wurde zwischen den Absätzen eingefügt.
  1. Während das FIGURE-Element noch ausgewählt ist, klicken Sie mit der rechten Maustaste (bzw. machen Sie einen Ctrl-Klick) auf das Bild cable_car1 im Dialogfeld „CC Libraries“. Wählen Sie im Kontextmenü die Option Nicht verknüpfte Elemente einfügen. Das Dialogfeld zur Positionierungshilfe fragt, wo Sie das Bild einfügen möchten. Klicken Sie auf Einbetten, um es innerhalb des FIGURE-Elements zu verschachteln.

  2. Sie werden ü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 Sie diesen im ersten Teil des Tutorials als Standardordner für Bilder festgelegt haben. Der vorgeschlagene Name des Bildes wird von seiner Bezeichnung in der Bibliothek abgeleitet. Beide Angaben sind in Ordnung. Aber wenn Sie das Bild im Format „PNG 32“ speichern, entsteht eine sehr große Datei. Öffnen Sie das Dropdown-Menü rechts im Dialogfeld, und wählen Sie das Format JPEG aus (siehe Abbildung 9).
fig09
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ß. Ändern Sie 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üfen Sie, ob die Werte im Dialogfeld mit den Werten in Abbildung 10 übereinstimmen, und klicken Sie auf OK.
fig10
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, und Dreamweaver richtet automatisch im HTML-Code die entsprechenden Werte für „width“ und „height“ ein. Da Ihr Layout responsiv sein soll, müssen Sie diese Werte entfernen.

    Während das Bild noch ausgewählt ist, klicken Sie auf das Hamburgersymbol in der Elementanzeige, um den Direkt-Eigenschafteninspektor einzublenden (siehe Abbildung 11). Löschen Sie die Werte in den Feldern „width“ und „height“. Klicken Sie danach außerhalb des Eigenschafteninspektors, um ihn zu schließen.
fig11
Abbildung 11: Prüfen Sie 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.

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 lernen Sie, wie Sie es per Drag-and-Drop direkt aus dem Bedienfeld „CC Libraries“ auf der Seite einfügen. Diese Technik kann beim ersten Mal etwas schwierig sein, also lesen Sie zuerst die folgenden Anweisungen durch, bevor Sie sie ausführen.

  1. Schließen Sie die geteilte Ansicht, indem Sie im Dokumentfenster links oben auf die Schaltfläche Live-Ansicht klicken. Vergewissern Sie sich, dass der Absatz „Bayside Beat keeps ...“ direkt nach der Aufzählung ausgewählt ist.

  2. Blenden Sie im DOM-Bedienfeld die meisten Elemente mit verschachtelten untergeordneten Elementen aus, aber lassen Sie das DIV-HERO-Element eingeblendet (siehe Abbildung 12). So können Sie das Bild präziser positionieren.
fig12
Abbildung 12: Blenden Sie im DOM-Bedienfeld das DIV-Element ein, in das das Bild verschachtelt werden soll.
  1. Wählen Sie im Bedienfeld „CC Libraries“ das Bild golden_gate aus, und ziehen Sie es in die Live-Ansicht. Während Sie das tun, sollte eine horizontale grüne Linie eingeblendet werden, die anzeigt, an welcher Stelle das Bild eingefügt würde.
    Ziehen Sie das Bild solange, bis die grüne Linie zwischen der Aufzählung und dem Absatz liegt, aber lassen Sie die Maustaste nicht los. Nach ein paar Sekunden sollte ein kleines </>-Symbol rechts unten am Cursor erscheinen (siehe Abbildung 13).
fig13
Abbildung 13: Das Symbol am Cursor erleichtert die Positionierung von Elementen per Drag-and-Drop.
  1. Bewegen Sie den Cursor bei gedrückter Maustaste über das Symbol, um eine schwebende Version des DOM-Bedienfelds einzublenden. Ziehen Sie 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, lassen Sie die Maustaste los.
fig14
Abbildung 14: Ziehen Sie das Bild bis zur gewünschten Stelle im schwebenden DOM-Bedienfeld.
  1. Sie werden über ein Dialogfeld aufgefordert, Speicherort und Format des Bildes für die lokale Website einzugeben (siehe Abbildungen 9 und 10 im vorherigen Abschnitt).

    Ändern Sie das Format in JPEG, und setzen Sie die Breite (W) bzw. Höhe (H) auf 1000 bzw. 547. Klicken Sie anschließend 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. Sie können das gleich korrigieren.

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

  3. Geben Sie Golden Gate Bridge im Feld alt ein, und löschen Sie 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üfen Sie im DOM-Bedienfeld, ob das IMG-Element zwischen „div #hero“ und p liegt und auf dieselbe Ebene wie das P-Element eingerückt wurde (siehe Abbildung 15).
fig15
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, ziehen Sie es im DOM-Bedienfeld solange, bis eine horizontale grüne Linie zwischen den Elementen „div #hero“ und dem darauffolgenden „p“ erscheint. Lassen Sie dann die Maustaste los.

  2. Speichern Sie die Datei index.html.

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

Falls Sie lieber nicht mit der Maus arbeiten, können Sie das Bild von der Golden Gate Bridge auch auf die im vorherigen Abschnitt beschriebene Weise einfügen. Wählen Sie zuerst das HERO-DIV-Element aus, und klicken Sie im Kontextmenü auf Nicht verknüpfte Elemente einfügen. Wählen Sie 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 Sie die Attribute width und height aus dem HTML-Code entfernen, zeigen Browser Bilder in ihrer ursprünglichen Größe an. Es sei denn, Sie wenden einen kleinen CSS-Trick an, der die Bildgröße dynamisch an den verfügbaren Platz auf dem Bildschirm anpasst.

  1. Verkleinern Sie die Live-Ansicht, indem Sie den Scrubber nach links ziehen (siehe Abbildung 16). Sobald die Live-Ansicht schmaler als 1.000 Pixel ist, erscheint eine horizontale Bildlaufleiste, und die rechte Seite des Bildes mit der Golden Gate Bridge wird verdeckt.
fig16
  1. Wählen Sie das Bild der Golden Gate Bridge in der Live-Ansicht aus, und erstellen Sie mit CSS Designer einen neuen Selektor. Drücken Sie die Nach-oben-Taste einmal, um den vorgeschlagenen Selektornamen in „#hero img“ zu ändern. Bestätigen Sie 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. Legen Sie 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. Ziehen Sie den Scrubber der Live-Ansicht hin und her. Das Bild der Golden Gate Bridge wird automatisch entsprechend der verfügbaren Breite skaliert (siehe Abbildung 17).
fig17
Abbildung 17: Das Bild wird nun automatisch skaliert.
  1. Wählen Sie das Bild mit dem Cable Car in der Live-Ansicht aus, und drücken Sie 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. Erstellen Sie einen Selektor für „figure“, und legen Sie 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, verkleinern Sie die Live-Ansicht 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).
fig18
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, müssen Sie einen weiteren Selektornachfahren erstellen – „figure img“. Setzen Sie die Property „max-width“ auf den Wert 100%.

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

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

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. Sie werden 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ählen Sie in der Live-Ansicht das Bild mit dem Cable Car aus, und klicken Sie in der Elementanzeige des IMG-Elements auf das Pluszeichen. Geben Sie „.grayscale“ (mit einem Punkt am Anfang) in das editierbare Feld ein, und drücken Sie die Tabulator- oder Eingabetaste, um dem Bild die Klasse zuzuweisen.

    Vergewissern Sie sich, dass im eingeblendeten Popup responsive.css ausgewählt ist, und klicken Sie außerhalb des Popups, um es auszublenden.

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

  3. Geben Sie 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).

fig19
Abbildung 19: Das Bild wurde mithilfe eines CSS-Filters in ein Schwarz-Weiß-Foto umgewandelt.
  1. Machen Sie im Bereich „Selektoren“ einen Rechtsklick bzw. Ctrl-Klick auf den Selektor „.grayscale“, und wählen Sie 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änzen Sie den Selektornamen um die Pseudoklasse „:hover“ wie folgt:

    .grayscale:hover

    Im sechsten Teil dieses Tutorials werden Sie mehr über Pseudoklassen lernen.

  2. Machen Sie im Bereich „Eigenschaften“ einen Doppelklick auf jede Property, und setzen Sie die Werte auf „grayscale(0%)“.

  3. Fahren Sie in der Live-Ansicht mit dem Cursor über das Bild. Das Bild wird nun farbig dargestellt.

  4. Speichern Sie Ihre Arbeit über den Menüpfad Datei > Alle zugehörigen Dateien speichern.

Um die Browser-übergreifende Kompatibilität Ihres Designs sicherzustellen, müssen Sie 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 haben Sie 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ählen Sie in der Live-Ansicht den Absatz aus, der unmittelbar nach dem Bild mit der Golden Gate Bridge folgt.

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

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

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

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

  6. Klicken Sie einmal rechts (bzw. mit gedrückter Ctrl-Taste) neben die Property „font-size“, und wählen Sie em als Maßeinheit aus. Wie Sie schon im vierten Teil gesehen haben, 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:

    • Geben Sie den Wert 1,5 direkt in das editierbare Feld ein, und bestätigen Sie die Änderung mit der Eingabetaste.
    • Oder positionieren Sie Ihren Cursor knapp unterhalb des Wertefeldes, bis er sich in einen Doppelpfeil verwandelt. Halten Sie gleichzeitig mit der Maustaste die Strg-Taste (Windows) bzw. die Befehlstaste (macOS) gedrückt, und bewegen Sie 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), und Sie sehen die Auswirkungen direkt in der Live-Ansicht. Falls Sie zu weit gezogen haben, ziehen Sie die Maus einfach wieder nach links. Klicken Sie außerhalb des Feldes, um die Änderung zu bestätigen. Diese Scrubbing-Methode ist besonders praktisch, weil Sie das Ergebnis sofort visuell in der Live-Ansicht überprüfen können.
n
fig20
Abbildung 20: Mithilfe einer Metataste können Sie Werte durch Ziehen der Maus in 0,1er-Schritten wählen.

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

  1. Wandeln Sie den Text in Großbuchstaben um, indem Sie auf das Symbol für Großbuchstaben neben der Property „text-transform“ klicken (siehe Abbildung 21).
fig21
Abbildung 21: Manche Properties werden mithilfe von Symbolen festgelegt.
  1. Klicken Sie 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 Sie auf der ersten Registerkarte festlegen, werden auf alle Seiten des Elements angewendet. Über die anderen Registerkarten können Sie individuelle Rahmen für „top“ (oben), „right“ (rechts), „bottom“ (unten) und „left“ (links) definieren.
fig22
Abbildung 22: Für Rahmen stehen Registerkarten für alle oder einzelne Seiten zur Verfügung.
  1. Wählen Sie die Registerkarte für den unteren Rahmen aus, und legen Sie für die Rahmenbreite „width“ 3px und für den Stil „style“ solid (durchgezogen) fest. Eine Farbe müssen Sie nicht festlegen, denn diese wird vom Text des aktuellen Elements übernommen.

  2. Um die Formatierung dieses Absatzes abzuschließen, klicken Sie auf das Symbol für Layout oben im Bereich Eigenschaften. Navigieren Sie zum visuellen Tool für die Auffüllung, und geben Sie als Wert für Links und Rechts 4% und für Unten 20px ein.
fig23
Abbildung 23: Legen Sie die Auffüllung für drei Seiten fest.
  1. Zwischen dem Text und dem darüber liegenden Bild der Golden Gate Bridge ist der Abstand noch zu groß. Verwenden Sie das visuelle Tool für „margin“, und richten Sie einen oberen Rand von 10px ein.

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

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

Sie sollten inzwischen genug Erfahrung mit der Erstellung von Selektoren und CSS-Anweisungen haben, um den Footer formatieren zu können. Geben Sie die CSS-Anweisungen direkt in der Code-Ansicht 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;
}

Vergessen Sie nicht, Ihre Arbeit zu speichern, wenn Sie fertig sind. Ihre Seite sollte im Browser nun wie in Abbildung 25 aussehen. Das Design kommt gut voran.

fig25
Abbildung 25: Das einspaltige Layout ist beinahe fertig.

Nächste Schritte

Das Layout für die Bayside Beat-Website ist zur Hälfte fertig. Fahren Sie fort mit Teil 6 – Links und Navigationsmenü formatieren.

04/13/2018

Beitrag von: David Powers, Tom Alex Buch

War diese Seite hilfreich?