Probiere diese Tutorials mit Dreamweaver aus
Moderne, responsive Web-Seiten gestalten
- Seitenbereiche einfärben.
- Abschnittshöhen anpassen.
- Auffüllungen hinzufügen.
- Auffüllungen hinzufügen (Fortsetzung).
- Ränder hinzufügen.
- Ränder hinzufügen (Fortsetzung).
Seitenelemente mit CSS formatieren.
Erfahre, wie du mit CSS Farben und Abstände für DIV- und andere Container definieren kannst.
Was du benötigst
Beispieldateien herunterladen
ZIP, 17 KB
Mit CSS kannst du für HTML-Elemente Farben hinzufügen, die Positionierung anpassen und andere Merkmale festlegen. Verwende CSS-Stile, um das Erscheinungsbild einzelner Elemente präziser zu steuern, das Layout besser zu strukturieren und das Design deiner Web-Seite insgesamt zu optimieren.
Kennst du dich mit Rändern und Auffüllungen aus? Das CSS-Modell unten bietet einen guten Überblick. Dieses häufig verwendete Modell veranschaulicht die Beziehung verschiedener CSS-Properties zu den HTML-Elementen, auf die sie verweisen.
Vorbereitung.
Lade die Projektdateien herunter. Extrahiere und speichere sie. Öffne in Dreamweaver die Datei style_containers_practice.html.
Klicke links oben im Arbeitsbereich auf style_containers_practice.css. Rufe die Ansicht „Teilen“ auf.
Suche den Selektor header. Du kannst die Farbe dieses Elements ändern, indem du die Property background-color hinzufügst. Sobald du einen Doppelpunkt nach „background-color“ eingibst, wird ein Kontextmenü angezeigt. Wähle in diesem Menü die Option Farbe. Verwende den Farbwähler. Oder gib den Hex-Code der gewünschten Farbe manuell ein.
Gib als Hintergrundfarbe für header, #main und #sidebar den Wert #FFFFFF ein. Lege als Hintergrundfarbe für footer den Wert #2F4666 fest.
CSS.
header {
background-color:#FFFFFF;
...
}
#main {
background-color:#FFFFFF;
...
}
#sidebar {
background-color:#FFFFFF;
...
}
footer {
background-color:#2F4666;
...
}
Um einem Abschnitt eine bestimmte Höhe zuzuweisen, füge die Property height hinzu. Setze für die Selektoren #main und #sidebar die Höhe auf 250 px.
CSS.
#main {
...
height:250px;
...
}
#sidebar {
...
height:250px;
...
}
Mit der Property padding wird ein Abstand zwischen Inhalt und Rand eines Elements definiert. Richte für #main und #sidebar eine Auffüllung mit dem Wert 25 px ein. Damit wird ein Abstand von 25 Pixeln auf allen vier Seiten des Inhalts hinzugefügt.
CSS.
#main {
...
padding:25px;
...
}
#sidebar {
...
padding:25px;
...
}
Die Auffüllungswerte lassen sich über die Attribute „top“, „right“, „bottom“ und „left“ für alle Seiten individuell einstellen. Lege für den Bereich header folgende Auffüllungswerte fest: 1px 0px 1px 0px. Damit definierst du eine Auffüllung von 1 Pixel zwischen Inhalt und oberem Rand, 0 Pixel nach rechts, 1 Pixel nach unten und 0 Pixel nach links.
Gib für den Bereich footer die Auffüllungswerte 15px 0px 15px 0px ein.
CSS.
header {
...
padding:1px 0px 1px 0px;
...
}
footer {
...
padding:15px 0px 15px 0px;
...
}
Mit der Property margin wird ein transparenter Bereich um den Rahmen eines Elements eingefügt. Gib für die Property „margin“ des Bereichs #main die Werte 10px 50px 20px 0px ein. Dadurch werden folgende Ränder definiert: 10 Pixel über dem oberen Rand des Elements, 50 Pixel nach rechts, 20 Pixel nach unten und 0 Pixel nach links.
Gib für #sidebar folgende Randwerte ein: 10px 0px 20px 50px.
CSS.
#main {
...
margin:10px 50px 20px 0px;
...
}
#sidebar {
...
margin:10px 0px 20px 50px;
...
}
Füge auch den restlichen Elementen im Layout die Property „margin“ hinzu.
Gib für header die Werte 10px 50px 20px 50px ein. Setze für footer die Property „margin“ auf 0px 50px 0px 50px.
CSS.
header {
...
margin:10px 50px 20px 50px;
...
}
footer {
...
margin:0px 50px 0px 50px;
...
}
Klicke auf Vorschau in Browser. Überprüfe das formatierte Layout in deinem bevorzugten Webbrowser.
Speichere die Datei, damit deine Änderungen angezeigt werden.
