Suche im Forum:
Suchen


« Vorheriges Thema anzeigen :: Nächstes Thema anzeigen »  

War dieses Tutorial hilfreich?
Ja
  100%
[ 2 ]
Nein
  0%
[ 0 ]
Ja, aber... (im Thread erleutern)
  0%
[ 0 ]
Nein, weil... (im Thread erleutern)
  0%
[ 0 ]
Stimmen insgesamt : 2

Autor Nachricht
Beitrag26.09.2010 um 11:21 (UTC)    
Titel: [Video] Tutorial: Übersicht im Code behalten

Tutorial: Übersicht im CSS Code behalten
Das Problem
Jeder CSS Coder kennt das, man codet und codet und irgendwann möchte man
etwas ändern. Doch was ist nun? Man findet den zuständigen Teil im CSS nicht
mehr wieder. Man sucht und sucht, aber der Code ist einfach zu lang.

Die Lösung
Die Lösung für dieses Problem besteht aus vielen Teilen. Es geht darum den
Code anders zu schreiben, einige Dinge hinzuzufügen und so die Übersicht
über ihn zurück zu erlangen.

Schritt 1: Texteditoren
Als ersten Weg aus dem Chaos, solltest du deinen Code nicht in der kleinen
Textbox bearbeitet, sondern ihn in einen Texteditor kopieren, dieser arbeitet
mit einem großen Textfeld, welches dir eine deutliche Übersichtverbesserung
verschafft.
Du kannst jeden Editor verwenden den du willst, am besten geht es aber mit
einer Umgebung die Extra zur Entwicklung gemacht wurde, zum Beispiel Net-
Beans
. Für den Anfang reicht aber auch WordPad oder der ganz normale Edi-
tor.

Schritt 2: Das Einrücken
Jetzt kommt ein sehr großer Schritt, das Einrücken des Codes. Was ist das?
Ganz einfach, beim einrücken werden Teile vom Code nach rechts verscho-
ben, dadurch sieht man deutlich was zu was gehört. Einrücken tut man mit
der Tabulatortaste, diese ist oben links auf der Tastatur, es befinden sich 2
Pfeile darauf.
Doch wie sollte man einrücken? Ich zeige euch einmal ein Bild eines einge-
rückten und eines nicht eingerückten Textes, dadurch wird der Unterschied
deutlicher.
1. CSS Code ohne einrücken
2. CSS Code mit einrücken
Was habe ich gemacht? Zuerst habe ich den Code in Zeilen aufgeteilt. Ich
jede Option in eine neue Zeile gesetzt. Dann habe ich mit dem Cursor vor
eine Zeile geklickt und die Tabulatortaste gedrückt, dadurch wird der Text
eingerückt.

Schritt 3: Kommentieren des Codes
Der vorletzte Schritt ist das Kommentieren des Codes. Was heißt das? Das
heißt dem Code kleine Beschreibungen hinzuzufügen. Somit erspart man sich
suchen, da man nach dem Element nur in den Überschriften suchen muss.
Kommentare in CSS fangen mit diesem Zeichen an /* und hören mit */ auf, da-
zwischen steht das Kommentar.
Ein Kommentar ist also sehr simpel aufgebaut, also ist es auch einfach einige
zu deinem Code hinzuzufügen. Mein Beispielcode könnte mit Kommentaren
etwa so aussehen:
CSS Code mit Kommmentaren
Ich habe also /* und */ genommen und mein Kommentar dazwischen gesetzt.
Der Browser wird die Kommentare nicht auf der Seite anzeigen, sie helfen dir
aber dich in deinem Code zurechtzufinden.

Schritt 4: Im Baukasten einfügen
Jetzt wo wir den Code im Editor fertig haben, wollen wir ihn ja auch auf der
Seite. Also kopieren wir ihn im Editor und fügen ihn einfach im Baukasten
ein. Die Werte kann man auch sehr gut direkt im Baukasten verändern, da
man sich nun zurecht findet.

Weitere Möglichkeiten
Es gibt noch viele weitere Möglichkeiten Code zu formatieren. Zum Beispiel
mehrzeilige Kommentare oder mehr Tabulatoren/Zeilen. Ich möchte euch nur
einmal den Endcode im Vergleich mit dem Anfangscode zeigen:
1. CSS Code ohne Formatierung
2. CSS Code mit Formatierung
Viel besser, oder nicht?

Ich hoffe ich konnte euch ein bisschen helfen.

Gruß,
Frederike


Zuletzt bearbeitet von teora am 28.09.2010, 19:03, insgesamt 2-mal bearbeitet
Beitrag28.09.2010 um 17:59 (UTC)    
Titel:

HD Video ist fertig, siehe Post unten!


Zuletzt bearbeitet von teora am 29.09.2010, 17:00, insgesamt 2-mal bearbeitet
Beitrag29.09.2010 um 16:00 (UTC)    
Titel:

Tutorial Video jetzt auch in 1080p HD!
http://www.youtube.com/watch?v=rQPU8H1hsro
Beiträge der letzten Zeit anzeigen:   


Powered by phpBB © 2001, 2005 phpBB Group
Deutsche Übersetzung von phpBB.de