Webdesign Tutorial 4: Von der Idee zur fertigen Homepage

Prolog:

Durch die Tätigkeit als Moderator eines kleinen PC-Forums kommen immer wieder Anfragen ala "ich hätte gerne eine Homepage, was soll ich machen?". Die einfachste Möglichkeit -> Beepworld, Baukasten, Template. Jedoch nicht wirklich die Eleganteste da man meist ziemlich eingeschränkt ist was Design und Umsetzung angeht - auch, oder gerade weil man dafür keine HTML-Kenntnisse benötigt. Deshalb hier mal ein kleines Tutorial wie man von A-Z eine Homepage selbst gestaltet.
Als Beispiel verwenden wir eine kleine Seite, nichts aufwendiges, nur zur Veranschaulichung.

Nach einiger Zeit und Erfahrung wird man sicher den einen oder anderen Punkt auslassen können, aber zum Einstieg mach ich mal alle durch.

Schritt 1: Konzept

Zuerst muss natürlich festgelegt werden was der Inhalt des Projektes Homepage werden soll. In diesem Zusammenhang stellen wir ein Konzept auf indem alle Bestandteile kurz beschrieben / erwähnt sind. Je nach Zweck der Seite - Privat, Verein, Firma - können sich die Anforderungen unterscheiden. Zu ihnen gehören z.B. Inhalte, Grafiken, Menüs, Größenangaben, Seitennamen bzw die Aufteilung der Inhalte auf die div. Unterseiten.

In Unserem kleinen Beispiel wollen wir eine Abwandlung dieser Seite erstellen. Der Inhalt ist uns also bekannt, nun können wir uns ans Design machen.

Wir verwenden dazu:
Außerdem erstellen wir auf unserem PC einen Ordner, geben diesem einen Namen (z.b. Homepage) und l egen dort alle unsere Daten ab. Vielleicht sogar in div. Unterverzeichnisse (Buttons, Bilder...) um später die Übersicht zu behalten. Die Pfadangaben, die später in den HTML-Dateien stehen, werden relativ sein um den Ordner absolut flexibel zu halten - wichtig bei der späteren Kopie auf den Webserver.

Schritt 2: Design

Jetzt wissen wir was wir brauchen und was später auf der Seite angezeigt werden soll. Nun brauchen wir noch die "Verpackung". Ein wenig Kreativität wäre hier von Vorteil. Um nicht alles direkt in HTML umzusetzen würde ich die Benutzung eines Grafikprogrammes empfehlen. Beliebt ist z.b. Adobe Photoshop (oder Gimp) für die Entwürfe von Buttons und Bannern, Corel Draw eignet sich ebenfalls gut für die temporäre Erstellung eines Layouts. Die verwendeten Grafiken sollten eindeutige Dateinamen erhalten ohne Sonder- oder Leerzeichen. Am Besten is die generelle Verwendung von Kleinbuchstaben, da im Web Hallo.JPG was anderes ist als hallo.jpg.

Schritt 2.1: Die Platzierung

Wo soll was stehen ? Die wichtigste Frage überhaupt....
Unser Design soll simpel sein. Der Header geht über die komplette Breite, das Menü fügt sich linksbündig direkt unter den Header an - Breite etwa 150px. Den Rest nimmt der Inhalt in Anspruch. Dazwischen noch ein wenig Abstand, soll ja nicht so gedrängt aussehen.
Die Seite selber soll eine feste Größe besitzen. Der Grund hierfür ist einleuchtend: Wenn ich die Seite an die jeweilige Größe der Auflösung anpassen würde, dann könnte der Inhalt aufreißen oder die Grafiken würden verschoben bzw. verzerrt. Mit einer festen Größe befindet sich die Seite wie in einer Schachtel die von der Auflösung unabhängig ist. Empfehlenswert is eine Breite bis 1000px, so wird sie auch bei der meist genutzen Auflösung von 1024 passend angezeigt, aber wirkt nicht an den Rand geklebt.
Für den Header nehm ich ein Bild von meiner Festplatte. Des Foto hab ich selbst geschossen, also treten auch keinerlei Rechteprobleme auf. Ich scheide es auf die richtige Größe und bearbeite es noch ein wenig mit Photoshop. Aus ihm leiten sich teilweise schon die späteren Farben für die Hompage ab (hier z.B. etwas helles -evtl weiß- für den Hintergrund).

tut header

Schritt 2.2: Grafiken, Farben, Hintergründe, Schriften

