Ideal zum Lernen:
Kurs als Videos
Video-Kurs HTML5, CSS
& Webdesign
HTML-Kurs, CSS u. Webdesign lernen & die eigene Website erstellen
Videos eBook Forum Kontakt
Sie befinden sich: Startseite » HTML lernen – Website erstellen & strukturieren » Vorgehensweise Website erstellen

Vorgehensweise Website erstellen

Website entwerfen, planen und umsetzen – wie fange ich an?

Das Gute beim Entwickeln von Webseiten ist, dass man komplett unabhängig vom Computersystem und Editor ist. Es ist egal ob man Windows, Mac oder Linux verwendet und welcher Editor benutzt wird – am Ende steht eine bzw. mehrere HTML-Seiten. Diese werden (sollten) auf jedem beliebigen Internetbrowser (IE, Firefox, Chrome, etc.) angezeigt.

Trotzdem sollte man sich im Vorfeld Gedanken machen, wie man startet. Das kann einem viel Aufwand und Änderungsarbeiten am Ende ersparen.

In der Praxis haben sich folgende Schritte bewährt:

  1. Zielsetzung festlegen
  2. Konzeption der Inhalte
  3. Konzeption des Designs
  4. Umsetzung der Inhalte und Struktur in HTML
  5. Umsetzung des Designs in CSS
  6. Website live stellen
  7. Die Website promoten
  8. Kontrolle

Schauen wir uns an, was sich hinter den einzelnen Punkten verbirgt.

Zielsetzung der Website festlegen

Extrem wichtig ist das Festlegen des Ziels der Website. Ohne dass man ein Ziel vor Augen hat, kann man auch nicht den direkten Weg einschlagen. Ist man beim Lernen von HTML, kann das Ziel sein, alle wichtigen HTML-Befehle kennen zu lernen und zu lernen, wie man Design in CSS umsetzt. Erstellt man eine Website für eine Firma oder einen Verein, dann sollte man sich bereits überlegen, was das primäre – das wichtigste Ziel der Website sein soll.

Die Ziele können sehr unterschiedlich sein. Sollen damit

  • neue Kunden (Vereinsmitglieder) geworben werden,
  • Produkte verkauft werden
  • die Termine veröffentlicht werden
  • und vieles mehr

Dieses Ziel sollte man sich auf ein Stück Papier (ja das altertümliche Mittel um Sachen schwarz auf weiß anhand eines Stiftes festzuhalten) notieren und an die Wand vor sich pinnen. Auch wenn man die Website für jemanden anderes macht: zusammen das Hauptziel festlegen und schriftlich fixieren. Das Ziel kann sich vielleicht im Erstellungsprozess verändern bzw. präzisieren – aber das Ziel ist für die folgenden Punkte extrem wichtig.

Die Zielsetzung enthält im Endeffekt auch die Zielgruppe. Denn bei einem Ziel hat man auch immer eine Zielgruppe im Auge. Die Aussage „Alle“ ist ein bisschen unpräzise. Und zielt man auf alles, trifft man im Endeffekt nichts. Also auch hier festlegen und auf dem Papier notieren.

Gehen Sie in sich und überlegen Sie – Warum soll es diese Website geben. Was ist der Mehrwert für den Besucher der Website.

Konzeption der Inhalte

Nachdem wir das Ziel der Website festgelegt haben, können wir uns auf die Konzeption (schönes Wort für „Was steht denn eigentlich an Inhalt (NICHT Design) auf der Website“) stürzen. Anhand unserer Zielsetzung können wir jetzt überlegen, welche Informationen auf die Website müssen. Wollen wir beispielsweise eine Ferienwohnung im Harz vermieten, dann sind die Informationen

  • wo ist diese
  • ist diese überhaupt frei und verfügbar
  • für welche Zielgruppen ideal
  • was gibt es in der Umgebung

Anhand unserer Festlegungen des Ziels ist es jetzt deutlich einfacher, sich Gedanken zu machen, was für Information die Zielgruppe wahrscheinlich auf der Website erwartet. Auch einfach einmal jemand aus der Zielgruppe befragen.

Zu den Inhalten können auch Informationen anhand von Bildern und Grafiken sowie Videos gehören. Alles was Inhalt ist – nicht Design! Zum Design kommen wir im nächsten Punkt.

So kommen wir schon auf eine Anzahl von Einzelseiten. Für jedes Thema legen wir am besten eine Einzelseite an.

Konzeption des Designs

Nachdem wir das Ziel und den Inhalt haben, machen wir uns Gedanken zum Design. Dieses sollte das Ziel und die Inhalte unterstützen. Machen wir eine Website für die Vermietung einer Ferienwohnung für Wanderer, dann wird einem sehr schnell vor seinem inneren Auge grüne Landschaften, graues Felsgestein mit Wanderwege und blauer Himmel erscheinen. Und schon haben wir die Farben für unser Design. Wir können nicht für Umweltschutz werben und Rennautos und die Farbe "Ferrari Rot" im Design verwenden – das wird nicht wirklich klappen.

Anhand der Anzahl der Einzelseiten können wir jetzt überlegen, ob ein

  • 1 spaltiges Layout (Steuerung sitzt quer drüber – wenige Punkte i.d.R.)
  • 2 spaltiges Layout (eine Spalte für die Steuerung)
  • 3 spaltiges Layout (eine Spaltung Steuerung, eine Spalte Inhalt, eine Spalte Randinformationen)

