<b>REGISTER</b>

GFX-Sector - HTML & CSS Tutorials


 
GFX-Sector » Coding Area » Coding-Tutorials » HTML & CSS Tutorials » [HTML/CSS] [Tutorial;HTML] Wie code ich ein Design? » Hello Guest [Login|Register]
Last Post | First Unread Post Print Page | Recommend to a Friend | Add Thread to Favorites

HTML & CSS Tutorials

Tutorials über die Auszeichnungssprache HTML und Formatierungssprache CSS
Pages (2): [1] 2 next » Post New Thread Post Reply

[Tutorial;HTML] Wie code ich ein Design?

     Deutsche Version  English version
Author
Post « Previous Thread | Next Thread »

PearlyGates PearlyGates is a male
Abwedler


Avatar von PearlyGates

Registration Date: 13.07.2009
Posts: 206
Location: Hamburg
Program: Photoshop Elements 10

Spacer
[Tutorial;HTML] Wie code ich ein Design?

[Tutorial;HTML] Wie code ich ein Design?

      

Für viele Leute ist es schwer von HTML Lehrgängen auf das Coden eines Designs überzuspringen.

Dies ist jedoch ein Tutorial für ein einfaches 3 Zeilen Design. Um auf kompliziertere Designs umzuspringen benötigt man mehr Geschick und z.B. Tabellen in den Tabellen.

Ihr braucht bei diesem Tutorial keine FTP Kenntnisse, d.h. es ist auch für blutige Anfänger geeignet!

Hidden-Text
Guests cannot see the hidden text. Sign up today for free on our forum and enjoy all its advantages as a registered member!


Gruß,
Greckoe



Thanks for this thread by the author

