am 04.01.2008 um 21:27 Uhr
Grafiken Flash HTML & CSS PHP & MySQL Javascript Fertige Skripte Anderes Statistik
|
|
Anzeigen
|
7x bewertet
Im Folgenden möchte ich dazu kommen, wie man ein sogenanntes Div-Layout selbst "herstellt".
Allgemeines zum Aufbau:
Eigentlich gibt es keine allgemeingültige Formel für das Aussehen eines Divs, zumindest was Hintergrund
und die jeweilige Verwendung von CSS und Bildern betrifft. Man kann sich auf CSS oder vor allem auf Bilder
stützen, das bleibt jedem selbst überlassen. Feststehend bleibt der Code für ein Div, der dem Layout den
Namen verleiht. Es sind bestimmte Abgrenzungen auf der Webseite, die Text etc enthalten und die nicht wie beim
Iframe eine separate Seite öffnen.
Einfachshalber führe ich erstmal ein Beispiel des "typischen" Div Layouts auf, was den Aufbau betrifft:
klick
D.h. Content (Inhalt), Navigation und ein Bild mit einem Hintergrund, der sich automatisch verlängert. Theoretisch
ist es jedoch auch möglich, den Hintergrund der Divs mit CSS zu erzeugen, den Hintergrund zu fixieren etc, aber darauf
möchte ich hier und jetzt nicht eingehen.
Coden:
1. Zunächst benötigt man natürlich den allgemeinen Aufbau einer html-Seite, der sich hier erläutert findet.
2. Danach ist es für diesen Weg, den ich erläutern möchte, nötig, eine separate style.css zu erstellen (einfach im Editor
mit .css abspeichern), die den Aufbau, Farben, Effekte etc enthält. Diese wird zudem im Head-Bereich verlinkt:
3. Werden innerhalb der CSS-Datei neben Textfarbe, Font (Schriftart) und ggf. Scrollbalken (die ich nicht weiter
kommentieren möchte, Informationen dazu finden sich hier) auch die Informationen für die Positionierung,
sowie die Hintergründe der einzelnen Divs (eins für Content, eins für das Layout, eins für die Navigation)
(ab hier beginnt der Code für style.css)
Hier werden zunächst die in den Kommentaren enthaltende Sachen definiert. Natürlich ist es auch möglich, statt
background-image so etwas wie background-color zu nutzen und dann den Hexadezimalcode der Farbe anzugeben
(z.B. #FFFFFF für weiß).
Bei einem Bild sollte darauf geachtet werden, dass es das Layout-Bild sinnvoll verlängert (im Beispiel dies hier
4. Danach kommen wir zum ersten Div, das das Layout-Bild festlegt:
Das obere wird benötigt, wenn man ein Bild als Hintergrund nutzen möchte. Betrachtet ist es dies hier
5. Anschließend legen wir das zweite Div fest, das sich um den Inhalt/Content kümmert (im Beispiel steht "About Layout" darüber)
Wer möchte, kann natürlich auch Schriftart oder Hintergrundfarbe hier festlegen, ich möchte mich hier jedoch auf
das nötigste beschränken
6. Kommen wir zur Festlegung der Navigation, die sich eigentlich vom #content nur in ihren Maßangaben unterscheidet:
Die Erklärung ist dieselbe wie beim #content, daher spare ich mir die Seitenkommentare. Wie man jedoch sieht sind die
Abstände in Pixeln (px) angegeben. Den richtigen Abstand kann man entweder ausmessen oder man probiert herum, bis es
passt.
7. Definieren wir eine Überschrift, um sie passend zum Layout zu gestalten:
Ich habe an dieser Stelle als Bezeichnung für die Überschrift h2 benutzt. Andere nutzen auch "p class" oder h1 etc.
Das sollte einem selbst überlassen werden.
Die Einbindung später in die html-Seite erfolgt folgendermaßen:
8. Definieren wir allgemeine Links:
Wie erkennbar ist, erfolgt beim Drüberfahren über den Link ein Farbwechsel. Wer kompliziertere Effekte wünscht
oder auch eine spezifizierte Navigation (mit class), der sollte sich im Internet, bzw. bei den CSS-Anwendungen informieren.
Das hier sind lediglich die Grundzüge solch einen Layouts. Wer möchte, kann die Codes jetzt zusammengehörig in der
style.css abspeichern.
9. Daher kommen wir wieder zur html-Seite, in der der bereits oben erwähnte html-Aufbau vorhanden ist. Der wird
nun folgendermaßen ergänzt:
(Der Code für index.html)
Bei INHALT und NAVIGATION kommt dann euer Text hin bzw. eure Links. Wenn alles richtig gemacht wurde, ist das
Layout nun fertig und somit einsatzbereit.
Fragen, Lob, Beschwerden, Anmerkungen: Kommentar oder PN
Allgemeines zum Aufbau:
Eigentlich gibt es keine allgemeingültige Formel für das Aussehen eines Divs, zumindest was Hintergrund
und die jeweilige Verwendung von CSS und Bildern betrifft. Man kann sich auf CSS oder vor allem auf Bilder
stützen, das bleibt jedem selbst überlassen. Feststehend bleibt der Code für ein Div, der dem Layout den
Namen verleiht. Es sind bestimmte Abgrenzungen auf der Webseite, die Text etc enthalten und die nicht wie beim
Iframe eine separate Seite öffnen.
Einfachshalber führe ich erstmal ein Beispiel des "typischen" Div Layouts auf, was den Aufbau betrifft:
klick
D.h. Content (Inhalt), Navigation und ein Bild mit einem Hintergrund, der sich automatisch verlängert. Theoretisch
ist es jedoch auch möglich, den Hintergrund der Divs mit CSS zu erzeugen, den Hintergrund zu fixieren etc, aber darauf
möchte ich hier und jetzt nicht eingehen.
Coden:
1. Zunächst benötigt man natürlich den allgemeinen Aufbau einer html-Seite, der sich hier erläutert findet.
2. Danach ist es für diesen Weg, den ich erläutern möchte, nötig, eine separate style.css zu erstellen (einfach im Editor
mit .css abspeichern), die den Aufbau, Farben, Effekte etc enthält. Diese wird zudem im Head-Bereich verlinkt:
<html>
<head>
<title>Beispiel-Layout</title>
<!---CCS STYLESHEET-->
<link href="style.css" rel="stylesheet">
</head>
<body>
</body>
</html>
3. Werden innerhalb der CSS-Datei neben Textfarbe, Font (Schriftart) und ggf. Scrollbalken (die ich nicht weiter
kommentieren möchte, Informationen dazu finden sich hier) auch die Informationen für die Positionierung,
sowie die Hintergründe der einzelnen Divs (eins für Content, eins für das Layout, eins für die Navigation)
(ab hier beginnt der Code für style.css)
body {
overflow-x:hidden; /* Verhindert seitliches Scrollen */
background-image:url('bg.jpg'); /* Legt das Hintergrund-Bild fest */
font-family:Sylfaen; /* legt die allgemeine Font im body-Bereich fest */
font-size: 10pt; /* Größe der Schrift */ }
Hier werden zunächst die in den Kommentaren enthaltende Sachen definiert. Natürlich ist es auch möglich, statt
background-image so etwas wie background-color zu nutzen und dann den Hexadezimalcode der Farbe anzugeben
(z.B. #FFFFFF für weiß).
Bei einem Bild sollte darauf geachtet werden, dass es das Layout-Bild sinnvoll verlängert (im Beispiel dies hier
4. Danach kommen wir zum ersten Div, das das Layout-Bild festlegt:
#layout {
margin-top: 0px; /* Abstand nach oben */
margin-left: 0px; /* Abstand nach links */
width: 1280px; /* Breite des Layout-Bildes */
height: 600px; /* Höhes des Layout-Bildes */
position: absolute;
background:url(layout.jpg) no-repeat; */ Link zum Bild und Bild soll einfach angezeigt werden */ }
Das obere wird benötigt, wenn man ein Bild als Hintergrund nutzen möchte. Betrachtet ist es dies hier
5. Anschließend legen wir das zweite Div fest, das sich um den Inhalt/Content kümmert (im Beispiel steht "About Layout" darüber)
#content {
width: 531px; /* Breite des Divs */
margin-top: 300px; /* Abstand nach oben des Divs */
margin-left: 339px; /* Abstand nach links des Divs */
position: absolute;
}
Wer möchte, kann natürlich auch Schriftart oder Hintergrundfarbe hier festlegen, ich möchte mich hier jedoch auf
das nötigste beschränken
6. Kommen wir zur Festlegung der Navigation, die sich eigentlich vom #content nur in ihren Maßangaben unterscheidet:
#navigation {
width: 149px;
margin-top: 300px;
margin-left: 173px;
position: absolute;
}
Die Erklärung ist dieselbe wie beim #content, daher spare ich mir die Seitenkommentare. Wie man jedoch sieht sind die
Abstände in Pixeln (px) angegeben. Den richtigen Abstand kann man entweder ausmessen oder man probiert herum, bis es
passt.
7. Definieren wir eine Überschrift, um sie passend zum Layout zu gestalten:
h2 {
font-size: 12pt; /* Schriftgröße */
font-color: #e7cba4; /* Schriftfarbe */
line-height: 20px; /* Höhe der Überschrift */
text-align: center; /* Ausrichtung in der Mitte */
background-color: #080b3e; /* Hintergrundfarbe */
font-family: Sylfaen, serif; /* Schriftart */
letter-spacing: 5px; /* Abstand zwischen den Buchstaben */
text-transform: uppercase; /* Alle Buchstaben sind groß */
}
Ich habe an dieser Stelle als Bezeichnung für die Überschrift h2 benutzt. Andere nutzen auch "p class" oder h1 etc.
Das sollte einem selbst überlassen werden.
Die Einbindung später in die html-Seite erfolgt folgendermaßen:
<h2>überschrift</h2>
8. Definieren wir allgemeine Links:
a:link {color: #734f41; text-decoration: none;} /* Link allgemein */
a:visited {color: #734f41; text-decoration: none;} /* bereits besuchter Link */
a:hover {color: #FFFFFF; text-decoration: none;} /* Bei Berührung des Links */
Wie erkennbar ist, erfolgt beim Drüberfahren über den Link ein Farbwechsel. Wer kompliziertere Effekte wünscht
oder auch eine spezifizierte Navigation (mit class), der sollte sich im Internet, bzw. bei den CSS-Anwendungen informieren.
Das hier sind lediglich die Grundzüge solch einen Layouts. Wer möchte, kann die Codes jetzt zusammengehörig in der
style.css abspeichern.
9. Daher kommen wir wieder zur html-Seite, in der der bereits oben erwähnte html-Aufbau vorhanden ist. Der wird
nun folgendermaßen ergänzt:
(Der Code für index.html)
<html>
<head>
<title>Beispiel-Layout</title>
<!---CCS STYLESHEET-->
<link href="style.css" rel="stylesheet">
</head>
<body>
<!---LAYOUT-->
<div id="layout">
<!---CONTENT-->
<div id="content">
INHALT
</div>
<!---NAVIGATION-->
<div id="navigation">
NAVIGATION
</div>
</body></div>
</html>
Bei INHALT und NAVIGATION kommt dann euer Text hin bzw. eure Links. Wenn alles richtig gemacht wurde, ist das
Layout nun fertig und somit einsatzbereit.
Fragen, Lob, Beschwerden, Anmerkungen: Kommentar oder PN
8 Kommentare
dr link zur code geht bei mir nicht
Fischstäbchen
wegen der Serverumstellung ;) Kannst du auch hier suchen unter CSS
am 06.01.2008 um 02:45 Uhr
man kann den link nicht öffnen wo erklärt wird wie man eine html-seite erstellt
am 26.03.2008 um 15:41 Uhr
und dann hab ich nochmal ne frage *sorry* was is ein separate style.css und wie macht man das??
am 26.03.2008 um 15:45 Uhr
Fischstäbchen
Das ist eine separate Datei, die in die html-Datei includet wird. Man erstellt die Datei im Prinzip genauso wie eine html-Datei, man gibt als Endung lediglich .css ein.Die Linkfehler sind auf den Serverwechsel von Giatu zurückzuführen...
am 06.04.2008 um 05:59 Uhr
Das ist jetzt glaub ich das dritte Mal, dass ich es mit dieser Anleitung versuche, ein Div-Layout zu machen und endlich hat es auch geklappt!!
Ich dank dir fü das Tut!
Das mit den Links sollte aber schon behoben werden, da sie wahrscheinlich sehr hilfreich sein würden!
Ich dank dir fü das Tut!
Das mit den Links sollte aber schon behoben werden, da sie wahrscheinlich sehr hilfreich sein würden!
am 18.01.2009 um 22:27 Uhr
Roxi
Haiii und zwar hab ich ein dringendes problem.Zum CSS unso.
ich hab jetzt in meinem HTML-Index
<link href="style.css" rel="stylesheet">
eingebunden und auch den stylsheet als style.css abgespeichert und alles eingefügt .aber leider geht nichts !.Da ist nur weißes.
würde mich über eine antwort per PN freuen .
Danke im vorraus
am 06.02.2009 um 21:03 Uhr
Ela
Toll. (;