Eigenes Design mit modernem Layout

[Simon]

Hi
Sorry aber ich krieg es nicht opiert
Und 1000 pixel sind gut

[Jasko]

Du sollst es auch nicht kopieren sondern abschreiben, damit du was lernst, sonns haetten wir ja gleich eine Vorlage nehmen koennen.

[Simon]

Ok
Sorry war weg
Also hab jetzt abgetippt
Was jetzt?

[Jasko]

OK, jetzt wollen wir etwas Farbe ins Spiel bringen. Das heisst wir machen dir einen schoenen Header, ich habe ein Bild passend gemacht und du kannst es auch nutzen und spaeter ersetzen durch dein eigenes (Bild3). Den haeder machen wir mit einem Tag der neu bei HTML 5 eingefuehrt wurde der <header> Tag, fuer diesen machen wir entsprechende CSS angaben(Bild1) und platziren in entsprechend im Quellcode der HTML Datei (Bild2), anschliessen machen wir eine Klasse fuer den Titel unserer Seite diese Definieren wir im CSS(Bild1) und setzen sie zwischen die Header Tags(Bild2).

Das Headerbild speichern wir in einem neuen Ordner, diser befindet sich im sleben Ordner wie unsere Index.html Datei so wie style.css Datei, wir nennen in "bilder".(Bild4)

Das wars fuer heute, das naechste mal bassteln wir eine Navigation. Hier unten sind alle Bilder die du brauchst.



MFG

[Simon]

Ok
HAb jetzt alles gemacht wie du geschrieben hast bis auf die Url von dem Narutobild weil ich den Dateipfad nicht finde

[Jasko]

Am bessten speicherst du das Bild von Naruto in den Order Bilder, so wird die von mir geschriebene url funktionieren, wenn du alles andere wie beschrieben gemacht hast. Ach ja, das Bild wird beim Hochladen umbenannt, weil es bei einem freehoster ist, darum musst du es nach dem runterladen wieder umbenennen, wie in meinem Beispiel in header.png.

Nach dem runterladen und speichern im Ordner bilder sollte die url bilder/header.png funktionieren.

MFG

[Simon]

Ok hab ich jetzt gemacht
Und jetzt?
Wie kann ich mir es angucken?

[Jasko]

Du oeffnest die Datei index.html in deiem Browser. Ein einfacher Dopelklick aud die index.html sollte ausreichen.

Fuer die Navi brauche ich deine Hilfe wie soll die aussehen, wir koennten eine Fertige Navi runterladen: Hier hast du ein paar Beispiele, oder wir machen uns eine Navi selber, ist dan mit mehr aufwand verbunden und laengerem Coden.

MFG

[Simon]

Wenn ich das mit Firefox öffne kommt nur ein weißes Bild
Und kann man die Navigationen ein wenig verändern?

[Jasko]

Also wie waere es wenn du ein Screenshot von deinem Code machst, oder diesen hier rein kopierst damit ich sehen kann ob alles OK ist, wenn Du alles so gemacht hast wie ich dir das gesagt habe sollte so etwas zu sehen sein DEMO

Also welche Navigation hast du dir angesehen und wie willst du sie veraendern, ein Link zu der Navigation waere nicht schlecht.