Sammelthread für Tutoriale und Codehilfen

(Bild entfernt, da Bild zwischenzeitlich ausgetauscht wurde)

Hier möchte ich euch nun erläutern, wie ihr euch mit recht wenigen Kenntnissen ein eigenes kleines Layout für eure Knuddelshomepage basteln könnt. Alles, was ihr dafür braucht, ist ein Bild, welches später euer Header sein soll und ein bisschen Zeit und Verständnis für dieses Tutorial.


Schritt 1: Ihr sucht euch eine geeignete Headergrafik, zum Beispiel ein hübsches Foto. Ich habe mir dieses Bild hier ausgesucht. Das einzige, worauf ihr achten müsst, ist, dass es nicht zu breit wird. Ein querformatiges Bild mit den Maßen 500x300 Pixeln ist perfekt.

-----

2. Schritt: Habt ihr euer Bild nun gefunden, geht es auch schon ans Coden. Ich habe eine leicht verständliche Art des Layouts gewählt, damit man a) leicht nachvollziehen kann, was ich tue, und b) das Layout in den meisten Browsern gleich dargestellt wird.

Im Grunde besteht unter Layout zuerst einmal aus einer Tabelle. Diese Tabelle beinhaltet eine Spalte und zwei Zeilen, sieht also so aus:

(Bild entfernt, da Bild zwischenzeitlich ausgetauscht wurde)

Der Grundcode für die vorliegende Tabelle lautet:


Zur Erklärung: <table> und </table> umschließen die Tabelle. Das <tr>-Tag sowie das korrespondiernde Schließtag leiten eine Zeile ein, <td> eröffnet eine neue Zelle. (Wer mehr zum Thema erfahrn möchte, kann sich gern die Links am Ende dieses Tutorials ansehen.) Mit dieser Tabelle, der ich eine Breite von 500 Pixeln mitgegeben habe (siehe style-Bereich der <table>), coden wir nun unser Layout. Wieso gerade 500 Pixel? Ganz einfach: unser Headerbild ist 500px breit, darum bekommt auch die Tabelle 500 Pixel zugewiesen.

-----

Schritt 3: Ihr setzt nun das Headerbild mithilfe des <img>-Tags, mit dem man Bilder einbindet, in den dafür vorgesehenen Bereich. Das sollte nun so aussehen:


-----

Schritt 4: Kommen wir nun zum unteren Bereich, dem Textbereich. In diesem Teil des Layouts soll sich später der Text befinden. Allerdings soll diese Zelle nicht unendlich lange werden, sondern nach einer bestimmten Länge zu einem scrollbaren "Kasten" werden. Dies realisieren wir mit einem scrollbaren Div-Layer. Also fügen wir den Grundcode eines Div-Layers in unsere Tabelle in die untere Zeile ein und weisen diesem mithilfe von CSS eine feste Größe zu:


-----

Schritt 5: Unser Div hat nun eine Breite von 100% (also 500px) und eine Höhe von 250px. Browsertechnisch bedingt müssen wir nun zu einem Div in diesem Div greifen. Um zu erklären, wieso das nötig ist, müsste ich zu weit abschweifen - darum nehmt es bitte als gott.. ähm, katgegeben hin, ja? Diesem Div weisen wir jetzt einen Padding-Wert zu, damit unser Text später nicht am Rand kleben bleibt. 10 Pixel Abstand zum Rand hin dürften genügen.
Wie aber sagen wir dem Div-Layer nun, dass er scrollbar sein soll, wenn der Text länger als 250px ist? Ganz einfach, wir benutzen das Attribut overflow. Mit overflow:auto; sagen wir dem Div, dass er einen Scrollbalken erhalten soll, sobald sein Inhalt überlang ist.


-----

Schritt 6: Was nun folgt sind an sich nur noch Verschönerungen - euer Layout steht nun so schon!
Formatierung des Textes: Textformatierungen kommen in den Div mit den Höhen- und Breitenangaben. Diese können zum Beispiel wie im folgenden Code aussehen. Ich habe dort die Schriftart Verdana bei einer Größe von 10pt benutzt, eine Blockausrichtung des Textes sowie einen Zeilenabstand von 1.5em veranlasst. Diese Werte lassen sich natürlich nach Lust und Laune veriieren. Mehr dazu in den Links unten.
Text einfügen: Wohin nun aber mit dem Text? Ganz einfach: Text schreibt man hier zwischen das zweite <div> bzw. </div>. Ich habe diese Stelle mit dem Wörtchen "Text" versehen.


Rahmen: Stimmt, das Layout sieht so noch etwas "fassungslos" aus. Das ändern wir nun. Zuerst verpassen wir der Tabelle einen 1px breiten, schwarzen Rahmen. Wer möchte, bekommt hier noch erklärt, wie er eine Trennlinie zwischen Headerbild und Text einfügt. Nun aber zum Rahmen der Tabelle, also um das gesamte Layout. Dazu ergänzt man folgenden Teil in den style-Teil des <table>-Tags (ich habe hier nur einen Auschnitt des Gesamtcodes).


Mehr zum Thema Rahmengestaltung findet sich - wie immer - unten in den Links. Möchte man nun noch eine Trennung zwischen Header und Text, so darf man nur (!) der unteren Kante des Bildes einen Rahmen zuweisen. Ich tue das hier mal:


(Zellen-)Hintergrund: Um dem Text einen farblich passenden Hintergrund zu verpassen, benötigen wir erstmal ein Hilfsmittel: einen Colorpicker. Diesen findet ihr zum Beispiel hier. Habt ihr euch für eine Farbe, zum Beispiel aus eurem Headerbild entschieden, so könnt ihr dem äußeren Div diese Farbe mithilfe von background-color als Hintergrundfarbe zuweisen. Der Div sollte dann in etwa so aussehen:


Somit habt ihr nun ein kleines aber feines Layout für eure eigene Homepage kreiert! Was wollt ihr mehr? Viel Spaß wünsche ich euch nun noch beim Abwandeln des Tutorials für eure eigenen Zwecke und beim Kreativsein, was eure eigenen Layouts angeht!

-----

Weiterführende Links zum Thema:

• Tabellen
• Div-Layer
• Text- / Schriftformatierung
• Rahmen ("Border")