Willkommen im STRATO Blog. Hier gibt es News und Tipps rund ums Hosting.

 

Menu

Veröffentlicht am: 02. Januar 2014

Screenshot CSS

Crashkurs Webdesign – Teil 5: Technik und Tools

In den ersten vier Teilen unserer Webdesign-Reihe beschäftigten wir uns vornehmlich mit gestalterischen Aspekten. In diesem letzten Teil sehen wir uns die Technik dahinter etwas genauer an.

Wer seine Website mit dem Homepage-Baukasten von STRATO oder einem ähnlichen System erstellt, muss sich über die Programmierung keine Gedanken machen. Ebenso einfach ist es, eine Website mit einem Blog- oder Content-Management-System zu erstellen. Für Einsteiger empfehlenswert ist etwa WordPress, das wir auch für dieses Blog verwenden. Das System lässt sich mit wenig Aufwand auf dem eigenen Webspace installieren – am allereinfachsten per Appwizard.

Die Sprachen des Web: HTML und CSS

Soll die Website ohne Online-Software gestaltet werden, kommt man um Kenntnisse der Beschreibungssprachen HTML und CSS nicht herum – auch dann nicht, wenn man einem Offline-Tool wie dem kostenlosen CoffeeCup HTML Editor den Vorzug gibt. In der HTML-Datei werden Inhalte und Struktur einer einzelnen Webseite beschrieben, zum Beispiel: Was steht im Menü? Welche Bilder verschönern den Text? Welche Links gibt es? In der CSS-Datei wird das Aussehen der einzelnen Elemente festgehalten, etwa: Wie groß ist der Menütext? Wo stehen die Bilder im Text? Welche Farbe haben die Links?

Ganz wichtig: Webbrowser lesen die Kommandos in HTML- und CSS-Dateien und zeigen die Webseite entsprechend ihrer Interpretation an. So ist es möglich, dass eine Website in verschiedenen Browsern unterschiedlich dargestellt wird. Die hohe Kunst des Webdesigns ist es, eine möglichst einheitliche Darstellung für alle Nutzer zu erreichen. Das setzt die Einhaltung von technischen Standards sowie ausgiebiges Testen der Website voraus.

HTML5 und CSS3 – Hilfen im Web

Die zukünftigen Standards sind HTML5 und CSS3. Beinah alle neuen Websites verwenden diese Sprachen, auf die sich derzeit alle Webdesigner konzentrieren. Hilfe finden sie im Web: Die beliebte HTML-Referenz SelfHTML wird durch die Seite SelfHTML5 perfekt ergänzt. Das Pendant für CSS ist SelfCSS. W3Schools.com bietet ein sehr gutes CSS3-Tutorial. Beim Erstellen einzelner CSS3-Kommandos hilft der CSS3-Generator. Damit lassen sich leicht Design-Elemente wie Farbverläufe, Schatten oder „gerundete Ecken“ erstellen, die für moderne Websites typisch sind.

Einfacher designen dank Online-Tools

Kostenlose, vorgefertigte Design-Elemente aus dem Web sind ideale Hilfsmittel für jeden Webdesigner. 99Lime.com stellt unter dem Motto „HTML KickStart“ Buttons, Symbole, Listenelemente, Tabellen und vieles mehr zur Verfügung, was sich einfach in jede Website einbinden lässt. Einen kostenlosen Video-Player für die eigene Website finden Designer unter VideoJS.com. Juicebox ist eine kostenlose Bildergalerie mit zahlreichen interessanten Funktionen.

Das sind nur einige Beispiele für Bausteine, die jedem Webdesigner gratis zur Verfügung stehen. Wer sich näher mit dem Thema befasst, findet im Web viele weitere. Umfangreiche Projekte, die sich im Alleingang nicht mehr realisieren lassen, kann man auf Freelancer-Plattformen wie Twago oder 12designer ausschreiben. Professionelle Hilfe bekommt man auch auf der Website dasauge, einem Stellenmarkt für Webdesigner.

Ausgiebiges Testen lohnt sich immer

Kein Webdesigner kommt umhin, seine Werke gründlich zu testen. Dazu steht eine Reihe nützlicher Browser-Add-ons bereit. Mit Firebug lassen sich Veränderungen am HTML- und CSS-Code live nachverfolgen. Das Firefox-Plug-in gibt es auch für Google Chrome. Mit Measureit lassen sich Maße von Webseiten-Elementen abnehmen – etwa die Breite eines DIV-Elements. YSlow analysiert die Ladezeiten einer Website und bietet Verbesserungsvorschläge an.

Ob die Website standardkonform ist, kann man mit dem HTML-Validator und dem CSS3-Validator des Word Wide Web Consortium (W3C) prüfen: Einfach die Adresse eingeben oder eine Datei hochladen und auf „Check“ klicken.

Tags: Tools · Webdesign

Der Autor:

Autor: Sven Hähle

Mein Name ist Sven Hähle. Ich arbeite seit vielen Jahren als Fachjournalist und schreibe für diverse Zeitschriften und Online-Portale über Digitalkultur, eBusiness und Technik.

2 Kommentare

  1. Andre Lindner sagte am 2. Januar 2014 um 16:30:

    Diese Tipps sollte ihr noch einmal an die Kollegen vom Strato Facebook Team weiterleiten. Ich sage nur Scrollbalken in den Tabs bevor die automatische Höhenanpassung von FB per JS greift. Da hab ich bereits vor mehreren Wochen darauf hingewiesen, wie dieser Bug per CSS behoben werden kann.

    Antworten
  2. Crischo sagte am 29. Januar 2014 um 18:38:

    Klasse Sache! Measureit war genau das wonach ich gesucht habe.

    Antworten

Hinterlasse eine Antwort

Bitte beachte, dass sich Dein Kommentar auf den Artikel beziehen sollte. Wenn Du ein persönliches Kundenanliegen besprechen möchtest, wende Dich bitte an unseren Kundenservice auf Facebook, Twitter oder über Hilfe & Kontakt.
Wir freuen uns, wenn Du uns Deinen Namen hinterlässt. So wissen wir, wie wir Dich bei unserer Antwort ansprechen können.
Wenn Du Deine E-Mail-Adresse einträgst, wirst Du per Mail über unsere Antwort informiert. Sie wird zum Schutz Deiner Daten aber nicht veröffentlicht. Beide Angaben sind freiwillig.

Hier bloggen

Lisa Kopelmann
Ist Ansprechpartnerin für den Blog und berichtet über aktuelle STRATO Themen

Oliver Meiners
Schreibt über alles, was für Dich als STRATO Kunde wichtig ist

Michael Poguntke
Schreibt über den Online-Speicher HiDrive, den Homepage-Baukasten, Webshops und Server

Thomas Ritter
Berichtet über Neuigkeiten aus dem Unternehmen

Bianca Restorff-Adrion
Schreibt über Karriere & die Menschen bei STRATO

Christian Lingnau
Bloggt über WordPress & andere CMS

Franz Neumeier
Gibt Tipps zum erfolgreichen Bloggen

Sven Hähle
Kennt sich bei Domains hervorragend aus

Patrick Schroeder
Erzählt die Stories unserer Kunden

Ann-Christin Schmitt
Schreibt über HiDrive, den Homepage-Baukasten und guten Websitecontent

Christian Rentrop
bloggt über Software-Themen