"Summer Feeling" Layout^^ *Update* Version 1.5

Dieses Thema im Forum "Webdesign" wurde erstellt von Mad.Mike, 3. Juni 2006 .

Status des Themas:
Es sind keine weiteren Antworten möglich.
  1. 3. Juni 2006
    Wie ich schon im ersten Thread gesagt habe, will ich jetzt mal paar Webseiten machen.
    Hier nun mein Zweites Layout. In dem hab ich versucht die Kritik/Verbesserung umzusetzen. Ich bitte um konstruktive Kritik^^

    Hier gehts zur Seite: KickMeToMad.MikeHP!

    So Leute Version 1.5 ist fertig:
    KickMeTo1.5!

    Änderungen:
    - Komplett neu gesliced
    - Verschobener Content
    - Buttons verkleinert
    - Schrift verkleinert
    - Versuch in jpeg zu speichern^^
    - Verschobene Buttons
    Aufbauzeit: ~4s bei DSL 1k

    Comments weiterhin erwünscht^^ Und bitte Tipps geben wie mans besser macht.
    Falls wer Tuts zu Seitencodes hat, bitte hier schreiben oder Pm. Danke !

    mfg mike
     
  2. 3. Juni 2006
    joa gefällt mir auch ganz gut! OK die BLumen sind jetzt nicht so doll aber da kann man schon noch was draus machen!!
    Was ich denke was du noch verbessern könntest ist, dass du die schrift einfach kleiner machst! Alles kleiner natürlich vor allem die schrift in der navi-leiste!

    greez klonschaf
     
  3. 3. Juni 2006
    Die Blumen find ich völlig ok, auch das sie heraustreten, jedoch solltest du sie auf der linken Seite etwas kürzen!
    Ansonsten echt n1!
    MfG
    H4xx0r
     
  4. 3. Juni 2006
    ich würde die navi "parallel" zum content machen, also dass sie zusammen eine box ergeben, sonst echt summer
     
  5. 3. Juni 2006
    Genau das ist/war mein Prob^^ Die auf der linken Seite werden so abgehackt. Naja mal schauen was sich da machen lässt^^
    @L33do:
    Jo werd ich mal testen^^
    @ om:
    Ich find des chick^^ Dachte mir man muss ja nicht immer genau untergliedern in Header, Content etc.
    @klonschaf:
    Die Schriften mach ich noch kleiner. Aber ich musste sie bei ner Vergrößerung von 50% machen denn mein Bilschirm ist so klein^^

    Ich bedanke mich schonmal für die Comments und werde nacher oder morgen mal die verbesserte Version vorlegen^^

    mfg mike
     
  6. 4. Juni 2006
    find ich ein echt tolles design, besonders der zelda gefällt mir, das die blumen über den rand gehen find ich im gegenteil ganz ok.
    nur bei meiner auflösung hats noch weisse berreiche ... vllt weisst du das schon sonst kann ich gern ein screen machen.
    mfg tifoso
     
  7. 4. Juni 2006
    Die Buttons oben sind n bissel komisch gesliced, also nicht komplett, aber sonst sieht sie wirklich nice aus und ich freu mich langsam vielleicht doch noch auf den Sommer

    Dudel
     
  8. 4. Juni 2006
    Die Page find ich ganz ok Aber leider läd sie relativ lange weil du GIF benutzt hat... Bei mehr als 256 Farben immer JPEG nehmen. Dann läd alles schneller und die Dateien sind immernoch klein.
     
  9. 4. Juni 2006
    Finde das Design schon ganz nice, wäre aber noch nett, wenn du den Header aus einem Stück machst und dann mit imagemaps die Navigation daraus nimmst. So geht es weniger lange zum laden und der code sieht eleganter aus, wobei es hier wohl net um Coding geht...
    Das Design finde ich im Allgemeinen wirklich gut, nur checke ich net ganz was der Link mit dem Sommer zu tun hat... Mach da lieber ne Blume mit Stiel (oder schreibt man Stil???) hin, dann würde das auch noch passen. Ausserdem könntest du die Blätter am Stiel als Navigation nehmen, das wäre dann sicher ganz nice...
     
  10. 4. Juni 2006
    Wie bring ich die den weg?^^ Mir ist schon aufgefallen aber ich brings irgendwie net weg...^^

    Wie mache ich den das?^^ Ich bin wie gesagt noch noob in Webdesign^^

    Wie mache ich den das? Wie oben schon gesagt, dass ich kein Pro bin^^
    Zu dem Render. Naja dachte der ist ganz nice und mit dem Effekt macht des ziemlich Sommerlich^^

    mfg mike
     
  11. 4. Juni 2006
    Indem du als bgcolor auch die Hintergrundfarbe der Grafiken nimmst.

    Also
    Code:
    <body bgcolor="#123456" ... >
    Wenn du Lust hast kann ich dir das auch noch richtig machen, anstatt dem ImageReady/FrontPage-Code
    Hab sonst Langeweile
     
  12. 5. Juni 2006
    Ist zwar sehr net gemeint aber ich will das mal lernen^^. Ach und nochwas: Das ist nicht nur ein einfarbiger BG. Da sind noch Scanlines drauf. Wie kann ich den die erhalten?

    Und nochwas weil ich grad dabei bin^^: Wie mache ich den so einen Content indem man scrollen kann, sprich größere Texte einbauen kann ohne das es das Layout sprengt?
    Ich würde das gerne mit Dreamweaver machen (gibts unterschiede in den Progs ? )

    mfg mike
     
  13. 5. Juni 2006
    Als erstes kann ich dir das Tut von ~King-KGamer~ empfehlen, da wird alles ziemlich genau erklärt.

    Du musst der Tabelle nur sagen, dass sie sich nicht anpassen soll, sondern feste Werte (in px) haben soll, so das dann bei längen Texten Scrollbalken entstehen.

    Also in die <table> feste Werte reinschreiben wie z.b.
    Code:
    <table width="200" height="150">
     
  14. 5. Juni 2006
    fetter Style! besonders gefällt mir der comic-stil!
    nur noch schrift nen bisschen kleiner machen!

    ?!?!?!?!
    Bei mir brauch die seiten weniger als ne halbe sekunde zum laden!!!
     
  15. 5. Juni 2006
    Okay ich werd mal das Tut machen. Ich hab dir übrigens mal nen 10ner gegeben für die nette hilfe^^
    Mal schauen. Ich glaub in ca. 2 Tagen kommt Version 2^^

    mfg mike

    Edit:/ och meno^^ Des tut vom KG ist down -.- hat des wer auf seine Platte gebannt?^^ wäre dankbar für upp oder wenn jemand KG webspace gibt !^^
     
  16. 5. Juni 2006
    Naja wenn du noch die PSD hast dann slicen (fals du das mit imageready gemacht hast) und dann bei optimierte version jpeg auswählen. Aber müsstest dann alles nomma neu verlinken usw.
     
  17. 5. Juni 2006
    Also ich hab in PS "gesliced" (mehr auf gut Glück^^). Dann geh ich also in Imageready und nehm optimiet speichern unter. Und dann tu ich die Bilder in den Bilder Ordner meiner Page?

    Und nochwas an alle anderen:
    Ich find echt super dass ihr mir so helft ! Vielen Dank^^

    mfg mike
     
  18. 5. Juni 2006
    Im quellcode müsstest du dann noch Gif durch JPEG ersetzen.
     
  19. 5. Juni 2006
    Da du ja noch ne html draus gemach hast/machen lassen hast, bewerte ich mal design und dann sag ich was zu dieser htmlversion^^


    also:

    Design find ich spitze, es ist mit den sonnigen farben sehr fröhlich und muntert einen auf!
    das ist top verarbeitet finde ich, es wirkt nicht unübersichtlich und bringt nich zu verwirrungen,
    designnot: 2+

    wie gesagt, finds echt spitze..


    zum "code"

    machs lieber selbst oder lass es von einem programmierer coden, aber imageready slicen is einfach nix^^

    erkennt man z.b. daran, dass ich 1280x1024 habe aber rechts und unten is der bg aufeinmal weiß

    und es is "unschön" wenn man alles so markieren kann, finde ich^^ machen immer mehr, weils ihnen anders zu aufwendig ist, aber ich finds codemäßig "unschön"...




    Code:
    <body background="lalala">
    
    oder
    
    <body class="mainbg">
    
    und dann per css den style mainbg definieren^^
    (background= unterstüzt nicht jeder browser)
    achte dabei auhc iummer darauf, dass du möglichst keine farbverlaufe von oben nach unten machst, sondern nur seitlich^^
    und wenn von oben nach unten, sollte wenigstens der contentbereich solch ein verlauf NICHT haben..nur halt von oben header über in content und von content über bis ende footer
    
    mfg

    cydoc 8)
     
  20. 5. Juni 2006
    Ehrlich gesagt finde ich den Code auch net schön. Aber ich hab jetzt noch net alzu viel Plan (nice Ausdruck ) von html code etc. Aber genau darum will ichs selber machen^^ Will des mal checken.
    Dann schmeiß ich doch gleich mal Fragen hinterher^^:
    1. Wo gibts den Tuts wo erklärt wird wie ich ein Layout von PS zu einer "fertigen" Seite mache?
    2. Wo gibts Tuts die erklären wie man Webseit's Code macht?
    3. Ich weiß ich hab keinen Plan^^
    ach noch 4. Also angenommen ich hab die Seite so wie ich se will. Wie mach ich den das, dass man auf die nächste Seite kommt ohne dass alles neu geladen wird ? Also z.B. jemand geht auf meien Seite. Er ist auf der Seite Home. So nun klick er auf Works. Und nun soll nur des innere, sprich des neue geladen werden. Aber nicht der Header und der BG usw. nicht.

    Apros: Die neue Version ist fertig ^^
    Hier ist V1.5 ( noch net 2 denn der Code muss noch besser gemacht werden^^)
    KickMeToMad.MikeHPV1.5!

    mfg mike
     
  21. 5. Juni 2006
    einfachste lösung, dass nicht immer alles geladen wird, ist mit iframe!

    iframe machst du so:
    Code:
    <iframe name="I1" src="startseite.htm" width="400" height="400">Content</iframe>
    um dann einen link im iframe zu öffnen, machst du das so:
    Code:
    <a target="I1" href="inhalt.htm">Test</a>
    hoffe, ich konnte dir bei diesem problem ein bisschen helfen
     
  22. 6. Juni 2006
    Wie/Wo mach ich den das?^^
    Also hier ist erst mal der "normale" Seitencode:
    Code:
    <html>
    <head>
    <title>Webseite_2_Mad.mike_V1</title>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
    </head>
    <body bgcolor="#FFFFFF" leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
    <!-- ImageReady Slices (Webseite_2_Mad.mike_V1.5_2) -->
    <table id="Tabelle_01" width="1001" height="751" border="0" cellpadding="0" cellspacing="0">
     <tr>
     <td colspan="13">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5_2_.gif" width="1000" height="70" alt=""></td>
     <td>
    
     <img src="Bilder/spacer.gif" width="1" height="70" alt=""></td>
     </tr>
     <tr>
     <td rowspan="9">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-03.gif" width="148" height="512" alt=""></td>
     <td colspan="10">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-04.gif" width="688" height="157" alt=""></td>
     <td colspan="2" rowspan="3">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-05.gif" width="164" height="159" alt=""></td>
    
     <td>
     <img src="Bilder/spacer.gif" width="1" height="157" alt=""></td>
     </tr>
     <tr>
     <td rowspan="2">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-06.gif" width="48" height="2" alt=""></td>
     <td rowspan="4">
     <a href="T1">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5_06.gif" width="90" height="36" border="0" alt=""></a></td>
    
     <td colspan="8">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-08.gif" width="550" height="1" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
     </tr>
     <tr>
     <td>
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-09.gif" width="12" height="1" alt=""></td>
     <td rowspan="4">
    
     <a href="T2">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5_09.gif" width="90" height="36" border="0" alt=""></a></td>
     <td>
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-11.gif" width="11" height="1" alt=""></td>
     <td rowspan="2">
     <a href="T3">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5_11.gif" width="90" height="34" border="0" alt=""></a></td>
     <td>
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-13.gif" width="13" height="1" alt=""></td>
    
     <td rowspan="4">
     <a href="T4">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5_13.jpg" width="89" height="36" border="0" alt=""></a></td>
     <td colspan="2">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-15.gif" width="245" height="1" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
     </tr>
     <tr>
    
     <td rowspan="6">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-16.gif" width="48" height="353" alt=""></td>
     <td rowspan="4">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-17.gif" width="12" height="50" alt=""></td>
     <td rowspan="4">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-18.gif" width="11" height="50" alt=""></td>
     <td rowspan="4">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-19.gif" width="13" height="50" alt=""></td>
     <td colspan="3" rowspan="4">
    
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-20.gif" width="247" height="50" alt=""></td>
     <td rowspan="6">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-21.gif" width="162" height="353" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="1" height="33" alt=""></td>
     </tr>
     <tr>
     <td rowspan="3">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-22.gif" width="90" height="17" alt=""></td>
    
     <td>
     <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
     </tr>
     <tr>
     <td rowspan="2">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-23.gif" width="90" height="16" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="1" height="1" alt=""></td>
     </tr>
    
     <tr>
     <td>
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-24.gif" width="90" height="15" alt=""></td>
     <td>
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-25.gif" width="89" height="15" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="1" height="15" alt=""></td>
     </tr>
     <tr>
    
     <td colspan="8">
     <table id="Tabelle_02" width="397" height="254" border="0" cellpadding="0" cellspacing="0">
     <tr>
     <td>
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-26.gif" width="397" height="254" alt=""></td>
     </tr>
     </table></td>
     <td colspan="2" rowspan="2">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-27.gif" width="245" height="303" alt=""></td>
    
     <td>
     <img src="Bilder/spacer.gif" width="1" height="254" alt=""></td>
     </tr>
     <tr>
     <td colspan="8">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-28.gif" width="397" height="49" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="1" height="49" alt=""></td>
     </tr>
    
     <tr>
     <td>
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-29.gif" width="148" height="168" alt=""></td>
     <td colspan="11">
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-30.gif" width="690" height="168" alt=""></td>
     <td>
     <img src="Bilder/Webseite_2_Mad.mike_V1.5-31.gif" width="162" height="168" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="1" height="168" alt=""></td>
    
     </tr>
     <tr>
     <td>
     <img src="Bilder/spacer.gif" width="148" height="1" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="48" height="1" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="90" height="1" alt=""></td>
     <td>
    
     <img src="Bilder/spacer.gif" width="12" height="1" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="90" height="1" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="11" height="1" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="90" height="1" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="13" height="1" alt=""></td>
    
     <td>
     <img src="Bilder/spacer.gif" width="89" height="1" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="2" height="1" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="243" height="1" alt=""></td>
     <td>
     <img src="Bilder/spacer.gif" width="2" height="1" alt=""></td>
     <td>
    
     <img src="Bilder/spacer.gif" width="162" height="1" alt=""></td>
     <td></td>
     </tr>
    </table>
    <!-- End ImageReady Slices -->
    </body>
    </html>
    Wo mach ich den so einen iframe und wo das mit dem Hintergrund ?
    Ich such übrigens immer noch Tuts fürs coden^^

    mfg mike
     
  23. 6. Juni 2006
    also erlich gesagt find ichs so richtig beschissen.
    hat überhaupt keinen stil, is zu überladen, und schaut ziemlich billig aus.
    btw. hast du lust die woche mal zu mir zu kommen?
    und nimm bitte die galileo-tuts mit und brenn mir die ganzen brushes....
    schreib mir einfach ne pn oder komm mal in icq.
    harley

    edit:// so deine erwünschte sachliche kritik:
    hintergrund is nice, dann der effekt dass es unten rausleuhtet auch, buttons würd ich anderen font nehmen, header gefällt mir nicht, und es schaut komisch aus dass da die blumen rausgehn, zelda viech is cool, content berreich is hässlich
     
  24. 7. Juni 2006
    ~ Spam filtered ~
     
  25. Video Script

    Videos zum Themenbereich

    * gefundene Videos auf YouTube, anhand der Überschrift.