Wählen Sie das passende Layout für Ihr Ziel, Zielgruppe und Menge an Inhalt!

Umsetzung der Inhalte und Struktur in HTML

Jetzt können wir endlich mit dem starten, für was die meisten diesen Kurs hier lesen. Unsere Inhalte auf eine Website bringen und die notwendigen HTML-Befehle nutzen. Über HTML erstellen wir die Struktur der Website. Im ersten Teil des Kurses werden wir alle wichtigen HTML-Befehle kennen lernen und diese auch direkt anwenden. Dabei werden wir ca. 90% aller sinnvollen HTML-Befehle nutzen und bei den restlichen 10% wissen, wo sie nachzuschlagen sind.

Mit HTML machen wir also Strukturen – was ist eine Überschrift, was ist ein Absatz, eine Aufzählung und wie wird ein Bild bzw. Video eingebunden.

Diese Welt (bis auf Bilder und Videos) wird noch schwarz-weiß sein. Auf das Umsetzen unseres Designs kommen wir im folgenden Punkt.

Umsetzung des Designs in CSS

Design wird in CSS erstellt – das zweite große Kapitel im HTML-Seminar. Das Design wird über das bestehende HTML „darübergestülpt“. Wenn wir Design technisch nach "state of the art" umsetzen, macht die Anzahl der HTML-Seiten keinerlei Unterschied. In den HTML-Seiten gibt es „nur“ einen Verweis auf die Design-Datei. Somit kann das Design auch 4-mal im Jahr nach den Jahreszeiten geändert werden. Das kann durchaus auch Sinn machen, wenn wir wieder unser Beispiel mit der Website für eine Ferienwohnung heranziehen. Wer will beim Buchen einer Ferienwohnung ein sommerliches Design sehen, wenn die Ferienwohnung für den Winterurlaub gebucht werden soll.

Website live stellen

Ist der technische Part erledigt, müssen die Daten von der eigenen Festplatte nun online gestellt werden. Dazu werden die Daten vom eigenen Rechner auf einen Webserver übertragen. Das ist kein großes Ding. Beim ersten Mal ist natürlich noch die Planung vom Domainnamen (falls das nicht schon bei der Konzeptionsphase erledigt wurde) und die Auswahl des Providers wichtig, der die Server im Internet anbietet und die Verwaltung.

Dann werden die Daten auf den Webserver „geschoben“ und nun kommt der spannende Teil mit promoten und kontrollieren.

Die Website promoten

Je nach Thema der Website kann man diese auch noch in anderen Medien promoten bzw. auf andere Websites verlinken lassen (wenn der eigene Inhalt gut ist, werden das andere Betreiber von anderen Internetseiten gerne machen). Stichpunkt Mehrwert!

In klassischen Medien wie Visitenkarten, (Kunden-)Zeitschriften, Radio, TV (je nachdem was man so mit der Website treibt, durchaus auch eine Option) wird die URL der Website publiziert und unter die Welt gebracht.

Hier hört das Ganze noch nicht auf! Zwar denken das genau Auftraggeber gerne – man will ja nur einmal Geld investieren und dann soll die Website mindestens 10 Jahre laufen, bevor man wieder was macht – aber es ist wichtig, dass nun anhand der Kontrolle eine Weiterentwicklung stattfindet.

Kontrolle

Anhand der Kontrolle – im Klartext „Besucherzahlen“, „Wege durch die Einzelseiten“, „Lesedauer“ etc. kann nun überprüft werden, ob die Website das gesteckte Ziel erreicht oder bei der Umsetzung Fehler gemacht wurden.

Hier hilft natürlich Erfahrung – oder ein schneller Lernprozess. Hier wird dann anhand Überlegungen und/oder Nachfragen bei Nutzern aus der Zielgruppe geklärt, was man verbessern und optimieren kann. Je nachdem was geändert werden soll, steigt man bei dem entsprechenden Punkt ein und ändert bzw. ergänzt Inhalte bzw. Design.

Hier sieht man schön, dass es ein zirkulärer Prozess ist. Eine Website ist zum Glück im Gegensatz zu einem Buch schnell änderbar und viele Themen leben auch von Ihrer Aktualität.

Nun Viel Spaß beim Einstieg.

Weiterempfehlen • Social Bookmarks • Vielen Dank

Bitte unterstützen Sie dieses Projekt

Sie können dieses Projekt in verschiedenen Formen unterstützen - wir würden uns freuen und es würde uns für weitere Inhalte motivieren :).

unsere Videos bestellen

Unsere Videos und eBooks bestellen.

Spenden

Sie können uns eine Spende über PayPal zukommen lassen.

Weiterempfehlungen

Empfehlen Sie es weiter - wir freuen uns immer über Links und Facebook-Empfehlungen.

Bücher über Amazon

Bestellen Sie Bücher über folgende Links bei Amazon:

Vielen Dank für Ihre Hilfe

    E-Books zum Kurs

    von HTML-Seminar.de

    E-Books mit rund 930 Seiten Umfang als PDF. Alle 3 zu einem Preis.

    Mehr Details