Wichtig ist, dass alles miteinander harmoniert. Das Motto ist NICHT "alle Farben, möglichst bunt". Es spricht zwar nichts gegen eine gesunde Mischung, doch man sollte es nicht übertreiben und versuchen ein einheitliches Design zu finden. Die Farben der Seite sollten zu den Grafiken passen.
Ein besonderes Augenmerk liegt auch auf der Wahl des Hintergrundes, besonders wenn ein Bild / eine Grafik eingesetzt werden soll. Die Schrift muss noch gut lesbar sein und sich vom Hintergrund deutlich absetzen können. Für unser Beispiel lass ich den Hintergrund weiß. Durch den Verlaufsübergang aus dem Header wirkt das ganze auch nicht abgehackt und kann so optimal verwendet werden.
Bei den Schriften drauf achten möglichst gebräuchliche zu verwenden. Auch wenn die Schrift noch so schön is bringt sie dem Anwender nix wenn er diese nicht installiert ist. Bei grafischen Buttons hat man noch einen kleinen Vorteil, da die Schrift hier mit in die Grafik eingebunden werden kann, doch dazu in 2.3 mehr. Für sich wiederholende Hintergründe, wie z.B. ein Verlauf, genügt ein Streifen von etwa 2px Breite. Via HTML kann dieser über die komplette Seite wiederholt werden (background-repeat) - was uns unnötige KB spart.

Wichtig: Copyright bei Bildern beachten. Nicht alles darf einfach so verwendet werden.

Schritt 2.3: Buttons

Die Menü-Buttons sollten als solche erkannt werden und sich deshalb leicht vom restlichen Text abheben. Ob das nun mit Schriftfarbe /-art, Hintergrundgrafiken oder lediglich mit der Positionierung gelöst wird ist Geschmackssache. Gibt man den Buttons direkt den Text im Grafikprogramm, so muss man für jeden Button eine eigene Grafik erstellen. Falls ein Hover-Effekt gewünscht wird, also eine Veränderung beim Mouseover, so braucht man hierfür ebenfalls eine Version jedes Buttons. Die Alternative dazu wäre ein Button als Hintergrundgrafik und der Text via HTML. Ein Text-Effekt beim Hover ist somit über HTML / CSS einfach realisierbar. Dazu kommt das der Button nur 1x als Grafik benötigt wird.

Schritt 3: Vorbereitung

So, nun sollte unser Layout soweit stehen und wir können uns an die Umsetzung machen. Eine gute Hilfe hierbei ist es das Layout in Spalten und Zeilen einzuteilen, dass erleichtert uns später die Umsetzung in HTML. Zudem sollten wir uns Gedanken machen, welchen Design-Stil wir verwenden wollen. Zur Auswahl stehen: Framesets, Tables, Div-Container und als Zusatz IFrames. Framesets sind bei Programmen wie Frontpage, Net Objekts... aufgrund ihrer Einfachheit noch stark verbreitet. Allerdings kommen sie im Zuge der Barrierefreiheit immer mehr aus der Mode und werden von Webdesignern deshalb kaum noch verwendet. Die Entscheidung zwischen Div-Containern und Tables (mit IFrames) muss jeder für sich entscheiden. Webdesigner streiten sich oft welche die bessere Methode is - ähnelt dem "Streit" zwischen VW- und Opel-Fahrern. Die Vor- und Nachteile beider Möglichkeiten hält sich weitgehend in der Waage, was die Auswahl nicht gerade vereinfacht. In unserem Beispiel werden wir allerdings mit Div-Container arbeiten, da ich wie viele andere der Meinung bin, dass Tabellen zwar nett sind, aber auch nicht für Layouts missbraucht werden sollten.
Wichtig: Die Pfade zu Bildern und Dateien am besten relativ angeben. Also statt C:\Eigene Dateien\Meine Ordner\Homepage\bilder \bild1.jpg lieber bilder\bild1.jpg schreiben. Dadurch is die Seite individuell einsetzbar und kann überall hin verschoben werden (z.b. später auf den Webserver).

tut entwurf

Hier haben wir unser Design in 3 Teile eingeteilt. Den Header kennen wir schon, die anderen zwei Teile beinhalten das Menü sowie den eigentlichen Inhalt der Seite.

Schritt 4: CSS Ausschreibung

