Webdesign-Tutorial: Umsetzung, Ausarbeitung und
Erstellung einer Website
Die Umsetzung und Ausarbeitung einer Homepage umfasst sämtliche für deren Realisierung nötigen Schritte nach dem grafischen Entwurf. Zuerst erstellt der Webdesigner ein sogenanntes Masterlayout in HTML. Das Masterlayout ist die erste Seite der Homepage, aus der alle folgenden Seiten generiert werden. Dieser Webdesigner-Workshop ist für Anfänger gedacht. Webdesign-Editoren Für die Erstellung von Homepages gibt es viele kommerzielle und Freeware-Programme. Unter den professionellen Software-Lösungen ist hier Adobe Dreamweaver (aktuelle Versionen ab ca. 500 €) aus gutem Grund am weitesten verbreitet. Der HTML-Editor bietet die größte Unabhängigkeit beim Erstellen von Homepages und schreibt im Vergleich zu anderen kommerziellen HTML-Editoren (Microsoft Webdesigner, Adobe GoLive) relativ sauberen HTML-Quellcode. GoLive und vor allem Frontpage schreiben Quellcode, der nicht in allen Browsern richtig dargestellt wird und legen den Webdesigner auf bestimmte, häufig lizenzpflichtige Webtechniken fest. Dreamweaver dagegen ist viel offener und bietet eine hervorragende Unterstützung der unterschiedlichsten Webstandards.
Für den Anfänger empfehlen sich weniger kostenintensive Webdesign-Programme. Probieren Sie HTML-Editoren wie z.B. Netobjects Fusion (kommerziell) oder verschiedene Freeware-Programme z.B. unter winload.de. Achten Sie bei der Auswahl Ihres HTML-Editor-Programms unbedingt darauf, dass es nach dem WYSIWYG (What you see is what you get) – Prinzip arbeitet! Alles andere, wie z.B. reines schreiben einer Homepage über den Quellcode ist nicht mehr zeitgemäß und vergeudet wertvolle Arbeitszeit.
Das Web für eine Homepage anlegen Wenn Sie sich für einen Webeditor entschieden haben, müssen sie normalerweise als erstes ein Stammverzeichnis für Ihre neue Homepage definieren. In Dreamweaver geschieht dies über den Dialog „Site definieren“. Geben Sie einen Ordner auf Ihrer Festplatte an, in dem Sie alle Dateien für Ihre neue Homepage speichern wollen. Dieser Schritt ist wichtig, da HTML-Dateien für gewöhnlich über relative Links miteinander verbunden sind. Nur wenn Ihr Webeditor weiß, wo das Stammverzeichnis Ihrer neuen Website ist, kann er auch automatisch Links prüfen und korrigieren.
Die HTML-Umsetzung des Entwurfes Nach der Definition Ihrer Homepage beginnt endlich die HTML-Umsetzung Ihres Entwurfs. Legen Sie als erstes eine neue leere HTML-Seite an. Die Definition der angezeigten Schriftarten, Farben und Größen erfolgte früher direkt im HTML-Quellcode. Layout und Inhalt wurden in einer HTML-Datei vermengt. Dies ist heute nicht mehr üblich, gute Webdesigner bemühen sich um eine Trennung von Layout und Inhalt. Die hiefür zugrundeliegende Technik heißt CSS (Cascading Style Sheets).
CSS wird von praktisch jedem heute verwendeten Browser unterstützt. Der Hauptvorteil bei der Verwendung von CSS ist die einfache Anpassung aller beliebigen Seitenelemente einer gesamten Homepage über eine einzige Datei. Eine einzige CSS-Datei, die im Kopfbereich jeder HTML-Datei eingebunden ist, regelt das Aussehen aller Überschriften, Textbereiche, Links, Bilder, Rahmen etc. Wenn sie mehr über CSS erfahren wollen, lesen Sie bitte auch unbedingt das ff-webdesigner-Tutorial „Professioneller Einsatz von CSS„.
Im Rahmen dieses Tutorials gehen wir nur auf die nötigsten CSS-Definitionen ein. Über CSS haben Sie die Möglichkeit, das Aussehen eines bestimmten HTML-Tags (<body>,<p>,<a>) global anzugeben. Alle Überschriften, Absätze oder Links schauen dann aus, wie in der CSS-Datei angegeben. Sie haben jedoch auch die Möglichkeit, sogenannte Klassen zu definieren. Eine Klassendefinition gilt nur für die Tags einer Homepage, denen diese bestimmte Klasse zugewiesen wurde.
Beginnen wir zuerst mit einer globalen CSS-Definition. Zuerst erstellen sie eine Datei style.css. Legen Sie diese im obersten Verzeichnis Ihrer Homepage ab. Öffnen Sie nun die bereits erstellte leere HTML-Seite. Verknüpfen Sie die Datei style.css im HEAD-Bereich ihrer HTML-Seite. Im Quellcode sieht das folgendermaßen aus:
<head> <title>Titel</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <link href="style.css" rel="stylesheet" type="text/css"> </head>
Alle WYSIWYG-HTML-Editoren bieten natürlich auch die Möglichkeit, das ganze per Mausklick zu erledigen, ohne dass sie den Quellcode manuell editieren müssen. In Dreamweaver funktioniert das über die Schaltfläche „Stylesheet anfügen“ im CSS-Fenster. Ist die Stylesheet-Datei in der HTML-Datei verknüpft, können Sie darin Definitionen angeben.
Der BODY ist das oberste Element jeder HTML-Seite. Er beinhaltet sämtliche Inhalte einer Homepage. Weist man dem Body-Tag mittels CSS einen Hintergrund zu, so erhält die gesamte Seite diesen Hintergrund. Um dem BODY-Tag ein Hintergrundbild zuzuweisen könnte Ihre CSS-Datei etwa folgendermaßen aussehen:
body {
background-image: url(hintergrundbild.jpg);
background-repeat: no-repeat;
}
Die zusätzliche Anweisung no-repeat bedeutet, dass das Hintergrundbild nicht immer wiederholt, sondern nur einmal eingefügt werden soll.
Schriftarten in CSS definieren Schreiten wir fort zur Definition einer für alle Seiten gültigen Schriftart. Schriften können in HTML innerhalb vieler verschiedener Tags dargestellt werden, wie z.B. <p> (Absatz), <div> (Bereich) oder auch <td> (Tabellenzelle). Deswegen wäre es recht unpraktisch, würde man das Erscheinungsbild aller dieser Tags einzeln in CSS definieren.
Es gibt nur einen Tag, der wirklich wichtig ist und Definitionen für alle Schriftarten in allen Browsern richtig übernimmt. Dieser Tag ist der BODY Tag. Eine für alle Texte gültige Schriftdefinition lautet in der CSS-Datei somit z.B.
body{
font-family: Georgia, "Times New Roman", Times, serif;
font-size: 12px;
color: #333333;
}
Beachten Sie, dass auf dem Bildschirm der Nutzer Ihrer Website nur Schriftarten korrekt dargestellt werden, die auch auf deren System installiert sind. Es bringt also nichts, exotische Schriftarten zu verwenden. Die einzigen Schriftarten, die wirklich jeder Nutzer installiert hat sind: Arial, Times, Georgia und Verdana. Alternativ lassen sich seit 2011 auch downloadbare Google Web Fonts einbinden, die allerdings das Ladevolumen der Seite erhöhen.
Grundlegendes Seitenlayout erstellen Erstellen Sie jetzt ein einfaches Layout mit einer DIV für den Kopf und zwei DIVs darunter für zwei Spalten. Oben werden wir eine Titelgrafik einfügen, in der linken Spalte eine Navigation und in der rechten den eigentlichen Inhalt. Wenn Sie den vorherigen Workshop „Entwerfen einer Homepage“ bereits durchgearbeitet haben, sollten Sie schon über einige Grafiken für Ihre Homepage verfügen.
Masterlayout erstellen Sämtliche zuvor in Photoshop oder ähnlichen Programmen erstellte Grafiken werden über unsichtbare Tabellen auf der Seite positioniert. Es werden Schriftarten und Schriftgrößen definiert, genauso wie Farben für Links, Überschriften, Listen usw. Bei der Erstellung des Masterlayouts ist immer besonderes Augenmerk darauf zu legen, dass das Layout nicht nur in einem Browser, sondern in allen Browsern gut aussehen muss. Achten Sie unbedingt darauf, dass im Masterlayout alle Elemente stimmen, alle Links korrekt sind und vor allem, dass das Masterlayout in allen gängigen Browsern (aktuell Firefox, Chrome, Edge, Internet Explorer und Safari) gut aussieht. Fehler, die jetzt unerkannt bleiben, müssen Sie später auf allen Seiten korrigieren.
Inhalte einfügen Fügen Sie in die erste Bereiche Ihre Titelgrafik ein und passen Sie gegebenenfalls die breiten der DIVs mit CSS an. In der linken Spalte fügen Sie untereinander die einzelnen Links für Ihre Homepage ein, Beispielsweise Home, Über mich, Fotogalerie und Kontakt. Sie können dieser Spalte auch noch eine Hintergrundgrafik zuweisen, wenn Sie schon eine passende (kontrastarme, helle) erstellt haben. In die Nächste Spalte werden die Textinhalte eingefügt. Normalerweise verwendet man auf jeder Seite auch einen Fußzeile, die dann Angaben wie Copyright, email und Telefon beinhalten kann.
Meta-Angaben im Kopfbereich Um später bei der Optimierung für Suchmaschinen weniger Arbeit mit den folgenden Seiten zu haben, fügen Sie jetzt noch die nötigen Angaben in die Seite ein. Im wesentlichen sind dies im Kopfbereich folgende Angaben:
<head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Webdesign Tutorials Workshops</title> <meta name="description" lang="de" content="Webdesign Tutorials und Workshops"> <meta name="keywords" lang="de" content="Webdesign, Tutorials, Workshops"> <meta http-equiv="content-language" content="de"> <meta name="robots" content="index, follow"> </head>
Titel, Meta description und meta keywords sind die wichtigsten Tags für die Suchmaschinen. Verwenden Sie keine doppelten Wörter, keine Werbesprache und beschränken Sie sich auf das Notwendige: was Sie wirklich anbieten. Alles andere bringt nichts, kann sogar zu einem Ausschluss aus dem Index führen. Sagen Sie der Suchmaschine mittels lang=“de“ und content=“de“, auf welcher Sprache Ihre Homepage geschrieben wurde. Und weisen Sie die Robots der Suchmaschinen explizit mittels content=“index, follow“ an, links zu anderen Seiten Ihrer Homepage zu folgen.
Keywords und Texte Beachten Sie bitte auch, dass die Keywords, die Sie im Kopfbereich angeben, natürlich auch wirklich auf der Seite vorkommen müssen. Am besten als Überschrift möglichst weit am Anfang der Webseite. Die perfekte Keyworddichte in den darauf folgenden Texten beträgt 2-5%: maximal jedes 20. Wort sollte eines der von Ihnen gewählten Keywords sein. Auch in den ALT-Tags der Bilder (Bildbeschreibungstexte) sowie deren und den Namen der HTML-Dateien schadet es nicht, wenn die Keywords mehrfach vorkommen.
Sie haben jetzt ein ganz einfaches Masterlayout für Ihre Homepage erstellt. Da es keine neinander verschachtelten Tabellen sowie komplexe CSS-Definitionen beinhaltet, können Sie davon ausgehen, dass Ihr Masterlayout in allen Browsern richtig dargestellt wird. Wenn Sie später einmal komplexere Layouts mit weitreichenden CSS-Definitionen verwenden, müssen Sie unbedingt vor dem Kopieren des Masterlayouts auf die einzelnen Unterseiten deren Darstellung in allen wichtigen Browsern kontrollieren.
Cross-Browser-Kompatibilität Aktuell verwenden ca 60% aller Internetuser Chrome und Firefox. Weitere 30% verteilen sich auf die verschiedenen Versionen von Microsoft Interet Explorer und Edge. Gerade in ersterem Browser gibt es bei früheren Versionen drastische Interpretationsunterschiede bei CSS und Javascript.
In Zukunft wird es mehrere konkurrierende Browser mit sich annähernden Marktanteilen geben. Das Schlimmste, was einem Webdesigner passieren kann, ist, wenn er erst nach dem Beginn der Ausarbeitungsphase feststellt, dass das Masterlayout nicht in allen Browsern korrekt dargestellt wird. Sie dürfen dann alle bisher erstellten Seiten nochmals ändern.
Seiten erstellen Erst wenn das Masterlayout in allen Browsern richtig dargestellt wird, fängt der Webdesigner mit der Ausarbeitung sämtlicher einzelner Webseiten an. Texte werden verteilt, Bilder integriert, Links erstellt, oder ganz einfach: sämtliche Inhalte erstellt und verteilt. Weiterhin werden noch technische Details wie z.B. ein Kontaktformular oder ein Gästebuch integriert. Sind alle Seiten fertig, fügt man noch für Suchmaschinen wichtige Ergänzungen ein. Zuletzt erfolgt der Upload und Online-Test der gesamten Homepage.
Anlegen der einzelnen Webseiten Wenn das Masterlayout überall stimmt, ist die Ausarbeitung der Website eher der kleiner Teil der Gesamtarbeit. Dies gilt zumindest für kleiner Homepages von 5 bis 25 Seiten. Speichern Sie das Masterlayout unter den Dateinamen, die Sie sich selbst mit den Links in der Navigation vorgegeben. Fügen Sie die Inhalte ein, formatieren Sie die Texte und Bilder.
Testen Sie zuletzt unbedingt mit Ihrem HTML-Editor die Korrektheit aller Links. Ist der Test bestanden, kontrollieren Sie nochmals das Layout jeder einzelnen Seite im Browser. Sind alle Seiten in Ordnung, haben Sie die Homepage fertig ausgearbeitet. Es wird Zeit für den Upload Ihrer Homepage. Lesen Sie hierzu den Workshop „FTP-Upload der Homepage„.
Hat Ihnen diese Webdesign-Anleitung weitergeholfen? Wir hoffen, Ihnen mit diesem Workshop bei den Arbeiten rund um Ihre eigene Homepage weitergeholfen zu haben. Sollten Sie noch Fragen oder Anregungen zu diesem Webdesigner-Tutorial haben, schreiben Sie uns! Falls Sie trotz dem Tutorial mit Ihrer Homepage nicht mehr weiterkommen sollten, freuen wir uns natürlich über jeden Webdesign-Auftrag.
- Webdesign-Angebot WEA : Webseiten-Ausarbeitung
Unser Preis: ab 360 €417,60 € incl. MwSt.Für wen? Sie haben einen fertigen Homepage-Entwurf, aber keine Zeit zum Erstellen der einzelnen Seiten.
-
Auftrag erteilenSie liefern als Auftraggeber ein fertiges Masterlayout / Template für Ihre Homepage in HTML. Häufig kommt dieses Layout von einem vorherigen Webdesigner.
- Die ff-webdesigner erstellen Ihnen bis zu 10 HTML-Seiten inclusive Verlinkungen und optimierten Bildern aus dem gelieferten Material.
- Saubere Suchmaschinenoptimierung aller Seiten
- Eingehende Beratung und weitere Tipps Usability, Inhalte und SEO betreffend
- Sie erhalten eine fertige Homepage incl. aller Dateien als .zip per Email.
Das Angebote WEA beinhaltet keine Bilderrecherche im Internet: Alle Texte, Grafiken und Logos müssen in ausreichender Qualität digital durch den Auftraggeber bereitgestellt werden.
Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]
- Webdesign-Angebot HPK : Komplette Homepage-Erstellung mit Layout, 10 Seiten
Unser Preis: 900 € 1.044,00 € incl. MwSt.Für wen? Sie wünschen eine kleine Homepage inclusive aller dafür nötigen Webdesign-Leistungen.
-
Auftrag erteilenKomplettangebot aus den unter WDEpro, WEAund HUTaufgeführten Leistungen plus Suchmaschinenanmeldung plus Emailkonfiguration – Sparen Sie bis zu 450 € gegenüber den Einzelpaketen!
- Installation eines guten Redaktionssystems wie z.B. WordPress auf Ihrem Server. Grudlegende Konfiguration
- Erstellen eines einfachen semantisch korrekten individuellen Templates / Layouts in HTML
- Erstellen und formatieren von Seiten incl. Impressum und Kontakt
- Bis zu 5 Stunden Layouterstellung und Änderung nach Ihren Wünschen
- Individuelles überzeugendes Layout mit Ihrem Firmenlogo
- Semantisch korrekte und benutzerfreundliche Navigation als Grundlage für gute SEO ihrer Webseite
- Einbau bis zu vier vom Auftraggeber zu liefernde Bilder pro Seite
- Saubere Suchmaschinenoptimierung auf relevante Keywords
- Layouttest in alle gängigen aktuellen Browsern + alter Versionen Internet Explorer
- Anmeldung bei den wichtigsten Suchmaschinen
- Einrichtung aller Email-Adressen
Bei mehr als 3h Layouterstellung fallen Mehrkosten an, über die Sie rechtzeitig vorab informiert werden. Mehrkosten werden zum aktuell gültigen Stundensatz für Webdesign berechnet.
Fragen zu diesem Webdesign-Angebot? Rufen Sie uns an! 0941 / 4618 3055
[ Mehr Webdesign-Angebote anzeigen ]
