Webseite erstellen
Wie erstelle ich eine Webseite?
Dies ist eine Anleitung für alle die wirklich wissen wollen, wie man eine grafisch korrekte und leicht zu navigierende Webiste schafft. Für alle die meinen sie brauchen dafür nur 10 Minuten und denken sie können sich den Inhalt von einer anderen Seite kopieren, vergesst es, hört auf zu lesen und schämt euch.
Für den Rest der jetzt noch nicht in der Ecke steht und heult, habe ich hier all mein Wissen zusammen getragen, was aber natürlich nicht ausreichen wird, denn die erste Devise heißt (wie auch sonst überall) üben, üben und nochmals üben. Auch sollten man mit den grundlegenden Arbeitsschritten in html und Grafikbearbeitung vertraut sein. Sollte trotzdem irgendwas unklar sein, so hoffe ich das sich keiner scheut mich mit tausenden von emails zu massakrieren, da auch ich das hier alles noch ein wenig verfeinern muss.
Eigentlich die wichtigste Phase, denn wenn hier etwas falsch gemacht wird kann es passieren das am Ende das ganze Konzept nicht stimmt. Zu allererst müsst ihr euch darüber Gedanken machen, was denn überhaupt in die Website hinein soll. Hast du ein Thema gefunden was die anspricht, dann sieh dich auf Websiten um die ähnlich Ziele wie du verfolgen. Mach dir Notizen was dir gefällt und was nicht, was hältst du für überflüssig, was begeistert dich. Merke dir vor allem die verschiedenen Strukturtypen und überlege wie du deine Website in solch eine Struktur packen kannst! Für den Anfang ist eine Seite mit einfachen Header, Navi, dem Textfeld und einem Abschluß das beste.
Der Header Er soll dem Besucher sofort zeigen womit er es zu tuen hat. Er sollte mit hohem Wiedererkennungswert ausgestattet sein, damit die Seite einzigartig bleibt, dann am besten noch irgendwo die Url der Seite mit einbringen und fertig. (Beachte bitte dass das rechts nur eine grobe Übersicht ist, die ganzen Teile sollten natürlich farblich und von der Form her zusammen passen, mehr dazu unter Design)
In ihr stehen die einzelnen Seiten der Website unter Topics zusammen gefasst. Das könnte dann z.B so oder auch so lauten:
| Ich |
| Biographie Fotos Hobbys |
| Meine Freundin |
| Biographie Fotos Hobbys |
Dazu solltet ihr auf einem Schmierzettel erst einmal alles zusammen stellen was so rein soll und das dann wie oben gezeigt ordnen.
Dort erscheint dann der Text (toll nich?).
Muss nicht unbedingt dasein, aber macht das ganze Design einfach runder. Dort kann z.B. ein Disclaimer, ein Wieder-nach-oben-komm-Button oder ein Kontaktbutton stehen.
Sind die Vorüberlegungen abgeschlossen, kommt nun der künstlerische Aspekt an die Reihe. Dazu solltest du erst einmal ein Anti-aliasing-fähiges Grafikprogramm besitzen (z.B. PSP, Cpt), das macht z.B. Kreise schön rund und lässt alles nicht so pixelig erscheinen. Mach dich mit Programm ein wenig vertraut indem du z.B. einige Workshops (in Cpt) machst. Erstelle zuerst ein neues Bild (Datei => neu), damit es auf die Standardauflösung passt, machst du es 780 Pixel breit (also auf jeden Fall kleiner als 800) und ungefähr 1500 hoch. Dann nimmst du das obige Schema als Vorlage und gestaltest es mit zum Thema passenden Bilder und natürlich der richtigen Schriftart aus. Achte darauf dass das ganze nicht allzu überladen wirkt, konzentriere dich also lieber auf das wesentliche. Abgucken ist zwar verboten, aber ein paar Impressionen solltest du dir bei artverwandten Websiten schon holen.
Zur Zeit ist es ja noch nicht html fähig und deshalb solltest du nacheinander um die wichtigsten Abschnitte (Header, Navi, Abschluss) Masken ziehen, alles ausschneiden, wieder neu einfügen und unter header.gif u.s.w abspeichern. Dazu ist folgendes zu sagen, verwende nie .jpg, ausser du willst Fotos abspeichern, die echte Stärke von .gifs liegt darin die Grafiken auf ein Minimum der Farbanzahl zu setzen und so kurze Ladezeiten zu erreichen, probieren also in 256->128->64->32iger Farbschritten die Grafik im besten Gutausseh/Ladezeit-Verhältniss darzustellen. Natürlich musst du das selbe noch einmal mit der Navi machen, da du ja später die einzelnen Buttons als Verknüpfung für die nächste Seite machen willst. Da die ganzen Bildchen immer noch nichts richtiges bringen sollten sie jetzt, in eine <table></table> gepackt werden, dazu solltest du dir am besten selfhtml durchlesen! Im einfachsten Fall würde das ganze so aussehen:
<html>
<head>
<title>Meine supertolle Seite</title>
</head>
<body>
<img src=“header.gif“>
<table BORDER=0 CELLSPACING=0 CELLPADDING=0 COLS=2 WIDTH="750">
<tr>
<td WIDTH="">
<a href=“seite1.shtml“><img src=“button1.gif“></a>
<br><a href=“seite2.shtml“><img src=“button2.gif“></a>
<br><a href=“seite3.shtml“><img src=“button3.gif“></a>
</td>
<td WIDTH="">Der Text der dann auf der Seite erscheint</td>
</tr>
</table>
<img src=“abschluss.gif“>
</body>
</html>
Verzichte hierbei auf Editoren wie Frontpage oder ähnliches, sondern nimm dir lieber einen Taschenrechner (den man bei komplizierteren Tabellenkonstruktionen braucht) und mach das per Hand, den dieser Quelltext soll ja auf allen Seiten dein Grundgerüst sein.
Wie man das alle dann noch auf jeder Seite erscheinen lässt lies unter dem Tutorial über shtml durch.