Until now 371 users have thanked
|~Râdîant~|, Rufus, bra1ved., b00m15, Shinto, alfa, Trone, ACMILAN, bpr, Dimon, a.art, z0nK, Flown, Banana, Virus Graphics, Driftstyle, 3N3R6, 91effi, style2live, epic-VARfx, Oraniya, Goku, Eazy, BoddAH, P1LL3, Miracoly, Domenik, kosova-vibez, F4nt4st1cK, paperwinged, Bluesky, Giana92, Han, SpeedY, Dark-Minaz, PureChaos, IceDive, kruemelbaer, f4k3, Imitati0n, just-magic, taco, Fynn, B!M3O, dadldidou, Darkfinal, hawk036, Hais, fr3sh, Colin93, Diabulus, Marsel13, behappy, Barrk, D4B2nny, DarkBig, Razor_X8, hami, rrrumschch, JD-Designs, darkzoqq, Passi, Balthasar, BlackRains, Sholez, GoodFellaz46, egK, quantum, Pluetra, T-P, xero, Muffinrator, Paulp422, firefighter, g4MBLe, bNzox, snake grey, Asakura, Kaisaha, loxxis, Raken, King-Style, Surako, Killerfleck, Tuxedo, Nimou, Strike_Force, Kaizoun, evoo, patrick-fotografie, Bl4Ck., Tobi95, voiD, ccvadimcc, Yousef, phesix, ReaktionZ, ozanchecker, Stunner, LeCruche, gf0x, Mega Hype, DeeViL, spriter1337, JJ74, dmn., songohan, Nordlander, muH, robby12, F.Breezy Designz, MwBadboy, Damager0015, grauerWolf, Chail93, s4lt, tortschi, Balioo, Rusquad, Chillkröte, KeKsDoSe, Syncx, SCRIPT, punky-girl, xenobeta, gandalf, Kevin_bassbox, chju, rForce, Trigek94, Donauwacht, Iwie, Lamborghini95, Dark-Slasher, Artemis, xiNFECTED, burak94, dj-cueliner, Neo221, Judazzz, Graphit, Breakdown, ErrorX, sou7h, GHOSTY GFX, ph0g, painsi, VCJunk, Icyice, xXxPaddyxXx, xXx.B-Boy.xXx, Kleinafk, GreenLemon, Zin3D, musel_marvin, Super4uwak, bobbito, minotaurus95, iScream, Sn!ps, Boarder, FlashCreative, moep337, Razer87, 1337king, RaMPaGE32, Lightning, Roxas, R-Me-Designs, White1994, mudz, A1rDev1l, Death the Kid, Hanni., Unique^, Execute, Sn0x92, bababeem, SlinGo, bitmate, $amyyy, NarID, R0N1N, PhilippIllgen, pArAno!d, cocain2brain, KreaTiVii, a-ndi, fellatio, Asoraxis, th3flood, MaxBrother, moonblade, Woolf66, Snow, willywonka, Oduischu, Ellomaethen, bueh, .ShiX, ShaXe, ++Chrischan++, Naish, C1rca12, dark_eve, Inmice, mawada., Star-Des1gn, TwiX, FireDragon, novaxd, Ginyanote, Phazory, Refresh_92, Thoken, Crash, Mitusen-Service, D-Generation-X, Rokky, joyicool, darex, Pizog, Sera, Ronnyffm, saderg, Daispro, hairichi, Tombob, Rubicx, ssr08, Nairor, Engel, the red prince, si33e, qasalistan, wumpie, sh4dowov3rlo4d, CH3Za, Pico, Fif, flizzy, JazeeRa, elysium91, Paco, myStiik, rbN, Arnold, Impala, cl0ud, flensburg, Anything., xUnkn0w.Design, Ghini, Ali3n, PaNix, Tim1995, craplez, BBmaster, Tegron, Hannoi, cloudstrike, Kitiara, pattyhome3, X5-452, r.Kapix, SlyFam, MantiCore, Yuki, LogiC, Dugen, Firecracker, dncednce, StrikeR., yannick., 4xample, cyrox21, br4inshot, rem1720, Brisingr, noisekick, koruso, Zerox10, naIKon, linkii, __L9, congo, TristanT, Seventeen, antar, Akasuki, shengli, Annununu12, Black_Schadow, Anguz, Cinemaxx, goggelz, Chiyo, sancezz10, Jacksen, Paule, Devil_, bengaltiger, Boyclar, calv-inn, aslan54, Misaki-pyon, markeloff, Profilein, feuerboy7, BoGaRaM, G-DRAW, Juan., McDeniz, antonio.s-itse, Rabe, fLayZeeGFX, eltoro, FreshT, tbone.10, Neptvn, Laurana, SQ-DESiGN, HTMLFreak, Tommyx3, SaINT, Seyftart, JayZ, IceTea.GFX, native, Rasenmäher, Cannoo, Nafra, ZabZon, Eps-Portal, Dynamite, blacky94, YoungHollywood, .DubStepZ, LunariS, Borlei, Kazel, mrhood, c00ky, Virtual, zarii, ShoKKer, Faithless, Month, phantasm, dbaaf, GimpArt, Samy95, TaiLi, ltachi Uchiha, xXFreakdellexX, swaka, NanashiChan96, DeroxX, Leuxy, Marvin-Gfx, .Neelix., AS-Media, Soulsonic, PixelPerfectDesign, xMaxanGex, Stardesigns, zoftturbo, kEWY, Oremiyo1hit, rvs14, F4n


This post has been edited 7 time(s), it was last edited by PearlyGates: 23.04.2011 23:24.

[Tutorial;HTML] Wie code ich ein Design? 19.07.2009 17:04 PearlyGates is offline Search for Posts by PearlyGates

Iron.Mike Iron.Mike is a male
Pfadfinder


Avatar von Iron.Mike

Registration Date: 24.04.2009
Posts: 606
Location: Düsseldorf
Program: Cs3/Terragen
Deviantart: xXIronMikeXx

Spacer
      

mal auschecken...danke für deine Mühen!

edit folgt...





.Gifts

.Trend Whores
[Tutorial;HTML] Wie code ich ein Design? 19.07.2009 17:07 Iron.Mike is offline Homepage of Iron.Mike Search for Posts by Iron.Mike

Steffi Steffi is a female
Scharfzeichner


Avatar von Steffi

Registration Date: 21.06.2009
Posts: 131
Location: Österreich
Program: Adobe Photoshop CS5

Spacer
      

quote:
Original von Greckoe
Ich hatte den Haken Punkt beim Bedanko gemacht. Vielleicht ist er nach der Vorschau wieder weg oder so...


