![[Tutorial Nr. 2] Webdesign mit DIV coden](https://www.elitepvpers.com/forum/iconimages/coding-tutorials/tutorial-nr-2-webdesign-mit-div-coden_ltr.gif){kind=small}
und spezifisch darüber, wie man ein Webdesign (Vorlage psd) mit DIV-Containern anpasst.1. Das Design
Hch habe mir ein ganz einfaches, schlichtes Design ausgesucht. Das Grundlegende habe ich ja schon in meinem vorigen Tutorial erklärt, da muss ich ja jetzt nicht mehr darauf eingehen.
Dieses Design habe ich nun als PSD vorliegen. Zuerst sollte man sich grundlegend Gedanken über den Aufbau machen. Der Trick bei einer "guten" Anpassung liegt dabei, so wenige Grafiken wie möglich zu benutzen und diese schön klein zu halten. Der Rest sollte dann alles per CSS machbar sein!
Header:
- 100% Breite
- Farbverlauf von oben nach unten
- keine sonst. Grafiken, außer Schiftzug
Diese kleine Zusammenfassung sagt uns, dass wir zwei Grafiken benötigen werden, nämlich den Farbverlauf des Headers und den Schriftzug. Den Farbverlauf slicen wir uns als 10px breites PNG-Format heraus. Später können wir bei der Anpassung diese Grafik repeaten lassen, also ganz oft nebeneinander setzen (wiederholen). Dadurch entsteht der Anschein einer großen komplexen Grafik.
Danach slicen wir den Schriftzug. Diesen so knapp wie möglich bemessen, also wenig Spielraum außen rum lassen. Achtet darauf, dass solche Grafiken, die überlagernd sind, einen transparenten Hintergrund besitzen.
Navigation:
- kleiner Header über dem Menü
- Navigation als Aufzählung
- Menüpunkte haben einen Hintergrund
Auch hier benötigen wir wieder "nur" zwei Grafiken. Einmal den kleinen Header mit dem Schriftzug "Navigation" und den Hintergrund der Menüpunkte. Wer ganz genau hinschaut, entdeckt unter den Menüpunkten noch einen kleinen "Footer", den wir aber als Grafik getrost vernachlässigen können, da dieser einfach nur weiß ist (kein Farbverlauf etc.).
Den Hintergrund können wir wieder als 10px breites PNG abspeichern.
Inhaltsbereich:
- kurzer Verlauf oben
- kein Header, kein Footer
- weißer, einfarbiger und schlichter Hintergrund
Man bemerkt schon an der Aufzählung, der Inhaltsbereich hat es in sich
Alles was wir hier an Grafiken benötigen, ist der kleine Verlauf oben im Bereich. Den speichern wir uns wieder als 10px breites PNG ab.Hintergrund:
- kein Farbverlauf
- Farbcode #E4E4BE
- nicht webkonform
Da wir beim Hintergrund keinen Farbverlauf oder sonstige grafische Rafinessen haben, brauchen wir also auch nix slice. Dass der Farbcode nicht unbedingt webkonform ist, kümmert uns erst einmal nicht. Falls jemand meckert, nehmen wir einfach einen anderen
Wir sind nun mit unseren Grafiken fertig. Insgesamt haben wir fünf Grafiken, drei davon sind nicht breiter als 10px. Zugegeben, dass Design ist nun auch nicht sehr anspruchsvoll, aber darin liegt eben der Sinn.
So viele Grafiken wie nötig, so wenig Grafiken wie möglich!
2. Die Anpassung
nun gilt es, alle Grafiken so zu verbauen, dass im Gesamtbild (also in der Browseransicht) das Design wieder komplett erscheint. Insgesamt haben wir vier Bereiche
1.Body
2.Header
3.Navigation
4.Inhalt
Body:
Für unser gesamtes Dokument müssen wir zuerst ein paar Sachen regeln. Dazu können wir in dem Stylesheet allgemein body ansprechen (gibt ja eh nur einen
)- margin: 0px;
- padding: 0px;
- background: #E4E4BE;
- color: #000000;
Wir setzen erst einmal den Abstand zum Außenrand des Browser auf 0px. Schließlich soll unser Header oben und seitlich direkt angrenzen. Danach definieren wir die Hintergrundfarbe und optional habe ich noch die Schriftfarbe innerhalb des Dokumentes auf schwarz gesetzt.
Header:
Wir legen uns einen Container mit folgenden Werten an:
- width: 100%;
- height: 124px;
- background: url(header.png) repeat-x;
- margin-bottom: 30px;
Ich denke, wer mein voriges Tutorial gelesen hat, wird das verstehen Mit repeat-x lassen wir unseren Hintergrund gen x wiederholen, setzen also die Grafik immer wieder nebeneinander, unendlich oft.
Exkurs: repeat
Es gibt drei Formen, eine Grafik zu repeaten
1.no-repeat (die Grafik wird nur einmal dargestellt und nicht wiederholt)
2.repeat-x (die Grafik wird gen x wiederholt)
3.repeat-y (die Grafik wird gen y wiederholt)
X und Y stellen die Richtung auf einem kartesischen Koordinatensystem dar.
Y die Richtung von oben nach unten.
X die Richtung von links nach rechts.
Wir haben nun einen 124px hohen, unendlich breiten (100% setzt Elemente auf die Maximalwerte des Browser) Balken. Da muss noch der Schriftzug hinein. Dieser ist mit einem oberen Abstand von ca. 30px und einem seitlichen Abstand links von ca. 140px positioniert.
Zwischen den DIV-Container des Header fügen wir nun per <img>-Tag die Schriftgrafik ein und geben diesem folgende Werte mit:
- margin-left: 140px;
- margin-top: 30px;
- border: none;
Der letzte Punkt ist optional, damit wird nur verhindert, dass aus irgendwelchen Gründen so ein hässlicher blauer Rahmen um die Grafik entsteht (zum Beispiel bei einem Hyperlink).
Navigation:
Die Navigation hat einen seitlichen Abstand links von ca. 30px und rechts einen Abstand zum nächsten Container von ca. 15px. Als Hintergrundfarbe wählen wir weiß.
- float: left;
- margin-left: 30px;
- margin-right: 15px;
- width: 140px;
- background: #FFFFFF;
- padding-bottom: 10px;
In diesen Container hinein packen wir nun mittels des <img>-Tags unseren Navi-Header. Dieser hat die Breite von 140px, passt dort also genau rein. Unten legen wir einen inneren Abstand von 10px an (padding-bottom), welcher später unseren Footer darstellen soll.
Darunter legen wir uns eine Liste mit des HTML-Tags <li> an.
<li>>> Startseite</li>
<li>>> Kontakt</li>
<li>>> Referenzen</li>
...
Diese Liste könnten wir nun beliebig bis unendlich fortführen. Das ist gerade das schöne an CSS, man fügt einfach den nächsten Punkt ein und dieser wird gleich passend formatiert und ausgegeben.
> ist die Schreibweise für die spitze Klammer >
Ich habe optisch hier zwei vor den Menüpunkt gesetzt, kann jeder machen wie er will
Natürlich müssen wir unsere Liste noch formatieren:
- list-style: none; ganz wichtig!!!11
- display: block;
- width: 130px;
- height: 23px;
- background: url(navi_bg.png) repeat-x;
- padding-left: 10px;
Wichtig ist nun, dass wir der Liste die Punkte klauen! Dies bewerkstelligen wir mit list-style: none;
Danach blocken wir jedes einzelne Listen-Element, das bedeutet, es wird selbst zum Container. Der Hintergrund ist (denke ich) klar, genauso wie die Höhe! Da wir die Schrift etwas einrücken wollen, soll im Container ein Innenabstand (padding) links von 10px sein. Nun müssen wir aber mit der Breite des Containers aufpassen. Normalerweiße hat der Container eine Breite von 140px, da sich aber nun alles wegen dem Innenabstand um 10px verschiebt, müssen wir hier die Differenz bilden. Somit hat das Element <li> nur noch eine Breite von 130px.
Inhaltsbereich:
Der Content ist nun keine große Sache mehr, einiges haben wir ja auch schon vorher deklariert (Abstand oben, Abstand links).
Wir erstellen uns also neben dem Navigations-DIV einen neuen Container und formatieren diesen wie folgt:
- overflow: hidden;
- width: 580px;
- padding: 5px;
- min-height: 400px;
- background-color: #FFFFFF;
- background: url(content.png) top repeat-x;
Das ist also unser Content. Mit overflow: hidden; unterbinden wir, dass ein zu langer, unformatierter Text oder ein zu großes Bild über den Inhaltsbereich hinausragt und das Layout zerstört. Wir legen außerdem einen Innenabstand zu allen Seiten hin von 5px an, unser gesamter Container hat also eine Breite von 590px (5px links + 580px Breite + 5px rechts).
Mit min-height: 400px; geben wir dem Bereich eine Minimalhöhe von 400px mit. Der Bereich ist nicht statisch, das bedeutet er verlängert sich bei größeren Texten automatisch mit nach unten. Falls nun dort nur ein Satz steht, erhält der Container trotzdem eine Höhe von 400px. Das ganze ist natürlich optional.
Nun definieren wir noch unsere Hintergrundfarbe. Dieses müssen wir jetzt, da wir zwei Hintergründe haben, mit background-color machen, damit der Parser später weiß "Aha, hier handelt es sich um die Hintergrundfarbe!". Den kleinen Verlauf binden wir normal als Hintergrund ein. Top besagt, dass die Grafik ganz oben erscheinen soll, repeat-x ist bekannt.
und zum Schluss...
erstellen wir uns noch unter allen anderen Containern einen leeren DIV-Container, welcher die Float-Bereiche wieder cleared (clear: left
!So, das war mein kleines Tutorial an einem Beispiel-Design, wie man ein Layout mit DIV anpasst. Ich hoffe, man konnte es wenigstens ein kleines bisschen verstehen
Edit: Weitere Tutorials werden folgen
