Planen einer Website

Zuerst müssen Sie eine Website planen. In diesem Tutorial wird die folgende Abbildung als Beispiel für die Erstellung einer Website verwendet.

Abbildung 1

ist unten dargestellt:

Abbildung 2

besteht im Wesentlichen aus fünf Teilen:
1. Hauptnavigationsleiste mit Schaltflächeneffekten.
Breite: 760 Pixel Höhe: 50 Pixel
2. Kopfzeile Das Website-Kopfzeilensymbol enthält das Logo und den Namen der Website.
Breite: 760px Höhe: 150px
3. Inhalt Der Hauptinhalt der Website.
Breite: 480 Pixel Höhe: Ändert sich je nach Inhalt
4. Rand der Seitenleiste, einige zusätzliche Informationen.
Breite: 280px Höhe: Ändert sich je nach
5. Die untere Spalte der Footer-Website enthält Urheberrechtsinformationen usw.
Breite: 760px Höhe: 66px

1. Erstellen Sie HTML-Vorlagen, Dateiverzeichnisse usw.

Der Code lautet wie folgt:
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">















Speichern Sie es als index.html und erstellen Sie die Ordner „css“ und „images“. Die Website-Struktur ist wie folgt:

Abbildung 3

2. Erstellen Sie eine große Box für die Website :

Erstellen Sie eine 760 Pixel breite Box, die alle Elemente der Website enthält.
Schreiben Sie

Abbildung 4

Um nun das Feld zu zentrieren, schreiben Sie margin: auto;, sodass die CSS-Datei wie folgt lautet:
#page-container {
Breite: 760px;
Rand: automatisch;
Hintergrund: rot;
}
Jetzt können Sie sehen, dass zwischen der Oberseite der Box und dem Browser eine 8 Pixel breite Lücke besteht. Dies liegt an den Standardabständen und -rändern des Browsers. Um diese Lücke zu schließen, müssen Sie in die CSS-Datei schreiben:
html, Körper {
Rand: 0;
Polsterung: 0;
}

Teilen Sie die Website in fünf Abschnitte auf.

1. Fügen Sie die fünf in „Schritt 1“ genannten Teile in Kästchen ein und schreiben Sie in die HTML-Datei:

verhält sich wie folgt:

Abbildung 5

2. Um die fünf Teile zu unterscheiden, markieren wir diese fünf Teile mit unterschiedlichen Hintergrundfarben und schreiben in die CSS-Datei:
#main-nav {
Hintergrund: rot;
Höhe: 50px;
}
#header {
Hintergrund: blau;
Höhe: 150px;
}
#sidebar-a {
Hintergrund: dunkelgrün;
}
#Inhalt {
Hintergrund: grün;
}
#footer {
Hintergrund: orange;
Höhe: 66px;
}

Die Leistung ist wie folgt:

Abbildung 6:

Webseitenlayout und Div-Floating usw.

1. Floating: Lassen Sie zunächst den Rand rechts vom Hauptinhalt schweben. Verwenden Sie CSS, um das Floating zu steuern.

#sidebar-a {
schweben: rechts;
Breite: 280px;
Hintergrund: dunkelgrün;
}

Die Leistung ist wie folgt:

Abbildung 7

2. Schreiben Sie Text in das Hauptinhaltsfeld. Schreiben Sie in die HTML-Datei:

Abbildung 8

Sie können jedoch sehen, dass das Hauptinhaltsfeld die gesamte Breite des Seitencontainers einnimmt und wir den rechten Rand von #content auf 280 Pixel festlegen müssen. damit es nicht mit der Grenze kollidiert.

Der CSS-Code lautet wie folgt:
#Inhalt {
Rand rechts: 280px;
Hintergrund: grün;
}

Schreiben Sie gleichzeitig etwas Text in den Rahmen. Schreiben Sie in die HTML-Datei:

verhält sich wie folgt:

Abbildung 9

Das ist nicht das, was wir wollen. Der untere Rahmen der Website ist unter den Rand gegangen. Dies liegt daran, dass wir den Rand nach rechts schweben lassen. Da er schwebend ist, kann davon ausgegangen werden, dass er sich auf einer anderen Ebene über der gesamten Box befindet. Daher sind das untere Feld und das Inhaltsfeld ausgerichtet.

Also schreiben wir in CSS:
#footer {
klar: beides;
Hintergrund: orange;
Höhe: 66px;
}

Die Leistung ist wie folgt:

Abbildung 10

Das Layout und die Darstellung zusätzlicher Strukturen außerhalb des Hauptrahmens der Webseite. Die Darstellung (Layout) zusätzlicher Strukturen außerhalb des Hauptrahmens der Webseite, einschließlich der folgenden:

1. Hauptnavigationsleiste;
2. Titel, einschließlich Website-Name und Inhaltstitel;
3. Inhalt;
4. Fußzeileninformationen, einschließlich Urheberrecht, Zertifizierung und Unternavigationsleiste (optional).
Wenn wir diese Strukturen hinzufügen, müssen wir unter dem „body“-Tag (TAG) der CSS-Datei Folgendes hinzufügen, um das ursprüngliche Framework nicht zu zerstören:
.versteckt {
Anzeige: keine;
}
„.hidden“ ist die von uns hinzugefügte Klasse. Diese Klasse kann dafür sorgen, dass jedes Element auf der Seite, das zur ausgeblendeten Klasse gehört, nicht angezeigt wird. Diese werden später verwendet, also vergessen Sie es vorerst.

Jetzt fügen wir die Überschrift hinzu:

Gehen Sie zunächst zurück zum HTML-Code.

bis

sind unsere häufig verwendeten HTML-Überschriftencodes. Beispielsweise verwenden wir im Allgemeinen

Website-Name

Website-Untertitel

Inhaltshaupttitel

>-Tags verursacht. Um diese Leerräume zuerst zu entfernen, müssen Sie Folgendes hinzufügen.
h1 {
Rand: 0;
Polsterung: 0;
}

Als nächstes kommt die Navigationsleiste :

Der CSS-Code, der die Leistung der Navigationsleiste steuert, ist relativ kompliziert. Wir werden ihn im neunten oder zehnten Schritt ausführlich vorstellen. Fügen Sie nun den Navigationscode zur HTML-Datei hinzu:

• Über


• Dienste


• Portfolio


• Kontaktieren Sie uns

(Hinweis: Das ursprüngliche Tutorial verwendete dl und dt, jorux verwendet hier die häufiger verwendeten ul- und li-Tags)
Derzeit ist die Leistung der Navigationsleiste relativ schlecht, aber ihre besondere Leistung wird in zukünftigen Tutorials vorgestellt. Daher muss die Navigationsleiste vorübergehend ausgeblendet werden. Deshalb habe ich Folgendes hinzugefügt:

Über

Dienste

Portfolio

Kontaktieren Sie uns