Korrekt.
Wenn du vor dem Absenden noch in die Vorschau gehst, ist der Haken beim Bedanko wieder raus... Wink

[Tutorial;HTML] Wie code ich ein Design? 19.07.2009 17:27 Steffi is online Search for Posts by Steffi

PearlyGates PearlyGates is a male
Abwedler


Avatar von PearlyGates

Registration Date: 13.07.2009
Posts: 206
Location: Hamburg
Program: Photoshop Elements 10

Thread Starter Thread Started by PearlyGates
Spacer
      

quote:
Original von Steffi
Korrekt.
Wenn du vor dem Absenden noch in die Vorschau gehst, ist der Haken beim Bedanko wieder raus... Wink


Gut zu wissen... xD.

Naja morgen kommt das nächste tut, ist schon eigentlich schon fertig, nur keine Lust es jetzt mit BBCodes hier reinzutun.



[Tutorial;HTML] Wie code ich ein Design? 19.07.2009 17:37 PearlyGates is offline Search for Posts by PearlyGates

marc1812
Filtertester


marc1812 hat kein Avatar

Registration Date: 18.07.2009
Posts: 2

Spacer
      

Ich bedanke mich auch mal als neuer User: Hallo und Danke großes Grinsen großes Grinsen

[Tutorial;HTML] Wie code ich ein Design? 19.07.2009 18:16 marc1812 is offline Search for Posts by marc1812

PearlyGates PearlyGates is a male
Abwedler


Avatar von PearlyGates

Registration Date: 13.07.2009
Posts: 206
Location: Hamburg
Program: Photoshop Elements 10

Thread Starter Thread Started by PearlyGates
Spacer
      

Das 2te Tutorial ist unter der selben Kategorie zu finden.



[Tutorial;HTML] Wie code ich ein Design? 20.07.2009 14:02 PearlyGates is offline Search for Posts by PearlyGates

Fireball Fireball is a male
Boardchef


Avatar von Fireball

Registration Date: 11.11.2006
Posts: 16,355
Classing-Rank: GFX-Sector
Location: Bremen, Deutschland
Program: Adobe Photoshop CS2
Deviantart: oenismaster
Forums: (alle)

Spacer
      

Off-Topic

Mit einem Klick auf dieses Icon kannst du auch nachträglich noch den Bedankomat hinzufügen Wink



[Tutorial;HTML] Wie code ich ein Design? 20.07.2009 20:54 Fireball is offline Homepage of Fireball Search for Posts by Fireball

quantum quantum is a male
Pfadfinder

Spender


Avatar von quantum

Registration Date: 29.12.2008
Posts: 721
Deviantart: xcracx

Spacer
      

Hmm das Tutorial ist ja lieb gemeint und so weiter, aber dennoch führt es nur zu schlechtem Code.

Ich habe mal drübergeschaut und gesehen, dass die Doctype deklaration fehlt, auf Meta-tags bist du garnicht erst eingegangen und hast überhaupt recht wenig erklärt.

Außerdem benutzt du Tabellen um dein Layout zu formatieren.
Absolutes no-go....

Ist nich Bös' gemeint, aber es ist einfach unbrauchbar.


lg



[Tutorial;HTML] Wie code ich ein Design? 21.07.2009 10:21 quantum is offline Homepage of quantum Search for Posts by quantum

PearlyGates PearlyGates is a male
Abwedler


Avatar von PearlyGates

Registration Date: 13.07.2009
Posts: 206
Location: Hamburg
Program: Photoshop Elements 10

Thread Starter Thread Started by PearlyGates
Spacer
      

Jeder codet seine Designs anders, du wirst Profis antreffen die ihre Designs immernoch mit Tabellen coden. Das ist geschmackssache und führt im endeffekt zum selben Ziel.

Divs sollen ja angeblich jetzt genutzt werden um den Code sauber und übersichtlich zu gestalten, doch ich glaube es ist schon schwer genug HTML zu lernen, da braucht man sich nicht schon am Anfang mit CSS totzuschlagen.

