|
für
Webdesign-Neulinge
Wie erstelle ich eine Webseite
|
1.
|
Überlege,
was Deine Webseite enthalten
soll und mach eine Liste.
Dann erstelle eine Art
Diagramm der gewünschten
Seiten (Site Map) ungefähr
so:
|
|
|
HOME
|
ist
die "Visitenkarte",
am Besten mit einem Bild
oder Logo und dem Webseitentitel.
Diese erste Seite sollte
zünden, also grosser Auftritt,
und damit Besucher
neugierig auf die weiteren
Seiten zu locken.
|
|
|
ÜBER
UNS
|
hier
stellst Du Dich vor. Du
musst nicht ins Detail
gehen, aber es ist nett
für den Besucher, wenn
er weiss bei wem er zu
Besuch ist. Also z.B. was
Du machst, in welchem Land
Du lebst, warum Du die
Webseite führst etc.
|
|
|
MEIN
HOBBY/
UNSERE
HUNDE
|
oder
was immer Du mit der Webseite
vorstellen willst
|
|
|
PHOTOS
und
Anderes
|
Da
kannst Du mehrere Seiten
machen, was immer Du zeigen
möchtest.
Die
nächsten 3 Seiten sind
üblicherweise am Schluss
|
|
|
GÄSTEBUCH
|
Such
im Internet nach einem
Gratis-Gästebuch. Siehe
auch auf meiner Link-
Seite
|
|
|
KONTAKT/
IMPRESSUM
|
Hier
schreibst Du Deinen Namen,
z.B. Diese Webseite gehört:.....
und Deine Mailadresse.
In manchen Ländern ist
es Vorschrift Namen und
volle Adresse anzugeben.
Bei
der Mailadresse solltest
Du das @ durch z.B. ein
Sternchen ersetzen, dann
kannst Du Spam auf diese
Adresse vermeiden.
|
|
|
LINKS
|
Auf
dieser Seite setzt Du Links
zu Deinen bevorzugten Seiten,
Freunden etc.
Es
ist gut eine Linkseite
zu haben, denn dann kannst
Du auch mit anderen Links
tauschen, was Dir wiederum
mehr Besucher bringt.
Vergiss
nicht den Disclaimer, wo
Du jede Verantwortung für
den Inhalt der verlinkten
Seiten ablehnst.
In
Deutschland gelten da bestimmte
Regeln und leider auch
eine ziemlich widerliche
Abmahnkultur. Mach Dich
schlau.
|
|
2.
|
Nun
brauchst Du ein Website
Editor Programm zum anfangen.
Als
Neuling ist Dir HTML (Programmiersprache)
fremd, so brauchst Du einen
WYSIWYG (What
You
See
Is
What
You
Get)
Editor, bei dem Du die
Seiten gestalten kannst
und der es im Hintergrund
in HTML umwandelt.
Davon
gibt es einige auf dem
Markt in allen Preislagen.
Die billigen sind meist
sehr beschänkt in der Anwendung
und grenzen Dich bei der
Gestalung ein.
Das
einfachste und leichteste
Programm ist WORD. Zumindest
mal um ohne Kosten eine
kleine erste Seite zu machen
und mit WORD kennen sich
die meisten aus. Wusstest
Du nicht, dass WORD einen
Web Editor beinhaltet?
Geh ganz links oben in
>Datei > als Webseite
speichern. Du legst einen
Ordner für Deine Webseite
an und speicherst die Seite
darin. In WORD 98 gab es
noch einen Webseiten Assistent,
der aber in den neueren
Versionen nicht mehr vorhanden
ist.
Mit
steigendem Anspruch besorgst
Du Dir dann besser einen
richtigen Web Editor.
Viele
Leute benützen Frontpage,
es ist eines der billigen
Programme. Es hat aber
seine Grenzen. Ich persönlich
mags nicht so und arbeite
nicht damit.
Ein
sehr guter Web Editor ist in
meinen Augen ist NAMO,
mittlere Preislage.
Wenn
Du nicht versessen darauf
bist, die letzte Version
zu haben, kannst Du z.B.
bei Ebay eine ältere Version
(z.B. Namo 5.0) zum kleinen
Preis kaufen. Auch damit
kannst Du eine erfolgreiche
Webseite gestalten.
In
der obersten Klasse ist
dann der
DREAMWEAVER, teuer und
für Neulige nicht geeignet.
Vermeide
es eine Webseite mit Frames
zu erstellen, die meisten
Browser pflücken sie in
den Listen entzwei!
|
| 3.
|
Du
brauchst auch ein Fotoprogramm,
worin Du Deine Bilder auf
Webgrösse bearbeiten kannst.
Auch
um Buttons zu beschriften
oder Überschriften als
Grafik zu erstellen brauchst
Du es
|
| 4.
|
Nun
startet der kreative Teil:
Überlege
welche Farben Du verwenden
willst. Es sieht professioneller
aus wenn man die gleiche
Hintergrundfarbe auf allen
Seiten verwendet. Eine
andere Farbe auf jeder
Seite wirkt chaotisch und
weist Dich als Anfänger
aus. Verwende keine schreienden
Farben als Hintergrund
wie
ROT,
BLAU,
GRÜN,
GELB,
sie
tun grossflächig angewendet
den Augen weh. Wähle einen
gedämpfteren Ton
Du
kannst auch einen gemusterten
Hintergrund z.B. von meiner
Webseite nehmen oder eines
der Websets verwenden.
Wenn
Du einen stark gemusterten
Hintergrund verwenden willst,
wo der Text nur schlecht
lesbar ist, kannst Du es
machen wie in Beispiel
3
Dann
musst Du Dir klarwerden,
wie Du die Navigation haben
willst, vertikal rechts
oder links, oder horizontal.
Bei der vertikalen Anordnung
hast Du keine Beschränkung,
aber bei der horizontalen
bist Du in der Anzahl der
Buttons durch die Breite
beschränkt.
Es
ist besser die Navigationsleiste
auf jeder Seite zu haben.
Es ist unbequem für den
Besucher, wenn er immer
wieder auf die 1.Seite
zurück muss, um weiter
zu kommen.
Die
beste Methode ist es, die
Navigations Buttons in
eine unsichtbare Tabelle
zu stecken (siehe Beispiel
1 + 2)und
alle Buttons mit dem entsprechenden
Hyperlink zu versehen.
So musst Du diese Navi-Leiste
nur einmal machen und kannst
sie dann auf alle folgenden
Seiten kopieren.
|
| 5.
|
Wenn
Du eine spezielle Schrift
möchtest, beschränke Dich
auf die Titel und erstelle
sie als Grafik.
Denke
daran, dass nicht alle
genau diese Schrift auf
ihrem Computer installiert
haben. Sie wird durch eine
andere ersetzt
und das
kann dann hässlich aussehen.
Die
Standard-Webschriften sind:
Arial,
Century
Gothic,
Times
New Roman,
Tahoma
and Verdana,
Comic
Sans
|
| 6.
|
Nun
ist es Zeit die Buttons
vorzubereiten.
Wenn
Du die schon beschrifteten
von einem Webset nimmst,
ist die Arbeit schon getan.
Wenn
Du eigene willst, bearbeite
und beschrifte sie in Deinem
Photoprogramm.
Nimm
das längste Wort Deiner
Seitennamen und richte
Schrift-Art und -Grösse danach
aus. Speichere die Buttons
als Gif datei, bei
JPG sieht Text verschwommen
aus.
|
| 7.
|
So
nun kannst Du Deiner Kreativität
im Seiten gestalten freie
Bahn lassen.
|
| 8.
|
Inzwischen solltest
Du Dir mal Gedanken über
den Domainnamen machen.
Die
Domain ist der offizielle
Name Deiner Webseite,
von überall abrufbar.
Such
im Internet nach günstigen
Angeboten. Eine .com Domain
kostet sollte z.B. nicht mehr
als 10$ p.Jahr kosten
Es
gibt auch Host Packages,
wo die Domain drin ist,
aber meist bezahlt man
dann mehr für das Hosting
und ein Wechsel unter Mitnahme
der Domain wird kompliziert.
Es
ist meist besser, wenn
man die Domain selbst registriert
und sich dann einen Host
Server aussucht.
|
| 9.
|
Dann
brauchst Du eben einen
Host Server, quasi einen
Wohnort für Deine Domain.
Darauf
lädst Du Deine Seiten und
der Host Server bringt
sie ins Internet.
Es
gibt unzählige Angebote
für ganz unterschiedliche
Preise.
Schau
dass Du min 15-20MB Speicher
bekommst, noch besser ist es
wenn's mehr ist
|
| 10.
|
Zum
Aufladen Deiner Webseite
brauchst Du noch ein FTP
Programm, das bekommst
Du Gratis im Internet.
Denk
daran: Benutze für Deine
Seitennamen/Ordner/Dateien
keine Sonderzeichen wie
é,à ö ä etc.
nur
Buchstaben, Zahlen, Bindestriche,
Punkte und + gehen durch.
Alles andere akzeptiert
der Server nicht.
|
|
Ein
paar nützliche Links:
|
|
http://bravenet.com/
|
Eine
kanadische Firma, wo Du
Domains und Hosting zu
einem guten Preis bekommst
Du
bekommst da auch gratis
Zähler, Gästebuch, Clip
Art und vieles andere mehr.
Der
Nachteil bei letzteren,
es ist Werbung dabei.
|
|
www.namo.com
|
Um
einen Blick auf den Namo
Web Editor zu werfen, kannst Du
Dir auch eine Demo-Version
herunterladen.
Du
kannst aber auch günstig
eine ältere Version z.B.
bei Ebay erstehen,
das
kostet Dich einen Bruchteil
und genügt vollkommen,
um eine schöne Webseite
zu gestalten
|
|
Adobe
|
Mein
Favorit unter den Fotoprogrammen
ist Adobe Photoshop Elements.
Meiner
Ansicht nach ist es vielseitiger
als der Adobe Photoshop
(den ich auch habe)
und
bietet fast unlimitierte
Möglichkeiten Fotos zu
retuschieren, Grafiken
zu gestalten etc. Hier
kannst Du ebenso eine Vorversion
der Aktuellen z.B. bei
Ebay zu einem freundlichen
Preis erwerben
|
|
Hosting
|
Ich
bin sehr zufrieden mit Metanet.ch,
die ein sehr gutes Preis/Leistungsverhältnis
und guten Support anbieten
Für
CHF 7.70 (ca € 5.-) p. Monat
bekommt man 17 GB Speicherplatz
und kann beliebig viel Domains
aufschalten
|
|
Cool
Web Scroll Bars
|
ein
kleines Programm mit dem
Du die Rollleisten passend
zu Deiner Webseite einfärben
kannst. Gratis.
|
|
Gästebuch
|
siehe
Links
|
|
Besucherzähler
|
siehe
Links
|
Natürlich
gibt es da noch viel mehr.
Ich
hoffe die Tips helfen Dir ein bisschen,
um eine schöne Webseite zu kreieren.
Viel
Erfolg
|
Beispiel 1
|
|
Titel
oder Banner
|
|



 
|
|
|

