HTML / CSS

Workshop-Serie: Website erstellen

von Patrick Lohmann 4 Kommentare

WordPress Entwickler und Webdesigner

Hallo und herzlich Willkommen zu dieser Workshop-Serie zum Thema Website erstellen.
Ich möchte euch in den nächsten Wochen zeigen wie ihr eine Website clever umsetzen könnt.
Angefangen bei der Ausarbeitung eines simplen Layouts und die anschließende Umsetzung mit (x)HTML, etwas PHP und CSS.

Ziel dieser Anleitung ist es einzelne Arbeitsschritte näher zu bringen, um euch den Einstieg zu erleichtern. Wir werden auf validen Code achten und Schritt für Schritt eine
kleine Website mit Kontaktformular erstellen. Außerdem wird diese als eine Template angelegt. Dazu werden wir später einzelne Inhalte auslagern und mit PHP inkludieren.

Ich möchte euch so auch einen Einblick in meinen Workflow gewähren. Unter anderem wie ich einzelne Projekte plane und in einer sinnvollen Reihenfolge realisiere. Am Ende dieser Serie könnt ihr den kompletten Workshop zusammengefasst als PDF-Dokument kostenlos hier auf dem Webdesign-Podcast herunterladen.

Ich hoffe das ich nun hiermit dem ein oder anderen den Weg zur eigen Website erleichtern kann. Jetzt wünsche ich euch viel Spaß beim lesen und viel Erfolg beim mitmachen.

Anzeige:




Heute:

Sinnvolle Ordnerstruktur anlegen

Eine ordentliche Site fängt bei mir schon bei den einzelnen Ordnern an. Deshalb erstellen wir zunächst einen Ordner für unser Projekt. Ich betitle diesen mit Website-Workshop. In diesem erstellen wir nun weitere Ordner für die verschiedenen Inhalte.

  • CSS – Ordner für die Stylesheets
  • Script – Ordner für verwendete Scripte
  • Images – Ordner für Layout benötigte Grafiken (Background, Icons und Schaltflächen)
  • Media – Ordner für Seiteninhalte wie Videos, Bilder etc.
  • PSD – Ordner für das Layout (Photoshop-Dokument), außerdem eine ReadMe mit Copyright/Quellen-Infos zu eingesetzten Bildern dritter.

Schlagworte zu diesem Artikel: , , , ,

Veröffentlicht von Patrick Lohmann

Redakteur und Autor von Webdesign-Podcast.de. Seit meiner Kindheit bin ich kreativ unterwegs. Als Medienkünstler erstelle ich unter anderem reale und sureale Bildmanipulationen (Composings). Aber auch im Bereich Webdesign & Coding fühle ich mich zuhause. Als Autor erstelle ich unter anderem Tutorials und gebe mein Wissen an Interessierte weiter.

4 Antworten zu “Workshop-Serie: Website erstellen”

  1. Bin gespannt was die Workshop-Serie so mit sich bringt.
    Die Ordnerstruktur ergibt fuer mich im Moment keinen Sinn, da Dateen fuer die Produktion (psd) im gleichen ordner liegen wie die Ordner der Umsetzung. Die Gefahr liegt wirklich nahe, dass man den PSD-Ordner direkt mit auf den Server schiebt.

    Und ganz nebenbei – das Feld hier unter fuer die Email-Benachrichtungenaktiv zu setzen machen den Blog, neben der vielen offensichtlichen Werbung, arg unsympathisch. Nur mal so’n Denkanstoß..

    Lg

  2. Genau so wird das gemacht, ohne Ordnerstruktur geht gar nichts. Würde aber die Inhalte der Site niemals mit den Rohmaterial wie der PSD und den Quellen oder gar den Orginal Stock Fotos in einen Ordner packen- sicher ist sicher.

    • Bei mir ist es doppelt gemoppelt 😉 Ich kopiere eigentlich immer aus meiner Stocksammlung die verwendeten Bilder in den Projektordner. Also erst herunterladen, sortieren und dann eine Kopie zum Projekt.

      Grüße Patrick

  3. Ich hab mir auch eine fertige Struktur angelegt, die zum Teil nur kopiert wird für das neue Projekt. Hierbei gibt es nur 2 verschiedene Konzepte: die Struktur für statische Websites und die Struktur für dynamische Websites. So spart man sich ein haufen Zeit!

Kommentar verfassen

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.

Der Benachrichtigungs-Dienst wird von WordPress.com (Automattic Inc., USA ) bereitgestellt. Mit der Anmeldung akzeptierst du die Datenschutzerklärung. Die Abmeldung / Abo-Verwaltung ist jederzeit über diesen Link möglich.