Leitfaden: Webdesign für AS Teams

[Grimm]

Webdesign für AirSoft Teams
Ein Leitfaden für AS Teams / © 2007 / Walter Ruf

Einführung
Dieser Leitfaden richtet sich an Airsoft (AS) Teams, die Ihre Webpräsenz selbst gestalten wollen und nicht wissen wie. Zur Zeit herrscht ja ein Boom an AS Webseiten, die mit dem sog. „Homepagebaukasten“ gemacht sind. Sie alle haben eines gemeinsam: Fertiges, vorgekautes 08/15 Design, Werbeeinblendungen und austauschbare Optik. Aber das muss nicht sein! Dieser Guide soll AS Spielern ein paar Möglichkeiten aufzeigen, aus dem Einheitsbrei herauszukommen ohne Unsummen auszugeben oder Monatelang HTML zu büffeln. Eines sollte aber klar sein: Dies ist ein rudimentärer Crashkurs! Besser geht immer! Auch wird nicht jedes Fitzelchen erklärt. Selbst mitdenken ist gefragt!

Möglichkeiten
Will man eine Webseite hat man 2 grundsätzliche Möglichkeiten: Machen oder Machen lassen! Wir fokussieren erstere Variante. In diesem Leitfaden gehe ich davon aus, dass der Leser keine oder fast keine HTML Kenntnisse hat. Hieraus ergeben sich folgende Möglichkeiten:

1) Nutzung eines CMS
2) Erstellen der Webseite mit dem Editor (dies wird der Hauptpunkt des Leitfadens)

Es gibt 2 gute CMS (Content Management Systeme), die sich für den Einsatz durch Anfänger eignen:
http://www.cmsimple.dk/
http://sourceforge.net/projects/sphpblog/
Beide CMS bringen ihre Dokumentation mit, deswegen werde ich nicht auf weitere Details eingehen. Wichtig ist zu beachten, dass diese Systeme PHP fähigen Webspace, einen FTP Client und die Möglichkeit der Rechtevergabe (CHMOD) benötigen!
Grundsätze
Wie alles andere im Leben folgt das Webdesign auch gewissen Regeln. Die wichtigsten Punkte sind hier zusammengefasst:
Form folgt Funktion! Die Darstellung der Website hat sich immer am Zweck zu orientieren!

1. Inhalt vor Design! Die buntesten Effekte sind wertlos, wenn der Inhalt Mau ist!
2. Kompatibilität! Nichts ist peinlicher als die gängigen „Optimiert für IE4711 bei 1215x55Pixeln Auflösung“. Die einzige Empfehlung ddie auf einer Website zu finden sein sollte ist „am besten mit einem Monitor betrachtet!“ Alles andere ist Blendwerk, das nur die Inkompetenz des Erstellers widerspiegelt!
3. Übersicht: Inhalte müssen klar strukturiert und auffindbar sein. Blödsinn wie „Headquarter“ , „Communication“ oder „Quartermaster“ sind nur auf den erste Blick witzig. Kontakt, Impressum und Mitglieder kann ruhig ausgeschrieben werden! Untermenüs schaffen Platz, aber die Struktur Mitglieder --> Vollmitglieder --> Männlich --> Mit Bart ---> M16 User --> Niko Nulpe nervt nur! KISS – Keep it simple, Stupid!
4. Modemuser sind keine Legende! Es gibt sie! Optimiert eure Seiten daraufhin! Bilder solten über 150KB nicht überschreiten, Logos und Voransichten über 50 KB sind unnötig!
5. Lesbarkeit: Nichts schlimmeres als gelbe Schrift auf weißem Grund. Oder Flecktarntexturen als Hintergrund. Einfarbig, am besten Weiß sollte der Hintergrund sein. Wenn farbig, dann mit gutem Kontrast zur Schrift
6. Interessante Bilder: Niemand will 200 Bilder von unscharfen Gestalten im Wald sehen! Das mag für die Beteiligten nett und nostalgisch sein, für außenstehende Besucher ist es nur öde! Bilder auf einer HP müssen je 2, besser alle beide Punkte erfüllen: Entweder stimmige Atmosphäre, gute Bildkomposition und interessante Szene oder außergewöhnliche Inhalte / Objekte. Alles andere kann in einer internen, von außen nicht sichtbaren Galerie verschwinden!
7. Keine nervigen Scripte! Blinkende Cursor, Kometenschweife oder regnende Aks führen nirgendwo hin, außer in die Hall of Shame des Webdesigns! Das gleiche gilt für nervige Flash Intros und Hintergrundmusik! Will jemand Musik hören, legt er eine CD ein! Also: lasst es bleiben! Danke!
8. Einheitlichkeit: Einigt euch auf EINE Schrift und einen Stil! Nicht einundrölfzig verschiedene Styles! Das wirkt wenn ihr Kali Blabla heißt und Flickenteppiche verkaufen wollt, aber ansonsten wirkt es unprofessionell!
9. Saubere Präsentation: Achtet auf Schreibstil und Rechtschreibung. Es wirkt ansonsten unprofessionell, vor allem Jugendliche, die mit Waffen hantieren wollen aber sich nicht artikulieren können werfen kein tolles Bild auf das Hobby (und sich selbst)!
10. Maßvoller Umgang mit Farben und Grafik: Einigt euch auf maximal 4 Grundfarben für Hintergründe und 2 Textfarben. Und minimiert den Einsatz von Grafiken auf sinnvolle Anwendungen!
11. Keine Sonderschriftarten! Wenn Ihr etwas wollt, was vom üblichen Times Roman/Arial/Verdana abweicht, macht es als Logo!
12. Keine kryptischen Domains! .de/.net/.org Domains sind mit Webspace ab ca 5 EUR/Monat zu haben! NUTZT das! Ihr habt das Geld für Knifften und Munition, dann sollte das auch drin sein!

