Webdesign Grundlagen – Homepage selbst erstellen

Leon HoffmannWebdesignLeave a Comment

Webdesign Grundlagen - Homepage selbst erstellen

Webdesign Grundlagen – Homepage selber erstellen

In diesem Artikel erfährst du grundlegendes zu den Werkzeugen als Webdesigner und den wichtigsten Webdesign-Technologien.

Grafikprogramm

Um das Layout deiner Website zu erstellen, benötigst du ein Grafikprogramm. Der Branchenstandard hierbei ist Adobe Photoshop. Hier kommst du zur 30-tägigen, kostenlosen Testversion.

Neben Photoshop gibt es eine Reihe beachtenswerter, günstiger oder sogar kostenloser Konkurrenzprodukte, wie die kostenfreien Gimp und Inkscape sowie dem günstigen Pixelmator.

Programmier-Software

Im Grunde reicht ein einfaches Textverarbeitungsprogramm, wie TextEdit für Mac oder eine der zahlreichen, kostenlosen Code-Editoren, wie Notepad++, Brackets oder Atom.

Die Arbeit ein wenig erleichtern können WYSIWYG-Tools*, wie Dreamviewer. Viele Webdesigner raten Anfängern von der Nutzung eines solchen Tools wie Dreamweaver ab, gerade in Zusammenhang mit der Nutzung der Vorschaufunktion. Empfehlenswerter ist es volle Kontrolle über die Qualität und Effizienz des eigenen Quelltext zu haben.

Hilfreich allerdings sind oftmals die zuvor genannten Code-Editoren, da diese die einzelnen Elemente des Codes farblich abgrenzen und so helfen die Überblick zu behalten.

Häufig genutzte Code-Editoren sind Sublime Text, Atom, Brackets und Notepad++.

Browser

In den gängigen Browsern kannst du deine Zwischenergebnisse betrachten und siehst die Website so, wie sie auch deine Website-Besucher sehen werden. Von den gängigen Browsern, Internet Explorer, Google Chrome, Firefox und Safari ist lediglich vom Internet Explorer abzuraten, da dieser als nicht besonders schnell gilt und ältere Versionen nicht mit neueren Versionen von HTML und CSS umgehen können.

Besonders hilfreich für deine Arbeit als Webdesigner ist die Funktion den Code einer Website direkt im Browser zu untersuchen. Bei Chrome geht dies zum Beispiel per *Rechtsklick -> Element untersuchen. Versuche es einfach einmal selber im Chrome-Browser.

Auf der rechten Seite können Sie mit den CSS-Elementen experimentieren, z.B. Elemente an- und ausschalten oder neue Werte eingeben. Das hilft dabei CSS-Anpassungen zu testen, ohne direkt den eigenen Quellcode umzuschreiben.

Hoster

Einen Server mietest du bei den zahlreichen Hosting-Anbietern. Für einfache Websites, zum Beispiel mit WordPress, empfehlen allinkl, da wir dort sehr gute Erfahrungen in Hinsicht auf Preis-Leistungs-Verhältnis gemacht haben.

FTP-Software

Nach der Fertigstellung der Website, muss diese im Internet zugänglich gemacht werden und zu diesem Zweck auf einen Server deines zuvor gekauften Hostings geladen werden. Dabei helfen FTP-Programme (File Transfer Protocol), wie zum Beispiel das kostenlose FileZilla. Die Übertragung der Dateien ist denkbar simpel und mit dem Verschieben von Dateien auf dem eigenen PC vergleichbar.

Tools

Es gibt unzählige Tools für Webdesigner – aller versprechen es das Designer-Leben zu erleichtern. Einige unserer Meinung nach wirklich hilfreiche Tools, listen wir nachfolgend auf:

  1. jsFiddle ermöglicht es HTML, CSS und JavaScript Tests durchzuführen. Auf der rechten unteren Seite des Tools wird das Ergebnis direkt angezeigt, sodass man in einem Live-Test Ideen ausprobieren und weiterentwickeln kann.
  2. dbdsgnr lassen sich ideale Datenbankstrukturen entwerfen. Dieses Google-Tool ermöglicht es dir nach der Planung den Export des SQL-Codes für die spätere Verwendung in phpMyAdmin*.
  3. five second test ermöglicht es dir direktes Feedback zu deiner Website zu erhalten. Andere User bewerten kostenlos deine Website und geben Feedback zu beispielsweise Usability oder Verständlichkeit.
  4. mockingbird ist ein intuitv bedinbares und einfaches Mockup-Tool für erste Skizzen und dessen Abstimmung.