Nicht unbedingt an dieser Stelle nötig, aber durchaus hilfreich: Alle Farben, Hintergründe, Hintergrundgrafiken schon mal zusammenlegen. Gruppen und Klassen bilden wo gleiche Elemente und Darstellungen zusammenkommen um später weniger Schreibaufwand zu haben. Während der Realisierung in HTML kommen logischerweise noch div. Positionsangaben oder Änderungen hinzu. Die erstellte Textdatei nennen wir style.css und binden sie über <link rel="stylesheet" href="style.css" type="text/css"> in den Head jeder HTML-Seite ein.

Schritt 5: Realisierung HTML

Div-Container haben einen großen Nachteil: Jede Seite ist für sich. Ich mache also nicht wie mit IFrames oder Framesets eine Menüseite die dann überall eingebunden wird, sondern ich hab auf jeder Unterseite das Menü, den Header etc. abgebildet. So muss ich evtl zum Schluss jede Seite nochmal überarbeiten wenn ich am Anfang etwas im Menü vergessen habe (manche Programme wie Phase 5, Notepad++ erlauben allerdings Änderungen in mehreren Seiten durchzuführen). Warum nehmen wir dann Divs ? Der Vorteil liegt im Bereich des Anwenders. Da jede Seite für sich ist, können Seiten direkt aufgerufen werden (z.b. aus Suchmaschinen) und sind komplett verfügbar. Anders als bei IFrames die evtl dann ohne Menü oder ohne Rahmen angezeigt werden. Auch im Zuge der Barrierefreiheit haben Divs wesentliche Vorteile gegenüber Frames.

Schritt 5.1: Syntax

Auf die genaue Syntax möchte ich hier nicht eingehen, denn das würde den Umfang des Tutorials sprengen. Für alle Interessierten gibt es hierzu eine sehr gute und ausführliche Beschreibung von Stefan Münz auf de.selfhtml.org. Hier möchte ich lediglich die wichtigsten Regeln kurz anschneiden wodurch die meisten Fehler passieren.

a) Das Grundgerüst einer HTML Datei sieht immer wie folgt aus:

<DOCTYPE...><html><head><title> </title><meta...></head><body></body></html>

b) Die Reihenfolge wie Tags geöffnet werden, bestimmt auch wie sie wieder geschlossen werden - von innen nach außen.

<div><table><tr><td><b><font..><a href=....>TEXT</a></font></b></td></tr></table> </div>

c) Umlaute gibt es nicht, diese müssen in HTML beschrieben werden:
d) Wichtigste HTML-Befehle:
e) Hilfe zu den HTML- und CSS-Befehlen gibt es hier:

Schritt 5.2: Template

Um den oben erwähnten Nachteil von Div-Containern möglichst gering zu halten, erstellen wir uns zuerst ein Template für die grundlegendsten Objekte einer Seite. Bei uns beinhaltet dies Div-Tags für den Header, das Menü, den Inhalt sowie einen Container für die Seite selber. Durch diesen Seitencontainer kann die Page später zentriert werden und den gewünschten Hintergrund erhalten. Die Angaben für Position, Höhe, Breite werden wieder in die CSS-Datei geschrieben. Die Verbindung zwischen CSS Datei und Container entsteht über die ID (Element kommt auf dieser Seite nur 1x vor) bzw die CLASS (Element kommt auf dieser Seite öfter vor).

Das Template wird wie die CSS-File in einem Texteditor geschrieben und später als temp.html gespeichert. Als Editor kann entweder ganz primitiv Windows Notepad verwendet werden, oder für die die etwas Komfort brauchen kann ich UltraEdit bzw Notepad++ empfehlen.

Die Namen der Seiten auf die die Links zeigen sollten hier schon sprechend gewählt werden (home.html, bio.html, pics.html). Das erhöht später die Übersichtlichkeit und ermöglicht es uns schnell die passenden Seiten zu finden, was bei größeren Projekten nur von Vorteil sein kann.

tut ordner

Schritt 5.3: Die Seiten

Das Template können wir jetzt so oft duplizieren wie wir Seiten haben - bei uns also 5x. Die Namen wurden ja bereits in den Template-Links vorgegeben. Sie sollten wie bei den Grafiken sprechend, klein und ohne Sonder- bzw. Leerzeichen sein.

Schritt 5.3.1: Home-Seite

Ein kleiner Begrüßungstext mit Verweis auf das Gästebuch. Vor dem Text füge ich noch ein paar Breaks ein um den Inhalt optisch zu zentrieren.

Schritt 5.3.2: Daten