Zuden Meta-Tags:
Zuerst mal möchte ich erwähnen, dass das Tutorial "Wie code ich mein Design heißt" und nicht wie optimieren ich meine Website mit Meta Tags.
Und zweitens hab ich beim lernen von HTML auf den verschiedensten Seiten immer gesagt bekommen "Meta Tags werden, zumindest Suchtspezifisch, von kaum einer Suchmaschine noch genutzt und sind daher eher Unnütz" oder Ähnliches. Was der Rest der ganzen Tags tut, hat mich nie wirklich intressiert.

Doctypes, ja das hätte ich noch erwähnen können, ich denke jedoch, dass die meisten bereits mit einem HTML Editor arbeiten, so hab ich zumindest angefangen. Dort werden dir die Doctypes direkt mit dem erstellen einer neuen Datei mit geliefert.

//Mein Fazit: Tabellen sind für Anfänger die einzige zutraubare Methode zum coden eines Designs.

Gruß,
Greckoe



This post has been edited 1 time(s), it was last edited by PearlyGates: 21.07.2009 12:14.

[Tutorial;HTML] Wie code ich ein Design? 21.07.2009 12:12 PearlyGates is offline Search for Posts by PearlyGates

quantum quantum is a male
Pfadfinder

Spender


Avatar von quantum

Registration Date: 29.12.2008
Posts: 721
Deviantart: xcracx

Spacer
      

Jeder codet seine Designs anders, du wirst Profis antreffen die ihre Designs immernoch mit Tabellen coden. Das ist geschmackssache und führt im endeffekt zum selben Ziel.

Schade oder?
Profis die Scheisse bauen, wirst du immer und überall finden.
Denn das sind keine Profis.

Meta tags und die Doctype deklaration gehören nichts desto trotz zu einem Kompletten Layout!
Und wenn dein Editor das automatisch einfügst, wieso erwähnst du das dann nicht?


Mein Fazit:

Du verwendest wissen aus dem vorigen Jahrhundert.
Dein Layout würde im Quirks Modus laufen... echt schade.

Du scheinst selber nich soviel ahnung auf dem Thema zu haben.

Es ist woh komplizierter und umfangreicher einem newb zu erklären, dass er alles in tabellen spalten und reihen einteilen muss.
Wenn du einfach erzählst, dass das design in ein paard bereiche eingeteilt wird und in divs geklatscht wird, wärst du schneller aber egal.
Auf erklärung hast du anscheinend größtenteils verzichtet.

Wenn du mich Vollflamen willst, dann bitte per PM.

Noch ein paar schlagworte für dich.
Damit kannst du dich auseinander setzen, bevor du mich vollflamest.

Tabellenlayout(Semantik)
Inner CSS
Text als Bild(unnötig?)
usw.

lg



[Tutorial;HTML] Wie code ich ein Design? 21.07.2009 16:54 quantum is offline Homepage of quantum Search for Posts by quantum

PearlyGates PearlyGates is a male
Abwedler


Avatar von PearlyGates

Registration Date: 13.07.2009
Posts: 206
Location: Hamburg
Program: Photoshop Elements 10

Thread Starter Thread Started by PearlyGates
Spacer
      

Ich selber werde nie auf Divs umsteigen wollen. Denke auch nicht, dass das wirklich nötig ist.

Jeder hat seine eigene Meinung die er auch vertritt, deine scheint genau das Gegenteil meiner zu sein, aber was solls.

Ich bitte dich auf diesen Post keine Antwort zu geben und es einfach auf sich beruhen lässt.



[Tutorial;HTML] Wie code ich ein Design? 21.07.2009 16:58 PearlyGates is offline Search for Posts by PearlyGates

Diabulus
Scharfzeichner


Avatar von Diabulus

Registration Date: 18.09.2008
Posts: 131

Spacer
      

Echt lieb von dir gemeint, aber wie willst du denn da noch was draus machen, din Stil ist wirklich veraltet. Versuch CSS einzubringen, damit kannst du dann wenn du schwirigere Designs hast Pixel genau arbeiten und das ist wichtig.
Ausserdem kannst du so einen overflowbefehl geben, der dich scrollen laesst und dasist nur ein kleines bisschen von dem was du ohne CSS nicht hast.







Ich bin der Shit wie ein umgedrehter Tisch




