HTML und CSS für Designer

Ordnerstruktur einer HTML-Umgebung

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Webseiten bestehen in der Regel aus einer Vielzahl einzelner Dateien. Mit der passenden Ordner- bzw. Verzeichnisstruktur behält man den Überblick.

Transkript

Komm wir zu HTML. Naja noch nicht ganz, aber wir nähern uns mit Riesenschritten. Ebenso wie Sie bei einem normalen Designprozess oder bei Gestaltungsaufgaben vermutlich Ihre Projektordner anlegen, empfiehlt es sich, das auch für die HTML-Programmierung zu tun. Zum Beispiel haben Sie für ein Projekt, das Sie durchführen, den Ordner Projekt. Dann würden Sie in diesen Ordner weitere Verzeichnisse hineinlegen. Zum Beispiel Bilder oder Objekte. Je nachdem, was sie dort verwenden. Dann gibt es die Möglichkeit, Skripte einzutragen und so weiter und so fort. Also ich denke mal, so würden Sie wahrscheinlich bei einem Projekt vorgehen. Vielleicht hier oben der Projektname, und bei HTML ist das in gleicher Art und Weise durchzuführen, nur, dass wir kein Ordner Projekt haben, sondern hier einen Ordner zum Beispiel "root" oder "HTML" könnte man auch sagen. Es kommt sogar noch hinzu, dass diese Ordner sehr häufig vom Webserver vorgegeben sind. Wobei wir jetzt keinen verwenden, damit können wir da einen Namen eingeben, den wir uns frei aussuchen können. Ich nehme mal hier "website" und in diesen Ordner "website", also unser Projekt, dort hinein kommt ebenfalls das, was wir im Prinzip bei jedem anderen Projekt auch verwenden, nur sind es englische Begriffe, das ist zumindest empfehlenswert. Also das, was in einem herkömmlichen Projektordner "Bilder" heißt, bekommt hier den Namen "images". Das ist funktionsmäßig nicht zwingend. Sie können Namen vergeben, wie Sie möchten, wenn Sie auf Sonderzeichen, Leerzeichen und Umlaute verzichten. Aber es empfiehlt sich. Wenn Sie ein wenig Recherche betreiben und sich an anderen Projekten orientieren, wie lösen andere ein HTML Problem, oder ein CSS Problem, dann werden sie immer wieder auf diese Schreibweisen stoßen. Hinzu kommt, dass natürlich die Sprachsyntax von HTML und CSS ebenfalls englischer Natur sind. Da passt es einfach viel besser ins Bild. Also das ist durchaus empfehlenswert, sich daran zu gewöhnen. Und das, was hier die "images" sind, das sind hier eben die Bilder. Ich denke, das kann man leicht transferieren. Da gibt es einen weiteren Ordner, der beinhaltet dann sämtliche stilistischen Informationen, und den benennt man entweder als "Style" oder auch häufig als "CSS". Ich lasse das mal so stehen, weil das beschreibt recht nett, wo die spätere CSS Datei hinein soll. Genau so wie hier würde man dann auch wenn notwendig Script oder Scripting, oder häufig findet man das Kürzel "JS", für alle weiteren Objekte stellvertretend aufgreifen. Sie haben also die Wahl. Das ist weder beschränkt noch in irgendeiner Form reglementiert. Es ist halt nur die Vorgabe, wie sie die meisten Entwickler verwenden, und da wir in unserem Projekt für die Online-Umsetzung des Magazins kein Javascript benötigen, schmeiße ich das direkt wieder weg. Übrig bleibt unser eigentliches Projektverzeichnis für die Website mit den Verzeichnissen "images", dort hinein kommt sämtliches Bildmaterial, und dem Ordner "css", dort hinein kommen die Formatangaben in Form einer Stylesheet-Datei. Und dann kann es losgehen.

HTML und CSS für Designer

Steigen Sie als Designer ein in HTML und CSS. Sie gestalten ein responsives Reisemagazin und erleben dabei, dass der Workflow beim Gestalten nicht anders ist als gewohnt.

3 Std. 9 min (39 Videos)
Derzeit sind keine Feedbacks vorhanden...

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!