Die Grundlagen einer Div-basierten Website - Gunook

2024 Autor: John Day | [email protected]. Zuletzt bearbeitet: 2024-01-30 07:23

Dieses anweisbare zeigt Ihnen die Grundlagen, wie man eine Website mit Divs erstellt. Denn Tabellen, die für das Layout verwendet werden, sind böse!: pUm dieses instructable zu verstehen, müssen Sie grundlegendes HTML und CSS kennen. Wenn du etwas nicht verstehst, kannst du gerne nachfragen. Meine persönliche Homepage verwendet auch diese Art von div-Struktur.https://www.erwtje.netViel Spaß

Schritt 1: Erstellen Sie die Basisdateien

Erstellen Sie zuerst Ihre HTML-Datei. Wir fügen die Grundlagen hinzu. Die CSS-Datei wird jetzt leer sein.html-Datei enthält jetzt: test Speichern Sie Ihre HTML-Datei als etwas.html. Sie können den Namen selbst wählen. Ihre CSS-Datei muss als.css gespeichert werden. Stellen Sie sicher, dass Sie denselben Namen wie in der HTML-Datei angegeben haben. In diesem Fall "style.css". Wir haben jetzt eine leere HTML-Seite bei der Vorschau in unserem Browser.

Schritt 2: Bearbeiten Sie das Body-Tag für Grundfarben, Schriftarten, …

