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:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
" http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<html>
<Kopf>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8" />
<title>Firmenname – Seitenname</title>
<meta http-equiv="Content-Language" content="en-us" />
<meta http-equiv="imagetoolbar" content="no" />
<meta name="MSSmartTagsPreventParsing" content="true" />
<meta name="description" content="Description" />
<meta name="keywords" content="Keywords" />
<meta name="author" content="Enlighten Designs" />
<style type="text/css" media="all">@import "css/master.css";</style>
</head>
<Körper>
</body>
</html>
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 <div id="page-container"> zwischen <body> und </body> in die HTML-Datei
Hallo Welt.
</div>
Erstellen Sie eine CSS-Datei, nennen Sie sie master.css und speichern Sie sie im Ordner /css/. Schreiben:
#page-container {
Breite: 760px;
Hintergrund: rot;
}
Die Breite der Box mit der ID „Seitencontainer“ beträgt 760 Pixel und der Hintergrund ist rot. Die Leistung ist wie folgt.
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:
<div id="page-container">
<div id="main-nav">Hauptnavigation</div>
<div id="header">Kopfzeile</div>
<div id="sidebar-a">Seitenleiste A</div>
<div id="content">Inhalt</div>
<div id="footer">Fußzeile</div>
</div>
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:
<div id="content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Donec in sapien in nibh rutrum gravida
Euismod vulputate. Nullam rhoncus mauris ac metus.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
Purus. Suspendisse mattis nunc vestibulum ligula.
</div>
Die Leistung ist wie folgt:
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:
<div id="sidebar-a">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Praesent sapien purus, ultrices a, varius ac, suscipit ut, enim.
Donec in sapien in nibh rutrum gravida
Euismod vulputate. Nullam rhoncus mauris ac metus.
Duis scelerisque justo a pede. Nam augue lorem, semper at, porta eget, placerat eget,
Purus. Suspendisse mattis nunc vestibulum ligula.
</div>
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. <h1> bis <h6> sind unsere häufig verwendeten HTML-Überschriftencodes. Beispielsweise verwenden wir im Allgemeinen <h1>Website-Name</h1>, <h2>Website-Untertitel</h2>, <h3>Inhaltshaupttitel</h3> usw. Wir fügen der Header-Ebene (Div) der HTML-Datei Folgendes hinzu:
<div id="header">
<h1>Designs erleuchten</h1>
</div>
Aktualisieren Sie die Seite und Sie können den großen Titel und den Leerraum um den Titel sehen. Dies wird durch die Standardgröße und den Standardrand des <h1>>-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:
<div id="main-nav">
<ul>
<li id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Über</a></li>
<li id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Dienste</a></li>
<li id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portfolio</a></li>
<li id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Kontaktieren Sie uns</a></li>
</ul>
</div>
(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:
<div id="main-nav">
<dl class="hidden">
<dt id="about"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Über</a></dt>
<dt id="services"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Dienste</a></dt>
<dt id="portfolio"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Portfolio</a></dt>
<dt id="contact"> <a href=" http://css.jorux.com/wp-admin/post.php #" > Kontaktieren Sie uns</a></dt>
</dl>
</div>