Ressourcen
Jetzt geht es ans Eingemachte, was braucht ihr? Zu aller erst Webspace. Hierzu gibt es auf einschlägigen Seiten, über Freund Google zu finden, genug Infos. Ich gehe also davon aus, dass Ihr euch darum bereits gekümmert habt. Wenn nicht, tut das jetzt!

http://de.selfhtml.org/ SelfHTML ist DAS Tutorial für HTML Anfänger shclechthin. Eigentlich findet man da alles was man braucht und ich könnte hier abschliessen. Mach ich aber nicht, ich komprimier das nochmal. Aber wer nicht weiterkommt möge erst auf SelfHTML gucken ehe er mich löchert. Danke!
http://www.nvu-composer.de/ NVU ist ein kostenloser WYSIWYG (What you see is what you get) Editor, mit dem wir in diesem Leitfaden arbeiten werden

http://www.filezilla.de/ Filezilla ist ein kostenloser FTP Client, der das bequeme hochladen der Seiten erlaubt! Nicht nötig, wenn der Webspace über eine Upload Funktion verfügt, aber sinnvoll und praktischer!

http://www.getpaint.net/ Paint.net ist ein kostenloses Grafikbearbeitungsprogramm. Es beherrscht Filter, Ebenen, Transparenzen und vieles mehr. Kurz alles was man für eine Website braucht!
http://www.jordheim.info/beispiel/ Eine Beispielseite, von mir in knapp 45 Minuten gebastelt. Genau diese Seite werden wir in Leitfaden Stück für Stück nachbauen! Wird sicher länger als 45 Minuten dauern, aber hey, ich mach das ja auch schon ein paar Jährchen, also keine Panik!

Das Design
Als erstes erstellt ihr einen Ordner auf eurer Festplatte, wo alles gespeichert wird. Darin erstellt Ihr einen Unterordner „bilder“ für kommende Grafiken. Hier gleich ein wichtiger Punkt: Alles was ihr erstellt und speichert MUSS im Dateinamen frei von Leerzeichen, Sonderzeichen und Umlauten sein. Die Seite „Über uns“ speichert ihr also als „ueber_uns.html“ ab!

Als erstes öffnet Ihr NVU und habt ein leeres Fester vor euch (Sieht ein bisschen aus wie Word)!

[URL=]http://www.jordheim.info/gallery/tutorial/speichern.jpg"]Hier[/URL] gebt ihr euren Seitentitel an uns speichert die Datei dann als index.html (WICHTIG!) im vorher erstellten Ordner ab!
Anschliessend geht ihr auf Format -- > Seitenfarben und -hintergrund und stellt da die Farben entsprechend dieser Grafik ein!

Basistabelle erstellen
Jetzt geht es an das erstellen des Grunddesigns mit Kopfzeile, Navigation und Hauptfenster. Hierzu klickt Ihr 1x in das Grosse Hauptfenster und geht dann auf Tabelle (1) und wählt 3x1 Spalten aus.



Das ganze sieht dann so aus:

Jetzt müssen die Tabellen formatiert werden:
Schritt eins: Breite einstellen. Hierzu doppelklickt ihr auf eine beliebige Linie der Tabelle. Dies öffnet das Bearbeitungsfenster der Tabelle. Hier gibt es 2 Reiter: „Tabelle“ und „Zelle“. Wechselt hier auf den Reiter „Tabelle“. Tragt bei den Größenwerten jeweils 80% ein und wählt als Maßeinheit Größe des Fensters. Bei „Ränder und Abstände“ tragt die Kombo 1:2:3 ein. Tabellenausrichtung wählt ihr „mittel“ und Titel „kein“. Als Hintergrundfarbe wählt ihr „weiss“ aus.

Eure Seite sollte jetzt so aussehen:


Die Zeilen sind jetzt gleichmäßig verteilt, was so nicht sein sollte.
Das ändern wir also:
Doppelklick in die erste Zeile, hier bleiben wir im Reiter „Zelle“. Unter Grösse setzt ihr das Häkchen und tragt den Wert 50 Pixel ein. Danach und tragt bei Hintergrundfarbe im Feld „Hex“ #FFCC66 ein! Auf OK klicken, und wieder Doppelklick, diesmal auf die mittlere Zeile. Hier wird unter Grösse Höhe 30 Pixel und unter Hintergrundfarbe #999900 eingetragen. Wieder mit OK bestätigen.
Eure HP sollte jetzt so aussehen!

Es empfiehlt sich, in jeder Zelle die Eigenschaft „Inhalt ausrichten: Vertikal auf „Oben“ zu stellen

Kopf und die Navigation.
Als erstes tragt Ihr in der obersten Zeile eure Teambezeichnung und eine so genannte „Tagline“ ein. Im Fall des Beispiels : "Airsofteam Entenhausen Ein Quack für alle, Alle für einen Quack!" Nach Entenhausen kommt ein Zeilenumbruch (Enter), der Teamname wird über den Text vergrößern Button vergrössert.
Als kleiner Designkniff gebt ihr bei der Textfarbe die Farbe der darunter liegenden Navigationszeile an.
Anschliessend kommt folgender Text in die mittlere Zeile:
Willkommen | Über Uns | Mitglieder | Bilder | Termine | Regeln | Links | Impressum und Kontakt

Wer will kann die Textfarbe hier von der Hintergrundfarbe oben übernehmen, das wirkt sehr gut und homogen. Man darf dann nur nicht vergessen, die Linkfarben unter Format -- > Seitenfarben und -hintergrund entsprechend zu ändern.
Das Endergebnis sollte jetzt so aussehen!

Wenn das fertig ist, geht Ihr auf Speichern. Anschliessend nochmal auf "Datei--> Speichern unter..." und speichert die Datei unter „ueber.html“. Danach wieder auf Datei-->Speichern unter... und speichert sie unter „mitglieder.html“. Das wiederholt ihr so oft, bis ihr für jeden Menüpunkt eine einzelne Kopie gespeichert habt.

Anschliessend geht ihr wie folgt vor:
Öffnet wieder die Datei „index.html“ mit NVU. Ändert die Textfarbe vom Navigationspunkt „Willkommen“ auf Gelb.
Markiert „ueber uns“ mit der Maus, klickt auf Link, wählt unter "Durchsuchen" die Datei „ueber“ aus, und klickt auf OK. Wiederholt das bei allen Navigationspunkten mit den entsprechenden Dateien, sodass die Navigationspunkte jetzt mit den zuvor erstellten Dateien verknüpft sind

Dann speichert ihr die Seite und öffnet die Datei „ueber_uns.html“ und editiert sie auf die selbe Art („Über uns“ gelb färben, Links einfügen, etc...)

Wenn das Fertig ist, sollte eure Seite, wenn ihr index.html im Browser auch schon navigierbar sein. Jetzt können in die einzelnen Seiten noch Inhalte eingetragen werden...

Inhalte
index.html
Die Seite fungiert als Start und Willkommensseite
Um einen separaten Newsbereich einzufügen nutzen wir Tabellen:
Als erstes über Einfügen --> Tabelle eine Tabelle 1x2 im Hauptfenster einfügen (2 Spalten), die Tabelle erhält folgende Werte:

Breite 100%
Ränder und Abstände 0/5/0
Sonst wird nichts modifiziert

Anschließend öffnet man via Doppelklick in die rechte Seite der 2 Zellen das Bearbeitungsfenster wieder und gibt als Breite der Zelle 25% an.
In der 25% Breiten Zelle legt ihr eine Weitere Tabelle mit 1 Spalte, 11 Zeilen an. Bei „Ränder und Abstände“ tragt die Kombo 0:0:3 ein. Jetzt doppelklickt der Reihe nach jede zweite Zelle an und gebt ihr die selbe Hintergrundfarbe wie die Hauptseite hat. In das erste Tabellenfeld tragt „Neuigkeiten“ ein, in die Folgenden die Newsmeldungen.

In das weiße Feld tragt einen beliebigen Willkommenstext ein.

Anschließend können die restlichen Seiten gefüllt werden, Formatierungen überarbeitet und Rechtschreibfehler behoben werden.

Ist das gemacht, hat man das: http://www.jordheim.info/beispiel/
Details wie das erstellen einer Galerie folgt demnächst!

Die Seite ist jetzt gerademal 30 KB groß, ist durch die prozentuale Skalierung in der Breite auf jedem Monitor ab 650x480 Pixeln Auflösung voll kompatibel, lässt sich selbst auf PDA´s gut darstellen und läd selbst mit GPRS rasend schnell. Und gekostet hat sie auch nichts!

[Guest]

Aufgeräumt und gepinnt! -Foley