Die Daten sollten Stichpunktartig in einer Tabelle stehen, daneben ein Portraitfoto in voller Größe über alle Zeilen. Einfach zu realisieren via Rowspan. Außerdem weisen wir der jeweils ersten Tabellenzelle (bzw der ersten Spalte) eine class zu um die Schrift fett zu machen.

Schritt 5.3.3: Biographie

Für die Bio verwenden wir mal keine Tabelle. Hier reichts wenn wir den Text fortlaufend schreiben und bei diversen Aufzählungen eine Liste einfügen. Als kleines Extra verwenden wir eigene Aufzählungspunkte in den Listen die wir via Adobe Photoshop erstellen. Die Schriftart Windings hält hiefür schöne kleine Icons bereit.

Schritt 5.3.4: Bilder

Unsere Bilder sind alle mindestens 800x600 groß, viele sogar deutlich größer, was eine direkte Einbindung in die Seite etwas erschwert. Nicht nur das die Bilder zu groß für unseren Content sind, die Ladezeit würde sich auch bei mehreren Bildern unheimlich hinausziehen. Von einer Verkleinerung durch html via <img width=... height=...> rate ich ab da die Bilder zwar kleiner angezeigt werden, aber immer noch die gleiche Datei-Größe besitzen. Deshalb alle Bilder auf eine ansprechende Größe verkleinern (Thumbnails). Hierbei könnte ich das Tool ImageBlizzard empfehlen, das mehrere Bilder automatisch verkleinert und entsprechend Höhe oder Breite anpasst. Allerdings leidet darunter oftmals die Qualität, weshalb es bei Grafiken nicht zu empfehlen ist.
Alternativ dazu kann man auch via Photoshop eine Automatiesierung erzielen, hierfür bitte mein Tutorial Nr 1 beachten.

Vor der Verkleinerung ändern wir noch die Dateinamen um später die Einbindung zu erleichtern. Empfehlenswert sind hier Programme die mehrere Dateinamen gleichzeitig ändern können wie z.b. Joe. Anschließend können wir die Bilder via ImageBlizzard auf eine Breite von 150px verkleinern, die Größe wird dabei automatisch angepasst. Um Verwechslungen vorzubeugen nennen wir die verkleinerten Images "***kl.jpg" (ebenfalls via Joe). Zum Schluss integrieren wir unsere Fotos durch <img> in eine Tabelle und erstellen einen Link zu den Großansichten.

Wir verzichten hier auf ein Java-Script das uns Popups in einer bestimmten Größe liefert und öffnen die Bilder lediglich in einem neuen Browserfenster. Für das Popup sucht bei de.selfhtml.org einfach mal nach window.open - dort findet ihr ein Beispiel.

Wichtig: Auch hier gilt wie oben - Vorsicht mit dem Copyright.

tut bilder

Schritt 5.3.5: Gästebuch

Die Auswahl an kostenfreien Gästebüchern ist relativ groß, besonders wenn man keine besonderen Wünsche hat. Wir haben sie aber *G* Und zwar soll es ein Gästebuch sein das überall angezeigt werden kann (also schon mal kein flash), das Designmäßig selbst angepasst werden kann (vielleicht sogar über unsere CSS-Datei) und das ohne Werbung läuft. Und schon schauts schlecht aus. Spontan kenn ich da momentan nur einen Anbieter: www.equest.com. Manche Webprovider - also dort wo man später die Seite hochläd - stellen auch Standart-CGIs bereit zu denen z.b. ein Gästebuch gehört (Freenet hat z.b. sowas im Angebot).
Für all diejenigen, die PHP und MySQL zur Verfügung haben, können sich ja mal an meinem PHP-GB versuchen.

Schritt 6: Sonstiges

Foren: Werden im Internet wie Gästebücher gehandelt, ob als Script zum bearbeiten oder fertig zum direkten einbinden. Als fertiges kann ich www.rapidforum.de empfehlen - zum selber basteln bietet sich phpBB an.

Musik: Ist eine schwierige Sache. Hintergrundmusik würd ich generell weglassen. Viele surfen mit Onlineradio oder hören Musik von der Festplatte. Wenn unsere Seite dann dazwischendudelt ist der User bestimmt nicht erfreut und macht sie gleich wieder zu.

Downloads: Werden als ganz normale Links via <a href=...> eingebunden. Aber acht geben auf Urheberrecht (besonders bei Programmen und Musik-files).

