[TUTORIAL][HTML][CSS]How to coding a style

  • Hi,


    ich dachte mir ich zeig euch mal wie man nen simples Design codet ....
    So nun fangen wir an.


    INFOS:
    [hide]Ich arbeite hier mit PNG das heißt die Bilder immer mit png speichern bei diesem Tut.
    Am Schluss gibt es die fertige Page zum Download das ihr seht wies stimmt.
    Um alles fehlerfrei laufen zu lassen braucht ihr die blank.gif die ich auch beilegen werde.
    Alle Bilder samt der blank.gif müssen in einem UnterOrdner "bilder" abgelegt werden.(auf Groß und Kleinschreibung achten)
    Vorher ist vielleicht noch zu sagen das die Homepage mit Tabelle formatiert wird würde man Border auf 2 oder so setzen,
    würde man zwischen Leiste und Header zum Beispiel einen Rahmen sehen.
    Das ganze Style wird dann zusätzlich mit einer Style CSS(Cascading Style Sheet) formatiert, die ich beilegen werde das das Tutorials nicht zu lang wird.
    Die Beispiel Page die ich auch zum Dl hier anbieten werde könnt ihr dann jeder Zeit als Vorlage benutzen.[/hide]


    1. Designing:
    [hide] Designed in Photoshop oder sontigen Bildbearbeitungs-Programmen eine Homepage.
    Ich nutze jetzt zum Beispiel diese hier:

    Das ihr euch zum testen des Tutorials ruhig speichern könnt.[/hide]


    2. Slicen des Designs:
    [hide] Dazu könnt ihr zum Beispiel in Photoshop das Deisgn in Stücke schneiden hier mal die fertigen Teile:
    Header:

    Leiste:

    Content:

    Background:


    Erklärung:
    Header:
    Beim Header Schneidet ihr den kompletten Header aus.
    Danach nennst du die Datei header.png .
    Leiste:
    Die Leiste wird auch komplett ausgeschnitten.
    Dann nennt das BIld menue_02.png .
    Content:
    Beim Content reicht wie ihr seht ein kleines Stück das dann wiederhollt wird nur jediglich die Breite würde ich einhalten.
    Das Bild nennt ihr dann content.png .
    Background:
    Da reicht auch ein Stück das sich dann wiederhollt.
    Das Bild nennt ihr dann background.png[/hide]


    3.Erstellen der Index Datei:
    [hide]
    Ich stelle hier die index.php zum Download in der alles erklärt ist.
    Ich selber nutze als Editor Notepad ++.
    Download der index.php: http://filebeam.de/temp/index.php
    [/hide]
    4.Homepage fertig machen:
    [hide]
    So jetzt muss alles gerichtet werden.
    Bilder in den unterordner "bilder",
    und die style.css zu der index.php.
    Download der style.css: http://filebeam.de/temp/style.css
    [/hide]


    4.Hochladen der Page(Beispiel FileZilla)
    [hide]
    1.Daten eintragen:

    2.Verbinden klicken
    3.Daten übertragen:

    [/hide]



    So nun hier noch die fertige Homepage:
    <<Klick mich>>



    Have Fun
    MFG Pillepalle


    PS: Bei fragen könnt ihr euch an mich wenden.

    2 Mal editiert, zuletzt von pillepalle ()

  • danke danke hab mir auch echt mmühe gegeben ;)

  • der code ist in der index.php beschrieben wäre unnötig hier den code zu posten hättest das tut nur recht gelesen da steht das

  • weil man meistens mit Include arbeitet was .php ist und darum mache ich es gleich so ...

  • danke ich denke mal das dürfte jeder hinkriegen coden is eig. net schwer ...
    .


    Edit // Text verändert

    Einmal editiert, zuletzt von pillepalle ()

  • Ein uralten Thread ausgegraben. :D


    Sry wegs dem unsinnigen Beitrag.


    MfG [MRC]NeZcar

  • Zitat

    Ein uralten Thread ausgegraben. :D


    Sry wegs dem unsinnigen Beitrag.

    Du willst auch überall irgend was hin posten.....