Wir lassen die HTML-Datei unverändert und bearbeiten nur die CSS-Datei. Fügen Sie Ihrer CSS-Datei den folgenden Code hinzu:body { background: #444444; Schriftfamilie: Verdana, Arial, Sans-Serif; Farbe: #444444; Schriftgröße: 12px; margin: 0px;}Mit diesem Codestück definieren wir alle Eigenschaften des body-Tags. Da sich der gesamte Inhalt im body-Tag befindet, wirken sich diese Einstellungen auf die gesamte Seite aus. Der Hintergrund und die Schriftfarbe (color) wurden auf dunkelgrau eingestellt. Die Schriftfamilie (font-family) wurde auf verdana gesetzt. Verfügt der zum Aufrufen unserer Website verwendete Computer nicht über die Schriftart „verdana“, wird unsere Website in der Schriftart „arial“angezeigt. Sie können der Liste weitere Schriftarten hinzufügen. Die "sans-serif" ist der generische Typ, der verwendet wird, wenn keine von Ihnen bereitgestellte Schriftart verfügbar war. Die Schriftgröße (font-size) wurde auf 12 Pixel eingestellt. Dies ist ein absoluter Wert. Wenn Sie andere Schriftgrößen (wie Überschriften, Absätze, Menüpunkte, …) bearbeiten möchten, können Sie anstelle von „px“die relative Einheit „em“verwenden. Auf diese Weise müssen Sie, wenn Sie die Größe Ihrer Website ändern möchten, nur die Schriftgröße des Textkörpers ändern. Der Rand wurde für alle vier Seiten des Body-Tags auf 0px gesetzt. Dies geschieht, um sicherzustellen, dass die Site oben im Fenster bleibt.

Schritt 3: Hinzufügen eines Containers mit Header und Inhalt

Wir fügen nun den Container hinzu. Dies ist einfach ein zentriertes Div, das unsere gesamte Website enthält. In diesem Container fügen wir zwei weitere Divs hinzu; ein Inhalts-Div und ein Header-Div. Unsere HTML-Datei sieht nun so aus: test Content Header Wir fügen unserer CSS-Datei folgenden Code hinzu:div#container { width: 800px; Rand: 0px automatisch; Hintergrund: #FFFFFF; padding: 0px;}div#content { width: 800px; Polsterung-Oberseite: 100px; Hintergrund: gelb;}div#header { width: 800px; Höhe: 100px; Hintergrund: blau; Position: absolut; top: 0px;}.clearfix:after {content:"."; Bildschirmsperre; Höhe: 0; Lösche beide; visible:hidden;}.clearfix {display:inline-block;}/* Aus IE Mac ausblenden \*/.clearfix {display:block;}div#container bedeutet, dass wir ein div-Tag mit der ID "container" haben. Wir fügen einige Farben und ein "margin: 0px auto;" hinzu. um sicherzustellen, dass unser Container in der Seite zentriert ist. Wir müssen dem Inhalt ein Padding-top und dem Header einen absoluten Wert mit einem "top: 0px" geben, um sicherzustellen, dass der Header über dem anderen Inhalt positioniert ist die hässlichen Farben. Es ist nur einfacher, die Farben zu lesen und die verschiedenen Divs zu sehen. Wir benötigen diesen seltsamen Clearfix-Code, um sicherzustellen, dass unsere Navigations- und Inhalts-Divs (im nächsten Schritt hinzugefügt) nicht aus dem umgebenden Div herausfallen.

Schritt 4: Erstellen Sie zwei Divs im Inhalts-Div für die Navigation und den eigentlichen Inhalt

Wir fügen nun zwei weitere Divs im Inhalts-Div hinzu. Eine für die Navigation und eine für den eigentlichen Inhalt. In between the content-tag; Sie fügen den neuen Code hinzu:

Navigation Hauptinhalt Wir werden CSS-Code hinzufügen, um die Navigation und den Hauptinhalt anzuzeigen divs;div#nav { width: 200px; Schwimmer: links; Hintergrund: orange;}div#maincontent { width: 600px; schweben rechts; background: pink;}Beachte die Tatsache, dass diese beiden Divs schweben. Wenn wir im vorherigen Schritt nicht den zusätzlichen Clearfix-Code eingefügt hätten, würden die Divs außerhalb des umgebenden Divs schweben. Mit der clearfix-Methode sorgen wir dafür, dass das nicht passiert.

Schritt 5: Fügen Sie einige zusätzliche Divs für die Struktur in der Navigation hinzu

Wir fügen nun einige zusätzliche Divs zu beiden "nav"-Divs hinzu, um eine Art Struktur in unserer Webseite zu erstellen. Ändern Sie den folgenden Code:

• Foo
• Bar

Wir fügen jetzt ein Stück Code hinzu, um zu definieren, wie das div "navblock" angezeigt werden muss. Beachten Sie, dass der navblock eine Klasse hat, keine ID. Der Grund dafür ist einfach; divs mit einer ID werden nur einmal angezeigt (der Navigationsblock, Header, Footer, …). Divs mit Klassen können mehr als einmal angezeigt werden. Hier verwenden wir eine Klasse. Nur für den Fall, dass wir später einen weiteren Navigationsblock hinzufügen möchten.div.navblock { width: 180px; Rand: 5px automatisch; border: 1px solid red;}Wenn wir einen weiteren Navigationsblock hinzufügen möchten, müssen Sie nur eine neue Struktur hinzufügen. Ihr Code sieht jetzt so aus;

• Foo
• Bar
• Boo
• Weit

Schritt 6: Fügen Sie einige zusätzliche Divs für die Struktur im Hauptinhalt hinzu

Dasselbe machen wir jetzt für das maincontent-Div. Der Code sieht jetzt so aus:

Lorem ipsum dolor sit amet, …

Auch hier fügen wir unserer CSS-Datei ein Stück Code hinzu, um zu bestimmen, wie das div angezeigt werden soll:div.contentblock { width: 580px; Rand: 5px automatisch; border: 1px solid white;}Wir können jetzt einen weiteren Inhaltsblock hinzufügen, indem wir ein weiteres " … " in das maincontent-Div wie folgt einfügen;

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum, …

Schritt 7: Machen Sie die Site ein wenig weniger hässlich

Jetzt der lustige Teil; Farben. Nun, da wir die Haupt-Div-Struktur haben, können wir die Farben etwas weniger chaotisch/hässlich/…spielen. Spielen Sie einfach mit den Farben in der CSS-Datei herum. Hier ist die vollständige HTML-Datei der im Bild angezeigten Webseite: Prüfung

• Foo
• Bar
• Boo
• Weit

Lorem ipsum dolor sit amet, …

Nunc cursus, justo eget elementum dictum, …

Header Und das ist die komplette CSS-Datei:body { background: #444444; Schriftfamilie: Verdana, Arial, Sans-Serif; Farbe: #444444; Schriftgröße: 12px; margin: 0px;}div#container { width: 800px; Rand: 0px automatisch; Hintergrund: #FFFFFF; padding: 0px;}div#content { width: 800px; Polsterung-Oberseite: 100px; Hintergrund: #FFFFFF;}div#header { width: 800px; Höhe: 100px; Hintergrund: #888888; Position: absolut; oben: 0px;}div#nav { Breite: 200px; Schwimmer: links; Hintergrund: #FFFFFF;}div#maincontent { width: 600px; schweben rechts; Hintergrund: #DDDDDD;}div.navblock { Breite: 180px; Rand: 5px automatisch; Rahmen: 1px solid #DDDDDD;}div.contentblock { Breite: 580px; Rand: 5px automatisch; Rahmen: 1px solid #FFFFFF;}.clearfix:after {content:"."; Bildschirmsperre; Höhe: 0; Lösche beide; visible:hidden;}.clearfix {display:inline-block;}/* Vor IE Mac ausblenden \*/.clearfix {display:block;}So, jetzt hast du die Grundlagen. Natürlich gibt es noch viel zu bearbeiten, wie Farben, Schriftgrößen, einen besser aussehenden Navigationsblock, … Aber bei diesem Instructables geht es nur um die div-Struktur. Wenn Sie andere verwandte instructables sehen möchten, können Sie immer fragen. Ich werde sehen, ob ich die Zeit finde.