Forum

[CSS] CSS-Contest 2011

Erstellt von Herr_D, 20.02.2011.



  1. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    [CSS] CSS-Contest 2011
    Liebe Fangemeinde, wie schon angekündigt startet heute der CSS-Contest 2011.

    Ich hab lange überlegt, wegen eines schicken Textes und am Ende ist der Contest der Contest:


    Gestalte die Contestseite per CSS (und ein paar Grafiken). Nicht erlaubt ist das Einbinden externer Grafiken!


    Der Contest erklärt sich durch den Contest selbst:

    Dein Name beim PSD-Tutorials.de - CSS Contest 2011

    Download der Dateien.


    Die Textdateien sind nötig, um sie ins Grundgerüst zu includen.


    WIPs: Klick > >> >
    Voting: Klick

    Ab dem 26.03.2011 - 03.04.2011 können die Screenshots hochgeladen werden.
    Beachte: Wenn du keinen Screen ins Votingmodul lädst, nimmst du nicht an der Abstimmung teil!

    Vom 03.4.2011 - 10.04.2011 kann abgestimmt werden.
     
    Zuletzt bearbeitet: 21.03.2011
    #1      
  2. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Nachtrag bitte lesen:


    HTML:
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    3.        "http://www.w3.org/TR/html4/strict.dtd">
    4.  
    5.         <title>Dein Name beim PSD-Tutorials.de - CSS Contest 2011</title>
    6.         <meta name="author" content="Dein Name">
    7.         <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    8.         <meta name="keywords" content="psd-tutorials.de, css-contest, grafik und webdesign,">
    9.         <meta name="audience" content="alle">
    10.         <meta name="robots" content="index,follow">
    11.         <meta name="language" content="deutsch">
    12.  
    13.         <meta name="Content-Language" content="de">
    14.         <meta name="robots" content="all">
    15.         <link href="style.css" type="text/css" rel="stylesheet">
    16. </head>
    17.  
    18.  
    19. <div id="head">
    20.         <h1><span>Dein Name</span> beim PSD-Tutorials.de - CSS Contest</h1>
    21. </div>
    22.  
    23. <div id="menue-one">
    24.         <!-- Dieses Menue fuehrt ins Nichts, kann aber toll aussehen oder? -->
    25.         <h4>Wegweiser</h4>
    26.         <ul id="menue-one-list">
    27.                 <li class="mo-one"><a href="#">one</a></li>
    28.                 <li class="mo-two"><a href="#">two</a></li>
    29.                 <li class="mo-three"><a href="#">three</a></li>
    30.  
    31.                 <li class="mo-four"><a href="#">four</a></li>
    32.                 <li class="mo-five"><a href="#">five</a></li>
    33.                 <li class="mo-six"><a href="#">six</a></li>
    34.                 <li class="mo-seven"><a href="#">seven</a></li>
    35.         </ul>
    36. </div>
    37.  
    38. <div id="content-one">
    39.  
    40.         <h2>Der Grundgedanke</h2>
    41.         <p>Nach langem Hin und Her und einigen zaghaften Versuchen kommt es dieses Jahr endlich zu einem Contest im Bereich Webdesign.</p>
    42.         <p>Die Idee ist nicht neu und einige kreative Leute im Netz haben so &auml;hnliche Geschichten schon veranstaltet. Ganz weit vorn ist nat&uuml;rlich <a href="http://www.csszengarden.com/tr/deutsch/">Zen Garden</a>.</p>
    43.         <p>Nichtsdestotrotz: Wir ziehen das hier durch und haben Spa&szlig; dabei. Eingeladen ist jeder, der sich zutraut, ein Layout &uuml;berwiegend mit CSS zu gestalten.</p>
    44.  
    45.         <p>Diese Veranstaltung soll Spa&szlig; machen und l&auml;uft nach dem olympischen Motto: <span class="olymp">"Dabei sein ist alles."</span></p>
    46.         <p>Wir hoffen nat&uuml;rlich, dass am Ende des Tages ein paar fesche CSS-Layouts entstehen. Vielleicht kann der Eine oder die Andere sie ja auch f&uuml;r eigene Projekte als Idee nutzen.</p>
    47.         <p class="leer">&nbsp;</p>
    48.         <p class="nachtrag">P.S. Ach ja, f&uuml;r alle, die es nicht p&uuml;nktlich schaffen. Diese Sache ist OpenEnd. Nach dem 02.04.2011 eingereichte Entw&uuml;rfe nehmen nur nicht mehr am Voting teil. Ich stelle sie aber noch online. D</p>
    49.  
    50. </div>
    51. <div id="content-two">
    52.         <h2>CSS Contest 2011</h2>
    53.         <p><strong>Aufgabe:</strong> Gestalte diese vorgegebene html-Seite mit Hilfe von CSS.</p>
    54.         <p><strong>Start:</strong> 20.02.2011; 10:00 Uhr</p>
    55.         <p><strong>Abgabe:</strong> 02.04.2011; 17:00 Uhr (sp&auml;tester Zeitpunkt)</p>
    56.  
    57.         <p>Ab 03.04.2011 geht die Seite mit den Werken online.</p>
    58.         <p>Feedback, Austausch und... ist noch viel wichtiger als "Sieger" zu ermitteln und kann bei pst-tutorials gegeben werden.</p>
    59.         <div id="ablauf">
    60.                 <h3>Ablauf:</h3>
    61.                 <ol>
    62.                         <li>Lade dir die notwendigen Dateien <a href="nickname.zip">hier</a> runter.
    63.                         <li>Nimm dir Zeit zum Nachdenken! (Schnellsch&uuml;sse unerw&uuml;nscht)
    64.                         <li>Erstelle eine style.css und die f&uuml;r dein Design notwendigen Grafiken.<br>
    65.  
    66.                                 <strong>Maximale Gesamtdateigr&ouml;&szlig;e der CSS-Datei und der Grafiken: 200kb</strong>
    67.                         <li>Probiere, teste<sup>1</sup>,kn&uuml;ll zusammen, fang neu an, probiere, teste... sei zufrieden!
    68.                         <li>Erstelle einen Screenshot f&uuml;r das Votingmodul.
    69.                         <li>Schicke mir eine <a href="http://www.psd-tutorials.de/forum/private.php?do=newpm&u=7203">PM</a> und ich sage dir wohin mit den Daten<sup>2</sup>.
    70.                 </ol>
    71.  
    72.                 <p class="fussnote-one"><sup>1</sup>Browser: Firefox 3.6, Safari 5.03, IE8 (wenn also mit CSS3 gearbeitet wird, sollte es im IE wenigstens bedien- und erkennbar sein). Es geht aber NICHT um die Erstellung mehrerer CSS um alle Browser abzudecken. (Das machen wir n&auml;chstes Mal.) Schwerpunkt sind moderne Browser. Zeige die M&ouml;glichkeiten von CSS eben…</p>
    73.                 <p class="fussnote-two"><sup>2</sup>- die CSS-Datei: style.css ;<br>
    74.                         - eine Textdatei in der nur dein (Nick)name steht: name.txt ;<br>
    75.                         - eine Textdatei in der die Adresse deiner Webseite (http://deineseite.de) oder die Adresse zu deinem Profil auf psd-tutorials.de steht: webseite.txt (<strong>Kein html!</strong>);<br>
    76.  
    77.                         - eine Textdatei in der ein Satz &uuml;ber dich steht: person.txt (<strong>Kein html!</strong>); <br>
    78.                         - eine Grafik 50*50px / 20kb, dein Bild oder Avatar: avatar.jpg (nur jpg als Format zugelassen)</p>
    79.         </div>
    80.         <p><strong>Voting:</strong> Ab dem 03.04.2011 kann bis zum 10.04.2011 gevotet werden. Etwa eine Woche vorher &ouml;ffne ich den Votingbereich, um die Screenshots hochzuladen. Damit erscheint dann deine Teilnahme in deinem Profil bei PSD-Turorials.de.</p>
    81.  
    82.         <p><strong>Bewertung:</strong> Da das Voting ein Uservoting ist und somit seinen eigenen Gesetzen folgt, z&auml;hlt wohl mal der erste Eindruck, Farbgebung, Layout, Idee und dann sollte das CSS auch noch valide sein. (Die CSS-Dateien k&ouml;nnen auf der Pr&auml;sentationsseite eingesehen werden.)</p>
    83.         <p><strong>Feedback:</strong> Kann im Thread abgegeben werden. So lange die g&auml;ngigen Feedbackregeln eingehalten werden, ist es nat&uuml;rlich erw&uuml;nscht.</p>
    84. </div>
    85.  
    86. <div id="psd-tutorials">
    87.         <h2>PSD-tutorials.de</h2>
    88.         <blockquote>
    89.                 <p>PSD-Tutorials.de bietet dir eine umfassende und qualitativ hochwertige Sammlung an Tutorials und Video-Trainings zu 2D-, 3D-, Web-, Vektor-, Video- und Layoutprogrammen und h&auml;lt f&uuml;r dich in allen Bereichen eine Vielzahl an erg&auml;nzenden Downloadpaketen wie etwa Photoshop-Presets, Texturen, Homepagevorlagen, 3D-Modelle und Arbeitsdateien vor. Im Forum kannst du dich austauschen und in den Contests dein K&ouml;nnen beweisen. Bei so vielen Inhalten und Interaktionsm&ouml;glichkeiten ist es schon einmal m&ouml;glich, die Orientierung zu verlieren. Nutze unsere Sitemap, um einen &Uuml;berblick &uuml;ber alle Kategorien und Bereiche zu erhalten, die f&uuml;r dich auf PSD-Tutorials.de bereitstehen.</p>
    90.  
    91.         </blockquote>
    92.         <p class="quellenangabe"><a href="http://www.psd-tutorials.de/sitemap">Sitemap - PSD-Tutorials.de</a></p>
    93. </div>
    94.  
    95. <div id="menue-two">
    96.         <h4>Teilnehmer</h4>
    97.         <ul id="menue-two-list">
    98.            
    99.  
    100.                  <li><a name="afr0kalypse" href="http://css-contest.bplaced.net/afr0kalypse">Afr0kalypse</a></li>
    101.                  <li><a name="agielen" href="http://css-contest.bplaced.net/agielen">agielen</a></li>
    102.  
    103.                  <li><a name="Asmidiske" href="http://css-contest.bplaced.net/Asmidiske">Asmidiske</a></li>
    104.                  <li><a name="cebito" href="http://css-contest.bplaced.net/cebito">cebito</a></li>
    105.                  <li><a name="cebito2" href="http://css-contest.bplaced.net/cebito2">cebito2</a></li>
    106.                  <li><a name="cythux" href="http://css-contest.bplaced.net/cythux">cythux</a></li>
    107.                  <li><a name="DerOtto" href="http://css-contest.bplaced.net/DerOtto">DerOtto</a></li>
    108.                  <li><a name="hellemon" href="http://css-contest.bplaced.net/hellemon">hellemon</a></li>
    109.  
    110.                  <li><a name="hellemon2" href="http://css-contest.bplaced.net/hellemon2">hellemon2</a></li>
    111.                  <li><a name="Herr_D" href="http://css-contest.bplaced.net/Herr_D">Herr D</a></li>
    112.                  <li><a name="Herr_D2" href="http://css-contest.bplaced.net/Herr_D2">Herr D2</a></li>
    113.                  <li><a name="jackxkfm" href="http://css-contest.bplaced.net/jackykfm">jackykfm</a></li>
    114.                  <li><a name="jackxkfm2" href="http://css-contest.bplaced.net/jackykfm2">jackykfm2</a></li>
    115.                  <li><a name="jackxkfm3" href="http://css-contest.bplaced.net/jackykfm3">jackykfm3</a></li>
    116.  
    117.                  <li><a name="lauffreak" href="http://css-contest.bplaced.net/lauffreak">lauffreak</a></li>
    118.                  <li><a name="martink77" href="http://css-contest.bplaced.net/martink77">martink77</a></li>
    119.                  <li><a name="Master-B" href="http://css-contest.bplaced.net/Master-B">Master-B</a></li>
    120.                  <li><a name="Master-B2" href="http://css-contest.bplaced.net/Master-B2">Master-B2</a></li>
    121.                  <li><a name="MegaAdi" href="http://css-contest.bplaced.net/MegaAdi">MegaAdi</a></li>
    122.                  <li><a name="MegaAdi2" href="http://css-contest.bplaced.net/MegaAdi2">MegaAdi2</a></li>
    123.  
    124.                  <li><a name="MSpitz80" href="http://css-contest.bplaced.net/MSpitz80">MSpitz80</a></li>
    125.                  <li><a name="oli_mogli" href="http://css-contest.bplaced.net/oli_mogli">Oli Mogli</a></li>
    126.                  <li><a name="pimky_k" href="http://css-contest.bplaced.net/pinky_k">pinky_k</a></li>
    127.                  <li><a name="peterrita" href="http://css-contest.bplaced.net/peterrita">peterrita</a></li>
    128.                  <li><a name="renschli" href="http://css-contest.bplaced.net/renschli">renschli</a></li>
    129.                  <li><a name="sash79" href="http://css-contest.bplaced.net/sash79">sash79</a></li>
    130.  
    131.                  <li><a name="splatter" href="http://css-contest.bplaced.net/splatter">splatter</a></li>
    132.                  <li><a name="svhresi" href="http://css-contest.bplaced.net/svhresi">svhresi</a></li>
    133.                  <li><a name="une_art" href="http://css-contest.bplaced.net/une_art">une_art</a></li>
    134.                  <li><a name="Yarince" href="http://css-contest.bplaced.net/Yarince">Yarince</a></li>
    135.  
    136.  
    137.                 <!-- Liste wird mit den abgegebenen Layouts aufgefüllt, kann also irgendwann ins Unendliche gehen... -->        </ul>
    138.  
    139. </div>
    140.  
    141. <div id="autor">
    142.         <h4>Dein Name<!-- Inhalt der name.txt --></h4>
    143.         <img class="ava" title="dein Name" src="avatar.jpg" alt="ava">
    144.         <p>Hier könnte eine kurze Beschreibung über dich stehen...</p>
    145. </div>
    146.  
    147. <div id="footer">
    148.         <p>Der CSS-Contest ist ein Contest auf <a href="http://psd-tutorials.de">psd-tutorials.de</a> | Teilnehmer: <a href="#">Dein Name</a> | <a href="style.css">CSS</a></p>
    149.  
    150. </div>
    151.  
    152. </body>
    153.  
    154. </html>
    155.  
     
    Zuletzt bearbeitet: 02.04.2011
    #2      
  3. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Teilnehmer
    • afr0kalypse
    • Asmidiske
    • Bleccer
    • Br0
    • DerOtto
    • Desert_Eagle25
    • fabi29
    • HansF95
    • hellemon
    • Ilse Schnick
    • krid2873
    • lauffreak
    • leohh
    • Lueh
    • Misco
    • MST123
    • pretorianer
    • snoopdog1971
    • Solla
    • spacle
    • yarince


    Ich würd ja vielleicht gern, aber ich weiß noch nicht ob ich die Zeit finden werde...

    • ackermaennchen
    • Aitanara
    • ArtiHl
    • cebito
    • cef
    • fexx
    • Frank_B_punkt
    • gargamelix
    • Gegenstrom
    • HansHansa
    • hellemon
    • Herrschel
    • KaisyTom
    • kcc
    • Lottergeis
    • Louisiana
    • midgard18
    • netbandit
    • pinkflo
    • Rhazel
    • Shuilar
    • SprinterMadl
    • une_art
    • venky4ever




    Weitere Anmeldungen möglich einfach eine PM an mich schicken.
     
    Zuletzt bearbeitet: 20.02.2011
    #3      
  4. Shuilar

    Shuilar prof. herr. Betatester

    712
    Dabei seit:
    03.04.2009
    Beiträge:
    2.507
    Geschlecht:
    weiblich
    Software:
    CS5 Design Premium Suite
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Habe die Dateien abgeholt.

    Schon lustig, mal nen anderen Quelltext zu sehen, als den eigenen ;)

    Bin ja mal gespannt, was dabei rauskommt :p
     
    #4      
  5. pretorianer

    pretorianer Noch nicht viel geschrieben

    Dabei seit:
    14.07.2007
    Beiträge:
    31
    Geschlecht:
    männlich
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Habe mir die Dateien auch runtergeladen.

    Das wird sicherlich spaßig, habe noch gar keine Ahnung wie ich anfange :uhm:. Da hilft wohl nur das folgende Motto:

    „Wer etwas will, findet Wege.“ ;)

    Bin gespannt wo mich und Euch die Reise hinführt. :mrorange:
     
    #5      
  6. HansHansa

    HansHansa [Mod] Foto

    31
    Dabei seit:
    08.02.2008
    Beiträge:
    3.744
    Geschlecht:
    männlich
    Ort:
    Stutensee
    Software:
    GIMP | Hugin
    Kameratyp:
    EOS 60D, 500D, Fz28
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Da habe ich ja einen triftigen Grund, mich um mein Redesing zu drücken. ;-)
     
    #6      
  7. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Ach ja, ich hab grad als Anregung bekommen, dass WIPs und Fragen erwünscht sind...



    Na dann: Her damit! ;)
     
    #7      
  8. cebito

    cebito undefined

    262
    Dabei seit:
    08.03.2008
    Beiträge:
    8.314
    Geschlecht:
    männlich
    Ort:
    Dresden
    Software:
    PS7, Kopf
    Kameratyp:
    zum durchgucken
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Fauler S*ck :D hier nochmal ausführlicher...

    Da ja der Spaß- und Lernfaktor im Vordergrund stehen soll sind WIP's und gegenseitiges Feedback ausdrücklich erwünscht. Vor allem, damit ihr nicht an einer Stelle stehenbleibt und irgendwo verzweifelt, weil es nicht weitergeht. Ladet euren Entwurf auf euren Webspace, postet den Link hier und holt euch Anregung, Hilfe und Feedback...
     
    #8      
  9. une_art

    une_art Wissenssauger WS2100

    Dabei seit:
    22.09.2007
    Beiträge:
    224
    Geschlecht:
    männlich
    Software:
    Adobe CS4
    Kameratyp:
    Canon EOS 1000D
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Ich habe mir die Daten auch schonmal runtergeladen.
    Eine Frage hab ich noch, die aus der Contestbeschreibung irgendwie nicht ganz hervorgeht:

    Was genau darf an der index.html noch geändert werden? Wirklich nur solche Kleinigkeiten, wie "Dein Name" im Titel, oder darf man z.B. in der ersten Navigation auch die Linkbeschriftungen ändern?!

    Ich wäre jetzt davon ausgegangen, dass man an den Links etc nichts ändern darf, wollte aber trotzdem nochmal nachfragen und das klären, bevor ich anfange ;-)
     
    #9      
  10. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.630
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS/CC, X7, Brackets, Atom, PHPStorm, Gulp, Bower, Jade, Sass, Prepros, CodeKit, Wacom
    Kameratyp:
    Canon DSLR [...]
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Hierfür habe ich extra andere Projekte verschoben :D
    Paket ist auch bei mir angekommen, danke auch für die PN. :)
     
    #10      
  11. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Die html hab ich nur als Hilfe hochgeladen, die wird im Grunde gar nicht verändert...


    Die Textdateien, die ausgefüllt werden sollen, werden nachher automatisch in das bestehende html-Konstrukt eingefügt...
     
    #11      
  12. une_art

    une_art Wissenssauger WS2100

    Dabei seit:
    22.09.2007
    Beiträge:
    224
    Geschlecht:
    männlich
    Software:
    Adobe CS4
    Kameratyp:
    Canon EOS 1000D
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Ah okay, dann hatte ich die vielen "Dein Name" falsch verstanden. Sorry, für die etwas dämliche Frage :p

    Allen ein gutes Gelingen! Bin echt mal gespannt, was da so bei rauskommt.
     
    #12      
  13. Ollisterhase

    Ollisterhase Nicht mehr ganz neu hier

    Dabei seit:
    03.04.2008
    Beiträge:
    82
    Geschlecht:
    männlich
    Ort:
    Lübeck
    Software:
    Adobe CS6
    Kameratyp:
    Canon EOS 450D
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Mhh, ich hab verpasst mich im Anmelde-Thread anzumelden, kann ich trotzdem noch mitmachen?
    Ich komm noch net so gut klar mit CSS, aber zum üben scheint mir das hier ganz gut zu sein.
     
    #13      
  14. hellemon

    hellemon undefined

    331
    Dabei seit:
    17.11.2006
    Beiträge:
    2.422
    Geschlecht:
    männlich
    Ort:
    München
    Software:
    Photoshop CS3, SuperHTML Web Studio 8.5, Rapid CSS 2010
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Du machst mich feddich, wie die Textdateien werden automatisch in das bestehende html-Konstrukt eingefügt?
    Ich kann dir absolut nicht folgen, habe ich immer schon alles falsch gemacht :D
    Das einzige mir bekannte um Textdateien in eine HTML Seite zu laden ist

    Total veraltet:
    Code (Text):
    1. <layer src="datei.txt">
    Code (Text):
    1. <iframe width="100%" src="datei.txt"></iframe>
    Und das zweite was ich fragen wollte, darf man anstellen von Text die in der HTML Datei definiert sind auch Grafiken einsetzen?

    Darf man anstellen von id auch class nehmen?

    Code (Text):
    1. <div id="head">
    2.         <h1><span>Dein Name</span> beim PSD-Tutorials.de - CSS Contest</h1>
    3. </div>
    Code (Text):
    1. <div id="head">
    2.         <img src="images/hellemon.jpg" width="xx" height="xx" name="Text" />
    3. </div>
    CSS Valide wäre schön hast du geschrieben, auch XHTML Valide? oder ist das erst mal egal?

    Kurze Info wäre nett.

    Danke Helle
     
    #14      
  15. une_art

    une_art Wissenssauger WS2100

    Dabei seit:
    22.09.2007
    Beiträge:
    224
    Geschlecht:
    männlich
    Software:
    Adobe CS4
    Kameratyp:
    Canon EOS 1000D
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Also wenn ich es richtig verstanden habe, darf an der html-Datei gar nichts geändert werden.
    Somit brauchst du dir um xHTML keine Gedanken machen, sollte die Ausgangs-html nicht valide sein, ist sie das ja dann bei allen.
    Es geht also nur ums CSS.
    Text in der Html durch Bilder ersetzen dürfte dann auch wegfallen. Es sei denn du machst es komplett über die CSS-Datei.

    Wenn das falsch ist, korrigiere mich bitte, Herr_D ;-)
     
    #15      
  16. Shuilar

    Shuilar prof. herr. Betatester

    712
    Dabei seit:
    03.04.2009
    Beiträge:
    2.507
    Geschlecht:
    weiblich
    Software:
    CS5 Design Premium Suite
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Also wenn ich das richtig verstanden habe, dann darfst Du die index.html einfach gar nicht anfassen ;)

    Die einzeigen Dateien, die Du bearbeiten sollst, kannst, darfst sind die CSS-Datei und die Textdateien. Ferner soll noch ein avatar.jpg dabei sein, das auch exakt so heißen soll.
    Also nix an den Dateinamen ändern :)

    Ach ja, Schatz ... sollte ich das jetzt falsch interpretiert haben, dann sag es Helle doch bitte. Ich les dann gleich mit, damit ich es auch richtig mache ;)

    Edit: zu lahm *g*
     
    #16      
  17. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011



    Oke... Nachtrag:


    So kompliziert kann ich gar nicht denken ;)




    Die Textdateien:


    Werden natürlich per include in eine php-Datei eingebaut


    Jeder, der mir ein Layout schickt, kriegt auf dem Space einen Ordner... in diesem Ordner sind drin:


    index.php (Ausgabe entspricht der html-Datei, die in der zip ist)
    style.css (vom User angelegt)
    name.txt (Textdatei, wo nur der Name drinsteht, wird in die index.php da eingefügt, wo in der html "Dein Name" steht)
    webseite.txt nur die url deiner Webseite (wird per include unten im footer eingefügt)
    person.txt Da kommt ein Satz über dich unten wo "Hier könnte eine kurze Beschreibung über dich stehen..." steht (eingefügt über include)
    avatar.jpg Benutzerbild wird vom User neu erstellt, ist ab schon im html-Code verbaut ;) (Noch als Smilie)



    Der Rest wird nicht ausgetauscht, weil ich die html-Dateien nicht mit hochlade.

    Du kannst also keinen Text durch ein Bild ersetzen... jedenfalls nicht im html / per CSS geht das ja (auch)


    Das ganze muss ich so machen, weil ich nicht weiß, wer nachher wirklich abgibt und deshalb die Teilnehmerliste includen will...




    War das jetzt verständlicher?
     
    #17      
  18. une_art

    une_art Wissenssauger WS2100

    Dabei seit:
    22.09.2007
    Beiträge:
    224
    Geschlecht:
    männlich
    Software:
    Adobe CS4
    Kameratyp:
    Canon EOS 1000D
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Danke für den Nachtrag, ich denke jetzt ist alles klar ;-) Für mich zumindest.
     
    #18      
  19. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Ich hab den Quellcode nochmal angepasst:

    HTML:
    1.  
    2. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    3.        "http://www.w3.org/TR/html4/strict.dtd">
    4.  
    5.         <title>Dein Name beim PSD-Tutorials.de - CSS Contest 2011</title>
    6.         <meta name="author" content="Dein Name">
    7.         <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
    8.         <meta name="keywords" content="psd-tutorials.de, css-contest, grafik und webdesign,">
    9.         <meta name="audience" content="alle">
    10.         <meta name="robots" content="index,follow">
    11.         <meta name="language" content="deutsch">
    12.  
    13.         <meta name="Content-Language" content="de">
    14.         <meta name="robots" content="all">
    15.         <link href="style.css" type="text/css" rel="stylesheet">
    16. </head>
    17.  
    18.  
    19. <div id="head">
    20.         <h1><span>Dein Name<!-- Inhalt der name.txt --></span> beim PSD-Tutorials.de - CSS Contest</h1>
    21. </div>
    22.  
    23. <div id="menue-one">
    24.         <!-- Dieses Menue fuehrt ins Nichts, kann aber toll aussehen oder? -->
    25.         <h4>Wegweiser</h4>
    26.         <ul id="menue-one-list">
    27.                 <li class="mo-one"><a href="#">one</a></li>
    28.                 <li class="mo-two"><a href="#">two</a></li>
    29.                 <li class="mo-three"><a href="#">three</a></li>
    30.  
    31.                 <li class="mo-four"><a href="#">four</a></li>
    32.                 <li class="mo-five"><a href="#">five</a></li>
    33.                 <li class="mo-six"><a href="#">six</a></li>
    34.                 <li class="mo-seven"><a href="#">seven</a></li>
    35.         </ul>
    36. </div>
    37.  
    38. <div id="content-one">
    39.  
    40.         <h2>Der Grundgedanke</h2>
    41.         <p>Nach langem Hin und Her und einigen zaghaften Versuchen kommt es dieses Jahr endlich zu einem Contest im Bereich Webdesign.</p>
    42.         <p>Die Idee ist nicht neu und einige kreative Leute im Netz haben so &auml;hnliche Geschichten schon veranstaltet. Ganz weit vorn ist nat&uuml;rlich <a href="http://www.csszengarden.com/tr/deutsch/">Zen Garden</a>.</p>
    43.         <p>Nichtsdestotrotz: Wir ziehen das hier durch und haben Spa&szlig; dabei. Eingeladen ist jeder, der sich zutraut, ein Layout &uuml;berwiegend mit CSS zu gestalten.</p>
    44.  
    45.         <p>Diese Veranstaltung soll Spa&szlig; machen und l&auml;uft nach dem olympischen Motto: <span class="olymp">&quot;Dabei sein ist alles.&quot;</span></p>
    46.         <p>Wir hoffen nat&uuml;rlich, dass am Ende des Tages ein paar fesche CSS-Layouts entstehen. Vielleicht kann der Eine oder die Andere sie ja auch f&uuml;r eigene Projekte als Idee nutzen.</p>
    47.         <p class="leer">&nbsp;</p>
    48.         <p class="nachtrag">P.S. Ach ja, f&uuml;r alle, die es nicht p&uuml;nktlich schaffen. Diese Sache ist OpenEnd. Nach dem 02.04.2011 eingereichte Entw&uuml;rfe nehmen nur nicht mehr am Voting teil. Ich stelle sie aber noch online. D</p>
    49.  
    50. </div>
    51. <div id="content-two">
    52.         <h2>CSS Contest 2011</h2>
    53.         <p><strong>Aufgabe:</strong> Gestalte diese vorgegebene html-Seite mit Hilfe von CSS.</p>
    54.         <p><strong>Start:</strong> 20.02.2011; 10:00 Uhr</p>
    55.         <p><strong>Abgabe:</strong> 02.04.2011; 17:00 Uhr (sp&auml;tester Zeitpunkt)</p>
    56.  
    57.         <p>Ab 03.04.2011 geht die Seite mit den Werken online.</p>
    58.         <p>Feedback, Austausch und… ist noch viel wichtiger als „Sieger“ zu ermitteln und kann bei pst-tutorials gegeben werden.</p>
    59.         <div id="ablauf">
    60.                 <h3>Ablauf:</h3>
    61.                 <ol>
    62.  
    63.                         <li>Lade dir die notwendigen Dateien <a href="nickname.zip">hier</a> runter.
    64.                         <li>Nimm dir Zeit zum Nachdenken! (Schnellsch&uuml;sse unerw&uuml;nscht)
    65.                         <li>Erstelle eine style.css und die f&uuml;r dein Design notwendigen Grafiken.<br>
    66.                                 <strong>Maximale Gesamtdateigr&ouml;&szlig;e der CSS-Datei und der Grafiken: 200kb</strong>
    67.                         <li>Probiere, teste<sup>1</sup>,kn&uuml;ll zusammen, fang neu an, probiere, teste... sei zufrieden!
    68.                         <li>Erstelle einen Screenshot f&uuml;r das Votingmodul.
    69.                         <li>Schicke mir eine <a href="http://www.psd-tutorials.de/forum/private.php?do=newpm&u=7203">PM</a> und ich sage dir wohin mit den Daten<sup>2</sup>.
    70.                 </ol>
    71.  
    72.                 <p class="fussnote-one"><sup>1</sup>Browser: Firefox 3.6, Safari 5.03, IE8 (wenn also mit CSS3 gearbeitet wird, sollte es im IE wenigstens bedien- und erkennbar sein). Es geht aber NICHT um die Erstellung mehrerer CSS um alle Browser abzudecken. (Das machen wir n&auml;chstes Mal.) Schwerpunkt sind moderne Browser. Zeige die M&ouml;glichkeiten von CSS eben…</p>
    73.                 <p class="fussnote-two"><sup>2</sup>- die CSS-Datei: style.css ;<br>
    74.                         - eine Textdatei in der nur dein (Nick)name steht: name.txt ;<br>
    75.                         - eine Textdatei in der die Adresse deiner Webseite (http://deineseite.de) oder die Adresse zu deinem Profil auf psd-tutorials.de steht: webseite.txt (<strong>Kein html!</strong>);<br>
    76.  
    77.                         - eine Textdatei in der ein Satz &uuml;ber dich steht: person.txt (<strong>Kein html!</strong>); <br>
    78.                         - eine Grafik 50*50px / 20kb, dein Bild oder Avatar: avatar.jpg (nur jpg als Format zugelassen)</p>
    79.         </div>
    80.         <p><strong>Voting:</strong> Ab dem 03.04.2011 kann bis zum 10.04.2011 gevotet werden. Etwa eine Woche vorher &ouml;ffne ich den Votingbereich, um die Screenshots hochzuladen. Damit erscheint dann deine Teilnahme in deinem Profil bei PSD-Turorials.de.</p>
    81.  
    82.         <p><strong>Bewertung:</strong> Da das Voting ein Uservoting ist und somit seinen eigenen Gesetzen folgt, z&auml;hlt wohl mal der erste Eindruck, Farbgebung, Layout, Idee und dann sollte das CSS auch noch valide sein. (Die CSS-Dateien k&ouml;nnen auf der Pr&auml;sentationsseite eingesehen werden.)</p>
    83.         <p><strong>Feedback:</strong> Kann im Thread abgegeben werden. So lange die g&auml;ngigen Feedbackregeln eingehalten werden, ist es nat&uuml;rlich erw&uuml;nscht.</p>
    84. </div>
    85.  
    86. <div id="psd-tutorials">
    87.         <h2>PSD-tutorials.de</h2>
    88.         <blockquote>
    89.                 <p>PSD-Tutorials.de bietet dir eine umfassende und qualitativ hochwertige Sammlung an Tutorials und Video-Trainings zu 2D-, 3D-, Web-, Vektor-, Video- und Layoutprogrammen und h&auml;lt f&uuml;r dich in allen Bereichen eine Vielzahl an erg&auml;nzenden Downloadpaketen wie etwa Photoshop-Presets, Texturen, Homepagevorlagen, 3D-Modelle und Arbeitsdateien vor. Im Forum kannst du dich austauschen und in den Contests dein K&ouml;nnen beweisen. Bei so vielen Inhalten und Interaktionsm&ouml;glichkeiten ist es schon einmal m&ouml;glich, die Orientierung zu verlieren. Nutze unsere Sitemap, um einen &Uuml;berblick &uuml;ber alle Kategorien und Bereiche zu erhalten, die f&uuml;r dich auf PSD-Tutorials.de bereitstehen.</p>
    90.  
    91.         </blockquote>
    92.         <p class="quellenangabe"><a href="http://www.psd-tutorials.de/sitemap">Sitemap - PSD-Tutorials.de</a></p>
    93. </div>
    94.  
    95. <div id="menue-two">
    96.         <h4>Teilnehmer</h4>
    97.         <ul id="menue-two-list">
    98.                              <li><a href="http://css-contest.bplaced.net/testzweck">Testzweck</a></li>
    99. <!--
    100.                <li><a href="http://css-contest.bplaced.net/afr0kalypse">afr0kalypse</a></li>
    101.                <li><a href="http://css-contest.bplaced.net/Asmidiske">Asmidiske</a></li>
    102.                <li><a href="http://css-contest.bplaced.net/Bleccer">Bleccer</a></li>
    103.                <li><a href="http://css-contest.bplaced.net/Br0">Br0</a></li>
    104.                <li><a href="http://css-contest.bplaced.net/DerOtto">DerOtto</a></li>
    105.                <li><a href="http://css-contest.bplaced.net/Desert_Eagle25">Desert_Eagle25</a></li>
    106.                <li><a href="http://css-contest.bplaced.net/fabi29">fabi29</a></li>
    107.                <li><a href="http://css-contest.bplaced.net/HansF95">HansF95</a></li>
    108.                <li><a href="http://css-contest.bplaced.net/Hellemon">hellemon</a></li>
    109.                <li><a href="http://css-contest.bplaced.net/Ilse_Schnick">Ilse Schnick</a></li>
    110.                <li><a href="http://css-contest.bplaced.net/krid2873">krid2873</a></li>
    111.                <li><a href="http://css-contest.bplaced.net/lauffreak">lauffreak</a></li>
    112.                <li><a href="http://css-contest.bplaced.net/leohh">leohh</a></li>
    113.                <li><a href="http://css-contest.bplaced.net/Lueh">Lueh</a></li>
    114.                <li><a href="http://css-contest.bplaced.net/Misco">Misco</a></li>
    115.                <li><a href="http://css-contest.bplaced.net/MST123">MST123</a></li>
    116.                <li><a href="http://css-contest.bplaced.net/pretorianer">pretorianer</a></li>
    117.                <li><a href="http://css-contest.bplaced.net/snoopdog1971">snoopdog1971</a></li>
    118.                <li><a href="http://css-contest.bplaced.net/Solla">Solla</a></li>
    119.                <li><a href="http://css-contest.bplaced.net/spacle">spacle</a></li>
    120.                -->
    121.  
    122.                 <!-- Liste wird mit den abgegebenen Layouts aufgefüllt, kann also irgendwann ins Unendliche gehen... -->        </ul>
    123. </div>
    124.  
    125. <div id="autor">
    126.         <h4>Dein Name</h4>
    127.         <img class="ava" title="dein Name" src="avatar.jpg" alt="ava">
    128.         <p>Hier könnte eine kurze Beschreibung über dich stehen...  <!-- Inhalt der person.txt --></p></p>
    129. </div>
    130.  
    131. <div id="footer">
    132.  
    133.         <p>Der CSS-Contest ist ein Contest auf <a href="http://psd-tutorials.de">psd-tutorials.de</a> | Teilnehmer: <a href="<!-- Inhalt der webseite.txt -->">Dein Name<!-- Inhalt der name.txt --></a> | <a href="style.css">CSS</a></p>
    134. </div>
    135.  
    136. </body>
    137.  
    138. </html>
    139.  
     
    #19      
  20. Herr_D

    Herr_D offline

    Dabei seit:
    09.06.2005
    Beiträge:
    8.557
    Geschlecht:
    männlich
    [CSS] CSS-Contest 2011
    AW: [CSS] CSS-Contest 2011

    Ach ja noch n Nachtrag...


    Ich schreib kein xhtml, weil das überbewertet ist ;) und eh demnächst hinfällig
     
    #20      
Die Seite wird geladen...
© 2002 - 2016 PSD-Tutorials.de – ein Projekt mit der 4eck Media GmbH & Co. KG
x
×
×