Hier
kannst Du Deinen
Text plazieren.
Durch die Tabelle
bleibt er genau
da, wo er soll
|
|
|
|
Beispiel
um die Navigation auf der linken Seite
zu plazieren mit Hilfe einer unsichtbaren
Tabelle. Genau sokann man die Navi
auch rechts plazieren
Hier
sind zur Demo die unsichtbaren Tabellen
dunkel.
Um
Text oder Fotos einzusetzen, machst
Du eine weitere Tabelle (hier weiss)
in
die erste Tabelle
|
Beispiel 2
|
Titel
oder Banner
|
|

|
|
Auch
hier geht alles
mit Tabellen

|
|
|
|
Wenn
Du nicht zuviele Seiten hast (etwa
6 bis 7, abhängig von der Breite der
Buttons),
kannst
Du die Navigation auch horizontal setzen
|
Beispiel 3
|
|
Meine
Webseite
|
|
|





|
|
Die
Blume
Dies
ist die obenliegende
Tabelle mit
dem uni Hintergrund

|
|
|
|
Wenn
Du einen stark gemusterten Hintergrund
wählst, ist Text daruf praktisch nicht
lesbar.
Setz
den Hintergrund für die ganze Seite,
dann mach einen Aufbau mit Tabelle
erwähnt in Beispiel.
Dann
eine weitere Tabelle darauf mit einem
uni Hintergrund.
Darauf
ist dann dein Text gut lesbar und es
sieht erst noch gut aus. der gemusterte
Hintergrund ist dann wie ein Rahmen.
|
Beispiel 4
|
|
Auch
dies ist eine Möglichkeit Deine Webseite
zu gestalten.
|
Wenn
Du Fragen hast, helf ich Dir im Rahmen meiner Möglichkeiten
gerne weiter.

|