[Tutorial;HTML] Wie code ich ein Design? 29.07.2009 08:52 Diabulus is offline Search for Posts by Diabulus

Icyice Icyice is a male
Weichzeichner


Avatar von Icyice

Registration Date: 26.07.2009
Posts: 72
Location: Elsfleth
Program: PS

Spacer
      

Habe mir das auch mal angeguckt und muss sagen, dass ich es super finde, dass du überhaupt ein Tutorial gemacht hast. Sicherlich ein "kleine" Hilfe für Einsteiger, aber nicht mehr und nicht weniger. Wenn man ein Tutorial macht, dass muss es wenigstens die Grundeinstellungen enthalten. Und da ist der Doctype echt wichtig, sowohl auch das html xmlns. Den <head> Bereich hast du komplett ausgelassen und du arbeitest noch mit Tabellen, in den Programmierforen spricht man da von "Altsteincoder". Metatags fehlen völlig, css ganz und gar [...]. Möchte auch nicht näher auf Alles eingehen. Ist auch nicht böse gemeint, sieh es einfach als Hilfe für das nächste Tutorial Wink .





lg Icyice Wink
[Tutorial;HTML] Wie code ich ein Design? 29.07.2009 15:59 Icyice is offline Homepage of Icyice Search for Posts by Icyice

PearlyGates PearlyGates is a male
Abwedler


Avatar von PearlyGates

Registration Date: 13.07.2009
Posts: 206
Location: Hamburg
Program: Photoshop Elements 10

Thread Starter Thread Started by PearlyGates
Spacer
      

So wenn das so ist dann folgt in spätestens 2 Tagen der Reload des Tutorials mit all dem Kram den ihr bei dem hier vermisst habt. Wird natürlich auch auf Div und Outer CSS umgestellt sein.



[Tutorial;HTML] Wie code ich ein Design? 29.07.2009 17:30 PearlyGates is offline Search for Posts by PearlyGates

Chillkröte Chillkröte is a male
Scharfzeichner


Avatar von Chillkröte

Registration Date: 07.06.2009
Posts: 136
Location: BW

Spacer
      

quote:
Original von Greckoe
So wenn das so ist dann folgt in spätestens 2 Tagen der Reload des Tutorials mit all dem Kram den ihr bei dem hier vermisst habt. Wird natürlich auch auf Div und Outer CSS umgestellt sein.


das hört sich doch gut an smile weil coden mit Tabellen ist nicht "Geschmachssache" sondern "wurgs" großes Grinsen aber dazu haben meine Vorredner ja schon genügend gesagt, kann mich dem nur anschließen...




:guckstduhier: mein Portfolio

Mit freundlichen Grüßen Chillkröte
Support via PN, ich nehme keine ICQ-Anfragen an!
[Tutorial;HTML] Wie code ich ein Design? 12.11.2009 23:26 Chillkröte is offline Search for Posts by Chillkröte
 
Spacer
   
GFX-Sector
unregistered


 hat kein Avatar


Spacer

Have you enjoyed this topic?


If you were enjoying this post and if you keen on reading more interesting stuff then do not hesitate to complete the free sign up.

After the free registration you will gain access to all areas and you will be able to communicate with other artists from all over the world.

In addition you will benefit from our Photoshop and coding section as well as from our huge (hundreds of gigabytes) free resource section where you can find everything you will need to be a successful (web) designer/artist.

Sign up now and enjoy the advantages as a registered member.

(This website will be ad-free after a complete free sign up.)

New Post 25.01.2012 17:35  
Pages (2): [1] 2 next » Tree Structure | Board Structure
Post New Thread Post Reply
GFX-Sector » Coding Area » Coding-Tutorials » HTML & CSS Tutorials » [HTML/CSS] [Tutorial;HTML] Wie code ich ein Design?

Similar topics to [Tutorial;HTML] Wie code ich ein Design?
Thread
Wieder zwei Tags ^^ (Forum: Signaturen/Avatare)
ein verdammt korrupter mod (Forum: Gifts)
Sotw Einsendung 24.01. - 31.01. (Forum: SOTW-Ankündigungen)
[Anderes] Holzwand für Webdesign (Forum: Archiv)
Battlesieger egK-Design (6) (Forum: 1on1 Halle)