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 Macromedia Dreamweaver (aktuelle Versionen ab ca. 380 €) 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 Frontpage, 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=iso-8859-1">
<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), <font> (Schrift) 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 <td> Tag (Tabellenzelle). Da praktisch
jede Webseite aus unsichtbaren Tabellen aufgebaut ist, kann man davon ausgehen,
dass sich jeder Text innerhalb einer Tabellenzelle befindet. Auch alte Browser
wie z.B. Netscape 4.x
übernehmen Schriftartendefinitionen für den <td>-Tag auf alle
in ihm beinhaltete Texte. Bei einer Schriftdefinition für
<BODY> würden alte Browser nicht alle Schriften richtig formatieren.
Eine für alle Texte gültige Schriftdefinition lautet in der CSS-Datei
somit z.B.
td {
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.
Grundlegendes Seitenlayout erstellen Erstellen Sie jetzt eine einfache Tabelle mit 2 Zeilen. Teilen Sie die 2. Zeile in 2 Spalten. Oben werden wir eine Titelgrafik einfügen, in der linken Tabellenspalte 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 Internet Explorer, Opera, Firefox und Netscape) 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 Tabellenzeile Ihre
Titelgrafik ein und passen Sie gegebenenfalls die Tabellenbreite 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=iso-8859-1">
<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 80% aller Internetuser
den Microsoft Internet Explorer. Die restlichen 20% verteilen sich auf Opera,
Firefox (Mozilla) und Netscape. Insbesondere Netscape 4.x wird immernoch von
ca. 3% der Surfer benutzt und hat eine sehr schlechte Implementation von CSS,
testen Sie also unbedingt in diesem Browser. Gehen Sie nicht davon aus, dass
der Internet Explorer auch weiterhin seinen Marktanteil hält!
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".
Webdesign-Lehrmaterial Zu diesem Tutorial gibt es weiterführendes Lehrmaterial im ff-webdesign-Download-Bereich. Dort finden Sie jedes Tutorial als Acrobat Reader .pdf- Datei zum Offline-Studium oder zur Verwendung im Rahmen von Seminaren. Außerdem bieten wir dort zu jeder Webdesign-Anleitung umfangreiches Studienmaterial wie z.B. komplette Webprojekte, HTML-Seiten, CSS-Dateien, Templates, Bilder, oder Photoshop- Aktionen - und Homepagelayouts.
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.
Sie liefern als Auftraggeber ein fertiges Masterlayout 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.
Komplettangebot aus den unter WDEpro, WEA und HUT aufgeführten Leistungen plus Suchmaschinenanmeldung plus Emailkonfiguration - Sparen Sie bis zu 350 € gegenüber den Einzelpaketen!
- Standard-Homepage mit 10 HTML-Seiten incl. Impressum und Kontaktformular
- Bis zu 5 Stunden Layouterstellung und Änderung nach Ihren Wünschen
- Individuelles einfaches Layout mit Ihrem Firmenlogo
- 10 HTML-Seiten mit Text/CSS-Navigation
- Semantisch korrekter HTML-Code, W3C-valide, barrierefrei
- Bis zu vier vom Auftraggeber zu liefernde Bilder pro Seite
- Saubere Suchmaschinenoptimierung auf relevante Keywords
- Layouttest in alle gängigen aktuellen Browsern + Internet Explorer 6 / 7
- Upload auf Server Ihrer Wahl oder Übergabe auf CD
- Anmeldung bei den 25 wichtigsten Suchmaschinen
- Einrichtung aller Email-Adressen
