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.

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.

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.

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

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.

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

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

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

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

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.

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 .

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

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.

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

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.

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. 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“):

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

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:

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

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:

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.

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.

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.

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

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.

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