Try these tutorials with Dreamweaver
Design modern, responsive web pages.
Website-Inhalte zentrieren.
Lerne, wie du eine Website mithilfe von HTML und CSS zentriert ausrichtest.
Was du benötigst
Download sample files
ZIP, 3,4 MB
Das korrekte Layouten von Web-Seiten mit HTML und CSS wird auch in den Tutorials Mit HTML-Layouts arbeiten und Web-Seiten mit CSS layouten behandelt.
Beim Erstellen einer Web-Seite werden Inhalte standardmäßig linksbündig gesetzt. In vielen Fällen ist aber ein zentriertes Layout ansprechender und bringt das Design besser zur Geltung. Das erreichst du, indem du die Seite per HTML übersichtlich strukturierst und die Inhalte anschließend mittels CSS zentrierst.
Vorbereitung.
Lade die Projektdateien herunter. Extrahiere und speichere sie. Öffne die Datei center-website.html in Dreamweaver. Zeige den Quellcode in der Ansicht „Teilen“ an.
Füge
-Tags vor und nach dem Inhalt des -Tags hinzu. Da die DIV -Tags den Inhalt umschließen (engl. „to wrap“), gib für das DIV -Element die ID wrapper ein. Vergiss das schließende
-Tag nicht.Die Erstellung eines DIV -Tags um den gesamten Seiteninhalt erleichtert die Anwendung von CSS-Eigenschaften auf die ganze Seite. In diesem Beispiel werden sämtliche Inhalte per CSS zentriert.
HTML.
(Inhalt)
Öffne die Datei style.css. Suche den Abschnitt, der mit dem Kommentar „/* Start Here */“ beginnt.
Rufe das Menü Ansicht auf. Deaktiviere „Vertikal teilen“. Die Ansichten „Code“ und „Live“ werden nun übereinander angezeigt. So lässt sich leichter erkennen, wie der Inhalt zentriert wird.
Füge die Eigenschaft margin: zum Selektor #wrapper hinzu. Dieser Selektor entspricht der ID des DIV -Elements im HTML-Code.
Für die Eigenschaft „margin“ sind vier Werte für die vier Seiten eines Elements zulässig: „top“, „right“, „bottom“ und „left“. Der komplette CSS-Code würde wie folgt aussehen: margin:0 auto 0 auto; Da aber die Werte für „top“ und „bottom“ und die Werte für „left“ und „right“ jeweils gleich sind, kannst du die Schreibweise abkürzen:
margin: 0 auto;
Die Werte für den oberen und unteren Rand sind jeweils 0, da weder vor noch nach dem Inhalt zusätzlicher Platz gebraucht wird. Der linke und der rechte Rand sind jeweils auf den Wert auto gesetzt. Dadurch wird der verfügbare Platz gleichmäßig zwischen diesen beiden Rändern verteilt. Damit ist das Layout zentriert.
CSS.
#wrapper {
...
margin: 0 auto;
}
Klicke auf Vorschau in Browser. Überprüfe das zentrierte Layout in deinem bevorzugten Webbrowser.
Speichere die Datei, damit deine Änderungen angezeigt werden.
