Homepage-Tutorial
Hallo und herzlich willkommen zu meinem Homepage-Tutorial!
Auf dieser Seite möchte ich Dir eine kleine Anleitung geben, wie Du Deine eigene Homepage schnell und einfach Deinen Vorstellungen anpassen kannst. Die im HP-Menü vorgegebenen Formatierungsmöglichkeiten reichen für den Anfang vielleicht aus, aber um die Seite individuell zu gestalten gibt's ein paar Tricks, die ich Dir näher bringen möchte.
Für den Anfang benötigst Du folgende Dinge:
a) Einen ordentlichen HTML-Editor, weil das Fenster im HP-Menü für die "Beschreibung" viel zu klein und damit zu unübersichtlich zum editieren ist. Ich empfehle da den HTML-Editor von Ulli Meybohm. Neben der besseren Übersicht bietet der HTML-Editor einige zusätzliche Funktionen, auf die ich im späteren noch genauer eingehen werde.
b) Schön ist es, wenn Du über Webspace (Speicherplatz im Internet) verfügst. Dort kannst Du individuelle Dateien ablegen, auf die Du von Deiner CPB-HP aus verlinken kannst. Solltest Du noch keinen Speicherplatz haben, ist das nicht weiter schlimm, wir werden uns einen Workaround dafür suchen. Bei einigen Internet- und Mail-Providern ist der Webspace bereits im "Rundum-Sorglos-Paket" enthalten, bzw. dazu buchbar. Dort solltest Du Dich als erstes mal erkundigen, bevor Du Dir Angebote von reinen Webspace-Anbietern einholst.
c) Außerdem solltest Du Dir folgende Seiten zur Hilfe nehmen:
selfhtml und CSS 4 You
Auf diesen Seiten findest Du alles wichtige rundum die HP-Gestaltung. Zum einen gehen die Seiten weit über die hier dargestellten Formatierungsmöglichkeiten hinaus, zum anderen bieten sie, bis zur Fertigstellung des Tutorials, eine gute Alternative zum Einstieg.
Damit haben wir nun alle wichtigen Werkzeuge bei der Hand und können uns gleich an die Gestaltung unserer CPB-HP machen.
Diese Tutorial zielt nicht darauf ab, eine eigene Website zu erstellen. Es soll lediglich als Hilfestellung für die Gestaltung der CPB-HP dienen. Selbstverständlich kann man aber mit den hier erworbenen Kenntnissen sich an die Gestaltung einer eigenen Website wagen. Fragen dazu werde ich gerne im CPB beantworten.
Zuerst wollen wir einen genauen Blick auf das HP-Menü werfen. Was wird uns dort angeboten? Die grundlegenen Mittel zur Gestaltung einer Webseite sind:
- Hintergrundfarbe bzw. Hintergrundbild
- Textfarbe
- Schriftart
- und die Schriftgröße
Zunächst wollen wir uns für eine Hintergrundfarbe entscheiden. Voreingestellt ist schwarz, was jedoch sehr gewöhnungsbedürftig für die Augen ist. Besser sind helle Farben, am unaufdringlichsten Pastelltöne. Für die gewählte Farbe muss nun der Code in das Formularfeld eingegeben werden. Dieser besteht aus einer # (Raute) und drei hexadezimalen Zahlen, die den Farbanteilen der Farben Rot, Grün und Blau entsprechen. Für die Umrechnung einer gedachten Farbe in einen Farbcode ist schon einige Erfahrung notwendig, einfacher ist es, wenn man sich den Wert aus einer Tabelle heraus sucht oder ihn mit einer Pipette abgreift. Ein für diese Zwecke sehr nütliches Tool ist DarkCryptX ColorPix. Mit diesem Tool lassen sich nicht nur Farben aus der integrierten Farbverlaufstabelle auswählen, sondern auch alle anderen auf dem Monitor sichtbaren Farben abgreifen. Das Programm ist lediglich 258 KB groß und kommt ohne Installation aus! Mit einem Klick auf den Doppelpfeil unten links werden die Farbwerte ein und ausgeblendet. Per copy 'n paste kann der Farbcode nun problemlos in das Formularfeld übernommen werden.
Copy 'n paste wird uns noch das ganze Tutorial hindurch begleiten, und wir werden feststellen, dass sich damit ein Großteil der anfallenden Arbeiten erledigen lässt. Nur den Text der Homepage werden wir hauptsächlich per Tastatur eingeben.
Was heißt eigentlich copy 'n paste und wie funktioniert es? Das ist englisch und bedeutet kopieren und einfügen. Eigentlich müsste es mark, copy 'n paste heißen, da man das zu kopierende Element erst markieren muss. Das geht am einfachsten mit dem Mauszeiger. Mit gedrückt gehaltener linker Maustaste ziehst Du den Mauszeiger über den auszuwählenden Bereich. Dieser wird dann farblich invertiert dargestellt. Anschließend klickst Du auf die rechte Maustaste und wählst aus dem Kontextmenü den Eintrag "kopieren" aus. Alternativ kannst Du auch die Tastenkombination Strg+C verwenden. Nun fügst Du die Kopie noch an der gewünschten Stelle ein. Klicke dazu mit der rechten Maustaste in das Formularfeld und wähle aus dem Kontextmenü den Eintrag "Einfügen" aus. Alternativ dazu, kannst Du auch wieder eine Tastenkombination verwenden. Drücke dafür Strg+V.
Wo wir schon gerade bei den Farben sind, wollen wir uns auch gleich eine Farbe für die Schrift überlegen. Sie sollte sich durch einen deutlichen Kontrast vom Hintergrund abheben. Versuch macht klug und probieren geht über studieren. Lasse Dir bei der Wahl der Farben ruhig Zeit. Eine harmonische Farbgestaltung ist das A und O einer ansprechenden Seite.
Wenn Du eine für Deine Seite passende Farbkombination gefunden hast, können wir uns auch Gedanken über ein Hintergrundbild machen. Im Internet findet man zahlreiche Vorlagen, zum Beispiel bei kostenlose-grafiken.de. Auf den ersten Blick wird sicherlich gleich etwas gefälliges unter den angebotenen Vorlagen vorhanden sein; aber deckt sich das auch mit unserer Farbkombination aus dezentem Hintergrund und dominierender Schriftfarbe? Grundsätzlich solltest Du auf animierte Hintergrundgrafiken verzichten. Nicht nur, dass sie meist eine dunkle Grundfarbe haben, sie machen die Seite außerdem unruhig und schwer lesbar. Aber auch unter den statischen Hintergundbildern findet sich nicht gleich etwas passendes. Mit einem Grafikprogramm, wie z.B. Gimp oder IrvanView kannst Du die Farbgebung und Farbintensität das Hintergrundbildes nachträglich beeinflussen. Anschließend musst das bearbeitete Hintergrundbild jedoch auf einem Webspace abspeichern, um später von der CPB-HP darauf zu verlinken.
Gerade bei Grafiken bietet es sich an, wenn man über keinen eigenen Webspace verfügt, einen externen Anbieter zu wählen. An dieser Stelle sei auf 250kb.de verwiesen, wo Du kostenlos, für den Zeitraum von mind. 365 Tagen, ein Bild bis zu der Größe von 250kb hinterlegen kannst. Das sollte für den Anfang genügen. Wenn das Bild in einem Jahr automatisch gelöscht wird, lädst Du es einfach nocheinmal hoch. Vielleicht hast Du bis dahin aber bereits etwas Webspace, wo Du Deine Dateien ablegen kannst.
Ein Hintergrunbild zeichnet sich, im Vergleich zum planen, farbigen Hintergund, durch eine strukturierte Oberfläche aus. Diese soll das Gesamtbild der Seite etwas lebendiger machen - für etwas Variation sorgen. Trotzdem darf sie sich nicht zu sehr in den Vordergrund drängen, heißt: Sie muss noch in einem guten Kontrast zur gewählten Schriftfarbe stehen. Wenn Du nun eine passende Hintergrundgrafik gefunden, bzw. eine Hintergundgrafik nachbearbeitet oder selbst entworfen und im Netz abgespeichert hast, musst Du diese noch verlinken. Dazu gibst Du im HP-Menü in das Formularfeld "Hintergrundbild" die Webadresse zum dem Hintergrundbild ein.
Als ich mich vor ein paar Jahren in das Webdesign stürzte und meine ersten Seiten zusammenschusterte habe ich, wie es sich für einen waschechten Hertener gehört, das Wappen meiner Heimatstadt verkleinert und verblasst. Nun habe ich das Bild mal bei 250kb.de abgespeichert und dafür folgenden Link erhalten:
http://250kb.de/u/080809/j/79b2c938.jpg
Setzte ich diesen Link nun in das Formularfeld ein, würde das Ergebnis so aussehen:
Herzlich willkommen auf Herteners CPB-HP!
Bei der Schriftfarbe habe ich mich für einen dezenten, dunklen Grünton entschieden. Der ist nicht zu aufdringlich und hebt sich deutlich vom Hintergrund ab.
Nachdem wir uns nun ausgiebig mit der farblichen Gestaltung unserer CPB-HP auseinandergesetzt haben, wollen wir auch noch einen kurzen Blick auf die zuverwendende Schriftart und -größe werfen. Bei der Schriftart solltest Du bedenken, dass diese immer auch auf dem PC desjenigen installiert sein muss, der Deine Seite aufruft. Daher bietet es sich an, eine der Standardschriftarten zu wählen. Grundsätzlich unterscheidet man zwischen serifen und serifenlosen Schriften. Serifen sind kleine Häkchen am Anfang und am Ende der Buchstaben. Sie sollen das Lesen vereinfachen, indem sie uns eine zusammenhängende Schrift sugerieren. Die Standardschriftart für eine Serifenschrift ist Times New Roman:
Und so sieht es aus, wenn ein Text in Times New Roman dargestellt wird. Kannst Du die kleinen Häkchen an den Buchstaben erkennen? Ich habe die Schrift extra etwas größer gemacht, damit es besser zu sehen ist.
Serifenschriften werden aus oben genanntem Grund hauptsächlich in Büchern und Romanen verwendet. Greif doch gleich einmal zu einem Buch und schau hinein.
Neben den Serifenschriften gibt es noch die serifenlosen Schriften. Dazu gehört auch die klassische Druckschrift, wie wir sie aus der Grundschule kennen. Zu den gebräuchlichen serifenlosen Schriftarten gehören Arial und Verdana; wobei Verdana die jüngere der beiden ist und "vor allem im Hinblick auf optimale Bildschirmdarstellung auch bei kleinen Schriftgrößen entwickelt" wurde.
Und so sieht's aus, wenn ein Text in Verdana dargestellt wird. Hier gibt's keine kleinen Häkchen wie bei Times New Roman. Auch hier habe ich die Schrift etwas größer gemacht, damit der Vergleich leichter fällt.
Wer sich für Verdana als Standardschriftart entscheidet macht im Grunde nichts verkehrt.
Wenn Du Dich für eine Schriftart entschieden hast musst Du den Namen noch in das Formularfeld eintragen.
Last but not least bleibt die Frage nach der richtigen Schriftgröße zu klären. Dabei ist zu berücksichtigen, dass die Schrift nicht zu klein werden darf. Möchtest Du beispielsweise einen kurzen Kommentar unter ein Bild setzen, dessen Schriftgröße kleiner ist als die Standardschriftgröße, musst Du zuvor die Standardschriftgröße ausreichend groß gewählt haben. Bei Überschriften hingegen gibt's dieses Problem nicht, denn größer als die Standardschriftgröße kannst Du eine Schrift fast immer machen. Als Faustregel hat es sich bewährt die Standardschriftgröße auf 12 Pixel festzulegen. Unterschriften bekommen demnach eine Größe von 10, minimal 8 Pixeln. Für Überschriften wird alles jenseits der 12 Pixel verwendet.
Überschrift Verdana 16 Pixel
Textfluß Verdana 12 Pixel
Unterschrift Verdana 10 Pixel
Unterschrift Verdana 8 Pixel
Überschrift Times New Roman 16 Pixel
Textfluß Times New Roman 12 Pixel
Unterschrift Times New Roman 10 Pixel
Unterschrift Times New Roman 8 Pixel
Leider kann die CPB-HP nichts damit anfangen, wenn wir nun in das Formularfeld 12px eintragen. Dort sind lediglich die Zahlen von 1 bis 7 zulässig, die den Schriftgrößen der folgenden Tabelle entsprechen:
Schriftgröße 1 entspricht 8px
Schriftgröße 2 entspricht 13px
Schriftgröße 3 entspricht 16px
Schriftgröße 4 entspricht 18px
Schriftgröße 5 entspricht 24px
Schriftgröße 6 entspricht 32px
Schriftgröße 7 entspricht 48px
--------------------
to be continued...
... dieser Teil des Tutorials ist noch nicht fertig - schau doch später nochmal vorbei ;-) ...
Speicher ein CSS-File irgendwo im Internet ab und verweise darauf in der "Beschreibung" in folgender Weise:<link rel="stylesheet" type="text/css" href="http://www.domain.tld/css/default.css" />
Diese Seite wurde 2006 vom Hertener im CPB-Corporate-Design erstellt und wird nun im Jahr 2008 für www.hertener.net überarbeitet.
Die verwendeten Grafiken sind Eigenkreationen und dürfen frei verwendet werden.
Der fachliche Inhalt der Seite ist das geistige Eigentum vom Hertener und unterliegt dessem Copyleft.
Dieses Tutorial wurde ursprünglich für das CPB erstellt. Daher hat es zum gegenwärtigen Zeitpunkt der Überarbeitung noch keine Allgemeingültigkeit. Eine Weitergabe, auch auszugsweise, wäre daher Blödsinn!
Korrekturlesung erwünscht - Verbesserungsvorschläge erbeten
Hertener