Technologien

Im oberen Teil des Artikels haben wir schon Code-Editoren erwähnt. Um deine Website zu erstellen musst du also die Basics des Programmierens lernen.

Dies ist einfacher als es klingt. HTML, CSS und JavaScript sind einfache Markup- oder Script-Sprachen.

Online gibt es tolle Anleitungen und Kurse, wie du im weiteren Verlauf erfahren wirst.

Die wichtigsten Basis-Technologien sind HTML, CSS und JavaScript. Hierbei handelt es sich um einfache Programmier-/Script-Sprachen, welche relativ leicht zu erlernen sind.
Hierzu gibt unzählige Online-Kurse unter Udemy sowie Bücher auf Amazon.

HTML

HTML (Hypertext Markup Language) wurde 1989 von Sir Tim Berners-Lee entwickelt. HTML ist die Grundlage für das World Wide Web und aktuell in der Version HTML 5 bzw. seit wenigen Tagen auch in HTML 5.1.

HTML bildet also die Grundlage des Internets und sollte jedem Webdesigner genauestens bekannt sein. Glücklicherweise ist HTML auch für den Laien relativ einfach zu erlernen.

Auf deiner Website ist HTML für die grundlegende Struktur und die Inhalte verantwortlich.

CSS

CSS ist die abkürzung für “Cascading Style Sheet” und aktuell mit der Version CSS3 aktuell.
Auf deiner Website sorgt CSS für das Styling der Website und dessen Elemente. Hier legst du Farben, Größen, Schriften und vieles mehr fest.
Auch CSS ist erstaunlich einfach zu lernen und anzuwenden.

JavaScript

Während HTML für die Inhalte und Struktur deiner Website verwendet wird und CSS die Gestaltung verantwortet, steuert JavaScript das Verhalten der Website-Elemente.

Zwar lassen sich mit CSS3 auch Animationen durchführen, doch diese werden noch nicht von allen Browsern gleichwertig unterstützt, sodass JavaScript hier aktuell State-Of-The-Artist.

JavaScript ist, wie der Name schon vermuten lässt, eine Scriptsprache, welche im Browser auf dem Computer des Nutzers ausgeführt wird. Dabei wird auf bestimmte Aktionen des Nutzers reagiert, z.B. auf einen Klick oder ein Mouse-Over.

Heutzutage kommen, neben reinen JavaScript, oft JS-Bibliotheken zum Einsatz. Die wohl bekannteste darunter ist jQuery. Bei diesen Bilitheken handelt es sich um Sammlungen häufig verwendeter Funktionen und Effekte, die sich somit einfach einbinden lassen. So erspart man sich das eigenhändige Programmieren. Der Einstieg in diese Bibliotheken ist recht einfach und somit lässt sich auch JavaScript ohne große, vorherige Programmierkenntnisse verwenden.

Dynamische Sprachen

PHP

Um den Überblick an gängigen Webtechnologien zu vervollständigen, darf PHP nicht fehlen.
PHP ist eine Programmiersprache, mit der Inhalte dynamisch erzeugt werden.

Bei diesen dynamischen Elementen werden die Inhalte (Text, Bild, Video, Audio etc.) per CMS (Content Management System) in die Website eingepflegt. So werden die Inhalte also ohne Programmierkenntnisse hinzugefügt. Diese Inhalte werden dann automatisch an der dafür vorgesehen Stelle in der Website dynamisch (nicht statisch) eingefügt.

Ein typisches Beispiel dafür ist ein WordPress-Blog. Der letzte Artikel wird automatisch an oberster Stelle der Blogseite dargestellt. Die älteren Artikel rutschen somit in der Timeline nach hinten. Dies musste nicht händisch programmiert werden für jeden neuen Beitrag, sondern wir dynamisch via PHP umgesetzt.

Zusammenfassung

In diesem Artikel hast du die Grundlagen von Webdesign vorgestellt bekommen und kennst du die wichtigsten Web-Technologien und deren Funktion. In den folgenden Artikeln gehen wir hier tiefer ins Detail und wagen uns an Website-Konzeption, das Erlernen von einfachen Programmiersprachen, wie HTML und CSS sowie das Erstellen einer Website mit WordPress.

Abonniere den Newsletter!

Für aktuelle Artikel, Tipps und Sonderangebote!