Anzeige

Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe | PSD-Tutorials.de

Erstellt von mkuetting, 06.03.2010.

  1. mkuetting

    mkuetting Noch nicht viel geschrieben

    Dabei seit:
    26.02.2010
    Beiträge:
    29
    Geschlecht:
    männlich
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    Hallo zusammen,

    habe vor ein paar Wochen ein Design fertig gestellt für eine Seite für ein Kollegen und mich.
    Das Design steht soweit (habe ich in PS CS4 gemacht).

    Möchte allerdings die Seite nicht wie früher von PS als HTML Exportieren lassen weil sich ja die Sache mit den iframes nicht mehr wirklich bewehrt und über das tabellensystem brauchen wir mal gar nicht zu reden ;)

    Habe mir jetzt das ein oder andere Tutorial angeschaut und auch schon ein wenig hin und her probiert aber leider komme ich noch nicht ganz zum Erfolg :'(

    Nun ist meine Frage eigentlich ob es ein paar Leute gibt die mich hier Schritt für Schritt unterstützen damit ich vllt nach der ersten Seite mit dem Rest selbst klar komme ?!?!

    Hier mal ein Bild vom Design und meine Vorstellung wie es mal aussehen soll:

    Der mittlerei Teil der Seite soll später für den Inhalt sein und daher Dynamisch arbeiten damit bei mehr inhalt die Seite automatisch läger wird.

    Rechts und Links in die Boxen soll später das Navigationsmenü kommen welches ebenfalls Dynamisch arbeiten soll (Wenn man auf ne Kategorie klickt soll es ausfahren und die Utnerpunkte anzeigen).
    Die Buttons wie Impressum oben in der orangenen Leiste sollen natürlich klickbar sein.
    Alle inhalte die angeklickt werden sollen sich im mittleren Bereich der Seite öffnen (wie ein Frame quasi?!?!).

    Hier das Bild:

    [​IMG]
     
    #1      
  2. pixeli

    pixeli oldie

    Dabei seit:
    11.08.2006
    Beiträge:
    100
    Geschlecht:
    männlich
    Ort:
    Châtillon, Schweiz
    Software:
    CS3
    Kameratyp:
    Sony alpha 700
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    Hallo mkuetting,
    ich kann Dir zwei Tipps geben:
    1) Kauf Dir "little boxes" von M&T ein geniales Werk zum erlernen von CSS.
    2) Schau Dir mal yaml.de an
    So ganz nach dem Prinzip: "Hilf mir es selbst zu tun"
    Viel Spass, pixeli
     
    #2      
  3. AlexanderBo

    AlexanderBo Gesperrt

    Dabei seit:
    09.04.2009
    Beiträge:
    425
    Geschlecht:
    männlich
    Ort:
    im Tor zur Welt ;-)
    Software:
    Notepad++ / CS4
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    fehlt nur noch die frage ob dir jemand die seite hier baut...

    da jibbet ne menge tuts für dich zu lesen ;-)
    html und css
    -> selfhtml

    denn dein basiswissen scheint recht "anfänglich" zu sein.

    allein dein satz
    <quote>
    Alle inhalte die angeklickt werden sollen sich im mittleren Bereich der Seite öffnen (wie ein Frame quasi?!?!).
    </quote>

    zeigt deinen "lesebedarf"...

    s.c.r.
     
    #3      
  4. mkuetting

    mkuetting Noch nicht viel geschrieben

    Dabei seit:
    26.02.2010
    Beiträge:
    29
    Geschlecht:
    männlich
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    Hallöchen ;)

    Danke für die schnelle Antwort.
    Welchen Teil von dem Buch sollte ich mir den zu "gemüte" führen ?
     
    #4      
  5. pixeli

    pixeli oldie

    Dabei seit:
    11.08.2006
    Beiträge:
    100
    Geschlecht:
    männlich
    Ort:
    Châtillon, Schweiz
    Software:
    CS3
    Kameratyp:
    Sony alpha 700
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    Fang mal mit Teil 1 an, da kommst du schon sehr weit und ausserdem ist "little boxes" unterhaltsam zu lesen.
    Viel Spass
     
    #5      
  6. mkuetting

    mkuetting Noch nicht viel geschrieben

    Dabei seit:
    26.02.2010
    Beiträge:
    29
    Geschlecht:
    männlich
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    Den zweiten Teil habe ich als DvD letzte woche von nem bekannten bekommen aber noch nicht rein geguckt.

    Das Design was ich gebaut habe ist aber umsetzbar als Seite oder ?
     
    #6      
  7. msblacky

    msblacky Helper

    Dabei seit:
    04.12.2009
    Beiträge:
    4.731
    Geschlecht:
    männlich
    Ort:
    Gengenbach
    Software:
    Creative Cloud
    Kameratyp:
    Canon EOS 500D, 750D, 7D Mark II
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    Hy,

    such Dir einfach mal das Selfhtml von Stefan Münz, ist einfach für Anfänger ein echt gutes Nachschlagewerk, ich kanns nur empfehlen.

    msblacky
     
    #7      
  8. pixeli

    pixeli oldie

    Dabei seit:
    11.08.2006
    Beiträge:
    100
    Geschlecht:
    männlich
    Ort:
    Châtillon, Schweiz
    Software:
    CS3
    Kameratyp:
    Sony alpha 700
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    wenn ihr mich fragt, wird der Anfänger von Selfhtml erschlagen. Die Fülle ist so gross, dass ein Aufbau nicht möglich ist, deshalb empfehle ich eher eine Schritt für Schritt Anleitung. Wenn Du dan spezielle Probleme hast, kannst Du in Selfhtml nachschlagen.
    Deshalb empfehle ich auch als Alternative Yaml, da hst Du schnell einmal deine divs und erst noch sauber platziert.
     
    Zuletzt bearbeitet: 06.03.2010
    #8      
  9. sokie

    sokie Mod | Web

    Dabei seit:
    23.03.2008
    Beiträge:
    5.338
    Geschlecht:
    männlich
    Ort:
    Bünde NRW
    Software:
    <br>COREL <br> Texteditor
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    #9      
  10. Tobadin

    Tobadin Noch nicht viel geschrieben

    Dabei seit:
    03.01.2010
    Beiträge:
    31
    Geschlecht:
    männlich
    Ort:
    Regensburg/Lappersdorf
    Software:
    GIMP, Komodo Edit, Filezilla, Corel Draw, Google Chrome
    Kameratyp:
    CANON SX200IS
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    Also ich schiesse einfach mal drauf los.
    Hilf dir selber ist natürlich auch eine Antwort von mir.
    Bin jedoch selber Polo6n Fahrer und Tuner und deshalb helf ich doch gerne ;-)

    Also eine einfache möglichkeit ist:
    Da du ja bereits deine Seite in PS ohne ähnlichem erstellt hast, kannst du jetzt anfangen die Webseite zu slicen.

    Ich denke, da du den Inhalt in die Mitte haben willst, würde ich dir eine HTML,PHP,CSS Seite empfehlen.
    Ich weiß nicht wie gut du bist, aber... laut beitrag..naja...

    HTML: Zeigts
    PHP: Generierts dynamisch
    CSS: macht es sexy

    HTML ist eigentlich immer bei ner webseite dabei

    der html head und body tag sind die interessanten.
    Um das design browserunabhängig zu machen benutze einen wrapper.

    dieser ist ein Kästchen welches in HTML so eingeleitet wird:

    <div>
    Alles hier drinnen ist deine seite
    </div>

    In diesem Wrapper-div können natürlich mehrere layer stehen.
    Du solltest dir einen header, Navigation, Content und den rechten layer anlegen.
    So groß wie du ihn haben möchtest legst du dir auch deine layer an.

    Bedenke:
    HTML erstellts (also <div>INHALT</div> mehr nicht!)
    CSS macht es schön (position absoulte, color, rahmen usw usw)

    um die Inhalte reinzubekommen lege ich dir den PHP include befehl ans Herz welcher HTML inhalte an einer bestimmten stelle einbaut.

    Mit dem HTML-Tag <a href="index.php?option=TUNING">TUNING Extreeeem</a> kannst du dann den inhalt des include skripts auswechseln.
    Durch diese Hyperlinks wird dann die Mitte ausgetausccht um den Inhalt zu ändern.

    auf die INhaltsseite muss halt dann in den content div soetwas:

    <div id="content">
    <?php
    $option = arrray();
    $option['willkommen'] = 'willkommen.php';
    usw
    ?>

    damit dir der inhalt geändert wird und damit überhaupt etwas angezeigt wird:
    <?php
    if(isset($_GET['option'],$option[$_GET['option']]))
    {include $section[$_GET['option']];
    } else {
    include $option['willkommen'];
    }

    ?>

    Denke und hoffe das dir das erstmal den richtigen "Tritt" in die richtige Richtung gibt.

    Und ich kann dir nur empfehlen die Seite SELFHTML 8.0 (HTML-Dateien selbst erstellen) zu "fressen".
    Die ist einfach der Hammer und ist auch bei Erfahrenen Webdesignern sehr belibt und hilfreich.

    Hau rein!
     
    #10      
  11. AlexanderBo

    AlexanderBo Gesperrt

    Dabei seit:
    09.04.2009
    Beiträge:
    425
    Geschlecht:
    männlich
    Ort:
    im Tor zur Welt ;-)
    Software:
    Notepad++ / CS4
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    <ouha>
    war das das wort zum sonntag¿
    mit den angaben (wenn man sich nicht gut auskennt)
    wird er abba nu erstrecht übbafordert sein.
     
    #11      
  12. Tobadin

    Tobadin Noch nicht viel geschrieben

    Dabei seit:
    03.01.2010
    Beiträge:
    31
    Geschlecht:
    männlich
    Ort:
    Regensburg/Lappersdorf
    Software:
    GIMP, Komodo Edit, Filezilla, Corel Draw, Google Chrome
    Kameratyp:
    CANON SX200IS
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    naja @alexanderBo
    guck dir das Template mal an. Er hat sich auch durch Photoshop ansehnlich durchgebissen. warum sollte er das nicht auch mit meiner anleitung schaffen. Für Photoshop hatte er viellleicht auch keinen Leitfaden.

    Ich denke, dass er das schon schaffen wird.

    Wenn nicht: Ich/Wir sind ja nicht aus der Welt und auch hier um solchen unerfahrenen Nutzern eine Hilfestellung zu geben.

    Einen schöne SAMSTAG Abend noch ;-)
     
    #12      
  13. mkuetting

    mkuetting Noch nicht viel geschrieben

    Dabei seit:
    26.02.2010
    Beiträge:
    29
    Geschlecht:
    männlich
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    Sodalle habe mir die letzten Stunden die erste DvD sprichwörtlich rein gezogen.

    Ich konnte auf jeden Fall eine Menge lernen und habe die Testseite die im Video gescriptet wird selbst erstellt sowohl HTML als auch CSS.

    Habe jetzt mein Design mal als ein drei Spalten Design eingestuft.

    Ich kann ja jetzt quasi wie im Video die Seite als HTML mit CSS Zusatz im Head scripten und später dann anhand der einzelnden Spalten das Design einfügen indem ich für jede Spalte ein eigenes background einsetze ?

    Demnach hätte ich dann einmal den:

    - den oberen Bereich (für den Banner)
    - den linken Bereich (erste Navi)
    - den mittleren Bereich (für den Inhalt)
    - den unteren Bereich (als Footer)

    Habe ich das System soweit Korrekt nachvollzogen ?
     
    #13      
  14. Tobadin

    Tobadin Noch nicht viel geschrieben

    Dabei seit:
    03.01.2010
    Beiträge:
    31
    Geschlecht:
    männlich
    Ort:
    Regensburg/Lappersdorf
    Software:
    GIMP, Komodo Edit, Filezilla, Corel Draw, Google Chrome
    Kameratyp:
    CANON SX200IS
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    Ääh ja,
    wenn ich Spalten höre, denke ich an Tabellen, und wenn ich an Tabellen im Web denke, .... :schmoll:

    Fehlt da nicht noch die Nik Spalte?

    Welches Video hast du dir denn reingezogen?
    EDIT: Habs schon gesehen, DVD vom Kumpel
     
    #14      
  15. mkuetting

    mkuetting Noch nicht viel geschrieben

    Dabei seit:
    26.02.2010
    Beiträge:
    29
    Geschlecht:
    männlich
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    Jo,

    also ich habe mir die erste DvD vom Little Boxes komplett angesehen und die zweite habe ich mir gerade teilweise angesehen weil ich langsam zum scripten meiner eigenen Seite kommen möchte.

    Daher tendiere ich im moment dazu mir die Anleitung zu Yaml auf der DvD anzusehen.
    Ist relativ ausführlich beschrieben wie Yaml arbeitet und welche Möglichkeiten es gibt.

    Wenns Euch interessiert versuche ich euch hier auf dem Laufenden zu halten was mein Fortschritt im Umgang mit HMTL, CSS und YAML angeht...
     
    #15      
  16. mkuetting

    mkuetting Noch nicht viel geschrieben

    Dabei seit:
    26.02.2010
    Beiträge:
    29
    Geschlecht:
    männlich
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    So Leute ;)

    Ich habe jetzt immerhin 11,5 Stunden vor der Kiste gesessen und mir die Videos sooo in mein Hirn geprügelt, dass ich immerhin schonmal was auf die beine gestellt habe was sich "sehen lässt.

    Habe mit den <div></div> jetzt das Design sortiert und die CSS mithilde der Videos geschrieben.

    Habe den ganzen kram mal auf meinen Space geladen und folgendes ist dabei raus gekommen: klickmich!!!

    Habe jetzt quasi allen "bildern" auf der Seite eine Feste Breite gegeben (1100px) und die jeweilige Höhe zugewiesen.
    Nur den Textbereich habe ich variabel gelassen damit er sich automatisch verlängert wenn ich in die <div id="textbereich"></div> text oder bilder einfüge.

    Was sagt Ihr dazu ?
     
    #16      
  17. GoMeZ

    GoMeZ Allrounddilettant

    21
    Dabei seit:
    19.06.2009
    Beiträge:
    3.213
    Geschlecht:
    männlich
    Ort:
    Badisch Sibirien
    Kameratyp:
    Nikon D200
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    So für den Anfang sieht das schon mal nicht schlecht aus, aber für 11,5 Std. ein wenig leer ...

    Das lässt sich auch nach einer halben Std. selfhtml auf die Beine stellen ...

    Nicht böse sein, halt meine Meinung.

    Gruß, der GoMeZ
     
    #17      
  18. mkuetting

    mkuetting Noch nicht viel geschrieben

    Dabei seit:
    26.02.2010
    Beiträge:
    29
    Geschlecht:
    männlich
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    Hiho,

    ja ist ja kein Thema aber darfst nicht vergessen, dass ich heute das erste mal programmiere :p

    Habe aber jetzt noch 2 kleine Probleme:
    Ich habe ja oben in der Navileiste eigentlich mehrere Buttons die eine eigene Grafik haben. Jetzt würde ich gern die Grafiken auch horizonzal nebeneinander einfügen, dass es genau so aussieht wie jetzt nur halt als einzelgrafiken wo die trennlinien sind.

    Kann mir jemand einen Tipp geben wie ich das hin bekomme ?
     
    #18      
  19. Samuelll

    Samuelll Aktives Mitglied

    Dabei seit:
    02.02.2009
    Beiträge:
    783
    Geschlecht:
    männlich
    Ort:
    Hannover
    Software:
    PSCS5, Typo3, Joomla, Contao
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    Tip :

    Eine Navi ist eine Liste von Links.

    In HTML sehen die zB so aus

    <ul>
    <li>Inhalt</li>
    <li>Inhalt</li>
    <li>Inhalt</li>
    </ul>

    Statt Inhalt, musst du natürlich eine richtigen Link einfügen.

    Dann sorgst du dafür dass die LI-Elemente via CSS nebeneinander positioniert werden.
     
    #19      
  20. mkuetting

    mkuetting Noch nicht viel geschrieben

    Dabei seit:
    26.02.2010
    Beiträge:
    29
    Geschlecht:
    männlich
    Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe
    AW: Projekt: CSS Anfänger benötigt Schritt für Schritt Hilfe

    HTML:
    1.  
    2. <div id="navibereich">
    3. <ul>
    4.     <li><img src="bilder/polo6Nv4_02.jpg" width="176" height="24" /></li>
    5.     <li><img src="bilder/polo6Nv4_03.jpg" width="77" height="24" /></li>
    6.     <li><img src="bilder/polo6Nv4_04.jpg" width="91" height="24" /></li>
    7.     <li><img src="bilder/polo6Nv4_05.jpg" width="52" height="24" /></li>
    8.     <li><img src="bilder/polo6Nv4_06.jpg" width="73" height="24" /></li>
    9.     <li><img src="bilder/polo6Nv4_07.jpg" width="96" height="24" /></li>
    10.     <li><img src="bilder/polo6Nv4_08.jpg" width="535" height="24" /></li>
    11. </ul>
    12. </div> <!-- Ende navibereich -->
    13.  
    Habe jetzt das hier im HTML stehen aber irgendwie packt er die Bilder nicht direkt aneinander sondern macht nen paar pixel abstand zwischen die inzelnden teile sodass sie in 2 Reihen auftauchen.

    In der CSS Date finde ich keine padding, oder margin abstände die das Verhalten irgendwie bestimmen in dem Navibereich ?!?!:

    HTML:
    1. /* =========================================
    2. Stylesheet Polo6N-GTi.de
    3. Datei: bildschirm.css
    4. Datum: 07.03.2010
    5. Autor: ...
    6.  
    7. Aufbau: 1. Kalibrierung
    8.         2. Allgemeine Styles
    9.         3. Styles fuer Layoutbereiche
    10.         4. Sonstige Sytles
    11. ============================================*/
    12.  
    13. /*      =====================================
    14.         1. Kalibrierung
    15.         ===================================*/
    16.  
    17. * { padding: 0; margin: 0; }
    18.  
    19. h2, p, ul, ol { margin-bottom: 1em; }
    20.  
    21. ol ul { margin-bottom: 0; }
    22.  
    23. li { margin-left: 2em; }        
    24.        
    25. /*      =====================================
    26.         2. Allgemeine Styles
    27.         ===================================*/
    28.  
    29. html { height: 101%; }
    30.  
    31. body {
    32.   background-color: #181818; /* dunkel grau*/
    33.   color: white;
    34.   font-family: Verdana, Arial, Helvetica, sans-serif;
    35.   font-size: small;
    36. }
    37.  
    38. h1 { font-size: 150%; }
    39. h2 { font-size: 130%; }
    40.  
    41. address {
    42.   text-align: center;
    43.   font-size: 80%;
    44.   font-style: normal;
    45.   letter-spacing: 2px;
    46.   line-height: 1.5;
    47. }
    48.  
    49. .skiplink {
    50.   position: absolute;
    51.   top: -5000px;
    52.   left: -5000px;  
    53.   width: 0;
    54.   height: 0;
    55.   overflow: hidden;
    56.   display: inline;
    57. }      
    58.        
    59. /*      =====================================
    60.         3. Styles fuer Layoutbereiche
    61.         ===================================*/
    62.  
    63. #wrapper {
    64.   background-color: white;
    65.   color: black;
    66.   width: 1100px;
    67.   margin: 10px auto;
    68. }
    69.  
    70. #kopfbereich {
    71.   background-image: url(bilder/index_01.jpg);
    72.   width: 1100px;
    73.   height: 162px;
    74. }
    75.  
    76. #navibereich {
    77.   background-color: black;
    78.   margin: 0px;
    79. }
    80.     #navibereich ul {
    81.       margin-bottom: 0px;
    82.     }
    83.     #navibereich li {
    84.       display: inline;
    85.       list-style-type: none;
    86.       margin-right: 0px;
    87.       margin-left: 0px;
    88.       }
    89.      
    90. #namenbereich {
    91.   background-image: url(bilder/index_05.jpg);
    92.   width: 1100px;
    93.   height: 52px;
    94.   }
    95.  
    96. #textbereich {
    97.   background-image: url(bilder/index_03.jpg);
    98.   padding: 10px 20px 10px 20px;
    99.   }
    100.  
    101. #fussbereich {
    102.   background-image: url(bilder/index_04.jpg);
    103.   width: 1100px;
    104.   height: 14px;
    105.   margin-top: 0px;
    106. }        
    107.        
    108. /*      =====================================
    109.         4. Sonstige Styles
    110.         ===================================*/
    111.  
    112.  
    113.  
    114.  
    115.  
    116.  
    117.  
    118.  
    119.  
    120.        
    121. /*      =====================================
    122.         ENDE DES STYLESHEETS
    123.         ===================================*/
     
    #20      
x
×
×