Behebung von Website-Anzeige-Problemen

Einführung

In diesem Projekt lernst du, wie du die Anzeige-Probleme einer Website beheben und sicherstellst, dass sie richtig formatiert und strukturiert ist. Ziel ist es, eine unfertige Website zu übernehmen und sie so aussehen zu lassen, wie das gewünschte fertige Produkt.

👀 Vorschau

🎯 Aufgaben

In diesem Projekt wirst du lernen:

• Wie du Probleme in der HTML-Datei identifizierst und behebst
• Wie du die CSS-Datei aktualisierst, um die richtigen Stile anzuwenden
• Wie du sicherstellst, dass die Website mit der gewünschten Breite und Struktur angezeigt wird

🏆 Errungenschaften

Nach Abschluss dieses Projekts wirst du in der Lage sein:

• HTML- und CSS-Code zu analysieren und zu debuggen
• Techniken zum richtigen Strukturieren und Gestalten von Webseiten anzuwenden
• Die Wichtigkeit der Aufmerksamkeit auf Details in der Webentwicklung zu demonstrieren

Projektstruktur einrichten

In diesem Schritt wirst du das Projekt einrichten und die Dateien im Editor öffnen.

1. Öffne den Editor und du solltest folgende Dateien sehen: index.html, style.css und die Bilddateien html5logo.png, css3-logo.png, nav-btn.png und evolution.png.
2. Klicke auf die Schaltfläche Go Live in der unteren rechten Ecke von WebIDE, um das Projekt auszuführen.
3. Öffne "Web 8080" oben in der VM und aktualisiere es manuell, und du wirst die Seite sehen.

Website-Anzeige beheben

In diesem Schritt wirst du die HTML-Struktur der Seite betrachten und von dort den Fehler finden, um die ungeordnete Website-Anzeige zu beheben.

1. Öffne die Datei index.html im Code-Editor.
2. Prüfe die Datei index.html und bemerke, dass das <link>-Tag für die CSS-Datei die falsche Dateiname hat. Aktualisiere das href-Attribut, um auf die richtige Datei style.css zu verweisen.

<link rel="stylesheet" href="style.css" />

3. Die HTML-Datei enthält die folgenden Hauptabschnitte:

   • <header>: Enthält den Seitentitel und das Navigationsmenü.
   • <div class="content">: Enthält den Hauptinhalt der Seite, einschließlich eines einspaltigen Abschnitts, eines dreispaltigen Abschnitts und eines zweispaltigen Abschnitts.
   • <footer>: Enthält den Seitenfuß mit Links.

4. Speichere die Änderungen an der Datei index.html.

5. Aktualisiere die Seite im Browser nach der Fehlerbehebung und du wirst das folgende Ergebnis sehen:

Glückwunsch! Du hast die Website-Anzeige erfolgreich behoben, indem du die HTML- und CSS-Dateien aktualisiert hast.

Zusammenfassung

Glückwunsch! Du hast dieses Projekt abgeschlossen. Du kannst in LabEx weitere Übungen absolvieren, um deine Fähigkeiten zu verbessern.