Java-Script / Flash: Damit kann man tolle Sachen machen, allerdings werden sie nicht überall unterstützt. Je nachdem wer die Zielgruppe is sollte man sich bewusst werden ob man darauf verzichtet oder nicht. Firmen die Unternehmenssoftware anbieten werden z.B. möglichst darauf verzichten, da andere Firmen meist JS im Zuge der Sicherheit deaktiviert haben. Ebenso sollte JS in wichtigen Elementen (wie dem Menü) nicht verwendet werden.

Schritt 7: Korrektur

Fehler, wie nicht übersetzte Umlaute, vergessene HTML-Tags oder eine fehlende alt-Angabe bei Bildern, schleichen sich immer wieder ein. Deshalb sind Validatoren für die Korrektur der Seiten unumgänglich. Sie überprüfen den Quelltext und weisen auf die Fehler hin. Alle Firefox-User können sich hier freuen: HTML-Tidy bietet ein Firefox-Plugin an was die Validierung direkt im Seitenquelltext mit anzeigt, alle anderen können ihre Seite bei validator.w3.org überprüfen lassen. Zu empfehlen wäre auch die Seite in allen gebräuchlichen Browsern mal anzeigen zu lassen. Also Internet Explorer, Firefox, Opera und evtl Safari (Mac). Manche setzen Angaben wie z.B. padding anders um wodurch das Design zerstört werden kann und das wollen wir ja nicht.

Schritt 8: Upload

Für den Upload benötigen wir natürlich erst einmal Webspace, also Speicherplatz auf einem Server im Netz. Anbieter gibt es auch hier wie Sand am Meer. Grob könnt ihr schon aussondern je nachdem wieviel Webspace ihr benötigt, ob ihr PHP und MySQL wollt, wie die spätere Adresse lauten soll oder ob ihr Werbung akzeptieren könnt.

Für eine echte Domain (www.name.de, www.name.info..) werdet ihr vermutlich was bezahlen müssen. Entweder direkt als Komplettpaket bestehend aus Domain und Webspace oder nur eine einzelne Domain als Weiterleitung (da is dann kein Space dabei).

Kostenlos steht z.b. www.funpic.de momentan ganz hoch im Kurs. Allerdings müsst ihr euch bei kostenfreien Anbietern mit Domainnamen ala name.anbieter.de oder www.anbieter.de/name zufrieden geben. Als kleine "Verschönerung" würde sich hier noch eine www.nic.de.vu domain anbieten -> www.name.de.vu (oder .de.tl, de.am...).

Für den Upload steht ein FTP-Zugang oder bei kostenlosen manchmal ein WEB-Zugang zur Verfügung. Für die Übertragung via FTP benötigen wir ein FTP-Client wie z.b. SmartFTP, PSFTP, Filezilla oder WSFTP. In diese trägt man die vom Provider bekommenen Daten (Domain, Username, Passwort) ein und verbindet sich. In nem kleinen Protokollfenster kann man meistens mitverfolgen was der Client gerade macht. Anschließend hat man 2 Fenster, ähnlich dem Windows Explorer. Auf der einen Seite die lokale Platte, auf der anderen den Webserver. Jetzt kann man via Drag&Drop ganz einfach die Bild- und HTML-Dateien auf den Webspace ziehen.

Mehr Infos dazu in einem extra Tutorial !

Wichtig: Die Datei-Pfade sind ja bereits relativ angepasst, so das es später keine Probleme geben wird. Man kann NICHT vom Netz auf die eigene Festplatte zugreifen.

Schritt 9: Wartung

Bei der Anwendungsentwicklung nimmt die Wartung den größten Teil eines Programms ein. Bei Webseiten hängt sie vom Inhalt hab. Aktualisieren des Inhaltes, kontrollieren der Gästebucheinträge, evlt Deadlinks löschen. Zum überarbeiten einer Seite einfach die Version auf der Festplatte zur hand nehmen und die gewünschten HTML-Anpassungen vornehmen. Anschließend nur die geänderten Dateien / Grafiken auf den Webspace ziehen und fertig.

Schlusswort:

So, das wars. Ich hoffe ich konnte eine kleine Hilfe geben. Sicher gibt es noch eine Menge mehr, was man erzählen könnte, doch ich will hier auch nicht zu weit ausholen. Was Syntax & Co angeht steht eh alles im Selfhtml. Die groben Schritte sind beschrieben und für Fragen oder Anregungen einfach ne Mail schreiben bzw n Eintrag im Forum hinterlassen.

devil-driver, Dezember 2007 - Nürnberg